@knocklabs/react 0.12.0 → 0.12.1

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 (19) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/index.css +1 -1
  3. package/dist/cjs/modules/guide/components/Toolbar/V2/V2.js +1 -1
  4. package/dist/cjs/modules/guide/components/Toolbar/V2/V2.js.map +1 -1
  5. package/dist/cjs/modules/guide/components/Toolbar/styles.css.inline.js +2 -0
  6. package/dist/cjs/modules/guide/components/Toolbar/styles.css.inline.js.map +1 -0
  7. package/dist/cjs/modules/guide/components/Toolbar/useToolbarStyles.js +2 -0
  8. package/dist/cjs/modules/guide/components/Toolbar/useToolbarStyles.js.map +1 -0
  9. package/dist/esm/modules/guide/components/Toolbar/V2/V2.mjs +69 -68
  10. package/dist/esm/modules/guide/components/Toolbar/V2/V2.mjs.map +1 -1
  11. package/dist/esm/modules/guide/components/Toolbar/styles.css.inline.mjs +5 -0
  12. package/dist/esm/modules/guide/components/Toolbar/styles.css.inline.mjs.map +1 -0
  13. package/dist/esm/modules/guide/components/Toolbar/useToolbarStyles.mjs +13 -0
  14. package/dist/esm/modules/guide/components/Toolbar/useToolbarStyles.mjs.map +1 -0
  15. package/dist/index.css +1 -1
  16. package/dist/types/modules/guide/components/Toolbar/V2/V2.d.ts.map +1 -1
  17. package/dist/types/modules/guide/components/Toolbar/useToolbarStyles.d.ts +2 -0
  18. package/dist/types/modules/guide/components/Toolbar/useToolbarStyles.d.ts.map +1 -0
  19. package/package.json +13 -13
package/dist/esm/modules/guide/components/Toolbar/V2/V2.mjs CHANGED
@@ -1,9 +1,9 @@
1
- import { KnockGuideClient as L } from "@knocklabs/client";
2
- import { useGuideContext as T } from "@knocklabs/react-core";
1
+ import { KnockGuideClient as A } from "@knocklabs/client";
2
+ import { useGuideContext as B } from "@knocklabs/react-core";
3
3
  import { Button as w } from "@telegraph/button";
4
- import { Icon as B } from "@telegraph/icon";
5
- import { Box as u, Stack as i } from "@telegraph/layout";
6
- import { SegmentedControl as p } from "@telegraph/segmented-control";
4
+ import { Icon as L } from "@telegraph/icon";
5
+ import { Box as u, Stack as r } from "@telegraph/layout";
6
+ import { SegmentedControl as g } from "@telegraph/segmented-control";
7
7
  import { Tooltip as k } from "@telegraph/tooltip";
8
8
  import { Text as v } from "@telegraph/typography";
9
9
  import { GripVertical as H, ChevronDown as V, ChevronRight as j, SlidersHorizontal as M, LogOut as W, Minimize2 as Y } from "lucide-react";
@@ -11,15 +11,16 @@ import e from "react";
11
11
  import { KnockButton as F } from "../KnockButton.mjs";
12
12
  import { TOOLBAR_Z_INDEX as X } from "../shared.mjs";
13
13
  /* empty css */
14
- import { FocusChin as N } from "./FocusChin.mjs";
15
- import { GuideContextDetails as Z } from "./GuideContextDetails.mjs";
16
- import { GuideRow as q } from "./GuideRow.mjs";
14
+ import { useToolbarStyles as N } from "../useToolbarStyles.mjs";
15
+ import { FocusChin as Z } from "./FocusChin.mjs";
16
+ import { GuideContextDetails as q } from "./GuideContextDetails.mjs";
17
+ import { GuideRow as J } from "./GuideRow.mjs";
17
18
  import { Kbd as _ } from "./Kbd.mjs";
18
19
  import { sharedTooltipProps as D } from "./helpers.mjs";
19
- import { useDraggable as J } from "./useDraggable.mjs";
20
- import { useInspectGuideClientStore as Q } from "./useInspectGuideClientStore.mjs";
21
- const $ = ".", U = "540px", ee = ["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(", "), te = (l) => {
22
- switch (l) {
20
+ import { useDraggable as Q } from "./useDraggable.mjs";
21
+ import { useInspectGuideClientStore as $ } from "./useInspectGuideClientStore.mjs";
22
+ const U = ".", ee = "540px", te = ["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(", "), ne = (s) => {
23
+ switch (s) {
23
24
  case "all-guides":
24
25
  return "You have no guides. Get started by creating a guide.";
25
26
  case "only-active":
@@ -27,61 +28,61 @@ const $ = ".", U = "540px", ee = ["0 0 0 1px rgba(0, 0, 0, 0.06)", "0 0 0 1px rg
27
28
  case "only-eligible":
28
29
  return "Your current user is not eligible for any guides.";
29
30
  }
30
- }, z = (l, s) => l.filter((o) => !(s === "only-eligible" && !o.annotation.isEligible || s === "only-active" && !o.annotation.active.status)), ke = ({
31
- readyToTarget: l,
32
- listenForUpdates: s
31
+ }, z = (s, c) => s.filter((o) => !(c === "only-eligible" && !o.annotation.isEligible || c === "only-active" && !o.annotation.active.status)), De = ({
32
+ readyToTarget: s,
33
+ listenForUpdates: c
33
34
  }) => {
34
35
  const {
35
36
  client: o
36
- } = T(), [m, f] = e.useState("only-active"), [c, I] = e.useState(() => L.getToolbarRunConfigFromUrl()), [C, b] = e.useState(!1), [d, P] = e.useState(!1), [K, O] = e.useState();
37
- e.useEffect(() => {
38
- O(void 0);
37
+ } = B(), [m, f] = e.useState("only-active"), [i, I] = e.useState(() => A.getToolbarRunConfigFromUrl()), [O, b] = e.useState(!1), [d, P] = e.useState(!1), [K, C] = e.useState();
38
+ N(!!(i != null && i.isVisible)), e.useEffect(() => {
39
+ C(void 0);
39
40
  }, [m]), e.useEffect(() => {
40
41
  var h;
41
42
  const {
42
43
  isVisible: t = !1,
43
44
  focusedGuideKeys: n = {}
44
- } = c || {}, a = (h = o.store.state.debug) == null ? void 0 : h.debugging;
45
- return t && !a && l && (o.setDebug({
45
+ } = i || {}, l = (h = o.store.state.debug) == null ? void 0 : h.debugging;
46
+ return t && !l && s && (o.setDebug({
46
47
  focusedGuideKeys: n
47
- }), Object.keys(n).length > 0 && f("all-guides")), !t && a && o.unsetDebug({
48
- listenForUpdates: s
48
+ }), Object.keys(n).length > 0 && f("all-guides")), !t && l && o.unsetDebug({
49
+ listenForUpdates: c
49
50
  }), () => {
50
- var g;
51
- (g = o.store.state.debug) != null && g.debugging && o.unsetDebug({
52
- listenForUpdates: s
51
+ var p;
52
+ (p = o.store.state.debug) != null && p.debugging && o.unsetDebug({
53
+ listenForUpdates: c
53
54
  });
54
55
  };
55
- }, [l, s, c, o, f]), e.useEffect(() => {
56
+ }, [s, c, i, o, f]), e.useEffect(() => {
56
57
  const t = (n) => {
57
- n.ctrlKey && n.key === $ && !n.repeat && (n.preventDefault(), b((a) => !a));
58
+ n.ctrlKey && n.key === U && !n.repeat && (n.preventDefault(), b((l) => !l));
58
59
  };
59
60
  return window.addEventListener("keydown", t), () => {
60
61
  window.removeEventListener("keydown", t);
61
62
  };
62
63
  }, []);
63
- const G = e.useRef(null), R = e.useRef(null), {
64
- position: S,
65
- isDragging: E,
66
- handlePointerDown: y,
67
- hasDraggedRef: A
68
- } = J({
69
- elementRef: G,
70
- reclampDeps: [C],
64
+ const S = e.useRef(null), G = e.useRef(null), {
65
+ position: R,
66
+ isDragging: y,
67
+ handlePointerDown: E,
68
+ hasDraggedRef: T
69
+ } = Q({
70
+ elementRef: S,
71
+ reclampDeps: [O],
71
72
  initialPosition: {
72
73
  top: 16,
73
74
  right: 16
74
75
  }
75
- }), r = Q(c);
76
- if (!r || !(c != null && c.isVisible))
76
+ }), a = $(i);
77
+ if (!a || !(i != null && i.isVisible))
77
78
  return null;
78
- const x = r.status === "ok" ? z(r.guides, m) : [];
79
- return /* @__PURE__ */ e.createElement(u, { tgphRef: G, position: "fixed", style: {
80
- top: S.top + "px",
81
- right: S.right + "px",
79
+ const x = a.status === "ok" ? z(a.guides, m) : [];
80
+ return /* @__PURE__ */ e.createElement(u, { tgphRef: S, position: "fixed", style: {
81
+ top: R.top + "px",
82
+ right: R.right + "px",
82
83
  zIndex: X
83
- } }, C ? /* @__PURE__ */ e.createElement(k, { side: "left", label: /* @__PURE__ */ e.createElement(v, { as: "span", size: "1" }, "Guide Toolbar", /* @__PURE__ */ e.createElement(i, { display: "inline-block", ml: "3" }, /* @__PURE__ */ e.createElement(_, null, "ctrl"), " + ", /* @__PURE__ */ e.createElement(_, null, "."))), ...D }, /* @__PURE__ */ e.createElement(i, { border: "px", rounded: "4", align: "center", justify: "center", w: "10", h: "10", onPointerDown: y, backgroundColor: "surface-1", style: {
84
- cursor: E ? "grabbing" : "grab",
84
+ } }, O ? /* @__PURE__ */ e.createElement(k, { side: "left", label: /* @__PURE__ */ e.createElement(v, { as: "span", size: "1" }, "Guide Toolbar", /* @__PURE__ */ e.createElement(r, { display: "inline-block", ml: "3" }, /* @__PURE__ */ e.createElement(_, null, "ctrl"), " + ", /* @__PURE__ */ e.createElement(_, null, "."))), ...D }, /* @__PURE__ */ e.createElement(r, { border: "px", rounded: "4", align: "center", justify: "center", w: "10", h: "10", onPointerDown: E, backgroundColor: "surface-1", style: {
85
+ cursor: y ? "grabbing" : "grab",
85
86
  touchAction: "none",
86
87
  userSelect: "none",
87
88
  animation: "toolbar-collapse-fade-in 150ms ease-out"
@@ -89,37 +90,37 @@ const $ = ".", U = "540px", ee = ["0 0 0 1px rgba(0, 0, 0, 0.06)", "0 0 0 1px rg
89
90
  transform: "scale(0.7)",
90
91
  transformOrigin: "center center"
91
92
  } }, /* @__PURE__ */ e.createElement(F, { onClick: () => {
92
- A.current || b(!1);
93
- }, positioned: !1 })))) : /* @__PURE__ */ e.createElement(i, { direction: "column", backgroundColor: "surface-1", rounded: "4", overflow: "hidden", style: {
94
- width: U,
95
- boxShadow: ee,
93
+ T.current || b(!1);
94
+ }, positioned: !1 })))) : /* @__PURE__ */ e.createElement(r, { direction: "column", backgroundColor: "surface-1", rounded: "4", overflow: "hidden", style: {
95
+ width: ee,
96
+ boxShadow: te,
96
97
  animation: "toolbar-expand-fade-in 150ms ease-out"
97
- } }, /* @__PURE__ */ e.createElement(i, { w: "full", p: "2", justify: "space-between", direction: "row", align: "center", gap: "2", borderBottom: "px", onPointerDown: y, style: {
98
+ } }, /* @__PURE__ */ e.createElement(r, { w: "full", p: "2", justify: "space-between", direction: "row", align: "center", gap: "2", borderBottom: "px", onPointerDown: E, style: {
98
99
  boxSizing: "border-box",
99
- cursor: E ? "grabbing" : "grab",
100
+ cursor: y ? "grabbing" : "grab",
100
101
  touchAction: "none",
101
102
  userSelect: "none"
102
- } }, /* @__PURE__ */ e.createElement(i, { align: "center", gap: "1_5", style: {
103
+ } }, /* @__PURE__ */ e.createElement(r, { align: "center", gap: "1_5", style: {
103
104
  minWidth: 0,
104
105
  flex: 1
105
- } }, /* @__PURE__ */ e.createElement(i, { display: "inline-flex", align: "center", style: {
106
- cursor: E ? "grabbing" : "grab",
106
+ } }, /* @__PURE__ */ e.createElement(r, { display: "inline-flex", align: "center", style: {
107
+ cursor: y ? "grabbing" : "grab",
107
108
  touchAction: "none",
108
109
  userSelect: "none"
109
110
  }, onPointerDown: (t) => {
110
- t.stopPropagation(), y(t);
111
- } }, /* @__PURE__ */ e.createElement(B, { color: "gray", size: "1", icon: H, "aria-hidden": !0 })), /* @__PURE__ */ e.createElement(i, { align: "center", gap: "1_5", onPointerDown: (t) => t.stopPropagation() }, /* @__PURE__ */ e.createElement(p.Root, { size: "1", type: "single", value: m, onValueChange: (t) => {
111
+ t.stopPropagation(), E(t);
112
+ } }, /* @__PURE__ */ e.createElement(L, { color: "gray", size: "1", icon: H, "aria-hidden": !0 })), /* @__PURE__ */ e.createElement(r, { align: "center", gap: "1_5", onPointerDown: (t) => t.stopPropagation() }, /* @__PURE__ */ e.createElement(g.Root, { size: "1", type: "single", value: m, onValueChange: (t) => {
112
113
  if (!t) return;
113
- const n = o.store.state.debug, a = Object.keys((n == null ? void 0 : n.focusedGuideKeys) || {});
114
- r.status === "ok" && a.length > 0 && (z(r.guides, t).find((g) => g.key === a[0]) || o.setDebug({
114
+ const n = o.store.state.debug, l = Object.keys((n == null ? void 0 : n.focusedGuideKeys) || {});
115
+ a.status === "ok" && l.length > 0 && (z(a.guides, t).find((p) => p.key === l[0]) || o.setDebug({
115
116
  ...n,
116
117
  focusedGuideKeys: {}
117
118
  })), f(t);
118
- } }, /* @__PURE__ */ e.createElement(p.Option, { value: "all-guides", style: {
119
+ } }, /* @__PURE__ */ e.createElement(g.Option, { value: "all-guides", style: {
119
120
  width: "54px"
120
- } }, "All"), /* @__PURE__ */ e.createElement(p.Option, { value: "only-active", style: {
121
+ } }, "All"), /* @__PURE__ */ e.createElement(g.Option, { value: "only-active", style: {
121
122
  width: "54px"
122
- } }, "Active"), /* @__PURE__ */ e.createElement(p.Option, { value: "only-eligible", style: {
123
+ } }, "Active"), /* @__PURE__ */ e.createElement(g.Option, { value: "only-eligible", style: {
123
124
  width: "54px"
124
125
  } }, "Eligible")), /* @__PURE__ */ e.createElement(k, { label: "Settings", ...D }, /* @__PURE__ */ e.createElement(w, { size: "1", variant: d ? "outline" : "ghost", color: d ? "blue" : "gray", leadingIcon: {
125
126
  icon: M,
@@ -130,9 +131,9 @@ const $ = ".", U = "540px", ee = ["0 0 0 1px rgba(0, 0, 0, 0.06)", "0 0 0 1px rg
130
131
  } : {
131
132
  icon: j,
132
133
  alt: "Show context data"
133
- }, onClick: () => P((t) => !t) })))), /* @__PURE__ */ e.createElement(i, { align: "center", gap: "1_5", style: {
134
+ }, onClick: () => P((t) => !t) })))), /* @__PURE__ */ e.createElement(r, { align: "center", gap: "1_5", style: {
134
135
  flexShrink: 0
135
- }, onPointerDown: (t) => t.stopPropagation() }, /* @__PURE__ */ e.createElement(i, { align: "center", gap: "1_5" }, /* @__PURE__ */ e.createElement(w, { size: "1", variant: "outline", leadingIcon: {
136
+ }, onPointerDown: (t) => t.stopPropagation() }, /* @__PURE__ */ e.createElement(r, { align: "center", gap: "1_5" }, /* @__PURE__ */ e.createElement(w, { size: "1", variant: "outline", leadingIcon: {
136
137
  icon: W,
137
138
  alt: "Exit"
138
139
  }, onClick: () => {
@@ -143,17 +144,17 @@ const $ = ".", U = "540px", ee = ["0 0 0 1px rgba(0, 0, 0, 0.06)", "0 0 0 1px rg
143
144
  } }, "Exit"), /* @__PURE__ */ e.createElement(k, { label: "Minimize toolbar", ...D }, /* @__PURE__ */ e.createElement(w, { size: "1", variant: "outline", leadingIcon: {
144
145
  icon: Y,
145
146
  alt: "Minimize"
146
- }, onClick: () => b(!0) }))))), d && /* @__PURE__ */ e.createElement(u, { borderBottom: "px" }, /* @__PURE__ */ e.createElement(Z, null)), /* @__PURE__ */ e.createElement(u, { tgphRef: R, p: "1", overflow: "auto", style: {
147
+ }, onClick: () => b(!0) }))))), d && /* @__PURE__ */ e.createElement(u, { borderBottom: "px" }, /* @__PURE__ */ e.createElement(q, null)), /* @__PURE__ */ e.createElement(u, { tgphRef: G, p: "1", overflow: "auto", style: {
147
148
  maxHeight: "calc(80vh - 96px)"
148
- } }, r.status === "error" ? /* @__PURE__ */ e.createElement(u, { px: "2", pb: "1", style: {
149
+ } }, a.status === "error" ? /* @__PURE__ */ e.createElement(u, { px: "2", pb: "1", style: {
149
150
  lineHeight: "1.2"
150
- } }, /* @__PURE__ */ e.createElement(v, { as: "span", size: "1", weight: "medium", color: r.error === "no_guides_fetched" ? "default" : "red" }, r.message)) : x.length === 0 ? /* @__PURE__ */ e.createElement(u, { px: "2", pb: "1", style: {
151
+ } }, /* @__PURE__ */ e.createElement(v, { as: "span", size: "1", weight: "medium", color: a.error === "no_guides_fetched" ? "default" : "red" }, a.message)) : x.length === 0 ? /* @__PURE__ */ e.createElement(u, { px: "2", pb: "1", style: {
151
152
  lineHeight: "1.2"
152
- } }, /* @__PURE__ */ e.createElement(v, { as: "span", size: "1", weight: "medium", color: "default" }, te(m))) : x.map((t) => /* @__PURE__ */ e.createElement(q, { key: t.key, guide: t, orderIndex: t.orderIndex, isExpanded: t.key === K, onClick: () => {
153
- O((n) => n && n === t.key ? void 0 : t.key);
154
- } }))), /* @__PURE__ */ e.createElement(N, { guides: x, guideListRef: R })));
153
+ } }, /* @__PURE__ */ e.createElement(v, { as: "span", size: "1", weight: "medium", color: "default" }, ne(m))) : x.map((t) => /* @__PURE__ */ e.createElement(J, { key: t.key, guide: t, orderIndex: t.orderIndex, isExpanded: t.key === K, onClick: () => {
154
+ C((n) => n && n === t.key ? void 0 : t.key);
155
+ } }))), /* @__PURE__ */ e.createElement(Z, { guides: x, guideListRef: G })));
155
156
  };
156
157
  export {
157
- ke as V2
158
+ De as V2
158
159
  };
159
160
  //# sourceMappingURL=V2.mjs.map
package/dist/esm/modules/guide/components/Toolbar/V2/V2.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"V2.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/V2.tsx"],"sourcesContent":["import { KnockGuideClient } from \"@knocklabs/client\";\nimport { useGuideContext } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Icon } from \"@telegraph/icon\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { SegmentedControl } from \"@telegraph/segmented-control\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport {\n ChevronDown,\n ChevronRight,\n GripVertical,\n LogOut,\n Minimize2,\n SlidersHorizontal,\n} from \"lucide-react\";\nimport React from \"react\";\n\nimport { KnockButton } from \"../KnockButton\";\nimport { TOOLBAR_Z_INDEX } from \"../shared\";\nimport \"../styles.css\";\n\nimport { FocusChin } from \"./FocusChin\";\nimport { GuideContextDetails } from \"./GuideContextDetails\";\nimport { GuideRow } from \"./GuideRow\";\nimport { Kbd } from \"./Kbd\";\nimport { DisplayOption, sharedTooltipProps } from \"./helpers\";\nimport { useDraggable } from \"./useDraggable\";\nimport {\n InspectionResultOk,\n useInspectGuideClientStore,\n} from \"./useInspectGuideClientStore\";\n\nconst TOGGLE_COLLAPSED_HOTKEY = \".\";\n\nconst TOOLBAR_WIDTH = \"540px\";\n\nconst TOOLBAR_BOX_SHADOW = [\n \"0 0 0 1px rgba(0, 0, 0, 0.06)\",\n \"0 0 0 1px rgba(255, 255, 255, 0.10)\",\n \"inset 0 1px 0 rgba(255, 255, 255, 0.04)\",\n \"0 1px 1px 0 rgba(0, 0, 0, 0.04)\",\n \"0 4px 6px -1px rgba(0, 0, 0, 0.05)\",\n \"0 8px 16px -4px rgba(0, 0, 0, 0.06)\",\n].join(\", \");\n\nconst getEmptyStateMessage = (displayOption: DisplayOption) => {\n switch (displayOption) {\n case \"all-guides\":\n return \"You have no guides. Get started by creating a guide.\";\n case \"only-active\":\n return \"There are no active guides.\";\n case \"only-eligible\":\n return \"Your current user is not eligible for any guides.\";\n }\n};\n\nconst filterGuides = (\n guides: InspectionResultOk[\"guides\"],\n displayOption: DisplayOption,\n) => {\n return guides.filter((guide) => {\n if (displayOption === \"only-eligible\" && !guide.annotation.isEligible) {\n return false;\n }\n if (displayOption === \"only-active\" && !guide.annotation.active.status) {\n return false;\n }\n return true;\n });\n};\n\ntype Props = {\n readyToTarget: boolean;\n listenForUpdates: boolean;\n};\n\nexport const V2 = ({ readyToTarget, listenForUpdates }: Props) => {\n const { client } = useGuideContext();\n\n const [displayOption, setDisplayOption] =\n React.useState<DisplayOption>(\"only-active\");\n const [runConfig, setRunConfig] = React.useState(() =>\n KnockGuideClient.getToolbarRunConfigFromUrl(),\n );\n const [isCollapsed, setIsCollapsed] = React.useState(false);\n const [isContextPanelOpen, setIsContextPanelOpen] = React.useState(false);\n\n const [expandedGuideRowKey, setExpandedGuideRowKey] = React.useState<\n string | undefined\n >();\n\n React.useEffect(() => {\n setExpandedGuideRowKey(undefined);\n }, [displayOption]);\n\n React.useEffect(() => {\n const { isVisible = false, focusedGuideKeys = {} } = runConfig || {};\n const isDebugging = client.store.state.debug?.debugging;\n\n if (isVisible && !isDebugging && readyToTarget) {\n client.setDebug({ focusedGuideKeys });\n\n // If focused, switch to all guides so you can see in the list.\n if (Object.keys(focusedGuideKeys).length > 0) {\n setDisplayOption(\"all-guides\");\n }\n }\n\n if (!isVisible && isDebugging) {\n client.unsetDebug({ listenForUpdates });\n }\n\n return () => {\n if (client.store.state.debug?.debugging) {\n client.unsetDebug({ listenForUpdates });\n }\n };\n }, [readyToTarget, listenForUpdates, runConfig, client, setDisplayOption]);\n\n // Toggle collapsed state with Ctrl + .\n React.useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.ctrlKey && e.key === TOGGLE_COLLAPSED_HOTKEY && !e.repeat) {\n e.preventDefault();\n setIsCollapsed((prev) => !prev);\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => {\n window.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, []);\n\n const containerRef = React.useRef<HTMLDivElement>(null);\n const guideListRef = React.useRef<HTMLDivElement>(null);\n const { position, isDragging, handlePointerDown, hasDraggedRef } =\n useDraggable({\n elementRef: containerRef,\n reclampDeps: [isCollapsed],\n initialPosition: { top: 16, right: 16 },\n });\n\n const result = useInspectGuideClientStore(runConfig);\n if (!result || !runConfig?.isVisible) {\n return null;\n }\n\n const guides =\n result.status === \"ok\" ? filterGuides(result.guides, displayOption) : [];\n\n return (\n <Box\n tgphRef={containerRef}\n position=\"fixed\"\n style={{\n top: position.top + \"px\",\n right: position.right + \"px\",\n zIndex: TOOLBAR_Z_INDEX,\n }}\n >\n {isCollapsed ? (\n <Tooltip\n side=\"left\"\n label={\n <Text as=\"span\" size=\"1\">\n Guide Toolbar\n <Stack display=\"inline-block\" ml=\"3\">\n <Kbd>ctrl</Kbd> + <Kbd>.</Kbd>\n </Stack>\n </Text>\n }\n {...sharedTooltipProps}\n >\n <Stack\n border=\"px\"\n rounded=\"4\"\n align=\"center\"\n justify=\"center\"\n w=\"10\"\n h=\"10\"\n onPointerDown={handlePointerDown}\n backgroundColor=\"surface-1\"\n style={{\n cursor: isDragging ? \"grabbing\" : \"grab\",\n touchAction: \"none\",\n userSelect: \"none\",\n animation: \"toolbar-collapse-fade-in 150ms ease-out\",\n }}\n >\n <Box\n style={{\n transform: \"scale(0.7)\",\n transformOrigin: \"center center\",\n }}\n >\n <KnockButton\n onClick={() => {\n if (!hasDraggedRef.current) {\n setIsCollapsed(false);\n }\n }}\n positioned={false}\n />\n </Box>\n </Stack>\n </Tooltip>\n ) : (\n <Stack\n direction=\"column\"\n backgroundColor=\"surface-1\"\n rounded=\"4\"\n overflow=\"hidden\"\n style={{\n width: TOOLBAR_WIDTH,\n boxShadow: TOOLBAR_BOX_SHADOW,\n animation: \"toolbar-expand-fade-in 150ms ease-out\",\n }}\n >\n {/* Header — also acts as drag handle area */}\n <Stack\n w=\"full\"\n p=\"2\"\n justify=\"space-between\"\n direction=\"row\"\n align=\"center\"\n gap=\"2\"\n borderBottom=\"px\"\n onPointerDown={handlePointerDown}\n style={{\n boxSizing: \"border-box\",\n cursor: isDragging ? \"grabbing\" : \"grab\",\n touchAction: \"none\",\n userSelect: \"none\",\n }}\n >\n {/* Left: drag icon + segmented control + settings */}\n <Stack align=\"center\" gap=\"1_5\" style={{ minWidth: 0, flex: 1 }}>\n <Stack\n display=\"inline-flex\"\n align=\"center\"\n style={{\n cursor: isDragging ? \"grabbing\" : \"grab\",\n touchAction: \"none\",\n userSelect: \"none\",\n }}\n onPointerDown={(e: React.PointerEvent) => {\n // Already handled by parent, prevent double-fire\n e.stopPropagation();\n handlePointerDown(e);\n }}\n >\n <Icon color=\"gray\" size=\"1\" icon={GripVertical} aria-hidden />\n </Stack>\n <Stack\n align=\"center\"\n gap=\"1_5\"\n onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}\n >\n <SegmentedControl.Root\n size=\"1\"\n type=\"single\"\n value={displayOption}\n onValueChange={(val: DisplayOption) => {\n if (!val) return;\n\n const debugSettings = client.store.state.debug;\n\n const focusedGuideKeys = Object.keys(\n debugSettings?.focusedGuideKeys || {},\n );\n\n // Exit out of focus if the currently focused guide is not\n // part of the selected list filter.\n if (result.status === \"ok\" && focusedGuideKeys.length > 0) {\n const currFocusedGuide = filterGuides(\n result.guides,\n val,\n ).find((g) => g.key === focusedGuideKeys[0]);\n\n if (!currFocusedGuide) {\n client.setDebug({\n ...debugSettings,\n focusedGuideKeys: {},\n });\n }\n }\n\n setDisplayOption(val);\n }}\n >\n <SegmentedControl.Option\n value=\"all-guides\"\n style={{ width: \"54px\" }}\n >\n All\n </SegmentedControl.Option>\n <SegmentedControl.Option\n value=\"only-active\"\n style={{ width: \"54px\" }}\n >\n Active\n </SegmentedControl.Option>\n <SegmentedControl.Option\n value=\"only-eligible\"\n style={{ width: \"54px\" }}\n >\n Eligible\n </SegmentedControl.Option>\n </SegmentedControl.Root>\n\n <Tooltip label=\"Settings\" {...sharedTooltipProps}>\n <Button\n size=\"1\"\n variant={isContextPanelOpen ? \"outline\" : \"ghost\"}\n color={isContextPanelOpen ? \"blue\" : \"gray\"}\n leadingIcon={{\n icon: SlidersHorizontal,\n alt: \"Inspect target params\",\n }}\n trailingIcon={\n isContextPanelOpen\n ? { icon: ChevronDown, alt: \"Hide context data\" }\n : { icon: ChevronRight, alt: \"Show context data\" }\n }\n onClick={() => setIsContextPanelOpen((v) => !v)}\n />\n </Tooltip>\n </Stack>\n </Stack>\n\n {/* Right: exit + minimize buttons */}\n <Stack\n align=\"center\"\n gap=\"1_5\"\n style={{ flexShrink: 0 }}\n onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}\n >\n <Stack align=\"center\" gap=\"1_5\">\n <Button\n size=\"1\"\n variant=\"outline\"\n leadingIcon={{ icon: LogOut, alt: \"Exit\" }}\n onClick={() => {\n setRunConfig((curr) => ({ ...curr, isVisible: false }));\n }}\n >\n Exit\n </Button>\n <Tooltip label=\"Minimize toolbar\" {...sharedTooltipProps}>\n <Button\n size=\"1\"\n variant=\"outline\"\n leadingIcon={{ icon: Minimize2, alt: \"Minimize\" }}\n onClick={() => setIsCollapsed(true)}\n />\n </Tooltip>\n </Stack>\n </Stack>\n </Stack>\n\n {/* Collapsible panel to show context data */}\n {isContextPanelOpen && (\n <Box borderBottom=\"px\">\n <GuideContextDetails />\n </Box>\n )}\n\n {/* Guide list content area */}\n <Box\n tgphRef={guideListRef}\n p=\"1\"\n overflow=\"auto\"\n style={{ maxHeight: \"calc(80vh - 96px)\" }}\n >\n {result.status === \"error\" ? (\n <Box px=\"2\" pb=\"1\" style={{ lineHeight: \"1.2\" }}>\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color={\n result.error === \"no_guides_fetched\" ? \"default\" : \"red\"\n }\n >\n {result.message}\n </Text>\n </Box>\n ) : guides.length === 0 ? (\n <Box px=\"2\" pb=\"1\" style={{ lineHeight: \"1.2\" }}>\n <Text as=\"span\" size=\"1\" weight=\"medium\" color=\"default\">\n {getEmptyStateMessage(displayOption)}\n </Text>\n </Box>\n ) : (\n guides.map((guide) => (\n <GuideRow\n key={guide.key}\n guide={guide}\n orderIndex={guide.orderIndex}\n isExpanded={guide.key === expandedGuideRowKey}\n onClick={() => {\n setExpandedGuideRowKey((k) =>\n k && k === guide.key ? undefined : guide.key,\n );\n }}\n />\n ))\n )}\n </Box>\n\n {/* Focus chin with dedicated controls */}\n <FocusChin guides={guides} guideListRef={guideListRef} />\n </Stack>\n )}\n </Box>\n );\n};\n"],"names":["TOGGLE_COLLAPSED_HOTKEY","TOOLBAR_WIDTH","TOOLBAR_BOX_SHADOW","join","getEmptyStateMessage","displayOption","filterGuides","guides","filter","guide","annotation","isEligible","active","status","V2","readyToTarget","listenForUpdates","client","useGuideContext","setDisplayOption","React","useState","runConfig","setRunConfig","KnockGuideClient","getToolbarRunConfigFromUrl","isCollapsed","setIsCollapsed","isContextPanelOpen","setIsContextPanelOpen","expandedGuideRowKey","setExpandedGuideRowKey","useEffect","undefined","isVisible","focusedGuideKeys","isDebugging","store","state","debug","debugging","setDebug","Object","keys","length","unsetDebug","handleKeyDown","e","ctrlKey","key","repeat","preventDefault","prev","addEventListener","removeEventListener","containerRef","useRef","guideListRef","position","isDragging","handlePointerDown","hasDraggedRef","useDraggable","elementRef","reclampDeps","initialPosition","top","right","result","useInspectGuideClientStore","Box","zIndex","TOOLBAR_Z_INDEX","Tooltip","Text","Stack","Kbd","sharedTooltipProps","cursor","touchAction","userSelect","animation","transform","transformOrigin","KnockButton","current","width","boxShadow","boxSizing","minWidth","flex","stopPropagation","Icon","GripVertical","SegmentedControl","val","debugSettings","find","g","Button","icon","SlidersHorizontal","alt","ChevronDown","ChevronRight","v","flexShrink","LogOut","curr","Minimize2","GuideContextDetails","maxHeight","lineHeight","error","message","map","GuideRow","orderIndex","k","FocusChin"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiCA,MAAMA,IAA0B,KAE1BC,IAAgB,SAEhBC,KAAqB,CACzB,iCACA,uCACA,2CACA,mCACA,sCACA,qCAAqC,EACrCC,KAAK,IAAI,GAELC,KAAuBA,CAACC,MAAiC;AAC7D,UAAQA,GAAa;AAAA,IACnB,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,EAAA;AAEb,GAEMC,IAAeA,CACnBC,GACAF,MAEOE,EAAOC,OAAQC,CAAUA,MAC1BJ,EAAAA,MAAkB,mBAAmB,CAACI,EAAMC,WAAWC,cAGvDN,MAAkB,iBAAiB,CAACI,EAAMC,WAAWE,OAAOC,OAIjE,GAQUC,KAAKA,CAAC;AAAA,EAAEC,eAAAA;AAAAA,EAAeC,kBAAAA;AAAwB,MAAM;AAC1D,QAAA;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAgB,GAE7B,CAACb,GAAec,CAAgB,IACpCC,EAAMC,SAAwB,aAAa,GACvC,CAACC,GAAWC,CAAY,IAAIH,EAAMC,SAAS,MAC/CG,EAAiBC,4BACnB,GACM,CAACC,GAAaC,CAAc,IAAIP,EAAMC,SAAS,EAAK,GACpD,CAACO,GAAoBC,CAAqB,IAAIT,EAAMC,SAAS,EAAK,GAElE,CAACS,GAAqBC,CAAsB,IAAIX,EAAMC,SAE1D;AAEFD,EAAAA,EAAMY,UAAU,MAAM;AACpBD,IAAAA,EAAuBE,MAAS;AAAA,EAAA,GAC/B,CAAC5B,CAAa,CAAC,GAElBe,EAAMY,UAAU,MAAM;;AACd,UAAA;AAAA,MAAEE,WAAAA,IAAY;AAAA,MAAOC,kBAAAA,IAAmB,CAAA;AAAA,IAAG,IAAIb,KAAa,CAAC,GAC7Dc,KAAcnB,IAAAA,EAAOoB,MAAMC,MAAMC,UAAnBtB,gBAAAA,EAA0BuB;AAE1CN,WAAAA,KAAa,CAACE,KAAerB,MAC/BE,EAAOwB,SAAS;AAAA,MAAEN,kBAAAA;AAAAA,IAAAA,CAAkB,GAGhCO,OAAOC,KAAKR,CAAgB,EAAES,SAAS,KACzCzB,EAAiB,YAAY,IAI7B,CAACe,KAAaE,KAChBnB,EAAO4B,WAAW;AAAA,MAAE7B,kBAAAA;AAAAA,IAAAA,CAAkB,GAGjC,MAAM;;AACX,OAAIC,IAAAA,EAAOoB,MAAMC,MAAMC,UAAnBtB,QAAAA,EAA0BuB,aAC5BvB,EAAO4B,WAAW;AAAA,QAAE7B,kBAAAA;AAAAA,MAAAA,CAAkB;AAAA,IAE1C;AAAA,EAAA,GACC,CAACD,GAAeC,GAAkBM,GAAWL,GAAQE,CAAgB,CAAC,GAGzEC,EAAMY,UAAU,MAAM;AACdc,UAAAA,IAAgBA,CAACC,MAAqB;AAC1C,MAAIA,EAAEC,WAAWD,EAAEE,QAAQjD,KAA2B,CAAC+C,EAAEG,WACvDH,EAAEI,eAAe,GACDC,EAAAA,CAAAA,MAAS,CAACA,CAAI;AAAA,IAElC;AAEOC,kBAAAA,iBAAiB,WAAWP,CAAa,GACzC,MAAM;AACJQ,aAAAA,oBAAoB,WAAWR,CAAa;AAAA,IACrD;AAAA,EACF,GAAG,EAAE;AAECS,QAAAA,IAAenC,EAAMoC,OAAuB,IAAI,GAChDC,IAAerC,EAAMoC,OAAuB,IAAI,GAChD;AAAA,IAAEE,UAAAA;AAAAA,IAAUC,YAAAA;AAAAA,IAAYC,mBAAAA;AAAAA,IAAmBC,eAAAA;AAAAA,MAC/CC,EAAa;AAAA,IACXC,YAAYR;AAAAA,IACZS,aAAa,CAACtC,CAAW;AAAA,IACzBuC,iBAAiB;AAAA,MAAEC,KAAK;AAAA,MAAIC,OAAO;AAAA,IAAA;AAAA,EAAG,CACvC,GAEGC,IAASC,EAA2B/C,CAAS;AACnD,MAAI,CAAC8C,KAAU,EAAC9C,KAAAA,QAAAA,EAAWY;AAClB,WAAA;AAGH3B,QAAAA,IACJ6D,EAAOvD,WAAW,OAAOP,EAAa8D,EAAO7D,QAAQF,CAAa,IAAI,CAAE;AAE1E,yCACGiE,GACC,EAAA,SAASf,GACT,UAAS,SACT,OAAO;AAAA,IACLW,KAAKR,EAASQ,MAAM;AAAA,IACpBC,OAAOT,EAASS,QAAQ;AAAA,IACxBI,QAAQC;AAAAA,EACV,EAAA,GAEC9C,IACEN,gBAAAA,EAAA,cAAAqD,GAAA,EACC,MAAK,QACL,OACGrD,gBAAAA,EAAA,cAAAsD,GAAA,EAAK,IAAG,QAAO,MAAK,IAAG,GAAA,iBAErBtD,gBAAAA,EAAA,cAAAuD,GAAA,EAAM,SAAQ,gBAAe,IAAG,IAC/B,GAAAvD,gBAAAA,EAAA,cAACwD,GAAI,MAAA,MAAI,GAAM,uCAAIA,GAAI,MAAA,GAAC,CAC1B,CACF,GAEF,GAAIC,KAEHzD,gBAAAA,EAAA,cAAAuD,GAAA,EACC,QAAO,MACP,SAAQ,KACR,OAAM,UACN,SAAQ,UACR,GAAE,MACF,GAAE,MACF,eAAef,GACf,iBAAgB,aAChB,OAAO;AAAA,IACLkB,QAAQnB,IAAa,aAAa;AAAA,IAClCoB,aAAa;AAAA,IACbC,YAAY;AAAA,IACZC,WAAW;AAAA,EACb,EAAA,GAEC7D,gBAAAA,EAAA,cAAAkD,GAAA,EACC,OAAO;AAAA,IACLY,WAAW;AAAA,IACXC,iBAAiB;AAAA,EAGnB,EAAA,GAAA/D,gBAAAA,EAAA,cAACgE,GACC,EAAA,SAAS,MAAM;AACT,IAACvB,EAAcwB,WACjB1D,EAAe,EAAK;AAAA,EACtB,GAEF,YAAY,IAAM,CAEtB,CACF,CACF,IAEAP,gBAAAA,EAAA,cAACuD,GACC,EAAA,WAAU,UACV,iBAAgB,aAChB,SAAQ,KACR,UAAS,UACT,OAAO;AAAA,IACLW,OAAOrF;AAAAA,IACPsF,WAAWrF;AAAAA,IACX+E,WAAW;AAAA,EAAA,KAIZ7D,gBAAAA,EAAA,cAAAuD,GAAA,EACC,GAAE,QACF,GAAE,KACF,SAAQ,iBACR,WAAU,OACV,OAAM,UACN,KAAI,KACJ,cAAa,MACb,eAAef,GACf,OAAO;AAAA,IACL4B,WAAW;AAAA,IACXV,QAAQnB,IAAa,aAAa;AAAA,IAClCoB,aAAa;AAAA,IACbC,YAAY;AAAA,EAAA,KAIb5D,gBAAAA,EAAA,cAAAuD,GAAA,EAAM,OAAM,UAAS,KAAI,OAAM,OAAO;AAAA,IAAEc,UAAU;AAAA,IAAGC,MAAM;AAAA,EAAA,KACzDtE,gBAAAA,EAAA,cAAAuD,GAAA,EACC,SAAQ,eACR,OAAM,UACN,OAAO;AAAA,IACLG,QAAQnB,IAAa,aAAa;AAAA,IAClCoB,aAAa;AAAA,IACbC,YAAY;AAAA,EAAA,GAEd,eAAe,CAACjC,MAA0B;AAExCA,IAAAA,EAAE4C,gBAAgB,GAClB/B,EAAkBb,CAAC;AAAA,EAAA,KAGpB3B,gBAAAA,EAAA,cAAAwE,GAAA,EAAK,OAAM,QAAO,MAAK,KAAI,MAAMC,GAAc,eAAW,IAAA,CAC7D,GACCzE,gBAAAA,EAAA,cAAAuD,GAAA,EACC,OAAM,UACN,KAAI,OACJ,eAAe,CAAC5B,MAA0BA,EAAE4C,kBAAgB,mCAE3DG,EAAiB,MAAjB,EACC,MAAK,KACL,MAAK,UACL,OAAOzF,GACP,eAAe,CAAC0F,MAAuB;AACrC,QAAI,CAACA,EAAK;AAEJC,UAAAA,IAAgB/E,EAAOoB,MAAMC,MAAMC,OAEnCJ,IAAmBO,OAAOC,MAC9BqD,KAAAA,gBAAAA,EAAe7D,qBAAoB,CAAA,CACrC;AAIA,IAAIiC,EAAOvD,WAAW,QAAQsB,EAAiBS,SAAS,MAC7BtC,EACvB8D,EAAO7D,QACPwF,CACF,EAAEE,KAAMC,CAAAA,MAAMA,EAAEjD,QAAQd,EAAiB,CAAC,CAAC,KAGzClB,EAAOwB,SAAS;AAAA,MACd,GAAGuD;AAAAA,MACH7D,kBAAkB,CAAA;AAAA,IAAC,CACpB,IAILhB,EAAiB4E,CAAG;AAAA,EAAA,KAGrB3E,gBAAAA,EAAA,cAAA0E,EAAiB,QAAjB,EACC,OAAM,cACN,OAAO;AAAA,IAAER,OAAO;AAAA,EAAA,KAAS,KAG3B,GACAlE,gBAAAA,EAAA,cAAC0E,EAAiB,QAAjB,EACC,OAAM,eACN,OAAO;AAAA,IAAER,OAAO;AAAA,EAAA,KAAS,QAG3B,GACAlE,gBAAAA,EAAA,cAAC0E,EAAiB,QAAjB,EACC,OAAM,iBACN,OAAO;AAAA,IAAER,OAAO;AAAA,EAAO,EAAA,GAAE,UAG3B,CACF,mCAECb,GAAQ,EAAA,OAAM,YAAeI,GAAAA,EAC5B,GAAAzD,gBAAAA,EAAA,cAAC+E,KACC,MAAK,KACL,SAASvE,IAAqB,YAAY,SAC1C,OAAOA,IAAqB,SAAS,QACrC,aAAa;AAAA,IACXwE,MAAMC;AAAAA,IACNC,KAAK;AAAA,EAAA,GAEP,cACE1E,IACI;AAAA,IAAEwE,MAAMG;AAAAA,IAAaD,KAAK;AAAA,EAAA,IAC1B;AAAA,IAAEF,MAAMI;AAAAA,IAAcF,KAAK;AAAA,EAAA,GAEjC,SAAS,MAAMzE,EAAuB4E,CAAMA,MAAA,CAACA,CAAC,EAAE,CAAA,CAEpD,CACF,CACF,GAGCrF,gBAAAA,EAAA,cAAAuD,GAAA,EACC,OAAM,UACN,KAAI,OACJ,OAAO;AAAA,IAAE+B,YAAY;AAAA,KACrB,eAAe,CAAC3D,MAA0BA,EAAE4C,gBAAAA,KAE3CvE,gBAAAA,EAAA,cAAAuD,GAAA,EAAM,OAAM,UAAS,KAAI,SACvBvD,gBAAAA,EAAA,cAAA+E,GAAA,EACC,MAAK,KACL,SAAQ,WACR,aAAa;AAAA,IAAEC,MAAMO;AAAAA,IAAQL,KAAK;AAAA,EAAO,GACzC,SAAS,MAAM;AACb/E,IAAAA,EAAcqF,CAAUA,OAAA;AAAA,MAAE,GAAGA;AAAAA,MAAM1E,WAAW;AAAA,IAAA,EAAQ;AAAA,EAAA,KACtD,MAGJ,GACAd,gBAAAA,EAAA,cAACqD,KAAQ,OAAM,oBAAuBI,GAAAA,EAAAA,mCACnCsB,GACC,EAAA,MAAK,KACL,SAAQ,WACR,aAAa;AAAA,IAAEC,MAAMS;AAAAA,IAAWP,KAAK;AAAA,EACrC,GAAA,SAAS,MAAM3E,EAAe,EAAI,EAAA,CAAE,CAExC,CACF,CACF,CACF,GAGCC,KACER,gBAAAA,EAAA,cAAAkD,GAAA,EAAI,cAAa,KAAA,GACflD,gBAAAA,EAAA,cAAA0F,GAAA,IAAmB,CACtB,GAID1F,gBAAAA,EAAA,cAAAkD,GAAA,EACC,SAASb,GACT,GAAE,KACF,UAAS,QACT,OAAO;AAAA,IAAEsD,WAAW;AAAA,EAAoB,EAAA,GAEvC3C,EAAOvD,WAAW,UACjBO,gBAAAA,EAAA,cAACkD,KAAI,IAAG,KAAI,IAAG,KAAI,OAAO;AAAA,IAAE0C,YAAY;AAAA,EAAA,EACtC,GAAA5F,gBAAAA,EAAA,cAACsD,GACC,EAAA,IAAG,QACH,MAAK,KACL,QAAO,UACP,OACEN,EAAO6C,UAAU,sBAAsB,YAAY,MAGpD7C,GAAAA,EAAO8C,OACV,CACF,IACE3G,EAAOqC,WAAW,IACnBxB,gBAAAA,EAAA,cAAAkD,GAAA,EAAI,IAAG,KAAI,IAAG,KAAI,OAAO;AAAA,IAAE0C,YAAY;AAAA,EAAA,EACtC,GAAA5F,gBAAAA,EAAA,cAACsD,GAAK,EAAA,IAAG,QAAO,MAAK,KAAI,QAAO,UAAS,OAAM,UAAA,GAC5CtE,GAAqBC,CAAa,CACrC,CACF,IAEAE,EAAO4G,IAAK1G,CACVA,MAAAW,gBAAAA,EAAA,cAACgG,GACC,EAAA,KAAK3G,EAAMwC,KACX,OAAAxC,GACA,YAAYA,EAAM4G,YAClB,YAAY5G,EAAMwC,QAAQnB,GAC1B,SAAS,MAAM;AACbC,IAAAA,EAAwBuF,OACtBA,KAAKA,MAAM7G,EAAMwC,MAAMhB,SAAYxB,EAAMwC,GAC3C;AAAA,EAAA,IAGL,CAEL,mCAGCsE,GAAU,EAAA,QAAAhH,GAAgB,cAAAkD,EAA2B,CAAA,CACxD,CAEJ;AAEJ;"}
1
+ {"version":3,"file":"V2.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/V2.tsx"],"sourcesContent":["import { KnockGuideClient } from \"@knocklabs/client\";\nimport { useGuideContext } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Icon } from \"@telegraph/icon\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { SegmentedControl } from \"@telegraph/segmented-control\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport {\n ChevronDown,\n ChevronRight,\n GripVertical,\n LogOut,\n Minimize2,\n SlidersHorizontal,\n} from \"lucide-react\";\nimport React from \"react\";\n\nimport { KnockButton } from \"../KnockButton\";\nimport { TOOLBAR_Z_INDEX } from \"../shared\";\nimport \"../styles.css\";\nimport { useToolbarStyles } from \"../useToolbarStyles\";\n\nimport { FocusChin } from \"./FocusChin\";\nimport { GuideContextDetails } from \"./GuideContextDetails\";\nimport { GuideRow } from \"./GuideRow\";\nimport { Kbd } from \"./Kbd\";\nimport { DisplayOption, sharedTooltipProps } from \"./helpers\";\nimport { useDraggable } from \"./useDraggable\";\nimport {\n InspectionResultOk,\n useInspectGuideClientStore,\n} from \"./useInspectGuideClientStore\";\n\nconst TOGGLE_COLLAPSED_HOTKEY = \".\";\n\nconst TOOLBAR_WIDTH = \"540px\";\n\nconst TOOLBAR_BOX_SHADOW = [\n \"0 0 0 1px rgba(0, 0, 0, 0.06)\",\n \"0 0 0 1px rgba(255, 255, 255, 0.10)\",\n \"inset 0 1px 0 rgba(255, 255, 255, 0.04)\",\n \"0 1px 1px 0 rgba(0, 0, 0, 0.04)\",\n \"0 4px 6px -1px rgba(0, 0, 0, 0.05)\",\n \"0 8px 16px -4px rgba(0, 0, 0, 0.06)\",\n].join(\", \");\n\nconst getEmptyStateMessage = (displayOption: DisplayOption) => {\n switch (displayOption) {\n case \"all-guides\":\n return \"You have no guides. Get started by creating a guide.\";\n case \"only-active\":\n return \"There are no active guides.\";\n case \"only-eligible\":\n return \"Your current user is not eligible for any guides.\";\n }\n};\n\nconst filterGuides = (\n guides: InspectionResultOk[\"guides\"],\n displayOption: DisplayOption,\n) => {\n return guides.filter((guide) => {\n if (displayOption === \"only-eligible\" && !guide.annotation.isEligible) {\n return false;\n }\n if (displayOption === \"only-active\" && !guide.annotation.active.status) {\n return false;\n }\n return true;\n });\n};\n\ntype Props = {\n readyToTarget: boolean;\n listenForUpdates: boolean;\n};\n\nexport const V2 = ({ readyToTarget, listenForUpdates }: Props) => {\n const { client } = useGuideContext();\n\n const [displayOption, setDisplayOption] =\n React.useState<DisplayOption>(\"only-active\");\n const [runConfig, setRunConfig] = React.useState(() =>\n KnockGuideClient.getToolbarRunConfigFromUrl(),\n );\n const [isCollapsed, setIsCollapsed] = React.useState(false);\n const [isContextPanelOpen, setIsContextPanelOpen] = React.useState(false);\n\n const [expandedGuideRowKey, setExpandedGuideRowKey] = React.useState<\n string | undefined\n >();\n\n useToolbarStyles(Boolean(runConfig?.isVisible));\n\n React.useEffect(() => {\n setExpandedGuideRowKey(undefined);\n }, [displayOption]);\n\n React.useEffect(() => {\n const { isVisible = false, focusedGuideKeys = {} } = runConfig || {};\n const isDebugging = client.store.state.debug?.debugging;\n\n if (isVisible && !isDebugging && readyToTarget) {\n client.setDebug({ focusedGuideKeys });\n\n // If focused, switch to all guides so you can see in the list.\n if (Object.keys(focusedGuideKeys).length > 0) {\n setDisplayOption(\"all-guides\");\n }\n }\n\n if (!isVisible && isDebugging) {\n client.unsetDebug({ listenForUpdates });\n }\n\n return () => {\n if (client.store.state.debug?.debugging) {\n client.unsetDebug({ listenForUpdates });\n }\n };\n }, [readyToTarget, listenForUpdates, runConfig, client, setDisplayOption]);\n\n // Toggle collapsed state with Ctrl + .\n React.useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.ctrlKey && e.key === TOGGLE_COLLAPSED_HOTKEY && !e.repeat) {\n e.preventDefault();\n setIsCollapsed((prev) => !prev);\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => {\n window.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, []);\n\n const containerRef = React.useRef<HTMLDivElement>(null);\n const guideListRef = React.useRef<HTMLDivElement>(null);\n const { position, isDragging, handlePointerDown, hasDraggedRef } =\n useDraggable({\n elementRef: containerRef,\n reclampDeps: [isCollapsed],\n initialPosition: { top: 16, right: 16 },\n });\n\n const result = useInspectGuideClientStore(runConfig);\n if (!result || !runConfig?.isVisible) {\n return null;\n }\n\n const guides =\n result.status === \"ok\" ? filterGuides(result.guides, displayOption) : [];\n\n return (\n <Box\n tgphRef={containerRef}\n position=\"fixed\"\n style={{\n top: position.top + \"px\",\n right: position.right + \"px\",\n zIndex: TOOLBAR_Z_INDEX,\n }}\n >\n {isCollapsed ? (\n <Tooltip\n side=\"left\"\n label={\n <Text as=\"span\" size=\"1\">\n Guide Toolbar\n <Stack display=\"inline-block\" ml=\"3\">\n <Kbd>ctrl</Kbd> + <Kbd>.</Kbd>\n </Stack>\n </Text>\n }\n {...sharedTooltipProps}\n >\n <Stack\n border=\"px\"\n rounded=\"4\"\n align=\"center\"\n justify=\"center\"\n w=\"10\"\n h=\"10\"\n onPointerDown={handlePointerDown}\n backgroundColor=\"surface-1\"\n style={{\n cursor: isDragging ? \"grabbing\" : \"grab\",\n touchAction: \"none\",\n userSelect: \"none\",\n animation: \"toolbar-collapse-fade-in 150ms ease-out\",\n }}\n >\n <Box\n style={{\n transform: \"scale(0.7)\",\n transformOrigin: \"center center\",\n }}\n >\n <KnockButton\n onClick={() => {\n if (!hasDraggedRef.current) {\n setIsCollapsed(false);\n }\n }}\n positioned={false}\n />\n </Box>\n </Stack>\n </Tooltip>\n ) : (\n <Stack\n direction=\"column\"\n backgroundColor=\"surface-1\"\n rounded=\"4\"\n overflow=\"hidden\"\n style={{\n width: TOOLBAR_WIDTH,\n boxShadow: TOOLBAR_BOX_SHADOW,\n animation: \"toolbar-expand-fade-in 150ms ease-out\",\n }}\n >\n {/* Header — also acts as drag handle area */}\n <Stack\n w=\"full\"\n p=\"2\"\n justify=\"space-between\"\n direction=\"row\"\n align=\"center\"\n gap=\"2\"\n borderBottom=\"px\"\n onPointerDown={handlePointerDown}\n style={{\n boxSizing: \"border-box\",\n cursor: isDragging ? \"grabbing\" : \"grab\",\n touchAction: \"none\",\n userSelect: \"none\",\n }}\n >\n {/* Left: drag icon + segmented control + settings */}\n <Stack align=\"center\" gap=\"1_5\" style={{ minWidth: 0, flex: 1 }}>\n <Stack\n display=\"inline-flex\"\n align=\"center\"\n style={{\n cursor: isDragging ? \"grabbing\" : \"grab\",\n touchAction: \"none\",\n userSelect: \"none\",\n }}\n onPointerDown={(e: React.PointerEvent) => {\n // Already handled by parent, prevent double-fire\n e.stopPropagation();\n handlePointerDown(e);\n }}\n >\n <Icon color=\"gray\" size=\"1\" icon={GripVertical} aria-hidden />\n </Stack>\n <Stack\n align=\"center\"\n gap=\"1_5\"\n onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}\n >\n <SegmentedControl.Root\n size=\"1\"\n type=\"single\"\n value={displayOption}\n onValueChange={(val: DisplayOption) => {\n if (!val) return;\n\n const debugSettings = client.store.state.debug;\n\n const focusedGuideKeys = Object.keys(\n debugSettings?.focusedGuideKeys || {},\n );\n\n // Exit out of focus if the currently focused guide is not\n // part of the selected list filter.\n if (result.status === \"ok\" && focusedGuideKeys.length > 0) {\n const currFocusedGuide = filterGuides(\n result.guides,\n val,\n ).find((g) => g.key === focusedGuideKeys[0]);\n\n if (!currFocusedGuide) {\n client.setDebug({\n ...debugSettings,\n focusedGuideKeys: {},\n });\n }\n }\n\n setDisplayOption(val);\n }}\n >\n <SegmentedControl.Option\n value=\"all-guides\"\n style={{ width: \"54px\" }}\n >\n All\n </SegmentedControl.Option>\n <SegmentedControl.Option\n value=\"only-active\"\n style={{ width: \"54px\" }}\n >\n Active\n </SegmentedControl.Option>\n <SegmentedControl.Option\n value=\"only-eligible\"\n style={{ width: \"54px\" }}\n >\n Eligible\n </SegmentedControl.Option>\n </SegmentedControl.Root>\n\n <Tooltip label=\"Settings\" {...sharedTooltipProps}>\n <Button\n size=\"1\"\n variant={isContextPanelOpen ? \"outline\" : \"ghost\"}\n color={isContextPanelOpen ? \"blue\" : \"gray\"}\n leadingIcon={{\n icon: SlidersHorizontal,\n alt: \"Inspect target params\",\n }}\n trailingIcon={\n isContextPanelOpen\n ? { icon: ChevronDown, alt: \"Hide context data\" }\n : { icon: ChevronRight, alt: \"Show context data\" }\n }\n onClick={() => setIsContextPanelOpen((v) => !v)}\n />\n </Tooltip>\n </Stack>\n </Stack>\n\n {/* Right: exit + minimize buttons */}\n <Stack\n align=\"center\"\n gap=\"1_5\"\n style={{ flexShrink: 0 }}\n onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}\n >\n <Stack align=\"center\" gap=\"1_5\">\n <Button\n size=\"1\"\n variant=\"outline\"\n leadingIcon={{ icon: LogOut, alt: \"Exit\" }}\n onClick={() => {\n setRunConfig((curr) => ({ ...curr, isVisible: false }));\n }}\n >\n Exit\n </Button>\n <Tooltip label=\"Minimize toolbar\" {...sharedTooltipProps}>\n <Button\n size=\"1\"\n variant=\"outline\"\n leadingIcon={{ icon: Minimize2, alt: \"Minimize\" }}\n onClick={() => setIsCollapsed(true)}\n />\n </Tooltip>\n </Stack>\n </Stack>\n </Stack>\n\n {/* Collapsible panel to show context data */}\n {isContextPanelOpen && (\n <Box borderBottom=\"px\">\n <GuideContextDetails />\n </Box>\n )}\n\n {/* Guide list content area */}\n <Box\n tgphRef={guideListRef}\n p=\"1\"\n overflow=\"auto\"\n style={{ maxHeight: \"calc(80vh - 96px)\" }}\n >\n {result.status === \"error\" ? (\n <Box px=\"2\" pb=\"1\" style={{ lineHeight: \"1.2\" }}>\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color={\n result.error === \"no_guides_fetched\" ? \"default\" : \"red\"\n }\n >\n {result.message}\n </Text>\n </Box>\n ) : guides.length === 0 ? (\n <Box px=\"2\" pb=\"1\" style={{ lineHeight: \"1.2\" }}>\n <Text as=\"span\" size=\"1\" weight=\"medium\" color=\"default\">\n {getEmptyStateMessage(displayOption)}\n </Text>\n </Box>\n ) : (\n guides.map((guide) => (\n <GuideRow\n key={guide.key}\n guide={guide}\n orderIndex={guide.orderIndex}\n isExpanded={guide.key === expandedGuideRowKey}\n onClick={() => {\n setExpandedGuideRowKey((k) =>\n k && k === guide.key ? undefined : guide.key,\n );\n }}\n />\n ))\n )}\n </Box>\n\n {/* Focus chin with dedicated controls */}\n <FocusChin guides={guides} guideListRef={guideListRef} />\n </Stack>\n )}\n </Box>\n );\n};\n"],"names":["TOGGLE_COLLAPSED_HOTKEY","TOOLBAR_WIDTH","TOOLBAR_BOX_SHADOW","join","getEmptyStateMessage","displayOption","filterGuides","guides","filter","guide","annotation","isEligible","active","status","V2","readyToTarget","listenForUpdates","client","useGuideContext","setDisplayOption","React","useState","runConfig","setRunConfig","KnockGuideClient","getToolbarRunConfigFromUrl","isCollapsed","setIsCollapsed","isContextPanelOpen","setIsContextPanelOpen","expandedGuideRowKey","setExpandedGuideRowKey","Boolean","isVisible","useEffect","undefined","focusedGuideKeys","isDebugging","store","state","debug","debugging","setDebug","Object","keys","length","unsetDebug","handleKeyDown","e","ctrlKey","key","repeat","preventDefault","prev","addEventListener","removeEventListener","containerRef","useRef","guideListRef","position","isDragging","handlePointerDown","hasDraggedRef","useDraggable","elementRef","reclampDeps","initialPosition","top","right","result","useInspectGuideClientStore","Box","zIndex","TOOLBAR_Z_INDEX","Tooltip","Text","Stack","Kbd","sharedTooltipProps","cursor","touchAction","userSelect","animation","transform","transformOrigin","KnockButton","current","width","boxShadow","boxSizing","minWidth","flex","stopPropagation","Icon","GripVertical","SegmentedControl","val","debugSettings","find","g","Button","icon","SlidersHorizontal","alt","ChevronDown","ChevronRight","v","flexShrink","LogOut","curr","Minimize2","GuideContextDetails","maxHeight","lineHeight","error","message","map","GuideRow","orderIndex","k","FocusChin"],"mappings":"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"}
package/dist/esm/modules/guide/components/Toolbar/styles.css.inline.mjs ADDED
@@ -0,0 +1,5 @@
1
+ const t = '@keyframes toolbar-collapse-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes toolbar-expand-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.tgph-button{--tgph-button-text-color:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;box-sizing:border-box;font-family:inherit;text-decoration:none;transition:background-color .2s ease-in-out,color .2s ease-in-out,box-shadow .2s ease-in-out}.tgph-button [data-button-text],.tgph-button [data-button-icon]{transition:color .2s ease-in-out}.tgph-button:not([data-tgph-button-state=disabled]):hover [data-button-text],.tgph-button:not([data-tgph-button-state=disabled]):hover [data-button-icon]{--color:var(--hover--tgph-button-text-color,var(--tgph-button-text-color))!important}.tgph-button[data-tgph-button-state=active]{box-shadow:var(--active--box-shadow,var(--box-shadow));background-color:var(--active--background-color,var(--background-color))}.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=solid],.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=soft],.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=outline]{background-color:var(--tgph-gray-3)}.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=ghost]{background-color:var(--tgph-transparent)}.tgph-button:disabled{cursor:not-allowed}.tgph-button[data-tgph-button-state=disabled]:hover{background-color:revert}.tgph-icon{display:inline-block}.tgph-icon[data-tgph-icon-animation=spin]{animation:1s linear infinite tgph-icon-spin}@keyframes tgph-icon-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tgph-box{--background-color:none;--border-color:var(--tgph-gray-5);--box-shadow:none;--border-style:solid;--border-width:0;--padding:0;--margin:0;--border-radius:0;--width:auto;--max-width:auto;--min-width:auto;--height:auto;--max-height:auto;--min-height:auto;--z-index:auto;--position:static;--top:auto;--left:auto;--right:auto;--bottom:auto;--overflow:visible visible;--align-self:auto;--direction:row;background-color:var(--background-color);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--box-shadow);padding:var(--padding);margin:var(--margin);border-radius:var(--border-radius);width:var(--width);max-width:var(--max-width);min-width:var(--min-width);height:var(--height);max-height:var(--max-height);min-height:var(--min-height);z-index:var(--z-index);position:var(--position);top:var(--top);left:var(--left);right:var(--right);bottom:var(--bottom);overflow:var(--overflow);align-self:var(--align-self);flex-direction:var(--direction)}.tgph-box--interactive:hover{background-color:var(--hover--background-color,var(--background-color));border-width:var(--hover--border-width,var(--border-width));border-style:var(--hover--border-style,var(--border-style));border-color:var(--hover--border-color,var(--border-color));box-shadow:var(--hover--box-shadow,var(--box-shadow));padding:var(--hover--padding,var(--padding));margin:var(--hover--margin,var(--margin));border-radius:var(--hover--border-radius,var(--border-radius));width:var(--hover--width,var(--width));max-width:var(--hover--max-width,var(--max-width));min-width:var(--hover--min-width,var(--min-width));height:var(--hover--height,var(--height));max-height:var(--hover--max-height,var(--max-height));min-height:var(--hover--min-height,var(--min-height));z-index:var(--hover--z-index,var(--z-index));position:var(--hover--position,var(--position));top:var(--hover--top,var(--top));left:var(--hover--left,var(--left));right:var(--hover--right,var(--right));bottom:var(--hover--bottom,var(--bottom));overflow:var(--hover--overflow,var(--overflow));align-self:var(--hover--align-self,var(--align-self));flex-direction:var(--hover--direction,var(--direction))}.tgph-box--interactive:focus-visible{background-color:var(--focus--background-color,var(--background-color));border-width:var(--focus--border-width,var(--border-width));border-style:var(--focus--border-style,var(--border-style));border-color:var(--focus--border-color,var(--border-color));box-shadow:var(--focus--box-shadow,var(--box-shadow));padding:var(--focus--padding,var(--padding));margin:var(--focus--margin,var(--margin));border-radius:var(--focus--border-radius,var(--border-radius));width:var(--focus--width,var(--width));max-width:var(--focus--max-width,var(--max-width));min-width:var(--focus--min-width,var(--min-width));height:var(--focus--height,var(--height));max-height:var(--focus--max-height,var(--max-height));min-height:var(--focus--min-height,var(--min-height));z-index:var(--focus--z-index,var(--z-index));position:var(--focus--position,var(--position));top:var(--focus--top,var(--top));left:var(--focus--left,var(--left));right:var(--focus--right,var(--right));bottom:var(--focus--bottom,var(--bottom));overflow:var(--focus--overflow,var(--overflow));align-self:var(--focus--align-self,var(--align-self));flex-direction:var(--focus--direction,var(--direction))}.tgph-box--interactive:active{background-color:var(--active--background-color,var(--background-color));border-width:var(--active--border-width,var(--border-width));border-style:var(--active--border-style,var(--border-style));border-color:var(--active--border-color,var(--border-color));box-shadow:var(--active--box-shadow,var(--box-shadow));padding:var(--active--padding,var(--padding));margin:var(--active--margin,var(--margin));border-radius:var(--active--border-radius,var(--border-radius));width:var(--active--width,var(--width));max-width:var(--active--max-width,var(--max-width));min-width:var(--active--min-width,var(--min-width));height:var(--active--height,var(--height));max-height:var(--active--max-height,var(--max-height));min-height:var(--active--min-height,var(--min-height));z-index:var(--active--z-index,var(--z-index));position:var(--active--position,var(--position));top:var(--active--top,var(--top));left:var(--active--left,var(--left));right:var(--active--right,var(--right));bottom:var(--active--bottom,var(--bottom));overflow:var(--active--overflow,var(--overflow));align-self:var(--active--align-self,var(--align-self));flex-direction:var(--active--direction,var(--direction))}.tgph-box--interactive:has(:focus-within){background-color:var(--focus-within--background-color,var(--background-color));border-width:var(--focus-within--border-width,var(--border-width));border-style:var(--focus-within--border-style,var(--border-style));border-color:var(--focus-within--border-color,var(--border-color));box-shadow:var(--focus-within--box-shadow,var(--box-shadow));padding:var(--focus-within--padding,var(--padding));margin:var(--focus-within--margin,var(--margin));border-radius:var(--focus-within--border-radius,var(--border-radius));width:var(--focus-within--width,var(--width));max-width:var(--focus-within--max-width,var(--max-width));min-width:var(--focus-within--min-width,var(--min-width));height:var(--focus-within--height,var(--height));max-height:var(--focus-within--max-height,var(--max-height));min-height:var(--focus-within--min-height,var(--min-height));z-index:var(--focus-within--z-index,var(--z-index));position:var(--focus-within--position,var(--position));top:var(--focus-within--top,var(--top));left:var(--focus-within--left,var(--left));right:var(--focus-within--right,var(--right));bottom:var(--focus-within--bottom,var(--bottom));overflow:var(--focus-within--overflow,var(--overflow));align-self:var(--focus-within--align-self,var(--align-self));flex-direction:var(--focus-within--direction,var(--direction))}.tgph-box--interactive:disabled,.tgph-box--interactive[aria-disabled=true]{background-color:var(--disabled--background-color,var(--background-color));border-width:var(--disabled--border-width,var(--border-width));border-style:var(--disabled--border-style,var(--border-style));border-color:var(--disabled--border-color,var(--border-color));box-shadow:var(--disabled--box-shadow,var(--box-shadow));padding:var(--disabled--padding,var(--padding));margin:var(--disabled--margin,var(--margin));border-radius:var(--disabled--border-radius,var(--border-radius));width:var(--disabled--width,var(--width));max-width:var(--disabled--max-width,var(--max-width));min-width:var(--disabled--min-width,var(--min-width));height:var(--disabled--height,var(--height));max-height:var(--disabled--max-height,var(--max-height));min-height:var(--disabled--min-height,var(--min-height));z-index:var(--disabled--z-index,var(--z-index));position:var(--disabled--position,var(--position));top:var(--disabled--top,var(--top));left:var(--disabled--left,var(--left));right:var(--disabled--right,var(--right));bottom:var(--disabled--bottom,var(--bottom));overflow:var(--disabled--overflow,var(--overflow));align-self:var(--disabled--align-self,var(--align-self));flex-direction:var(--disabled--direction,var(--direction))}.tgph-stack{--display:flex;--direction:row;--wrap:nowrap;--justify:flex-start;--align:stretch;--gap:0;display:var(--display);flex-direction:var(--direction);flex-wrap:var(--wrap);justify-content:var(--justify);align-items:var(--align);gap:var(--gap)}[data-tgph-toggle-switch]{cursor:pointer;flex-shrink:0;transition:background-color .18s cubic-bezier(.16,1,.3,1);position:relative}:has([data-tgph-toggle-input]:focus-visible) [data-tgph-toggle-switch]{outline:2px solid var(--tgph-blue-8);outline-offset:2px}[data-tgph-toggle-icon]{transition:transform .18s cubic-bezier(.16,1,.3,1)}[data-tgph-toggle-switch][data-tgph-toggle-checked=true] [data-tgph-toggle-icon]{transform:translate(calc(100% - var(--tgph-spacing-0_5)))}[data-tgph-toggle-label]{cursor:pointer;-webkit-user-select:none;user-select:none}[data-tgph-toggle-label][data-tgph-toggle-disabled=true]{cursor:not-allowed;color:var(--tgph-gray-9)}[data-tgph-toggle-switch][data-tgph-toggle-checked=false]:not([data-tgph-button-state=disabled]){background-color:var(--tgph-gray-7)!important}.tgph-text,.tgph-heading,.tgph-code{--color:var(--tgph-gray-12);--font-size:var(--tgph-text-2);--weight:var(--tgph-weight-regular);--leading:var(--tgph-leading-2);--tracking:var(--tgph-tracking-2);--text-align:left;--font-family:var(--tgph-family-sans);--text-overflow:clip;color:var(--color);font-size:var(--font-size);font-weight:var(--weight);line-height:var(--leading);letter-spacing:var(--tracking);text-align:var(--text-align);box-sizing:border-box;font-family:var(--font-family);text-overflow:var(--text-overflow)}[data-tgph-input-container]{box-sizing:border-box}[data-tgph-input-slot]{box-sizing:border-box;order:2}[data-tgph-input-slot]>[data-tgph-button]{width:var(--tgph-spacing-full);height:var(--tgph-spacing-auto)}[data-tgph-input-slot]>[data-tgph-button-layout=icon-only]{aspect-ratio:1;padding:var(--tgph-spacing-0)}[data-tgph-input-slot]>[data-tgph-button-layout=default]{padding:var(--tgph-spacing-2)}[data-tgph-input-slot]:has([data-tgph-button-layout=icon-only]){aspect-ratio:1}[data-tgph-input-slot]:has([data-tgph-button-layout=icon-only]){padding:var(--tgph-spacing-1)!important}[data-tgph-input-slot-position=leading]{order:1}[data-tgph-input-slot-position=trailing]{order:3}[data-tgph-input-slot-size="1"]>[data-tgph-button],[data-tgph-input-slot-size="2"]>[data-tgph-button]{border-radius:var(--tgph-rounded-1)}[data-tgph-input-slot-size="3"]>[data-tgph-button]{border-radius:var(--tgph-rounded-2)}[data-tgph-input-container-state=disabled]{cursor:not-allowed}[data-tgph-input-field]{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border:none;outline:none;order:2;font-family:inherit}[data-tgph-menu-button]:focus-visible{outline:none}[data-tgph-menu-content]:focus{outline:none}[data-tgph-menu-content]:focus-visible{outline:none}[data-tgph-menu-button][data-state=open]{background-color:var(--hover--background-color,var(--background-color))}:root{--tgph-border-style-solid:solid;--tgph-border-style-dashed:dashed;--tgph-transparent:transparent;--tgph-white:#fff;--tgph-black:#000;--tgph-alpha-white-1:#ffffff0d;--tgph-alpha-white-2:#ffffff1a;--tgph-alpha-white-3:#ffffff26;--tgph-alpha-white-4:#fff3;--tgph-alpha-white-5:#ffffff4d;--tgph-alpha-white-6:#fff6;--tgph-alpha-white-7:#ffffff80;--tgph-alpha-white-8:#fff9;--tgph-alpha-white-9:#ffffffb3;--tgph-alpha-white-10:#fffc;--tgph-alpha-white-11:#ffffffe6;--tgph-alpha-white-12:#fffffff2;--tgph-alpha-black-1:#0000000d;--tgph-alpha-black-2:#0000001a;--tgph-alpha-black-3:#00000026;--tgph-alpha-black-4:#0003;--tgph-alpha-black-5:#0000004d;--tgph-alpha-black-6:#0006;--tgph-alpha-black-7:#00000080;--tgph-alpha-black-8:#0009;--tgph-alpha-black-9:#000000b3;--tgph-alpha-black-10:#000c;--tgph-alpha-black-11:#000000e6;--tgph-alpha-black-12:#000000f2;--tgph-rounded-0:0px;--tgph-rounded-1:.125rem;--tgph-rounded-2:.25rem;--tgph-rounded-3:.375rem;--tgph-rounded-4:.5rem;--tgph-rounded-5:.75rem;--tgph-rounded-6:1rem;--tgph-rounded-full:9999px;--tgph-shadow-0:0px 0px 0px 0px #0000;--tgph-shadow-1:0px 0px 0px 1px #0000000f, inset 0px 0px 0px 1px #ffffff14, inset 0px 1px 0px 0px #ffffff0f, inset 0px -1px 0px 0px #ffffff05, 0px 1px 2px 0px #00000008;--tgph-shadow-2:0px 0px 0px 1px #0000000f, inset 0px 0px 0px 1px #ffffff1a, inset 0px 1px 0px 0px #ffffff14, inset 0px -1px 0px 0px #ffffff05, 0px 1px 2px 0px #0000000a, 0px 4px 8px -2px #0000000d;--tgph-shadow-3:0px 0px 0px 1px #0000000f, inset 0px 0px 0px 1px #ffffff1f, inset 0px 1px 0px 0px #ffffff17, inset 0px -1px 0px 0px #ffffff08, 0px 1px 1px 0px #0000000a, 0px 4px 6px -1px #0000000d, 0px 8px 16px -4px #0000000f;--tgph-shadow-inner:0px 5px 2px 0px #1c202403 inset, 0px 3px 2px 0px #1c202408 inset, 0px 1px 1px 0px #1c20240d inset, 0px 0px 1px 0px #1c20240f inset;--tgph-spacing-0:0px;--tgph-spacing-1:.25rem;--tgph-spacing-2:.5rem;--tgph-spacing-3:.75rem;--tgph-spacing-4:1rem;--tgph-spacing-5:1.25rem;--tgph-spacing-6:1.5rem;--tgph-spacing-7:1.75rem;--tgph-spacing-8:2rem;--tgph-spacing-9:2.25rem;--tgph-spacing-10:2.5rem;--tgph-spacing-11:2.75rem;--tgph-spacing-12:3rem;--tgph-spacing-14:3.5rem;--tgph-spacing-16:4rem;--tgph-spacing-20:5rem;--tgph-spacing-24:6rem;--tgph-spacing-28:7rem;--tgph-spacing-32:8rem;--tgph-spacing-36:9rem;--tgph-spacing-40:10rem;--tgph-spacing-44:11rem;--tgph-spacing-48:12rem;--tgph-spacing-52:13rem;--tgph-spacing-56:14rem;--tgph-spacing-60:15rem;--tgph-spacing-64:16rem;--tgph-spacing-72:18rem;--tgph-spacing-80:20rem;--tgph-spacing-96:24rem;--tgph-spacing-120:30rem;--tgph-spacing-140:35rem;--tgph-spacing-160:40rem;--tgph-spacing-px:1px;--tgph-spacing-0_5:.125rem;--tgph-spacing-1_5:.375rem;--tgph-spacing-2_5:.625rem;--tgph-spacing-3_5:.875rem;--tgph-spacing-full:100%;--tgph-spacing-auto:auto;--tgph-family-sans:Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;--tgph-family-mono:Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;--tgph-leading-0:1rem;--tgph-leading-1:1rem;--tgph-leading-2:1.25rem;--tgph-leading-3:1.5rem;--tgph-leading-4:1.5rem;--tgph-leading-5:1.75rem;--tgph-leading-6:2rem;--tgph-leading-7:2.25rem;--tgph-leading-8:2.5rem;--tgph-leading-9:3.5rem;--tgph-leading-code-0:1rem;--tgph-leading-code-1:1rem;--tgph-leading-code-2:1.25rem;--tgph-leading-code-3:1.5rem;--tgph-leading-code-4:1.75rem;--tgph-leading-code-5:1.75rem;--tgph-leading-code-6:2rem;--tgph-leading-code-7:2.25rem;--tgph-leading-code-8:2.5rem;--tgph-leading-code-9:3rem;--tgph-tracking-0:.25%;--tgph-tracking-1:.25%;--tgph-tracking-2:0;--tgph-tracking-3:0;--tgph-tracking-4:-.25%;--tgph-tracking-5:-.5%;--tgph-tracking-6:-.625%;--tgph-tracking-7:-.75%;--tgph-tracking-8:-1%;--tgph-tracking-9:-2.5%;--tgph-text-0:.6875rem;--tgph-text-1:.75rem;--tgph-text-2:.8125rem;--tgph-text-3:.9375rem;--tgph-text-4:1.125rem;--tgph-text-5:1.25rem;--tgph-text-6:1.5rem;--tgph-text-7:1.875rem;--tgph-text-8:2.25rem;--tgph-text-9:3rem;--tgph-text-code-0:.625rem;--tgph-text-code-1:.688rem;--tgph-text-code-2:.812rem;--tgph-text-code-4:1.062rem;--tgph-text-code-5:1.188rem;--tgph-text-code-6:1.438rem;--tgph-text-code-7:1.75rem;--tgph-text-code-8:2.125rem;--tgph-text-code-9:2.875rem;--tgph-weight-regular:400;--tgph-weight-medium:500;--tgph-weight-semi-bold:600;--tgph-breakpoint-sm:640px;--tgph-breakpoint-md:768px;--tgph-breakpoint-lg:1024px;--tgph-breakpoint-xl:1280px;--tgph-breakpoint-2xl:1536px;--tgph-zIndex-hidden:-1;--tgph-zIndex-base:0;--tgph-zIndex-auto:auto;--tgph-zIndex-dropdown:1000;--tgph-zIndex-sticky:1100;--tgph-zIndex-banner:1200;--tgph-zIndex-overlay:1300;--tgph-zIndex-modal:1400;--tgph-zIndex-popover:1500;--tgph-zIndex-skipLink:1600;--tgph-zIndex-toast:1700;--tgph-zIndex-tooltip:1800;--tgph-surface-1:#fff;--tgph-surface-2:#fdfdfc;--tgph-surface-3:#fff;--tgph-gray-1:#fcfcfd;--tgph-gray-2:#f9f9fb;--tgph-gray-3:#eff0f3;--tgph-gray-4:#e6e8eb;--tgph-gray-5:#dfe2e5;--tgph-gray-6:#d7dadf;--tgph-gray-7:#cbcfd5;--tgph-gray-8:#b6bcc4;--tgph-gray-9:#888e95;--tgph-gray-10:#7e848a;--tgph-gray-11:#60646a;--tgph-gray-12:#1d2023;--tgph-beige-1:#fdfdfc;--tgph-beige-2:#f9f9f8;--tgph-beige-3:#f0f0ef;--tgph-beige-4:#e9e8e7;--tgph-beige-5:#e2e1df;--tgph-beige-6:#dad9d7;--tgph-beige-7:#cfcecc;--tgph-beige-8:#bcbbb8;--tgph-beige-9:#8e8c8a;--tgph-beige-10:#83827f;--tgph-beige-11:#646360;--tgph-beige-12:#21201e;--tgph-accent-1:#fffcfb;--tgph-accent-2:#fff5f2;--tgph-accent-3:#ffe9e2;--tgph-accent-4:#ffd6cb;--tgph-accent-5:#ffc8ba;--tgph-accent-6:#ffb7a6;--tgph-accent-7:#ffa28f;--tgph-accent-8:#f88872;--tgph-accent-9:#ff573a;--tgph-accent-10:#f2472a;--tgph-accent-11:#db3619;--tgph-accent-12:#5c291f;--tgph-green-1:#fbfefc;--tgph-green-2:#f4fbf7;--tgph-green-3:#e4f7ec;--tgph-green-4:#d3f1e0;--tgph-green-5:#bfead2;--tgph-green-6:#a7dfc1;--tgph-green-7:#86d0aa;--tgph-green-8:#4fba8a;--tgph-green-9:#00aa72;--tgph-green-10:#009c68;--tgph-green-11:#00834f;--tgph-green-12:#183b2b;--tgph-yellow-1:#fefdfb;--tgph-yellow-2:#fefbe9;--tgph-yellow-3:#fff7c2;--tgph-yellow-4:#ffee9c;--tgph-yellow-5:#fbe577;--tgph-yellow-6:#f3d673;--tgph-yellow-7:#e9c162;--tgph-yellow-8:#f3d673;--tgph-yellow-9:#ffc53d;--tgph-yellow-10:#ffba18;--tgph-yellow-11:#ab6400;--tgph-yellow-12:#4f3422;--tgph-blue-1:#fcfdff;--tgph-blue-2:#f6f9ff;--tgph-blue-3:#ebf2ff;--tgph-blue-4:#deebff;--tgph-blue-5:#cee0ff;--tgph-blue-6:#bbd3ff;--tgph-blue-7:#a3c1fb;--tgph-blue-8:#81a8f6;--tgph-blue-9:#4a82ff;--tgph-blue-10:#4276ec;--tgph-blue-11:#3569e0;--tgph-blue-12:#193065;--tgph-red-1:#fffcfc;--tgph-red-2:#fff7f7;--tgph-red-3:#ffe9e9;--tgph-red-4:#ffdadb;--tgph-red-5:#ffcbcd;--tgph-red-6:#ffbbbe;--tgph-red-7:#faa7ab;--tgph-red-8:#f28b92;--tgph-red-9:#e9004a;--tgph-red-10:#d9003d;--tgph-red-11:#d9003e;--tgph-red-12:#6c041f;--tgph-purple-1:#fcfcff;--tgph-purple-2:#f8f8ff;--tgph-purple-3:#f1f1ff;--tgph-purple-4:#e6e6ff;--tgph-purple-5:#dadaff;--tgph-purple-6:#cccbff;--tgph-purple-7:#b9b6ff;--tgph-purple-8:#9f99fc;--tgph-purple-9:#6547de;--tgph-purple-10:#583dc4;--tgph-purple-11:#6148d0;--tgph-purple-12:#2e2269}[data-tgph-appearance=dark]{--tgph-surface-1:#18191b;--tgph-surface-2:#101112;--tgph-surface-3:#101112;--tgph-gray-1:#101112;--tgph-gray-2:#18191b;--tgph-gray-3:#212325;--tgph-gray-4:#282a2d;--tgph-gray-5:#2f3235;--tgph-gray-6:#383b3e;--tgph-gray-7:#45484d;--tgph-gray-8:#5c6268;--tgph-gray-9:#6a6f76;--tgph-gray-10:#777d84;--tgph-gray-11:#afb5bb;--tgph-gray-12:#edeeef;--tgph-beige-1:#12110f;--tgph-beige-2:#191817;--tgph-beige-3:#232220;--tgph-beige-4:#2a2927;--tgph-beige-5:#31302e;--tgph-beige-6:#3b3937;--tgph-beige-7:#484745;--tgph-beige-8:#61605d;--tgph-beige-9:#6e6d6a;--tgph-beige-10:#7c7a78;--tgph-beige-11:#b4b3b0;--tgph-beige-12:#eeedeb;--tgph-accent-1:#160f0d;--tgph-accent-2:#201412;--tgph-accent-3:#3b140d;--tgph-accent-4:#530e04;--tgph-accent-5:#631507;--tgph-accent-6:#742315;--tgph-accent-7:#8d3323;--tgph-accent-8:#b5432f;--tgph-accent-9:#ff573a;--tgph-accent-10:#f1492d;--tgph-accent-11:#ff917a;--tgph-accent-12:#ffd1c7;--tgph-green-1:#0c130f;--tgph-green-2:#111b16;--tgph-green-3:#112d20;--tgph-green-4:#0c3c28;--tgph-green-5:#104a32;--tgph-green-6:#18583d;--tgph-green-7:#1e6949;--tgph-green-8:#217d57;--tgph-green-9:#00aa72;--tgph-green-10:#009d66;--tgph-green-11:#4dd399;--tgph-green-12:#aaf3cc;--tgph-yellow-1:#16120c;--tgph-yellow-2:#1d180f;--tgph-yellow-3:#302008;--tgph-yellow-4:#3f2700;--tgph-yellow-5:#4d3000;--tgph-yellow-6:#5c3d05;--tgph-yellow-7:#714f19;--tgph-yellow-8:#8f6424;--tgph-yellow-9:#ffc53d;--tgph-yellow-10:#ffd60a;--tgph-yellow-11:#ffca16;--tgph-yellow-12:#ffe7b3;--tgph-blue-1:#0b111c;--tgph-blue-2:#111826;--tgph-blue-3:#152548;--tgph-blue-4:#172e63;--tgph-blue-5:#1f3a76;--tgph-blue-6:#294787;--tgph-blue-7:#35569d;--tgph-blue-8:#3f66bb;--tgph-blue-9:#4a82ff;--tgph-blue-10:#3e75f1;--tgph-blue-11:#89b3ff;--tgph-blue-12:#d1e1ff;--tgph-red-1:#180e0f;--tgph-red-2:#201314;--tgph-red-3:#3f0f15;--tgph-red-4:#550517;--tgph-red-5:#670a1f;--tgph-red-6:#79182a;--tgph-red-7:#932738;--tgph-red-8:#c1334a;--tgph-red-9:#e9004a;--tgph-red-10:#c3354c;--tgph-red-11:#ff8e98;--tgph-red-12:#ffcfd1;--tgph-purple-1:#100f1d;--tgph-purple-2:#161528;--tgph-purple-3:#241e4b;--tgph-purple-4:#2e2368;--tgph-purple-5:#382c77;--tgph-purple-6:#423786;--tgph-purple-7:#4f449c;--tgph-purple-8:#6153bd;--tgph-purple-9:#6547de;--tgph-purple-10:#5936cd;--tgph-purple-11:#aea8ff;--tgph-purple-12:#dedeff}';
2
+ export {
3
+ t as default
4
+ };
5
+ //# sourceMappingURL=styles.css.inline.mjs.map
package/dist/esm/modules/guide/components/Toolbar/styles.css.inline.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.css.inline.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
package/dist/esm/modules/guide/components/Toolbar/useToolbarStyles.mjs ADDED
@@ -0,0 +1,13 @@
1
+ import n from "react";
2
+ import l from "./styles.css.inline.mjs";
3
+ const o = "knock-guide-toolbar-styles", c = (e) => {
4
+ n.useEffect(() => {
5
+ if (!e || document.getElementById(o)) return;
6
+ const t = document.createElement("style");
7
+ t.id = o, t.textContent = l, document.head.appendChild(t);
8
+ }, [e]);
9
+ };
10
+ export {
11
+ c as useToolbarStyles
12
+ };
13
+ //# sourceMappingURL=useToolbarStyles.mjs.map
package/dist/esm/modules/guide/components/Toolbar/useToolbarStyles.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useToolbarStyles.mjs","sources":["../../../../../../src/modules/guide/components/Toolbar/useToolbarStyles.ts"],"sourcesContent":["import React from \"react\";\n\nimport toolbarStyles from \"./styles.css?inline\";\n\nconst STYLE_ELEMENT_ID = \"knock-guide-toolbar-styles\";\n\n// The toolbar's styles are bundled into dist/index.css, but consumers who only\n// render custom guide components have no reason to import that stylesheet.\n// Inject the toolbar's compiled styles at runtime when it becomes visible, so\n// the toolbar works without an explicit CSS import. When dist/index.css is\n// imported anyway, the injected rules are identical duplicates and harmless.\nexport const useToolbarStyles = (enabled: boolean) => {\n React.useEffect(() => {\n if (!enabled || document.getElementById(STYLE_ELEMENT_ID)) return;\n\n const styleElement = document.createElement(\"style\");\n styleElement.id = STYLE_ELEMENT_ID;\n styleElement.textContent = toolbarStyles;\n document.head.appendChild(styleElement);\n }, [enabled]);\n};\n"],"names":["STYLE_ELEMENT_ID","useToolbarStyles","enabled","React","useEffect","document","getElementById","styleElement","createElement","id","textContent","toolbarStyles","head","appendChild"],"mappings":";;AAIA,MAAMA,IAAmB,8BAOZC,IAAmBA,CAACC,MAAqB;AACpDC,EAAAA,EAAMC,UAAU,MAAM;AACpB,QAAI,CAACF,KAAWG,SAASC,eAAeN,CAAgB,EAAG;AAErDO,UAAAA,IAAeF,SAASG,cAAc,OAAO;AACnDD,IAAAA,EAAaE,KAAKT,GAClBO,EAAaG,cAAcC,GAClBC,SAAAA,KAAKC,YAAYN,CAAY;AAAA,EAAA,GACrC,CAACL,CAAO,CAAC;AACd;"}