@loupekit/shared

v0.6.0

Published

Canonical TypeScript types + helpers (normalizeUrl) shared across the Loupe visual-feedback platform.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

mohamed-ashraf-elsaedmohamed-ashraf-elsaed

Keywords

loupetypessharedvisual-feedbackannotationnormalize-urltypescript

Readme

This is the contract layer of the Loupe visual-feedback platform — no runtime dependencies, not a feature. If you're building on Loupe, install the SDK or MCP server instead; this package is pulled in for you.

Install

npm i @loupekit/shared

Also mirrored to GitHub Packages as @mohamed-ashraf-elsaed/shared — add @mohamed-ashraf-elsaed:registry=https://npm.pkg.github.com to your .npmrc to install from there.

Types

| Type | Purpose | | --- | --- | | Comment | A piece of visual feedback: body, author, status, element anchor, captured context (HTML + styles), screenshot URL. kind is "element", "region" (+ a region rectangle), or "free" — a page-level note with no element and no screenshot, positioned via offset. | | Anchor | The multi-signal element fingerprint (tag, CSS path, XPath, testid, text, attributes, nth-of-type, rect, viewport) used to re-locate an element after a redeploy. | | ElementContext | The target's outerHTML + a curated slice of computed styles. | | RegionRect | A free-region rectangle in document coordinates, with optional element-relative fractions (rel) so regions track responsive reflow. | | LoupeUser, CommentStatus, CommentKind | Identity and workflow enums. |

Helper: normalizeUrl(input)

Normalizes a page URL so comments don't fragment across tracking / volatile query params.

import { normalizeUrl } from "@loupekit/shared";

normalizeUrl("/checkout?utm_source=x&gclid=123&step=2");
// → "/checkout?step=2"

It:

  • strips utm_*, click ids (gclid, fbclid, msclkid, …), and Loupe's own dev params (api, key),
  • sorts the remaining params for stability,
  • drops trailing slashes.

So a comment on /checkout?utm_source=x and one on /checkout land on the same page.

Notes

  • ESM-only; ships compiled JS + .d.ts (main / types → dist).
  • Node packages import the compiled JS; browser packages import the types.

Related packages

| Package | Description | | --- | --- | | @loupekit/sdk | The embeddable visual-feedback widget. | | @loupekit/mcp | The MCP server that hands comments to Claude Code. |

License

MIT © Mohamed Ashraf Elsaed