@hereorcode/dom-inspector 0.1.0

package/README.md

@@ -0,0 +1,44 @@
+# @hereorcode/dom-inspector
+
+A lightweight browser-side DOM inspector that returns selector, XPath, and JS
+path information for clicked elements.
+
+## Status
+
+This package has not been published to npm yet. Use it from this pnpm workspace
+or build/link it locally while developing.
+
+## Usage
+
+```ts
+import { createDOMInspector } from "@hereorcode/dom-inspector";
+
+const inspector = createDOMInspector({
+  selectionScope: { modifierKey: "Alt" },
+  onSelect(result) {
+    console.log(result.selector);
+    console.log(result.xpath);
+    console.log(result.jsPath);
+  }
+});
+
+inspector.start();
+```
+
+Hold `Alt`/`Option` while scrolling to expand or shrink the current hover scope
+before clicking. Pass `selectionScope: false` to disable this behavior.
+
+## Local Development
+
+From the repository root:
+
+```bash
+pnpm install
+pnpm --filter @hereorcode/dom-inspector typecheck
+pnpm --filter @hereorcode/dom-inspector test
+pnpm --filter @hereorcode/dom-inspector build
+```
+
+Use the generated `dist` output only after running the build command. During
+workspace development, the demo app imports this package through
+`"@hereorcode/dom-inspector": "workspace:*"`.