@knocklabs/react 0.11.4 → 0.11.5

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"GuideRow.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideRow.tsx"],"sourcesContent":["import { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport {\n  CheckCircle2,\n  CircleDashed,\n  Code2,\n  Eye,\n  LocateFixed,\n  UserCircle2,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { GuideHoverCard } from \"./GuideHoverCard\";\nimport {\n  AnnotatedGuide,\n  UnknownGuide,\n  isUnknownGuide,\n} from \"./useInspectGuideClientStore\";\n\nconst Row = ({ children }: React.PropsWithChildren) => (\n  <Stack h=\"7\" px=\"2\" borderTop=\"px\" justify=\"space-between\" align=\"center\">\n    {children}\n  </Stack>\n);\n\ntype Props = {\n  guide: UnknownGuide | AnnotatedGuide;\n  orderIndex: number;\n};\n\nexport const GuideRow = ({ guide, orderIndex }: Props) => {\n  return (\n    <Row>\n      <GuideHoverCard guide={guide}>\n        <Stack h=\"6\" justify=\"flex-start\" align=\"center\" gap=\"2\">\n          <Tag\n            size=\"0\"\n            variant=\"soft\"\n            color={guide.bypass_global_group_limit ? \"blue\" : \"default\"}\n          >\n            {orderIndex + 1}\n          </Tag>\n          <Text as=\"code\" size=\"1\">\n            {guide.key}\n          </Text>\n        </Stack>\n      </GuideHoverCard>\n\n      <Stack justify=\"flex-end\">\n        {!isUnknownGuide(guide) && (\n          <>\n            <Stack gap=\"1\">\n              <Tooltip\n                label={\n                  guide.annotation.selectable.status === \"returned\"\n                    ? \"This guide was queried and can display\"\n                    : guide.annotation.selectable.status === \"queried\"\n                      ? \"This guide was queried but cannot display\"\n                      : guide.annotation.selectable.status === \"throttled\"\n                        ? \"This guide was queried and can display but is throttled currently\"\n                        : \"No component is present in the current location to display this guide\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={\n                    guide.annotation.selectable.status === \"returned\"\n                      ? \"green\"\n                      : guide.annotation.selectable.status === \"queried\"\n                        ? \"gray\"\n                        : guide.annotation.selectable.status === \"throttled\"\n                          ? \"yellow\"\n                          : \"red\"\n                  }\n                  leadingIcon={{ icon: Code2, alt: \"Render\" }}\n                />\n              </Tooltip>\n              <Tooltip\n                label={\n                  guide.annotation.activatable.status\n                    ? \"This guide can be activated at the current location\"\n                    : \"This guide cannot be activated at the current location\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.activatable.status ? \"green\" : \"red\"}\n                  leadingIcon={{ icon: LocateFixed, alt: \"Target\" }}\n                />\n              </Tooltip>\n            </Stack>\n            <Stack px=\"2\" align=\"center\">\n              <Box h=\"3\" borderLeft=\"px\" borderColor=\"gray-6\" />\n            </Stack>\n          </>\n        )}\n        <Stack gap=\"1\">\n          {!isUnknownGuide(guide) && (\n            <>\n              <Tooltip\n                label={\n                  guide.annotation.targetable.status\n                    ? \"This user is being targeted\"\n                    : guide.annotation.targetable.message\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.targetable.status ? \"green\" : \"red\"}\n                  leadingIcon={{ icon: UserCircle2, alt: \"Target\" }}\n                />\n              </Tooltip>\n              <Tooltip\n                label={\n                  guide.annotation.archived.status\n                    ? \"User has already dismissed this guide\"\n                    : \"User has not dismissed this guide\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.archived.status ? \"red\" : \"green\"}\n                  leadingIcon={{ icon: Eye, alt: \"Not archived\" }}\n                />\n              </Tooltip>\n            </>\n          )}\n          <Tooltip\n            label={\n              isUnknownGuide(guide)\n                ? \"This guide has never been committed and published yet\"\n                : !guide.active\n                  ? \"This guide is not active\"\n                  : \"This guide is active\"\n            }\n          >\n            <Button\n              px=\"1\"\n              size=\"1\"\n              variant=\"soft\"\n              color={guide.active ? \"green\" : \"red\"}\n              leadingIcon={\n                guide.active\n                  ? { icon: CheckCircle2, alt: \"Active\" }\n                  : { icon: CircleDashed, alt: \"Inactive\" }\n              }\n            />\n          </Tooltip>\n        </Stack>\n      </Stack>\n    </Row>\n  );\n};\n"],"names":["Row","children","React","Stack","GuideRow","guide","orderIndex","GuideHoverCard","Tag","bypass_global_group_limit","Text","key","isUnknownGuide","Tooltip","annotation","selectable","status","Button","icon","Code2","alt","activatable","LocateFixed","Box","targetable","message","UserCircle2","archived","Eye","active","CheckCircle2","CircleDashed"],"mappings":"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"}
+{"version":3,"file":"GuideRow.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideRow.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport {\n  CheckCircle2,\n  CircleDashed,\n  Code2,\n  Eye,\n  LocateFixed,\n  Pin,\n  UserCircle2,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { GuideHoverCard } from \"./GuideHoverCard\";\nimport {\n  AnnotatedGuide,\n  UnknownGuide,\n  isUnknownGuide,\n} from \"./useInspectGuideClientStore\";\n\nconst Row = ({ children }: React.PropsWithChildren) => (\n  <Stack h=\"7\" px=\"2\" borderTop=\"px\" justify=\"space-between\" align=\"center\">\n    {children}\n  </Stack>\n);\n\ntype Props = {\n  guide: UnknownGuide | AnnotatedGuide;\n  orderIndex: number;\n};\n\nexport const GuideRow = ({ guide, orderIndex }: Props) => {\n  const { client } = useGuideContext();\n  const { debugSettings } = useStore(client.store, (state) => ({\n    debugSettings: state.debug || {},\n  }));\n\n  const focusedGuideKeys = debugSettings.focusedGuideKeys || {};\n  const hasFocus = Object.keys(focusedGuideKeys).length > 0;\n  const isFocused = !!focusedGuideKeys[guide.key];\n\n  return (\n    <Row>\n      <GuideHoverCard guide={guide}>\n        <Stack h=\"6\" justify=\"flex-start\" align=\"center\" gap=\"2\">\n          <Tag\n            size=\"0\"\n            variant=\"soft\"\n            color={guide.bypass_global_group_limit ? \"blue\" : \"default\"}\n          >\n            {orderIndex + 1}\n          </Tag>\n          <Text\n            as=\"code\"\n            size=\"1\"\n            color={!hasFocus ? \"default\" : isFocused ? \"blue\" : \"disabled\"}\n          >\n            {guide.key}\n          </Text>\n        </Stack>\n      </GuideHoverCard>\n\n      <Stack justify=\"flex-end\">\n        {!isUnknownGuide(guide) && (\n          <>\n            {guide.annotation.selectable.status !== undefined &&\n              (!hasFocus || isFocused) && (\n                <>\n                  <Tooltip\n                    label={\n                      isFocused ? \"Unfocus this guide\" : \"Focus on this guide\"\n                    }\n                  >\n                    <Button\n                      size=\"1\"\n                      variant=\"ghost\"\n                      color={isFocused ? \"blue\" : \"gray\"}\n                      leadingIcon={{ icon: Pin, alt: \"Focus\" }}\n                      onClick={() =>\n                        client.setDebug({\n                          ...debugSettings,\n                          focusedGuideKeys: isFocused\n                            ? {}\n                            : { [guide.key]: true },\n                        })\n                      }\n                    />\n                  </Tooltip>\n                  <Stack px=\"2\" align=\"center\">\n                    <Box h=\"3\" borderLeft=\"px\" borderColor=\"gray-6\" />\n                  </Stack>\n                </>\n              )}\n            <Stack gap=\"1\">\n              <Tooltip\n                label={\n                  guide.annotation.selectable.status === \"returned\"\n                    ? \"This guide was queried and can display\"\n                    : guide.annotation.selectable.status === \"queried\"\n                      ? \"This guide was queried but cannot display\"\n                      : guide.annotation.selectable.status === \"throttled\"\n                        ? \"This guide was queried and can display but is throttled currently\"\n                        : \"No component is present in the current location to display this guide\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={\n                    guide.annotation.selectable.status === \"returned\"\n                      ? \"green\"\n                      : guide.annotation.selectable.status === \"queried\"\n                        ? \"gray\"\n                        : guide.annotation.selectable.status === \"throttled\"\n                          ? \"yellow\"\n                          : \"red\"\n                  }\n                  leadingIcon={{ icon: Code2, alt: \"Render\" }}\n                />\n              </Tooltip>\n              <Tooltip\n                label={\n                  guide.annotation.activatable.status\n                    ? \"This guide can be activated at the current location\"\n                    : \"This guide cannot be activated at the current location\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.activatable.status ? \"green\" : \"red\"}\n                  leadingIcon={{ icon: LocateFixed, alt: \"Target\" }}\n                />\n              </Tooltip>\n            </Stack>\n            <Stack px=\"2\" align=\"center\">\n              <Box h=\"3\" borderLeft=\"px\" borderColor=\"gray-6\" />\n            </Stack>\n          </>\n        )}\n        <Stack gap=\"1\">\n          {!isUnknownGuide(guide) && (\n            <>\n              <Tooltip\n                label={\n                  guide.annotation.targetable.status\n                    ? \"This user is being targeted\"\n                    : guide.annotation.targetable.message\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.targetable.status ? \"green\" : \"red\"}\n                  leadingIcon={{ icon: UserCircle2, alt: \"Target\" }}\n                />\n              </Tooltip>\n              <Tooltip\n                label={\n                  guide.annotation.archived.status\n                    ? \"User has already dismissed this guide\"\n                    : \"User has not dismissed this guide\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.archived.status ? \"red\" : \"green\"}\n                  leadingIcon={{ icon: Eye, alt: \"Not archived\" }}\n                />\n              </Tooltip>\n            </>\n          )}\n          <Tooltip\n            label={\n              isUnknownGuide(guide)\n                ? \"This guide has never been committed and published yet\"\n                : !guide.active\n                  ? \"This guide is not active\"\n                  : \"This guide is active\"\n            }\n          >\n            <Button\n              px=\"1\"\n              size=\"1\"\n              variant=\"soft\"\n              color={guide.active ? \"green\" : \"red\"}\n              leadingIcon={\n                guide.active\n                  ? { icon: CheckCircle2, alt: \"Active\" }\n                  : { icon: CircleDashed, alt: \"Inactive\" }\n              }\n            />\n          </Tooltip>\n        </Stack>\n      </Stack>\n    </Row>\n  );\n};\n"],"names":["Row","children","React","Stack","GuideRow","guide","orderIndex","client","useGuideContext","debugSettings","useStore","store","state","debug","focusedGuideKeys","hasFocus","Object","keys","length","isFocused","key","GuideHoverCard","Tag","bypass_global_group_limit","Text","isUnknownGuide","annotation","selectable","status","undefined","Tooltip","Button","icon","Pin","alt","setDebug","Box","Code2","activatable","LocateFixed","targetable","message","UserCircle2","archived","Eye","active","CheckCircle2","CircleDashed"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"V2.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/V2.tsx"],"sourcesContent":["import { useGuideContext } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Minimize2, Undo2 } from \"lucide-react\";\nimport React from \"react\";\n\nimport { KnockButton } from \"../KnockButton\";\nimport { TOOLBAR_Z_INDEX } from \"../shared\";\nimport \"../styles.css\";\n\nimport { GuideContextDetails } from \"./GuideContextDetails\";\nimport { GuideRow } from \"./GuideRow\";\nimport {\n  DisplayOption,\n  GuidesListDisplaySelect,\n} from \"./GuidesListDisplaySelect\";\nimport { detectToolbarParam } from \"./helpers\";\nimport {\n  InspectionResult,\n  useInspectGuideClientStore,\n} from \"./useInspectGuideClientStore\";\n\nconst GuidesList = ({\n  guides,\n  displayOption,\n}: {\n  guides: InspectionResult[\"guides\"];\n  displayOption: DisplayOption;\n}) => {\n  return guides.map((guide, idx) => {\n    const { isEligible, isQualified, selectable } = guide.annotation;\n    const isDisplayable = isEligible && isQualified;\n    const isDisplaying = isDisplayable && selectable.status === \"returned\";\n\n    if (displayOption === \"only-displaying\" && !isDisplaying) {\n      return null;\n    }\n    if (displayOption === \"only-displayable\" && !isDisplayable) {\n      return null;\n    }\n    if (displayOption === \"all-eligible\" && !isEligible) {\n      return null;\n    }\n\n    return <GuideRow key={guide.key} guide={guide} orderIndex={idx} />;\n  });\n};\n\nexport const V2 = () => {\n  const { client } = useGuideContext();\n\n  const [guidesListDisplayOption, setGuidesListDisplayOption] =\n    React.useState<DisplayOption>(\"only-displayable\");\n\n  const [isVisible, setIsVisible] = React.useState(detectToolbarParam());\n  const [isCollapsed, setIsCollapsed] = React.useState(true);\n\n  React.useEffect(() => {\n    if (!isVisible) {\n      return;\n    }\n\n    client.setDebug();\n\n    return () => {\n      client.unsetDebug();\n    };\n  }, [isVisible, client]);\n\n  const result = useInspectGuideClientStore();\n  if (!result) {\n    return null;\n  }\n\n  return (\n    <Box position=\"fixed\" top=\"4\" right=\"4\" style={{ zIndex: TOOLBAR_Z_INDEX }}>\n      {isCollapsed ? (\n        <KnockButton onClick={() => setIsCollapsed(false)} />\n      ) : (\n        <Stack\n          direction=\"column\"\n          backgroundColor=\"surface-2\"\n          shadow=\"2\"\n          rounded=\"3\"\n          border=\"px\"\n          overflow=\"hidden\"\n          style={{ width: \"400px\" }}\n        >\n          <Stack\n            w=\"full\"\n            p=\"2\"\n            justify=\"space-between\"\n            direction=\"row\"\n            style={{ boxSizing: \"border-box\" }}\n          >\n            <Box style={{ width: \"220px\" }}>\n              <GuidesListDisplaySelect\n                value={guidesListDisplayOption}\n                onChange={(opt) => setGuidesListDisplayOption(opt)}\n              />\n            </Box>\n\n            <Stack gap=\"2\">\n              <Button\n                onClick={() => setIsVisible(false)}\n                size=\"1\"\n                variant=\"soft\"\n                trailingIcon={{ icon: Undo2, \"aria-hidden\": true }}\n              >\n                Exit\n              </Button>\n              <Button\n                onClick={() => setIsCollapsed(true)}\n                size=\"1\"\n                variant=\"soft\"\n                leadingIcon={{ icon: Minimize2, alt: \"Collapse guide toolbar\" }}\n              />\n            </Stack>\n          </Stack>\n\n          <Box w=\"full\">\n            {result.error && <Box>{result.error}</Box>}\n            <GuideContextDetails />\n            <GuidesList\n              guides={result.guides}\n              displayOption={guidesListDisplayOption}\n            />\n          </Box>\n        </Stack>\n      )}\n    </Box>\n  );\n};\n"],"names":["GuidesList","guides","displayOption","map","guide","idx","isEligible","isQualified","selectable","annotation","isDisplayable","isDisplaying","status","GuideRow","key","V2","client","useGuideContext","guidesListDisplayOption","setGuidesListDisplayOption","React","useState","isVisible","setIsVisible","detectToolbarParam","isCollapsed","setIsCollapsed","useEffect","setDebug","unsetDebug","result","useInspectGuideClientStore","Box","zIndex","TOOLBAR_Z_INDEX","KnockButton","Stack","width","boxSizing","GuidesListDisplaySelect","opt","Button","icon","Undo2","Minimize2","alt","error","GuideContextDetails"],"mappings":";;;;;;;;;;;;;AAsBA,MAAMA,IAAaA,CAAC;AAAA,EAClBC,QAAAA;AAAAA,EACAC,eAAAA;AAIF,MACSD,EAAOE,IAAI,CAACC,GAAOC,MAAQ;AAC1B,QAAA;AAAA,IAAEC,YAAAA;AAAAA,IAAYC,aAAAA;AAAAA,IAAaC,YAAAA;AAAAA,MAAeJ,EAAMK,YAChDC,IAAgBJ,KAAcC,GAC9BI,IAAeD,KAAiBF,EAAWI,WAAW;AAQxDV,SANAA,MAAkB,qBAAqB,CAACS,KAGxCT,MAAkB,sBAAsB,CAACQ,KAGzCR,MAAkB,kBAAkB,CAACI,IAChC,uCAGDO,GAAS,EAAA,KAAKT,EAAMU,KAAK,OAAAV,GAAc,YAAYC,GAAO;AAAA,CACnE,GAGUU,IAAKA,MAAM;AAChB,QAAA;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAgB,GAE7B,CAACC,GAAyBC,CAA0B,IACxDC,EAAMC,SAAwB,kBAAkB,GAE5C,CAACC,GAAWC,CAAY,IAAIH,EAAMC,SAASG,GAAoB,GAC/D,CAACC,GAAaC,CAAc,IAAIN,EAAMC,SAAS,EAAI;AAEzDD,EAAAA,EAAMO,UAAU,MAAM;AACpB,QAAKL;AAILN,aAAAA,EAAOY,SAAS,GAET,MAAM;AACXZ,QAAAA,EAAOa,WAAW;AAAA,MACpB;AAAA,EAAA,GACC,CAACP,GAAWN,CAAM,CAAC;AAEtB,QAAMc,IAASC,EAA2B;AAC1C,SAAKD,IAKHV,gBAAAA,EAAA,cAACY,KAAI,UAAS,SAAQ,KAAI,KAAI,OAAM,KAAI,OAAO;AAAA,IAAEC,QAAQC;AAAAA,EAAgB,EAAA,GACtET,IACCL,gBAAAA,EAAA,cAACe,GAAY,EAAA,SAAS,MAAMT,EAAe,EAAK,EAAE,CAAA,IAEjDN,gBAAAA,EAAA,cAAAgB,GAAA,EACC,WAAU,UACV,iBAAgB,aAChB,QAAO,KACP,SAAQ,KACR,QAAO,MACP,UAAS,UACT,OAAO;AAAA,IAAEC,OAAO;AAAA,EAAQ,EAAA,GAEvBjB,gBAAAA,EAAA,cAAAgB,GAAA,EACC,GAAE,QACF,GAAE,KACF,SAAQ,iBACR,WAAU,OACV,OAAO;AAAA,IAAEE,WAAW;AAAA,EAAa,EAAA,GAEhClB,gBAAAA,EAAA,cAAAY,GAAA,EAAI,OAAO;AAAA,IAAEK,OAAO;AAAA,EAAA,EAAQ,GAC1BjB,gBAAAA,EAAA,cAAAmB,GAAA,EACC,OAAOrB,GACP,UAAWsB,CAAAA,MAAQrB,EAA2BqB,CAAG,EAAE,CAAA,CAEvD,GAEApB,gBAAAA,EAAA,cAACgB,GAAM,EAAA,KAAI,IACT,GAAAhB,gBAAAA,EAAA,cAACqB,GACC,EAAA,SAAS,MAAMlB,EAAa,EAAK,GACjC,MAAK,KACL,SAAQ,QACR,cAAc;AAAA,IAAEmB,MAAMC;AAAAA,IAAO,eAAe;AAAA,EAAA,EAAO,GAAA,MAGrD,GACAvB,gBAAAA,EAAA,cAACqB,KACC,SAAS,MAAMf,EAAe,EAAI,GAClC,MAAK,KACL,SAAQ,QACR,aAAa;AAAA,IAAEgB,MAAME;AAAAA,IAAWC,KAAK;AAAA,EAAA,EAA2B,CAAA,CAEpE,CACF,GAEAzB,gBAAAA,EAAA,cAACY,GAAI,EAAA,GAAE,OACJF,GAAAA,EAAOgB,SAAS1B,gBAAAA,EAAA,cAACY,GAAKF,MAAAA,EAAOgB,KAAM,GACnC1B,gBAAAA,EAAA,cAAA2B,GAAA,IAAmB,GACpB3B,gBAAAA,EAAA,cAACpB,GACC,EAAA,QAAQ8B,EAAO7B,QACf,eAAeiB,EAAAA,CAAwB,CAE3C,CACF,CAEJ,IA3DO;AA6DX;"}
+{"version":3,"file":"V2.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/V2.tsx"],"sourcesContent":["import { useGuideContext } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport { Minimize2, Undo2 } from \"lucide-react\";\nimport React from \"react\";\n\nimport { KnockButton } from \"../KnockButton\";\nimport { TOOLBAR_Z_INDEX } from \"../shared\";\nimport \"../styles.css\";\n\nimport { DRAG_HANDLE_OVERHANG, DragHandle } from \"./DragHandle\";\nimport { GuideContextDetails } from \"./GuideContextDetails\";\nimport { GuideRow } from \"./GuideRow\";\nimport {\n  DisplayOption,\n  GuidesListDisplaySelect,\n} from \"./GuidesListDisplaySelect\";\nimport { detectToolbarParam } from \"./helpers\";\nimport { useDraggable } from \"./useDraggable\";\nimport {\n  InspectionResult,\n  useInspectGuideClientStore,\n} from \"./useInspectGuideClientStore\";\n\nconst GuidesList = ({\n  guides,\n  displayOption,\n}: {\n  guides: InspectionResult[\"guides\"];\n  displayOption: DisplayOption;\n}) => {\n  return guides.map((guide, idx) => {\n    const { isEligible, isQualified, selectable } = guide.annotation;\n    const isDisplayable = isEligible && isQualified;\n    const isDisplaying = isDisplayable && selectable.status === \"returned\";\n\n    if (displayOption === \"only-displaying\" && !isDisplaying) {\n      return null;\n    }\n    if (displayOption === \"only-displayable\" && !isDisplayable) {\n      return null;\n    }\n    if (displayOption === \"all-eligible\" && !isEligible) {\n      return null;\n    }\n\n    return <GuideRow key={guide.key} guide={guide} orderIndex={idx} />;\n  });\n};\n\nexport const V2 = () => {\n  const { client } = useGuideContext();\n\n  const [guidesListDisplayOption, setGuidesListDisplayOption] =\n    React.useState<DisplayOption>(\"only-displayable\");\n\n  const [isVisible, setIsVisible] = React.useState(detectToolbarParam());\n  const [isCollapsed, setIsCollapsed] = React.useState(true);\n\n  React.useEffect(() => {\n    if (!isVisible) {\n      return;\n    }\n\n    client.setDebug();\n\n    return () => {\n      client.unsetDebug();\n    };\n  }, [isVisible, client]);\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const { position, isDragging, handlePointerDown } = useDraggable({\n    elementRef: containerRef,\n    reclampDeps: [isCollapsed],\n    rightPadding: DRAG_HANDLE_OVERHANG,\n    initialPosition: { top: 16, right: 16 },\n  });\n\n  const result = useInspectGuideClientStore();\n  if (!result) {\n    return null;\n  }\n\n  return (\n    <Box\n      tgphRef={containerRef}\n      position=\"fixed\"\n      style={{\n        top: position.top + \"px\",\n        right: position.right + \"px\",\n        zIndex: TOOLBAR_Z_INDEX,\n      }}\n    >\n      <DragHandle onPointerDown={handlePointerDown} isDragging={isDragging} />\n      {isCollapsed ? (\n        <KnockButton onClick={() => setIsCollapsed(false)} positioned={false} />\n      ) : (\n        <Stack\n          direction=\"column\"\n          backgroundColor=\"surface-2\"\n          shadow=\"2\"\n          rounded=\"3\"\n          border=\"px\"\n          overflow=\"hidden\"\n          style={{ width: \"400px\" }}\n        >\n          <Stack\n            w=\"full\"\n            p=\"2\"\n            justify=\"space-between\"\n            direction=\"row\"\n            style={{ boxSizing: \"border-box\" }}\n          >\n            <Box style={{ width: \"220px\" }}>\n              <GuidesListDisplaySelect\n                value={guidesListDisplayOption}\n                onChange={(opt) => setGuidesListDisplayOption(opt)}\n              />\n            </Box>\n\n            <Stack gap=\"2\">\n              <Button\n                onClick={() => setIsVisible(false)}\n                size=\"1\"\n                variant=\"soft\"\n                trailingIcon={{ icon: Undo2, \"aria-hidden\": true }}\n              >\n                Exit\n              </Button>\n              <Button\n                onClick={() => setIsCollapsed(true)}\n                size=\"1\"\n                variant=\"soft\"\n                leadingIcon={{ icon: Minimize2, alt: \"Collapse guide toolbar\" }}\n              />\n            </Stack>\n          </Stack>\n\n          <Box w=\"full\">\n            <GuideContextDetails />\n            {result.error && (\n              <Box px=\"2\" pb=\"1\">\n                <Text as=\"span\" size=\"0\" weight=\"medium\" color=\"red\">\n                  {result.error}\n                </Text>\n              </Box>\n            )}\n            <GuidesList\n              guides={result.guides}\n              displayOption={guidesListDisplayOption}\n            />\n          </Box>\n        </Stack>\n      )}\n    </Box>\n  );\n};\n"],"names":["GuidesList","guides","displayOption","map","guide","idx","isEligible","isQualified","selectable","annotation","isDisplayable","isDisplaying","status","GuideRow","key","V2","client","useGuideContext","guidesListDisplayOption","setGuidesListDisplayOption","React","useState","isVisible","setIsVisible","detectToolbarParam","isCollapsed","setIsCollapsed","useEffect","setDebug","unsetDebug","containerRef","useRef","position","isDragging","handlePointerDown","useDraggable","elementRef","reclampDeps","rightPadding","DRAG_HANDLE_OVERHANG","initialPosition","top","right","result","useInspectGuideClientStore","Box","zIndex","TOOLBAR_Z_INDEX","DragHandle","KnockButton","Stack","width","boxSizing","GuidesListDisplaySelect","opt","Button","icon","Undo2","Minimize2","alt","GuideContextDetails","error","Text"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDraggable.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/useDraggable.ts"],"sourcesContent":["import React from \"react\";\n\n// NOTE: This hook was generated entirely with Claude then lightly touched up,\n// and the behavior works correctly from testing it manually in the browser.\n\ntype Position = { top: number; right: number };\n\ntype UseDraggableOptions = {\n  elementRef: React.RefObject<HTMLElement | null>;\n  initialPosition?: Position;\n  reclampDeps?: React.DependencyList;\n  /** Extra space to reserve beyond the element's right edge (px). */\n  rightPadding?: number;\n};\n\ntype UseDraggableReturn = {\n  position: Position;\n  isDragging: boolean;\n  handlePointerDown: (e: React.PointerEvent) => void;\n};\n\nconst DEFAULT_POSITION: Position = { top: 16, right: 16 };\n\n/**\n * @param rightPadding Extra space to reserve on the right edge (e.g. for a\n *   drag handle that protrudes beyond the element). The element's left edge\n *   is clamped so that `elementWidth + rightPadding` stays within the viewport.\n */\nexport function clampPosition(\n  pos: Position,\n  elementWidth: number,\n  elementHeight: number,\n  rightPadding = 0,\n): Position {\n  const viewportWidth = window.innerWidth;\n  const viewportHeight = window.innerHeight;\n\n  const totalWidth = elementWidth + rightPadding;\n  const left = viewportWidth - pos.right - elementWidth;\n  const clampedLeft = Math.max(0, Math.min(left, viewportWidth - totalWidth));\n  const clampedTop = Math.max(\n    0,\n    Math.min(pos.top, viewportHeight - elementHeight),\n  );\n  const clampedRight = viewportWidth - clampedLeft - elementWidth;\n\n  return { top: clampedTop, right: clampedRight };\n}\n\nexport function useDraggable({\n  elementRef,\n  initialPosition = DEFAULT_POSITION,\n  reclampDeps = [],\n  rightPadding = 0,\n}: UseDraggableOptions): UseDraggableReturn {\n  const [position, setPosition] = React.useState<Position>(initialPosition);\n  const [isDragging, setIsDragging] = React.useState(false);\n\n  const positionRef = React.useRef(position);\n  positionRef.current = position;\n\n  const startPointerRef = React.useRef({ x: 0, y: 0 });\n  const startPositionRef = React.useRef<Position>({ top: 0, right: 0 });\n  const rafIdRef = React.useRef<number | null>(null);\n  const isDraggingRef = React.useRef(false);\n  const cleanupListenersRef = React.useRef<(() => void) | null>(null);\n\n  const reclamp = React.useCallback(() => {\n    const el = elementRef.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    setPosition((prev) =>\n      clampPosition(prev, rect.width, rect.height, rightPadding),\n    );\n  }, [elementRef, rightPadding]);\n\n  // Stable pointerdown handler\n  const handlePointerDown = React.useCallback(\n    (e: React.PointerEvent) => {\n      e.preventDefault();\n      startPointerRef.current = { x: e.clientX, y: e.clientY };\n      startPositionRef.current = { ...positionRef.current };\n      isDraggingRef.current = true;\n      setIsDragging(true);\n\n      const onPointerMove = (moveEvent: PointerEvent) => {\n        if (!isDraggingRef.current) return;\n\n        if (rafIdRef.current !== null) return;\n\n        rafIdRef.current = requestAnimationFrame(() => {\n          rafIdRef.current = null;\n          if (!isDraggingRef.current) return;\n\n          const dx = moveEvent.clientX - startPointerRef.current.x;\n          const dy = moveEvent.clientY - startPointerRef.current.y;\n\n          const newPos: Position = {\n            top: startPositionRef.current.top + dy,\n            right: startPositionRef.current.right - dx,\n          };\n\n          const el = elementRef.current;\n          if (!el) return;\n          const rect = el.getBoundingClientRect();\n          const clamped = clampPosition(\n            newPos,\n            rect.width,\n            rect.height,\n            rightPadding,\n          );\n          setPosition(clamped);\n        });\n      };\n\n      const cleanup = () => {\n        isDraggingRef.current = false;\n        setIsDragging(false);\n        if (rafIdRef.current !== null) {\n          cancelAnimationFrame(rafIdRef.current);\n          rafIdRef.current = null;\n        }\n        document.removeEventListener(\"pointermove\", onPointerMove);\n        document.removeEventListener(\"pointerup\", onPointerUp);\n        cleanupListenersRef.current = null;\n      };\n\n      const onPointerUp = () => cleanup();\n\n      document.addEventListener(\"pointermove\", onPointerMove);\n      document.addEventListener(\"pointerup\", onPointerUp);\n      cleanupListenersRef.current = cleanup;\n    },\n    [elementRef, rightPadding],\n  );\n\n  // Cleanup on unmount\n  React.useEffect(() => {\n    return () => {\n      cleanupListenersRef.current?.();\n    };\n  }, []);\n\n  // Re-clamp on window resize\n  React.useEffect(() => {\n    const onResize = () => reclamp();\n    window.addEventListener(\"resize\", onResize);\n    return () => window.removeEventListener(\"resize\", onResize);\n  }, [reclamp]);\n\n  // Re-clamp when deps change (e.g. collapse toggle)\n  React.useEffect(() => {\n    const id = requestAnimationFrame(() => reclamp());\n    return () => cancelAnimationFrame(id);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, reclampDeps);\n\n  return { position, isDragging, handlePointerDown };\n}\n"],"names":["DEFAULT_POSITION","top","right","clampPosition","pos","elementWidth","elementHeight","rightPadding","viewportWidth","window","innerWidth","viewportHeight","innerHeight","totalWidth","left","clampedLeft","Math","max","min","clampedTop","clampedRight","useDraggable","elementRef","initialPosition","reclampDeps","position","setPosition","React","useState","isDragging","setIsDragging","positionRef","useRef","current","startPointerRef","x","y","startPositionRef","rafIdRef","isDraggingRef","cleanupListenersRef","reclamp","useCallback","el","rect","getBoundingClientRect","prev","width","height","handlePointerDown","e","preventDefault","clientX","clientY","onPointerMove","moveEvent","requestAnimationFrame","dx","dy","newPos","clamped","cleanup","cancelAnimationFrame","removeEventListener","onPointerUp","addEventListener","useEffect","onResize","id"],"mappings":";AAqBA,MAAMA,IAA6B;AAAA,EAAEC,KAAK;AAAA,EAAIC,OAAO;AAAG;AAOjD,SAASC,EACdC,GACAC,GACAC,GACAC,IAAe,GACL;AACV,QAAMC,IAAgBC,OAAOC,YACvBC,IAAiBF,OAAOG,aAExBC,IAAaR,IAAeE,GAC5BO,IAAON,IAAgBJ,EAAIF,QAAQG,GACnCU,IAAcC,KAAKC,IAAI,GAAGD,KAAKE,IAAIJ,GAAMN,IAAgBK,CAAU,CAAC,GACpEM,IAAaH,KAAKC,IACtB,GACAD,KAAKE,IAAId,EAAIH,KAAKU,IAAiBL,CAAa,CAClD,GACMc,IAAeZ,IAAgBO,IAAcV;AAE5C,SAAA;AAAA,IAAEJ,KAAKkB;AAAAA,IAAYjB,OAAOkB;AAAAA,EAAa;AAChD;AAEO,SAASC,EAAa;AAAA,EAC3BC,YAAAA;AAAAA,EACAC,iBAAAA,IAAkBvB;AAAAA,EAClBwB,aAAAA,IAAc,CAAE;AAAA,EAChBjB,cAAAA,IAAe;AACI,GAAuB;AAC1C,QAAM,CAACkB,GAAUC,CAAW,IAAIC,EAAMC,SAAmBL,CAAe,GAClE,CAACM,GAAYC,CAAa,IAAIH,EAAMC,SAAS,EAAK,GAElDG,IAAcJ,EAAMK,OAAOP,CAAQ;AACzCM,EAAAA,EAAYE,UAAUR;AAEhBS,QAAAA,IAAkBP,EAAMK,OAAO;AAAA,IAAEG,GAAG;AAAA,IAAGC,GAAG;AAAA,EAAA,CAAG,GAC7CC,IAAmBV,EAAMK,OAAiB;AAAA,IAAE/B,KAAK;AAAA,IAAGC,OAAO;AAAA,EAAA,CAAG,GAC9DoC,IAAWX,EAAMK,OAAsB,IAAI,GAC3CO,IAAgBZ,EAAMK,OAAO,EAAK,GAClCQ,IAAsBb,EAAMK,OAA4B,IAAI,GAE5DS,IAAUd,EAAMe,YAAY,MAAM;AACtC,UAAMC,IAAKrB,EAAWW;AACtB,QAAI,CAACU,EAAI;AACHC,UAAAA,IAAOD,EAAGE,sBAAsB;AACzBC,IAAAA,EAAAA,CAAAA,MACX3C,EAAc2C,GAAMF,EAAKG,OAAOH,EAAKI,QAAQzC,CAAY,CAC3D;AAAA,EAAA,GACC,CAACe,GAAYf,CAAY,CAAC,GAGvB0C,IAAoBtB,EAAMe,YAC9B,CAACQ,MAA0B;AACzBA,IAAAA,EAAEC,eAAe,GACjBjB,EAAgBD,UAAU;AAAA,MAAEE,GAAGe,EAAEE;AAAAA,MAAShB,GAAGc,EAAEG;AAAAA,IAAQ,GACvDhB,EAAiBJ,UAAU;AAAA,MAAE,GAAGF,EAAYE;AAAAA,IAAQ,GACpDM,EAAcN,UAAU,IACxBH,EAAc,EAAI;AAEZwB,UAAAA,IAAgBA,CAACC,MAA4B;AAC7C,MAAChB,EAAcN,WAEfK,EAASL,YAAY,SAEhBA,EAAAA,UAAUuB,sBAAsB,MAAM;AAEzC,YADJlB,EAASL,UAAU,MACf,CAACM,EAAcN,QAAS;AAE5B,cAAMwB,IAAKF,EAAUH,UAAUlB,EAAgBD,QAAQE,GACjDuB,IAAKH,EAAUF,UAAUnB,EAAgBD,QAAQG,GAEjDuB,IAAmB;AAAA,UACvB1D,KAAKoC,EAAiBJ,QAAQhC,MAAMyD;AAAAA,UACpCxD,OAAOmC,EAAiBJ,QAAQ/B,QAAQuD;AAAAA,QAC1C,GAEMd,IAAKrB,EAAWW;AACtB,YAAI,CAACU,EAAI;AACHC,cAAAA,IAAOD,EAAGE,sBAAsB,GAChCe,IAAUzD,EACdwD,GACAf,EAAKG,OACLH,EAAKI,QACLzC,CACF;AACAmB,QAAAA,EAAYkC,CAAO;AAAA,MAAA,CACpB;AAAA,IACH,GAEMC,IAAUA,MAAM;AACpBtB,MAAAA,EAAcN,UAAU,IACxBH,EAAc,EAAK,GACfQ,EAASL,YAAY,SACvB6B,qBAAqBxB,EAASL,OAAO,GACrCK,EAASL,UAAU,OAEZ8B,SAAAA,oBAAoB,eAAeT,CAAa,GAChDS,SAAAA,oBAAoB,aAAaC,CAAW,GACrDxB,EAAoBP,UAAU;AAAA,IAChC,GAEM+B,IAAcA,MAAMH,EAAQ;AAEzBI,aAAAA,iBAAiB,eAAeX,CAAa,GAC7CW,SAAAA,iBAAiB,aAAaD,CAAW,GAClDxB,EAAoBP,UAAU4B;AAAAA,EAAAA,GAEhC,CAACvC,GAAYf,CAAY,CAC3B;AAGAoB,SAAAA,EAAMuC,UAAU,MACP,MAAM;;AACX1B,KAAAA,IAAAA,EAAoBP,YAApBO,QAAAA,EAAAA,KAAAA;AAAAA,EACF,GACC,EAAE,GAGLb,EAAMuC,UAAU,MAAM;AACdC,UAAAA,IAAWA,MAAM1B,EAAQ;AACxBwB,kBAAAA,iBAAiB,UAAUE,CAAQ,GACnC,MAAM1D,OAAOsD,oBAAoB,UAAUI,CAAQ;AAAA,EAAA,GACzD,CAAC1B,CAAO,CAAC,GAGZd,EAAMuC,UAAU,MAAM;AACpB,UAAME,IAAKZ,sBAAsB,MAAMf,GAAS;AACzC,WAAA,MAAMqB,qBAAqBM,CAAE;AAAA,KAEnC5C,CAAW,GAEP;AAAA,IAAEC,UAAAA;AAAAA,IAAUI,YAAAA;AAAAA,IAAYoB,mBAAAA;AAAAA,EAAkB;AACnD;"}