@embedpdf/plugin-redaction 1.0.18

package/dist/lib/actions.d.ts

@@ -0,0 +1,47 @@
+import { Action } from '@embedpdf/core';
+import { RedactionItem } from './types';
+export declare const START_REDACTION = "START_REDACTION";
+export declare const END_REDACTION = "END_REDACTION";
+export declare const ADD_PENDING = "ADD_PENDING";
+export declare const REMOVE_PENDING = "REMOVE_PENDING";
+export declare const CLEAR_PENDING = "CLEAR_PENDING";
+export declare const SELECT_PENDING = "SELECT_PENDING";
+export declare const DESELECT_PENDING = "DESELECT_PENDING";
+export interface StartRedactionAction extends Action {
+    type: typeof START_REDACTION;
+}
+export interface EndRedactionAction extends Action {
+    type: typeof END_REDACTION;
+}
+export interface AddPendingAction extends Action {
+    type: typeof ADD_PENDING;
+    payload: RedactionItem[];
+}
+export interface RemovePendingAction extends Action {
+    type: typeof REMOVE_PENDING;
+    payload: {
+        page: number;
+        id: string;
+    };
+}
+export interface ClearPendingAction extends Action {
+    type: typeof CLEAR_PENDING;
+}
+export interface SelectPendingAction extends Action {
+    type: typeof SELECT_PENDING;
+    payload: {
+        page: number;
+        id: string;
+    };
+}
+export interface DeselectPendingAction extends Action {
+    type: typeof DESELECT_PENDING;
+}
+export type RedactionAction = StartRedactionAction | EndRedactionAction | AddPendingAction | RemovePendingAction | ClearPendingAction | SelectPendingAction | DeselectPendingAction;
+export declare const addPending: (items: RedactionItem[]) => AddPendingAction;
+export declare const removePending: (page: number, id: string) => RemovePendingAction;
+export declare const clearPending: () => ClearPendingAction;
+export declare const startRedaction: () => StartRedactionAction;
+export declare const endRedaction: () => EndRedactionAction;
+export declare const selectPending: (page: number, id: string) => SelectPendingAction;
+export declare const deselectPending: () => DeselectPendingAction;

package/dist/lib/handlers/index.d.ts

@@ -0,0 +1 @@
+export * from './marquee-redact.handler';

package/dist/lib/handlers/marquee-redact.handler.d.ts

@@ -0,0 +1,9 @@
+import { Rect, Size } from '@embedpdf/models';
+import { EmbedPdfPointerEvent, PointerEventHandlersWithLifecycle } from '@embedpdf/plugin-interaction-manager';
+export declare function createMarqueeHandler(opts: {
+    pageSize: Size;
+    scale: number;
+    minDragPx?: number;
+    onPreview?: (rect: Rect | null) => void;
+    onCommit?: (rect: Rect) => void;
+}): PointerEventHandlersWithLifecycle<EmbedPdfPointerEvent>;

package/dist/lib/index.d.ts

@@ -0,0 +1,9 @@
+import { PluginPackage } from '@embedpdf/core';
+import { RedactionPluginConfig, RedactionState } from './types';
+import { RedactionPlugin } from './redaction-plugin';
+import { RedactionAction } from './actions';
+export declare const RedactionPluginPackage: PluginPackage<RedactionPlugin, RedactionPluginConfig, RedactionState, RedactionAction>;
+export * from './redaction-plugin';
+export * from './types';
+export * from './manifest';
+export * from './selectors';

package/dist/lib/manifest.d.ts

@@ -0,0 +1,4 @@
+import { PluginManifest } from '@embedpdf/core';
+import { RedactionPluginConfig } from './types';
+export declare const REDACTION_PLUGIN_ID = "redaction";
+export declare const manifest: PluginManifest<RedactionPluginConfig>;

package/dist/lib/redaction-plugin.d.ts

@@ -0,0 +1,33 @@
+import { RedactionPluginConfig, RedactionCapability, RedactionState, RegisterMarqueeOnPageOptions } from './types';
+import { BasePlugin, PluginRegistry } from '@embedpdf/core';
+import { PdfEngine } from '@embedpdf/models';
+export declare class RedactionPlugin extends BasePlugin<RedactionPluginConfig, RedactionCapability, RedactionState> {
+    static readonly id: "redaction";
+    private engine;
+    private config;
+    private selectionCapability;
+    private interactionManagerCapability;
+    private readonly redactionSelection$;
+    private readonly pending$;
+    private readonly selected$;
+    private readonly unsubscribeSelectionChange;
+    private readonly unsubscribeEndSelection;
+    private readonly unsubscribeModeChange;
+    constructor(id: string, registry: PluginRegistry, engine: PdfEngine, config: RedactionPluginConfig);
+    initialize(_config: RedactionPluginConfig): Promise<void>;
+    protected buildCapability(): RedactionCapability;
+    private selectPending;
+    private deselectPending;
+    private enableRedactSelection;
+    private toggleRedactSelection;
+    private enableMarqueeRedact;
+    private toggleMarqueeRedact;
+    private startRedaction;
+    private endRedaction;
+    registerMarqueeOnPage(opts: RegisterMarqueeOnPageOptions): () => void;
+    private queueCurrentSelectionAsPending;
+    private commitPendingOne;
+    private commitAllPending;
+    onStoreUpdated(_: RedactionState, newState: RedactionState): void;
+    destroy(): Promise<void>;
+}

package/dist/lib/reducer.d.ts

@@ -0,0 +1,4 @@
+import { RedactionState } from './types';
+import { RedactionAction } from './actions';
+export declare const initialState: RedactionState;
+export declare const redactionReducer: (state: RedactionState | undefined, action: RedactionAction) => RedactionState;

package/dist/lib/selectors.d.ts

@@ -0,0 +1,3 @@
+import { RedactionState } from './types';
+export declare const getPendingRedactionsCount: (s: RedactionState) => number;
+export declare const hasPendingRedactions: (s: RedactionState) => boolean;

package/dist/lib/types.d.ts

@@ -0,0 +1,57 @@
+import { BasePluginConfig, EventHook } from '@embedpdf/core';
+import { PdfErrorReason, Rect, Task } from '@embedpdf/models';
+import { FormattedSelection } from '@embedpdf/plugin-selection';
+export interface SelectedRedaction {
+    page: number;
+    id: string | null;
+}
+export interface RedactionState {
+    isRedacting: boolean;
+    pending: Record<number, RedactionItem[]>;
+    selected: SelectedRedaction | null;
+}
+export type RedactionItem = {
+    id: string;
+    kind: 'text';
+    page: number;
+    boundingRect: Rect;
+    rects: Rect[];
+} | {
+    id: string;
+    kind: 'area';
+    page: number;
+    rect: Rect;
+};
+export interface MarqueeRedactCallback {
+    onPreview?: (rect: Rect | null) => void;
+    onCommit?: (rect: Rect) => void;
+}
+export interface RegisterMarqueeOnPageOptions {
+    pageIndex: number;
+    scale: number;
+    callback: MarqueeRedactCallback;
+}
+export interface RedactionPluginConfig extends BasePluginConfig {
+    blackbox: boolean;
+}
+export interface RedactionCapability {
+    queueCurrentSelectionAsPending: () => Task<boolean, PdfErrorReason>;
+    enableMarqueeRedact: () => void;
+    toggleMarqueeRedact: () => void;
+    isMarqueeRedactActive: () => boolean;
+    enableRedactSelection: () => void;
+    toggleRedactSelection: () => void;
+    isRedactSelectionActive: () => boolean;
+    onRedactionSelectionChange: EventHook<FormattedSelection[]>;
+    onPendingChange: EventHook<Record<number, RedactionItem[]>>;
+    removePending: (page: number, id: string) => void;
+    clearPending: () => void;
+    commitAllPending: () => Task<boolean, PdfErrorReason>;
+    commitPending: (page: number, id: string) => Task<boolean, PdfErrorReason>;
+    endRedaction: () => void;
+    startRedaction: () => void;
+    onSelectionChange: EventHook<SelectedRedaction | null>;
+    selectPending: (page: number, id: string) => void;
+    deselectPending: () => void;
+    registerMarqueeOnPage(opts: RegisterMarqueeOnPageOptions): () => void;
+}

package/dist/preact/adapter.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from 'preact';
+export { Fragment } from 'preact';
+export { useEffect, useRef, useState, useMemo, useCallback } from 'preact/hooks';
+export type { ComponentChildren as ReactNode } from 'preact';
+export type HTMLAttributes<T = any> = import('preact').JSX.HTMLAttributes<T extends EventTarget ? T : never>;
+export type CSSProperties = import('preact').JSX.CSSProperties;
+export type MouseEvent<T = Element> = JSX.TargetedMouseEvent<T extends EventTarget ? T : never>;
+export type PointerEvent<T = Element> = JSX.TargetedPointerEvent<T extends EventTarget ? T : never>;
+export type ChangeEvent<T = Element> = JSX.TargetedInputEvent<T extends EventTarget ? T : never>;
+export type TouchEvent<T = Element> = JSX.TargetedTouchEvent<T extends EventTarget ? T : never>;

package/dist/preact/core.d.ts

@@ -0,0 +1 @@
+export * from '@embedpdf/core/preact';

package/dist/preact/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/preact"),t=require("@embedpdf/plugin-redaction"),i=require("preact/jsx-runtime"),n=require("preact"),r=require("preact/hooks"),o=require("@embedpdf/models"),s=()=>e.usePlugin(t.RedactionPlugin.id),a=()=>e.useCapability(t.RedactionPlugin.id),l=({pageIndex:e,scale:t,className:n,stroke:o="red",fill:a="transparent"})=>{const{plugin:l}=s(),[d,c]=r.useState(null);return r.useEffect((()=>{if(l)return l.registerMarqueeOnPage({pageIndex:e,scale:t,callback:{onPreview:c}})}),[l,e]),d?i.jsx("div",{style:{position:"absolute",pointerEvents:"none",left:d.origin.x*t,top:d.origin.y*t,width:d.size.width*t,height:d.size.height*t,border:`1px solid ${o}`,background:a,boxSizing:"border-box"},className:n}):null};function d({color:e="#FFFF00",opacity:t=.5,border:n="1px solid red",rects:r,rect:o,scale:s,onClick:a,style:l,...d}){return i.jsx(i.Fragment,{children:r.map(((r,c)=>i.jsx("div",{onPointerDown:a,onTouchStart:a,style:{position:"absolute",border:n,left:(o?r.origin.x-o.origin.x:r.origin.x)*s,top:(o?r.origin.y-o.origin.y:r.origin.y)*s,width:r.size.width*s,height:r.size.height*s,background:e,opacity:t,pointerEvents:a?"auto":"none",cursor:a?"pointer":"default",zIndex:a?1:void 0,...l},...d},c)))})}function c({pageIndex:e,scale:t}){const{provides:n}=a(),[o,s]=r.useState([]),[l,c]=r.useState(null);return r.useEffect((()=>{if(n)return n.onRedactionSelectionChange((t=>{const i=t.find((t=>t.pageIndex===e));s((null==i?void 0:i.segmentRects)??[]),c((null==i?void 0:i.rect)??null)}))}),[n,e]),l?i.jsx("div",{style:{mixBlendMode:"normal",pointerEvents:"none",position:"absolute",inset:0},children:i.jsx(d,{color:"transparent",opacity:1,rects:o,scale:t,border:"1px solid red"})}):null}function u({pageIndex:t,scale:s,bboxStroke:l="rgba(0,0,0,0.8)",rotation:c=o.Rotation.Degree0,selectionMenu:u}){const{provides:p}=a(),[g,x]=r.useState([]),[h,b]=r.useState(null);if(r.useEffect((()=>{if(!p)return;const e=p.onPendingChange((e=>x(e[t]??[]))),i=p.onSelectionChange((e=>{b(e&&e.page===t?e.id:null)}));return()=>{null==e||e(),null==i||i()}}),[p,t]),!g.length)return null;const f=r.useCallback(((e,i)=>{e.stopPropagation(),p&&p.selectPending(t,i)}),[p,t]);return i.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:g.map((r=>{if("area"===r.kind){const o=r.rect;return i.jsxs(n.Fragment,{children:[i.jsx("div",{style:{position:"absolute",left:o.origin.x*s,top:o.origin.y*s,width:o.size.width*s,height:o.size.height*s,background:"transparent",outline:h===r.id?`1px solid ${l}`:"none",outlineOffset:"2px",border:"1px solid red",pointerEvents:"auto",cursor:"pointer"},onPointerDown:e=>f(e,r.id),onTouchStart:e=>f(e,r.id)}),i.jsx(e.CounterRotate,{rect:{origin:{x:o.origin.x*s,y:o.origin.y*s},size:{width:o.size.width*s,height:o.size.height*s}},rotation:c,children:({rect:e,menuWrapperProps:i})=>u&&u({item:r,selected:h===r.id,pageIndex:t,menuWrapperProps:i,rect:e})})]},r.id)}const o=r.boundingRect;return i.jsxs(n.Fragment,{children:[i.jsx("div",{style:{position:"absolute",left:o.origin.x*s,top:o.origin.y*s,width:o.size.width*s,height:o.size.height*s,background:"transparent",outline:h===r.id?`1px solid ${l}`:"none",outlineOffset:"2px",pointerEvents:"auto",cursor:h===r.id?"pointer":"default"},children:i.jsx(d,{rect:o,rects:r.rects,color:"transparent",border:"1px solid red",scale:s,onClick:e=>f(e,r.id)})}),i.jsx(e.CounterRotate,{rect:{origin:{x:o.origin.x*s,y:o.origin.y*s},size:{width:o.size.width*s,height:o.size.height*s}},rotation:c,children:({rect:e,menuWrapperProps:i})=>u&&u({item:r,selected:h===r.id,pageIndex:t,menuWrapperProps:i,rect:e})})]},r.id)}))})}exports.RedactionLayer=({pageIndex:e,scale:t,rotation:r=o.Rotation.Degree0,selectionMenu:s})=>i.jsxs(n.Fragment,{children:[i.jsx(u,{pageIndex:e,scale:t,rotation:r,selectionMenu:s}),i.jsx(l,{pageIndex:e,scale:t}),i.jsx(c,{pageIndex:e,scale:t})]}),exports.useRedactionCapability=a,exports.useRedactionPlugin=s;
+//# sourceMappingURL=index.cjs.map

package/dist/preact/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-redaction.ts","../../src/shared/components/marquee-redact.tsx","../../src/shared/components/highlight.tsx","../../src/shared/components/selection-redact.tsx","../../src/shared/components/pending-redactions.tsx","../../src/shared/components/redaction-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { RedactionPlugin } from '@embedpdf/plugin-redaction';\n\nexport const useRedactionPlugin = () => usePlugin<RedactionPlugin>(RedactionPlugin.id);\nexport const useRedactionCapability = () => useCapability<RedactionPlugin>(RedactionPlugin.id);\n","import { useEffect, useState } from '@framework';\nimport { Rect } from '@embedpdf/models';\n\nimport { useRedactionPlugin } from '../hooks/use-redaction';\n\ninterface MarqueeRedactProps {\n  /** Index of the page this layer lives on */\n  pageIndex: number;\n  /** Scale of the page */\n  scale: number;\n  /** Optional CSS class applied to the marquee rectangle */\n  className?: string;\n  /** Stroke / fill colours (defaults below) */\n  stroke?: string;\n  fill?: string;\n}\n\nexport const MarqueeRedact = ({\n  pageIndex,\n  scale,\n  className,\n  stroke = 'red',\n  fill = 'transparent',\n}: MarqueeRedactProps) => {\n  const { plugin: redactionPlugin } = useRedactionPlugin();\n\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  useEffect(() => {\n    if (!redactionPlugin) return;\n    return redactionPlugin.registerMarqueeOnPage({\n      pageIndex,\n      scale,\n      callback: {\n        onPreview: setRect,\n      },\n    });\n  }, [redactionPlugin, pageIndex]);\n\n  if (!rect) return null;\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none',\n        left: rect.origin.x * scale,\n        top: rect.origin.y * scale,\n        width: rect.size.width * scale,\n        height: rect.size.height * scale,\n        border: `1px solid ${stroke}`,\n        background: fill,\n        boxSizing: 'border-box',\n      }}\n      className={className}\n    />\n  );\n};\n","import { HTMLAttributes, CSSProperties, MouseEvent, TouchEvent } from '@framework';\nimport { Rect } from '@embedpdf/models';\n\ntype HighlightProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  color?: string;\n  opacity?: number;\n  border?: string;\n  rects: Rect[];\n  rect?: Rect;\n  scale: number;\n  onClick?: (e: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void;\n  style?: CSSProperties;\n};\n\nexport function Highlight({\n  color = '#FFFF00',\n  opacity = 0.5,\n  border = '1px solid red',\n  rects,\n  rect,\n  scale,\n  onClick,\n  style,\n  ...props\n}: HighlightProps) {\n  return (\n    <>\n      {rects.map((b, i) => (\n        <div\n          key={i}\n          onPointerDown={onClick}\n          onTouchStart={onClick}\n          style={{\n            position: 'absolute',\n            border,\n            left: (rect ? b.origin.x - rect.origin.x : b.origin.x) * scale,\n            top: (rect ? b.origin.y - rect.origin.y : b.origin.y) * scale,\n            width: b.size.width * scale,\n            height: b.size.height * scale,\n            background: color,\n            opacity: opacity,\n            pointerEvents: onClick ? 'auto' : 'none',\n            cursor: onClick ? 'pointer' : 'default',\n            zIndex: onClick ? 1 : undefined,\n            ...style,\n          }}\n          {...props}\n        />\n      ))}\n    </>\n  );\n}\n","import { Rect } from '@embedpdf/models';\n\nimport { useEffect, useState } from '@framework';\nimport { useRedactionCapability } from '../hooks';\nimport { Highlight } from './highlight';\n\ninterface SelectionRedactProps {\n  pageIndex: number;\n  scale: number;\n}\n\nexport function SelectionRedact({ pageIndex, scale }: SelectionRedactProps) {\n  const { provides: redactionProvides } = useRedactionCapability();\n  const [rects, setRects] = useState<Array<Rect>>([]);\n  const [boundingRect, setBoundingRect] = useState<Rect | null>(null);\n\n  useEffect(() => {\n    if (!redactionProvides) return;\n\n    return redactionProvides.onRedactionSelectionChange((formattedSelection) => {\n      const selection = formattedSelection.find((s) => s.pageIndex === pageIndex);\n      setRects(selection?.segmentRects ?? []);\n      setBoundingRect(selection?.rect ?? null);\n    });\n  }, [redactionProvides, pageIndex]);\n\n  if (!boundingRect) return null;\n\n  return (\n    <div\n      style={{\n        mixBlendMode: 'normal',\n        pointerEvents: 'none',\n        position: 'absolute',\n        inset: 0,\n      }}\n    >\n      <Highlight\n        color={'transparent'}\n        opacity={1}\n        rects={rects}\n        scale={scale}\n        border=\"1px solid red\"\n      />\n    </div>\n  );\n}\n","import { Fragment, useEffect, useState, useCallback, MouseEvent, TouchEvent } from '@framework';\nimport { CounterRotate } from '@embedpdf/core/@framework';\nimport { useRedactionCapability } from '../hooks';\nimport { RedactionItem } from '@embedpdf/plugin-redaction';\nimport { Highlight } from './highlight';\nimport { SelectionMenuProps } from './types';\nimport { Rotation } from '@embedpdf/models';\n\ninterface PendingRedactionsProps {\n  pageIndex: number;\n  scale: number;\n  rotation: Rotation;\n  bboxStroke?: string;\n  selectionMenu?: (props: SelectionMenuProps) => JSX.Element;\n}\n\nexport function PendingRedactions({\n  pageIndex,\n  scale,\n  bboxStroke = 'rgba(0,0,0,0.8)',\n  rotation = Rotation.Degree0,\n  selectionMenu,\n}: PendingRedactionsProps) {\n  const { provides: redaction } = useRedactionCapability();\n  const [items, setItems] = useState<RedactionItem[]>([]);\n  const [selectedId, setSelectedId] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (!redaction) return;\n    const off1 = redaction.onPendingChange((map) => setItems(map[pageIndex] ?? []));\n    const off2 = redaction.onSelectionChange((sel) => {\n      setSelectedId(sel && sel.page === pageIndex ? sel.id : null);\n    });\n    return () => {\n      off1?.();\n      off2?.();\n    };\n  }, [redaction, pageIndex]);\n\n  if (!items.length) return null;\n\n  const select = useCallback(\n    (e: MouseEvent | TouchEvent, id: string) => {\n      e.stopPropagation();\n      if (!redaction) return;\n      redaction.selectPending(pageIndex, id);\n    },\n    [redaction, pageIndex],\n  );\n\n  return (\n    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>\n      {items.map((it) => {\n        if (it.kind === 'area') {\n          const r = it.rect;\n          return (\n            <Fragment key={it.id}>\n              <div\n                style={{\n                  position: 'absolute',\n                  left: r.origin.x * scale,\n                  top: r.origin.y * scale,\n                  width: r.size.width * scale,\n                  height: r.size.height * scale,\n                  background: 'transparent',\n                  outline: selectedId === it.id ? `1px solid ${bboxStroke}` : 'none',\n                  outlineOffset: '2px',\n                  border: `1px solid red`,\n                  pointerEvents: 'auto',\n                  cursor: 'pointer',\n                }}\n                onPointerDown={(e) => select(e, it.id)}\n                onTouchStart={(e) => select(e, it.id)}\n              />\n              <CounterRotate\n                rect={{\n                  origin: { x: r.origin.x * scale, y: r.origin.y * scale },\n                  size: { width: r.size.width * scale, height: r.size.height * scale },\n                }}\n                rotation={rotation}\n              >\n                {({ rect, menuWrapperProps }) =>\n                  selectionMenu &&\n                  selectionMenu({\n                    item: it,\n                    selected: selectedId === it.id,\n                    pageIndex,\n                    menuWrapperProps,\n                    rect,\n                  })\n                }\n              </CounterRotate>\n            </Fragment>\n          );\n        }\n        // kind === 'text' → draw bounding box; inner rects are not drawn here to avoid clutter.\n        const b = it.boundingRect;\n        return (\n          <Fragment key={it.id}>\n            <div\n              style={{\n                position: 'absolute',\n                left: b.origin.x * scale,\n                top: b.origin.y * scale,\n                width: b.size.width * scale,\n                height: b.size.height * scale,\n                background: 'transparent',\n                outline: selectedId === it.id ? `1px solid ${bboxStroke}` : 'none',\n                outlineOffset: '2px',\n                pointerEvents: 'auto',\n                cursor: selectedId === it.id ? 'pointer' : 'default',\n              }}\n            >\n              <Highlight\n                rect={b}\n                rects={it.rects}\n                color=\"transparent\"\n                border=\"1px solid red\"\n                scale={scale}\n                onClick={(e) => select(e, it.id)}\n              />\n            </div>\n            <CounterRotate\n              rect={{\n                origin: { x: b.origin.x * scale, y: b.origin.y * scale },\n                size: { width: b.size.width * scale, height: b.size.height * scale },\n              }}\n              rotation={rotation}\n            >\n              {({ rect, menuWrapperProps }) =>\n                selectionMenu &&\n                selectionMenu({\n                  item: it,\n                  selected: selectedId === it.id,\n                  pageIndex,\n                  menuWrapperProps,\n                  rect,\n                })\n              }\n            </CounterRotate>\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n}\n","import { Fragment } from '@framework';\nimport { MarqueeRedact } from './marquee-redact';\nimport { SelectionRedact } from './selection-redact';\nimport { PendingRedactions } from './pending-redactions';\nimport { Rotation } from '@embedpdf/models';\nimport { SelectionMenuProps } from './types';\n\ninterface RedactionLayerProps {\n  pageIndex: number;\n  scale: number;\n  rotation: Rotation;\n  selectionMenu?: (props: SelectionMenuProps) => JSX.Element;\n}\n\nexport const RedactionLayer = ({\n  pageIndex,\n  scale,\n  rotation = Rotation.Degree0,\n  selectionMenu,\n}: RedactionLayerProps) => {\n  return (\n    <Fragment>\n      <PendingRedactions\n        pageIndex={pageIndex}\n        scale={scale}\n        rotation={rotation}\n        selectionMenu={selectionMenu}\n      />\n      <MarqueeRedact pageIndex={pageIndex} scale={scale} />\n      <SelectionRedact pageIndex={pageIndex} scale={scale} />\n    </Fragment>\n  );\n};\n"],"names":["useRedactionPlugin","usePlugin","RedactionPlugin","id","useRedactionCapability","useCapability","MarqueeRedact","pageIndex","scale","className","stroke","fill","plugin","redactionPlugin","rect","setRect","useState","useEffect","registerMarqueeOnPage","callback","onPreview","jsxRuntime","jsx","style","position","pointerEvents","left","origin","x","top","y","width","size","height","border","background","boxSizing","Highlight","color","opacity","rects","onClick","props","Fragment","children","map","b","i","onPointerDown","onTouchStart","cursor","zIndex","SelectionRedact","provides","redactionProvides","setRects","boundingRect","setBoundingRect","onRedactionSelectionChange","formattedSelection","selection","find","s","segmentRects","mixBlendMode","inset","PendingRedactions","bboxStroke","rotation","Rotation","Degree0","selectionMenu","redaction","items","setItems","selectedId","setSelectedId","off1","onPendingChange","off2","onSelectionChange","sel","page","length","select","useCallback","e","stopPropagation","selectPending","it","kind","r","outline","outlineOffset","CounterRotate","menuWrapperProps","item","selected"],"mappings":"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"}

package/dist/preact/index.d.ts

@@ -0,0 +1 @@
+export * from '../shared-preact';

package/dist/preact/index.js

@@ -0,0 +1,265 @@
+import { usePlugin, useCapability, CounterRotate } from "@embedpdf/core/preact";
+import { RedactionPlugin } from "@embedpdf/plugin-redaction";
+import { jsx, Fragment, jsxs } from "preact/jsx-runtime";
+import { Fragment as Fragment$1 } from "preact";
+import { useState, useEffect, useCallback } from "preact/hooks";
+import { Rotation } from "@embedpdf/models";
+const useRedactionPlugin = () => usePlugin(RedactionPlugin.id);
+const useRedactionCapability = () => useCapability(RedactionPlugin.id);
+const MarqueeRedact = ({
+  pageIndex,
+  scale,
+  className,
+  stroke = "red",
+  fill = "transparent"
+}) => {
+  const { plugin: redactionPlugin } = useRedactionPlugin();
+  const [rect, setRect] = useState(null);
+  useEffect(() => {
+    if (!redactionPlugin) return;
+    return redactionPlugin.registerMarqueeOnPage({
+      pageIndex,
+      scale,
+      callback: {
+        onPreview: setRect
+      }
+    });
+  }, [redactionPlugin, pageIndex]);
+  if (!rect) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        pointerEvents: "none",
+        left: rect.origin.x * scale,
+        top: rect.origin.y * scale,
+        width: rect.size.width * scale,
+        height: rect.size.height * scale,
+        border: `1px solid ${stroke}`,
+        background: fill,
+        boxSizing: "border-box"
+      },
+      className
+    }
+  );
+};
+function Highlight({
+  color = "#FFFF00",
+  opacity = 0.5,
+  border = "1px solid red",
+  rects,
+  rect,
+  scale,
+  onClick,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: rects.map((b, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      onPointerDown: onClick,
+      onTouchStart: onClick,
+      style: {
+        position: "absolute",
+        border,
+        left: (rect ? b.origin.x - rect.origin.x : b.origin.x) * scale,
+        top: (rect ? b.origin.y - rect.origin.y : b.origin.y) * scale,
+        width: b.size.width * scale,
+        height: b.size.height * scale,
+        background: color,
+        opacity,
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : void 0,
+        ...style
+      },
+      ...props
+    },
+    i
+  )) });
+}
+function SelectionRedact({ pageIndex, scale }) {
+  const { provides: redactionProvides } = useRedactionCapability();
+  const [rects, setRects] = useState([]);
+  const [boundingRect, setBoundingRect] = useState(null);
+  useEffect(() => {
+    if (!redactionProvides) return;
+    return redactionProvides.onRedactionSelectionChange((formattedSelection) => {
+      const selection = formattedSelection.find((s) => s.pageIndex === pageIndex);
+      setRects((selection == null ? void 0 : selection.segmentRects) ?? []);
+      setBoundingRect((selection == null ? void 0 : selection.rect) ?? null);
+    });
+  }, [redactionProvides, pageIndex]);
+  if (!boundingRect) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        mixBlendMode: "normal",
+        pointerEvents: "none",
+        position: "absolute",
+        inset: 0
+      },
+      children: /* @__PURE__ */ jsx(
+        Highlight,
+        {
+          color: "transparent",
+          opacity: 1,
+          rects,
+          scale,
+          border: "1px solid red"
+        }
+      )
+    }
+  );
+}
+function PendingRedactions({
+  pageIndex,
+  scale,
+  bboxStroke = "rgba(0,0,0,0.8)",
+  rotation = Rotation.Degree0,
+  selectionMenu
+}) {
+  const { provides: redaction } = useRedactionCapability();
+  const [items, setItems] = useState([]);
+  const [selectedId, setSelectedId] = useState(null);
+  useEffect(() => {
+    if (!redaction) return;
+    const off1 = redaction.onPendingChange((map) => setItems(map[pageIndex] ?? []));
+    const off2 = redaction.onSelectionChange((sel) => {
+      setSelectedId(sel && sel.page === pageIndex ? sel.id : null);
+    });
+    return () => {
+      off1 == null ? void 0 : off1();
+      off2 == null ? void 0 : off2();
+    };
+  }, [redaction, pageIndex]);
+  if (!items.length) return null;
+  const select = useCallback(
+    (e, id) => {
+      e.stopPropagation();
+      if (!redaction) return;
+      redaction.selectPending(pageIndex, id);
+    },
+    [redaction, pageIndex]
+  );
+  return /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: items.map((it) => {
+    if (it.kind === "area") {
+      const r = it.rect;
+      return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: r.origin.x * scale,
+              top: r.origin.y * scale,
+              width: r.size.width * scale,
+              height: r.size.height * scale,
+              background: "transparent",
+              outline: selectedId === it.id ? `1px solid ${bboxStroke}` : "none",
+              outlineOffset: "2px",
+              border: `1px solid red`,
+              pointerEvents: "auto",
+              cursor: "pointer"
+            },
+            onPointerDown: (e) => select(e, it.id),
+            onTouchStart: (e) => select(e, it.id)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CounterRotate,
+          {
+            rect: {
+              origin: { x: r.origin.x * scale, y: r.origin.y * scale },
+              size: { width: r.size.width * scale, height: r.size.height * scale }
+            },
+            rotation,
+            children: ({ rect, menuWrapperProps }) => selectionMenu && selectionMenu({
+              item: it,
+              selected: selectedId === it.id,
+              pageIndex,
+              menuWrapperProps,
+              rect
+            })
+          }
+        )
+      ] }, it.id);
+    }
+    const b = it.boundingRect;
+    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: b.origin.x * scale,
+            top: b.origin.y * scale,
+            width: b.size.width * scale,
+            height: b.size.height * scale,
+            background: "transparent",
+            outline: selectedId === it.id ? `1px solid ${bboxStroke}` : "none",
+            outlineOffset: "2px",
+            pointerEvents: "auto",
+            cursor: selectedId === it.id ? "pointer" : "default"
+          },
+          children: /* @__PURE__ */ jsx(
+            Highlight,
+            {
+              rect: b,
+              rects: it.rects,
+              color: "transparent",
+              border: "1px solid red",
+              scale,
+              onClick: (e) => select(e, it.id)
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CounterRotate,
+        {
+          rect: {
+            origin: { x: b.origin.x * scale, y: b.origin.y * scale },
+            size: { width: b.size.width * scale, height: b.size.height * scale }
+          },
+          rotation,
+          children: ({ rect, menuWrapperProps }) => selectionMenu && selectionMenu({
+            item: it,
+            selected: selectedId === it.id,
+            pageIndex,
+            menuWrapperProps,
+            rect
+          })
+        }
+      )
+    ] }, it.id);
+  }) });
+}
+const RedactionLayer = ({
+  pageIndex,
+  scale,
+  rotation = Rotation.Degree0,
+  selectionMenu
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(
+      PendingRedactions,
+      {
+        pageIndex,
+        scale,
+        rotation,
+        selectionMenu
+      }
+    ),
+    /* @__PURE__ */ jsx(MarqueeRedact, { pageIndex, scale }),
+    /* @__PURE__ */ jsx(SelectionRedact, { pageIndex, scale })
+  ] });
+};
+export {
+  RedactionLayer,
+  useRedactionCapability,
+  useRedactionPlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/preact/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-redaction.ts","../../src/shared/components/marquee-redact.tsx","../../src/shared/components/highlight.tsx","../../src/shared/components/selection-redact.tsx","../../src/shared/components/pending-redactions.tsx","../../src/shared/components/redaction-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { RedactionPlugin } from '@embedpdf/plugin-redaction';\n\nexport const useRedactionPlugin = () => usePlugin<RedactionPlugin>(RedactionPlugin.id);\nexport const useRedactionCapability = () => useCapability<RedactionPlugin>(RedactionPlugin.id);\n","import { useEffect, useState } from '@framework';\nimport { Rect } from '@embedpdf/models';\n\nimport { useRedactionPlugin } from '../hooks/use-redaction';\n\ninterface MarqueeRedactProps {\n  /** Index of the page this layer lives on */\n  pageIndex: number;\n  /** Scale of the page */\n  scale: number;\n  /** Optional CSS class applied to the marquee rectangle */\n  className?: string;\n  /** Stroke / fill colours (defaults below) */\n  stroke?: string;\n  fill?: string;\n}\n\nexport const MarqueeRedact = ({\n  pageIndex,\n  scale,\n  className,\n  stroke = 'red',\n  fill = 'transparent',\n}: MarqueeRedactProps) => {\n  const { plugin: redactionPlugin } = useRedactionPlugin();\n\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  useEffect(() => {\n    if (!redactionPlugin) return;\n    return redactionPlugin.registerMarqueeOnPage({\n      pageIndex,\n      scale,\n      callback: {\n        onPreview: setRect,\n      },\n    });\n  }, [redactionPlugin, pageIndex]);\n\n  if (!rect) return null;\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none',\n        left: rect.origin.x * scale,\n        top: rect.origin.y * scale,\n        width: rect.size.width * scale,\n        height: rect.size.height * scale,\n        border: `1px solid ${stroke}`,\n        background: fill,\n        boxSizing: 'border-box',\n      }}\n      className={className}\n    />\n  );\n};\n","import { HTMLAttributes, CSSProperties, MouseEvent, TouchEvent } from '@framework';\nimport { Rect } from '@embedpdf/models';\n\ntype HighlightProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  color?: string;\n  opacity?: number;\n  border?: string;\n  rects: Rect[];\n  rect?: Rect;\n  scale: number;\n  onClick?: (e: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void;\n  style?: CSSProperties;\n};\n\nexport function Highlight({\n  color = '#FFFF00',\n  opacity = 0.5,\n  border = '1px solid red',\n  rects,\n  rect,\n  scale,\n  onClick,\n  style,\n  ...props\n}: HighlightProps) {\n  return (\n    <>\n      {rects.map((b, i) => (\n        <div\n          key={i}\n          onPointerDown={onClick}\n          onTouchStart={onClick}\n          style={{\n            position: 'absolute',\n            border,\n            left: (rect ? b.origin.x - rect.origin.x : b.origin.x) * scale,\n            top: (rect ? b.origin.y - rect.origin.y : b.origin.y) * scale,\n            width: b.size.width * scale,\n            height: b.size.height * scale,\n            background: color,\n            opacity: opacity,\n            pointerEvents: onClick ? 'auto' : 'none',\n            cursor: onClick ? 'pointer' : 'default',\n            zIndex: onClick ? 1 : undefined,\n            ...style,\n          }}\n          {...props}\n        />\n      ))}\n    </>\n  );\n}\n","import { Rect } from '@embedpdf/models';\n\nimport { useEffect, useState } from '@framework';\nimport { useRedactionCapability } from '../hooks';\nimport { Highlight } from './highlight';\n\ninterface SelectionRedactProps {\n  pageIndex: number;\n  scale: number;\n}\n\nexport function SelectionRedact({ pageIndex, scale }: SelectionRedactProps) {\n  const { provides: redactionProvides } = useRedactionCapability();\n  const [rects, setRects] = useState<Array<Rect>>([]);\n  const [boundingRect, setBoundingRect] = useState<Rect | null>(null);\n\n  useEffect(() => {\n    if (!redactionProvides) return;\n\n    return redactionProvides.onRedactionSelectionChange((formattedSelection) => {\n      const selection = formattedSelection.find((s) => s.pageIndex === pageIndex);\n      setRects(selection?.segmentRects ?? []);\n      setBoundingRect(selection?.rect ?? null);\n    });\n  }, [redactionProvides, pageIndex]);\n\n  if (!boundingRect) return null;\n\n  return (\n    <div\n      style={{\n        mixBlendMode: 'normal',\n        pointerEvents: 'none',\n        position: 'absolute',\n        inset: 0,\n      }}\n    >\n      <Highlight\n        color={'transparent'}\n        opacity={1}\n        rects={rects}\n        scale={scale}\n        border=\"1px solid red\"\n      />\n    </div>\n  );\n}\n","import { Fragment, useEffect, useState, useCallback, MouseEvent, TouchEvent } from '@framework';\nimport { CounterRotate } from '@embedpdf/core/@framework';\nimport { useRedactionCapability } from '../hooks';\nimport { RedactionItem } from '@embedpdf/plugin-redaction';\nimport { Highlight } from './highlight';\nimport { SelectionMenuProps } from './types';\nimport { Rotation } from '@embedpdf/models';\n\ninterface PendingRedactionsProps {\n  pageIndex: number;\n  scale: number;\n  rotation: Rotation;\n  bboxStroke?: string;\n  selectionMenu?: (props: SelectionMenuProps) => JSX.Element;\n}\n\nexport function PendingRedactions({\n  pageIndex,\n  scale,\n  bboxStroke = 'rgba(0,0,0,0.8)',\n  rotation = Rotation.Degree0,\n  selectionMenu,\n}: PendingRedactionsProps) {\n  const { provides: redaction } = useRedactionCapability();\n  const [items, setItems] = useState<RedactionItem[]>([]);\n  const [selectedId, setSelectedId] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (!redaction) return;\n    const off1 = redaction.onPendingChange((map) => setItems(map[pageIndex] ?? []));\n    const off2 = redaction.onSelectionChange((sel) => {\n      setSelectedId(sel && sel.page === pageIndex ? sel.id : null);\n    });\n    return () => {\n      off1?.();\n      off2?.();\n    };\n  }, [redaction, pageIndex]);\n\n  if (!items.length) return null;\n\n  const select = useCallback(\n    (e: MouseEvent | TouchEvent, id: string) => {\n      e.stopPropagation();\n      if (!redaction) return;\n      redaction.selectPending(pageIndex, id);\n    },\n    [redaction, pageIndex],\n  );\n\n  return (\n    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>\n      {items.map((it) => {\n        if (it.kind === 'area') {\n          const r = it.rect;\n          return (\n            <Fragment key={it.id}>\n              <div\n                style={{\n                  position: 'absolute',\n                  left: r.origin.x * scale,\n                  top: r.origin.y * scale,\n                  width: r.size.width * scale,\n                  height: r.size.height * scale,\n                  background: 'transparent',\n                  outline: selectedId === it.id ? `1px solid ${bboxStroke}` : 'none',\n                  outlineOffset: '2px',\n                  border: `1px solid red`,\n                  pointerEvents: 'auto',\n                  cursor: 'pointer',\n                }}\n                onPointerDown={(e) => select(e, it.id)}\n                onTouchStart={(e) => select(e, it.id)}\n              />\n              <CounterRotate\n                rect={{\n                  origin: { x: r.origin.x * scale, y: r.origin.y * scale },\n                  size: { width: r.size.width * scale, height: r.size.height * scale },\n                }}\n                rotation={rotation}\n              >\n                {({ rect, menuWrapperProps }) =>\n                  selectionMenu &&\n                  selectionMenu({\n                    item: it,\n                    selected: selectedId === it.id,\n                    pageIndex,\n                    menuWrapperProps,\n                    rect,\n                  })\n                }\n              </CounterRotate>\n            </Fragment>\n          );\n        }\n        // kind === 'text' → draw bounding box; inner rects are not drawn here to avoid clutter.\n        const b = it.boundingRect;\n        return (\n          <Fragment key={it.id}>\n            <div\n              style={{\n                position: 'absolute',\n                left: b.origin.x * scale,\n                top: b.origin.y * scale,\n                width: b.size.width * scale,\n                height: b.size.height * scale,\n                background: 'transparent',\n                outline: selectedId === it.id ? `1px solid ${bboxStroke}` : 'none',\n                outlineOffset: '2px',\n                pointerEvents: 'auto',\n                cursor: selectedId === it.id ? 'pointer' : 'default',\n              }}\n            >\n              <Highlight\n                rect={b}\n                rects={it.rects}\n                color=\"transparent\"\n                border=\"1px solid red\"\n                scale={scale}\n                onClick={(e) => select(e, it.id)}\n              />\n            </div>\n            <CounterRotate\n              rect={{\n                origin: { x: b.origin.x * scale, y: b.origin.y * scale },\n                size: { width: b.size.width * scale, height: b.size.height * scale },\n              }}\n              rotation={rotation}\n            >\n              {({ rect, menuWrapperProps }) =>\n                selectionMenu &&\n                selectionMenu({\n                  item: it,\n                  selected: selectedId === it.id,\n                  pageIndex,\n                  menuWrapperProps,\n                  rect,\n                })\n              }\n            </CounterRotate>\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n}\n","import { Fragment } from '@framework';\nimport { MarqueeRedact } from './marquee-redact';\nimport { SelectionRedact } from './selection-redact';\nimport { PendingRedactions } from './pending-redactions';\nimport { Rotation } from '@embedpdf/models';\nimport { SelectionMenuProps } from './types';\n\ninterface RedactionLayerProps {\n  pageIndex: number;\n  scale: number;\n  rotation: Rotation;\n  selectionMenu?: (props: SelectionMenuProps) => JSX.Element;\n}\n\nexport const RedactionLayer = ({\n  pageIndex,\n  scale,\n  rotation = Rotation.Degree0,\n  selectionMenu,\n}: RedactionLayerProps) => {\n  return (\n    <Fragment>\n      <PendingRedactions\n        pageIndex={pageIndex}\n        scale={scale}\n        rotation={rotation}\n        selectionMenu={selectionMenu}\n      />\n      <MarqueeRedact pageIndex={pageIndex} scale={scale} />\n      <SelectionRedact pageIndex={pageIndex} scale={scale} />\n    </Fragment>\n  );\n};\n"],"names":["Fragment"],"mappings":";;;;;;AAGO,MAAM,qBAAqB,MAAM,UAA2B,gBAAgB,EAAE;AAC9E,MAAM,yBAAyB,MAAM,cAA+B,gBAAgB,EAAE;ACatF,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,OAAO;AACT,MAA0B;AACxB,QAAM,EAAE,QAAQ,gBAAgB,IAAI,mBAAmB;AAEvD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAsB,IAAI;AAElD,YAAU,MAAM;AACd,QAAI,CAAC,gBAAiB;AACtB,WAAO,gBAAgB,sBAAsB;AAAA,MAC3C;AAAA,MACA;AAAA,MACA,UAAU;AAAA,QACR,WAAW;AAAA,MAAA;AAAA,IACb,CACD;AAAA,EAAA,GACA,CAAC,iBAAiB,SAAS,CAAC;AAE3B,MAAA,CAAC,KAAa,QAAA;AAGhB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU;AAAA,QACV,eAAe;AAAA,QACf,MAAM,KAAK,OAAO,IAAI;AAAA,QACtB,KAAK,KAAK,OAAO,IAAI;AAAA,QACrB,OAAO,KAAK,KAAK,QAAQ;AAAA,QACzB,QAAQ,KAAK,KAAK,SAAS;AAAA,QAC3B,QAAQ,aAAa,MAAM;AAAA,QAC3B,YAAY;AAAA,QACZ,WAAW;AAAA,MACb;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;AC3CO,SAAS,UAAU;AAAA,EACxB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,SAEK,oBAAA,UAAA,EAAA,UAAA,MAAM,IAAI,CAAC,GAAG,MACb;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,eAAe;AAAA,MACf,cAAc;AAAA,MACd,OAAO;AAAA,QACL,UAAU;AAAA,QACV;AAAA,QACA,OAAO,OAAO,EAAE,OAAO,IAAI,KAAK,OAAO,IAAI,EAAE,OAAO,KAAK;AAAA,QACzD,MAAM,OAAO,EAAE,OAAO,IAAI,KAAK,OAAO,IAAI,EAAE,OAAO,KAAK;AAAA,QACxD,OAAO,EAAE,KAAK,QAAQ;AAAA,QACtB,QAAQ,EAAE,KAAK,SAAS;AAAA,QACxB,YAAY;AAAA,QACZ;AAAA,QACA,eAAe,UAAU,SAAS;AAAA,QAClC,QAAQ,UAAU,YAAY;AAAA,QAC9B,QAAQ,UAAU,IAAI;AAAA,QACtB,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,IAjBC;AAAA,EAmBR,CAAA,GACH;AAEJ;ACxCO,SAAS,gBAAgB,EAAE,WAAW,SAA+B;AAC1E,QAAM,EAAE,UAAU,kBAAkB,IAAI,uBAAuB;AAC/D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,CAAA,CAAE;AAClD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAsB,IAAI;AAElE,YAAU,MAAM;AACd,QAAI,CAAC,kBAAmB;AAEjB,WAAA,kBAAkB,2BAA2B,CAAC,uBAAuB;AAC1E,YAAM,YAAY,mBAAmB,KAAK,CAAC,MAAM,EAAE,cAAc,SAAS;AACjE,gBAAA,uCAAW,iBAAgB,EAAE;AACtB,uBAAA,uCAAW,SAAQ,IAAI;AAAA,IAAA,CACxC;AAAA,EAAA,GACA,CAAC,mBAAmB,SAAS,CAAC;AAE7B,MAAA,CAAC,aAAqB,QAAA;AAGxB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,cAAc;AAAA,QACd,eAAe;AAAA,QACf,UAAU;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,UACP,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UACA,QAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IACT;AAAA,EACF;AAEJ;AC9BO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,WAAW,SAAS;AAAA,EACpB;AACF,GAA2B;AACzB,QAAM,EAAE,UAAU,UAAU,IAAI,uBAAuB;AACvD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA0B,CAAA,CAAE;AACtD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAwB,IAAI;AAEhE,YAAU,MAAM;AACd,QAAI,CAAC,UAAW;AACV,UAAA,OAAO,UAAU,gBAAgB,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK,CAAA,CAAE,CAAC;AAC9E,UAAM,OAAO,UAAU,kBAAkB,CAAC,QAAQ;AAChD,oBAAc,OAAO,IAAI,SAAS,YAAY,IAAI,KAAK,IAAI;AAAA,IAAA,CAC5D;AACD,WAAO,MAAM;AACJ;AACA;AAAA,IACT;AAAA,EAAA,GACC,CAAC,WAAW,SAAS,CAAC;AAErB,MAAA,CAAC,MAAM,OAAe,QAAA;AAE1B,QAAM,SAAS;AAAA,IACb,CAAC,GAA4B,OAAe;AAC1C,QAAE,gBAAgB;AAClB,UAAI,CAAC,UAAW;AACN,gBAAA,cAAc,WAAW,EAAE;AAAA,IACvC;AAAA,IACA,CAAC,WAAW,SAAS;AAAA,EACvB;AAEA,SACG,oBAAA,OAAA,EAAI,OAAO,EAAE,UAAU,YAAY,OAAO,GAAG,eAAe,OAAO,GACjE,UAAM,MAAA,IAAI,CAAC,OAAO;AACb,QAAA,GAAG,SAAS,QAAQ;AACtB,YAAM,IAAI,GAAG;AACb,kCACGA,YACC,EAAA,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,MAAM,EAAE,OAAO,IAAI;AAAA,cACnB,KAAK,EAAE,OAAO,IAAI;AAAA,cAClB,OAAO,EAAE,KAAK,QAAQ;AAAA,cACtB,QAAQ,EAAE,KAAK,SAAS;AAAA,cACxB,YAAY;AAAA,cACZ,SAAS,eAAe,GAAG,KAAK,aAAa,UAAU,KAAK;AAAA,cAC5D,eAAe;AAAA,cACf,QAAQ;AAAA,cACR,eAAe;AAAA,cACf,QAAQ;AAAA,YACV;AAAA,YACA,eAAe,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE;AAAA,YACrC,cAAc,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE;AAAA,UAAA;AAAA,QACtC;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,cACJ,QAAQ,EAAE,GAAG,EAAE,OAAO,IAAI,OAAO,GAAG,EAAE,OAAO,IAAI,MAAM;AAAA,cACvD,MAAM,EAAE,OAAO,EAAE,KAAK,QAAQ,OAAO,QAAQ,EAAE,KAAK,SAAS,MAAM;AAAA,YACrE;AAAA,YACA;AAAA,YAEC,WAAC,EAAE,MAAM,iBAAiB,MACzB,iBACA,cAAc;AAAA,cACZ,MAAM;AAAA,cACN,UAAU,eAAe,GAAG;AAAA,cAC5B;AAAA,cACA;AAAA,cACA;AAAA,YACD,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAEL,EAAA,GAnCa,GAAG,EAoClB;AAAA,IAAA;AAIJ,UAAM,IAAI,GAAG;AACb,gCACGA,YACC,EAAA,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,YACL,UAAU;AAAA,YACV,MAAM,EAAE,OAAO,IAAI;AAAA,YACnB,KAAK,EAAE,OAAO,IAAI;AAAA,YAClB,OAAO,EAAE,KAAK,QAAQ;AAAA,YACtB,QAAQ,EAAE,KAAK,SAAS;AAAA,YACxB,YAAY;AAAA,YACZ,SAAS,eAAe,GAAG,KAAK,aAAa,UAAU,KAAK;AAAA,YAC5D,eAAe;AAAA,YACf,eAAe;AAAA,YACf,QAAQ,eAAe,GAAG,KAAK,YAAY;AAAA,UAC7C;AAAA,UAEA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN,OAAO,GAAG;AAAA,cACV,OAAM;AAAA,cACN,QAAO;AAAA,cACP;AAAA,cACA,SAAS,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE;AAAA,YAAA;AAAA,UAAA;AAAA,QACjC;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,YACJ,QAAQ,EAAE,GAAG,EAAE,OAAO,IAAI,OAAO,GAAG,EAAE,OAAO,IAAI,MAAM;AAAA,YACvD,MAAM,EAAE,OAAO,EAAE,KAAK,QAAQ,OAAO,QAAQ,EAAE,KAAK,SAAS,MAAM;AAAA,UACrE;AAAA,UACA;AAAA,UAEC,WAAC,EAAE,MAAM,iBAAiB,MACzB,iBACA,cAAc;AAAA,YACZ,MAAM;AAAA,YACN,UAAU,eAAe,GAAG;AAAA,YAC5B;AAAA,YACA;AAAA,YACA;AAAA,UACD,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEL,EAAA,GAzCa,GAAG,EA0ClB;AAAA,EAEH,CAAA,GACH;AAEJ;ACnIO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,WAAW,SAAS;AAAA,EACpB;AACF,MAA2B;AACzB,8BACGA,YACC,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,IACA,oBAAC,eAAc,EAAA,WAAsB,MAAc,CAAA;AAAA,IACnD,oBAAC,iBAAgB,EAAA,WAAsB,MAAc,CAAA;AAAA,EAAA,GACvD;AAEJ;"}

package/dist/react/adapter.d.ts

@@ -0,0 +1,2 @@
+export { Fragment, useEffect, useRef, useState, useCallback, useMemo, TouchEvent, MouseEvent, PointerEvent, ChangeEvent, } from 'react';
+export type { ReactNode, HTMLAttributes, CSSProperties } from 'react';

package/dist/react/core.d.ts

@@ -0,0 +1 @@
+export * from '@embedpdf/core/react';

package/dist/react/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/react"),t=require("@embedpdf/plugin-redaction"),i=require("react/jsx-runtime"),n=require("react"),o=require("@embedpdf/models"),r=()=>e.usePlugin(t.RedactionPlugin.id),s=()=>e.useCapability(t.RedactionPlugin.id),a=({pageIndex:e,scale:t,className:o,stroke:s="red",fill:a="transparent"})=>{const{plugin:l}=r(),[d,c]=n.useState(null);return n.useEffect((()=>{if(l)return l.registerMarqueeOnPage({pageIndex:e,scale:t,callback:{onPreview:c}})}),[l,e]),d?i.jsx("div",{style:{position:"absolute",pointerEvents:"none",left:d.origin.x*t,top:d.origin.y*t,width:d.size.width*t,height:d.size.height*t,border:`1px solid ${s}`,background:a,boxSizing:"border-box"},className:o}):null};function l({color:e="#FFFF00",opacity:t=.5,border:n="1px solid red",rects:o,rect:r,scale:s,onClick:a,style:l,...d}){return i.jsx(i.Fragment,{children:o.map(((o,c)=>i.jsx("div",{onPointerDown:a,onTouchStart:a,style:{position:"absolute",border:n,left:(r?o.origin.x-r.origin.x:o.origin.x)*s,top:(r?o.origin.y-r.origin.y:o.origin.y)*s,width:o.size.width*s,height:o.size.height*s,background:e,opacity:t,pointerEvents:a?"auto":"none",cursor:a?"pointer":"default",zIndex:a?1:void 0,...l},...d},c)))})}function d({pageIndex:e,scale:t}){const{provides:o}=s(),[r,a]=n.useState([]),[d,c]=n.useState(null);return n.useEffect((()=>{if(o)return o.onRedactionSelectionChange((t=>{const i=t.find((t=>t.pageIndex===e));a((null==i?void 0:i.segmentRects)??[]),c((null==i?void 0:i.rect)??null)}))}),[o,e]),d?i.jsx("div",{style:{mixBlendMode:"normal",pointerEvents:"none",position:"absolute",inset:0},children:i.jsx(l,{color:"transparent",opacity:1,rects:r,scale:t,border:"1px solid red"})}):null}function c({pageIndex:t,scale:r,bboxStroke:a="rgba(0,0,0,0.8)",rotation:d=o.Rotation.Degree0,selectionMenu:c}){const{provides:u}=s(),[p,g]=n.useState([]),[x,h]=n.useState(null);if(n.useEffect((()=>{if(!u)return;const e=u.onPendingChange((e=>g(e[t]??[]))),i=u.onSelectionChange((e=>{h(e&&e.page===t?e.id:null)}));return()=>{null==e||e(),null==i||i()}}),[u,t]),!p.length)return null;const b=n.useCallback(((e,i)=>{e.stopPropagation(),u&&u.selectPending(t,i)}),[u,t]);return i.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:p.map((o=>{if("area"===o.kind){const s=o.rect;return i.jsxs(n.Fragment,{children:[i.jsx("div",{style:{position:"absolute",left:s.origin.x*r,top:s.origin.y*r,width:s.size.width*r,height:s.size.height*r,background:"transparent",outline:x===o.id?`1px solid ${a}`:"none",outlineOffset:"2px",border:"1px solid red",pointerEvents:"auto",cursor:"pointer"},onPointerDown:e=>b(e,o.id),onTouchStart:e=>b(e,o.id)}),i.jsx(e.CounterRotate,{rect:{origin:{x:s.origin.x*r,y:s.origin.y*r},size:{width:s.size.width*r,height:s.size.height*r}},rotation:d,children:({rect:e,menuWrapperProps:i})=>c&&c({item:o,selected:x===o.id,pageIndex:t,menuWrapperProps:i,rect:e})})]},o.id)}const s=o.boundingRect;return i.jsxs(n.Fragment,{children:[i.jsx("div",{style:{position:"absolute",left:s.origin.x*r,top:s.origin.y*r,width:s.size.width*r,height:s.size.height*r,background:"transparent",outline:x===o.id?`1px solid ${a}`:"none",outlineOffset:"2px",pointerEvents:"auto",cursor:x===o.id?"pointer":"default"},children:i.jsx(l,{rect:s,rects:o.rects,color:"transparent",border:"1px solid red",scale:r,onClick:e=>b(e,o.id)})}),i.jsx(e.CounterRotate,{rect:{origin:{x:s.origin.x*r,y:s.origin.y*r},size:{width:s.size.width*r,height:s.size.height*r}},rotation:d,children:({rect:e,menuWrapperProps:i})=>c&&c({item:o,selected:x===o.id,pageIndex:t,menuWrapperProps:i,rect:e})})]},o.id)}))})}exports.RedactionLayer=({pageIndex:e,scale:t,rotation:r=o.Rotation.Degree0,selectionMenu:s})=>i.jsxs(n.Fragment,{children:[i.jsx(c,{pageIndex:e,scale:t,rotation:r,selectionMenu:s}),i.jsx(a,{pageIndex:e,scale:t}),i.jsx(d,{pageIndex:e,scale:t})]}),exports.useRedactionCapability=s,exports.useRedactionPlugin=r;
+//# sourceMappingURL=index.cjs.map

package/dist/react/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-redaction.ts","../../src/shared/components/marquee-redact.tsx","../../src/shared/components/highlight.tsx","../../src/shared/components/selection-redact.tsx","../../src/shared/components/pending-redactions.tsx","../../src/shared/components/redaction-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { RedactionPlugin } from '@embedpdf/plugin-redaction';\n\nexport const useRedactionPlugin = () => usePlugin<RedactionPlugin>(RedactionPlugin.id);\nexport const useRedactionCapability = () => useCapability<RedactionPlugin>(RedactionPlugin.id);\n","import { useEffect, useState } from '@framework';\nimport { Rect } from '@embedpdf/models';\n\nimport { useRedactionPlugin } from '../hooks/use-redaction';\n\ninterface MarqueeRedactProps {\n  /** Index of the page this layer lives on */\n  pageIndex: number;\n  /** Scale of the page */\n  scale: number;\n  /** Optional CSS class applied to the marquee rectangle */\n  className?: string;\n  /** Stroke / fill colours (defaults below) */\n  stroke?: string;\n  fill?: string;\n}\n\nexport const MarqueeRedact = ({\n  pageIndex,\n  scale,\n  className,\n  stroke = 'red',\n  fill = 'transparent',\n}: MarqueeRedactProps) => {\n  const { plugin: redactionPlugin } = useRedactionPlugin();\n\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  useEffect(() => {\n    if (!redactionPlugin) return;\n    return redactionPlugin.registerMarqueeOnPage({\n      pageIndex,\n      scale,\n      callback: {\n        onPreview: setRect,\n      },\n    });\n  }, [redactionPlugin, pageIndex]);\n\n  if (!rect) return null;\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none',\n        left: rect.origin.x * scale,\n        top: rect.origin.y * scale,\n        width: rect.size.width * scale,\n        height: rect.size.height * scale,\n        border: `1px solid ${stroke}`,\n        background: fill,\n        boxSizing: 'border-box',\n      }}\n      className={className}\n    />\n  );\n};\n","import { HTMLAttributes, CSSProperties, MouseEvent, TouchEvent } from '@framework';\nimport { Rect } from '@embedpdf/models';\n\ntype HighlightProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  color?: string;\n  opacity?: number;\n  border?: string;\n  rects: Rect[];\n  rect?: Rect;\n  scale: number;\n  onClick?: (e: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void;\n  style?: CSSProperties;\n};\n\nexport function Highlight({\n  color = '#FFFF00',\n  opacity = 0.5,\n  border = '1px solid red',\n  rects,\n  rect,\n  scale,\n  onClick,\n  style,\n  ...props\n}: HighlightProps) {\n  return (\n    <>\n      {rects.map((b, i) => (\n        <div\n          key={i}\n          onPointerDown={onClick}\n          onTouchStart={onClick}\n          style={{\n            position: 'absolute',\n            border,\n            left: (rect ? b.origin.x - rect.origin.x : b.origin.x) * scale,\n            top: (rect ? b.origin.y - rect.origin.y : b.origin.y) * scale,\n            width: b.size.width * scale,\n            height: b.size.height * scale,\n            background: color,\n            opacity: opacity,\n            pointerEvents: onClick ? 'auto' : 'none',\n            cursor: onClick ? 'pointer' : 'default',\n            zIndex: onClick ? 1 : undefined,\n            ...style,\n          }}\n          {...props}\n        />\n      ))}\n    </>\n  );\n}\n","import { Rect } from '@embedpdf/models';\n\nimport { useEffect, useState } from '@framework';\nimport { useRedactionCapability } from '../hooks';\nimport { Highlight } from './highlight';\n\ninterface SelectionRedactProps {\n  pageIndex: number;\n  scale: number;\n}\n\nexport function SelectionRedact({ pageIndex, scale }: SelectionRedactProps) {\n  const { provides: redactionProvides } = useRedactionCapability();\n  const [rects, setRects] = useState<Array<Rect>>([]);\n  const [boundingRect, setBoundingRect] = useState<Rect | null>(null);\n\n  useEffect(() => {\n    if (!redactionProvides) return;\n\n    return redactionProvides.onRedactionSelectionChange((formattedSelection) => {\n      const selection = formattedSelection.find((s) => s.pageIndex === pageIndex);\n      setRects(selection?.segmentRects ?? []);\n      setBoundingRect(selection?.rect ?? null);\n    });\n  }, [redactionProvides, pageIndex]);\n\n  if (!boundingRect) return null;\n\n  return (\n    <div\n      style={{\n        mixBlendMode: 'normal',\n        pointerEvents: 'none',\n        position: 'absolute',\n        inset: 0,\n      }}\n    >\n      <Highlight\n        color={'transparent'}\n        opacity={1}\n        rects={rects}\n        scale={scale}\n        border=\"1px solid red\"\n      />\n    </div>\n  );\n}\n","import { Fragment, useEffect, useState, useCallback, MouseEvent, TouchEvent } from '@framework';\nimport { CounterRotate } from '@embedpdf/core/@framework';\nimport { useRedactionCapability } from '../hooks';\nimport { RedactionItem } from '@embedpdf/plugin-redaction';\nimport { Highlight } from './highlight';\nimport { SelectionMenuProps } from './types';\nimport { Rotation } from '@embedpdf/models';\n\ninterface PendingRedactionsProps {\n  pageIndex: number;\n  scale: number;\n  rotation: Rotation;\n  bboxStroke?: string;\n  selectionMenu?: (props: SelectionMenuProps) => JSX.Element;\n}\n\nexport function PendingRedactions({\n  pageIndex,\n  scale,\n  bboxStroke = 'rgba(0,0,0,0.8)',\n  rotation = Rotation.Degree0,\n  selectionMenu,\n}: PendingRedactionsProps) {\n  const { provides: redaction } = useRedactionCapability();\n  const [items, setItems] = useState<RedactionItem[]>([]);\n  const [selectedId, setSelectedId] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (!redaction) return;\n    const off1 = redaction.onPendingChange((map) => setItems(map[pageIndex] ?? []));\n    const off2 = redaction.onSelectionChange((sel) => {\n      setSelectedId(sel && sel.page === pageIndex ? sel.id : null);\n    });\n    return () => {\n      off1?.();\n      off2?.();\n    };\n  }, [redaction, pageIndex]);\n\n  if (!items.length) return null;\n\n  const select = useCallback(\n    (e: MouseEvent | TouchEvent, id: string) => {\n      e.stopPropagation();\n      if (!redaction) return;\n      redaction.selectPending(pageIndex, id);\n    },\n    [redaction, pageIndex],\n  );\n\n  return (\n    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>\n      {items.map((it) => {\n        if (it.kind === 'area') {\n          const r = it.rect;\n          return (\n            <Fragment key={it.id}>\n              <div\n                style={{\n                  position: 'absolute',\n                  left: r.origin.x * scale,\n                  top: r.origin.y * scale,\n                  width: r.size.width * scale,\n                  height: r.size.height * scale,\n                  background: 'transparent',\n                  outline: selectedId === it.id ? `1px solid ${bboxStroke}` : 'none',\n                  outlineOffset: '2px',\n                  border: `1px solid red`,\n                  pointerEvents: 'auto',\n                  cursor: 'pointer',\n                }}\n                onPointerDown={(e) => select(e, it.id)}\n                onTouchStart={(e) => select(e, it.id)}\n              />\n              <CounterRotate\n                rect={{\n                  origin: { x: r.origin.x * scale, y: r.origin.y * scale },\n                  size: { width: r.size.width * scale, height: r.size.height * scale },\n                }}\n                rotation={rotation}\n              >\n                {({ rect, menuWrapperProps }) =>\n                  selectionMenu &&\n                  selectionMenu({\n                    item: it,\n                    selected: selectedId === it.id,\n                    pageIndex,\n                    menuWrapperProps,\n                    rect,\n                  })\n                }\n              </CounterRotate>\n            </Fragment>\n          );\n        }\n        // kind === 'text' → draw bounding box; inner rects are not drawn here to avoid clutter.\n        const b = it.boundingRect;\n        return (\n          <Fragment key={it.id}>\n            <div\n              style={{\n                position: 'absolute',\n                left: b.origin.x * scale,\n                top: b.origin.y * scale,\n                width: b.size.width * scale,\n                height: b.size.height * scale,\n                background: 'transparent',\n                outline: selectedId === it.id ? `1px solid ${bboxStroke}` : 'none',\n                outlineOffset: '2px',\n                pointerEvents: 'auto',\n                cursor: selectedId === it.id ? 'pointer' : 'default',\n              }}\n            >\n              <Highlight\n                rect={b}\n                rects={it.rects}\n                color=\"transparent\"\n                border=\"1px solid red\"\n                scale={scale}\n                onClick={(e) => select(e, it.id)}\n              />\n            </div>\n            <CounterRotate\n              rect={{\n                origin: { x: b.origin.x * scale, y: b.origin.y * scale },\n                size: { width: b.size.width * scale, height: b.size.height * scale },\n              }}\n              rotation={rotation}\n            >\n              {({ rect, menuWrapperProps }) =>\n                selectionMenu &&\n                selectionMenu({\n                  item: it,\n                  selected: selectedId === it.id,\n                  pageIndex,\n                  menuWrapperProps,\n                  rect,\n                })\n              }\n            </CounterRotate>\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n}\n","import { Fragment } from '@framework';\nimport { MarqueeRedact } from './marquee-redact';\nimport { SelectionRedact } from './selection-redact';\nimport { PendingRedactions } from './pending-redactions';\nimport { Rotation } from '@embedpdf/models';\nimport { SelectionMenuProps } from './types';\n\ninterface RedactionLayerProps {\n  pageIndex: number;\n  scale: number;\n  rotation: Rotation;\n  selectionMenu?: (props: SelectionMenuProps) => JSX.Element;\n}\n\nexport const RedactionLayer = ({\n  pageIndex,\n  scale,\n  rotation = Rotation.Degree0,\n  selectionMenu,\n}: RedactionLayerProps) => {\n  return (\n    <Fragment>\n      <PendingRedactions\n        pageIndex={pageIndex}\n        scale={scale}\n        rotation={rotation}\n        selectionMenu={selectionMenu}\n      />\n      <MarqueeRedact pageIndex={pageIndex} scale={scale} />\n      <SelectionRedact pageIndex={pageIndex} scale={scale} />\n    </Fragment>\n  );\n};\n"],"names":["useRedactionPlugin","usePlugin","RedactionPlugin","id","useRedactionCapability","useCapability","MarqueeRedact","pageIndex","scale","className","stroke","fill","plugin","redactionPlugin","rect","setRect","useState","useEffect","registerMarqueeOnPage","callback","onPreview","jsxRuntime","jsx","style","position","pointerEvents","left","origin","x","top","y","width","size","height","border","background","boxSizing","Highlight","color","opacity","rects","onClick","props","Fragment","children","map","b","i","onPointerDown","onTouchStart","cursor","zIndex","SelectionRedact","provides","redactionProvides","setRects","boundingRect","setBoundingRect","onRedactionSelectionChange","formattedSelection","selection","find","s","segmentRects","mixBlendMode","inset","PendingRedactions","bboxStroke","rotation","Rotation","Degree0","selectionMenu","redaction","items","setItems","selectedId","setSelectedId","off1","onPendingChange","off2","onSelectionChange","sel","page","length","select","useCallback","e","stopPropagation","selectPending","it","kind","r","outline","outlineOffset","CounterRotate","menuWrapperProps","item","selected"],"mappings":"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"}

package/dist/react/index.d.ts

@@ -0,0 +1 @@
+export * from '../shared-react';