@embedpdf/plugin-search 1.3.14 → 1.3.15

package/dist/preact/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/preact"),t=require("@embedpdf/plugin-search");require("preact");const r=require("preact/hooks"),i=require("preact/jsx-runtime"),s=()=>e.useCapability(t.SearchPlugin.id);exports.SearchLayer=function({pageIndex:e,scale:t,style:o,highlightColor:a="#FFFF00",activeHighlightColor:l="#FFBF00",...n}){const{provides:u}=s(),[c,p]=r.useState(null);if(r.useEffect((()=>null==u?void 0:u.onSearchResultStateChange((e=>{p(e)}))),[u]),!c)return null;const d=c.results.map(((e,t)=>({result:e,originalIndex:t}))).filter((({result:t})=>t.pageIndex===e));return i.jsx("div",{style:{...o},...n,children:d.map((({result:e,originalIndex:r})=>e.rects.map((e=>i.jsx("div",{style:{position:"absolute",top:e.origin.y*t,left:e.origin.x*t,width:e.size.width*t,height:e.size.height*t,backgroundColor:r===c.activeResultIndex?l:a,mixBlendMode:"multiply",transform:"scale(1.02)",transformOrigin:"center",transition:"opacity .3s ease-in-out",opacity:1}})))))})},exports.useSearch=()=>{const{provides:e}=s(),[t,i]=r.useState({flags:[],results:[],total:0,activeResultIndex:0,showAllResults:!0,query:"",loading:!1,active:!1});return r.useEffect((()=>null==e?void 0:e.onStateChange((e=>i(e)))),[e]),{state:t,provides:e}},exports.useSearchCapability=s,exports.useSearchPlugin=()=>e.usePlugin(t.SearchPlugin.id),Object.keys(t).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})}));
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/preact"),t=require("@embedpdf/plugin-search");require("preact");const r=require("preact/hooks"),i=require("preact/jsx-runtime"),s=()=>e.useCapability(t.SearchPlugin.id);exports.SearchLayer=function({pageIndex:e,scale:t,style:o,highlightColor:a="#FFFF00",activeHighlightColor:l="#FFBF00",...n}){const{provides:u}=s(),[c,p]=r.useState(null);if(r.useEffect((()=>null==u?void 0:u.onSearchResultStateChange((e=>{p(e)}))),[u]),!c)return null;const d=c.results.map(((e,t)=>({result:e,originalIndex:t}))).filter((({result:t})=>t.pageIndex===e));return i.jsx("div",{style:{...o},...n,children:d.map((({result:e,originalIndex:r})=>e.rects.map(((e,s)=>i.jsx("div",{style:{position:"absolute",top:e.origin.y*t,left:e.origin.x*t,width:e.size.width*t,height:e.size.height*t,backgroundColor:r===c.activeResultIndex?l:a,mixBlendMode:"multiply",transform:"scale(1.02)",transformOrigin:"center",transition:"opacity .3s ease-in-out",opacity:1}},`${r}-${s}`)))))})},exports.useSearch=()=>{const{provides:e}=s(),[t,i]=r.useState({flags:[],results:[],total:0,activeResultIndex:0,showAllResults:!0,query:"",loading:!1,active:!1});return r.useEffect((()=>null==e?void 0:e.onStateChange((e=>i(e)))),[e]),{state:t,provides:e}},exports.useSearchCapability=s,exports.useSearchPlugin=()=>e.usePlugin(t.SearchPlugin.id),Object.keys(t).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})}));
 //# sourceMappingURL=index.cjs.map

package/dist/preact/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-search.ts","../../src/shared/components/search-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { SearchPlugin, SearchState } from '@embedpdf/plugin-search';\nimport { useEffect, useState } from '@framework';\n\nexport const useSearchPlugin = () => usePlugin<SearchPlugin>(SearchPlugin.id);\nexport const useSearchCapability = () => useCapability<SearchPlugin>(SearchPlugin.id);\n\nexport const useSearch = () => {\n  const { provides } = useSearchCapability();\n  const [searchState, setSearchState] = useState<SearchState>({\n    flags: [],\n    results: [],\n    total: 0,\n    activeResultIndex: 0,\n    showAllResults: true,\n    query: '',\n    loading: false,\n    active: false,\n  });\n\n  useEffect(() => {\n    return provides?.onStateChange((state) => setSearchState(state));\n  }, [provides]);\n\n  return {\n    state: searchState,\n    provides,\n  };\n};\n","import { useEffect, useState, HTMLAttributes, CSSProperties } from '@framework';\nimport { SearchResultState } from '@embedpdf/plugin-search';\n\nimport { useSearchCapability } from '../hooks';\n\ntype SearchLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  pageIndex: number;\n  scale: number;\n  highlightColor?: string;\n  activeHighlightColor?: string;\n  style?: CSSProperties;\n};\n\nexport function SearchLayer({\n  pageIndex,\n  scale,\n  style,\n  highlightColor = '#FFFF00',\n  activeHighlightColor = '#FFBF00',\n  ...props\n}: SearchLayoutProps) {\n  const { provides: searchProvides } = useSearchCapability();\n  const [searchResultState, setSearchResultState] = useState<SearchResultState | null>(null);\n\n  useEffect(() => {\n    return searchProvides?.onSearchResultStateChange((state) => {\n      setSearchResultState(state);\n    });\n  }, [searchProvides]);\n\n  if (!searchResultState) {\n    return null;\n  }\n\n  // Filter results for current page while preserving original indices\n  const pageResults = searchResultState.results\n    .map((result, originalIndex) => ({ result, originalIndex }))\n    .filter(({ result }) => result.pageIndex === pageIndex);\n\n  return (\n    <div\n      style={{\n        ...style,\n      }}\n      {...props}\n    >\n      {pageResults.map(({ result, originalIndex }) =>\n        result.rects.map((rect) => (\n          <div\n            style={{\n              position: 'absolute',\n              top: rect.origin.y * scale,\n              left: rect.origin.x * scale,\n              width: rect.size.width * scale,\n              height: rect.size.height * scale,\n              backgroundColor:\n                originalIndex === searchResultState.activeResultIndex\n                  ? activeHighlightColor\n                  : highlightColor,\n              mixBlendMode: 'multiply',\n              transform: 'scale(1.02)',\n              transformOrigin: 'center',\n              transition: 'opacity .3s ease-in-out',\n              opacity: 1,\n            }}\n          ></div>\n        )),\n      )}\n    </div>\n  );\n}\n"],"names":["useSearchCapability","useCapability","SearchPlugin","id","pageIndex","scale","style","highlightColor","activeHighlightColor","props","provides","searchProvides","searchResultState","setSearchResultState","useState","useEffect","onSearchResultStateChange","state","pageResults","results","map","result","originalIndex","filter","jsxRuntime","jsx","children","rects","rect","position","top","origin","y","left","x","width","size","height","backgroundColor","activeResultIndex","mixBlendMode","transform","transformOrigin","transition","opacity","searchState","setSearchState","flags","total","showAllResults","query","loading","active","onStateChange","usePlugin"],"mappings":"gPAKaA,EAAsB,IAAMC,gBAA4BC,EAAAA,aAAaC,wBCQ3E,UAAqBC,UAC1BA,EAAAC,MACAA,EAAAC,MACAA,EAAAC,eACAA,EAAiB,UAAAC,qBACjBA,EAAuB,aACpBC,IAEH,MAAQC,SAAUC,GAAmBX,KAC9BY,EAAmBC,GAAwBC,EAAAA,SAAmC,MAQrF,GANAC,EAAAA,WAAU,IACD,MAAAJ,OAAA,EAAAA,EAAgBK,2BAA2BC,IAChDJ,EAAqBI,EAAK,KAE3B,CAACN,KAECC,EACI,OAAA,KAIT,MAAMM,EAAcN,EAAkBO,QACnCC,KAAI,CAACC,EAAQC,MAAqBD,SAAQC,oBAC1CC,QAAO,EAAGF,YAAaA,EAAOjB,YAAcA,IAG7C,OAAAoB,EAAAC,IAAC,MAAA,CACCnB,MAAO,IACFA,MAEDG,EAEHiB,SAAYR,EAAAE,KAAI,EAAGC,SAAQC,mBAC1BD,EAAOM,MAAMP,KAAKQ,GAChBJ,EAAAC,IAAC,MAAA,CACCnB,MAAO,CACLuB,SAAU,WACVC,IAAKF,EAAKG,OAAOC,EAAI3B,EACrB4B,KAAML,EAAKG,OAAOG,EAAI7B,EACtB8B,MAAOP,EAAKQ,KAAKD,MAAQ9B,EACzBgC,OAAQT,EAAKQ,KAAKC,OAAShC,EAC3BiC,gBACEhB,IAAkBV,EAAkB2B,kBAChC/B,EACAD,EACNiC,aAAc,WACdC,UAAW,cACXC,gBAAiB,SACjBC,WAAY,0BACZC,QAAS,UAOvB,oBD/DyB,KACjB,MAAAlC,SAAEA,GAAaV,KACd6C,EAAaC,GAAkBhC,WAAsB,CAC1DiC,MAAO,GACP5B,QAAS,GACT6B,MAAO,EACPT,kBAAmB,EACnBU,gBAAgB,EAChBC,MAAO,GACPC,SAAS,EACTC,QAAQ,IAOH,OAJPrC,EAAAA,WAAU,IACS,MAAVL,OAAU,EAAAA,EAAA2C,eAAepC,GAAU6B,EAAe7B,MACxD,CAACP,IAEG,CACLO,MAAO4B,EACPnC,WACF,wDAvB6B,IAAM4C,YAAwBpD,EAAAA,aAAaC"}
+{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-search.ts","../../src/shared/components/search-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { SearchPlugin, SearchState } from '@embedpdf/plugin-search';\nimport { useEffect, useState } from '@framework';\n\nexport const useSearchPlugin = () => usePlugin<SearchPlugin>(SearchPlugin.id);\nexport const useSearchCapability = () => useCapability<SearchPlugin>(SearchPlugin.id);\n\nexport const useSearch = () => {\n  const { provides } = useSearchCapability();\n  const [searchState, setSearchState] = useState<SearchState>({\n    flags: [],\n    results: [],\n    total: 0,\n    activeResultIndex: 0,\n    showAllResults: true,\n    query: '',\n    loading: false,\n    active: false,\n  });\n\n  useEffect(() => {\n    return provides?.onStateChange((state) => setSearchState(state));\n  }, [provides]);\n\n  return {\n    state: searchState,\n    provides,\n  };\n};\n","import { useEffect, useState, HTMLAttributes, CSSProperties } from '@framework';\nimport { SearchResultState } from '@embedpdf/plugin-search';\n\nimport { useSearchCapability } from '../hooks';\n\ntype SearchLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  pageIndex: number;\n  scale: number;\n  highlightColor?: string;\n  activeHighlightColor?: string;\n  style?: CSSProperties;\n};\n\nexport function SearchLayer({\n  pageIndex,\n  scale,\n  style,\n  highlightColor = '#FFFF00',\n  activeHighlightColor = '#FFBF00',\n  ...props\n}: SearchLayoutProps) {\n  const { provides: searchProvides } = useSearchCapability();\n  const [searchResultState, setSearchResultState] = useState<SearchResultState | null>(null);\n\n  useEffect(() => {\n    return searchProvides?.onSearchResultStateChange((state) => {\n      setSearchResultState(state);\n    });\n  }, [searchProvides]);\n\n  if (!searchResultState) {\n    return null;\n  }\n\n  // Filter results for current page while preserving original indices\n  const pageResults = searchResultState.results\n    .map((result, originalIndex) => ({ result, originalIndex }))\n    .filter(({ result }) => result.pageIndex === pageIndex);\n\n  return (\n    <div\n      style={{\n        ...style,\n      }}\n      {...props}\n    >\n      {pageResults.map(({ result, originalIndex }) =>\n        result.rects.map((rect, rectIndex) => (\n          <div\n            key={`${originalIndex}-${rectIndex}`}\n            style={{\n              position: 'absolute',\n              top: rect.origin.y * scale,\n              left: rect.origin.x * scale,\n              width: rect.size.width * scale,\n              height: rect.size.height * scale,\n              backgroundColor:\n                originalIndex === searchResultState.activeResultIndex\n                  ? activeHighlightColor\n                  : highlightColor,\n              mixBlendMode: 'multiply',\n              transform: 'scale(1.02)',\n              transformOrigin: 'center',\n              transition: 'opacity .3s ease-in-out',\n              opacity: 1,\n            }}\n          ></div>\n        )),\n      )}\n    </div>\n  );\n}\n"],"names":["useSearchCapability","useCapability","SearchPlugin","id","pageIndex","scale","style","highlightColor","activeHighlightColor","props","provides","searchProvides","searchResultState","setSearchResultState","useState","useEffect","onSearchResultStateChange","state","pageResults","results","map","result","originalIndex","filter","jsxRuntime","jsx","children","rects","rect","rectIndex","position","top","origin","y","left","x","width","size","height","backgroundColor","activeResultIndex","mixBlendMode","transform","transformOrigin","transition","opacity","searchState","setSearchState","flags","total","showAllResults","query","loading","active","onStateChange","usePlugin"],"mappings":"gPAKaA,EAAsB,IAAMC,gBAA4BC,EAAAA,aAAaC,wBCQ3E,UAAqBC,UAC1BA,EAAAC,MACAA,EAAAC,MACAA,EAAAC,eACAA,EAAiB,UAAAC,qBACjBA,EAAuB,aACpBC,IAEH,MAAQC,SAAUC,GAAmBX,KAC9BY,EAAmBC,GAAwBC,EAAAA,SAAmC,MAQrF,GANAC,EAAAA,WAAU,IACD,MAAAJ,OAAA,EAAAA,EAAgBK,2BAA2BC,IAChDJ,EAAqBI,EAAK,KAE3B,CAACN,KAECC,EACI,OAAA,KAIT,MAAMM,EAAcN,EAAkBO,QACnCC,KAAI,CAACC,EAAQC,MAAqBD,SAAQC,oBAC1CC,QAAO,EAAGF,YAAaA,EAAOjB,YAAcA,IAG7C,OAAAoB,EAAAC,IAAC,MAAA,CACCnB,MAAO,IACFA,MAEDG,EAEHiB,SAAYR,EAAAE,KAAI,EAAGC,SAAQC,mBAC1BD,EAAOM,MAAMP,KAAI,CAACQ,EAAMC,IACtBL,EAAAC,IAAC,MAAA,CAECnB,MAAO,CACLwB,SAAU,WACVC,IAAKH,EAAKI,OAAOC,EAAI5B,EACrB6B,KAAMN,EAAKI,OAAOG,EAAI9B,EACtB+B,MAAOR,EAAKS,KAAKD,MAAQ/B,EACzBiC,OAAQV,EAAKS,KAAKC,OAASjC,EAC3BkC,gBACEjB,IAAkBV,EAAkB4B,kBAChChC,EACAD,EACNkC,aAAc,WACdC,UAAW,cACXC,gBAAiB,SACjBC,WAAY,0BACZC,QAAS,IAfN,GAAGvB,KAAiBO,UAsBrC,oBDhEyB,KACjB,MAAAnB,SAAEA,GAAaV,KACd8C,EAAaC,GAAkBjC,WAAsB,CAC1DkC,MAAO,GACP7B,QAAS,GACT8B,MAAO,EACPT,kBAAmB,EACnBU,gBAAgB,EAChBC,MAAO,GACPC,SAAS,EACTC,QAAQ,IAOH,OAJPtC,EAAAA,WAAU,IACS,MAAVL,OAAU,EAAAA,EAAA4C,eAAerC,GAAU8B,EAAe9B,MACxD,CAACP,IAEG,CACLO,MAAO6B,EACPpC,WACF,wDAvB6B,IAAM6C,YAAwBrD,EAAAA,aAAaC"}

package/dist/preact/index.js

@@ -53,7 +53,7 @@ function SearchLayer({
       },
       ...props,
       children: pageResults.map(
-        ({ result, originalIndex }) => result.rects.map((rect) => /* @__PURE__ */ jsx(
+        ({ result, originalIndex }) => result.rects.map((rect, rectIndex) => /* @__PURE__ */ jsx(
           "div",
           {
             style: {
@@ -69,7 +69,8 @@ function SearchLayer({
               transition: "opacity .3s ease-in-out",
               opacity: 1
             }
-          }
+          },
+          `${originalIndex}-${rectIndex}`
         ))
       )
     }

package/dist/preact/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-search.ts","../../src/shared/components/search-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { SearchPlugin, SearchState } from '@embedpdf/plugin-search';\nimport { useEffect, useState } from '@framework';\n\nexport const useSearchPlugin = () => usePlugin<SearchPlugin>(SearchPlugin.id);\nexport const useSearchCapability = () => useCapability<SearchPlugin>(SearchPlugin.id);\n\nexport const useSearch = () => {\n  const { provides } = useSearchCapability();\n  const [searchState, setSearchState] = useState<SearchState>({\n    flags: [],\n    results: [],\n    total: 0,\n    activeResultIndex: 0,\n    showAllResults: true,\n    query: '',\n    loading: false,\n    active: false,\n  });\n\n  useEffect(() => {\n    return provides?.onStateChange((state) => setSearchState(state));\n  }, [provides]);\n\n  return {\n    state: searchState,\n    provides,\n  };\n};\n","import { useEffect, useState, HTMLAttributes, CSSProperties } from '@framework';\nimport { SearchResultState } from '@embedpdf/plugin-search';\n\nimport { useSearchCapability } from '../hooks';\n\ntype SearchLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  pageIndex: number;\n  scale: number;\n  highlightColor?: string;\n  activeHighlightColor?: string;\n  style?: CSSProperties;\n};\n\nexport function SearchLayer({\n  pageIndex,\n  scale,\n  style,\n  highlightColor = '#FFFF00',\n  activeHighlightColor = '#FFBF00',\n  ...props\n}: SearchLayoutProps) {\n  const { provides: searchProvides } = useSearchCapability();\n  const [searchResultState, setSearchResultState] = useState<SearchResultState | null>(null);\n\n  useEffect(() => {\n    return searchProvides?.onSearchResultStateChange((state) => {\n      setSearchResultState(state);\n    });\n  }, [searchProvides]);\n\n  if (!searchResultState) {\n    return null;\n  }\n\n  // Filter results for current page while preserving original indices\n  const pageResults = searchResultState.results\n    .map((result, originalIndex) => ({ result, originalIndex }))\n    .filter(({ result }) => result.pageIndex === pageIndex);\n\n  return (\n    <div\n      style={{\n        ...style,\n      }}\n      {...props}\n    >\n      {pageResults.map(({ result, originalIndex }) =>\n        result.rects.map((rect) => (\n          <div\n            style={{\n              position: 'absolute',\n              top: rect.origin.y * scale,\n              left: rect.origin.x * scale,\n              width: rect.size.width * scale,\n              height: rect.size.height * scale,\n              backgroundColor:\n                originalIndex === searchResultState.activeResultIndex\n                  ? activeHighlightColor\n                  : highlightColor,\n              mixBlendMode: 'multiply',\n              transform: 'scale(1.02)',\n              transformOrigin: 'center',\n              transition: 'opacity .3s ease-in-out',\n              opacity: 1,\n            }}\n          ></div>\n        )),\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAIO,MAAM,kBAAkB,MAAM,UAAwB,aAAa,EAAE;AACrE,MAAM,sBAAsB,MAAM,cAA4B,aAAa,EAAE;AAE7E,MAAM,YAAY,MAAM;AACvB,QAAA,EAAE,SAAS,IAAI,oBAAoB;AACzC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAsB;AAAA,IAC1D,OAAO,CAAC;AAAA,IACR,SAAS,CAAC;AAAA,IACV,OAAO;AAAA,IACP,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,EAAA,CACT;AAED,YAAU,MAAM;AACd,WAAO,qCAAU,cAAc,CAAC,UAAU,eAAe,KAAK;AAAA,EAAC,GAC9D,CAAC,QAAQ,CAAC;AAEN,SAAA;AAAA,IACL,OAAO;AAAA,IACP;AAAA,EACF;AACF;ACfO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,GAAG;AACL,GAAsB;AACpB,QAAM,EAAE,UAAU,eAAe,IAAI,oBAAoB;AACzD,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAmC,IAAI;AAEzF,YAAU,MAAM;AACP,WAAA,iDAAgB,0BAA0B,CAAC,UAAU;AAC1D,2BAAqB,KAAK;AAAA,IAAA;AAAA,EAC3B,GACA,CAAC,cAAc,CAAC;AAEnB,MAAI,CAAC,mBAAmB;AACf,WAAA;AAAA,EAAA;AAIT,QAAM,cAAc,kBAAkB,QACnC,IAAI,CAAC,QAAQ,mBAAmB,EAAE,QAAQ,gBAAgB,EAC1D,OAAO,CAAC,EAAE,aAAa,OAAO,cAAc,SAAS;AAGtD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH,UAAY,YAAA;AAAA,QAAI,CAAC,EAAE,QAAQ,oBAC1B,OAAO,MAAM,IAAI,CAAC,SAChB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,KAAK,KAAK,OAAO,IAAI;AAAA,cACrB,MAAM,KAAK,OAAO,IAAI;AAAA,cACtB,OAAO,KAAK,KAAK,QAAQ;AAAA,cACzB,QAAQ,KAAK,KAAK,SAAS;AAAA,cAC3B,iBACE,kBAAkB,kBAAkB,oBAChC,uBACA;AAAA,cACN,cAAc;AAAA,cACd,WAAW;AAAA,cACX,iBAAiB;AAAA,cACjB,YAAY;AAAA,cACZ,SAAS;AAAA,YAAA;AAAA,UACX;AAAA,QAEH,CAAA;AAAA,MAAA;AAAA,IACH;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-search.ts","../../src/shared/components/search-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { SearchPlugin, SearchState } from '@embedpdf/plugin-search';\nimport { useEffect, useState } from '@framework';\n\nexport const useSearchPlugin = () => usePlugin<SearchPlugin>(SearchPlugin.id);\nexport const useSearchCapability = () => useCapability<SearchPlugin>(SearchPlugin.id);\n\nexport const useSearch = () => {\n  const { provides } = useSearchCapability();\n  const [searchState, setSearchState] = useState<SearchState>({\n    flags: [],\n    results: [],\n    total: 0,\n    activeResultIndex: 0,\n    showAllResults: true,\n    query: '',\n    loading: false,\n    active: false,\n  });\n\n  useEffect(() => {\n    return provides?.onStateChange((state) => setSearchState(state));\n  }, [provides]);\n\n  return {\n    state: searchState,\n    provides,\n  };\n};\n","import { useEffect, useState, HTMLAttributes, CSSProperties } from '@framework';\nimport { SearchResultState } from '@embedpdf/plugin-search';\n\nimport { useSearchCapability } from '../hooks';\n\ntype SearchLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  pageIndex: number;\n  scale: number;\n  highlightColor?: string;\n  activeHighlightColor?: string;\n  style?: CSSProperties;\n};\n\nexport function SearchLayer({\n  pageIndex,\n  scale,\n  style,\n  highlightColor = '#FFFF00',\n  activeHighlightColor = '#FFBF00',\n  ...props\n}: SearchLayoutProps) {\n  const { provides: searchProvides } = useSearchCapability();\n  const [searchResultState, setSearchResultState] = useState<SearchResultState | null>(null);\n\n  useEffect(() => {\n    return searchProvides?.onSearchResultStateChange((state) => {\n      setSearchResultState(state);\n    });\n  }, [searchProvides]);\n\n  if (!searchResultState) {\n    return null;\n  }\n\n  // Filter results for current page while preserving original indices\n  const pageResults = searchResultState.results\n    .map((result, originalIndex) => ({ result, originalIndex }))\n    .filter(({ result }) => result.pageIndex === pageIndex);\n\n  return (\n    <div\n      style={{\n        ...style,\n      }}\n      {...props}\n    >\n      {pageResults.map(({ result, originalIndex }) =>\n        result.rects.map((rect, rectIndex) => (\n          <div\n            key={`${originalIndex}-${rectIndex}`}\n            style={{\n              position: 'absolute',\n              top: rect.origin.y * scale,\n              left: rect.origin.x * scale,\n              width: rect.size.width * scale,\n              height: rect.size.height * scale,\n              backgroundColor:\n                originalIndex === searchResultState.activeResultIndex\n                  ? activeHighlightColor\n                  : highlightColor,\n              mixBlendMode: 'multiply',\n              transform: 'scale(1.02)',\n              transformOrigin: 'center',\n              transition: 'opacity .3s ease-in-out',\n              opacity: 1,\n            }}\n          ></div>\n        )),\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAIO,MAAM,kBAAkB,MAAM,UAAwB,aAAa,EAAE;AACrE,MAAM,sBAAsB,MAAM,cAA4B,aAAa,EAAE;AAE7E,MAAM,YAAY,MAAM;AACvB,QAAA,EAAE,SAAS,IAAI,oBAAoB;AACzC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAsB;AAAA,IAC1D,OAAO,CAAC;AAAA,IACR,SAAS,CAAC;AAAA,IACV,OAAO;AAAA,IACP,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,EAAA,CACT;AAED,YAAU,MAAM;AACd,WAAO,qCAAU,cAAc,CAAC,UAAU,eAAe,KAAK;AAAA,EAAC,GAC9D,CAAC,QAAQ,CAAC;AAEN,SAAA;AAAA,IACL,OAAO;AAAA,IACP;AAAA,EACF;AACF;ACfO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,GAAG;AACL,GAAsB;AACpB,QAAM,EAAE,UAAU,eAAe,IAAI,oBAAoB;AACzD,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAmC,IAAI;AAEzF,YAAU,MAAM;AACP,WAAA,iDAAgB,0BAA0B,CAAC,UAAU;AAC1D,2BAAqB,KAAK;AAAA,IAAA;AAAA,EAC3B,GACA,CAAC,cAAc,CAAC;AAEnB,MAAI,CAAC,mBAAmB;AACf,WAAA;AAAA,EAAA;AAIT,QAAM,cAAc,kBAAkB,QACnC,IAAI,CAAC,QAAQ,mBAAmB,EAAE,QAAQ,gBAAgB,EAC1D,OAAO,CAAC,EAAE,aAAa,OAAO,cAAc,SAAS;AAGtD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH,UAAY,YAAA;AAAA,QAAI,CAAC,EAAE,QAAQ,cAAc,MACxC,OAAO,MAAM,IAAI,CAAC,MAAM,cACtB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,KAAK,KAAK,OAAO,IAAI;AAAA,cACrB,MAAM,KAAK,OAAO,IAAI;AAAA,cACtB,OAAO,KAAK,KAAK,QAAQ;AAAA,cACzB,QAAQ,KAAK,KAAK,SAAS;AAAA,cAC3B,iBACE,kBAAkB,kBAAkB,oBAChC,uBACA;AAAA,cACN,cAAc;AAAA,cACd,WAAW;AAAA,cACX,iBAAiB;AAAA,cACjB,YAAY;AAAA,cACZ,SAAS;AAAA,YAAA;AAAA,UACX;AAAA,UAhBK,GAAG,aAAa,IAAI,SAAS;AAAA,QAkBrC,CAAA;AAAA,MAAA;AAAA,IACH;AAAA,EACF;AAEJ;"}

package/dist/react/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/react"),t=require("@embedpdf/plugin-search"),r=require("react"),i=require("react/jsx-runtime"),s=()=>e.useCapability(t.SearchPlugin.id);exports.SearchLayer=function({pageIndex:e,scale:t,style:l,highlightColor:a="#FFFF00",activeHighlightColor:o="#FFBF00",...n}){const{provides:u}=s(),[c,d]=r.useState(null);if(r.useEffect((()=>null==u?void 0:u.onSearchResultStateChange((e=>{d(e)}))),[u]),!c)return null;const p=c.results.map(((e,t)=>({result:e,originalIndex:t}))).filter((({result:t})=>t.pageIndex===e));return i.jsx("div",{style:{...l},...n,children:p.map((({result:e,originalIndex:r})=>e.rects.map((e=>i.jsx("div",{style:{position:"absolute",top:e.origin.y*t,left:e.origin.x*t,width:e.size.width*t,height:e.size.height*t,backgroundColor:r===c.activeResultIndex?o:a,mixBlendMode:"multiply",transform:"scale(1.02)",transformOrigin:"center",transition:"opacity .3s ease-in-out",opacity:1}})))))})},exports.useSearch=()=>{const{provides:e}=s(),[t,i]=r.useState({flags:[],results:[],total:0,activeResultIndex:0,showAllResults:!0,query:"",loading:!1,active:!1});return r.useEffect((()=>null==e?void 0:e.onStateChange((e=>i(e)))),[e]),{state:t,provides:e}},exports.useSearchCapability=s,exports.useSearchPlugin=()=>e.usePlugin(t.SearchPlugin.id),Object.keys(t).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})}));
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/react"),t=require("@embedpdf/plugin-search"),r=require("react"),i=require("react/jsx-runtime"),s=()=>e.useCapability(t.SearchPlugin.id);exports.SearchLayer=function({pageIndex:e,scale:t,style:l,highlightColor:a="#FFFF00",activeHighlightColor:o="#FFBF00",...n}){const{provides:u}=s(),[c,d]=r.useState(null);if(r.useEffect((()=>null==u?void 0:u.onSearchResultStateChange((e=>{d(e)}))),[u]),!c)return null;const p=c.results.map(((e,t)=>({result:e,originalIndex:t}))).filter((({result:t})=>t.pageIndex===e));return i.jsx("div",{style:{...l},...n,children:p.map((({result:e,originalIndex:r})=>e.rects.map(((e,s)=>i.jsx("div",{style:{position:"absolute",top:e.origin.y*t,left:e.origin.x*t,width:e.size.width*t,height:e.size.height*t,backgroundColor:r===c.activeResultIndex?o:a,mixBlendMode:"multiply",transform:"scale(1.02)",transformOrigin:"center",transition:"opacity .3s ease-in-out",opacity:1}},`${r}-${s}`)))))})},exports.useSearch=()=>{const{provides:e}=s(),[t,i]=r.useState({flags:[],results:[],total:0,activeResultIndex:0,showAllResults:!0,query:"",loading:!1,active:!1});return r.useEffect((()=>null==e?void 0:e.onStateChange((e=>i(e)))),[e]),{state:t,provides:e}},exports.useSearchCapability=s,exports.useSearchPlugin=()=>e.usePlugin(t.SearchPlugin.id),Object.keys(t).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})}));
 //# sourceMappingURL=index.cjs.map

package/dist/react/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-search.ts","../../src/shared/components/search-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { SearchPlugin, SearchState } from '@embedpdf/plugin-search';\nimport { useEffect, useState } from '@framework';\n\nexport const useSearchPlugin = () => usePlugin<SearchPlugin>(SearchPlugin.id);\nexport const useSearchCapability = () => useCapability<SearchPlugin>(SearchPlugin.id);\n\nexport const useSearch = () => {\n  const { provides } = useSearchCapability();\n  const [searchState, setSearchState] = useState<SearchState>({\n    flags: [],\n    results: [],\n    total: 0,\n    activeResultIndex: 0,\n    showAllResults: true,\n    query: '',\n    loading: false,\n    active: false,\n  });\n\n  useEffect(() => {\n    return provides?.onStateChange((state) => setSearchState(state));\n  }, [provides]);\n\n  return {\n    state: searchState,\n    provides,\n  };\n};\n","import { useEffect, useState, HTMLAttributes, CSSProperties } from '@framework';\nimport { SearchResultState } from '@embedpdf/plugin-search';\n\nimport { useSearchCapability } from '../hooks';\n\ntype SearchLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  pageIndex: number;\n  scale: number;\n  highlightColor?: string;\n  activeHighlightColor?: string;\n  style?: CSSProperties;\n};\n\nexport function SearchLayer({\n  pageIndex,\n  scale,\n  style,\n  highlightColor = '#FFFF00',\n  activeHighlightColor = '#FFBF00',\n  ...props\n}: SearchLayoutProps) {\n  const { provides: searchProvides } = useSearchCapability();\n  const [searchResultState, setSearchResultState] = useState<SearchResultState | null>(null);\n\n  useEffect(() => {\n    return searchProvides?.onSearchResultStateChange((state) => {\n      setSearchResultState(state);\n    });\n  }, [searchProvides]);\n\n  if (!searchResultState) {\n    return null;\n  }\n\n  // Filter results for current page while preserving original indices\n  const pageResults = searchResultState.results\n    .map((result, originalIndex) => ({ result, originalIndex }))\n    .filter(({ result }) => result.pageIndex === pageIndex);\n\n  return (\n    <div\n      style={{\n        ...style,\n      }}\n      {...props}\n    >\n      {pageResults.map(({ result, originalIndex }) =>\n        result.rects.map((rect) => (\n          <div\n            style={{\n              position: 'absolute',\n              top: rect.origin.y * scale,\n              left: rect.origin.x * scale,\n              width: rect.size.width * scale,\n              height: rect.size.height * scale,\n              backgroundColor:\n                originalIndex === searchResultState.activeResultIndex\n                  ? activeHighlightColor\n                  : highlightColor,\n              mixBlendMode: 'multiply',\n              transform: 'scale(1.02)',\n              transformOrigin: 'center',\n              transition: 'opacity .3s ease-in-out',\n              opacity: 1,\n            }}\n          ></div>\n        )),\n      )}\n    </div>\n  );\n}\n"],"names":["useSearchCapability","useCapability","SearchPlugin","id","pageIndex","scale","style","highlightColor","activeHighlightColor","props","provides","searchProvides","searchResultState","setSearchResultState","useState","useEffect","onSearchResultStateChange","state","pageResults","results","map","result","originalIndex","filter","jsxRuntime","jsx","children","rects","rect","position","top","origin","y","left","x","width","size","height","backgroundColor","activeResultIndex","mixBlendMode","transform","transformOrigin","transition","opacity","searchState","setSearchState","flags","total","showAllResults","query","loading","active","onStateChange","usePlugin"],"mappings":"+MAKaA,EAAsB,IAAMC,gBAA4BC,EAAAA,aAAaC,wBCQ3E,UAAqBC,UAC1BA,EAAAC,MACAA,EAAAC,MACAA,EAAAC,eACAA,EAAiB,UAAAC,qBACjBA,EAAuB,aACpBC,IAEH,MAAQC,SAAUC,GAAmBX,KAC9BY,EAAmBC,GAAwBC,EAAAA,SAAmC,MAQrF,GANAC,EAAAA,WAAU,IACD,MAAAJ,OAAA,EAAAA,EAAgBK,2BAA2BC,IAChDJ,EAAqBI,EAAK,KAE3B,CAACN,KAECC,EACI,OAAA,KAIT,MAAMM,EAAcN,EAAkBO,QACnCC,KAAI,CAACC,EAAQC,MAAqBD,SAAQC,oBAC1CC,QAAO,EAAGF,YAAaA,EAAOjB,YAAcA,IAG7C,OAAAoB,EAAAC,IAAC,MAAA,CACCnB,MAAO,IACFA,MAEDG,EAEHiB,SAAYR,EAAAE,KAAI,EAAGC,SAAQC,mBAC1BD,EAAOM,MAAMP,KAAKQ,GAChBJ,EAAAC,IAAC,MAAA,CACCnB,MAAO,CACLuB,SAAU,WACVC,IAAKF,EAAKG,OAAOC,EAAI3B,EACrB4B,KAAML,EAAKG,OAAOG,EAAI7B,EACtB8B,MAAOP,EAAKQ,KAAKD,MAAQ9B,EACzBgC,OAAQT,EAAKQ,KAAKC,OAAShC,EAC3BiC,gBACEhB,IAAkBV,EAAkB2B,kBAChC/B,EACAD,EACNiC,aAAc,WACdC,UAAW,cACXC,gBAAiB,SACjBC,WAAY,0BACZC,QAAS,UAOvB,oBD/DyB,KACjB,MAAAlC,SAAEA,GAAaV,KACd6C,EAAaC,GAAkBhC,WAAsB,CAC1DiC,MAAO,GACP5B,QAAS,GACT6B,MAAO,EACPT,kBAAmB,EACnBU,gBAAgB,EAChBC,MAAO,GACPC,SAAS,EACTC,QAAQ,IAOH,OAJPrC,EAAAA,WAAU,IACS,MAAVL,OAAU,EAAAA,EAAA2C,eAAepC,GAAU6B,EAAe7B,MACxD,CAACP,IAEG,CACLO,MAAO4B,EACPnC,WACF,wDAvB6B,IAAM4C,YAAwBpD,EAAAA,aAAaC"}
+{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-search.ts","../../src/shared/components/search-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { SearchPlugin, SearchState } from '@embedpdf/plugin-search';\nimport { useEffect, useState } from '@framework';\n\nexport const useSearchPlugin = () => usePlugin<SearchPlugin>(SearchPlugin.id);\nexport const useSearchCapability = () => useCapability<SearchPlugin>(SearchPlugin.id);\n\nexport const useSearch = () => {\n  const { provides } = useSearchCapability();\n  const [searchState, setSearchState] = useState<SearchState>({\n    flags: [],\n    results: [],\n    total: 0,\n    activeResultIndex: 0,\n    showAllResults: true,\n    query: '',\n    loading: false,\n    active: false,\n  });\n\n  useEffect(() => {\n    return provides?.onStateChange((state) => setSearchState(state));\n  }, [provides]);\n\n  return {\n    state: searchState,\n    provides,\n  };\n};\n","import { useEffect, useState, HTMLAttributes, CSSProperties } from '@framework';\nimport { SearchResultState } from '@embedpdf/plugin-search';\n\nimport { useSearchCapability } from '../hooks';\n\ntype SearchLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  pageIndex: number;\n  scale: number;\n  highlightColor?: string;\n  activeHighlightColor?: string;\n  style?: CSSProperties;\n};\n\nexport function SearchLayer({\n  pageIndex,\n  scale,\n  style,\n  highlightColor = '#FFFF00',\n  activeHighlightColor = '#FFBF00',\n  ...props\n}: SearchLayoutProps) {\n  const { provides: searchProvides } = useSearchCapability();\n  const [searchResultState, setSearchResultState] = useState<SearchResultState | null>(null);\n\n  useEffect(() => {\n    return searchProvides?.onSearchResultStateChange((state) => {\n      setSearchResultState(state);\n    });\n  }, [searchProvides]);\n\n  if (!searchResultState) {\n    return null;\n  }\n\n  // Filter results for current page while preserving original indices\n  const pageResults = searchResultState.results\n    .map((result, originalIndex) => ({ result, originalIndex }))\n    .filter(({ result }) => result.pageIndex === pageIndex);\n\n  return (\n    <div\n      style={{\n        ...style,\n      }}\n      {...props}\n    >\n      {pageResults.map(({ result, originalIndex }) =>\n        result.rects.map((rect, rectIndex) => (\n          <div\n            key={`${originalIndex}-${rectIndex}`}\n            style={{\n              position: 'absolute',\n              top: rect.origin.y * scale,\n              left: rect.origin.x * scale,\n              width: rect.size.width * scale,\n              height: rect.size.height * scale,\n              backgroundColor:\n                originalIndex === searchResultState.activeResultIndex\n                  ? activeHighlightColor\n                  : highlightColor,\n              mixBlendMode: 'multiply',\n              transform: 'scale(1.02)',\n              transformOrigin: 'center',\n              transition: 'opacity .3s ease-in-out',\n              opacity: 1,\n            }}\n          ></div>\n        )),\n      )}\n    </div>\n  );\n}\n"],"names":["useSearchCapability","useCapability","SearchPlugin","id","pageIndex","scale","style","highlightColor","activeHighlightColor","props","provides","searchProvides","searchResultState","setSearchResultState","useState","useEffect","onSearchResultStateChange","state","pageResults","results","map","result","originalIndex","filter","jsxRuntime","jsx","children","rects","rect","rectIndex","position","top","origin","y","left","x","width","size","height","backgroundColor","activeResultIndex","mixBlendMode","transform","transformOrigin","transition","opacity","searchState","setSearchState","flags","total","showAllResults","query","loading","active","onStateChange","usePlugin"],"mappings":"+MAKaA,EAAsB,IAAMC,gBAA4BC,EAAAA,aAAaC,wBCQ3E,UAAqBC,UAC1BA,EAAAC,MACAA,EAAAC,MACAA,EAAAC,eACAA,EAAiB,UAAAC,qBACjBA,EAAuB,aACpBC,IAEH,MAAQC,SAAUC,GAAmBX,KAC9BY,EAAmBC,GAAwBC,EAAAA,SAAmC,MAQrF,GANAC,EAAAA,WAAU,IACD,MAAAJ,OAAA,EAAAA,EAAgBK,2BAA2BC,IAChDJ,EAAqBI,EAAK,KAE3B,CAACN,KAECC,EACI,OAAA,KAIT,MAAMM,EAAcN,EAAkBO,QACnCC,KAAI,CAACC,EAAQC,MAAqBD,SAAQC,oBAC1CC,QAAO,EAAGF,YAAaA,EAAOjB,YAAcA,IAG7C,OAAAoB,EAAAC,IAAC,MAAA,CACCnB,MAAO,IACFA,MAEDG,EAEHiB,SAAYR,EAAAE,KAAI,EAAGC,SAAQC,mBAC1BD,EAAOM,MAAMP,KAAI,CAACQ,EAAMC,IACtBL,EAAAC,IAAC,MAAA,CAECnB,MAAO,CACLwB,SAAU,WACVC,IAAKH,EAAKI,OAAOC,EAAI5B,EACrB6B,KAAMN,EAAKI,OAAOG,EAAI9B,EACtB+B,MAAOR,EAAKS,KAAKD,MAAQ/B,EACzBiC,OAAQV,EAAKS,KAAKC,OAASjC,EAC3BkC,gBACEjB,IAAkBV,EAAkB4B,kBAChChC,EACAD,EACNkC,aAAc,WACdC,UAAW,cACXC,gBAAiB,SACjBC,WAAY,0BACZC,QAAS,IAfN,GAAGvB,KAAiBO,UAsBrC,oBDhEyB,KACjB,MAAAnB,SAAEA,GAAaV,KACd8C,EAAaC,GAAkBjC,WAAsB,CAC1DkC,MAAO,GACP7B,QAAS,GACT8B,MAAO,EACPT,kBAAmB,EACnBU,gBAAgB,EAChBC,MAAO,GACPC,SAAS,EACTC,QAAQ,IAOH,OAJPtC,EAAAA,WAAU,IACS,MAAVL,OAAU,EAAAA,EAAA4C,eAAerC,GAAU8B,EAAe9B,MACxD,CAACP,IAEG,CACLO,MAAO6B,EACPpC,WACF,wDAvB6B,IAAM6C,YAAwBrD,EAAAA,aAAaC"}

package/dist/react/index.js

@@ -52,7 +52,7 @@ function SearchLayer({
       },
       ...props,
       children: pageResults.map(
-        ({ result, originalIndex }) => result.rects.map((rect) => /* @__PURE__ */ jsx(
+        ({ result, originalIndex }) => result.rects.map((rect, rectIndex) => /* @__PURE__ */ jsx(
           "div",
           {
             style: {
@@ -68,7 +68,8 @@ function SearchLayer({
               transition: "opacity .3s ease-in-out",
               opacity: 1
             }
-          }
+          },
+          `${originalIndex}-${rectIndex}`
         ))
       )
     }

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-search.ts","../../src/shared/components/search-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { SearchPlugin, SearchState } from '@embedpdf/plugin-search';\nimport { useEffect, useState } from '@framework';\n\nexport const useSearchPlugin = () => usePlugin<SearchPlugin>(SearchPlugin.id);\nexport const useSearchCapability = () => useCapability<SearchPlugin>(SearchPlugin.id);\n\nexport const useSearch = () => {\n  const { provides } = useSearchCapability();\n  const [searchState, setSearchState] = useState<SearchState>({\n    flags: [],\n    results: [],\n    total: 0,\n    activeResultIndex: 0,\n    showAllResults: true,\n    query: '',\n    loading: false,\n    active: false,\n  });\n\n  useEffect(() => {\n    return provides?.onStateChange((state) => setSearchState(state));\n  }, [provides]);\n\n  return {\n    state: searchState,\n    provides,\n  };\n};\n","import { useEffect, useState, HTMLAttributes, CSSProperties } from '@framework';\nimport { SearchResultState } from '@embedpdf/plugin-search';\n\nimport { useSearchCapability } from '../hooks';\n\ntype SearchLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  pageIndex: number;\n  scale: number;\n  highlightColor?: string;\n  activeHighlightColor?: string;\n  style?: CSSProperties;\n};\n\nexport function SearchLayer({\n  pageIndex,\n  scale,\n  style,\n  highlightColor = '#FFFF00',\n  activeHighlightColor = '#FFBF00',\n  ...props\n}: SearchLayoutProps) {\n  const { provides: searchProvides } = useSearchCapability();\n  const [searchResultState, setSearchResultState] = useState<SearchResultState | null>(null);\n\n  useEffect(() => {\n    return searchProvides?.onSearchResultStateChange((state) => {\n      setSearchResultState(state);\n    });\n  }, [searchProvides]);\n\n  if (!searchResultState) {\n    return null;\n  }\n\n  // Filter results for current page while preserving original indices\n  const pageResults = searchResultState.results\n    .map((result, originalIndex) => ({ result, originalIndex }))\n    .filter(({ result }) => result.pageIndex === pageIndex);\n\n  return (\n    <div\n      style={{\n        ...style,\n      }}\n      {...props}\n    >\n      {pageResults.map(({ result, originalIndex }) =>\n        result.rects.map((rect) => (\n          <div\n            style={{\n              position: 'absolute',\n              top: rect.origin.y * scale,\n              left: rect.origin.x * scale,\n              width: rect.size.width * scale,\n              height: rect.size.height * scale,\n              backgroundColor:\n                originalIndex === searchResultState.activeResultIndex\n                  ? activeHighlightColor\n                  : highlightColor,\n              mixBlendMode: 'multiply',\n              transform: 'scale(1.02)',\n              transformOrigin: 'center',\n              transition: 'opacity .3s ease-in-out',\n              opacity: 1,\n            }}\n          ></div>\n        )),\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAIO,MAAM,kBAAkB,MAAM,UAAwB,aAAa,EAAE;AACrE,MAAM,sBAAsB,MAAM,cAA4B,aAAa,EAAE;AAE7E,MAAM,YAAY,MAAM;AACvB,QAAA,EAAE,SAAS,IAAI,oBAAoB;AACzC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAsB;AAAA,IAC1D,OAAO,CAAC;AAAA,IACR,SAAS,CAAC;AAAA,IACV,OAAO;AAAA,IACP,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,EAAA,CACT;AAED,YAAU,MAAM;AACd,WAAO,qCAAU,cAAc,CAAC,UAAU,eAAe,KAAK;AAAA,EAAC,GAC9D,CAAC,QAAQ,CAAC;AAEN,SAAA;AAAA,IACL,OAAO;AAAA,IACP;AAAA,EACF;AACF;ACfO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,GAAG;AACL,GAAsB;AACpB,QAAM,EAAE,UAAU,eAAe,IAAI,oBAAoB;AACzD,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAmC,IAAI;AAEzF,YAAU,MAAM;AACP,WAAA,iDAAgB,0BAA0B,CAAC,UAAU;AAC1D,2BAAqB,KAAK;AAAA,IAAA;AAAA,EAC3B,GACA,CAAC,cAAc,CAAC;AAEnB,MAAI,CAAC,mBAAmB;AACf,WAAA;AAAA,EAAA;AAIT,QAAM,cAAc,kBAAkB,QACnC,IAAI,CAAC,QAAQ,mBAAmB,EAAE,QAAQ,gBAAgB,EAC1D,OAAO,CAAC,EAAE,aAAa,OAAO,cAAc,SAAS;AAGtD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH,UAAY,YAAA;AAAA,QAAI,CAAC,EAAE,QAAQ,oBAC1B,OAAO,MAAM,IAAI,CAAC,SAChB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,KAAK,KAAK,OAAO,IAAI;AAAA,cACrB,MAAM,KAAK,OAAO,IAAI;AAAA,cACtB,OAAO,KAAK,KAAK,QAAQ;AAAA,cACzB,QAAQ,KAAK,KAAK,SAAS;AAAA,cAC3B,iBACE,kBAAkB,kBAAkB,oBAChC,uBACA;AAAA,cACN,cAAc;AAAA,cACd,WAAW;AAAA,cACX,iBAAiB;AAAA,cACjB,YAAY;AAAA,cACZ,SAAS;AAAA,YAAA;AAAA,UACX;AAAA,QAEH,CAAA;AAAA,MAAA;AAAA,IACH;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-search.ts","../../src/shared/components/search-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { SearchPlugin, SearchState } from '@embedpdf/plugin-search';\nimport { useEffect, useState } from '@framework';\n\nexport const useSearchPlugin = () => usePlugin<SearchPlugin>(SearchPlugin.id);\nexport const useSearchCapability = () => useCapability<SearchPlugin>(SearchPlugin.id);\n\nexport const useSearch = () => {\n  const { provides } = useSearchCapability();\n  const [searchState, setSearchState] = useState<SearchState>({\n    flags: [],\n    results: [],\n    total: 0,\n    activeResultIndex: 0,\n    showAllResults: true,\n    query: '',\n    loading: false,\n    active: false,\n  });\n\n  useEffect(() => {\n    return provides?.onStateChange((state) => setSearchState(state));\n  }, [provides]);\n\n  return {\n    state: searchState,\n    provides,\n  };\n};\n","import { useEffect, useState, HTMLAttributes, CSSProperties } from '@framework';\nimport { SearchResultState } from '@embedpdf/plugin-search';\n\nimport { useSearchCapability } from '../hooks';\n\ntype SearchLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  pageIndex: number;\n  scale: number;\n  highlightColor?: string;\n  activeHighlightColor?: string;\n  style?: CSSProperties;\n};\n\nexport function SearchLayer({\n  pageIndex,\n  scale,\n  style,\n  highlightColor = '#FFFF00',\n  activeHighlightColor = '#FFBF00',\n  ...props\n}: SearchLayoutProps) {\n  const { provides: searchProvides } = useSearchCapability();\n  const [searchResultState, setSearchResultState] = useState<SearchResultState | null>(null);\n\n  useEffect(() => {\n    return searchProvides?.onSearchResultStateChange((state) => {\n      setSearchResultState(state);\n    });\n  }, [searchProvides]);\n\n  if (!searchResultState) {\n    return null;\n  }\n\n  // Filter results for current page while preserving original indices\n  const pageResults = searchResultState.results\n    .map((result, originalIndex) => ({ result, originalIndex }))\n    .filter(({ result }) => result.pageIndex === pageIndex);\n\n  return (\n    <div\n      style={{\n        ...style,\n      }}\n      {...props}\n    >\n      {pageResults.map(({ result, originalIndex }) =>\n        result.rects.map((rect, rectIndex) => (\n          <div\n            key={`${originalIndex}-${rectIndex}`}\n            style={{\n              position: 'absolute',\n              top: rect.origin.y * scale,\n              left: rect.origin.x * scale,\n              width: rect.size.width * scale,\n              height: rect.size.height * scale,\n              backgroundColor:\n                originalIndex === searchResultState.activeResultIndex\n                  ? activeHighlightColor\n                  : highlightColor,\n              mixBlendMode: 'multiply',\n              transform: 'scale(1.02)',\n              transformOrigin: 'center',\n              transition: 'opacity .3s ease-in-out',\n              opacity: 1,\n            }}\n          ></div>\n        )),\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAIO,MAAM,kBAAkB,MAAM,UAAwB,aAAa,EAAE;AACrE,MAAM,sBAAsB,MAAM,cAA4B,aAAa,EAAE;AAE7E,MAAM,YAAY,MAAM;AACvB,QAAA,EAAE,SAAS,IAAI,oBAAoB;AACzC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAsB;AAAA,IAC1D,OAAO,CAAC;AAAA,IACR,SAAS,CAAC;AAAA,IACV,OAAO;AAAA,IACP,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,EAAA,CACT;AAED,YAAU,MAAM;AACd,WAAO,qCAAU,cAAc,CAAC,UAAU,eAAe,KAAK;AAAA,EAAC,GAC9D,CAAC,QAAQ,CAAC;AAEN,SAAA;AAAA,IACL,OAAO;AAAA,IACP;AAAA,EACF;AACF;ACfO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,GAAG;AACL,GAAsB;AACpB,QAAM,EAAE,UAAU,eAAe,IAAI,oBAAoB;AACzD,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAmC,IAAI;AAEzF,YAAU,MAAM;AACP,WAAA,iDAAgB,0BAA0B,CAAC,UAAU;AAC1D,2BAAqB,KAAK;AAAA,IAAA;AAAA,EAC3B,GACA,CAAC,cAAc,CAAC;AAEnB,MAAI,CAAC,mBAAmB;AACf,WAAA;AAAA,EAAA;AAIT,QAAM,cAAc,kBAAkB,QACnC,IAAI,CAAC,QAAQ,mBAAmB,EAAE,QAAQ,gBAAgB,EAC1D,OAAO,CAAC,EAAE,aAAa,OAAO,cAAc,SAAS;AAGtD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH,UAAY,YAAA;AAAA,QAAI,CAAC,EAAE,QAAQ,cAAc,MACxC,OAAO,MAAM,IAAI,CAAC,MAAM,cACtB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,KAAK,KAAK,OAAO,IAAI;AAAA,cACrB,MAAM,KAAK,OAAO,IAAI;AAAA,cACtB,OAAO,KAAK,KAAK,QAAQ;AAAA,cACzB,QAAQ,KAAK,KAAK,SAAS;AAAA,cAC3B,iBACE,kBAAkB,kBAAkB,oBAChC,uBACA;AAAA,cACN,cAAc;AAAA,cACd,WAAW;AAAA,cACX,iBAAiB;AAAA,cACjB,YAAY;AAAA,cACZ,SAAS;AAAA,YAAA;AAAA,UACX;AAAA,UAhBK,GAAG,aAAa,IAAI,SAAS;AAAA,QAkBrC,CAAA;AAAA,MAAA;AAAA,IACH;AAAA,EACF;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embedpdf/plugin-search",
-  "version": "1.3.14",
+  "version": "1.3.15",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",
@@ -29,22 +29,22 @@
     }
   },
   "dependencies": {
-    "@embedpdf/models": "1.3.14"
+    "@embedpdf/models": "1.3.15"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
     "typescript": "^5.0.0",
     "@embedpdf/build": "1.0.1",
-    "@embedpdf/plugin-loader": "1.3.14",
-    "@embedpdf/core": "1.3.14"
+    "@embedpdf/core": "1.3.15",
+    "@embedpdf/plugin-loader": "1.3.15"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "preact": "^10.26.4",
     "vue": ">=3.2.0",
-    "@embedpdf/core": "1.3.14",
-    "@embedpdf/plugin-loader": "1.3.14"
+    "@embedpdf/core": "1.3.15",
+    "@embedpdf/plugin-loader": "1.3.15"
   },
   "files": [
     "dist",