npm - @knocklabs/react - Versions diffs - 0.11.12 → 0.11.13 - Mend

@knocklabs/react 0.11.12 → 0.11.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,20 @@
 # Changelog
+## 0.11.13
+### Patch Changes
+- af81cf2: [Guides] Add a Open in dashboard button to guide toolbar v2
+- 31dffc1: [Guides] Use `readyToTarget` to coordinate fetching guides in guide toolbar v2
+- 2798bbb: [Guides] Add reset engagement button in guide toolbar v2
+- 474120d: [Guides] Remove local storage persistence of guide toolbar v2 run config
+- 8137b4d: [Guides] Address more polish + feedback items in guide toolbar v2
+- Updated dependencies [af81cf2]
+- Updated dependencies [31dffc1]
+- Updated dependencies [2798bbb]
+  - @knocklabs/client@0.21.8
+  - @knocklabs/react-core@0.13.8
 ## 0.11.12
 ### Patch Changes

package/dist/cjs/index.js CHANGED Viewed

@@ -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/icon");require("@telegraph/segmented-control");require("@telegraph/tooltip");require("@knocklabs/client");require("@telegraph/toggle");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("@knocklabs/client");require("@telegraph/icon");require("@telegraph/segmented-control");require("@telegraph/tooltip");require("@telegraph/toggle");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/V2/FocusChin.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("@knocklabs/react-core"),d=require("@telegraph/button"),b=require("@telegraph/layout"),p=require("@telegraph/tooltip"),h=require("@telegraph/typography"),f=require("lucide-react"),k=require("react"),v=require("./GuideRow.js");function C(e){if(e&&typeof e=="object"&&"default"in e)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const t=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(n,o,t.get?t:{enumerable:!0,get:()=>e[o]})}}return n.default=e,Object.freeze(n)}const c=C(k),m=60,y=(e,n)=>{requestAnimationFrame(()=>{const o=e.querySelector(`[${v.GUIDE_ROW_DATA_SELECTOR}="${CSS.escape(n)}"]`);if(!o||!(o instanceof HTMLElement))return;const t=e.getBoundingClientRect(),l=o.getBoundingClientRect();l.top<t.top?e.scrollTo({top:e.scrollTop-(t.top-l.top)-m,behavior:"smooth"}):l.bottom>t.bottom&&e.scrollTo({top:e.scrollTop+(l.bottom-t.bottom)+m,behavior:"smooth"})})},E=({guides:e,guideListRef:n})=>{const{client:o}=g.useGuideContext(),{debugSettings:t}=g.useStore(o.store,r=>({debugSettings:r.debug})),l=Object.keys((t==null?void 0:t.focusedGuideKeys)||{});if(!(l.length>0))return null;const a=l[0];return c.createElement(b.Box,{borderTop:"px",px:"3",py:"1",overflow:"hidden",backgroundColor:"blue-2"},c.createElement(b.Stack,{align:"center",justify:"space-between",gap:"4"},c.createElement(h.Text,{as:"span",size:"1",weight:"medium",color:"blue",style:{display:"block",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0}},"Focus mode: ",a),c.createElement(b.Stack,{align:"center",gap:"1",style:{flexShrink:0}},c.createElement(p.Tooltip,{label:"Focus previous guide"},c.createElement(d.Button,{size:"0",variant:"ghost",color:"blue",leadingIcon:{icon:f.ChevronLeft,alt:"Previous guide"},onClick:()=>{const r=e.filter(i=>!!i.annotation.selectable.status),u=r.findIndex(i=>i.key===a),s=u<=0?void 0:r[u-1];s&&(o.setDebug({...t,focusedGuideKeys:{[s.key]:!0}}),n.current&&y(n.current,s.key))}})),c.createElement(p.Tooltip,{label:"Focus next guide"},c.createElement(d.Button,{size:"0",variant:"ghost",color:"blue",leadingIcon:{icon:f.ChevronRight,alt:"Next guide"},onClick:()=>{const r=e.filter(i=>!!i.annotation.selectable.status),u=r.findIndex(i=>i.key===a),s=u<0||u+1>r.length-1?void 0:r[u+1];s&&(o.setDebug({...t,focusedGuideKeys:{[s.key]:!0}}),n.current&&y(n.current,s.key))}})),c.createElement(p.Tooltip,{label:"Exit focus lock"},c.createElement(d.Button,{size:"0",variant:"ghost",color:"blue",leadingIcon:{icon:f.X,alt:"Clear focus"},onClick:()=>{o.setDebug({...t,focusedGuideKeys:{}})}})))))};exports.FocusChin=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("@knocklabs/react-core"),d=require("@telegraph/button"),p=require("@telegraph/layout"),b=require("@telegraph/tooltip"),T=require("@telegraph/typography"),f=require("lucide-react"),v=require("react"),C=require("./GuideRow.js"),g=require("./helpers.js");function k(e){if(e&&typeof e=="object"&&"default"in e)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const t=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(n,o,t.get?t:{enumerable:!0,get:()=>e[o]})}}return n.default=e,Object.freeze(n)}const r=k(v),y=60,h=(e,n)=>{requestAnimationFrame(()=>{const o=e.querySelector(`[${C.GUIDE_ROW_DATA_SELECTOR}="${CSS.escape(n)}"]`);if(!o||!(o instanceof HTMLElement))return;const t=e.getBoundingClientRect(),s=o.getBoundingClientRect();s.top<t.top?e.scrollTo({top:e.scrollTop-(t.top-s.top)-y,behavior:"smooth"}):s.bottom>t.bottom&&e.scrollTo({top:e.scrollTop+(s.bottom-t.bottom)+y,behavior:"smooth"})})},E=({guides:e,guideListRef:n})=>{const{client:o}=m.useGuideContext(),{debugSettings:t}=m.useStore(o.store,c=>({debugSettings:c.debug})),s=Object.keys((t==null?void 0:t.focusedGuideKeys)||{});if(!(s.length>0))return null;const a=s[0];return r.createElement(p.Box,{borderTop:"px",px:"3",py:"1",overflow:"hidden",backgroundColor:"blue-2"},r.createElement(p.Stack,{align:"center",justify:"space-between",gap:"4"},r.createElement(T.Text,{as:"span",size:"1",weight:"medium",color:"blue",style:{display:"block",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0}},"Focus mode: ",a),r.createElement(p.Stack,{align:"center",gap:"1",style:{flexShrink:0}},r.createElement(b.Tooltip,{label:"Focus previous guide",...g.sharedTooltipProps},r.createElement(d.Button,{size:"0",variant:"ghost",color:"blue",leadingIcon:{icon:f.ChevronLeft,alt:"Previous guide"},onClick:()=>{const c=e.filter(i=>!!i.annotation.selectable.status),u=c.findIndex(i=>i.key===a),l=u<=0?void 0:c[u-1];l&&(o.setDebug({...t,focusedGuideKeys:{[l.key]:!0}}),n.current&&h(n.current,l.key))}})),r.createElement(b.Tooltip,{label:"Focus next guide",...g.sharedTooltipProps},r.createElement(d.Button,{size:"0",variant:"ghost",color:"blue",leadingIcon:{icon:f.ChevronRight,alt:"Next guide"},onClick:()=>{const c=e.filter(i=>!!i.annotation.selectable.status),u=c.findIndex(i=>i.key===a),l=u<0||u+1>c.length-1?void 0:c[u+1];l&&(o.setDebug({...t,focusedGuideKeys:{[l.key]:!0}}),n.current&&h(n.current,l.key))}})),r.createElement(b.Tooltip,{label:"Exit focus mode",...g.sharedTooltipProps},r.createElement(d.Button,{size:"0",variant:"ghost",color:"blue",leadingIcon:{icon:f.X,alt:"Clear focus"},onClick:()=>{o.setDebug({...t,focusedGuideKeys:{}})}})))))};exports.FocusChin=E;
 //# sourceMappingURL=FocusChin.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FocusChin.js","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/FocusChin.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport { ChevronLeft, ChevronRight, X } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { GUIDE_ROW_DATA_SELECTOR } from \"./GuideRow\";\nimport { InspectionResultOk } from \"./useInspectGuideClientStore\";\n\n// Extra scroll overshoot so the focused guide plus ~1-2 neighbors are visible,\n// reducing how often consecutive next/prev clicks trigger a scroll.\nconst SCROLL_OVERSHOOT = 60;\n\nconst maybeScrollGuideIntoView = (container: HTMLElement, guideKey: string) => {\n requestAnimationFrame(() => {\n const el = container.querySelector(\n `[${GUIDE_ROW_DATA_SELECTOR}=\"${CSS.escape(guideKey)}\"]`,\n );\n if (!el \|\| !(el instanceof HTMLElement)) return;\n\n const containerRect = container.getBoundingClientRect();\n const elRect = el.getBoundingClientRect();\n\n if (elRect.top < containerRect.top) {\n container.scrollTo({\n top:\n container.scrollTop -\n (containerRect.top - elRect.top) -\n SCROLL_OVERSHOOT,\n behavior: \"smooth\",\n });\n } else if (elRect.bottom > containerRect.bottom) {\n container.scrollTo({\n top:\n container.scrollTop +\n (elRect.bottom - containerRect.bottom) +\n SCROLL_OVERSHOOT,\n behavior: \"smooth\",\n });\n }\n });\n};\n\ntype Props = {\n guides: InspectionResultOk[\"guides\"];\n guideListRef: React.RefObject<HTMLDivElement \| null>;\n};\n\nexport const FocusChin = ({ guides, guideListRef }: Props) => {\n const { client } = useGuideContext();\n const { debugSettings } = useStore(client.store, (state) => ({\n debugSettings: state.debug,\n }));\n\n const focusedKeys = Object.keys(debugSettings?.focusedGuideKeys \|\| {});\n\n const isFocused = focusedKeys.length > 0;\n if (!isFocused) {\n return null;\n }\n\n const currentKey = focusedKeys[0]!;\n\n return (\n <Box\n borderTop=\"px\"\n px=\"3\"\n py=\"1\"\n overflow=\"hidden\"\n backgroundColor=\"blue-2\"\n >\n <Stack align=\"center\" justify=\"space-between\" gap=\"4\">\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color=\"blue\"\n style={{\n display: \"block\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n minWidth: 0,\n }}\n >\n Focus mode: {currentKey}\n </Text>\n <Stack align=\"center\" gap=\"1\" style={{ flexShrink: 0 }}>\n <Tooltip label=\"Focus previous guide\">\n <Button\n size=\"0\"\n variant=\"ghost\"\n color=\"blue\"\n leadingIcon={{ icon: ChevronLeft, alt: \"Previous guide\" }}\n onClick={() => {\n const selectableGuides = guides.filter(\n (g) => !!g.annotation.selectable.status,\n );\n const currIndex = selectableGuides.findIndex(\n (g) => g.key === currentKey,\n );\n const prevGuide =\n currIndex <= 0 ? undefined : selectableGuides[currIndex - 1];\n\n if (!prevGuide) return;\n\n client.setDebug({\n ...debugSettings,\n focusedGuideKeys: { [prevGuide.key]: true },\n });\n\n if (guideListRef.current) {\n maybeScrollGuideIntoView(guideListRef.current, prevGuide.key);\n }\n }}\n />\n </Tooltip>\n <Tooltip label=\"Focus next guide\">\n <Button\n size=\"0\"\n variant=\"ghost\"\n color=\"blue\"\n leadingIcon={{ icon: ChevronRight, alt: \"Next guide\" }}\n onClick={() => {\n const selectableGuides = guides.filter(\n (g) => !!g.annotation.selectable.status,\n );\n const currIndex = selectableGuides.findIndex(\n (g) => g.key === currentKey,\n );\n const nextGuide =\n currIndex < 0 \|\| currIndex + 1 > selectableGuides.length - 1\n ? undefined\n : selectableGuides[currIndex + 1];\n\n if (!nextGuide) return;\n\n client.setDebug({\n ...debugSettings,\n focusedGuideKeys: { [nextGuide.key]: true },\n });\n\n if (guideListRef.current) {\n maybeScrollGuideIntoView(guideListRef.current, nextGuide.key);\n }\n }}\n />\n </Tooltip>\n <Tooltip label=\"Exit focus ~~lock~~\">\n <Button\n size=\"0\"\n variant=\"ghost\"\n color=\"blue\"\n leadingIcon={{ icon: X, alt: \"Clear focus\" }}\n onClick={() => {\n client.setDebug({ ...debugSettings, focusedGuideKeys: {} });\n }}\n />\n </Tooltip>\n </Stack>\n </Stack>\n </Box>\n );\n};\n"],"names":["SCROLL_OVERSHOOT","maybeScrollGuideIntoView","container","guideKey","requestAnimationFrame","el","querySelector","GUIDE_ROW_DATA_SELECTOR","CSS","escape","HTMLElement","containerRect","getBoundingClientRect","elRect","top","scrollTo","scrollTop","behavior","bottom","FocusChin","guides","guideListRef","client","useGuideContext","debugSettings","useStore","store","state","debug","focusedKeys","Object","keys","focusedGuideKeys","length","currentKey","React","Box","Stack","Text","display","overflow","textOverflow","whiteSpace","minWidth","flexShrink","Tooltip","Button","icon","ChevronLeft","alt","selectableGuides","filter","g","annotation","selectable","status","currIndex","findIndex","key","prevGuide","undefined","setDebug","current","ChevronRight","nextGuide","X"],"mappings":"~~6oBAaMA~~,EAAmB,GAEnBC,EAA2BA,CAACC,EAAwBC,IAAqB,CAC7EC,sBAAsB,IAAM,CACpBC,MAAAA,EAAKH,EAAUI,cACnB,IAAIC,EAAAA,uBAAuB,KAAKC,IAAIC,OAAON,CAAQ,CAAC,IACtD,EACA,GAAI,CAACE,GAAM,EAAEA,aAAcK,aAAc,OAEnCC,MAAAA,EAAgBT,EAAUU,sBAAsB,EAChDC,EAASR,EAAGO,sBAAsB,EAEpCC,EAAOC,IAAMH,EAAcG,IAC7BZ,EAAUa,SAAS,CACjBD,IACEZ,EAAUc,WACTL,EAAcG,IAAMD,EAAOC,KAC5Bd,EACFiB,SAAU,QAAA,CACX,EACQJ,EAAOK,OAASP,EAAcO,QACvChB,EAAUa,SAAS,CACjBD,IACEZ,EAAUc,WACTH,EAAOK,OAASP,EAAcO,QAC/BlB,EACFiB,SAAU,QAAA,CACX,CACH,CACD,CACH,EAOaE,EAAYA,CAAC,CAAEC,OAAAA,EAAQC,aAAAA,CAAoB,IAAM,CACtD,KAAA,CAAEC,OAAAA,GAAWC,kBAAgB,EAC7B,CAAEC,cAAAA,CAAkBC,EAAAA,WAASH,EAAOI,MAAmBC,IAAA,CAC3DH,cAAeG,EAAMC,KAAAA,EACrB,EAEIC,EAAcC,OAAOC,MAAKP,GAAAA,YAAAA,EAAeQ,mBAAoB,CAAA,CAAE,EAGrE,GAAI,EADcH,EAAYI,OAAS,GAE9B,OAAA,KAGHC,MAAAA,EAAaL,EAAY,CAAC,EAEhC,OACGM,EAAA,cAAAC,EAAA,IAAA,CACC,UAAU,KACV,GAAG,IACH,GAAG,IACH,SAAS,SACT,gBAAgB,QAAA,kBAEfC,QAAM,CAAA,MAAM,SAAS,QAAQ,gBAAgB,IAAI,KAChDF,EAAA,cAACG,EACC,KAAA,CAAA,GAAG,OACH,KAAK,IACL,OAAO,SACP,MAAM,OACN,MAAO,CACLC,QAAS,QACTC,SAAU,SACVC,aAAc,WACdC,WAAY,SACZC,SAAU,CACZ,CAAA,EAAE,eAEWT,CACf,EACAC,EAAA,cAACE,SAAM,MAAM,SAAS,IAAI,IAAI,MAAO,CAAEO,WAAY,CAAA,~~CACjD~~,~~EAAAT,~~EAAA,cAACU,~~EAAAA~~,~~QAAQ~~,CAAA,MAAM,~~sBACb~~,~~EAAAV~~,EAAA,~~cAACW~~,~~EAAAA~~,~~OACC~~,~~CAAA~~,KAAK,IACL,QAAQ,QACR,MAAM,OACN,YAAa,CAAEC,KAAMC,EAAAA,YAAaC,IAAK,gBAAiB,EACxD,QAAS,IAAM,CACPC,MAAAA,~~EAAmB9B,EAAO+~~B,OAC7BC,GAAM,CAAC,CAACA,EAAEC,WAAWC,WAAWC,MACnC,EACMC,EAAYN,EAAiBO,UAC1BL,GAAAA,EAAEM,~~MAAQxB~~,CACnB,~~EACMyB~~,EACJH,GAAa,EAAII,OAAYV,EAAiBM,EAAY,CAAC,EAExDG,~~IAELrC~~,~~EAAOuC~~,SAAS,CACd,~~GAAGrC~~,EACHQ,iBAAkB,CAAE,~~CAAC2B~~,EAAUD,GAAG,EAAG,EAAA,CAAK,CAC3C,~~EAEGrC~~,~~EAAayC~~,~~SACUzC~~,EAAAA,~~EAAayC~~,QAASH,EAAUD,GAAG,EAC9D,EACA,CAEN,~~EACAvB~~,EAAA,~~cAACU~~,~~WAAQ~~,MAAM,~~kBAAA~~,~~EACZV~~,EAAA,~~cAAAW~~,~~SAAA~~,~~CACC~~,KAAK,IACL,QAAQ,QACR,MAAM,OACN,YAAa,CAAEC,KAAMgB,EAAAA,aAAcd,IAAK,YAAa,EACrD,QAAS,IAAM,CACPC,MAAAA,~~EAAmB9B,EAAO+~~B,OAC7BC,GAAM,CAAC,CAACA,EAAEC,WAAWC,WAAWC,MACnC,EACMC,EAAYN,EAAiBO,UAC1BL,GAAAA,EAAEM,~~MAAQxB~~,CACnB,~~EACM8B~~,EACJR,EAAY,GAAKA,EAAY,EAAIN,~~EAAiBjB~~,OAAS,~~EACvD2B~~,OACAV,EAAiBM,EAAY,CAAC,EAE/BQ,~~IAEL1C~~,~~EAAOuC~~,SAAS,CACd,~~GAAGrC~~,EACHQ,iBAAkB,CAAE,~~CAACgC~~,EAAUN,GAAG,EAAG,EAAA,CAAK,CAC3C,~~EAEGrC~~,~~EAAayC~~,~~SACUzC~~,EAAAA,~~EAAayC~~,QAASE,EAAUN,GAAG,EAC9D,EACA,CAEN,~~EACAvB~~,EAAA,~~cAACU~~,~~WAAQ~~,MAAM,~~iBAAA~~,~~EACZV~~,EAAA,~~cAAAW~~,~~SAAA~~,~~CACC~~,KAAK,IACL,QAAQ,QACR,MAAM,OACN,YAAa,CAAEC,KAAMkB,EAAAA,EAAGhB,IAAK,aAAc,EAC3C,QAAS,IAAM,~~CACb3B~~,~~EAAOuC~~,SAAS,CAAE,~~GAAGrC~~,EAAeQ,iBAAkB,CAAA,CAAC,CAAG,CAAA,CAC1D,CAAA,CAEN,CACF,CACF,CACF,CAEJ"}
1	+ {"version":3,"file":"FocusChin.js","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/FocusChin.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport { ChevronLeft, ChevronRight, X } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { GUIDE_ROW_DATA_SELECTOR } from \"./GuideRow\";\nimport { sharedTooltipProps } from \"./helpers\";\nimport { InspectionResultOk } from \"./useInspectGuideClientStore\";\n\n// Extra scroll overshoot so the focused guide plus ~1-2 neighbors are visible,\n// reducing how often consecutive next/prev clicks trigger a scroll.\nconst SCROLL_OVERSHOOT = 60;\n\nconst maybeScrollGuideIntoView = (container: HTMLElement, guideKey: string) => {\n requestAnimationFrame(() => {\n const el = container.querySelector(\n `[${GUIDE_ROW_DATA_SELECTOR}=\"${CSS.escape(guideKey)}\"]`,\n );\n if (!el \|\| !(el instanceof HTMLElement)) return;\n\n const containerRect = container.getBoundingClientRect();\n const elRect = el.getBoundingClientRect();\n\n if (elRect.top < containerRect.top) {\n container.scrollTo({\n top:\n container.scrollTop -\n (containerRect.top - elRect.top) -\n SCROLL_OVERSHOOT,\n behavior: \"smooth\",\n });\n } else if (elRect.bottom > containerRect.bottom) {\n container.scrollTo({\n top:\n container.scrollTop +\n (elRect.bottom - containerRect.bottom) +\n SCROLL_OVERSHOOT,\n behavior: \"smooth\",\n });\n }\n });\n};\n\ntype Props = {\n guides: InspectionResultOk[\"guides\"];\n guideListRef: React.RefObject<HTMLDivElement \| null>;\n};\n\nexport const FocusChin = ({ guides, guideListRef }: Props) => {\n const { client } = useGuideContext();\n const { debugSettings } = useStore(client.store, (state) => ({\n debugSettings: state.debug,\n }));\n\n const focusedKeys = Object.keys(debugSettings?.focusedGuideKeys \|\| {});\n\n const isFocused = focusedKeys.length > 0;\n if (!isFocused) {\n return null;\n }\n\n const currentKey = focusedKeys[0]!;\n\n return (\n <Box\n borderTop=\"px\"\n px=\"3\"\n py=\"1\"\n overflow=\"hidden\"\n backgroundColor=\"blue-2\"\n >\n <Stack align=\"center\" justify=\"space-between\" gap=\"4\">\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color=\"blue\"\n style={{\n display: \"block\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n minWidth: 0,\n }}\n >\n Focus mode: {currentKey}\n </Text>\n <Stack align=\"center\" gap=\"1\" style={{ flexShrink: 0 }}>\n <Tooltip label=\"Focus previous guide\" {...sharedTooltipProps}>\n <Button\n size=\"0\"\n variant=\"ghost\"\n color=\"blue\"\n leadingIcon={{ icon: ChevronLeft, alt: \"Previous guide\" }}\n onClick={() => {\n const selectableGuides = guides.filter(\n (g) => !!g.annotation.selectable.status,\n );\n const currIndex = selectableGuides.findIndex(\n (g) => g.key === currentKey,\n );\n const prevGuide =\n currIndex <= 0 ? undefined : selectableGuides[currIndex - 1];\n\n if (!prevGuide) return;\n\n client.setDebug({\n ...debugSettings,\n focusedGuideKeys: { [prevGuide.key]: true },\n });\n\n if (guideListRef.current) {\n maybeScrollGuideIntoView(guideListRef.current, prevGuide.key);\n }\n }}\n />\n </Tooltip>\n <Tooltip label=\"Focus next guide\" {...sharedTooltipProps}>\n <Button\n size=\"0\"\n variant=\"ghost\"\n color=\"blue\"\n leadingIcon={{ icon: ChevronRight, alt: \"Next guide\" }}\n onClick={() => {\n const selectableGuides = guides.filter(\n (g) => !!g.annotation.selectable.status,\n );\n const currIndex = selectableGuides.findIndex(\n (g) => g.key === currentKey,\n );\n const nextGuide =\n currIndex < 0 \|\| currIndex + 1 > selectableGuides.length - 1\n ? undefined\n : selectableGuides[currIndex + 1];\n\n if (!nextGuide) return;\n\n client.setDebug({\n ...debugSettings,\n focusedGuideKeys: { [nextGuide.key]: true },\n });\n\n if (guideListRef.current) {\n maybeScrollGuideIntoView(guideListRef.current, nextGuide.key);\n }\n }}\n />\n </Tooltip>\n <Tooltip label=\"Exit focus mode\" {...sharedTooltipProps}>\n <Button\n size=\"0\"\n variant=\"ghost\"\n color=\"blue\"\n leadingIcon={{ icon: X, alt: \"Clear focus\" }}\n onClick={() => {\n client.setDebug({ ...debugSettings, focusedGuideKeys: {} });\n }}\n />\n </Tooltip>\n </Stack>\n </Stack>\n </Box>\n );\n};\n"],"names":["SCROLL_OVERSHOOT","maybeScrollGuideIntoView","container","guideKey","requestAnimationFrame","el","querySelector","GUIDE_ROW_DATA_SELECTOR","CSS","escape","HTMLElement","containerRect","getBoundingClientRect","elRect","top","scrollTo","scrollTop","behavior","bottom","FocusChin","guides","guideListRef","client","useGuideContext","debugSettings","useStore","store","state","debug","focusedKeys","Object","keys","focusedGuideKeys","length","currentKey","React","Box","Stack","Text","display","overflow","textOverflow","whiteSpace","minWidth","flexShrink","Tooltip","sharedTooltipProps","Button","icon","ChevronLeft","alt","selectableGuides","filter","g","annotation","selectable","status","currIndex","findIndex","key","prevGuide","undefined","setDebug","current","ChevronRight","nextGuide","X"],"mappings":"uqBAcMA,EAAmB,GAEnBC,EAA2BA,CAACC,EAAwBC,IAAqB,CAC7EC,sBAAsB,IAAM,CACpBC,MAAAA,EAAKH,EAAUI,cACnB,IAAIC,EAAAA,uBAAuB,KAAKC,IAAIC,OAAON,CAAQ,CAAC,IACtD,EACA,GAAI,CAACE,GAAM,EAAEA,aAAcK,aAAc,OAEnCC,MAAAA,EAAgBT,EAAUU,sBAAsB,EAChDC,EAASR,EAAGO,sBAAsB,EAEpCC,EAAOC,IAAMH,EAAcG,IAC7BZ,EAAUa,SAAS,CACjBD,IACEZ,EAAUc,WACTL,EAAcG,IAAMD,EAAOC,KAC5Bd,EACFiB,SAAU,QAAA,CACX,EACQJ,EAAOK,OAASP,EAAcO,QACvChB,EAAUa,SAAS,CACjBD,IACEZ,EAAUc,WACTH,EAAOK,OAASP,EAAcO,QAC/BlB,EACFiB,SAAU,QAAA,CACX,CACH,CACD,CACH,EAOaE,EAAYA,CAAC,CAAEC,OAAAA,EAAQC,aAAAA,CAAoB,IAAM,CACtD,KAAA,CAAEC,OAAAA,GAAWC,kBAAgB,EAC7B,CAAEC,cAAAA,CAAkBC,EAAAA,WAASH,EAAOI,MAAmBC,IAAA,CAC3DH,cAAeG,EAAMC,KAAAA,EACrB,EAEIC,EAAcC,OAAOC,MAAKP,GAAAA,YAAAA,EAAeQ,mBAAoB,CAAA,CAAE,EAGrE,GAAI,EADcH,EAAYI,OAAS,GAE9B,OAAA,KAGHC,MAAAA,EAAaL,EAAY,CAAC,EAEhC,OACGM,EAAA,cAAAC,EAAA,IAAA,CACC,UAAU,KACV,GAAG,IACH,GAAG,IACH,SAAS,SACT,gBAAgB,QAAA,kBAEfC,QAAM,CAAA,MAAM,SAAS,QAAQ,gBAAgB,IAAI,KAChDF,EAAA,cAACG,EACC,KAAA,CAAA,GAAG,OACH,KAAK,IACL,OAAO,SACP,MAAM,OACN,MAAO,CACLC,QAAS,QACTC,SAAU,SACVC,aAAc,WACdC,WAAY,SACZC,SAAU,CACZ,CAAA,EAAE,eAEWT,CACf,EACAC,EAAA,cAACE,SAAM,MAAM,SAAS,IAAI,IAAI,MAAO,CAAEO,WAAY,CAAA,GACjDT,EAAA,cAACU,EAAQ,QAAA,CAAA,MAAM,uBAA2BC,GAAAA,EAAAA,oBACvCX,EAAA,cAAAY,EAAA,OAAA,CACC,KAAK,IACL,QAAQ,QACR,MAAM,OACN,YAAa,CAAEC,KAAMC,EAAAA,YAAaC,IAAK,gBAAiB,EACxD,QAAS,IAAM,CACPC,MAAAA,EAAmB/B,EAAOgC,OAC7BC,GAAM,CAAC,CAACA,EAAEC,WAAWC,WAAWC,MACnC,EACMC,EAAYN,EAAiBO,UAC1BL,GAAAA,EAAEM,MAAQzB,CACnB,EACM0B,EACJH,GAAa,EAAII,OAAYV,EAAiBM,EAAY,CAAC,EAExDG,IAELtC,EAAOwC,SAAS,CACd,GAAGtC,EACHQ,iBAAkB,CAAE,CAAC4B,EAAUD,GAAG,EAAG,EAAA,CAAK,CAC3C,EAEGtC,EAAa0C,SACU1C,EAAAA,EAAa0C,QAASH,EAAUD,GAAG,EAC9D,EACA,CAEN,EACCxB,EAAA,cAAAU,EAAA,QAAA,CAAQ,MAAM,mBAAuBC,GAAAA,oBACpC,EAAAX,EAAA,cAACY,EAAAA,QACC,KAAK,IACL,QAAQ,QACR,MAAM,OACN,YAAa,CAAEC,KAAMgB,EAAAA,aAAcd,IAAK,YAAa,EACrD,QAAS,IAAM,CACPC,MAAAA,EAAmB/B,EAAOgC,OAC7BC,GAAM,CAAC,CAACA,EAAEC,WAAWC,WAAWC,MACnC,EACMC,EAAYN,EAAiBO,UAC1BL,GAAAA,EAAEM,MAAQzB,CACnB,EACM+B,EACJR,EAAY,GAAKA,EAAY,EAAIN,EAAiBlB,OAAS,EACvD4B,OACAV,EAAiBM,EAAY,CAAC,EAE/BQ,IAEL3C,EAAOwC,SAAS,CACd,GAAGtC,EACHQ,iBAAkB,CAAE,CAACiC,EAAUN,GAAG,EAAG,EAAA,CAAK,CAC3C,EAEGtC,EAAa0C,SACU1C,EAAAA,EAAa0C,QAASE,EAAUN,GAAG,EAC9D,EACA,CAEN,EACCxB,EAAA,cAAAU,EAAA,QAAA,CAAQ,MAAM,kBAAsBC,GAAAA,oBACnC,EAAAX,EAAA,cAACY,EAAAA,QACC,KAAK,IACL,QAAQ,QACR,MAAM,OACN,YAAa,CAAEC,KAAMkB,EAAAA,EAAGhB,IAAK,aAAc,EAC3C,QAAS,IAAM,CACb5B,EAAOwC,SAAS,CAAE,GAAGtC,EAAeQ,iBAAkB,CAAA,CAAC,CAAG,CAAA,CAC1D,CAAA,CAEN,CACF,CACF,CACF,CAEJ"}

package/dist/cjs/modules/guide/components/Toolbar/V2/GuideAnnotatedStatusDot.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),l=require("@telegraph/layout"),i=require("@telegraph/tooltip"),n=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=n(r),o={blue:e.default.createElement("svg",{width:"8",height:"8",viewBox:"0 0 8 8","aria-hidden":!0},e.default.createElement("circle",{cx:"4",cy:"4",r:"4",fill:"var(--tgph-blue-9)"})),yellow:e.default.createElement("svg",{width:"8",height:"8",viewBox:"0 0 8 8","aria-hidden":!0},e.default.createElement("polygon",{points:"4,0.5 7.5,7.5 0.5,7.5",fill:"var(--tgph-yellow-9)"})),gray:e.default.createElement("svg",{width:"8",height:"8",viewBox:"0 0 8 8","aria-hidden":!0},e.default.createElement("circle",{cx:"4",cy:"4",r:"2.75",fill:"none",stroke:"var(--tgph-gray-9)",strokeWidth:"2.5"})),red:e.default.createElement("svg",{width:"8",height:"8",viewBox:"0 0 8 8","aria-hidden":!0},e.default.createElement("line",{x1:"1.5",y1:"1.5",x2:"6.5",y2:"6.5",stroke:"var(--tgph-red-9)",strokeWidth:"2",strokeLinecap:"round"}),e.default.createElement("line",{x1:"6.5",y1:"1.5",x2:"1.5",y2:"6.5",stroke:"var(--tgph-red-9)",strokeWidth:"2",strokeLinecap:"round"}))},d=({color:t,tooltip:a})=>e.default.createElement(i.Tooltip,{label:a},e.default.createElement(l.Stack,{as:"span",align:"center",justify:"center",display:"inline-flex",p:"0_5",style:{flexShrink:0}},o[t]));exports.GuideAnnotatedStatusDot=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),l=require("@telegraph/layout"),i=require("@telegraph/tooltip"),o=require("./helpers.js"),n=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=n(a),d={blue:e.default.createElement("svg",{width:"8",height:"8",viewBox:"0 0 8 8","aria-hidden":!0},e.default.createElement("circle",{cx:"4",cy:"4",r:"4",fill:"var(--tgph-blue-9)"})),yellow:e.default.createElement("svg",{width:"8",height:"8",viewBox:"0 0 8 8","aria-hidden":!0},e.default.createElement("polygon",{points:"4,0.5 7.5,7.5 0.5,7.5",fill:"var(--tgph-yellow-9)"})),gray:e.default.createElement("svg",{width:"8",height:"8",viewBox:"0 0 8 8","aria-hidden":!0},e.default.createElement("circle",{cx:"4",cy:"4",r:"2.75",fill:"none",stroke:"var(--tgph-gray-9)",strokeWidth:"2.5"})),red:e.default.createElement("svg",{width:"8",height:"8",viewBox:"0 0 8 8","aria-hidden":!0},e.default.createElement("line",{x1:"1.5",y1:"1.5",x2:"6.5",y2:"6.5",stroke:"var(--tgph-red-9)",strokeWidth:"2",strokeLinecap:"round"}),e.default.createElement("line",{x1:"6.5",y1:"1.5",x2:"1.5",y2:"6.5",stroke:"var(--tgph-red-9)",strokeWidth:"2",strokeLinecap:"round"}))},c=({color:t,tooltip:r})=>e.default.createElement(i.Tooltip,{label:r,...o.sharedTooltipProps},e.default.createElement(l.Stack,{as:"span",align:"center",justify:"center",display:"inline-flex",p:"0_5",style:{flexShrink:0}},d[t]));exports.GuideAnnotatedStatusDot=c;
 //# sourceMappingURL=GuideAnnotatedStatusDot.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"GuideAnnotatedStatusDot.js","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideAnnotatedStatusDot.tsx"],"sourcesContent":["import { Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\n\nexport type StatusColor = \"blue\" \| \"red\" \| \"yellow\" \| \"gray\";\n\n// Directly copied from the design prototype.\nconst STATUS_SHAPES: Record<StatusColor, React.ReactNode> = {\n blue: (\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n <circle cx=\"4\" cy=\"4\" r=\"4\" fill=\"var(--tgph-blue-9)\" />\n </svg>\n ),\n yellow: (\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n <polygon points=\"4,0.5 7.5,7.5 0.5,7.5\" fill=\"var(--tgph-yellow-9)\" />\n </svg>\n ),\n gray: (\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n <circle\n cx=\"4\"\n cy=\"4\"\n r=\"2.75\"\n fill=\"none\"\n stroke=\"var(--tgph-gray-9)\"\n strokeWidth=\"2.5\"\n />\n </svg>\n ),\n red: (\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n <line\n x1=\"1.5\"\n y1=\"1.5\"\n x2=\"6.5\"\n y2=\"6.5\"\n stroke=\"var(--tgph-red-9)\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n />\n <line\n x1=\"6.5\"\n y1=\"1.5\"\n x2=\"1.5\"\n y2=\"6.5\"\n stroke=\"var(--tgph-red-9)\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n />\n </svg>\n ),\n};\n\nexport const GuideAnnotatedStatusDot = ({\n color,\n tooltip,\n}: {\n color: StatusColor;\n tooltip: string;\n}) => {\n return (\n <Tooltip label={tooltip}>\n <Stack\n as=\"span\"\n align=\"center\"\n justify=\"center\"\n display=\"inline-flex\"\n p=\"0_5\"\n style={{ flexShrink: 0 }}\n >\n {STATUS_SHAPES[color]}\n </Stack>\n </Tooltip>\n );\n};\n"],"names":["STATUS_SHAPES","blue","React","yellow","gray","red","GuideAnnotatedStatusDot","color","tooltip","Tooltip","Stack","flexShrink"],"mappings":"~~uOAMMA~~,EAAsD,CAC1DC,6BACG,MAAI,CAAA,MAAM,IAAI,OAAO,IAAI,QAAQ,UAAU,cAAW,IACpDC,EAAA,QAAA,cAAA,SAAA,CAAO,GAAG,IAAI,GAAG,IAAI,EAAE,IAAI,KAAK,oBAAoB,CAAA,CACvD,EAEFC,OACGD,EAAAA,QAAA,cAAA,MAAA,CAAI,MAAM,IAAI,OAAO,IAAI,QAAQ,UAAU,cAAW,IACpDA,UAAA,cAAA,UAAA,CAAQ,OAAO,wBAAwB,KAAK,uBAAsB,CACrE,EAEFE,KACGF,EAAAA,QAAA,cAAA,MAAA,CAAI,MAAM,IAAI,OAAO,IAAI,QAAQ,UAAU,cAAW,EACrD,EAAAA,EAAAA,QAAA,cAAC,UACC,GAAG,IACH,GAAG,IACH,EAAE,OACF,KAAK,OACL,OAAO,qBACP,YAAY,KAAK,CAAA,CAErB,EAEFG,4BACG,MAAI,CAAA,MAAM,IAAI,OAAO,IAAI,QAAQ,UAAU,cAAW,IACpDH,UAAA,cAAA,OAAA,CACC,GAAG,MACH,GAAG,MACH,GAAG,MACH,GAAG,MACH,OAAO,oBACP,YAAY,IACZ,cAAc,OAAO,CAAA,0BAEtB,OACC,CAAA,GAAG,MACH,GAAG,MACH,GAAG,MACH,GAAG,MACH,OAAO,oBACP,YAAY,IACZ,cAAc,QAAO,CAEzB,CAEJ,EAEaI,EAA0BA,CAAC,CACtCC,MAAAA,EACAC,QAAAA,CAIF,4BAEKC,~~EAAAA~~,~~QAAQ~~,CAAA,MAAOD,~~GACdN~~,~~EAAAA~~,~~QAAA~~,~~cAACQ~~,~~SACC~~,GAAG,OACH,MAAM,SACN,QAAQ,SACR,QAAQ,cACR,EAAE,MACF,MAAO,CAAEC,WAAY,CAAA,~~GAEpBX~~,EAAcO,CAAK,CACtB,CACF"}
1	+ {"version":3,"file":"GuideAnnotatedStatusDot.js","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideAnnotatedStatusDot.tsx"],"sourcesContent":["import { Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\n\nimport { sharedTooltipProps } from \"./helpers\";\n\nexport type StatusColor = \"blue\" \| \"red\" \| \"yellow\" \| \"gray\";\n\n// Directly copied from the design prototype.\nconst STATUS_SHAPES: Record<StatusColor, React.ReactNode> = {\n blue: (\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n <circle cx=\"4\" cy=\"4\" r=\"4\" fill=\"var(--tgph-blue-9)\" />\n </svg>\n ),\n yellow: (\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n <polygon points=\"4,0.5 7.5,7.5 0.5,7.5\" fill=\"var(--tgph-yellow-9)\" />\n </svg>\n ),\n gray: (\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n <circle\n cx=\"4\"\n cy=\"4\"\n r=\"2.75\"\n fill=\"none\"\n stroke=\"var(--tgph-gray-9)\"\n strokeWidth=\"2.5\"\n />\n </svg>\n ),\n red: (\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n <line\n x1=\"1.5\"\n y1=\"1.5\"\n x2=\"6.5\"\n y2=\"6.5\"\n stroke=\"var(--tgph-red-9)\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n />\n <line\n x1=\"6.5\"\n y1=\"1.5\"\n x2=\"1.5\"\n y2=\"6.5\"\n stroke=\"var(--tgph-red-9)\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n />\n </svg>\n ),\n};\n\nexport const GuideAnnotatedStatusDot = ({\n color,\n tooltip,\n}: {\n color: StatusColor;\n tooltip: string;\n}) => {\n return (\n <Tooltip label={tooltip} {...sharedTooltipProps}>\n <Stack\n as=\"span\"\n align=\"center\"\n justify=\"center\"\n display=\"inline-flex\"\n p=\"0_5\"\n style={{ flexShrink: 0 }}\n >\n {STATUS_SHAPES[color]}\n </Stack>\n </Tooltip>\n );\n};\n"],"names":["STATUS_SHAPES","blue","React","yellow","gray","red","GuideAnnotatedStatusDot","color","tooltip","Tooltip","sharedTooltipProps","Stack","flexShrink"],"mappings":"iQAQMA,EAAsD,CAC1DC,6BACG,MAAI,CAAA,MAAM,IAAI,OAAO,IAAI,QAAQ,UAAU,cAAW,IACpDC,EAAA,QAAA,cAAA,SAAA,CAAO,GAAG,IAAI,GAAG,IAAI,EAAE,IAAI,KAAK,oBAAoB,CAAA,CACvD,EAEFC,OACGD,EAAAA,QAAA,cAAA,MAAA,CAAI,MAAM,IAAI,OAAO,IAAI,QAAQ,UAAU,cAAW,IACpDA,UAAA,cAAA,UAAA,CAAQ,OAAO,wBAAwB,KAAK,uBAAsB,CACrE,EAEFE,KACGF,EAAAA,QAAA,cAAA,MAAA,CAAI,MAAM,IAAI,OAAO,IAAI,QAAQ,UAAU,cAAW,EACrD,EAAAA,EAAAA,QAAA,cAAC,UACC,GAAG,IACH,GAAG,IACH,EAAE,OACF,KAAK,OACL,OAAO,qBACP,YAAY,KAAK,CAAA,CAErB,EAEFG,4BACG,MAAI,CAAA,MAAM,IAAI,OAAO,IAAI,QAAQ,UAAU,cAAW,IACpDH,UAAA,cAAA,OAAA,CACC,GAAG,MACH,GAAG,MACH,GAAG,MACH,GAAG,MACH,OAAO,oBACP,YAAY,IACZ,cAAc,OAAO,CAAA,0BAEtB,OACC,CAAA,GAAG,MACH,GAAG,MACH,GAAG,MACH,GAAG,MACH,OAAO,oBACP,YAAY,IACZ,cAAc,QAAO,CAEzB,CAEJ,EAEaI,EAA0BA,CAAC,CACtCC,MAAAA,EACAC,QAAAA,CAIF,4BAEKC,EAAQ,QAAA,CAAA,MAAOD,EAAaE,GAAAA,oBAAAA,0BAC1BC,EACC,MAAA,CAAA,GAAG,OACH,MAAM,SACN,QAAQ,SACR,QAAQ,cACR,EAAE,MACF,MAAO,CAAEC,WAAY,CAAA,GAEpBZ,EAAcO,CAAK,CACtB,CACF"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),i=require("@knocklabs/react-core"),t=require("@telegraph/layout"),d=require("@telegraph/toggle"),o=require("@telegraph/tooltip"),l=require("@telegraph/typography"),u=a=>a&&typeof a=="object"&&"default"in a?a:{default:a},e=u(c),s=()=>{const{client:a}=i.useGuideContext(),{debugSettings:n}=i.useStore(a.store,r=>({debugSettings:r.debug||{}}));return e.default.createElement(t.Box,{py:"3",px:"3"},e.default.createElement(t.Stack,{direction:"column",gap:"1",width:"full"},e.default.createElement(l.Text,{as:"span",size:"1",weight:"medium",display:"block"},"Toolbar settings"),e.default.createElement(t.Stack,{direction:"column",gap:"1"},e.default.createElement(t.Stack,{direction:"row",gap:"2",align:"center",h:"7"},e.default.createElement(o.Tooltip,{label:"Contain engagement actions to client side only"},e.default.createElement(t.Box,{width:"36",mt:"1"},e.default.createElement(l.Text,{as:"span",size:"1",weight:"medium",color:"gray",borderBottom:"px",borderStyle:"dashed"},"Sandbox engagement"))),e.default.createElement(d.Toggle.Default,{size:"1",pt:"1_5",value:!!n.skipEngagementTracking,onValueChange:r=>{a.setDebug({...n,skipEngagementTracking:r})}})),e.default.createElement(t.Stack,{direction:"row",gap:"2",align:"center",h:"7"},e.default.createElement(o.Tooltip,{label:"Ignore throttle and show next guide immediately"},e.default.createElement(t.Box,{width:"36",mt:"1"},e.default.createElement(l.Text,{as:"span",size:"1",weight:"medium",color:"gray",borderBottom:"px",borderStyle:"dashed"},"Ignore throttle"))),e.default.createElement(d.Toggle.Default,{size:"1",pt:"1_5",value:!!n.ignoreDisplayInterval,onValueChange:r=>{a.setDebug({...n,ignoreDisplayInterval:r})}})))),e.default.createElement(t.Stack,{direction:"column",gap:"1",width:"full"},e.default.createElement(o.Tooltip,{label:e.default.createElement(l.Text,{as:"span",size:"1"},"The tenant and data payload passed to the guide client that are used for targeting",e.default.createElement("br",null),"(via the targetParams prop to KnockGuideProvider)"),delayDuration:500},e.default.createElement(l.Text,{as:"span",size:"1",weight:"medium",borderBottom:"px",borderStyle:"dashed",mt:"4",style:{whiteSpace:"nowrap",width:"fit-content"}},"Target params")),e.default.createElement(t.Stack,{direction:"column",gap:"2"},e.default.createElement(t.Stack,{direction:"row",gap:"2",align:"center"},e.default.createElement(l.Text,{as:"span",size:"1",weight:"medium",color:"gray",width:"36",mt:"1"},"Tenant"),e.default.createElement(t.Box,{rounded:"2",overflow:"auto",backgroundColor:"surface-2",border:"px",p:"1",style:{flex:1,minWidth:0}},e.default.createElement("pre",{style:{fontSize:"11px",margin:0}},e.default.createElement("code",null,a.targetParams.tenant||"-")))),e.default.createElement(t.Stack,{direction:"row",gap:"2",align:"flex-start"},e.default.createElement(l.Text,{as:"span",size:"1",weight:"medium",color:"gray",width:"36",mt:"1"},"Data"),e.default.createElement(t.Box,{rounded:"2",overflow:"auto",backgroundColor:"surface-2",border:"px",p:"1",style:{flex:1,minWidth:0,minHeight:"50px",maxHeight:"200px"}},e.default.createElement("pre",{style:{fontSize:"11px",margin:0}},e.default.createElement("code",null,a.targetParams.data?JSON.stringify(a.targetParams.data,null,2):"-")))))))};exports.GuideContextDetails=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),d=require("@knocklabs/react-core"),t=require("@telegraph/layout"),c=require("@telegraph/toggle"),o=require("@telegraph/tooltip"),l=require("@telegraph/typography"),i=require("./helpers.js"),s=a=>a&&typeof a=="object"&&"default"in a?a:{default:a},e=s(u),m=()=>{const{client:a}=d.useGuideContext(),{debugSettings:n}=d.useStore(a.store,r=>({debugSettings:r.debug||{}}));return e.default.createElement(t.Box,{py:"3",px:"3"},e.default.createElement(t.Stack,{direction:"column",gap:"1",width:"full"},e.default.createElement(l.Text,{as:"span",size:"1",weight:"medium",display:"block"},"Toolbar settings"),e.default.createElement(t.Stack,{direction:"column",gap:"1"},e.default.createElement(t.Stack,{direction:"row",gap:"2",align:"center",h:"7"},e.default.createElement(o.Tooltip,{label:"When enabled, engagement actions are not sent to Knock.",...i.sharedTooltipProps},e.default.createElement(t.Box,{width:"36",mt:"1"},e.default.createElement(l.Text,{as:"span",size:"1",weight:"medium",color:"gray",borderBottom:"px",borderStyle:"dashed"},"Sandbox engagement"))),e.default.createElement(c.Toggle.Default,{size:"1",pt:"1_5",value:!!n.skipEngagementTracking,onValueChange:r=>{a.setDebug({...n,skipEngagementTracking:r})}})),e.default.createElement(t.Stack,{direction:"row",gap:"2",align:"center",h:"7"},e.default.createElement(o.Tooltip,{label:"Ignore throttle and show next guide immediately",...i.sharedTooltipProps},e.default.createElement(t.Box,{width:"36",mt:"1"},e.default.createElement(l.Text,{as:"span",size:"1",weight:"medium",color:"gray",borderBottom:"px",borderStyle:"dashed"},"Ignore throttle"))),e.default.createElement(c.Toggle.Default,{size:"1",pt:"1_5",value:!!n.ignoreDisplayInterval,onValueChange:r=>{a.setDebug({...n,ignoreDisplayInterval:r})}})))),e.default.createElement(t.Stack,{direction:"column",gap:"1",width:"full"},e.default.createElement(o.Tooltip,{label:e.default.createElement(l.Text,{as:"span",size:"1"},"The tenant and data payload passed to KnockGuideProvider. Available for use in runtime conditions."),...i.sharedTooltipProps},e.default.createElement(l.Text,{as:"span",size:"1",weight:"medium",borderBottom:"px",borderStyle:"dashed",mt:"4",style:{whiteSpace:"nowrap",width:"fit-content"}},"Target params")),e.default.createElement(t.Stack,{direction:"column",gap:"2"},e.default.createElement(t.Stack,{direction:"row",gap:"2",align:"center"},e.default.createElement(l.Text,{as:"span",size:"1",weight:"medium",color:"gray",width:"36",mt:"1"},"Tenant"),e.default.createElement(t.Box,{rounded:"2",overflow:"auto",backgroundColor:"surface-2",border:"px",p:"1",style:{flex:1,minWidth:0}},e.default.createElement("pre",{style:{fontSize:"11px",margin:0}},e.default.createElement("code",null,a.targetParams.tenant||"-")))),e.default.createElement(t.Stack,{direction:"row",gap:"2",align:"flex-start"},e.default.createElement(l.Text,{as:"span",size:"1",weight:"medium",color:"gray",width:"36",mt:"1"},"Data"),e.default.createElement(t.Box,{rounded:"2",overflow:"auto",backgroundColor:"surface-2",border:"px",p:"1",style:{flex:1,minWidth:0,minHeight:"50px",maxHeight:"200px"}},e.default.createElement("pre",{style:{fontSize:"11px",margin:0}},e.default.createElement("code",null,a.targetParams.data?JSON.stringify(a.targetParams.data,null,2):"-")))))))};exports.GuideContextDetails=m;
 //# sourceMappingURL=GuideContextDetails.js.map

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

	@@ -1 +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 { Toggle } from \"@telegraph/toggle\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\n\nexport const GuideContextDetails = () => {\n const { client } = useGuideContext();\n const { debugSettings } = useStore(client.store, (state) => ({\n debugSettings: state.debug \|\| {},\n }));\n\n return (\n <Box py=\"3\" px=\"3\">\n <Stack direction=\"column\" gap=\"1\" width=\"full\">\n <Text as=\"span\" size=\"1\" weight=\"medium\" display=\"block\">\n Toolbar settings\n </Text>\n <Stack direction=\"column\" gap=\"1\">\n <Stack direction=\"row\" gap=\"2\" align=\"center\" h=\"7\">\n <Tooltip label=\"~~Contain~~ engagement actions to ~~client~~ ~~side~~ ~~only~~\">\n <Box width=\"36\" mt=\"1\">\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color=\"gray\"\n borderBottom=\"px\"\n borderStyle=\"dashed\"\n >\n Sandbox engagement\n </Text>\n </Box>\n </Tooltip>\n <Toggle.Default\n size=\"1\"\n pt=\"1_5\"\n value={!!debugSettings.skipEngagementTracking}\n onValueChange={(value: boolean) => {\n client.setDebug({\n ...debugSettings,\n skipEngagementTracking: value,\n });\n }}\n />\n </Stack>\n <Stack direction=\"row\" gap=\"2\" align=\"center\" h=\"7\">\n <Tooltip label=\"Ignore throttle and show next guide immediately\">\n <Box width=\"36\" mt=\"1\">\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color=\"gray\"\n borderBottom=\"px\"\n borderStyle=\"dashed\"\n >\n Ignore throttle\n </Text>\n </Box>\n </Tooltip>\n <Toggle.Default\n size=\"1\"\n pt=\"1_5\"\n value={!!debugSettings.ignoreDisplayInterval}\n onValueChange={(value: boolean) => {\n client.setDebug({\n ...debugSettings,\n ignoreDisplayInterval: value,\n });\n }}\n />\n </Stack>\n </Stack>\n </Stack>\n <Stack direction=\"column\" gap=\"1\" width=\"full\">\n <Tooltip\n label={\n <Text as=\"span\" size=\"1\">\n The tenant and data payload passed to ~~the guide client that are\~~n ~~used~~ for ~~targeting\n <br~~ ~~/>\n (via~~ ~~the~~ ~~targetParams prop to KnockGuideProvider)\~~n </Text>\n }\n ~~delayDuration=~~{~~500~~}\n >\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n borderBottom=\"px\"\n borderStyle=\"dashed\"\n mt=\"4\"\n style={{\n whiteSpace: \"nowrap\",\n width: \"fit-content\",\n }}\n >\n Target params\n </Text>\n </Tooltip>\n <Stack direction=\"column\" gap=\"2\">\n <Stack direction=\"row\" gap=\"2\" align=\"center\">\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color=\"gray\"\n width=\"36\"\n mt=\"1\"\n >\n Tenant\n </Text>\n <Box\n rounded=\"2\"\n overflow=\"auto\"\n backgroundColor=\"surface-2\"\n border=\"px\"\n p=\"1\"\n style={{ flex: 1, minWidth: 0 }}\n >\n <pre style={{ fontSize: \"11px\", margin: 0 }}>\n <code>{client.targetParams.tenant \|\| \"-\"}</code>\n </pre>\n </Box>\n </Stack>\n <Stack direction=\"row\" gap=\"2\" align=\"flex-start\">\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color=\"gray\"\n width=\"36\"\n mt=\"1\"\n >\n Data\n </Text>\n <Box\n rounded=\"2\"\n overflow=\"auto\"\n backgroundColor=\"surface-2\"\n border=\"px\"\n p=\"1\"\n style={{\n flex: 1,\n minWidth: 0,\n minHeight: \"50px\",\n maxHeight: \"200px\",\n }}\n >\n <pre style={{ fontSize: \"11px\", margin: 0 }}>\n <code>\n {client.targetParams.data\n ? JSON.stringify(client.targetParams.data, null, 2)\n : \"-\"}\n </code>\n </pre>\n </Box>\n </Stack>\n </Stack>\n </Stack>\n </Box>\n );\n};\n"],"names":["GuideContextDetails","client","useGuideContext","debugSettings","useStore","store","state","debug","Box","Stack","Text","React","Tooltip","Toggle","skipEngagementTracking","value","setDebug","ignoreDisplayInterval","whiteSpace","width","flex","minWidth","fontSize","margin","targetParams","tenant","minHeight","maxHeight","data","JSON","stringify"],"mappings":"~~4UAMaA~~,EAAsBA,IAAM,CACjC,KAAA,CAAEC,OAAAA,GAAWC,kBAAgB,EAC7B,CAAEC,cAAAA,CAAkBC,EAAAA,WAASH,EAAOI,MAAmBC,IAAA,CAC3DH,cAAeG,EAAMC,OAAS,CAAA,CAAC,EAC/B,EAEF,+BACGC,EAAI,IAAA,CAAA,GAAG,IAAI,GAAG,GAAA,0BACZC,EAAM,MAAA,CAAA,UAAU,SAAS,IAAI,IAAI,MAAM,~~gCACrCC~~,~~OAAK~~,CAAA,GAAG,OAAO,KAAK,IAAI,OAAO,SAAS,QAAQ,OAAO,EAAA,kBAExD,EACCC,~~EAAA~~,~~QAAA,~~cAAAF,~~EAAAA~~,MAAA,CAAM,UAAU,SAAS,IAAI,~~GAC5B~~,~~EAAAE~~,~~EAAA~~,~~QAAA~~,~~cAACF~~,~~SAAM~~,UAAU,MAAM,IAAI,IAAI,MAAM,SAAS,EAAE,~~KAC7CE~~,~~EAAAA~~,QAAA,~~cAAAC~~,~~UAAA~~,~~CAAQ~~,MAAM,~~kDACbD~~,EAAAA,~~QAAA~~,~~cAACH~~,~~OAAI~~,MAAM,KAAK,GAAG,~~KACjBG~~,~~EAAAA~~,~~QAAA~~,~~cAACD~~,~~OACC,~~CAAA,GAAG,OACH,KAAK,IACL,OAAO,SACP,MAAM,OACN,aAAa,KACb,YAAY,QAAA,EAAQ,oBAGtB,CACF,CACF,EACCC,EAAAA,QAAA,~~cAAAE~~,EAAAA,OAAO,QAAP,CACC,KAAK,IACL,GAAG,MACH,MAAO,CAAC,~~CAACV~~,~~EAAcW~~,uBACvB,cAAgBC,GAAmB,~~CACjCd~~,~~EAAOe~~,SAAS,CACd,~~GAAGb~~,~~EACHW~~,uBAAwBC,CAAAA,CACzB,~~CACH~~,CAAA,~~CAAE,~~CAEN,~~EACCJ~~,~~EAAAA~~,QAAA,cAAAF,~~EAAAA~~,MAAA,CAAM,UAAU,MAAM,IAAI,IAAI,MAAM,SAAS,EAAE,GAAA,~~0BAC7CG~~,~~EAAAA~~,~~QAAQ~~,~~CAAA~~,MAAM,~~iDACb~~,~~EAAAD~~,EAAAA,QAAA,~~cAACH~~,EAAAA,~~IAAI~~,~~CAAA~~,MAAM,KAAK,GAAG,~~GACjB~~,~~EAAAG~~,EAAAA,QAAA,~~cAACD~~,EAAAA,~~KACC~~,~~CAAA~~,GAAG,OACH,KAAK,IACL,OAAO,SACP,MAAM,OACN,aAAa,KACb,YAAY,~~QAAA~~,~~EAAQ~~,iBAGtB,CACF,CACF,~~EACCC~~,~~EAAAA~~,QAAA,~~cAAAE~~,~~EAAAA~~,~~OAAO~~,QAAP,CACC,KAAK,IACL,GAAG,MACH,MAAO,CAAC,~~CAACV~~,~~EAAcc~~,sBACvB,cAAgBF,GAAmB,~~CACjCd~~,~~EAAOe~~,SAAS,CACd,~~GAAGb~~,~~EACHc~~,sBAAuBF,CAAAA,CACxB,~~CACH,~~CAAA,~~CAAE~~,CAEN,CACF,CACF,~~EACCJ~~,~~EAAAA~~,~~QAAA~~,~~cAAAF~~,~~EAAAA,MAAA,CAAM,~~UAAU,SAAS,IAAI,IAAI,MAAM,~~gCACrCG~~,~~UACC~~,~~CAAA~~,~~8BACGF~~,EAAAA,~~KAAK~~,~~CAAA~~,GAAG,OAAO,KAAK,GAAA,EAAG,~~qFAGrBC~~,~~EAAAA~~,~~QAAA~~,~~cAAA~~,~~KAAA~~,~~IAAE,EAAA,mDAEL,EAEF,cAAe,GAEf,~~EAAAA,~~UAAA~~,~~cAACD~~,~~EAAAA~~,~~MACC~~,GAAG,OACH,KAAK,IACL,OAAO,SACP,aAAa,KACb,YAAY,SACZ,GAAG,IACH,MAAO,~~CACLQ~~,WAAY,SACZC,MAAO,aACT,CAAA,EAAE,eAGJ,CACF,~~0BACCV~~,EAAAA,MAAM,CAAA,UAAU,SAAS,IAAI,GAAA,0BAC3BA,EAAM,MAAA,CAAA,UAAU,MAAM,IAAI,IAAI,MAAM,QACnC,EAAAE,EAAAA,QAAA,cAACD,EACC,KAAA,CAAA,GAAG,OACH,KAAK,IACL,OAAO,SACP,MAAM,OACN,MAAM,KACN,GAAG,KAAG,QAGR,EACAC,EAAA,QAAA,cAACH,EAAAA,KACC,QAAQ,IACR,SAAS,OACT,gBAAgB,YAChB,OAAO,KACP,EAAE,IACF,MAAO,~~CAAEY~~,KAAM,EAAGC,SAAU,CAAE,CAAA,~~EAE7BV~~,EAAAA,QAAA,cAAA,MAAA,CAAI,MAAO,~~CAAEW~~,SAAU,OAAQC,OAAQ,CAAE,CAAA,0BACvC,~~OAAMtB~~,KAAAA,~~EAAOuB~~,aAAaC,QAAU,GAAI,CAC3C,CACF,CACF,~~EACCd~~,EAAAA,QAAA,cAAAF,EAAA,MAAA,CAAM,UAAU,MAAM,IAAI,IAAI,MAAM,YAAA,EAClCE,EAAAA,QAAA,cAAAD,EAAA,KAAA,CACC,GAAG,OACH,KAAK,IACL,OAAO,SACP,MAAM,OACN,MAAM,KACN,GAAG,KAAG,MAGR,EACAC,EAAA,QAAA,cAACH,EAAAA,KACC,QAAQ,IACR,SAAS,OACT,gBAAgB,YAChB,OAAO,KACP,EAAE,IACF,MAAO,~~CACLY~~,KAAM,EACNC,SAAU,EACVK,UAAW,OACXC,UAAW,OACb,CAAA,~~EAEChB~~,EAAAA,QAAA,cAAA,MAAA,CAAI,MAAO,~~CAAEW~~,SAAU,OAAQC,OAAQ,CAAA,2BACrC,~~OACEtB~~,KAAAA,~~EAAOuB~~,aAAaI,KACjBC,KAAKC,~~UAAU7B~~,~~EAAOuB~~,aAAaI,KAAM,KAAM,CAAC,EAChD,GACN,CACF,CACF,CACF,CACF,CACF,CACF,CAEJ"}
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 { Toggle } from \"@telegraph/toggle\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\n\nimport { sharedTooltipProps } from \"./helpers\";\n\nexport const GuideContextDetails = () => {\n const { client } = useGuideContext();\n const { debugSettings } = useStore(client.store, (state) => ({\n debugSettings: state.debug \|\| {},\n }));\n\n return (\n <Box py=\"3\" px=\"3\">\n <Stack direction=\"column\" gap=\"1\" width=\"full\">\n <Text as=\"span\" size=\"1\" weight=\"medium\" display=\"block\">\n Toolbar settings\n </Text>\n <Stack direction=\"column\" gap=\"1\">\n <Stack direction=\"row\" gap=\"2\" align=\"center\" h=\"7\">\n <Tooltip\n label=\"When enabled, engagement actions are not sent to Knock.\"\n {...sharedTooltipProps}\n >\n <Box width=\"36\" mt=\"1\">\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color=\"gray\"\n borderBottom=\"px\"\n borderStyle=\"dashed\"\n >\n Sandbox engagement\n </Text>\n </Box>\n </Tooltip>\n <Toggle.Default\n size=\"1\"\n pt=\"1_5\"\n value={!!debugSettings.skipEngagementTracking}\n onValueChange={(value: boolean) => {\n client.setDebug({\n ...debugSettings,\n skipEngagementTracking: value,\n });\n }}\n />\n </Stack>\n <Stack direction=\"row\" gap=\"2\" align=\"center\" h=\"7\">\n <Tooltip\n label=\"Ignore throttle and show next guide immediately\"\n {...sharedTooltipProps}\n >\n <Box width=\"36\" mt=\"1\">\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color=\"gray\"\n borderBottom=\"px\"\n borderStyle=\"dashed\"\n >\n Ignore throttle\n </Text>\n </Box>\n </Tooltip>\n <Toggle.Default\n size=\"1\"\n pt=\"1_5\"\n value={!!debugSettings.ignoreDisplayInterval}\n onValueChange={(value: boolean) => {\n client.setDebug({\n ...debugSettings,\n ignoreDisplayInterval: value,\n });\n }}\n />\n </Stack>\n </Stack>\n </Stack>\n <Stack direction=\"column\" gap=\"1\" width=\"full\">\n <Tooltip\n label={\n <Text as=\"span\" size=\"1\">\n The tenant and data payload passed to KnockGuideProvider.\n Available for use in runtime conditions.\n </Text>\n }\n {...sharedTooltipProps}\n >\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n borderBottom=\"px\"\n borderStyle=\"dashed\"\n mt=\"4\"\n style={{\n whiteSpace: \"nowrap\",\n width: \"fit-content\",\n }}\n >\n Target params\n </Text>\n </Tooltip>\n <Stack direction=\"column\" gap=\"2\">\n <Stack direction=\"row\" gap=\"2\" align=\"center\">\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color=\"gray\"\n width=\"36\"\n mt=\"1\"\n >\n Tenant\n </Text>\n <Box\n rounded=\"2\"\n overflow=\"auto\"\n backgroundColor=\"surface-2\"\n border=\"px\"\n p=\"1\"\n style={{ flex: 1, minWidth: 0 }}\n >\n <pre style={{ fontSize: \"11px\", margin: 0 }}>\n <code>{client.targetParams.tenant \|\| \"-\"}</code>\n </pre>\n </Box>\n </Stack>\n <Stack direction=\"row\" gap=\"2\" align=\"flex-start\">\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color=\"gray\"\n width=\"36\"\n mt=\"1\"\n >\n Data\n </Text>\n <Box\n rounded=\"2\"\n overflow=\"auto\"\n backgroundColor=\"surface-2\"\n border=\"px\"\n p=\"1\"\n style={{\n flex: 1,\n minWidth: 0,\n minHeight: \"50px\",\n maxHeight: \"200px\",\n }}\n >\n <pre style={{ fontSize: \"11px\", margin: 0 }}>\n <code>\n {client.targetParams.data\n ? JSON.stringify(client.targetParams.data, null, 2)\n : \"-\"}\n </code>\n </pre>\n </Box>\n </Stack>\n </Stack>\n </Stack>\n </Box>\n );\n};\n"],"names":["GuideContextDetails","client","useGuideContext","debugSettings","useStore","store","state","debug","Box","Stack","Text","React","Tooltip","sharedTooltipProps","Toggle","skipEngagementTracking","value","setDebug","ignoreDisplayInterval","whiteSpace","width","flex","minWidth","fontSize","margin","targetParams","tenant","minHeight","maxHeight","data","JSON","stringify"],"mappings":"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"}

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

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

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

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

package/dist/cjs/modules/guide/components/Toolbar/V2/GuideRowDetails.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),i=require("@telegraph/layout"),c=require("@telegraph/tooltip"),s=require("@telegraph/typography"),p=require("./GuideAnnotatedStatusDot.js"),b=require("./helpers.js"),m=require("./useInspectGuideClientStore.js"),g=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=g(d),o=({title:t,children:a})=>e.default.createElement(i.Stack,{direction:"column",justify:"flex-start",gap:"1",px:"1_5",py:"1",rounded:"2",bg:"surface-1",border:"px",borderColor:"gray-4",style:{flex:1}},e.default.createElement(s.Text,{as:"span",size:"0",color:"gray",weight:"medium"},t),e.default.createElement(i.Stack,{direction:"column",gap:"1",mt:"1"},a)),r=({label:t,value:a,color:l,tooltip:u})=>e.default.createElement(i.Stack,{align:"center",gap:"1"},e.default.createElement(c.Tooltip,{enabled:!!u,label:u,delayDuration:500},e.default.createElement(i.Stack,{as:"span",align:"center",gap:"1",display:"inline-flex"},e.default.createElement(p.GuideAnnotatedStatusDot,{color:l,tooltip:`${t}: ${a}`}),e.default.createElement(s.Text,{as:"span",size:"1",weight:"medium"},t,":"),e.default.createElement(s.Text,{as:"span",size:"1",weight:"medium",color:l},a)))),n=t=>{switch(t){case"returned":return{label:"Ready to display",color:"blue",description:"This guide is queried and ready to display"};case"throttled":return{label:"Throttled",color:"yellow",description:"This guide is queried and ready to display, but throttled currently"};case"queried":return{label:"Queued",color:"gray",description:"This guide is queried but is not ready to display"};default:return{label:"Not queried",color:"red",description:`This guide is not queried (${b.FOCUS_ERRORS.focusUnselectableGuide.toLowerCase()})`}}},f=({guide:t})=>{if(m.isUncommittedGuide(t))return e.default.createElement(i.Box,{px:"3",py:"2"},e.default.createElement(s.Text,{as:"span",size:"1",color:"gray"},"This guide has never been committed and published."));const{annotation:a}=t,l=n(a.selectable.status);return e.default.createElement(i.Stack,{px:"3",py:"2",gap:"2",direction:"row",align:"flex-start"},e.default.createElement(o,{title:"Eligibility"},e.default.createElement(r,{label:"Active",value:a.active.status?"Yes":"No",color:a.active.status?"blue":"red",tooltip:"Eligible if the guide is currently active"}),e.default.createElement(r,{label:"Archived",value:a.archived.status?"Yes":"No",color:a.archived.status?"red":"blue",tooltip:"Eligible if the guide has not been dismissed/archived by the user already"}),e.default.createElement(r,{label:"Targeting",value:a.targetable.status?"Yes":"No",color:a.targetable.status?"blue":"red",tooltip:"Eligible if the user meets the guide's targeting conditions"})),e.default.createElement(o,{title:"Visibility"},e.default.createElement(r,{label:"Activation",value:a.activatable.status?"Yes":"No",color:a.activatable.status?"blue":"red",tooltip:"Visible when the user's current location matches the guide's activation rules"}),e.default.createElement(r,{label:"Display",value:l.label,color:l.color,tooltip:e.default.createElement(s.Text,{as:"span",size:"1"},"Visible when the guide is queried via `useGuide(s)` in the current page,",e.default.createElement("br",null),"and ready to display per its position in the display pipeline:",e.default.createElement("br",null),l.description)})))};exports.GuideRowDetails=f;exports.getSelectableStatusSummary=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react"),g=require("@knocklabs/react-core"),u=require("@telegraph/button"),r=require("@telegraph/layout"),d=require("@telegraph/tooltip"),s=require("@telegraph/typography"),b=require("./GuideAnnotatedStatusDot.js"),h=require("./helpers.js"),f=require("./useInspectGuideClientStore.js"),y=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=y(p),c=({title:t,children:i})=>e.default.createElement(r.Stack,{direction:"column",justify:"flex-start",gap:"1",px:"1_5",py:"1",rounded:"2",bg:"surface-1",border:"px",borderColor:"gray-4",style:{flex:1,alignSelf:"stretch"}},e.default.createElement(s.Text,{as:"span",size:"0",color:"gray",weight:"medium"},t),e.default.createElement(r.Stack,{direction:"column",gap:"1"},i)),n=({label:t,value:i,color:a,tooltip:o,children:l})=>e.default.createElement(r.Stack,{align:"center",gap:"1"},e.default.createElement(d.Tooltip,{enabled:!!o,label:o,...h.sharedTooltipProps},e.default.createElement(r.Stack,{align:"center",gap:"1",display:"inline-flex"},e.default.createElement(b.GuideAnnotatedStatusDot,{color:a,tooltip:`${t}: ${i}`}),e.default.createElement(s.Text,{as:"span",size:"1",weight:"medium"},t,":"),!l&&e.default.createElement(s.Text,{as:"span",size:"1",weight:"medium",color:a},i))),l),m=t=>{switch(t){case"returned":return{label:"Ready to display",color:"blue",description:"The guide is queried and ready to render."};case"throttled":return{label:"Throttled",color:"yellow",description:"The guide is queried but held back by throttle settings."};case"queried":return{label:"Queued",color:"gray",description:"The guide is queried but waiting behind higher-priority guides."};default:return{label:"Not queried",color:"red",description:"No useGuide(s) call on this page matches this guide."}}},E=({guide:t})=>{const{client:i}=g.useGuideContext();if(f.isUncommittedGuide(t))return e.default.createElement(r.Box,{px:"3",py:"2"},e.default.createElement(s.Text,{as:"span",size:"1",color:"gray"},"This guide has never been committed and published."));const{annotation:a,dashboard_url:o}=t,l=m(a.selectable.status);return e.default.createElement(r.Stack,{p:"1",gap:"2",direction:"row",align:"flex-start"},e.default.createElement(c,{title:"Eligibility"},e.default.createElement(n,{label:"Active",value:a.active.status?"Yes":"No",color:a.active.status?"blue":"red",tooltip:"Whether the guide is active in this environment."}),e.default.createElement(n,{label:"Archived",value:a.archived.status?"Yes":"No",color:a.archived.status?"red":"blue",tooltip:"Whether the current user has dismissed this guide."}),e.default.createElement(n,{label:"Targeting",value:a.targetable.status?"Yes":"No",color:a.targetable.status?"blue":"red",tooltip:"Whether the current user matches the guide's targeting conditions."})),e.default.createElement(c,{title:"Visibility"},e.default.createElement(n,{label:"Activation",value:a.activatable.status?"Yes":"No",color:a.activatable.status?"blue":"red",tooltip:"Whether the current page matches the guide's activation rules."}),e.default.createElement(n,{label:"Display",value:l.label,color:l.color,tooltip:"Whether the guide has been queried and is ready to render on the current page."},e.default.createElement(d.Tooltip,{label:l.description,...h.sharedTooltipProps},e.default.createElement(s.Text,{as:"span",size:"1",weight:"medium",color:l.color},l.label)))),e.default.createElement(r.Stack,{direction:"column",justify:"flex-end",gap:"1",style:{alignSelf:"stretch"}},e.default.createElement(u.Button,{size:"0",variant:"outline",onClick:()=>i.resetEngagement(t)},"Reset engagement"),o&&e.default.createElement(u.Button,{size:"0",variant:"outline",onClick:()=>window.open(o,"_blank","noopener")},"Open in dashboard")))};exports.GuideRowDetails=E;exports.getSelectableStatusSummary=m;
 //# sourceMappingURL=GuideRowDetails.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"GuideRowDetails.js","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx"],"sourcesContent":["import { Box, Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\n\nimport {\n StatusColor,\n GuideAnnotatedStatusDot as StatusDot,\n} from \"./GuideAnnotatedStatusDot\";\nimport { ~~FOCUS_ERRORS~~ } from \"./helpers\";\nimport {\n AnnotatedGuide,\n UncommittedGuide,\n isUncommittedGuide,\n} from \"./useInspectGuideClientStore\";\n\nconst CardContainer = ({\n title,\n children,\n}: {\n title: string;\n children: React.ReactNode;\n}) => (\n <Stack\n direction=\"column\"\n justify=\"flex-start\"\n gap=\"1\"\n px=\"1_5\"\n py=\"1\"\n rounded=\"2\"\n bg=\"surface-1\"\n border=\"px\"\n borderColor=\"gray-4\"\n style={{ flex: 1 }}\n >\n <Text as=\"span\" size=\"0\" color=\"gray\" weight=\"medium\">\n {title}\n </Text>\n <Stack direction=\"column\" gap=\"1\" ~~mt=\"1\"~~>\n {children}\n </Stack>\n </Stack>\n);\n\nconst StatusRow = ({\n label,\n value,\n color,\n tooltip,\n}: {\n label: string;\n value: string;\n color: StatusColor;\n tooltip?: React.ReactNode;\n}) => {\n return (\n <Stack align=\"center\" gap=\"1\">\n <Tooltip enabled={!!tooltip} label={tooltip} ~~delayDuration=~~{~~500~~}>\n <Stack ~~as=\"span\"~~ align=\"center\" gap=\"1\" display=\"inline-flex\">\n <StatusDot color={color} tooltip={`${label}: ${value}`} />\n <Text as=\"span\" size=\"1\" weight=\"medium\">\n {label}:\n </Text>\n <Text as=\"span\" size=\"1\" weight=\"medium\" color={color}>\n {value}\n </Text>\n </Stack>\n </Tooltip>\n </Stack>\n );\n};\n\nexport type StatusSummary = {\n color: StatusColor;\n label: string;\n description: string;\n};\n\nexport const getSelectableStatusSummary = (\n status: \"returned\" \| \"throttled\" \| \"queried\" \| undefined,\n): StatusSummary => {\n switch (status) {\n case \"returned\":\n return {\n label: \"Ready to display\",\n color: \"blue\",\n description: \"~~This~~ guide is queried and ready to ~~display\~~",\n };\n case \"throttled\":\n return {\n label: \"Throttled\",\n color: \"yellow\",\n description~~:\n~~ \"~~This~~ guide is queried ~~and~~ ~~ready~~ to ~~display,~~ ~~but~~ ~~throttled currently\~~",\n };\n case \"queried\":\n return {\n label: \"Queued\",\n color: \"gray\",\n description: \"~~This~~ guide is queried but is ~~not~~ ~~ready~~ ~~to display\~~",\n };\n default:\n return {\n label: \"Not queried\",\n color: \"red\",\n description: ~~`This~~ ~~guide~~ is ~~not~~ ~~queried~~ ~~(${FOCUS_ERRORS.focusUnselectableGuide.toLowerCase()})`,\~~n };\n }\n};\n\nexport const GuideRowDetails = ({\n guide,\n}: {\n guide: AnnotatedGuide \| UncommittedGuide;\n}) => {\n if (isUncommittedGuide(guide)) {\n return (\n <Box px=\"3\" py=\"2\">\n <Text as=\"span\" size=\"1\" color=\"gray\">\n This guide has never been committed and published.\n </Text>\n </Box>\n );\n }\n\n const { annotation } = guide;\n const selectableStatusSummary = getSelectableStatusSummary(\n annotation.selectable.status,\n );\n\n return (\n <Stack px=\"3\" ~~py=\"2\"~~ gap=\"2\" direction=\"row\" align=\"flex-start\">\n <CardContainer title=\"Eligibility\">\n <StatusRow\n label=\"Active\"\n value={annotation.active.status ? \"Yes\" : \"No\"}\n color={annotation.active.status ? \"blue\" : \"red\"}\n tooltip=\"~~Eligible~~ if the guide is ~~currently~~ ~~active\~~"\n />\n <StatusRow\n label=\"Archived\"\n value={annotation.archived.status ? \"Yes\" : \"No\"}\n color={annotation.archived.status ? \"red\" : \"blue\"}\n tooltip=\"~~Eligible~~ if the ~~guide~~ has ~~not been~~ dismissed~~/archived~~ by ~~the user already\~~"\n />\n <StatusRow\n label=\"Targeting\"\n value={annotation.targetable.status ? \"Yes\" : \"No\"}\n color={annotation.targetable.status ? \"blue\" : \"red\"}\n tooltip=\"~~Eligible~~ if the user ~~meets~~ the guide's targeting conditions\"\n />\n </CardContainer>\n\n <CardContainer title=\"Visibility\">\n <StatusRow\n label=\"Activation\"\n value={annotation.activatable.status ? \"Yes\" : \"No\"}\n color={annotation.activatable.status ? \"blue\" : \"red\"}\n tooltip=\"~~Visible~~ ~~when~~ the ~~user's~~ current ~~location~~ matches the guide's activation rules\"\n />\n <StatusRow\n label=\"Display\"\n value={selectableStatusSummary.label}\n color={selectableStatusSummary.color}\n tooltip={\n <Text as=\"span\" size=\"1\">\n ~~Visible~~ ~~when~~ ~~the~~ ~~guide~~ is ~~queried via `useGuide~~(s)` in ~~the~~ ~~current~~\n ~~page,\n~~ <~~br />\~~n ~~and~~ ~~ready~~ to ~~display~~ ~~per~~ ~~its position~~ in ~~the display pipeline:\n <br />\n {selectableStatusSummary.description}~~\n </~~Text~~>\n }\n ~~/>\n~~ </~~CardContainer~~>\n </Stack>\n );\n};\n"],"names":["CardContainer","title","children","React","Stack","flex","Text","StatusRow","label","value","color","tooltip","Tooltip","StatusDot","getSelectableStatusSummary","status","description","~~FOCUS_ERRORS~~","~~focusUnselectableGuide~~","~~toLowerCase~~","~~GuideRowDetails~~","~~guide","~~isUncommittedGuide","Box","annotation","selectableStatusSummary","selectable","active","archived","targetable","activatable"],"mappings":"~~2XAeMA~~,EAAgBA,CAAC,CACrBC,MAAAA,EACAC,SAAAA,CAIF,IACEC,UAAA,cAACC,SACC,UAAU,SACV,QAAQ,aACR,IAAI,IACJ,GAAG,MACH,GAAG,IACH,QAAQ,IACR,GAAG,YACH,OAAO,KACP,YAAY,SACZ,MAAO,CAAEC,KAAM,~~CAAE~~,~~CAEjB~~,~~EAAAF~~,~~EAAA~~,~~QAAA~~,~~cAACG,~~EAAAA,~~MAAK~~,GAAG,OAAO,KAAK,IAAI,MAAM,OAAO,OAAO,~~QAAA~~,~~EAC1CL,~~CACH,~~EACAE~~,EAAAA,~~QAAA~~,~~cAACC~~,~~SAAM,~~UAAU,SAAS,IAAI,~~IAAI~~,~~GAAG~~,~~GAClCF,EAAAA,~~CACH,CACF,~~EAGIK~~,EAAYA,CAAC,CACjBC,MAAAA,EACAC,MAAAA,EACAC,MAAAA,~~EACAC~~,~~QAAAA~~,~~CAMF~~,~~IAEIR~~,EAAAA,QAAA,~~cAACC~~,EAAAA,~~MAAM~~,~~CAAA~~,MAAM,SAAS,IAAI,~~GACxB~~,~~EAAAD~~,EAAA,QAAA,~~cAACS~~,~~UAAQ~~,~~CAAA~~,QAAS,CAAC,CAACD,EAAS,MAAOA,EAAS,~~cAAe~~,~~GAC1D~~,~~EAAAR~~,~~EAAA~~,QAAA,~~cAACC~~,~~EAAM~~,MAAA,~~CAAA~~,~~GAAG,OAAO,~~MAAM,SAAS,IAAI,IAAI,QAAQ,~~aAC9C~~,~~EAAAD~~,~~EAAA,~~QAAA,~~cAACU~~,EAAAA,~~wBAAU~~,~~CAAA~~,~~MAAAH~~,EAAc,QAAS,GAAGF,CAAK,KAAKC,CAAK,EAAG,CAAA,~~EACvDN~~,EAAAA,QAAA,~~cAACG~~,~~EAAAA~~,~~KAAK~~,~~CAAA~~,GAAG,OAAO,KAAK,IAAI,OAAO,~~QAC7BE~~,~~EAAAA~~,EAAM,GACT,~~EACCL~~,~~EAAAA~~,~~QAAA~~,~~cAAAG~~,EAAAA,~~KAAA~~,~~CAAK~~,GAAG,OAAO,KAAK,IAAI,OAAO,SAAS,MAAAI,~~CACtCD~~,~~EAAAA~~,CACH,~~CACF~~,CACF,~~CACF~~,~~EAUSK~~,EACXC,GACkB,CAClB,OAAQA,EAAM,CACZ,IAAK,WACI,MAAA,~~CACLP~~,MAAO,mBACPE,MAAO,~~OACPM~~,YAAa,~~4CACf~~,EACF,IAAK,YACI,MAAA,~~CACLR~~,MAAO,YACPE,MAAO,~~SACPM~~,~~YACE~~,~~qEACJ~~,EACF,IAAK,UACI,MAAA,~~CACLR~~,MAAO,SACPE,MAAO,~~OACPM~~,~~YAAa~~,~~mDACf~~,EACF,QACS,MAAA,~~CACLR~~,MAAO,cACPE,MAAO,~~MACPM~~,YAAa,~~8BAA8BC~~,~~EAAAA,aAAaC,uBAAuBC,YAAa,~~CAAA,~~GAC9F,CAAA,~~CAEN,EAEaC,EAAkBA,CAAC,CAC9BC,MAAAA,CAGF,IAAM,~~CACAC~~,GAAAA,EAAAA,~~mBAAmBD~~,CAAK,EAC1B,~~OACGlB~~,EAAA,QAAA,~~cAAAoB~~,MAAA,CAAI,GAAG,IAAI,GAAG,GACb,~~EAAApB~~,EAAA,QAAA,~~cAACG~~,OAAK,CAAA,GAAG,OAAO,KAAK,IAAI,MAAM,QAAM,oDAErC,CACF,EAIE,KAAA,CAAEkB,WAAAA,CAAAA,~~EAAeH~~,~~EACjBI~~,~~EAA0BX~~,~~EAC9BU~~,~~EAAWE~~,~~WAAWX~~,MACxB,EAEA,~~OACGZ~~,EAAAA,QAAA,cAAAC,EAAA,MAAA,CAAM,~~GAAG~~,IAAI,~~GAAG,~~IAAI,IAAI,~~IAAI,~~UAAU,MAAM,MAAM,YAAA,~~EAChDD~~,EAAA,QAAA,cAAAH,EAAA,CAAc,MAAM,~~aAAA~~,~~EAClBG~~,EAAA,QAAA,~~cAAAI~~,~~EAAA~~,~~CACC~~,MAAM,SACN,MAAOiB,~~EAAWG~~,~~OAAOZ~~,OAAS,MAAQ,KAC1C,~~MAAOS~~,~~EAAWG~~,~~OAAOZ~~,OAAS,OAAS,MAC3C,QAAQ,~~2CAAA~~,~~CAA2C~~,~~EAErDZ~~,~~EAAA~~,QAAA,~~cAACI~~,~~EACC~~,~~CAAA~~,MAAM,WACN,MAAOiB,~~EAAWI~~,~~SAASb~~,OAAS,MAAQ,KAC5C,~~MAAOS~~,~~EAAWI~~,~~SAASb~~,OAAS,MAAQ,OAC5C,QAAQ,~~2EAA2E~~,CAAA,~~EAEpFZ~~,EAAA,QAAA,~~cAAAI~~,~~EAAA~~,~~CACC~~,MAAM,YACN,MAAOiB,~~EAAWK~~,~~WAAWd~~,OAAS,MAAQ,KAC9C,~~MAAOS~~,~~EAAWK~~,~~WAAWd~~,OAAS,OAAS,MAC/C,QAAQ,~~6DAA6D~~,CAAA,~~CAEzE~~,~~EAEAZ~~,EAAAA,QAAA,cAACH,EAAc,CAAA,MAAM,~~YACnB~~,~~EAAAG~~,~~UAAA~~,~~cAACI~~,~~EACC~~,~~CAAA~~,MAAM,aACN,MAAOiB,~~EAAWM~~,~~YAAYf~~,OAAS,MAAQ,KAC/C,~~MAAOS~~,~~EAAWM~~,~~YAAYf~~,OAAS,OAAS,MAChD,QAAQ~~,+EAA+E~~,~~CAAA~~,~~EAExFZ~~,EAAAA,QAAA,~~cAAAI~~,~~EAAA~~,~~CACC~~,MAAM,UACN,~~MAAOkB~~,~~EAAwBjB~~,MAC/B,~~MAAOiB~~,~~EAAwBf~~,MAC/B,~~QACEP~~,EAAAA,QAAA,~~cAACG~~,EAAAA,~~KAAK~~,~~CAAA~~,GAAG,~~OAAO~~,KAAK,~~GAAG~~,~~EAAA~~,~~2EAGrBH~~,~~EAAAA~~,QAAA,~~cAAA~~,~~KAAA~~,~~IAAE~~,EAAA,~~iEAEFA~~,~~EAAAA~~,QAAA,cAAA,~~KAAA~~,~~IAAE~~,~~EACFsB~~,~~EAAwBT~~,~~WAC3B~~,~~CACD~~,~~CAAA~~,~~CAEL~~,CACF,CAEJ"}
1	+ {"version":3,"file":"GuideRowDetails.js","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx"],"sourcesContent":["import { useGuideContext } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\n\nimport {\n StatusColor,\n GuideAnnotatedStatusDot as StatusDot,\n} from \"./GuideAnnotatedStatusDot\";\nimport { sharedTooltipProps } from \"./helpers\";\nimport {\n AnnotatedGuide,\n UncommittedGuide,\n isUncommittedGuide,\n} from \"./useInspectGuideClientStore\";\n\nconst CardContainer = ({\n title,\n children,\n}: {\n title: string;\n children: React.ReactNode;\n}) => (\n <Stack\n direction=\"column\"\n justify=\"flex-start\"\n gap=\"1\"\n px=\"1_5\"\n py=\"1\"\n rounded=\"2\"\n bg=\"surface-1\"\n border=\"px\"\n borderColor=\"gray-4\"\n style={{ flex: 1, alignSelf: \"stretch\" }}\n >\n <Text as=\"span\" size=\"0\" color=\"gray\" weight=\"medium\">\n {title}\n </Text>\n <Stack direction=\"column\" gap=\"1\">\n {children}\n </Stack>\n </Stack>\n);\n\nconst StatusRow = ({\n label,\n value,\n color,\n tooltip,\n children,\n}: {\n label: string;\n value: string;\n color: StatusColor;\n tooltip?: React.ReactNode;\n children?: React.ReactNode;\n}) => {\n return (\n <Stack align=\"center\" gap=\"1\">\n <Tooltip enabled={!!tooltip} label={tooltip} {...sharedTooltipProps}>\n <Stack align=\"center\" gap=\"1\" display=\"inline-flex\">\n <StatusDot color={color} tooltip={`${label}: ${value}`} />\n <Text as=\"span\" size=\"1\" weight=\"medium\">\n {label}:\n </Text>\n {/* User children over value when provided, for cases when we want to\n have its own tooltip over it */}\n {!children && (\n <Text as=\"span\" size=\"1\" weight=\"medium\" color={color}>\n {value}\n </Text>\n )}\n </Stack>\n </Tooltip>\n {children}\n </Stack>\n );\n};\n\nexport type StatusSummary = {\n color: StatusColor;\n label: string;\n description: string;\n};\n\nexport const getSelectableStatusSummary = (\n status: \"returned\" \| \"throttled\" \| \"queried\" \| undefined,\n): StatusSummary => {\n switch (status) {\n case \"returned\":\n return {\n label: \"Ready to display\",\n color: \"blue\",\n description: \"The guide is queried and ready to render.\",\n };\n case \"throttled\":\n return {\n label: \"Throttled\",\n color: \"yellow\",\n description: \"The guide is queried but held back by throttle settings.\",\n };\n case \"queried\":\n return {\n label: \"Queued\",\n color: \"gray\",\n description:\n \"The guide is queried but waiting behind higher-priority guides.\",\n };\n default:\n return {\n label: \"Not queried\",\n color: \"red\",\n description: \"No useGuide(s) call on this page matches this guide.\",\n };\n }\n};\n\nexport const GuideRowDetails = ({\n guide,\n}: {\n guide: AnnotatedGuide \| UncommittedGuide;\n}) => {\n const { client } = useGuideContext();\n\n if (isUncommittedGuide(guide)) {\n return (\n <Box px=\"3\" py=\"2\">\n <Text as=\"span\" size=\"1\" color=\"gray\">\n This guide has never been committed and published.\n </Text>\n </Box>\n );\n }\n\n const { annotation, dashboard_url: dashboardUrl } = guide;\n const selectableStatusSummary = getSelectableStatusSummary(\n annotation.selectable.status,\n );\n\n return (\n <Stack p=\"1\" gap=\"2\" direction=\"row\" align=\"flex-start\">\n <CardContainer title=\"Eligibility\">\n <StatusRow\n label=\"Active\"\n value={annotation.active.status ? \"Yes\" : \"No\"}\n color={annotation.active.status ? \"blue\" : \"red\"}\n tooltip=\"Whether the guide is active in this environment.\"\n />\n <StatusRow\n label=\"Archived\"\n value={annotation.archived.status ? \"Yes\" : \"No\"}\n color={annotation.archived.status ? \"red\" : \"blue\"}\n tooltip=\"Whether the current user has dismissed this guide.\"\n />\n <StatusRow\n label=\"Targeting\"\n value={annotation.targetable.status ? \"Yes\" : \"No\"}\n color={annotation.targetable.status ? \"blue\" : \"red\"}\n tooltip=\"Whether the current user matches the guide's targeting conditions.\"\n />\n </CardContainer>\n <CardContainer title=\"Visibility\">\n <StatusRow\n label=\"Activation\"\n value={annotation.activatable.status ? \"Yes\" : \"No\"}\n color={annotation.activatable.status ? \"blue\" : \"red\"}\n tooltip=\"Whether the current page matches the guide's activation rules.\"\n />\n <StatusRow\n label=\"Display\"\n value={selectableStatusSummary.label}\n color={selectableStatusSummary.color}\n tooltip=\"Whether the guide has been queried and is ready to render on the current page.\"\n >\n <Tooltip\n label={selectableStatusSummary.description}\n {...sharedTooltipProps}\n >\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color={selectableStatusSummary.color}\n >\n {selectableStatusSummary.label}\n </Text>\n </Tooltip>\n </StatusRow>\n </CardContainer>\n <Stack\n direction=\"column\"\n justify=\"flex-end\"\n gap=\"1\"\n style={{ alignSelf: \"stretch\" }}\n >\n <Button\n size=\"0\"\n variant=\"outline\"\n onClick={() => client.resetEngagement(guide)}\n >\n Reset engagement\n </Button>\n {dashboardUrl && (\n <Button\n size=\"0\"\n variant=\"outline\"\n onClick={() => window.open(dashboardUrl, \"_blank\", \"noopener\")}\n >\n Open in dashboard\n </Button>\n )}\n </Stack>\n </Stack>\n );\n};\n"],"names":["CardContainer","title","children","React","Stack","flex","alignSelf","Text","StatusRow","label","value","color","tooltip","Tooltip","sharedTooltipProps","StatusDot","getSelectableStatusSummary","status","description","GuideRowDetails","guide","client","useGuideContext","isUncommittedGuide","Box","annotation","dashboard_url","dashboardUrl","selectableStatusSummary","selectable","active","archived","targetable","activatable","Button","resetEngagement","window","open"],"mappings":"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"}

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

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