@knocklabs/react 0.12.1 → 0.13.0

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

@@ -1,112 +1,175 @@
-import { useGuideContext as v, useStore as x } from "@knocklabs/react-core";
-import { Button as f } from "@telegraph/button";
-import { Box as C, Stack as m } from "@telegraph/layout";
-import { Tooltip as p } from "@telegraph/tooltip";
-import { Text as b } from "@telegraph/typography";
-import { ChevronLeft as w, ChevronRight as T, X as S } from "lucide-react";
-import * as e from "react";
-import { GUIDE_ROW_DATA_SELECTOR as O } from "./GuideRow.mjs";
-import { Kbd as d } from "./Kbd.mjs";
-import { sharedTooltipProps as E } from "./helpers.mjs";
-const h = 60, R = ",", G = "/", I = (r, l) => {
-  requestAnimationFrame(() => {
-    const o = r.querySelector(`[${O}="${CSS.escape(l)}"]`);
-    if (!o || !(o instanceof HTMLElement)) return;
-    const t = r.getBoundingClientRect(), n = o.getBoundingClientRect();
-    n.top < t.top ? r.scrollTo({
-      top: r.scrollTop - (t.top - n.top) - h,
-      behavior: "smooth"
-    }) : n.bottom > t.bottom && r.scrollTo({
-      top: r.scrollTop + (n.bottom - t.bottom) + h,
-      behavior: "smooth"
-    });
-  });
-}, y = ({
-  guides: r,
-  currentKey: l,
-  focusGuide: o
-}) => {
-  const t = r.filter((c) => !!c.annotation.selectable.status);
-  if (t.length === 0) return;
-  if (!l) {
-    o(t[t.length - 1].key);
-    return;
-  }
-  const n = t.findIndex((c) => c.key === l), s = n <= 0 ? void 0 : t[n - 1];
-  s && o(s.key);
-}, k = ({
-  guides: r,
-  currentKey: l,
-  focusGuide: o
-}) => {
-  const t = r.filter((c) => !!c.annotation.selectable.status);
-  if (t.length === 0) return;
-  if (!l) {
-    o(t[0].key);
-    return;
-  }
-  const n = t.findIndex((c) => c.key === l), s = n < 0 || n + 1 > t.length - 1 ? void 0 : t[n + 1];
-  s && o(s.key);
-}, A = ({
-  guides: r,
-  guideListRef: l
-}) => {
-  const {
-    client: o
-  } = v(), {
-    debugSettings: t
-  } = x(o.store, (i) => ({
-    debugSettings: i.debug
-  })), n = Object.keys((t == null ? void 0 : t.focusedGuideKeys) || {}), s = n.length > 0, c = n[0], g = e.useCallback((i) => {
-    o.setDebug({
-      ...o.store.state.debug,
-      focusedGuideKeys: {
-        [i]: !0
-      }
-    }), l.current && I(l.current, i);
-  }, [o, l]), u = e.useRef({
-    guides: r,
-    currentKey: c,
-    focusGuide: g
-  });
-  return e.useEffect(() => {
-    u.current = {
-      guides: r,
-      currentKey: c,
-      focusGuide: g
-    };
-  }), e.useEffect(() => {
-    const i = (a) => {
-      !a.ctrlKey || a.repeat || (a.key === R ? (a.preventDefault(), y(u.current)) : a.key === G && (a.preventDefault(), k(u.current)));
-    };
-    return window.addEventListener("keydown", i), () => {
-      window.removeEventListener("keydown", i);
-    };
-  }, []), s ? /* @__PURE__ */ e.createElement(C, { borderTop: "px", px: "3", py: "1", overflow: "hidden", backgroundColor: "blue-2" }, /* @__PURE__ */ e.createElement(m, { align: "center", justify: "space-between", gap: "4" }, /* @__PURE__ */ e.createElement(b, { as: "span", size: "1", weight: "medium", color: "blue", style: {
-    display: "block",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    minWidth: 0
-  } }, "Focus mode: ", c), /* @__PURE__ */ e.createElement(m, { align: "center", gap: "1", style: {
-    flexShrink: 0
-  } }, /* @__PURE__ */ e.createElement(p, { label: /* @__PURE__ */ e.createElement(b, { as: "span", size: "1" }, "Focus previous guide", /* @__PURE__ */ e.createElement(m, { display: "inline-block", ml: "3" }, /* @__PURE__ */ e.createElement(d, null, "ctrl"), " + ", /* @__PURE__ */ e.createElement(d, null, ","))), ...E }, /* @__PURE__ */ e.createElement(f, { size: "0", variant: "ghost", color: "blue", leadingIcon: {
-    icon: w,
-    alt: "Previous guide"
-  }, onClick: () => y(u.current) })), /* @__PURE__ */ e.createElement(p, { label: /* @__PURE__ */ e.createElement(b, { as: "span", size: "1" }, "Focus next guide", /* @__PURE__ */ e.createElement(m, { display: "inline-block", ml: "3" }, /* @__PURE__ */ e.createElement(d, null, "ctrl"), " + ", /* @__PURE__ */ e.createElement(d, null, "/"))), ...E }, /* @__PURE__ */ e.createElement(f, { size: "0", variant: "ghost", color: "blue", leadingIcon: {
-    icon: T,
-    alt: "Next guide"
-  }, onClick: () => k(u.current) })), /* @__PURE__ */ e.createElement(p, { label: "Exit focus mode", ...E }, /* @__PURE__ */ e.createElement(f, { size: "0", variant: "ghost", color: "blue", leadingIcon: {
-    icon: S,
-    alt: "Clear focus"
-  }, onClick: () => {
-    o.setDebug({
-      ...t,
-      focusedGuideKeys: {}
-    });
-  } }))))) : null;
+import { sharedTooltipProps as e } from "./helpers.mjs";
+import { GUIDE_ROW_DATA_SELECTOR as t } from "./GuideRow.mjs";
+import { Kbd as n } from "./Kbd.mjs";
+import { useGuideContext as r, useStore as i } from "@knocklabs/react-core";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Button as c } from "@telegraph/button";
+import { Box as l, Stack as u } from "@telegraph/layout";
+import { Tooltip as d } from "@telegraph/tooltip";
+import { Text as f } from "@telegraph/typography";
+import { ChevronLeft as p, ChevronRight as m, X as h } from "lucide-react";
+//#region src/modules/guide/components/Toolbar/V2/FocusChin.tsx
+var g = 60, _ = ",", v = "/", y = (e, n) => {
+	requestAnimationFrame(() => {
+		let r = e.querySelector(`[${t}="${CSS.escape(n)}"]`);
+		if (!r || !(r instanceof HTMLElement)) return;
+		let i = e.getBoundingClientRect(), a = r.getBoundingClientRect();
+		a.top < i.top ? e.scrollTo({
+			top: e.scrollTop - (i.top - a.top) - g,
+			behavior: "smooth"
+		}) : a.bottom > i.bottom && e.scrollTo({
+			top: e.scrollTop + (a.bottom - i.bottom) + g,
+			behavior: "smooth"
+		});
+	});
+}, b = ({ guides: e, currentKey: t, focusGuide: n }) => {
+	let r = e.filter((e) => !!e.annotation.selectable.status);
+	if (r.length === 0) return;
+	if (!t) {
+		n(r[r.length - 1].key);
+		return;
+	}
+	let i = r.findIndex((e) => e.key === t), a = i <= 0 ? void 0 : r[i - 1];
+	a && n(a.key);
+}, x = ({ guides: e, currentKey: t, focusGuide: n }) => {
+	let r = e.filter((e) => !!e.annotation.selectable.status);
+	if (r.length === 0) return;
+	if (!t) {
+		n(r[0].key);
+		return;
+	}
+	let i = r.findIndex((e) => e.key === t), a = i < 0 || i + 1 > r.length - 1 ? void 0 : r[i + 1];
+	a && n(a.key);
+}, S = ({ guides: t, guideListRef: g }) => {
+	let { client: S } = r(), { debugSettings: C } = i(S.store, (e) => ({ debugSettings: e.debug })), w = Object.keys(C?.focusedGuideKeys || {}), T = w.length > 0, E = w[0], D = a.useCallback((e) => {
+		S.setDebug({
+			...S.store.state.debug,
+			focusedGuideKeys: { [e]: !0 }
+		}), g.current && y(g.current, e);
+	}, [S, g]), O = a.useRef({
+		guides: t,
+		currentKey: E,
+		focusGuide: D
+	});
+	return a.useEffect(() => {
+		O.current = {
+			guides: t,
+			currentKey: E,
+			focusGuide: D
+		};
+	}), a.useEffect(() => {
+		let e = (e) => {
+			!e.ctrlKey || e.repeat || (e.key === _ ? (e.preventDefault(), b(O.current)) : e.key === v && (e.preventDefault(), x(O.current)));
+		};
+		return window.addEventListener("keydown", e), () => {
+			window.removeEventListener("keydown", e);
+		};
+	}, []), T ? /* @__PURE__ */ o(l, {
+		borderTop: "px",
+		px: "3",
+		py: "1",
+		overflow: "hidden",
+		backgroundColor: "blue-2",
+		children: /* @__PURE__ */ s(u, {
+			align: "center",
+			justify: "space-between",
+			gap: "4",
+			children: [/* @__PURE__ */ s(f, {
+				as: "span",
+				size: "1",
+				weight: "medium",
+				color: "blue",
+				style: {
+					display: "block",
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap",
+					minWidth: 0
+				},
+				children: ["Focus mode: ", E]
+			}), /* @__PURE__ */ s(u, {
+				align: "center",
+				gap: "1",
+				style: { flexShrink: 0 },
+				children: [
+					/* @__PURE__ */ o(d, {
+						label: /* @__PURE__ */ s(f, {
+							as: "span",
+							size: "1",
+							children: ["Focus previous guide", /* @__PURE__ */ s(u, {
+								display: "inline-block",
+								ml: "3",
+								children: [
+									/* @__PURE__ */ o(n, { children: "ctrl" }),
+									" + ",
+									/* @__PURE__ */ o(n, { children: "," })
+								]
+							})]
+						}),
+						...e,
+						children: /* @__PURE__ */ o(c, {
+							size: "0",
+							variant: "ghost",
+							color: "blue",
+							leadingIcon: {
+								icon: p,
+								alt: "Previous guide"
+							},
+							onClick: () => b(O.current)
+						})
+					}),
+					/* @__PURE__ */ o(d, {
+						label: /* @__PURE__ */ s(f, {
+							as: "span",
+							size: "1",
+							children: ["Focus next guide", /* @__PURE__ */ s(u, {
+								display: "inline-block",
+								ml: "3",
+								children: [
+									/* @__PURE__ */ o(n, { children: "ctrl" }),
+									" + ",
+									/* @__PURE__ */ o(n, { children: "/" })
+								]
+							})]
+						}),
+						...e,
+						children: /* @__PURE__ */ o(c, {
+							size: "0",
+							variant: "ghost",
+							color: "blue",
+							leadingIcon: {
+								icon: m,
+								alt: "Next guide"
+							},
+							onClick: () => x(O.current)
+						})
+					}),
+					/* @__PURE__ */ o(d, {
+						label: "Exit focus mode",
+						...e,
+						children: /* @__PURE__ */ o(c, {
+							size: "0",
+							variant: "ghost",
+							color: "blue",
+							leadingIcon: {
+								icon: h,
+								alt: "Clear focus"
+							},
+							onClick: () => {
+								S.setDebug({
+									...C,
+									focusedGuideKeys: {}
+								});
+							}
+						})
+					})
+				]
+			})]
+		})
+	}) : null;
 };
-export {
-  A as FocusChin
-};
-//# sourceMappingURL=FocusChin.mjs.map
+//#endregion
+export { S as FocusChin };
+
+//# sourceMappingURL=FocusChin.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"FocusChin.mjs","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 { Kbd } from \"./Kbd\";\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 FOCUS_PREV_HOTKEY = \",\";\nconst FOCUS_NEXT_HOTKEY = \"/\";\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 FocusNav = {\n  guides: InspectionResultOk[\"guides\"];\n  currentKey: string | undefined;\n  focusGuide: (guideKey: string) => void;\n};\n\nconst focusPrev = ({ guides, currentKey, focusGuide }: FocusNav) => {\n  const selectableGuides = guides.filter(\n    (g) => !!g.annotation.selectable.status,\n  );\n  if (selectableGuides.length === 0) return;\n\n  if (!currentKey) {\n    focusGuide(selectableGuides[selectableGuides.length - 1]!.key);\n    return;\n  }\n\n  const currIndex = selectableGuides.findIndex((g) => g.key === currentKey);\n  const prevGuide =\n    currIndex <= 0 ? undefined : selectableGuides[currIndex - 1];\n  if (!prevGuide) return;\n  focusGuide(prevGuide.key);\n};\n\nconst focusNext = ({ guides, currentKey, focusGuide }: FocusNav) => {\n  const selectableGuides = guides.filter(\n    (g) => !!g.annotation.selectable.status,\n  );\n  if (selectableGuides.length === 0) return;\n\n  if (!currentKey) {\n    focusGuide(selectableGuides[0]!.key);\n    return;\n  }\n\n  const currIndex = selectableGuides.findIndex((g) => g.key === currentKey);\n  const nextGuide =\n    currIndex < 0 || currIndex + 1 > selectableGuides.length - 1\n      ? undefined\n      : selectableGuides[currIndex + 1];\n  if (!nextGuide) return;\n  focusGuide(nextGuide.key);\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  const isFocused = focusedKeys.length > 0;\n  const currentKey = focusedKeys[0];\n\n  const focusGuide = React.useCallback(\n    (guideKey: string) => {\n      client.setDebug({\n        ...client.store.state.debug,\n        focusedGuideKeys: { [guideKey]: true },\n      });\n      if (guideListRef.current) {\n        maybeScrollGuideIntoView(guideListRef.current, guideKey);\n      }\n    },\n    [client, guideListRef],\n  );\n\n  // Latest-ref so the window keydown listener below can attach once and always\n  // read the current guides / focused key without needing to re-subscribe.\n  const latestRef = React.useRef<FocusNav>({ guides, currentKey, focusGuide });\n  React.useEffect(() => {\n    latestRef.current = { guides, currentKey, focusGuide };\n  });\n\n  React.useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (!e.ctrlKey || e.repeat) return;\n      if (e.key === FOCUS_PREV_HOTKEY) {\n        e.preventDefault();\n        focusPrev(latestRef.current);\n      } else if (e.key === FOCUS_NEXT_HOTKEY) {\n        e.preventDefault();\n        focusNext(latestRef.current);\n      }\n    };\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, []);\n\n  if (!isFocused) {\n    return null;\n  }\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\n            label={\n              <Text as=\"span\" size=\"1\">\n                Focus previous guide\n                <Stack display=\"inline-block\" ml=\"3\">\n                  <Kbd>ctrl</Kbd> + <Kbd>,</Kbd>\n                </Stack>\n              </Text>\n            }\n            {...sharedTooltipProps}\n          >\n            <Button\n              size=\"0\"\n              variant=\"ghost\"\n              color=\"blue\"\n              leadingIcon={{ icon: ChevronLeft, alt: \"Previous guide\" }}\n              onClick={() => focusPrev(latestRef.current)}\n            />\n          </Tooltip>\n          <Tooltip\n            label={\n              <Text as=\"span\" size=\"1\">\n                Focus next guide\n                <Stack display=\"inline-block\" ml=\"3\">\n                  <Kbd>ctrl</Kbd> + <Kbd>/</Kbd>\n                </Stack>\n              </Text>\n            }\n            {...sharedTooltipProps}\n          >\n            <Button\n              size=\"0\"\n              variant=\"ghost\"\n              color=\"blue\"\n              leadingIcon={{ icon: ChevronRight, alt: \"Next guide\" }}\n              onClick={() => focusNext(latestRef.current)}\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","FOCUS_PREV_HOTKEY","FOCUS_NEXT_HOTKEY","maybeScrollGuideIntoView","container","guideKey","requestAnimationFrame","el","querySelector","GUIDE_ROW_DATA_SELECTOR","CSS","escape","HTMLElement","containerRect","getBoundingClientRect","elRect","top","scrollTo","scrollTop","behavior","bottom","focusPrev","guides","currentKey","focusGuide","selectableGuides","filter","g","annotation","selectable","status","length","key","currIndex","findIndex","prevGuide","undefined","focusNext","nextGuide","FocusChin","guideListRef","client","useGuideContext","debugSettings","useStore","store","state","debug","focusedKeys","Object","keys","focusedGuideKeys","isFocused","React","useCallback","setDebug","current","latestRef","useRef","useEffect","handleKeyDown","e","ctrlKey","repeat","preventDefault","addEventListener","removeEventListener","Box","Stack","Text","display","overflow","textOverflow","whiteSpace","minWidth","flexShrink","Tooltip","Kbd","sharedTooltipProps","Button","icon","ChevronLeft","alt","ChevronRight","X"],"mappings":";;;;;;;;;;AAeA,MAAMA,IAAmB,IAEnBC,IAAoB,KACpBC,IAAoB,KAEpBC,IAA2BA,CAACC,GAAwBC,MAAqB;AAC7EC,wBAAsB,MAAM;AACpBC,UAAAA,IAAKH,EAAUI,cACnB,IAAIC,CAAuB,KAAKC,IAAIC,OAAON,CAAQ,CAAC,IACtD;AACA,QAAI,CAACE,KAAM,EAAEA,aAAcK,aAAc;AAEnCC,UAAAA,IAAgBT,EAAUU,sBAAsB,GAChDC,IAASR,EAAGO,sBAAsB;AAEpCC,IAAAA,EAAOC,MAAMH,EAAcG,MAC7BZ,EAAUa,SAAS;AAAA,MACjBD,KACEZ,EAAUc,aACTL,EAAcG,MAAMD,EAAOC,OAC5BhB;AAAAA,MACFmB,UAAU;AAAA,IAAA,CACX,IACQJ,EAAOK,SAASP,EAAcO,UACvChB,EAAUa,SAAS;AAAA,MACjBD,KACEZ,EAAUc,aACTH,EAAOK,SAASP,EAAcO,UAC/BpB;AAAAA,MACFmB,UAAU;AAAA,IAAA,CACX;AAAA,EACH,CACD;AACH,GAQME,IAAYA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAQC,YAAAA;AAAAA,EAAYC,YAAAA;AAAqB,MAAM;AAC5DC,QAAAA,IAAmBH,EAAOI,OAC7BC,CAAAA,MAAM,CAAC,CAACA,EAAEC,WAAWC,WAAWC,MACnC;AACIL,MAAAA,EAAiBM,WAAW,EAAG;AAEnC,MAAI,CAACR,GAAY;AACfC,IAAAA,EAAWC,EAAiBA,EAAiBM,SAAS,CAAC,EAAGC,GAAG;AAC7D;AAAA,EAAA;AAGF,QAAMC,IAAYR,EAAiBS,UAAWP,CAAMA,MAAAA,EAAEK,QAAQT,CAAU,GAClEY,IACJF,KAAa,IAAIG,SAAYX,EAAiBQ,IAAY,CAAC;AAC7D,EAAKE,KACLX,EAAWW,EAAUH,GAAG;AAC1B,GAEMK,IAAYA,CAAC;AAAA,EAAEf,QAAAA;AAAAA,EAAQC,YAAAA;AAAAA,EAAYC,YAAAA;AAAqB,MAAM;AAC5DC,QAAAA,IAAmBH,EAAOI,OAC7BC,CAAAA,MAAM,CAAC,CAACA,EAAEC,WAAWC,WAAWC,MACnC;AACIL,MAAAA,EAAiBM,WAAW,EAAG;AAEnC,MAAI,CAACR,GAAY;AACJE,IAAAA,EAAAA,EAAiB,CAAC,EAAGO,GAAG;AACnC;AAAA,EAAA;AAGF,QAAMC,IAAYR,EAAiBS,UAAWP,CAAMA,MAAAA,EAAEK,QAAQT,CAAU,GAClEe,IACJL,IAAY,KAAKA,IAAY,IAAIR,EAAiBM,SAAS,IACvDK,SACAX,EAAiBQ,IAAY,CAAC;AACpC,EAAKK,KACLd,EAAWc,EAAUN,GAAG;AAC1B,GAOaO,IAAYA,CAAC;AAAA,EAAEjB,QAAAA;AAAAA,EAAQkB,cAAAA;AAAoB,MAAM;AACtD,QAAA;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAgB,GAC7B;AAAA,IAAEC,eAAAA;AAAAA,EAAkBC,IAAAA,EAASH,EAAOI,OAAQC,CAAWA,OAAA;AAAA,IAC3DH,eAAeG,EAAMC;AAAAA,EAAAA,EACrB,GAEIC,IAAcC,OAAOC,MAAKP,KAAAA,gBAAAA,EAAeQ,qBAAoB,CAAA,CAAE,GAC/DC,IAAYJ,EAAYjB,SAAS,GACjCR,IAAayB,EAAY,CAAC,GAE1BxB,IAAa6B,EAAMC,YACvB,CAACjD,MAAqB;AACpBoC,IAAAA,EAAOc,SAAS;AAAA,MACd,GAAGd,EAAOI,MAAMC,MAAMC;AAAAA,MACtBI,kBAAkB;AAAA,QAAE,CAAC9C,CAAQ,GAAG;AAAA,MAAA;AAAA,IAAK,CACtC,GACGmC,EAAagB,WACUhB,EAAAA,EAAagB,SAASnD,CAAQ;AAAA,EACzD,GAEF,CAACoC,GAAQD,CAAY,CACvB,GAIMiB,IAAYJ,EAAMK,OAAiB;AAAA,IAAEpC,QAAAA;AAAAA,IAAQC,YAAAA;AAAAA,IAAYC,YAAAA;AAAAA,EAAAA,CAAY;AAsB3E,SArBA6B,EAAMM,UAAU,MAAM;AACpBF,IAAAA,EAAUD,UAAU;AAAA,MAAElC,QAAAA;AAAAA,MAAQC,YAAAA;AAAAA,MAAYC,YAAAA;AAAAA,IAAW;AAAA,EAAA,CACtD,GAED6B,EAAMM,UAAU,MAAM;AACdC,UAAAA,IAAgBA,CAACC,MAAqB;AAC1C,MAAI,CAACA,EAAEC,WAAWD,EAAEE,WAChBF,EAAE7B,QAAQ/B,KACZ4D,EAAEG,eAAe,GACjB3C,EAAUoC,EAAUD,OAAO,KAClBK,EAAE7B,QAAQ9B,MACnB2D,EAAEG,eAAe,GACjB3B,EAAUoB,EAAUD,OAAO;AAAA,IAE/B;AACOS,kBAAAA,iBAAiB,WAAWL,CAAa,GACzC,MAAM;AACJM,aAAAA,oBAAoB,WAAWN,CAAa;AAAA,IACrD;AAAA,EACF,GAAG,EAAE,GAEAR,IAKF,gBAAAC,EAAA,cAAAc,GAAA,EACC,WAAU,MACV,IAAG,KACH,IAAG,KACH,UAAS,UACT,iBAAgB,SAAA,mCAEfC,GAAM,EAAA,OAAM,UAAS,SAAQ,iBAAgB,KAAI,OAChD,gBAAAf,EAAA,cAACgB,GACC,EAAA,IAAG,QACH,MAAK,KACL,QAAO,UACP,OAAM,QACN,OAAO;AAAA,IACLC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,UAAU;AAAA,EACZ,EAAA,GAAE,gBAEWnD,CACf,GACA,gBAAA8B,EAAA,cAACe,KAAM,OAAM,UAAS,KAAI,KAAI,OAAO;AAAA,IAAEO,YAAY;AAAA,OAChD,gBAAAtB,EAAA,cAAAuB,GAAA,EACC,OACE,gBAAAvB,EAAA,cAACgB,KAAK,IAAG,QAAO,MAAK,OAAG,wBAErB,gBAAAhB,EAAA,cAAAe,GAAA,EAAM,SAAQ,gBAAe,IAAG,OAC9B,gBAAAf,EAAA,cAAAwB,GAAA,MAAI,MAAI,GAAM,OAAI,gBAAAxB,EAAA,cAAAwB,GAAA,MAAI,GAAC,CAC1B,CACF,GAEF,GAAIC,EAEJ,GAAA,gBAAAzB,EAAA,cAAC0B,KACC,MAAK,KACL,SAAQ,SACR,OAAM,QACN,aAAa;AAAA,IAAEC,MAAMC;AAAAA,IAAaC,KAAK;AAAA,EAAiB,GACxD,SAAS,MAAM7D,EAAUoC,EAAUD,OAAO,EAAA,CAAE,CAEhD,GACA,gBAAAH,EAAA,cAACuB,KACC,OACE,gBAAAvB,EAAA,cAACgB,KAAK,IAAG,QAAO,MAAK,IAAG,GAAA,oBAErB,gBAAAhB,EAAA,cAAAe,GAAA,EAAM,SAAQ,gBAAe,IAAG,IAC/B,GAAA,gBAAAf,EAAA,cAACwB,SAAI,MAAI,GAAM,OAAI,gBAAAxB,EAAA,cAAAwB,GAAA,MAAI,GAAC,CAC1B,CACF,GAEF,GAAIC,EAAAA,mCAEHC,GACC,EAAA,MAAK,KACL,SAAQ,SACR,OAAM,QACN,aAAa;AAAA,IAAEC,MAAMG;AAAAA,IAAcD,KAAK;AAAA,EAAa,GACrD,SAAS,MAAM7C,EAAUoB,EAAUD,OAAO,EAAA,CAAE,CAEhD,GACC,gBAAAH,EAAA,cAAAuB,GAAA,EAAQ,OAAM,mBAAsBE,GAAAA,KACnC,gBAAAzB,EAAA,cAAC0B,GACC,EAAA,MAAK,KACL,SAAQ,SACR,OAAM,QACN,aAAa;AAAA,IAAEC,MAAMI;AAAAA,IAAGF,KAAK;AAAA,EAAc,GAC3C,SAAS,MAAM;AACbzC,IAAAA,EAAOc,SAAS;AAAA,MAAE,GAAGZ;AAAAA,MAAeQ,kBAAkB,CAAA;AAAA,IAAC,CAAG;AAAA,EAAA,EAC1D,CAAA,CAEN,CACF,CACF,CACF,IA/EO;AAiFX;"}
+{"version":3,"file":"FocusChin.mjs","names":[],"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 { Kbd } from \"./Kbd\";\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 FOCUS_PREV_HOTKEY = \",\";\nconst FOCUS_NEXT_HOTKEY = \"/\";\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 FocusNav = {\n  guides: InspectionResultOk[\"guides\"];\n  currentKey: string | undefined;\n  focusGuide: (guideKey: string) => void;\n};\n\nconst focusPrev = ({ guides, currentKey, focusGuide }: FocusNav) => {\n  const selectableGuides = guides.filter(\n    (g) => !!g.annotation.selectable.status,\n  );\n  if (selectableGuides.length === 0) return;\n\n  if (!currentKey) {\n    focusGuide(selectableGuides[selectableGuides.length - 1]!.key);\n    return;\n  }\n\n  const currIndex = selectableGuides.findIndex((g) => g.key === currentKey);\n  const prevGuide =\n    currIndex <= 0 ? undefined : selectableGuides[currIndex - 1];\n  if (!prevGuide) return;\n  focusGuide(prevGuide.key);\n};\n\nconst focusNext = ({ guides, currentKey, focusGuide }: FocusNav) => {\n  const selectableGuides = guides.filter(\n    (g) => !!g.annotation.selectable.status,\n  );\n  if (selectableGuides.length === 0) return;\n\n  if (!currentKey) {\n    focusGuide(selectableGuides[0]!.key);\n    return;\n  }\n\n  const currIndex = selectableGuides.findIndex((g) => g.key === currentKey);\n  const nextGuide =\n    currIndex < 0 || currIndex + 1 > selectableGuides.length - 1\n      ? undefined\n      : selectableGuides[currIndex + 1];\n  if (!nextGuide) return;\n  focusGuide(nextGuide.key);\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  const isFocused = focusedKeys.length > 0;\n  const currentKey = focusedKeys[0];\n\n  const focusGuide = React.useCallback(\n    (guideKey: string) => {\n      client.setDebug({\n        ...client.store.state.debug,\n        focusedGuideKeys: { [guideKey]: true },\n      });\n      if (guideListRef.current) {\n        maybeScrollGuideIntoView(guideListRef.current, guideKey);\n      }\n    },\n    [client, guideListRef],\n  );\n\n  // Latest-ref so the window keydown listener below can attach once and always\n  // read the current guides / focused key without needing to re-subscribe.\n  const latestRef = React.useRef<FocusNav>({ guides, currentKey, focusGuide });\n  React.useEffect(() => {\n    latestRef.current = { guides, currentKey, focusGuide };\n  });\n\n  React.useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (!e.ctrlKey || e.repeat) return;\n      if (e.key === FOCUS_PREV_HOTKEY) {\n        e.preventDefault();\n        focusPrev(latestRef.current);\n      } else if (e.key === FOCUS_NEXT_HOTKEY) {\n        e.preventDefault();\n        focusNext(latestRef.current);\n      }\n    };\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, []);\n\n  if (!isFocused) {\n    return null;\n  }\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\n            label={\n              <Text as=\"span\" size=\"1\">\n                Focus previous guide\n                <Stack display=\"inline-block\" ml=\"3\">\n                  <Kbd>ctrl</Kbd> + <Kbd>,</Kbd>\n                </Stack>\n              </Text>\n            }\n            {...sharedTooltipProps}\n          >\n            <Button\n              size=\"0\"\n              variant=\"ghost\"\n              color=\"blue\"\n              leadingIcon={{ icon: ChevronLeft, alt: \"Previous guide\" }}\n              onClick={() => focusPrev(latestRef.current)}\n            />\n          </Tooltip>\n          <Tooltip\n            label={\n              <Text as=\"span\" size=\"1\">\n                Focus next guide\n                <Stack display=\"inline-block\" ml=\"3\">\n                  <Kbd>ctrl</Kbd> + <Kbd>/</Kbd>\n                </Stack>\n              </Text>\n            }\n            {...sharedTooltipProps}\n          >\n            <Button\n              size=\"0\"\n              variant=\"ghost\"\n              color=\"blue\"\n              leadingIcon={{ icon: ChevronRight, alt: \"Next guide\" }}\n              onClick={() => focusNext(latestRef.current)}\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"],"mappings":"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"}

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

@@ -1,19 +1,82 @@
-import e from "react";
-import { Stack as i } from "@telegraph/layout";
-import { Tooltip as a } from "@telegraph/tooltip";
-import { sharedTooltipProps as l } from "./helpers.mjs";
-const o = {
-  blue: /* @__PURE__ */ e.createElement("svg", { width: "8", height: "8", viewBox: "0 0 8 8", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement("circle", { cx: "4", cy: "4", r: "4", fill: "var(--tgph-blue-9)" })),
-  yellow: /* @__PURE__ */ e.createElement("svg", { width: "8", height: "8", viewBox: "0 0 8 8", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement("polygon", { points: "4,0.5 7.5,7.5 0.5,7.5", fill: "var(--tgph-yellow-9)" })),
-  gray: /* @__PURE__ */ e.createElement("svg", { width: "8", height: "8", viewBox: "0 0 8 8", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement("circle", { cx: "4", cy: "4", r: "2.75", fill: "none", stroke: "var(--tgph-gray-9)", strokeWidth: "2.5" })),
-  red: /* @__PURE__ */ e.createElement("svg", { width: "8", height: "8", viewBox: "0 0 8 8", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement("line", { x1: "1.5", y1: "1.5", x2: "6.5", y2: "6.5", stroke: "var(--tgph-red-9)", strokeWidth: "2", strokeLinecap: "round" }), /* @__PURE__ */ e.createElement("line", { x1: "6.5", y1: "1.5", x2: "1.5", y2: "6.5", stroke: "var(--tgph-red-9)", strokeWidth: "2", strokeLinecap: "round" }))
-}, s = ({
-  color: t,
-  tooltip: r
-}) => /* @__PURE__ */ e.createElement(a, { label: r, ...l }, /* @__PURE__ */ e.createElement(i, { as: "span", align: "center", justify: "center", display: "inline-flex", p: "0_5", style: {
-  flexShrink: 0
-} }, o[t]));
-export {
-  s as GuideAnnotatedStatusDot
-};
-//# sourceMappingURL=GuideAnnotatedStatusDot.mjs.map
+import { sharedTooltipProps as e } from "./helpers.mjs";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Stack as r } from "@telegraph/layout";
+import { Tooltip as i } from "@telegraph/tooltip";
+//#region src/modules/guide/components/Toolbar/V2/GuideAnnotatedStatusDot.tsx
+var a = {
+	blue: /* @__PURE__ */ t("svg", {
+		width: "8",
+		height: "8",
+		viewBox: "0 0 8 8",
+		"aria-hidden": !0,
+		children: /* @__PURE__ */ t("circle", {
+			cx: "4",
+			cy: "4",
+			r: "4",
+			fill: "var(--tgph-blue-9)"
+		})
+	}),
+	yellow: /* @__PURE__ */ t("svg", {
+		width: "8",
+		height: "8",
+		viewBox: "0 0 8 8",
+		"aria-hidden": !0,
+		children: /* @__PURE__ */ t("polygon", {
+			points: "4,0.5 7.5,7.5 0.5,7.5",
+			fill: "var(--tgph-yellow-9)"
+		})
+	}),
+	gray: /* @__PURE__ */ t("svg", {
+		width: "8",
+		height: "8",
+		viewBox: "0 0 8 8",
+		"aria-hidden": !0,
+		children: /* @__PURE__ */ t("circle", {
+			cx: "4",
+			cy: "4",
+			r: "2.75",
+			fill: "none",
+			stroke: "var(--tgph-gray-9)",
+			strokeWidth: "2.5"
+		})
+	}),
+	red: /* @__PURE__ */ n("svg", {
+		width: "8",
+		height: "8",
+		viewBox: "0 0 8 8",
+		"aria-hidden": !0,
+		children: [/* @__PURE__ */ t("line", {
+			x1: "1.5",
+			y1: "1.5",
+			x2: "6.5",
+			y2: "6.5",
+			stroke: "var(--tgph-red-9)",
+			strokeWidth: "2",
+			strokeLinecap: "round"
+		}), /* @__PURE__ */ t("line", {
+			x1: "6.5",
+			y1: "1.5",
+			x2: "1.5",
+			y2: "6.5",
+			stroke: "var(--tgph-red-9)",
+			strokeWidth: "2",
+			strokeLinecap: "round"
+		})]
+	})
+}, o = ({ color: n, tooltip: o }) => /* @__PURE__ */ t(i, {
+	label: o,
+	...e,
+	children: /* @__PURE__ */ t(r, {
+		as: "span",
+		align: "center",
+		justify: "center",
+		display: "inline-flex",
+		p: "0_5",
+		style: { flexShrink: 0 },
+		children: a[n]
+	})
+});
+//#endregion
+export { o as GuideAnnotatedStatusDot };
+
+//# sourceMappingURL=GuideAnnotatedStatusDot.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"GuideAnnotatedStatusDot.mjs","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":";;;;AAQA,MAAMA,IAAsD;AAAA,EAC1DC,sCACG,OAAI,EAAA,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,eAAW,MACpDC,gBAAAA,EAAA,cAAA,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,MAAK,qBAAoB,CAAA,CACvD;AAAA,EAEFC,QACGD,gBAAAA,EAAA,cAAA,OAAA,EAAI,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,eAAW,MACpDA,gBAAAA,EAAA,cAAA,WAAA,EAAQ,QAAO,yBAAwB,MAAK,wBAAsB,CACrE;AAAA,EAEFE,MACGF,gBAAAA,EAAA,cAAA,OAAA,EAAI,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,eAAW,GACrD,GAAAA,gBAAAA,EAAA,cAAC,YACC,IAAG,KACH,IAAG,KACH,GAAE,QACF,MAAK,QACL,QAAO,sBACP,aAAY,MAAK,CAAA,CAErB;AAAA,EAEFG,qCACG,OAAI,EAAA,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,eAAW,MACpDH,gBAAAA,EAAA,cAAA,QAAA,EACC,IAAG,OACH,IAAG,OACH,IAAG,OACH,IAAG,OACH,QAAO,qBACP,aAAY,KACZ,eAAc,QAAO,CAAA,mCAEtB,QACC,EAAA,IAAG,OACH,IAAG,OACH,IAAG,OACH,IAAG,OACH,QAAO,qBACP,aAAY,KACZ,eAAc,SAAO,CAEzB;AAEJ,GAEaI,IAA0BA,CAAC;AAAA,EACtCC,OAAAA;AAAAA,EACAC,SAAAA;AAIF,sCAEKC,GAAQ,EAAA,OAAOD,GAAaE,GAAAA,EAAAA,mCAC1BC,GACC,EAAA,IAAG,QACH,OAAM,UACN,SAAQ,UACR,SAAQ,eACR,GAAE,OACF,OAAO;AAAA,EAAEC,YAAY;AAAA,KAEpBZ,EAAcO,CAAK,CACtB,CACF;"}
+{"version":3,"file":"GuideAnnotatedStatusDot.mjs","names":[],"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"],"mappings":";;;;;AAQA,IAAM,IAAsD;CAC1D,MACE,kBAAC,OAAD;EAAK,OAAM;EAAI,QAAO;EAAI,SAAQ;EAAU,eAAA;YAC1C,kBAAC,UAAD;GAAQ,IAAG;GAAI,IAAG;GAAI,GAAE;GAAI,MAAK;EAAsB,CAAA;CACpD,CAAA;CAEP,QACE,kBAAC,OAAD;EAAK,OAAM;EAAI,QAAO;EAAI,SAAQ;EAAU,eAAA;YAC1C,kBAAC,WAAD;GAAS,QAAO;GAAwB,MAAK;EAAwB,CAAA;CAClE,CAAA;CAEP,MACE,kBAAC,OAAD;EAAK,OAAM;EAAI,QAAO;EAAI,SAAQ;EAAU,eAAA;YAC1C,kBAAC,UAAD;GACE,IAAG;GACH,IAAG;GACH,GAAE;GACF,MAAK;GACL,QAAO;GACP,aAAY;EACb,CAAA;CACE,CAAA;CAEP,KACE,kBAAC,OAAD;EAAK,OAAM;EAAI,QAAO;EAAI,SAAQ;EAAU,eAAA;YAA5C,CACE,kBAAC,QAAD;GACE,IAAG;GACH,IAAG;GACH,IAAG;GACH,IAAG;GACH,QAAO;GACP,aAAY;GACZ,eAAc;EACf,CAAA,GACD,kBAAC,QAAD;GACE,IAAG;GACH,IAAG;GACH,IAAG;GACH,IAAG;GACH,QAAO;GACP,aAAY;GACZ,eAAc;EACf,CAAA,CACE;;AAET,GAEa,KAA2B,EACtC,UACA,iBAME,kBAAC,GAAD;CAAS,OAAO;CAAS,GAAI;WAC3B,kBAAC,GAAD;EACE,IAAG;EACH,OAAM;EACN,SAAQ;EACR,SAAQ;EACR,GAAE;EACF,OAAO,EAAE,YAAY,EAAE;YAEtB,EAAc;CACV,CAAA;AACA,CAAA"}