@highlighters/react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jace Attard
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,50 @@
+# @highlighters/react
+
+React bindings for [`@highlighters/core`](https://www.npmjs.com/package/@highlighters/core) - realistic highlighter-pen marks for web text. Wet-ink colour, organic frayed edges, true multiply-blend optics, drawn over your text without altering it.
+
+## Install
+
+```sh
+npm install @highlighters/react
+```
+
+`@highlighters/core` is bundled in as a dependency, so you do not install it separately. React 18+ is a peer dependency.
+
+## Usage
+
+```tsx
+import { Highlight } from "@highlighters/react";
+
+function Article() {
+  return (
+    <p>
+      The part that matters most is{" "}
+      <Highlight options={{ color: { palette: "fluorescent", swatch: "yellow" } }}>
+        this exact sentence
+      </Highlight>
+      .
+    </p>
+  );
+}
+```
+
+`Highlight` is polymorphic via `as` (defaults to `<span>`). For highlighting an existing element you already hold a ref to, use the hook:
+
+```tsx
+import { useRef } from "react";
+import { useHighlight } from "@highlighters/react";
+
+function Note() {
+  const ref = useRef<HTMLParagraphElement>(null);
+  useHighlight(ref, { color: { palette: "mild", swatch: "blue" } });
+  return <p ref={ref}>Highlighted on mount, updated when options change.</p>;
+}
+```
+
+## Documentation
+
+Full guides, the options reference, and live demos live at **[highlighte.rs](https://highlighte.rs)** and in the [repository](https://github.com/JaceThings/highlighters).
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,82 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Highlight: () => Highlight,
+  useHighlight: () => useHighlight
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/use-highlight.ts
+var import_react = require("react");
+var import_core = require("@highlighters/core");
+var useIsoLayoutEffect = typeof window !== "undefined" ? import_react.useLayoutEffect : import_react.useEffect;
+function resolveTarget(target) {
+  if (target && typeof target === "object" && "current" in target) {
+    return target.current ?? null;
+  }
+  return target ?? null;
+}
+function useHighlight(target, options, host) {
+  const handleRef = (0, import_react.useRef)(null);
+  const optionsRef = (0, import_react.useRef)(options);
+  optionsRef.current = options;
+  const optionsKey = JSON.stringify(options ?? null);
+  useIsoLayoutEffect(() => {
+    const resolved = resolveTarget(target);
+    if (resolved != null && !handleRef.current) {
+      handleRef.current = (0, import_core.highlight)(resolved, optionsRef.current, host ?? void 0);
+    }
+    return () => {
+      handleRef.current?.remove();
+      handleRef.current = null;
+    };
+  }, [target, host]);
+  useIsoLayoutEffect(() => {
+    if (handleRef.current) return;
+    const resolved = resolveTarget(target);
+    if (resolved != null) {
+      handleRef.current = (0, import_core.highlight)(resolved, optionsRef.current, host ?? void 0);
+    }
+  });
+  useIsoLayoutEffect(() => {
+    handleRef.current?.update(optionsRef.current ?? {});
+  }, [optionsKey]);
+  return handleRef;
+}
+
+// src/highlight.tsx
+var import_react2 = require("react");
+function Highlight(props) {
+  const { as, options, host, children, ...rest } = props;
+  const Component = as ?? "span";
+  const [node, setNode] = (0, import_react2.useState)(null);
+  const ref = (0, import_react2.useCallback)((el) => setNode(el), []);
+  useHighlight(node, options, host);
+  return (0, import_react2.createElement)(Component, { ...rest, ref }, children);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Highlight,
+  useHighlight
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/use-highlight.ts","../src/highlight.tsx"],"sourcesContent":["/** `@highlighters/react`: React bindings for `@highlighters/core`. */\nexport { useHighlight, type HighlightTarget } from \"./use-highlight.js\";\nexport { Highlight, type HighlightProps, type HighlightOwnProps } from \"./highlight.js\";\n\n// Re-export core types for convenience.\nexport type {\n  HighlightOptions,\n  MarkHandle,\n  GroupHandle,\n  Target,\n  TextTarget,\n  PageTarget,\n  PaletteName,\n  PaletteSwatch,\n  Palette,\n  MarkType,\n  ShapeType,\n  TipType,\n  EdgeCap,\n  BlendMode,\n  SnapMode,\n  RendererTier,\n  RendererTierPreference,\n  GradientConfig,\n  GradientStop,\n  TipOptions,\n  InkOptions,\n  EdgeOptions,\n  PaperOptions,\n  GlowOptions,\n  AnimationOptions,\n} from \"@highlighters/core\";\n","import { useEffect, useLayoutEffect, useRef } from \"react\";\nimport { highlight } from \"@highlighters/core\";\nimport type { HighlightOptions, MarkHandle, Target } from \"@highlighters/core\";\n\n// useLayoutEffect on the client, useEffect during SSR to avoid React's server warning.\nconst useIsoLayoutEffect = typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n\n/** A React ref, any core {@link Target}, or `null`. */\nexport type HighlightTarget = React.RefObject<Element | null> | Target | null;\n\nfunction resolveTarget(target: HighlightTarget): Target | null {\n  if (target && typeof target === \"object\" && \"current\" in target) {\n    return target.current ?? null;\n  }\n  return (target as Target) ?? null;\n}\n\n/** Applies a highlighter mark to a ref, DOM node, or core {@link Target}, returning its live {@link MarkHandle}. */\nexport function useHighlight(\n  target: HighlightTarget,\n  options?: HighlightOptions,\n  host?: HTMLElement | null,\n): React.RefObject<MarkHandle | null> {\n  const handleRef = useRef<MarkHandle | null>(null);\n\n  // Read options through a ref so the setup effect doesn't re-seed the mark each render.\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n\n  // Stable dep so a fresh literal with identical contents doesn't re-subscribe.\n  const optionsKey = JSON.stringify(options ?? null);\n\n  // (Re)create the mark when the resolved target changes.\n  useIsoLayoutEffect(() => {\n    const resolved = resolveTarget(target);\n    if (resolved != null && !handleRef.current) {\n      handleRef.current = highlight(resolved, optionsRef.current, host ?? undefined);\n    }\n    return () => {\n      handleRef.current?.remove();\n      handleRef.current = null;\n    };\n  }, [target, host]);\n\n  // A bare RefObject can populate after mount without changing identity, so re-check each render.\n  useIsoLayoutEffect(() => {\n    if (handleRef.current) return;\n    const resolved = resolveTarget(target);\n    if (resolved != null) {\n      handleRef.current = highlight(resolved, optionsRef.current, host ?? undefined);\n    }\n  });\n\n  // Sync option changes through the handle without re-seeding geometry.\n  useIsoLayoutEffect(() => {\n    handleRef.current?.update(optionsRef.current ?? {});\n  }, [optionsKey]);\n\n  return handleRef;\n}\n","import {\n  createElement,\n  useCallback,\n  useState,\n  type ElementType,\n  type ReactNode,\n  type ComponentPropsWithoutRef,\n} from \"react\";\nimport { useHighlight } from \"./use-highlight.js\";\nimport type { HighlightOptions } from \"@highlighters/core\";\n\nexport type HighlightOwnProps = {\n  children?: ReactNode;\n  options?: HighlightOptions;\n  /** Positioned element to mount the overlay inside, instead of the body. */\n  host?: HTMLElement | null;\n};\n\ntype ReservedKeys = keyof HighlightOwnProps | \"as\";\n\n/** Polymorphic via `as` (default `<span>`), which determines available HTML attributes. */\nexport type HighlightProps<E extends ElementType = \"span\"> = HighlightOwnProps & {\n  as?: E;\n} & Omit<ComponentPropsWithoutRef<E>, ReservedKeys>;\n\n/**\n * Renders an element whose text content is highlighted with a decorative overlay mark.\n *\n * @example\n * ```tsx\n * <Highlight as=\"p\" options={{ color: { palette: \"fluorescent\", swatch: \"pink\" } }}>\n *   Highlight this paragraph\n * </Highlight>\n * ```\n */\nexport function Highlight<E extends ElementType = \"span\">(props: HighlightProps<E>) {\n  const { as, options, host, children, ...rest } = props;\n  const Component = (as ?? \"span\") as ElementType;\n  // Callback ref into state so the hook tracks the actual mounted node across as-swaps.\n  const [node, setNode] = useState<Element | null>(null);\n  const ref = useCallback((el: Element | null) => setNode(el), []);\n\n  useHighlight(node, options, host);\n\n  return createElement(Component, { ...rest, ref }, children);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAmD;AACnD,kBAA0B;AAI1B,IAAM,qBAAqB,OAAO,WAAW,cAAc,+BAAkB;AAK7E,SAAS,cAAc,QAAwC;AAC7D,MAAI,UAAU,OAAO,WAAW,YAAY,aAAa,QAAQ;AAC/D,WAAO,OAAO,WAAW;AAAA,EAC3B;AACA,SAAQ,UAAqB;AAC/B;AAGO,SAAS,aACd,QACA,SACA,MACoC;AACpC,QAAM,gBAAY,qBAA0B,IAAI;AAGhD,QAAM,iBAAa,qBAAO,OAAO;AACjC,aAAW,UAAU;AAGrB,QAAM,aAAa,KAAK,UAAU,WAAW,IAAI;AAGjD,qBAAmB,MAAM;AACvB,UAAM,WAAW,cAAc,MAAM;AACrC,QAAI,YAAY,QAAQ,CAAC,UAAU,SAAS;AAC1C,gBAAU,cAAU,uBAAU,UAAU,WAAW,SAAS,QAAQ,MAAS;AAAA,IAC/E;AACA,WAAO,MAAM;AACX,gBAAU,SAAS,OAAO;AAC1B,gBAAU,UAAU;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,QAAQ,IAAI,CAAC;AAGjB,qBAAmB,MAAM;AACvB,QAAI,UAAU,QAAS;AACvB,UAAM,WAAW,cAAc,MAAM;AACrC,QAAI,YAAY,MAAM;AACpB,gBAAU,cAAU,uBAAU,UAAU,WAAW,SAAS,QAAQ,MAAS;AAAA,IAC/E;AAAA,EACF,CAAC;AAGD,qBAAmB,MAAM;AACvB,cAAU,SAAS,OAAO,WAAW,WAAW,CAAC,CAAC;AAAA,EACpD,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AACT;;;AC3DA,IAAAA,gBAOO;AA4BA,SAAS,UAA0C,OAA0B;AAClF,QAAM,EAAE,IAAI,SAAS,MAAM,UAAU,GAAG,KAAK,IAAI;AACjD,QAAM,YAAa,MAAM;AAEzB,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAyB,IAAI;AACrD,QAAM,UAAM,2BAAY,CAAC,OAAuB,QAAQ,EAAE,GAAG,CAAC,CAAC;AAE/D,eAAa,MAAM,SAAS,IAAI;AAEhC,aAAO,6BAAc,WAAW,EAAE,GAAG,MAAM,IAAI,GAAG,QAAQ;AAC5D;","names":["import_react"]}

package/dist/index.d.cts

@@ -0,0 +1,34 @@
+import { Target, HighlightOptions, MarkHandle } from '@highlighters/core';
+export { AnimationOptions, BlendMode, EdgeCap, EdgeOptions, GlowOptions, GradientConfig, GradientStop, GroupHandle, HighlightOptions, InkOptions, MarkHandle, MarkType, PageTarget, Palette, PaletteName, PaletteSwatch, PaperOptions, RendererTier, RendererTierPreference, ShapeType, SnapMode, Target, TextTarget, TipOptions, TipType } from '@highlighters/core';
+import * as react from 'react';
+import { ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
+
+/** A React ref, any core {@link Target}, or `null`. */
+type HighlightTarget = React.RefObject<Element | null> | Target | null;
+/** Applies a highlighter mark to a ref, DOM node, or core {@link Target}, returning its live {@link MarkHandle}. */
+declare function useHighlight(target: HighlightTarget, options?: HighlightOptions, host?: HTMLElement | null): React.RefObject<MarkHandle | null>;
+
+type HighlightOwnProps = {
+    children?: ReactNode;
+    options?: HighlightOptions;
+    /** Positioned element to mount the overlay inside, instead of the body. */
+    host?: HTMLElement | null;
+};
+type ReservedKeys = keyof HighlightOwnProps | "as";
+/** Polymorphic via `as` (default `<span>`), which determines available HTML attributes. */
+type HighlightProps<E extends ElementType = "span"> = HighlightOwnProps & {
+    as?: E;
+} & Omit<ComponentPropsWithoutRef<E>, ReservedKeys>;
+/**
+ * Renders an element whose text content is highlighted with a decorative overlay mark.
+ *
+ * @example
+ * ```tsx
+ * <Highlight as="p" options={{ color: { palette: "fluorescent", swatch: "pink" } }}>
+ *   Highlight this paragraph
+ * </Highlight>
+ * ```
+ */
+declare function Highlight<E extends ElementType = "span">(props: HighlightProps<E>): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+export { Highlight, type HighlightOwnProps, type HighlightProps, type HighlightTarget, useHighlight };

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+import { Target, HighlightOptions, MarkHandle } from '@highlighters/core';
+export { AnimationOptions, BlendMode, EdgeCap, EdgeOptions, GlowOptions, GradientConfig, GradientStop, GroupHandle, HighlightOptions, InkOptions, MarkHandle, MarkType, PageTarget, Palette, PaletteName, PaletteSwatch, PaperOptions, RendererTier, RendererTierPreference, ShapeType, SnapMode, Target, TextTarget, TipOptions, TipType } from '@highlighters/core';
+import * as react from 'react';
+import { ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
+
+/** A React ref, any core {@link Target}, or `null`. */
+type HighlightTarget = React.RefObject<Element | null> | Target | null;
+/** Applies a highlighter mark to a ref, DOM node, or core {@link Target}, returning its live {@link MarkHandle}. */
+declare function useHighlight(target: HighlightTarget, options?: HighlightOptions, host?: HTMLElement | null): React.RefObject<MarkHandle | null>;
+
+type HighlightOwnProps = {
+    children?: ReactNode;
+    options?: HighlightOptions;
+    /** Positioned element to mount the overlay inside, instead of the body. */
+    host?: HTMLElement | null;
+};
+type ReservedKeys = keyof HighlightOwnProps | "as";
+/** Polymorphic via `as` (default `<span>`), which determines available HTML attributes. */
+type HighlightProps<E extends ElementType = "span"> = HighlightOwnProps & {
+    as?: E;
+} & Omit<ComponentPropsWithoutRef<E>, ReservedKeys>;
+/**
+ * Renders an element whose text content is highlighted with a decorative overlay mark.
+ *
+ * @example
+ * ```tsx
+ * <Highlight as="p" options={{ color: { palette: "fluorescent", swatch: "pink" } }}>
+ *   Highlight this paragraph
+ * </Highlight>
+ * ```
+ */
+declare function Highlight<E extends ElementType = "span">(props: HighlightProps<E>): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+export { Highlight, type HighlightOwnProps, type HighlightProps, type HighlightTarget, useHighlight };

package/dist/index.js

@@ -0,0 +1,59 @@
+"use client";
+
+// src/use-highlight.ts
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { highlight } from "@highlighters/core";
+var useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function resolveTarget(target) {
+  if (target && typeof target === "object" && "current" in target) {
+    return target.current ?? null;
+  }
+  return target ?? null;
+}
+function useHighlight(target, options, host) {
+  const handleRef = useRef(null);
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const optionsKey = JSON.stringify(options ?? null);
+  useIsoLayoutEffect(() => {
+    const resolved = resolveTarget(target);
+    if (resolved != null && !handleRef.current) {
+      handleRef.current = highlight(resolved, optionsRef.current, host ?? void 0);
+    }
+    return () => {
+      handleRef.current?.remove();
+      handleRef.current = null;
+    };
+  }, [target, host]);
+  useIsoLayoutEffect(() => {
+    if (handleRef.current) return;
+    const resolved = resolveTarget(target);
+    if (resolved != null) {
+      handleRef.current = highlight(resolved, optionsRef.current, host ?? void 0);
+    }
+  });
+  useIsoLayoutEffect(() => {
+    handleRef.current?.update(optionsRef.current ?? {});
+  }, [optionsKey]);
+  return handleRef;
+}
+
+// src/highlight.tsx
+import {
+  createElement,
+  useCallback,
+  useState
+} from "react";
+function Highlight(props) {
+  const { as, options, host, children, ...rest } = props;
+  const Component = as ?? "span";
+  const [node, setNode] = useState(null);
+  const ref = useCallback((el) => setNode(el), []);
+  useHighlight(node, options, host);
+  return createElement(Component, { ...rest, ref }, children);
+}
+export {
+  Highlight,
+  useHighlight
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-highlight.ts","../src/highlight.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef } from \"react\";\nimport { highlight } from \"@highlighters/core\";\nimport type { HighlightOptions, MarkHandle, Target } from \"@highlighters/core\";\n\n// useLayoutEffect on the client, useEffect during SSR to avoid React's server warning.\nconst useIsoLayoutEffect = typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n\n/** A React ref, any core {@link Target}, or `null`. */\nexport type HighlightTarget = React.RefObject<Element | null> | Target | null;\n\nfunction resolveTarget(target: HighlightTarget): Target | null {\n  if (target && typeof target === \"object\" && \"current\" in target) {\n    return target.current ?? null;\n  }\n  return (target as Target) ?? null;\n}\n\n/** Applies a highlighter mark to a ref, DOM node, or core {@link Target}, returning its live {@link MarkHandle}. */\nexport function useHighlight(\n  target: HighlightTarget,\n  options?: HighlightOptions,\n  host?: HTMLElement | null,\n): React.RefObject<MarkHandle | null> {\n  const handleRef = useRef<MarkHandle | null>(null);\n\n  // Read options through a ref so the setup effect doesn't re-seed the mark each render.\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n\n  // Stable dep so a fresh literal with identical contents doesn't re-subscribe.\n  const optionsKey = JSON.stringify(options ?? null);\n\n  // (Re)create the mark when the resolved target changes.\n  useIsoLayoutEffect(() => {\n    const resolved = resolveTarget(target);\n    if (resolved != null && !handleRef.current) {\n      handleRef.current = highlight(resolved, optionsRef.current, host ?? undefined);\n    }\n    return () => {\n      handleRef.current?.remove();\n      handleRef.current = null;\n    };\n  }, [target, host]);\n\n  // A bare RefObject can populate after mount without changing identity, so re-check each render.\n  useIsoLayoutEffect(() => {\n    if (handleRef.current) return;\n    const resolved = resolveTarget(target);\n    if (resolved != null) {\n      handleRef.current = highlight(resolved, optionsRef.current, host ?? undefined);\n    }\n  });\n\n  // Sync option changes through the handle without re-seeding geometry.\n  useIsoLayoutEffect(() => {\n    handleRef.current?.update(optionsRef.current ?? {});\n  }, [optionsKey]);\n\n  return handleRef;\n}\n","import {\n  createElement,\n  useCallback,\n  useState,\n  type ElementType,\n  type ReactNode,\n  type ComponentPropsWithoutRef,\n} from \"react\";\nimport { useHighlight } from \"./use-highlight.js\";\nimport type { HighlightOptions } from \"@highlighters/core\";\n\nexport type HighlightOwnProps = {\n  children?: ReactNode;\n  options?: HighlightOptions;\n  /** Positioned element to mount the overlay inside, instead of the body. */\n  host?: HTMLElement | null;\n};\n\ntype ReservedKeys = keyof HighlightOwnProps | \"as\";\n\n/** Polymorphic via `as` (default `<span>`), which determines available HTML attributes. */\nexport type HighlightProps<E extends ElementType = \"span\"> = HighlightOwnProps & {\n  as?: E;\n} & Omit<ComponentPropsWithoutRef<E>, ReservedKeys>;\n\n/**\n * Renders an element whose text content is highlighted with a decorative overlay mark.\n *\n * @example\n * ```tsx\n * <Highlight as=\"p\" options={{ color: { palette: \"fluorescent\", swatch: \"pink\" } }}>\n *   Highlight this paragraph\n * </Highlight>\n * ```\n */\nexport function Highlight<E extends ElementType = \"span\">(props: HighlightProps<E>) {\n  const { as, options, host, children, ...rest } = props;\n  const Component = (as ?? \"span\") as ElementType;\n  // Callback ref into state so the hook tracks the actual mounted node across as-swaps.\n  const [node, setNode] = useState<Element | null>(null);\n  const ref = useCallback((el: Element | null) => setNode(el), []);\n\n  useHighlight(node, options, host);\n\n  return createElement(Component, { ...rest, ref }, children);\n}\n"],"mappings":";;;AAAA,SAAS,WAAW,iBAAiB,cAAc;AACnD,SAAS,iBAAiB;AAI1B,IAAM,qBAAqB,OAAO,WAAW,cAAc,kBAAkB;AAK7E,SAAS,cAAc,QAAwC;AAC7D,MAAI,UAAU,OAAO,WAAW,YAAY,aAAa,QAAQ;AAC/D,WAAO,OAAO,WAAW;AAAA,EAC3B;AACA,SAAQ,UAAqB;AAC/B;AAGO,SAAS,aACd,QACA,SACA,MACoC;AACpC,QAAM,YAAY,OAA0B,IAAI;AAGhD,QAAM,aAAa,OAAO,OAAO;AACjC,aAAW,UAAU;AAGrB,QAAM,aAAa,KAAK,UAAU,WAAW,IAAI;AAGjD,qBAAmB,MAAM;AACvB,UAAM,WAAW,cAAc,MAAM;AACrC,QAAI,YAAY,QAAQ,CAAC,UAAU,SAAS;AAC1C,gBAAU,UAAU,UAAU,UAAU,WAAW,SAAS,QAAQ,MAAS;AAAA,IAC/E;AACA,WAAO,MAAM;AACX,gBAAU,SAAS,OAAO;AAC1B,gBAAU,UAAU;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,QAAQ,IAAI,CAAC;AAGjB,qBAAmB,MAAM;AACvB,QAAI,UAAU,QAAS;AACvB,UAAM,WAAW,cAAc,MAAM;AACrC,QAAI,YAAY,MAAM;AACpB,gBAAU,UAAU,UAAU,UAAU,WAAW,SAAS,QAAQ,MAAS;AAAA,IAC/E;AAAA,EACF,CAAC;AAGD,qBAAmB,MAAM;AACvB,cAAU,SAAS,OAAO,WAAW,WAAW,CAAC,CAAC;AAAA,EACpD,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AACT;;;AC3DA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AA4BA,SAAS,UAA0C,OAA0B;AAClF,QAAM,EAAE,IAAI,SAAS,MAAM,UAAU,GAAG,KAAK,IAAI;AACjD,QAAM,YAAa,MAAM;AAEzB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAyB,IAAI;AACrD,QAAM,MAAM,YAAY,CAAC,OAAuB,QAAQ,EAAE,GAAG,CAAC,CAAC;AAE/D,eAAa,MAAM,SAAS,IAAI;AAEhC,SAAO,cAAc,WAAW,EAAE,GAAG,MAAM,IAAI,GAAG,QAAQ;AAC5D;","names":[]}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@highlighters/react",
+  "version": "1.0.0",
+  "description": "React hook and component for realistic highlighter marks",
+  "author": "Jace Attard <hi@ja.mt> (https://ja.mt)",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@highlighters/core": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JaceThings/highlighters.git",
+    "directory": "packages/react"
+  },
+  "keywords": [
+    "highlighter",
+    "highlight",
+    "marker",
+    "react",
+    "hook",
+    "component",
+    "annotation"
+  ],
+  "homepage": "https://github.com/JaceThings/highlighters#readme",
+  "bugs": "https://github.com/JaceThings/highlighters/issues",
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}