@osdk/react-devtools 0.5.0

package/build/esm/inspector/components/ComponentLabel.js

@@ -0,0 +1,175 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useCallback, useRef, useState } from "react";
+import { computeLabelPosition, OFFSCREEN_POSITION } from "../utils/labelPositioning.js";
+import styles from "./ComponentLabel.module.scss.js";
+const ARROW_HEIGHT = 8;
+const COPY_FEEDBACK_DURATION_MS = 1500;
+const EMPTY_SIZE = {
+  width: 0,
+  height: 0
+};
+function useElementSize(ref) {
+  const sizeRef = useRef(EMPTY_SIZE);
+  const subscribe = React.useCallback(onStoreChange => {
+    const el = ref.current;
+    if (!el) {
+      return () => {};
+    }
+    const measure = () => {
+      const rect = el.getBoundingClientRect();
+      const next = {
+        width: rect.width,
+        height: rect.height
+      };
+      if (next.width !== sizeRef.current.width || next.height !== sizeRef.current.height) {
+        sizeRef.current = next;
+        onStoreChange();
+      }
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+  const getSnapshot = React.useCallback(() => sizeRef.current, []);
+  return React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+export function ComponentLabel({
+  component,
+  bounds,
+  mouseX,
+  mouseY,
+  status,
+  onOpenSource,
+  visible
+}) {
+  const containerRef = useRef(null);
+  const measuredSize = useElementSize(containerRef);
+  const [showCopied, setShowCopied] = useState(false);
+  const copyTimeoutRef = useRef(null);
+  const position = React.useMemo(() => {
+    if (!bounds || measuredSize.width === 0 || measuredSize.height === 0) {
+      return OFFSCREEN_POSITION;
+    }
+    return computeLabelPosition(bounds, measuredSize.width, measuredSize.height, mouseX);
+  }, [bounds, measuredSize.width, measuredSize.height, mouseX]);
+  const handleSourceClick = useCallback(() => {
+    if (component?.sourceLocation && onOpenSource) {
+      onOpenSource(component.sourceLocation);
+    }
+  }, [component?.sourceLocation, onOpenSource]);
+  const handleCopySourceLocation = useCallback(() => {
+    if (!component?.sourceLocation) {
+      return;
+    }
+    const loc = component.sourceLocation;
+    const fullPath = loc.columnNumber ? `${loc.fileName}:${loc.lineNumber}:${loc.columnNumber}` : `${loc.fileName}:${loc.lineNumber}`;
+    navigator.clipboard.writeText(fullPath).then(() => {
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+      setShowCopied(true);
+      copyTimeoutRef.current = setTimeout(() => {
+        setShowCopied(false);
+        copyTimeoutRef.current = null;
+      }, COPY_FEEDBACK_DURATION_MS);
+    }).catch(() => {});
+  }, [component?.sourceLocation]);
+  if (!component || !visible) {
+    return null;
+  }
+  const arrowStyle = {
+    left: `${position.arrowLeft - 8}px`,
+    ...(position.arrowPosition === "bottom" ? {
+      top: `-${ARROW_HEIGHT}px`,
+      borderBottom: "8px solid rgba(30, 30, 30, 0.95)"
+    } : {
+      bottom: `-${ARROW_HEIGHT}px`,
+      borderTop: "8px solid rgba(30, 30, 30, 0.95)"
+    })
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    "data-osdk-devtools-ignore": true,
+    className: styles.label,
+    style: {
+      left: `${position.left}px`,
+      top: `${position.top}px`,
+      opacity: visible && position.left > -9000 ? 1 : 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.arrow,
+    style: arrowStyle
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.componentName
+  }, "<", component.name, " />", component.hookCount > 0 && /*#__PURE__*/React.createElement("span", {
+    className: styles.hookBadge
+  }, component.hookCount, " hook", component.hookCount !== 1 ? "s" : "")), component.sourceLocation && /*#__PURE__*/React.createElement("div", {
+    className: styles.sourceRow
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.sourceLocation,
+    onClick: handleSourceClick
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"
+  }), /*#__PURE__*/React.createElement("polyline", {
+    points: "13 2 13 9 20 9"
+  })), (loc => {
+    const fileName = loc.fileName.split("/").pop() ?? loc.fileName;
+    return loc.columnNumber ? `${fileName}:${loc.lineNumber}:${loc.columnNumber}` : `${fileName}:${loc.lineNumber}`;
+  })(component.sourceLocation)), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles.copyButton,
+    onClick: handleCopySourceLocation,
+    title: "Copy source location"
+  }, showCopied ? /*#__PURE__*/React.createElement("svg", {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "#22c55e",
+    strokeWidth: "2"
+  }, /*#__PURE__*/React.createElement("polyline", {
+    points: "20 6 9 17 4 12"
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "9",
+    y: "9",
+    width: "13",
+    height: "13",
+    rx: "2",
+    ry: "2"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+  }))), showCopied && /*#__PURE__*/React.createElement("span", {
+    className: styles.copiedText
+  }, "Copied!")));
+}
+//# sourceMappingURL=ComponentLabel.js.map

package/build/esm/inspector/components/ComponentLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentLabel.js","names":["React","useCallback","useRef","useState","computeLabelPosition","OFFSCREEN_POSITION","styles","ARROW_HEIGHT","COPY_FEEDBACK_DURATION_MS","EMPTY_SIZE","width","height","useElementSize","ref","sizeRef","subscribe","onStoreChange","el","current","measure","rect","getBoundingClientRect","next","observer","ResizeObserver","observe","disconnect","getSnapshot","useSyncExternalStore","ComponentLabel","component","bounds","mouseX","mouseY","status","onOpenSource","visible","containerRef","measuredSize","showCopied","setShowCopied","copyTimeoutRef","position","useMemo","handleSourceClick","sourceLocation","handleCopySourceLocation","loc","fullPath","columnNumber","fileName","lineNumber","navigator","clipboard","writeText","then","clearTimeout","setTimeout","catch","arrowStyle","left","arrowLeft","arrowPosition","top","borderBottom","bottom","borderTop","createElement","className","label","style","opacity","arrow","componentName","name","hookCount","hookBadge","sourceRow","onClick","viewBox","fill","stroke","strokeWidth","d","points","split","pop","type","copyButton","title","x","y","rx","ry","copiedText"],"sources":["ComponentLabel.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback, useRef, useState } from \"react\";\nimport type { SourceLocation } from \"../../fiber/types.js\";\nimport type { ComponentLabelProps, LabelPosition } from \"../types.js\";\nimport {\n  computeLabelPosition,\n  OFFSCREEN_POSITION,\n} from \"../utils/labelPositioning.js\";\nimport styles from \"./ComponentLabel.module.scss\";\n\nconst ARROW_HEIGHT = 8;\nconst COPY_FEEDBACK_DURATION_MS = 1500;\n\ninterface SizeSnapshot {\n  width: number;\n  height: number;\n}\n\nconst EMPTY_SIZE: SizeSnapshot = { width: 0, height: 0 };\n\nfunction useElementSize(\n  ref: React.RefObject<HTMLDivElement | null>,\n): SizeSnapshot {\n  const sizeRef = useRef<SizeSnapshot>(EMPTY_SIZE);\n\n  const subscribe = React.useCallback((onStoreChange: () => void) => {\n    const el = ref.current;\n    if (!el) {\n      return () => {};\n    }\n\n    const measure = () => {\n      const rect = el.getBoundingClientRect();\n      const next = { width: rect.width, height: rect.height };\n      if (\n        next.width !== sizeRef.current.width\n        || next.height !== sizeRef.current.height\n      ) {\n        sizeRef.current = next;\n        onStoreChange();\n      }\n    };\n\n    measure();\n\n    const observer = new ResizeObserver(measure);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [ref]);\n\n  const getSnapshot = React.useCallback(() => sizeRef.current, []);\n\n  return React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\nexport function ComponentLabel({\n  component,\n  bounds,\n  mouseX,\n  mouseY,\n  status,\n  onOpenSource,\n  visible,\n}: ComponentLabelProps): React.ReactElement | null {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const measuredSize = useElementSize(containerRef);\n  const [showCopied, setShowCopied] = useState(false);\n  const copyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const position: LabelPosition = React.useMemo(() => {\n    if (!bounds || measuredSize.width === 0 || measuredSize.height === 0) {\n      return OFFSCREEN_POSITION;\n    }\n\n    return computeLabelPosition(\n      bounds,\n      measuredSize.width,\n      measuredSize.height,\n      mouseX,\n    );\n  }, [bounds, measuredSize.width, measuredSize.height, mouseX]);\n\n  const handleSourceClick = useCallback(() => {\n    if (component?.sourceLocation && onOpenSource) {\n      onOpenSource(component.sourceLocation);\n    }\n  }, [component?.sourceLocation, onOpenSource]);\n\n  const handleCopySourceLocation = useCallback(() => {\n    if (!component?.sourceLocation) {\n      return;\n    }\n\n    const loc = component.sourceLocation;\n    const fullPath = loc.columnNumber\n      ? `${loc.fileName}:${loc.lineNumber}:${loc.columnNumber}`\n      : `${loc.fileName}:${loc.lineNumber}`;\n\n    navigator.clipboard.writeText(fullPath).then(() => {\n      if (copyTimeoutRef.current) {\n        clearTimeout(copyTimeoutRef.current);\n      }\n\n      setShowCopied(true);\n      copyTimeoutRef.current = setTimeout(() => {\n        setShowCopied(false);\n        copyTimeoutRef.current = null;\n      }, COPY_FEEDBACK_DURATION_MS);\n    }).catch(() => {\n    });\n  }, [component?.sourceLocation]);\n\n  if (!component || !visible) {\n    return null;\n  }\n\n  const arrowStyle: React.CSSProperties = {\n    left: `${position.arrowLeft - 8}px`,\n    ...(position.arrowPosition === \"bottom\"\n      ? {\n        top: `-${ARROW_HEIGHT}px`,\n        borderBottom: \"8px solid rgba(30, 30, 30, 0.95)\",\n      }\n      : {\n        bottom: `-${ARROW_HEIGHT}px`,\n        borderTop: \"8px solid rgba(30, 30, 30, 0.95)\",\n      }),\n  };\n\n  const formatSourceLocation = (loc: SourceLocation): string => {\n    const fileName = loc.fileName.split(\"/\").pop() ?? loc.fileName;\n    return loc.columnNumber\n      ? `${fileName}:${loc.lineNumber}:${loc.columnNumber}`\n      : `${fileName}:${loc.lineNumber}`;\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      data-osdk-devtools-ignore={true}\n      className={styles.label}\n      style={{\n        left: `${position.left}px`,\n        top: `${position.top}px`,\n        opacity: visible && position.left > -9000 ? 1 : 0,\n      }}\n    >\n      <div className={styles.arrow} style={arrowStyle} />\n      <div className={styles.componentName}>\n        {\"<\"}\n        {component.name}\n        {\" />\"}\n        {component.hookCount > 0 && (\n          <span className={styles.hookBadge}>\n            {component.hookCount} hook{component.hookCount !== 1 ? \"s\" : \"\"}\n          </span>\n        )}\n      </div>\n      {component.sourceLocation && (\n        <div className={styles.sourceRow}>\n          <div\n            className={styles.sourceLocation}\n            onClick={handleSourceClick}\n          >\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n            >\n              <path d=\"M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z\" />\n              <polyline points=\"13 2 13 9 20 9\" />\n            </svg>\n            {formatSourceLocation(component.sourceLocation)}\n          </div>\n          <button\n            type=\"button\"\n            className={styles.copyButton}\n            onClick={handleCopySourceLocation}\n            title=\"Copy source location\"\n          >\n            {showCopied\n              ? (\n                <svg\n                  width=\"12\"\n                  height=\"12\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"#22c55e\"\n                  strokeWidth=\"2\"\n                >\n                  <polyline points=\"20 6 9 17 4 12\" />\n                </svg>\n              )\n              : (\n                <svg\n                  width=\"12\"\n                  height=\"12\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                >\n                  <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\" />\n                  <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\" />\n                </svg>\n              )}\n          </button>\n          {showCopied && <span className={styles.copiedText}>Copied!</span>}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/build/esm/inspector/components/ComponentLabel.module.scss.js

@@ -0,0 +1,12 @@
+// AUTO-GENERATED by scripts/build-css.mjs. Do not edit by hand.
+const styles = {
+  "label": "ComponentLabel-module__label___qAAah89L",
+  "arrow": "ComponentLabel-module__arrow___VUxHj0Ee",
+  "componentName": "ComponentLabel-module__componentName___HMiDPm5T",
+  "sourceLocation": "ComponentLabel-module__sourceLocation___Fv5T-QLB",
+  "sourceRow": "ComponentLabel-module__sourceRow___EA8MjY5g",
+  "hookBadge": "ComponentLabel-module__hookBadge___iew9gFQV",
+  "copyButton": "ComponentLabel-module__copyButton___0esaHS8-",
+  "copiedText": "ComponentLabel-module__copiedText___GMaasVOA"
+};
+export default styles;

package/build/esm/inspector/components/InspectorBanner.js

@@ -0,0 +1,79 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+const bannerStyles = {
+  position: "fixed",
+  top: 0,
+  left: "50%",
+  transform: "translateX(-50%)",
+  background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+  color: "white",
+  padding: "12px 24px",
+  borderRadius: "0 0 8px 8px",
+  fontSize: "14px",
+  fontWeight: 600,
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
+  pointerEvents: "none",
+  zIndex: 2147483648,
+  textAlign: "center",
+  transition: "opacity 150ms ease-out, transform 150ms ease-out"
+};
+const containerStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "12px"
+};
+const kbdStyles = {
+  background: "rgba(0, 0, 0, 0.3)",
+  padding: "2px 6px",
+  borderRadius: "3px",
+  fontSize: "12px",
+  marginLeft: "8px"
+};
+const hintStyles = {
+  fontSize: "12px",
+  opacity: 0.9
+};
+export const InspectorBanner = ({
+  visible
+}) => {
+  if (!visible) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    style: bannerStyles
+  }, /*#__PURE__*/React.createElement("div", {
+    style: containerStyles
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M10 2L3 6V10C3 14.5 6.5 18.5 10 19.5C13.5 18.5 17 14.5 17 10V6L10 2Z",
+    stroke: "white",
+    strokeWidth: "1.5",
+    fill: "rgba(255,255,255,0.2)"
+  })), /*#__PURE__*/React.createElement("span", null, "Click on a component to inspect its OSDK hooks"), /*#__PURE__*/React.createElement("kbd", {
+    style: kbdStyles
+  }, "ESC"), /*#__PURE__*/React.createElement("span", {
+    style: hintStyles
+  }, "to exit")));
+};
+//# sourceMappingURL=InspectorBanner.js.map

package/build/esm/inspector/components/InspectorBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InspectorBanner.js","names":["React","bannerStyles","position","top","left","transform","background","color","padding","borderRadius","fontSize","fontWeight","fontFamily","boxShadow","pointerEvents","zIndex","textAlign","transition","containerStyles","display","alignItems","gap","kbdStyles","marginLeft","hintStyles","opacity","InspectorBanner","visible","createElement","style","width","height","viewBox","fill","xmlns","d","stroke","strokeWidth"],"sources":["InspectorBanner.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from \"react\";\n\nexport interface InspectorBannerProps {\n  visible: boolean;\n}\n\nconst bannerStyles: React.CSSProperties = {\n  position: \"fixed\",\n  top: 0,\n  left: \"50%\",\n  transform: \"translateX(-50%)\",\n  background: \"linear-gradient(135deg, #667eea 0%, #764ba2 100%)\",\n  color: \"white\",\n  padding: \"12px 24px\",\n  borderRadius: \"0 0 8px 8px\",\n  fontSize: \"14px\",\n  fontWeight: 600,\n  fontFamily: \"system-ui, -apple-system, sans-serif\",\n  boxShadow: \"0 4px 12px rgba(0, 0, 0, 0.3)\",\n  pointerEvents: \"none\",\n  zIndex: 2147483648,\n  textAlign: \"center\",\n  transition: \"opacity 150ms ease-out, transform 150ms ease-out\",\n};\n\nconst containerStyles: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: \"12px\",\n};\n\nconst kbdStyles: React.CSSProperties = {\n  background: \"rgba(0, 0, 0, 0.3)\",\n  padding: \"2px 6px\",\n  borderRadius: \"3px\",\n  fontSize: \"12px\",\n  marginLeft: \"8px\",\n};\n\nconst hintStyles: React.CSSProperties = {\n  fontSize: \"12px\",\n  opacity: 0.9,\n};\n\nexport const InspectorBanner: React.FC<InspectorBannerProps> = (\n  { visible },\n) => {\n  if (!visible) {\n    return null;\n  }\n\n  return (\n    <div style={bannerStyles}>\n      <div style={containerStyles}>\n        <svg\n          width=\"20\"\n          height=\"20\"\n          viewBox=\"0 0 20 20\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M10 2L3 6V10C3 14.5 6.5 18.5 10 19.5C13.5 18.5 17 14.5 17 10V6L10 2Z\"\n            stroke=\"white\"\n            strokeWidth=\"1.5\"\n            fill=\"rgba(255,255,255,0.2)\"\n          />\n        </svg>\n        <span>Click on a component to inspect its OSDK hooks</span>\n        <kbd style={kbdStyles}>ESC</kbd>\n        <span style={hintStyles}>to exit</span>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,MAAM,OAAO;AAMzB,MAAMC,YAAiC,GAAG;EACxCC,QAAQ,EAAE,OAAO;EACjBC,GAAG,EAAE,CAAC;EACNC,IAAI,EAAE,KAAK;EACXC,SAAS,EAAE,kBAAkB;EAC7BC,UAAU,EAAE,mDAAmD;EAC/DC,KAAK,EAAE,OAAO;EACdC,OAAO,EAAE,WAAW;EACpBC,YAAY,EAAE,aAAa;EAC3BC,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE,GAAG;EACfC,UAAU,EAAE,sCAAsC;EAClDC,SAAS,EAAE,+BAA+B;EAC1CC,aAAa,EAAE,MAAM;EACrBC,MAAM,EAAE,UAAU;EAClBC,SAAS,EAAE,QAAQ;EACnBC,UAAU,EAAE;AACd,CAAC;AAED,MAAMC,eAAoC,GAAG;EAC3CC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,GAAG,EAAE;AACP,CAAC;AAED,MAAMC,SAA8B,GAAG;EACrChB,UAAU,EAAE,oBAAoB;EAChCE,OAAO,EAAE,SAAS;EAClBC,YAAY,EAAE,KAAK;EACnBC,QAAQ,EAAE,MAAM;EAChBa,UAAU,EAAE;AACd,CAAC;AAED,MAAMC,UAA+B,GAAG;EACtCd,QAAQ,EAAE,MAAM;EAChBe,OAAO,EAAE;AACX,CAAC;AAED,OAAO,MAAMC,eAA+C,GAAGA,CAC7D;EAAEC;AAAQ,CAAC,KACR;EACH,IAAI,CAACA,OAAO,EAAE;IACZ,OAAO,IAAI;EACb;EAEA,oBACE3B,KAAA,CAAA4B,aAAA;IAAKC,KAAK,EAAE5B;EAAa,gBACvBD,KAAA,CAAA4B,aAAA;IAAKC,KAAK,EAAEX;EAAgB,gBAC1BlB,KAAA,CAAA4B,aAAA;IACEE,KAAK,EAAC,IAAI;IACVC,MAAM,EAAC,IAAI;IACXC,OAAO,EAAC,WAAW;IACnBC,IAAI,EAAC,MAAM;IACXC,KAAK,EAAC;EAA4B,gBAElClC,KAAA,CAAA4B,aAAA;IACEO,CAAC,EAAC,sEAAsE;IACxEC,MAAM,EAAC,OAAO;IACdC,WAAW,EAAC,KAAK;IACjBJ,IAAI,EAAC;EAAuB,CAC7B,CACE,CAAC,eACNjC,KAAA,CAAA4B,aAAA,eAAM,gDAAoD,CAAC,eAC3D5B,KAAA,CAAA4B,aAAA;IAAKC,KAAK,EAAEP;EAAU,GAAC,KAAQ,CAAC,eAChCtB,KAAA,CAAA4B,aAAA;IAAMC,KAAK,EAAEL;EAAW,GAAC,SAAa,CACnC,CACF,CAAC;AAEV,CAAC","ignoreList":[]}

package/build/esm/inspector/components/InspectorOverlay.js

@@ -0,0 +1,149 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useCallback, useMemo, useRef } from "react";
+import { ComponentLabel } from "./ComponentLabel.js";
+import { SelectionHighlight } from "./SelectionHighlight.js";
+const FLASH_DURATION_MS = 500;
+function GrabbedFlash({
+  bounds,
+  trigger
+}) {
+  const previousTriggerRef = useRef(trigger);
+  const flashStateRef = useRef({
+    isVisible: false,
+    opacity: 0,
+    fadeTimer: null,
+    hideTimer: null
+  });
+  const subscribe = useCallback(onStoreChange => {
+    const state = flashStateRef.current;
+    if (trigger && !previousTriggerRef.current) {
+      if (state.fadeTimer) {
+        clearTimeout(state.fadeTimer);
+      }
+      if (state.hideTimer) {
+        clearTimeout(state.hideTimer);
+      }
+      state.isVisible = true;
+      state.opacity = 1;
+      state.fadeTimer = setTimeout(() => {
+        state.opacity = 0;
+        state.fadeTimer = null;
+        onStoreChange();
+      }, 50);
+      state.hideTimer = setTimeout(() => {
+        state.isVisible = false;
+        state.hideTimer = null;
+        onStoreChange();
+      }, FLASH_DURATION_MS);
+      onStoreChange();
+    }
+    previousTriggerRef.current = trigger;
+    return () => {
+      if (state.fadeTimer) {
+        clearTimeout(state.fadeTimer);
+        state.fadeTimer = null;
+      }
+      if (state.hideTimer) {
+        clearTimeout(state.hideTimer);
+        state.hideTimer = null;
+      }
+    };
+  }, [trigger]);
+  const getSnapshot = useCallback(() => {
+    return flashStateRef.current;
+  }, []);
+  const state = React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  if (!state.isVisible || !bounds) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    "data-osdk-devtools-ignore": true,
+    style: {
+      position: "fixed",
+      left: bounds.x,
+      top: bounds.y,
+      width: bounds.width,
+      height: bounds.height,
+      borderRadius: bounds.borderRadius,
+      transform: bounds.transform,
+      border: "3px solid #22c55e",
+      backgroundColor: "rgba(34, 197, 94, 0.2)",
+      pointerEvents: "none",
+      zIndex: 2147483645,
+      opacity: state.opacity,
+      transition: `opacity ${FLASH_DURATION_MS}ms ease-out`
+    }
+  });
+}
+const overlayContainerStyles = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0,
+  pointerEvents: "none",
+  zIndex: 2147483646
+};
+export function InspectorOverlay({
+  state,
+  eventHandlers,
+  animationOptions,
+  zIndex
+}) {
+  const {
+    mode,
+    selectionBounds,
+    inspectedComponent,
+    mouseX,
+    mouseY,
+    labelStatus
+  } = state;
+  const isFrozen = mode === "frozen";
+  const effectiveZIndex = zIndex ?? 2147483646;
+  const handleOpenSource = useCallback(sourceLocation => {
+    eventHandlers?.onOpenSource?.(sourceLocation);
+  }, [eventHandlers]);
+  const containerStyle = useMemo(() => ({
+    ...overlayContainerStyles,
+    zIndex: effectiveZIndex
+  }), [effectiveZIndex]);
+  if (!(mode !== "inactive")) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    "data-osdk-devtools-ignore": true,
+    style: containerStyle
+  }, /*#__PURE__*/React.createElement(GrabbedFlash, {
+    bounds: selectionBounds,
+    trigger: isFrozen
+  }), /*#__PURE__*/React.createElement(SelectionHighlight, {
+    bounds: selectionBounds,
+    variant: isFrozen ? "frozen" : "hover",
+    animationOptions: animationOptions,
+    visible: !!selectionBounds
+  }), /*#__PURE__*/React.createElement(ComponentLabel, {
+    component: inspectedComponent,
+    bounds: selectionBounds,
+    mouseX: mouseX,
+    mouseY: mouseY,
+    status: labelStatus,
+    onOpenSource: handleOpenSource,
+    visible: !!inspectedComponent && !!selectionBounds
+  }));
+}
+//# sourceMappingURL=InspectorOverlay.js.map

package/build/esm/inspector/components/InspectorOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InspectorOverlay.js","names":["React","useCallback","useMemo","useRef","ComponentLabel","SelectionHighlight","FLASH_DURATION_MS","GrabbedFlash","bounds","trigger","previousTriggerRef","flashStateRef","isVisible","opacity","fadeTimer","hideTimer","subscribe","onStoreChange","state","current","clearTimeout","setTimeout","getSnapshot","useSyncExternalStore","createElement","style","position","left","x","top","y","width","height","borderRadius","transform","border","backgroundColor","pointerEvents","zIndex","transition","overlayContainerStyles","InspectorOverlay","eventHandlers","animationOptions","mode","selectionBounds","inspectedComponent","mouseX","mouseY","labelStatus","isFrozen","effectiveZIndex","handleOpenSource","sourceLocation","onOpenSource","containerStyle","variant","visible","component","status"],"sources":["InspectorOverlay.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback, useMemo, useRef } from \"react\";\nimport type { SourceLocation } from \"../../fiber/types.js\";\nimport type { InspectorOverlayProps, OverlayBounds } from \"../types.js\";\nimport { ComponentLabel } from \"./ComponentLabel.js\";\nimport { SelectionHighlight } from \"./SelectionHighlight.js\";\n\nconst FLASH_DURATION_MS = 500;\n\ninterface GrabbedFlashProps {\n  bounds: OverlayBounds | null;\n  trigger: boolean;\n}\n\nfunction GrabbedFlash(\n  { bounds, trigger }: GrabbedFlashProps,\n): React.ReactElement | null {\n  const previousTriggerRef = useRef(trigger);\n  const flashStateRef = useRef<{\n    isVisible: boolean;\n    opacity: number;\n    fadeTimer: ReturnType<typeof setTimeout> | null;\n    hideTimer: ReturnType<typeof setTimeout> | null;\n  }>({ isVisible: false, opacity: 0, fadeTimer: null, hideTimer: null });\n\n  const subscribe = useCallback((onStoreChange: () => void) => {\n    const state = flashStateRef.current;\n\n    if (trigger && !previousTriggerRef.current) {\n      if (state.fadeTimer) {\n        clearTimeout(state.fadeTimer);\n      }\n      if (state.hideTimer) {\n        clearTimeout(state.hideTimer);\n      }\n\n      state.isVisible = true;\n      state.opacity = 1;\n\n      state.fadeTimer = setTimeout(() => {\n        state.opacity = 0;\n        state.fadeTimer = null;\n        onStoreChange();\n      }, 50);\n\n      state.hideTimer = setTimeout(() => {\n        state.isVisible = false;\n        state.hideTimer = null;\n        onStoreChange();\n      }, FLASH_DURATION_MS);\n\n      onStoreChange();\n    }\n\n    previousTriggerRef.current = trigger;\n\n    return () => {\n      if (state.fadeTimer) {\n        clearTimeout(state.fadeTimer);\n        state.fadeTimer = null;\n      }\n      if (state.hideTimer) {\n        clearTimeout(state.hideTimer);\n        state.hideTimer = null;\n      }\n    };\n  }, [trigger]);\n\n  const getSnapshot = useCallback(() => {\n    return flashStateRef.current;\n  }, []);\n\n  const state = React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  if (!state.isVisible || !bounds) {\n    return null;\n  }\n\n  return (\n    <div\n      data-osdk-devtools-ignore\n      style={{\n        position: \"fixed\",\n        left: bounds.x,\n        top: bounds.y,\n        width: bounds.width,\n        height: bounds.height,\n        borderRadius: bounds.borderRadius,\n        transform: bounds.transform,\n        border: \"3px solid #22c55e\",\n        backgroundColor: \"rgba(34, 197, 94, 0.2)\",\n        pointerEvents: \"none\",\n        zIndex: 2147483645,\n        opacity: state.opacity,\n        transition: `opacity ${FLASH_DURATION_MS}ms ease-out`,\n      }}\n    />\n  );\n}\n\nconst overlayContainerStyles: React.CSSProperties = {\n  position: \"fixed\",\n  top: 0,\n  left: 0,\n  width: 0,\n  height: 0,\n  pointerEvents: \"none\",\n  zIndex: 2147483646,\n};\n\nexport function InspectorOverlay({\n  state,\n  eventHandlers,\n  animationOptions,\n  zIndex,\n}: InspectorOverlayProps): React.ReactElement | null {\n  const {\n    mode,\n    selectionBounds,\n    inspectedComponent,\n    mouseX,\n    mouseY,\n    labelStatus,\n  } = state;\n\n  const isActive = mode !== \"inactive\";\n  const isFrozen = mode === \"frozen\";\n\n  const effectiveZIndex = zIndex ?? 2147483646;\n\n  const handleOpenSource = useCallback(\n    (sourceLocation: SourceLocation) => {\n      eventHandlers?.onOpenSource?.(sourceLocation);\n    },\n    [eventHandlers],\n  );\n\n  const containerStyle = useMemo(\n    () => ({\n      ...overlayContainerStyles,\n      zIndex: effectiveZIndex,\n    }),\n    [effectiveZIndex],\n  );\n\n  if (!isActive) {\n    return null;\n  }\n\n  return (\n    <div data-osdk-devtools-ignore style={containerStyle}>\n      <GrabbedFlash bounds={selectionBounds} trigger={isFrozen} />\n\n      <SelectionHighlight\n        bounds={selectionBounds}\n        variant={isFrozen ? \"frozen\" : \"hover\"}\n        animationOptions={animationOptions}\n        visible={!!selectionBounds}\n      />\n\n      <ComponentLabel\n        component={inspectedComponent}\n        bounds={selectionBounds}\n        mouseX={mouseX}\n        mouseY={mouseY}\n        status={labelStatus}\n        onOpenSource={handleOpenSource}\n        visible={!!inspectedComponent && !!selectionBounds}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/build/esm/inspector/components/SelectionHighlight.js

@@ -0,0 +1,74 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+import { useAnimatedBounds } from "../hooks/useAnimatedBounds.js";
+import { INTERPOLATION_FACTORS } from "../utils/interpolation.js";
+const variantColors = {
+  hover: {
+    border: "rgba(59, 130, 246, 0.8)",
+    bg: "rgba(59, 130, 246, 0.1)"
+  },
+  selected: {
+    border: "rgba(34, 197, 94, 0.8)",
+    bg: "rgba(34, 197, 94, 0.15)"
+  },
+  frozen: {
+    border: "rgba(168, 85, 247, 0.8)",
+    bg: "rgba(168, 85, 247, 0.1)"
+  }
+};
+const baseStyles = {
+  position: "fixed",
+  pointerEvents: "none",
+  zIndex: 2147483646,
+  boxSizing: "border-box",
+  transition: "opacity 150ms ease-out"
+};
+export function SelectionHighlight({
+  bounds,
+  variant,
+  animationOptions,
+  visible
+}) {
+  const colors = variantColors[variant];
+  const effectiveAnimationOptions = {
+    interpolationFactor: animationOptions?.interpolationFactor ?? INTERPOLATION_FACTORS.selection,
+    convergenceThreshold: animationOptions?.convergenceThreshold,
+    enabled: animationOptions?.enabled ?? true
+  };
+  const animatedBounds = useAnimatedBounds(bounds, effectiveAnimationOptions);
+  if (!animatedBounds || !visible) {
+    return null;
+  }
+  const style = {
+    ...baseStyles,
+    left: `${animatedBounds.x}px`,
+    top: `${animatedBounds.y}px`,
+    width: `${animatedBounds.width}px`,
+    height: `${animatedBounds.height}px`,
+    borderRadius: bounds?.borderRadius ?? "0px",
+    transform: bounds?.transform ?? "",
+    border: `2px solid ${colors.border}`,
+    backgroundColor: colors.bg,
+    opacity: visible ? 1 : 0
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    "data-osdk-devtools-ignore": true,
+    style: style
+  });
+}
+//# sourceMappingURL=SelectionHighlight.js.map

package/build/esm/inspector/components/SelectionHighlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionHighlight.js","names":["React","useAnimatedBounds","INTERPOLATION_FACTORS","variantColors","hover","border","bg","selected","frozen","baseStyles","position","pointerEvents","zIndex","boxSizing","transition","SelectionHighlight","bounds","variant","animationOptions","visible","colors","effectiveAnimationOptions","interpolationFactor","selection","convergenceThreshold","enabled","animatedBounds","style","left","x","top","y","width","height","borderRadius","transform","backgroundColor","opacity","createElement"],"sources":["SelectionHighlight.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from \"react\";\nimport { useAnimatedBounds } from \"../hooks/useAnimatedBounds.js\";\nimport type { HighlightVariant, SelectionHighlightProps } from \"../types.js\";\nimport { INTERPOLATION_FACTORS } from \"../utils/interpolation.js\";\n\nconst variantColors: Record<HighlightVariant, { border: string; bg: string }> =\n  {\n    hover: {\n      border: \"rgba(59, 130, 246, 0.8)\",\n      bg: \"rgba(59, 130, 246, 0.1)\",\n    },\n    selected: {\n      border: \"rgba(34, 197, 94, 0.8)\",\n      bg: \"rgba(34, 197, 94, 0.15)\",\n    },\n    frozen: {\n      border: \"rgba(168, 85, 247, 0.8)\",\n      bg: \"rgba(168, 85, 247, 0.1)\",\n    },\n  };\n\nconst baseStyles: React.CSSProperties = {\n  position: \"fixed\",\n  pointerEvents: \"none\",\n  zIndex: 2147483646,\n  boxSizing: \"border-box\",\n  transition: \"opacity 150ms ease-out\",\n};\n\nexport function SelectionHighlight({\n  bounds,\n  variant,\n  animationOptions,\n  visible,\n}: SelectionHighlightProps): React.ReactElement | null {\n  const colors = variantColors[variant];\n\n  const effectiveAnimationOptions = {\n    interpolationFactor: animationOptions?.interpolationFactor\n      ?? INTERPOLATION_FACTORS.selection,\n    convergenceThreshold: animationOptions?.convergenceThreshold,\n    enabled: animationOptions?.enabled ?? true,\n  };\n\n  const animatedBounds = useAnimatedBounds(bounds, effectiveAnimationOptions);\n\n  if (!animatedBounds || !visible) {\n    return null;\n  }\n\n  const style: React.CSSProperties = {\n    ...baseStyles,\n    left: `${animatedBounds.x}px`,\n    top: `${animatedBounds.y}px`,\n    width: `${animatedBounds.width}px`,\n    height: `${animatedBounds.height}px`,\n    borderRadius: bounds?.borderRadius ?? \"0px\",\n    transform: bounds?.transform ?? \"\",\n    border: `2px solid ${colors.border}`,\n    backgroundColor: colors.bg,\n    opacity: visible ? 1 : 0,\n  };\n\n  return <div data-osdk-devtools-ignore style={style} />;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,iBAAiB,QAAQ,+BAA+B;AAEjE,SAASC,qBAAqB,QAAQ,2BAA2B;AAEjE,MAAMC,aAAuE,GAC3E;EACEC,KAAK,EAAE;IACLC,MAAM,EAAE,yBAAyB;IACjCC,EAAE,EAAE;EACN,CAAC;EACDC,QAAQ,EAAE;IACRF,MAAM,EAAE,wBAAwB;IAChCC,EAAE,EAAE;EACN,CAAC;EACDE,MAAM,EAAE;IACNH,MAAM,EAAE,yBAAyB;IACjCC,EAAE,EAAE;EACN;AACF,CAAC;AAEH,MAAMG,UAA+B,GAAG;EACtCC,QAAQ,EAAE,OAAO;EACjBC,aAAa,EAAE,MAAM;EACrBC,MAAM,EAAE,UAAU;EAClBC,SAAS,EAAE,YAAY;EACvBC,UAAU,EAAE;AACd,CAAC;AAED,OAAO,SAASC,kBAAkBA,CAAC;EACjCC,MAAM;EACNC,OAAO;EACPC,gBAAgB;EAChBC;AACuB,CAAC,EAA6B;EACrD,MAAMC,MAAM,GAAGjB,aAAa,CAACc,OAAO,CAAC;EAErC,MAAMI,yBAAyB,GAAG;IAChCC,mBAAmB,EAAEJ,gBAAgB,EAAEI,mBAAmB,IACrDpB,qBAAqB,CAACqB,SAAS;IACpCC,oBAAoB,EAAEN,gBAAgB,EAAEM,oBAAoB;IAC5DC,OAAO,EAAEP,gBAAgB,EAAEO,OAAO,IAAI;EACxC,CAAC;EAED,MAAMC,cAAc,GAAGzB,iBAAiB,CAACe,MAAM,EAAEK,yBAAyB,CAAC;EAE3E,IAAI,CAACK,cAAc,IAAI,CAACP,OAAO,EAAE;IAC/B,OAAO,IAAI;EACb;EAEA,MAAMQ,KAA0B,GAAG;IACjC,GAAGlB,UAAU;IACbmB,IAAI,EAAE,GAAGF,cAAc,CAACG,CAAC,IAAI;IAC7BC,GAAG,EAAE,GAAGJ,cAAc,CAACK,CAAC,IAAI;IAC5BC,KAAK,EAAE,GAAGN,cAAc,CAACM,KAAK,IAAI;IAClCC,MAAM,EAAE,GAAGP,cAAc,CAACO,MAAM,IAAI;IACpCC,YAAY,EAAElB,MAAM,EAAEkB,YAAY,IAAI,KAAK;IAC3CC,SAAS,EAAEnB,MAAM,EAAEmB,SAAS,IAAI,EAAE;IAClC9B,MAAM,EAAE,aAAae,MAAM,CAACf,MAAM,EAAE;IACpC+B,eAAe,EAAEhB,MAAM,CAACd,EAAE;IAC1B+B,OAAO,EAAElB,OAAO,GAAG,CAAC,GAAG;EACzB,CAAC;EAED,oBAAOnB,KAAA,CAAAsC,aAAA;IAAK,iCAAyB;IAACX,KAAK,EAAEA;EAAM,CAAE,CAAC;AACxD","ignoreList":[]}

package/build/esm/inspector/createClickToInspect.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ClickToInspectSystem } from "./ClickToInspectSystem.js";
+export function createClickToInspect(options = {}) {
+  return new ClickToInspectSystem(options);
+}
+//# sourceMappingURL=createClickToInspect.js.map

package/build/esm/inspector/createClickToInspect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createClickToInspect.js","names":["ClickToInspectSystem","createClickToInspect","options"],"sources":["createClickToInspect.ts"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  type ClickToInspectOptions,\n  ClickToInspectSystem,\n} from \"./ClickToInspectSystem.js\";\n\nexport type { ClickToInspectOptions } from \"./ClickToInspectSystem.js\";\n\nexport function createClickToInspect(\n  options: ClickToInspectOptions = {},\n): ClickToInspectSystem {\n  return new ClickToInspectSystem(options);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAEEA,oBAAoB,QACf,2BAA2B;AAIlC,OAAO,SAASC,oBAAoBA,CAClCC,OAA8B,GAAG,CAAC,CAAC,EACb;EACtB,OAAO,IAAIF,oBAAoB,CAACE,OAAO,CAAC;AAC1C","ignoreList":[]}