@qratilabs/qrati-connect 2.23.0-beta.10 → 2.23.0-beta.11

package/README.md

@@ -4,15 +4,46 @@ Qrati Connect is a React component library designed to seamlessly integrate Qrat
 
 # Features
 
-- **Interactive Media Gallery :** Integrate Qrati's powerful interactive media gallery into your own site without a hassle.
-- **Media Upload :** Users can directly upload content from your host site.
-- **Reaction :** Engage your users with a completely customizable set of emojis.
-- **Curation :** Want to host a photo contest? Our curation feature can be a one stop solution for that.
-- **Leaderboard :** Gamify your contest with a precise and fun leaderboard.
+# Qrati Connect — Embeddable Media & Engagement SDK
 
-**Qrati Connect** is a compact, production-grade SDK for embedding photo galleries, uploads, curation, and engagement into any website. Built with strict TypeScript, Preact compatibility, and careful bundling to deliver a fast, accessible, and themeable integration.
+**Qrati Connect** is a compact, production-grade SDK for embedding photo galleries, media uploads, curation, and engagement into any website. It is built with [Preact](https://preactjs.com/), strict TypeScript, and Shadow-DOM style isolation, then distributed as a Web Component, React wrapper, and zero-code embed script.
 
-Install `qrati-connect` using npm, yarn, pnpm or bun:
+---
+
+## Why Qrati Connect?
+
+- **Framework-agnostic** — works in React, Vue, Angular, WordPress, or plain HTML.
+- **Style isolation** — Shadow DOM keeps SDK styles separate from the host page.
+- **Small initial payload** — Preact core plus strategic lazy-loading for heavy features (upload, HEIC conversion, maps).
+- **Themeable** — organization colors, fonts, radius, and shadows are fetched from the Qrati API and applied via CSS custom properties.
+- **TypeScript-first** — full typings for the public API.
+
+---
+
+## Highlights
+
+- Interactive media gallery with lightbox, blurhash placeholders, infinite scroll, and facial search.
+- Smart uploads: compression, chunked progress, video trimming, and HEIC → JPEG conversion on demand.
+- Reactions, curation workflow, leaderboards, and points-based engagement.
+- Public events page with folder navigation and optional map view (Google Maps, Mapbox, OpenStreetMap).
+
+---
+
+## Distribution Formats
+
+| Format | Output | Best for |
+|--------|--------|----------|
+| **React wrapper** | `dist/react/index.mjs` / `index.cjs` | React / Next.js apps |
+| **Web Component** | `dist/element/web.es.js` | Any framework or vanilla JS |
+| **Embed loader** | `dist/embed/embed.js` | Zero-code `<script>` integration |
+
+The React wrapper and embed loader dynamically load the element build at runtime, so the same `web.es.js` bundle is always used.
+
+---
+
+## Quick Install & Integration
+
+### React (client component)
 
 ```bash
 npm install @qratilabs/qrati-connect
@@ -24,11 +55,10 @@ pnpm add @qratilabs/qrati-connect
 bun install @qratilabs/qrati-connect
 ```
 
-Sample react page -
+```tsx
+'use client';
 
-```javascript
-import QratiConnect from '@qratilabs/qrati-connect/react';
-import '@qratilabs/qrati-connect/react/styles.css';
+import { QratiConnect } from '@qratilabs/qrati-connect';
 
 const Page = () => {
     return (
@@ -41,68 +71,42 @@ const Page = () => {
 export default Page;
 ```
 
-**Note**: Add 'use client' directive if you are using any React frameworks which supports Server Side Rendering (SSR) like Next.js.
-
-# Available props
-
-- **router :** Custom router configuration for internal navigation ('memory or 'hash').
-- **organizationId :** Unique identifier for your organization inside Qrati.
-- **fontClassName :** Classes to control custom font for the component.
-- **textClassName :** Classes to apply any additional styling to texts inside the component.
-- **emptyStateImage :** Link or path to image which will be shown for any empty state in the component.
-- **curateLabel :** Label to show in place of 'Curate' in header for contest type events.
-- **leaderboardLabel :** Label to show in place of 'Leaders' in header for contest type events.
-- **uid :** User id for your application user (applicable for custom auth only).
-- **fname :** First name for your application user (applicable for custom auth only).
-- **lname :** Last name for your application user (applicable for custom auth only).
-- **loginUrl :** The page url inside your web app where we should redirect when authentication is required for user intended action (applicable for custom auth only).
-
-# Qrati Connect Element (Web Component)
-
-Qrati Connect is also available as a Web Component (Custom Element) that you can use directly in your HTML without React. This is useful for non-React applications or when you want to embed Qrati Connect in static HTML pages.
-
-## Installation via CDN (jsDelivr)
-
-Add the following script and stylesheet tags to your HTML:
+### Web Component (framework-agnostic)
 
 ```html
-<!-- Import the Web Component -->
-<script type="module" src="https://cdn.jsdelivr.net/npm/@qratilabs/qrati-connect/element/web.es.js"></script>
-<!-- Import the styles -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@qratilabs/qrati-connect/element/styles.css" />
-```
+<script type="module" src="https://cdn.jsdelivr.net/npm/@qratilabs/qrati-connect@2/element/web.es.js"></script>
 
-### Embed (Single Script — No Code)
+<qrati-connect organization-id="your-org-id" router="hash"></qrati-connect>
+```
 
-The simplest integration: one `async` tag, config in `data-*` attributes. Mounts
-where the tag sits, or into the element matched by `data-target`.
+### Embed script (zero-code)
 
 ```html
 <script async
-        src="https://cdn.jsdelivr.net/npm/@qratilabs/qrati-connect/embed/embed.js"
+        src="https://cdn.jsdelivr.net/npm/@qratilabs/qrati-connect@2/embed/embed.js"
         data-organization-id="your-org-id"
         data-router="hash"></script>
 ```
 
-Supported `data-*` attributes: `data-organization-id` (required), `data-router`,
-`data-uid`, `data-fname`, `data-lname`, `data-theme`, and `data-target` (CSS
-selector for the mount container).
+The embed script inserts a `<qrati-connect>` element next to the script tag (or into the element matched by `data-target`) and lazy-loads the element build.
 
 ---
 
 Once imported, you can use the custom element tag `<qrati-connect>` in your HTML:
 
-| Prop / Attribute    | Type                     | Default    | Description                            |
-| ------------------- | ------------------------ | ---------- | -------------------------------------- |
-| `organizationId` \* | `string`                 | —          | Your Qrati organization ID (required)  |
-| `router`            | `'memory' \| 'hash'`     | `'memory'` | Routing strategy for navigation        |
-| `uid`               | `string`                 | —          | Pre-authenticated user ID              |
-| `fname`             | `string`                 | —          | Pre-authenticated user first name      |
-| `lname`             | `string`                 | —          | Pre-authenticated user last name       |
-| `theme`             | `'light' \| 'dark'`      | `'light'`  | Color scheme                           |
-| `onError`           | `(error: Error) => void` | —          | Error callback for handling SDK errors |
+| Prop / Attribute | Type | Default | Description |
+|------------------|------|---------|-------------|
+| `organizationId` * | `string` | — | Qrati organization ID |
+| `router` | `'memory' \| 'hash'` | `'memory'` | Routing strategy |
+| `uid` | `string` | — | Pre-authenticated user ID |
+| `fname` | `string` | — | Pre-authenticated first name |
+| `lname` | `string` | — | Pre-authenticated last name |
+| `theme` | `'light' \| 'dark'` | `'light'` | Color scheme |
+| `onError` | `(error: Error) => void` | — | SDK error callback |
+
+\* Required.
 
-Note: When using the Web Component version, props are passed as HTML attributes with kebab-case naming (e.g., `organization-id` instead of `organizationId`).
+Custom auth requires `uid` and `fname`; `lname` is optional.
 
 3. Tailwindv3 -> Tailwindv4
 
@@ -112,45 +116,66 @@ text-secondary -> text-muted-foreground
 bg-brand, text-brand -> bg-primary, text-primary
 qc-text-lg, qc-bg-red-500 -> qc:text-lg, qc:bg-red-500
 
-4. IconifyReact -> Iconify Tailwindv4
+| Callback / Event | Payload | Description |
+|------------------|---------|-------------|
+| `onError` | `Error` | Called when an SDK error is caught |
+| `qrati-error` (custom event) | `{ error: Error }` | Dispatched on `window` and the custom element |
+
+React wrapper users should use the `onError` prop. Vanilla Web Component users can listen for `qrati-error`.
 
 ---
 
 ## Performance & Bundling
 
-We optimize for small initial loads and lazy-load heavy features:
+Sizes are approximate and depend on the build output:
 
-- Initial: ~139 KB gzipped (core UI + essentials)
-- Upload feature: +~73 KB gzipped (lazy)
-- HEIC conversion (heic2any): large dependency loaded only on-demand (~345 KB gzipped)
+- React wrapper: ~1–2 KB gzipped (loads element build at runtime).
+- Initial element bundle: ~139 KB gzipped.
+- Upload feature: loaded on demand.
+- HEIC conversion (`heic2any`): loaded only when a `.heic` file is selected.
+- Maps and heavy UI libraries are split into lazy chunks.
 
 ---
 
 ## Development
 
-Common commands for contributors:
+This repository uses **pnpm** and **Node.js 24.x**.
 
 ```bash
-pnpm build          # Build all distribution targets (element → umd → react → embed)
-pnpm test:unit      # Run Vitest unit tests in watch mode
-pnpm test:unit:run  # Run Vitest unit tests once
-pnpm test:production # Build and run Playwright production regression tests
-pnpm type-check     # TypeScript type checking (no emit)
+pnpm install        # install dependencies
+pnpm storybook      # start Storybook on http://localhost:6006
+pnpm type-check     # TypeScript check (no emit)
 pnpm lint           # ESLint
+pnpm format         # Prettier
+pnpm build          # build all distribution targets
+pnpm test:unit      # Vitest unit tests (watch)
+pnpm test:unit:run  # Vitest unit tests (once)
+pnpm test:all       # unit tests + Playwright production regression
 ```
 
-## Support
+See [`docs/DEVELOPMENT.md`](docs/DEVELOPMENT.md) for the full setup guide and [`docs/ARCHITECTURE.md`](docs/ARCHITECTURE.md) for design details.
 
-- Report bugs or request features via GitHub Issues: https://github.com/qrati-labs/qrati-connect-ts/issues
-- See `docs/` for architecture, component, and hook references
-- For commercial support: support@qrati.com
+---
+
+## Documentation
+
+- [`docs/INDEX.md`](docs/INDEX.md) — documentation map
+- [`docs/ARCHITECTURE.md`](docs/ARCHITECTURE.md) — architecture, build system, routing, styling, i18n
+- [`docs/DEVELOPMENT.md`](docs/DEVELOPMENT.md) — environment setup, workflow, testing, Storybook
+- [`docs/API.md`](docs/API.md) — backend API communication
+- [`docs/REFERENCE.md`](docs/REFERENCE.md) — components, hooks, pages, utilities, router API
+- [`docs/DEPLOYMENT.md`](docs/DEPLOYMENT.md) — release process and CDN
+- [`docs/FAQ.md`](docs/FAQ.md) — common questions
 
 ---
 
-## License
+## Support
 
-Proprietary © Qrati Labs — https://qrati.com. All rights reserved.
+- GitHub Issues: https://github.com/qrati-labs/qrati-connect-ts/issues
+- Email: support@qrati.com
 
 ---
 
-Visit `docs/` for full API and integration patterns.
+## License
+
+Proprietary © Qrati Labs — https://qrati.com. All rights reserved.

package/element/0P3j0_yy2.js

@@ -0,0 +1,3 @@
+import{n as e}from"./Cko4QHwX.js";import{C as t,b as o,f as l,h as r,p as a,t as n}from"./C3uDEVBt.js";import{I as i,a as f,n as c,w as p}from"./CGiGAVqL.js";import{t as s}from"./Cz97-05w.js";import{t as d}from"./C08PJA0j2.js";import{a as u,i as m,n as g,r as b,t as h}from"./CwmhT3N32.js";import{t as x}from"./CfMNBPpx2.js";var k=[[90,-180],[-90,180]],v=[20,0],y="#fb8500",w={topLeft:[276,60],bottomRight:[60,60]},z=new s,A=e=>e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"),E=({onExplore:s,logoUrl:E})=>{const L=l(null),R=l(null),C=l(null),T=l(null),O=l(null),M=l(null),I=l(null),W=l(!1),j=l(!1),S=a(()=>(()=>{try{const e=sessionStorage.getItem(p);if(!e)return null;const t=JSON.parse(e);if("number"==typeof t?.center?.lat&&"number"==typeof t?.center?.lng&&"number"==typeof t?.zoom)return t}catch{}return null})(),[]),[Z,q]=r(!0),[D,B]=r(!1),{folderTree:H,activeFolderId:N,activeFolder:U,visibleEvents:F,setActiveFolderId:P,isLoadingEvents:Y}=d(),{organization:J}=c();return o(()=>{if(!L.current||R.current)return;x("leaflet",'.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;top:0;left:0}.leaflet-container{overflow:hidden}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-tile::selection{background:0 0}.leaflet-safari .leaflet-tile{image-rendering:-webkit-optimize-contrast}.leaflet-safari .leaflet-tile-container{-webkit-transform-origin:0 0;width:1600px;height:1600px}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container .leaflet-overlay-pane svg{max-width:none!important;max-height:none!important}.leaflet-container .leaflet-marker-pane img,.leaflet-container .leaflet-shadow-pane img,.leaflet-container .leaflet-tile-pane img,.leaflet-container img.leaflet-image-layer,.leaflet-container .leaflet-tile{width:auto;padding:0;max-width:none!important;max-height:none!important}.leaflet-container img.leaflet-tile{mix-blend-mode:plus-lighter}.leaflet-container.leaflet-touch-zoom{-ms-touch-action:pan-x pan-y;touch-action:pan-x pan-y}.leaflet-container.leaflet-touch-drag{-ms-touch-action:pinch-zoom;touch-action:none;touch-action:pinch-zoom}.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{-ms-touch-action:none;touch-action:none}.leaflet-container{-webkit-tap-highlight-color:transparent}.leaflet-container a{-webkit-tap-highlight-color:#33b5e566}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{box-sizing:border-box;z-index:800;width:0;height:0}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg{z-index:200}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{z-index:800;pointer-events:visiblePainted;pointer-events:auto;position:relative}.leaflet-top,.leaflet-bottom{z-index:1000;pointer-events:none;position:absolute}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-popup{opacity:0;transition:opacity .2s linear}.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-animated{transform-origin:0 0}svg.leaflet-zoom-animated{will-change:transform}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,.25,1);-moz-transition:-moz-transform .25s cubic-bezier(0,0,.25,1);transition:transform .25s cubic-bezier(0,0,.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile{transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-interactive{cursor:pointer}.leaflet-grab{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.leaflet-crosshair,.leaflet-crosshair .leaflet-interactive{cursor:crosshair}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-grab,.leaflet-dragging .leaflet-grab .leaflet-interactive,.leaflet-dragging .leaflet-marker-draggable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-image-layer,.leaflet-pane>svg path,.leaflet-tile-container{pointer-events:none}.leaflet-marker-icon.leaflet-interactive,.leaflet-image-layer.leaflet-interactive,.leaflet-pane>svg path.leaflet-interactive,svg.leaflet-image-layer.leaflet-interactive path{pointer-events:visiblePainted;pointer-events:auto}.leaflet-container{outline-offset:1px;background:#ddd}.leaflet-container a{color:#0078a8}.leaflet-zoom-box{background:#ffffff80;border:2px dotted #38f}.leaflet-container{font-family:Helvetica Neue,Arial,Helvetica,sans-serif;font-size:.75rem;line-height:1.5}.leaflet-bar{border-radius:4px;box-shadow:0 1px 5px #000000a6}.leaflet-bar a{text-align:center;color:#000;background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;text-decoration:none;display:block}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover,.leaflet-bar a:focus{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom:none;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.leaflet-bar a.leaflet-disabled{cursor:default;color:#bbb;background-color:#f4f4f4}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-touch .leaflet-bar a:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.leaflet-touch .leaflet-bar a:last-child{border-bottom-right-radius:2px;border-bottom-left-radius:2px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{text-indent:1px;font:700 18px Lucida Console,Monaco,monospace}.leaflet-touch .leaflet-control-zoom-in,.leaflet-touch .leaflet-control-zoom-out{font-size:22px}.leaflet-control-layers{background:#fff;border-radius:5px;box-shadow:0 1px 5px #0006}.leaflet-control-layers-toggle{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{color:#333;background:#fff;padding:6px 10px 6px 6px}.leaflet-control-layers-scrollbar{padding-right:5px;overflow:hidden scroll}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{font-size:1.08333em;display:block}.leaflet-control-layers-separator{border-top:1px solid #ddd;height:0;margin:5px -10px 5px -6px}.leaflet-default-icon-path{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=)}.leaflet-container .leaflet-control-attribution{background:#fffc;margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{color:#333;padding:0 5px;line-height:1.4}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover,.leaflet-control-attribution a:focus{text-decoration:underline}.leaflet-attribution-flag{width:1em;height:.6669em;vertical-align:baseline!important;display:inline!important}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{white-space:nowrap;box-sizing:border-box;text-shadow:1px 1px #fff;background:#fffc;border:2px solid #777;border-top:none;padding:2px 5px 1px;line-height:1.1}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{background-clip:padding-box;border:2px solid #0003}.leaflet-popup{text-align:center;margin-bottom:20px;position:absolute}.leaflet-popup-content-wrapper{text-align:left;border-radius:12px;padding:1px}.leaflet-popup-content{min-height:1px;margin:13px 24px 13px 20px;font-size:1.08333em;line-height:1.3}.leaflet-popup-content p{margin:1.3em 0}.leaflet-popup-tip-container{pointer-events:none;width:40px;height:20px;margin-top:-1px;margin-left:-20px;position:absolute;left:50%;overflow:hidden}.leaflet-popup-tip{pointer-events:auto;width:17px;height:17px;margin:-10px auto 0;padding:1px;transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{color:#333;background:#fff;box-shadow:0 3px 14px #0006}.leaflet-container a.leaflet-popup-close-button{text-align:center;color:#757575;background:0 0;border:none;width:24px;height:24px;font:16px/24px Tahoma,Verdana,sans-serif;text-decoration:none;position:absolute;top:0;right:0}.leaflet-container a.leaflet-popup-close-button:hover,.leaflet-container a.leaflet-popup-close-button:focus{color:#585858}.leaflet-popup-scrolled{overflow:auto}.leaflet-oldie .leaflet-popup-content-wrapper{-ms-zoom:1}.leaflet-oldie .leaflet-popup-tip{-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";width:24px;filter:progid:DXImageTransform.Microsoft.Matrix(M11=.707107, M12=.707107, M21=-.707107, M22=.707107);margin:0 auto}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666}.leaflet-tooltip{color:#222;white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none;background-color:#fff;border:1px solid #fff;border-radius:3px;padding:6px;position:absolute;box-shadow:0 1px 3px #0006}.leaflet-tooltip.leaflet-interactive{cursor:pointer;pointer-events:auto}.leaflet-tooltip-top:before,.leaflet-tooltip-bottom:before,.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{pointer-events:none;content:"";background:0 0;border:6px solid #0000;position:absolute}.leaflet-tooltip-bottom{margin-top:6px}.leaflet-tooltip-top{margin-top:-6px}.leaflet-tooltip-bottom:before,.leaflet-tooltip-top:before{margin-left:-6px;left:50%}.leaflet-tooltip-top:before{border-top-color:#fff;margin-bottom:-12px;bottom:0}.leaflet-tooltip-bottom:before{border-bottom-color:#fff;margin-top:-12px;margin-left:-6px;top:0}.leaflet-tooltip-left{margin-left:-6px}.leaflet-tooltip-right{margin-left:6px}.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{margin-top:-6px;top:50%}.leaflet-tooltip-left:before{border-left-color:#fff;margin-right:-12px;right:0}.leaflet-tooltip-right:before{border-right-color:#fff;margin-left:-12px;left:0}@media print{.leaflet-control{-webkit-print-color-adjust:exact;print-color-adjust:exact}}'),x("marker-cluster",".leaflet-cluster-anim .leaflet-marker-icon,.leaflet-cluster-anim .leaflet-marker-shadow{transition:transform .3s ease-out,opacity .3s ease-in}.leaflet-cluster-spider-leg{transition:stroke-dashoffset .3s ease-out,stroke-opacity .3s ease-in}.marker-cluster-small{background-color:#b5e28c99}.marker-cluster-small div{background-color:#6ecc3999}.marker-cluster-medium{background-color:#f1d35799}.marker-cluster-medium div{background-color:#f0c20c99}.marker-cluster-large{background-color:#fd9c7399}.marker-cluster-large div{background-color:#f1801799}.leaflet-oldie .marker-cluster-small{background-color:#b5e28c}.leaflet-oldie .marker-cluster-small div{background-color:#6ecc39}.leaflet-oldie .marker-cluster-medium{background-color:#f1d357}.leaflet-oldie .marker-cluster-medium div{background-color:#f0c20c}.leaflet-oldie .marker-cluster-large{background-color:#fd9c73}.leaflet-oldie .marker-cluster-large div{background-color:#f18017}.marker-cluster{background-clip:padding-box;border-radius:20px}.marker-cluster div{text-align:center;border-radius:15px;width:30px;height:30px;margin-top:5px;margin-left:5px}.marker-cluster span{line-height:30px}");let t,o=!1;return(async()=>{try{const l=await import("./BCTYvPrD.js").then(t=>/* @__PURE__ */e(t.default,1));if(o)return;if("undefined"!=typeof window&&(window.L=l),await Promise.all([import("./CgUphJWo.js").then(t=>/* @__PURE__ */e(t.default,1)),import("./rtH8O6Hc.js")]),o)return;const r=window.L??l;if(!L.current)return;const a=l.map(L.current,{center:S?.center?[S.center.lat??v[0],S.center.lng??v[1]]:v,zoom:S?.zoom??3,minZoom:3,zoomControl:!0,worldCopyJump:!1,maxBounds:l.latLngBounds(k),maxBoundsViscosity:1});l.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{attribution:"&copy; OpenStreetMap contributors",maxZoom:19,noWrap:!0}).addTo(a);const n=l.layerGroup().addTo(a),i="function"==typeof r.heatLayer?r.heatLayer([],{radius:30,blur:30,maxZoom:10,minOpacity:.35}):null;i?.addTo(a);const f="function"==typeof r.markerClusterGroup?r.markerClusterGroup({chunkedLoading:!0,showCoverageOnHover:!1,spiderfyOnMaxZoom:!0,zoomToBoundsOnClick:!0,maxClusterRadius:48}):l.layerGroup();f.addTo(a);const c=()=>{I.current&&clearTimeout(I.current),I.current=setTimeout(()=>{try{sessionStorage.setItem(p,JSON.stringify({center:a.getCenter(),zoom:a.getZoom()}))}catch{}},250)};let s;a.on("zoomend",c),a.on("moveend",c),R.current=a,C.current=r,T.current=n,M.current=i,O.current=f,"undefined"!=typeof ResizeObserver&&L.current&&(s=new ResizeObserver(()=>a.invalidateSize(!1)),s.observe(L.current)),requestAnimationFrame(()=>a.invalidateSize(!1)),B(!0),q(!1),t=()=>{s?.disconnect(),I.current&&clearTimeout(I.current),a.off("zoomend",c),a.off("moveend",c),a.remove(),C.current=null,R.current=null,T.current=null,M.current=null,O.current=null}}finally{o||q(!1)}})(),()=>{o=!0,t?.()}},[S]),o(()=>{if(!D)return;const e=C.current;if(!e)return;const o=R.current;if(T.current?.clearLayers(),O.current?.clearLayers(),null===N&&H.length>0){o&&M.current&&(M.current.setLatLngs?.([]),o.hasLayer(M.current)&&o.removeLayer(M.current));const t=o=>{for(const l of o)if(l.centroid){const[t,o]=l.centroid,r=e.divIcon({className:"",html:`<div style="transform:translate(-50%,-50%);background:${b(l.color,y)};color:#fff;border-radius:20px;padding:5px 10px;font-size:12px;font-weight:600;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,0.25);border:2px solid rgba(255,255,255,0.4);cursor:pointer;display:inline-flex;align-items:center;gap:6px;"><span>${A(l.folder.name)}</span><span style="background:rgba(0,0,0,0.18);border-radius:10px;padding:1px 5px;font-size:10px;">${l.eventCount}</span></div>`,iconSize:[0,0],iconAnchor:[0,0]});e.marker([o,t],{icon:r}).on("click",()=>P(l.folder._id)).addTo(T.current)}else l.children.length>0&&t(l.children)};t(H)}else{if(0===F.length)return;const l=0===H.length&&null===N,r=b(U?.color,y);if(o&&M.current&&(l&&!o.hasLayer(M.current)?M.current.addTo(o):l||(M.current.setLatLngs?.([]),o.hasLayer(M.current)&&o.removeLayer(M.current))),F.forEach(o=>{const l=o.location.x,a=o.location.y,f=e.divIcon({className:"qrati-leaflet-marker-wrapper",html:`<div style="width:36px;height:36px;cursor:pointer;background:${r};border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid white;box-shadow:0 2px 8px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;overflow:hidden;">${m(E)?`<img src="${m(E)}" style="width:24px;height:24px;border-radius:50%;object-fit:cover;transform:rotate(45deg);" />`:""}</div>`,iconSize:[36,36],iconAnchor:[18,36],popupAnchor:[0,-36]}),c=e.marker([a,l],{icon:f}),p=document.createElement("div");p.style.width="fit-content",((e,o,l)=>{t(/* @__PURE__ */n(i,{client:z,children:/* @__PURE__ */n(u,{event:e,onExplore:l})}),o)})(o,p,s),c.bindPopup(p,{closeButton:!0,maxWidth:256}),O.current?.addLayer(c)}),l&&M.current){const e=F.reduce((e,t)=>Math.max(e,t.views??0),1),t=F.map(e=>[e.location.y,e.location.x,e.views??1]);M.current.setOptions?.({radius:30,blur:30,maxZoom:10,minOpacity:.35,max:e}),M.current.setLatLngs?.(t)}if(l&&!j.current&&o&&(j.current=!0,!S)){const t=e.latLngBounds([]);F.forEach(e=>t.extend([e.location.y,e.location.x])),t.isValid()&&o.fitBounds(t,{paddingTopLeft:w.topLeft,paddingBottomRight:w.bottomRight,maxZoom:8})}}},[N,H,F,D,s,E,P,U,S]),o(()=>{if(!D)return;const e=R.current,t=C.current;if(!e||!t)return;if(!W.current&&S)return void(W.current=!0);W.current=!0;const o={paddingTopLeft:w.topLeft,paddingBottomRight:w.bottomRight,duration:3,easeLinearity:1};if(N){const l=g(H,N);if(!l?.folder.boundary?.length)return;const r=t.latLngBounds([]);for(const e of l.folder.boundary)r.extend([e.y,e.x]);r.isValid()&&e.flyToBounds(r,{...o,maxZoom:14})}else{const l=t.latLngBounds([]),r=e=>{for(const t of e)t.centroid?l.extend([t.centroid[1],t.centroid[0]]):r(t.children)};r(H),l.isValid()&&e.flyToBounds(l,{...o,maxZoom:8})}},[N,H,D,S]),/* @__PURE__ */n("div",{class:"relative h-screen w-full sm:h-[calc(100vh-4rem)]",style:f(J),children:[
+/* @__PURE__ */n(h,{positionClass:"absolute top-3 left-16 z-[1000]",folderTree:H,activeFolderId:N,setActiveFolderId:P}),Y&&/* @__PURE__ */n("div",{class:"absolute inset-0 z-10 flex items-center justify-center bg-white/60",children:/* @__PURE__ */n("div",{class:"border-primary size-10 animate-spin rounded-full border-4 border-t-transparent"})}),Z&&/* @__PURE__ */n("div",{class:"absolute inset-0 z-20 flex items-center justify-center bg-white/85",children:/* @__PURE__ */n("div",{class:"flex flex-col items-center gap-3",children:[/* @__PURE__ */n("div",{class:"border-primary size-10 animate-spin rounded-full border-4 border-t-transparent"}),/* @__PURE__ */n("p",{class:"text-sm font-medium text-slate-700",children:"Loading map…"})]})}),
+/* @__PURE__ */n("div",{ref:L,class:"h-full w-full rounded-xl border border-slate-200"})]})};export{E as default};