@zonetrix/viewer 2.3.0 → 2.4.0

package/README.md

@@ -113,7 +113,7 @@ function BookingApp() {
 | `onSelectionChange` | `(seats: SeatData[]) => void` | No | Callback when selection changes |
 | `colorOverrides` | `Partial<ColorSettings>` | No | Custom colors for seat states |
 | `showTooltip` | `boolean` | No | Show tooltips on hover (default: true) |
-| `zoomEnabled` | `boolean` | No | Enable/disable mouse wheel zoom (default: true) |
+| `zoomEnabled` | `boolean` | No | Enable/disable zoom functionality (default: true) |
 | `className` | `string` | No | Custom CSS class for the container |
 | `onConfigLoad` | `(config: SeatMapConfig) => void` | No | Callback when config is loaded |
 | `onError` | `(error: Error) => void` | No | Callback when an error occurs |
@@ -122,6 +122,13 @@ function BookingApp() {
 | `floorSelectorClassName` | `string` | No | Custom CSS class for floor selector |
 | `showAllFloorsOption` | `boolean` | No | Show "All" button in floor selector (default: true) |
 | `allFloorsLabel` | `string` | No | Custom label for "All" button (default: 'All') |
+| `fitToView` | `boolean` | No | Auto-fit content on load (default: true) |
+| `fitPadding` | `number` | No | Padding around content when fitting (default: 40) |
+| `showZoomControls` | `boolean` | No | Show zoom +/- buttons (default: true) |
+| `zoomControlsPosition` | `string` | No | Position: 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' (default: 'bottom-right') |
+| `zoomControlsClassName` | `string` | No | Custom CSS class for zoom controls |
+| `maxZoom` | `number` | No | Maximum zoom level (default: 3) |
+| `zoomStep` | `number` | No | Zoom increment per click (default: 0.25) |
 
 *Note: Either `config` or `configUrl` must be provided.
 
@@ -245,22 +252,33 @@ function SelectionTracker() {
 }
 ```
 
-### 5. Disable Zoom for Mobile
+### 5. Customize Zoom Controls
 
 ```tsx
 import { SeatMapViewer } from '@zonetrix/viewer';
 
-function MobileOptimized() {
-  const isMobile = window.innerWidth < 768;
-
+function CustomZoom() {
   return (
     <SeatMapViewer
       config={venueConfig}
-      zoomEnabled={!isMobile}
+      // Zoom controls appear in bottom-right by default
+      zoomControlsPosition="bottom-left"
+      maxZoom={5}        // Allow up to 5x zoom
+      zoomStep={0.5}     // Larger zoom increments
       onSeatSelect={(seat) => handleSelection(seat)}
     />
   );
 }
+
+// Hide zoom controls entirely
+function NoZoomControls() {
+  return (
+    <SeatMapViewer
+      config={venueConfig}
+      showZoomControls={false}
+    />
+  );
+}
 ```
 
 ### 6. Multi-floor Venue (Built-in Floor Selector)

package/dist/components/SeatMapViewer.d.ts

@@ -23,5 +23,10 @@ export interface SeatMapViewerProps {
     allFloorsLabel?: string;
     fitToView?: boolean;
     fitPadding?: number;
+    showZoomControls?: boolean;
+    zoomControlsPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    zoomControlsClassName?: string;
+    maxZoom?: number;
+    zoomStep?: number;
 }
 export declare const SeatMapViewer: React.FC<SeatMapViewerProps>;

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("react"),v=require("react-konva");function K(i){const[h,d]=t.useState(null),[S,y]=t.useState(!1),[w,x]=t.useState(null),g=async()=>{if(i){y(!0),x(null);try{const f=await fetch(i);if(!f.ok)throw new Error(`Failed to fetch config: ${f.statusText}`);const u=await f.json();d(u)}catch(f){const u=f instanceof Error?f:new Error("Unknown error occurred");x(u),console.error("Failed to fetch seat map config:",u)}finally{y(!1)}}};return t.useEffect(()=>{g()},[i]),{config:h,loading:S,error:w,refetch:g}}const G={canvasBackground:"#1a1a1a",stageColor:"#808080",seatAvailable:"#2C2B30",seatReserved:"#FCEA00",seatSelected:"#3A7DE5",seatUnavailable:"#6b7280",seatHidden:"#4a4a4a",gridLines:"#404040",currency:"KD"},J=t.memo(({seat:i,state:h,colors:d,onClick:S})=>{const x={available:d.seatAvailable,reserved:d.seatReserved,selected:d.seatSelected,unavailable:d.seatUnavailable,hidden:d.seatHidden}[h],g=h==="available"||h==="selected",f=t.useCallback(()=>{g&&S(i)},[i,S,g]),u={x:i.position.x,y:i.position.y,fill:x,stroke:"#ffffff",strokeWidth:1,onClick:f,onTap:f};return i.shape==="circle"?o.jsx(v.Circle,{...u,radius:12}):o.jsx(v.Rect,{...u,width:24,height:24,offsetX:12,offsetY:12,cornerRadius:i.shape==="square"?0:4})});J.displayName="ViewerSeat";const Q=t.memo(({stage:i,stageColor:h})=>o.jsxs(v.Group,{x:i.position.x,y:i.position.y,children:[o.jsx(v.Rect,{width:i.config.width,height:i.config.height,fill:h+"80",stroke:"#ffffff",strokeWidth:2,cornerRadius:10}),o.jsx(v.Text,{text:i.config.label,x:0,y:0,width:i.config.width,height:i.config.height,fontSize:24,fontStyle:"bold",fill:"#ffffff",align:"center",verticalAlign:"middle"})]}));Q.displayName="ViewerStage";const Z=t.memo(({floors:i,currentFloorId:h,onFloorChange:d,showAllOption:S,allLabel:y,position:w,className:x})=>{const g=t.useMemo(()=>[...i].sort((p,I)=>p.order-I.order),[i]),u={position:"absolute",display:"flex",alignItems:"center",gap:"8px",padding:"8px 12px",backgroundColor:"rgba(26, 26, 26, 0.95)",borderRadius:"8px",margin:"12px",zIndex:10,...{"top-left":{top:0,left:0},"top-right":{top:0,right:0},"bottom-left":{bottom:0,left:0},"bottom-right":{bottom:0,right:0}}[w]},Y={padding:"6px 14px",fontSize:"14px",fontWeight:500,border:"1px solid #444",borderRadius:"6px",backgroundColor:"transparent",color:"#fff",cursor:"pointer",transition:"all 0.2s ease"},E={...Y,backgroundColor:"#3A7DE5",borderColor:"#3A7DE5"};return o.jsxs("div",{className:x,style:u,children:[S&&o.jsx("button",{type:"button",onClick:()=>d(null),style:h===null?E:Y,children:y}),g.map(p=>o.jsx("button",{type:"button",onClick:()=>d(p.id),style:h===p.id?E:Y,children:p.name},p.id))]})});Z.displayName="FloorSelectorBar";const Se=({config:i,configUrl:h,floorId:d,onFloorChange:S,reservedSeats:y=[],unavailableSeats:w=[],onSeatSelect:x,onSeatDeselect:g,onSelectionChange:f,colorOverrides:u,showTooltip:Y=!0,zoomEnabled:E=!0,className:p="",onConfigLoad:I,onError:T,showFloorSelector:O,floorSelectorPosition:ee="top-left",floorSelectorClassName:te,showAllFloorsOption:ne=!0,allFloorsLabel:se="All",fitToView:z=!0,fitPadding:W=40})=>{const P=t.useRef(null),[j,oe]=t.useState(new Set),[X,V]=t.useState(1),[F,_]=t.useState({x:0,y:0}),[ie,re]=t.useState(null),[q,U]=t.useState(!1),{config:ae,loading:le,error:N}=K(h),s=i||ae,$=d!==void 0,m=$?d||null:ie,ce=t.useCallback(e=>{$||re(e),S?.(e)},[$,S]),B=s?.floors||[],de=O!==void 0?O:B.length>1,D=t.useMemo(()=>s?{...s.colors,...u}:{...G,...u},[s,u]),k=t.useMemo(()=>{if(!s)return[];let e=s.seats.filter(n=>n.state!=="hidden");return m&&(e=e.filter(n=>n.floorId===m||!n.floorId&&m==="floor_default")),e},[s,m]),L=t.useMemo(()=>s?.stages?m?s.stages.filter(e=>e.floorId===m||!e.floorId&&m==="floor_default"):s.stages:[],[s,m]),b=t.useMemo(()=>{if(!s||k.length===0&&L.length===0)return null;const e=12;let n=1/0,r=1/0,a=-1/0,l=-1/0;return k.forEach(c=>{n=Math.min(n,c.position.x-e),r=Math.min(r,c.position.y-e),a=Math.max(a,c.position.x+e),l=Math.max(l,c.position.y+e)}),L.forEach(c=>{n=Math.min(n,c.position.x),r=Math.min(r,c.position.y),a=Math.max(a,c.position.x+(c.config?.width||200)),l=Math.max(l,c.position.y+(c.config?.height||100))}),{minX:n,minY:r,maxX:a,maxY:l,width:a-n,height:l-r}},[s,k,L]);t.useEffect(()=>{if(!z||q||!s||!b)return;const e=s.canvas.width,n=s.canvas.height,r=e-W*2,a=n-W*2,l=r/b.width,c=a/b.height,M=Math.min(l,c,2),C=b.minX+b.width/2,he=b.minY+b.height/2,pe=e/2,xe=n/2,ge=pe-C*M,me=xe-he*M;V(M),_({x:ge,y:me}),U(!0)},[z,q,s,b,W]),t.useEffect(()=>{z&&U(!1)},[m,z]);const R=t.useMemo(()=>{const e=new Set(y),n=new Set(w);return{reserved:e,unavailable:n}},[y,w]),H=t.useCallback(e=>{const n=e.id,r=e.seatNumber||"";return R.unavailable.has(n)||R.unavailable.has(r)?"unavailable":R.reserved.has(n)||R.reserved.has(r)?"reserved":j.has(n)?"selected":e.state},[R,j]);t.useEffect(()=>{s&&I&&I(s)},[s,I]),t.useEffect(()=>{N&&T&&T(N)},[N,T]);const fe=t.useCallback(e=>{const n=H(e);if(n!=="available"&&n!=="selected")return;const r=j.has(e.id);oe(a=>{const l=new Set(a);return r?l.delete(e.id):l.add(e.id),l}),r?g?.(e):(x?.(e),x||console.log("Seat selected:",e))},[H,j,x,g]),A=t.useMemo(()=>s?k.filter(e=>j.has(e.id)):[],[k,j]);t.useEffect(()=>{f?.(A)},[A,f]);const ue=t.useCallback(e=>{if(!E)return;e.evt.preventDefault();const n=P.current;if(!n)return;const r=X,a=n.getPointerPosition();if(!a)return;const l={x:(a.x-F.x)/r,y:(a.y-F.y)/r},c=e.evt.deltaY>0?-1:1,M=1.05;let C=c>0?r*M:r/M;C=Math.max(.5,Math.min(5,C)),V(C),_({x:a.x-l.x*C,y:a.y-l.y*C})},[E,X,F]);return le?o.jsx("div",{className:`flex items-center justify-center h-full ${p}`,children:o.jsx("p",{children:"Loading seat map..."})}):N?o.jsx("div",{className:`flex items-center justify-center h-full ${p}`,children:o.jsxs("p",{className:"text-red-500",children:["Error loading seat map: ",N.message]})}):s?o.jsxs("div",{className:`relative ${p}`,children:[de&&B.length>0&&o.jsx(Z,{floors:B,currentFloorId:m,onFloorChange:ce,showAllOption:ne,allLabel:se,position:ee,className:te}),o.jsxs(v.Stage,{ref:P,width:s.canvas.width,height:s.canvas.height,scaleX:X,scaleY:X,x:F.x,y:F.y,onWheel:ue,style:{backgroundColor:s.canvas.backgroundColor},children:[o.jsx(v.Layer,{listening:!1,children:L.map(e=>o.jsx(Q,{stage:e,stageColor:D.stageColor},e.id))}),o.jsx(v.Layer,{children:k.map(e=>o.jsx(J,{seat:e,state:H(e),colors:D,onClick:fe},e.id))})]}),A.length>0&&o.jsxs("div",{className:"absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg",children:[o.jsxs("h3",{className:"font-semibold mb-2",children:["Selected Seats (",A.length,")"]}),o.jsx("div",{className:"max-h-48 overflow-y-auto space-y-1",children:A.map(e=>o.jsxs("div",{className:"text-sm",children:[e.seatNumber,e.price&&` - ${D.currency} ${e.price.toFixed(2)}`]},e.id))})]})]}):o.jsx("div",{className:`flex items-center justify-center h-full ${p}`,children:o.jsx("p",{children:"No configuration provided"})})};exports.DEFAULT_COLORS=G;exports.SeatMapViewer=Se;exports.useConfigFetcher=K;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("react"),k=require("react-konva");function P(i){const[h,u]=t.useState(null),[m,S]=t.useState(!1),[C,x]=t.useState(null),b=async()=>{if(i){S(!0),x(null);try{const f=await fetch(i);if(!f.ok)throw new Error(`Failed to fetch config: ${f.statusText}`);const c=await f.json();u(c)}catch(f){const c=f instanceof Error?f:new Error("Unknown error occurred");x(c),console.error("Failed to fetch seat map config:",c)}finally{S(!1)}}};return t.useEffect(()=>{b()},[i]),{config:h,loading:m,error:C,refetch:b}}const G={canvasBackground:"#1a1a1a",stageColor:"#808080",seatAvailable:"#2C2B30",seatReserved:"#FCEA00",seatSelected:"#3A7DE5",seatUnavailable:"#6b7280",seatHidden:"#4a4a4a",gridLines:"#404040",currency:"KD"},J=t.memo(({seat:i,state:h,colors:u,onClick:m})=>{const x={available:u.seatAvailable,reserved:u.seatReserved,selected:u.seatSelected,unavailable:u.seatUnavailable,hidden:u.seatHidden}[h],b=h==="available"||h==="selected",f=t.useCallback(()=>{b&&m(i)},[i,m,b]),c={x:i.position.x,y:i.position.y,fill:x,stroke:"#ffffff",strokeWidth:1,onClick:f,onTap:f};return i.shape==="circle"?o.jsx(k.Circle,{...c,radius:12}):o.jsx(k.Rect,{...c,width:24,height:24,offsetX:12,offsetY:12,cornerRadius:i.shape==="square"?0:4})});J.displayName="ViewerSeat";const Q=t.memo(({stage:i,stageColor:h})=>o.jsxs(k.Group,{x:i.position.x,y:i.position.y,children:[o.jsx(k.Rect,{width:i.config.width,height:i.config.height,fill:h+"80",stroke:"#ffffff",strokeWidth:2,cornerRadius:10}),o.jsx(k.Text,{text:i.config.label,x:0,y:0,width:i.config.width,height:i.config.height,fontSize:24,fontStyle:"bold",fill:"#ffffff",align:"center",verticalAlign:"middle"})]}));Q.displayName="ViewerStage";const ee=t.memo(({floors:i,currentFloorId:h,onFloorChange:u,showAllOption:m,allLabel:S,position:C,className:x})=>{const b=t.useMemo(()=>[...i].sort((p,E)=>p.order-E.order),[i]),c={position:"absolute",display:"flex",alignItems:"center",gap:"8px",padding:"8px 12px",backgroundColor:"rgba(26, 26, 26, 0.95)",borderRadius:"8px",margin:"12px",zIndex:10,...{"top-left":{top:0,left:0},"top-right":{top:0,right:0},"bottom-left":{bottom:0,left:0},"bottom-right":{bottom:0,right:0}}[C]},M={padding:"6px 14px",fontSize:"14px",fontWeight:500,border:"1px solid #444",borderRadius:"6px",backgroundColor:"transparent",color:"#fff",cursor:"pointer",transition:"all 0.2s ease"},y={...M,backgroundColor:"#3A7DE5",borderColor:"#3A7DE5"};return o.jsxs("div",{className:x,style:c,children:[m&&o.jsx("button",{type:"button",onClick:()=>u(null),style:h===null?y:M,children:S}),b.map(p=>o.jsx("button",{type:"button",onClick:()=>u(p.id),style:h===p.id?y:M,children:p.name},p.id))]})});ee.displayName="FloorSelectorBar";const te=t.memo(({scale:i,minScale:h,maxScale:u,onZoomIn:m,onZoomOut:S,position:C,className:x})=>{const f={position:"absolute",display:"flex",flexDirection:"column",gap:"4px",padding:"8px",backgroundColor:"rgba(26, 26, 26, 0.95)",borderRadius:"8px",margin:"12px",zIndex:10,...{"top-left":{top:0,left:0},"top-right":{top:0,right:0},"bottom-left":{bottom:0,left:0},"bottom-right":{bottom:0,right:0}}[C]},c={width:"36px",height:"36px",fontSize:"20px",fontWeight:"bold",border:"1px solid #444",borderRadius:"6px",backgroundColor:"transparent",color:"#fff",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.2s ease"},M={...c,opacity:.4,cursor:"not-allowed"},y=i<u,p=i>h;return o.jsxs("div",{className:x,style:f,children:[o.jsx("button",{type:"button",onClick:m,disabled:!y,style:y?c:M,title:"Zoom In",children:"+"}),o.jsx("button",{type:"button",onClick:S,disabled:!p,style:p?c:M,title:"Zoom Out",children:"−"})]})});te.displayName="ZoomControls";const Ee=({config:i,configUrl:h,floorId:u,onFloorChange:m,reservedSeats:S=[],unavailableSeats:C=[],onSeatSelect:x,onSeatDeselect:b,onSelectionChange:f,colorOverrides:c,showTooltip:M=!0,zoomEnabled:y=!0,className:p="",onConfigLoad:E,onError:W,showFloorSelector:q,floorSelectorPosition:ne="top-left",floorSelectorClassName:oe,showAllFloorsOption:se=!0,allFloorsLabel:ie="All",fitToView:Y=!0,fitPadding:B=40,showZoomControls:ae=!0,zoomControlsPosition:re="bottom-right",zoomControlsClassName:le,maxZoom:F=3,zoomStep:O=.25})=>{const ce=t.useRef(null),[I,de]=t.useState(new Set),[g,H]=t.useState(1),[w,T]=t.useState({x:0,y:0}),[ue,fe]=t.useState(null),[U,K]=t.useState(!1),[he,pe]=t.useState(1),{config:ge,loading:xe,error:R}=P(h),n=i||ge,$=u!==void 0,v=$?u||null:ue,me=t.useCallback(e=>{$||fe(e),m?.(e)},[$,m]),Z=n?.floors||[],be=q!==void 0?q:Z.length>1,z=t.useMemo(()=>n?{...n.colors,...c}:{...G,...c},[n,c]),N=t.useMemo(()=>{if(!n)return[];let e=n.seats.filter(s=>s.state!=="hidden");return v&&(e=e.filter(s=>s.floorId===v||!s.floorId&&v==="floor_default")),e},[n,v]),D=t.useMemo(()=>n?.stages?v?n.stages.filter(e=>e.floorId===v||!e.floorId&&v==="floor_default"):n.stages:[],[n,v]),j=t.useMemo(()=>{if(!n||N.length===0&&D.length===0)return null;const e=12;let s=1/0,r=1/0,d=-1/0,l=-1/0;return N.forEach(a=>{s=Math.min(s,a.position.x-e),r=Math.min(r,a.position.y-e),d=Math.max(d,a.position.x+e),l=Math.max(l,a.position.y+e)}),D.forEach(a=>{s=Math.min(s,a.position.x),r=Math.min(r,a.position.y),d=Math.max(d,a.position.x+(a.config?.width||200)),l=Math.max(l,a.position.y+(a.config?.height||100))}),{minX:s,minY:r,maxX:d,maxY:l,width:d-s,height:l-r}},[n,N,D]);t.useEffect(()=>{if(!Y||U||!n||!j)return;const e=n.canvas.width,s=n.canvas.height,r=e-B*2,d=s-B*2,l=r/j.width,a=d/j.height,L=Math.min(l,a,F),we=j.minX+j.width/2,je=j.minY+j.height/2,ke=e/2,Me=s/2,Ie=ke-we*L,Ne=Me-je*L;H(L),T({x:Ie,y:Ne}),pe(L),K(!0)},[Y,U,n,j,B,F]),t.useEffect(()=>{Y&&K(!1)},[v,Y]);const A=t.useMemo(()=>{const e=new Set(S),s=new Set(C);return{reserved:e,unavailable:s}},[S,C]),V=t.useCallback(e=>{const s=e.id,r=e.seatNumber||"";return A.unavailable.has(s)||A.unavailable.has(r)?"unavailable":A.reserved.has(s)||A.reserved.has(r)?"reserved":I.has(s)?"selected":e.state},[A,I]);t.useEffect(()=>{n&&E&&E(n)},[n,E]),t.useEffect(()=>{R&&W&&W(R)},[R,W]);const ye=t.useCallback(e=>{const s=V(e);if(s!=="available"&&s!=="selected")return;const r=I.has(e.id);de(d=>{const l=new Set(d);return r?l.delete(e.id):l.add(e.id),l}),r?b?.(e):(x?.(e),x||console.log("Seat selected:",e))},[V,I,x,b]),X=t.useMemo(()=>n?N.filter(e=>I.has(e.id)):[],[N,I]);t.useEffect(()=>{f?.(X)},[X,f]);const _=he,Se=t.useCallback(()=>{if(!y)return;const e=Math.min(g+O,F);if(e!==g){const s=n?.canvas.width||800,r=n?.canvas.height||600,d=s/2,l=r/2,a={x:(d-w.x)/g,y:(l-w.y)/g};H(e),T({x:d-a.x*e,y:l-a.y*e})}},[y,g,O,F,n,w]),ve=t.useCallback(()=>{if(!y)return;const e=Math.max(g-O,_);if(e!==g){const s=n?.canvas.width||800,r=n?.canvas.height||600,d=s/2,l=r/2,a={x:(d-w.x)/g,y:(l-w.y)/g};H(e),T({x:d-a.x*e,y:l-a.y*e})}},[y,g,O,_,n,w]),Ce=t.useCallback(e=>{T({x:e.target.x(),y:e.target.y()})},[]);return xe?o.jsx("div",{className:`flex items-center justify-center h-full ${p}`,children:o.jsx("p",{children:"Loading seat map..."})}):R?o.jsx("div",{className:`flex items-center justify-center h-full ${p}`,children:o.jsxs("p",{className:"text-red-500",children:["Error loading seat map: ",R.message]})}):n?o.jsxs("div",{className:`relative ${p}`,children:[be&&Z.length>0&&o.jsx(ee,{floors:Z,currentFloorId:v,onFloorChange:me,showAllOption:se,allLabel:ie,position:ne,className:oe}),o.jsxs(k.Stage,{ref:ce,width:n.canvas.width,height:n.canvas.height,scaleX:g,scaleY:g,x:w.x,y:w.y,draggable:!0,onDragEnd:Ce,style:{backgroundColor:n.canvas.backgroundColor,cursor:"grab"},children:[o.jsx(k.Layer,{listening:!1,children:D.map(e=>o.jsx(Q,{stage:e,stageColor:z.stageColor},e.id))}),o.jsx(k.Layer,{children:N.map(e=>o.jsx(J,{seat:e,state:V(e),colors:z,onClick:ye},e.id))})]}),ae&&y&&o.jsx(te,{scale:g,minScale:_,maxScale:F,onZoomIn:Se,onZoomOut:ve,position:re,className:le}),X.length>0&&o.jsxs("div",{className:"absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg",children:[o.jsxs("h3",{className:"font-semibold mb-2",children:["Selected Seats (",X.length,")"]}),o.jsx("div",{className:"max-h-48 overflow-y-auto space-y-1",children:X.map(e=>o.jsxs("div",{className:"text-sm",children:[e.seatNumber,e.price&&` - ${z.currency} ${e.price.toFixed(2)}`]},e.id))})]})]}):o.jsx("div",{className:`flex items-center justify-center h-full ${p}`,children:o.jsx("p",{children:"No configuration provided"})})};exports.DEFAULT_COLORS=G;exports.SeatMapViewer=Ee;exports.useConfigFetcher=P;

package/dist/index.mjs

@@ -1,34 +1,34 @@
-import { jsx as r, jsxs as v } from "react/jsx-runtime";
-import { useState as S, useEffect as F, useRef as we, useCallback as W, useMemo as k, memo as O } from "react";
-import { Stage as Ce, Layer as Z, Group as ke, Rect as ee, Text as Ie, Circle as Me } from "react-konva";
-function Ne(i) {
-  const [h, c] = S(null), [y, x] = S(!1), [w, p] = S(null), g = async () => {
-    if (i) {
-      x(!0), p(null);
+import { jsx as i, jsxs as w } from "react/jsx-runtime";
+import { useState as C, useEffect as Y, useRef as Et, useCallback as M, useMemo as F, memo as Z } from "react";
+import { Stage as Wt, Layer as tt, Group as jt, Rect as et, Text as Bt, Circle as Dt } from "react-konva";
+function Ht(o) {
+  const [f, d] = C(null), [m, x] = C(!1), [S, g] = C(null), y = async () => {
+    if (o) {
+      x(!0), g(null);
       try {
-        const d = await fetch(i);
-        if (!d.ok)
-          throw new Error(`Failed to fetch config: ${d.statusText}`);
-        const f = await d.json();
-        c(f);
-      } catch (d) {
-        const f = d instanceof Error ? d : new Error("Unknown error occurred");
-        p(f), console.error("Failed to fetch seat map config:", f);
+        const h = await fetch(o);
+        if (!h.ok)
+          throw new Error(`Failed to fetch config: ${h.statusText}`);
+        const l = await h.json();
+        d(l);
+      } catch (h) {
+        const l = h instanceof Error ? h : new Error("Unknown error occurred");
+        g(l), console.error("Failed to fetch seat map config:", l);
       } finally {
         x(!1);
       }
     }
   };
-  return F(() => {
-    g();
-  }, [i]), {
-    config: h,
-    loading: y,
-    error: w,
-    refetch: g
+  return Y(() => {
+    y();
+  }, [o]), {
+    config: f,
+    loading: m,
+    error: S,
+    refetch: y
   };
 }
-const Fe = {
+const Tt = {
   canvasBackground: "#1a1a1a",
   stageColor: "#808080",
   seatAvailable: "#2C2B30",
@@ -38,64 +38,64 @@ const Fe = {
   seatHidden: "#4a4a4a",
   gridLines: "#404040",
   currency: "KD"
-}, te = O(({ seat: i, state: h, colors: c, onClick: y }) => {
-  const p = {
-    available: c.seatAvailable,
-    reserved: c.seatReserved,
-    selected: c.seatSelected,
-    unavailable: c.seatUnavailable,
-    hidden: c.seatHidden
+}, nt = Z(({ seat: o, state: f, colors: d, onClick: m }) => {
+  const g = {
+    available: d.seatAvailable,
+    reserved: d.seatReserved,
+    selected: d.seatSelected,
+    unavailable: d.seatUnavailable,
+    hidden: d.seatHidden
     // Hidden seats are filtered out, but included for type safety
-  }[h], g = h === "available" || h === "selected", d = W(() => {
-    g && y(i);
-  }, [i, y, g]), f = {
-    x: i.position.x,
-    y: i.position.y,
-    fill: p,
+  }[f], y = f === "available" || f === "selected", h = M(() => {
+    y && m(o);
+  }, [o, m, y]), l = {
+    x: o.position.x,
+    y: o.position.y,
+    fill: g,
     stroke: "#ffffff",
     strokeWidth: 1,
-    onClick: d,
-    onTap: d
+    onClick: h,
+    onTap: h
   };
-  return i.shape === "circle" ? /* @__PURE__ */ r(
-    Me,
+  return o.shape === "circle" ? /* @__PURE__ */ i(
+    Dt,
     {
-      ...f,
+      ...l,
       radius: 12
     }
-  ) : /* @__PURE__ */ r(
-    ee,
+  ) : /* @__PURE__ */ i(
+    et,
     {
-      ...f,
+      ...l,
       width: 24,
       height: 24,
       offsetX: 12,
       offsetY: 12,
-      cornerRadius: i.shape === "square" ? 0 : 4
+      cornerRadius: o.shape === "square" ? 0 : 4
     }
   );
 });
-te.displayName = "ViewerSeat";
-const ne = O(({ stage: i, stageColor: h }) => /* @__PURE__ */ v(ke, { x: i.position.x, y: i.position.y, children: [
-  /* @__PURE__ */ r(
-    ee,
+nt.displayName = "ViewerSeat";
+const ot = Z(({ stage: o, stageColor: f }) => /* @__PURE__ */ w(jt, { x: o.position.x, y: o.position.y, children: [
+  /* @__PURE__ */ i(
+    et,
     {
-      width: i.config.width,
-      height: i.config.height,
-      fill: h + "80",
+      width: o.config.width,
+      height: o.config.height,
+      fill: f + "80",
       stroke: "#ffffff",
       strokeWidth: 2,
       cornerRadius: 10
     }
   ),
-  /* @__PURE__ */ r(
-    Ie,
+  /* @__PURE__ */ i(
+    Bt,
     {
-      text: i.config.label,
+      text: o.config.label,
       x: 0,
       y: 0,
-      width: i.config.width,
-      height: i.config.height,
+      width: o.config.width,
+      height: o.config.height,
       fontSize: 24,
       fontStyle: "bold",
       fill: "#ffffff",
@@ -104,20 +104,20 @@ const ne = O(({ stage: i, stageColor: h }) => /* @__PURE__ */ v(ke, { x: i.posit
     }
   )
 ] }));
-ne.displayName = "ViewerStage";
-const ie = O(({
-  floors: i,
-  currentFloorId: h,
-  onFloorChange: c,
-  showAllOption: y,
+ot.displayName = "ViewerStage";
+const it = Z(({
+  floors: o,
+  currentFloorId: f,
+  onFloorChange: d,
+  showAllOption: m,
   allLabel: x,
-  position: w,
-  className: p
+  position: S,
+  className: g
 }) => {
-  const g = k(
-    () => [...i].sort((u, E) => u.order - E.order),
-    [i]
-  ), f = {
+  const y = F(
+    () => [...o].sort((u, A) => u.order - A.order),
+    [o]
+  ), l = {
     position: "absolute",
     display: "flex",
     alignItems: "center",
@@ -132,8 +132,8 @@ const ie = O(({
       "top-right": { top: 0, right: 0 },
       "bottom-left": { bottom: 0, left: 0 },
       "bottom-right": { bottom: 0, right: 0 }
-    }[w]
-  }, $ = {
+    }[S]
+  }, N = {
     padding: "6px 14px",
     fontSize: "14px",
     fontWeight: 500,
@@ -143,197 +143,301 @@ const ie = O(({
     color: "#fff",
     cursor: "pointer",
     transition: "all 0.2s ease"
-  }, A = {
-    ...$,
+  }, b = {
+    ...N,
     backgroundColor: "#3A7DE5",
     borderColor: "#3A7DE5"
   };
-  return /* @__PURE__ */ v("div", { className: p, style: f, children: [
-    y && /* @__PURE__ */ r(
+  return /* @__PURE__ */ w("div", { className: g, style: l, children: [
+    m && /* @__PURE__ */ i(
       "button",
       {
         type: "button",
-        onClick: () => c(null),
-        style: h === null ? A : $,
+        onClick: () => d(null),
+        style: f === null ? b : N,
         children: x
       }
     ),
-    g.map((u) => /* @__PURE__ */ r(
+    y.map((u) => /* @__PURE__ */ i(
       "button",
       {
         type: "button",
-        onClick: () => c(u.id),
-        style: h === u.id ? A : $,
+        onClick: () => d(u.id),
+        style: f === u.id ? b : N,
         children: u.name
       },
       u.id
     ))
   ] });
 });
-ie.displayName = "FloorSelectorBar";
-const Ye = ({
-  config: i,
-  configUrl: h,
-  floorId: c,
-  onFloorChange: y,
+it.displayName = "FloorSelectorBar";
+const st = Z(({
+  scale: o,
+  minScale: f,
+  maxScale: d,
+  onZoomIn: m,
+  onZoomOut: x,
+  position: S,
+  className: g
+}) => {
+  const h = {
+    position: "absolute",
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px",
+    padding: "8px",
+    backgroundColor: "rgba(26, 26, 26, 0.95)",
+    borderRadius: "8px",
+    margin: "12px",
+    zIndex: 10,
+    ...{
+      "top-left": { top: 0, left: 0 },
+      "top-right": { top: 0, right: 0 },
+      "bottom-left": { bottom: 0, left: 0 },
+      "bottom-right": { bottom: 0, right: 0 }
+    }[S]
+  }, l = {
+    width: "36px",
+    height: "36px",
+    fontSize: "20px",
+    fontWeight: "bold",
+    border: "1px solid #444",
+    borderRadius: "6px",
+    backgroundColor: "transparent",
+    color: "#fff",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "all 0.2s ease"
+  }, N = {
+    ...l,
+    opacity: 0.4,
+    cursor: "not-allowed"
+  }, b = o < d, u = o > f;
+  return /* @__PURE__ */ w("div", { className: g, style: h, children: [
+    /* @__PURE__ */ i(
+      "button",
+      {
+        type: "button",
+        onClick: m,
+        disabled: !b,
+        style: b ? l : N,
+        title: "Zoom In",
+        children: "+"
+      }
+    ),
+    /* @__PURE__ */ i(
+      "button",
+      {
+        type: "button",
+        onClick: x,
+        disabled: !u,
+        style: u ? l : N,
+        title: "Zoom Out",
+        children: "−"
+      }
+    )
+  ] });
+});
+st.displayName = "ZoomControls";
+const zt = ({
+  config: o,
+  configUrl: f,
+  floorId: d,
+  onFloorChange: m,
   reservedSeats: x = [],
-  unavailableSeats: w = [],
-  onSeatSelect: p,
-  onSeatDeselect: g,
-  onSelectionChange: d,
-  colorOverrides: f,
-  showTooltip: $ = !0,
-  zoomEnabled: A = !0,
+  unavailableSeats: S = [],
+  onSeatSelect: g,
+  onSeatDeselect: y,
+  onSelectionChange: h,
+  colorOverrides: l,
+  showTooltip: N = !0,
+  zoomEnabled: b = !0,
   className: u = "",
-  onConfigLoad: E,
-  onError: D,
+  onConfigLoad: A,
+  onError: z,
   // Floor selector props
-  showFloorSelector: U,
-  floorSelectorPosition: oe = "top-left",
-  floorSelectorClassName: re,
-  showAllFloorsOption: se = !0,
-  allFloorsLabel: ae = "All",
-  fitToView: j = !0,
-  fitPadding: H = 40
+  showFloorSelector: P,
+  floorSelectorPosition: rt = "top-left",
+  floorSelectorClassName: at,
+  showAllFloorsOption: lt = !0,
+  allFloorsLabel: ct = "All",
+  fitToView: D = !0,
+  fitPadding: L = 40,
+  // Zoom controls
+  showZoomControls: dt = !0,
+  zoomControlsPosition: ht = "bottom-right",
+  zoomControlsClassName: ft,
+  maxZoom: E = 3,
+  zoomStep: H = 0.25
 }) => {
-  const q = we(null), [I, le] = S(/* @__PURE__ */ new Set()), [B, G] = S(1), [R, K] = S({ x: 0, y: 0 }), [ce, de] = S(null), [J, Q] = S(!1), { config: fe, loading: he, error: Y } = Ne(h), n = i || fe, L = c !== void 0, m = L ? c || null : ce, ue = W((e) => {
-    L || de(e), y?.(e);
-  }, [L, y]), P = n?.floors || [], pe = U !== void 0 ? U : P.length > 1, V = k(
-    () => n ? { ...n.colors, ...f } : { ...Fe, ...f },
-    [n, f]
-  ), M = k(() => {
-    if (!n) return [];
-    let e = n.seats.filter((t) => t.state !== "hidden");
-    return m && (e = e.filter(
-      (t) => t.floorId === m || !t.floorId && m === "floor_default"
-    )), e;
-  }, [n, m]), T = k(() => n?.stages ? m ? n.stages.filter(
-    (e) => e.floorId === m || !e.floorId && m === "floor_default"
-  ) : n.stages : [], [n, m]), b = k(() => {
-    if (!n || M.length === 0 && T.length === 0)
+  const ut = Et(null), [R, pt] = C(/* @__PURE__ */ new Set()), [p, V] = C(1), [k, T] = C({ x: 0, y: 0 }), [gt, mt] = C(null), [J, Q] = C(!1), [yt, bt] = C(1), { config: xt, loading: vt, error: W } = Ht(f), e = o || xt, _ = d !== void 0, v = _ ? d || null : gt, St = M((t) => {
+    _ || mt(t), m?.(t);
+  }, [_, m]), U = e?.floors || [], wt = P !== void 0 ? P : U.length > 1, q = F(
+    () => e ? { ...e.colors, ...l } : { ...Tt, ...l },
+    [e, l]
+  ), X = F(() => {
+    if (!e) return [];
+    let t = e.seats.filter((n) => n.state !== "hidden");
+    return v && (t = t.filter(
+      (n) => n.floorId === v || !n.floorId && v === "floor_default"
+    )), t;
+  }, [e, v]), $ = F(() => e?.stages ? v ? e.stages.filter(
+    (t) => t.floorId === v || !t.floorId && v === "floor_default"
+  ) : e.stages : [], [e, v]), I = F(() => {
+    if (!e || X.length === 0 && $.length === 0)
       return null;
-    const e = 12;
-    let t = 1 / 0, o = 1 / 0, s = -1 / 0, a = -1 / 0;
-    return M.forEach((l) => {
-      t = Math.min(t, l.position.x - e), o = Math.min(o, l.position.y - e), s = Math.max(s, l.position.x + e), a = Math.max(a, l.position.y + e);
-    }), T.forEach((l) => {
-      t = Math.min(t, l.position.x), o = Math.min(o, l.position.y), s = Math.max(s, l.position.x + (l.config?.width || 200)), a = Math.max(a, l.position.y + (l.config?.height || 100));
-    }), { minX: t, minY: o, maxX: s, maxY: a, width: s - t, height: a - o };
-  }, [n, M, T]);
-  F(() => {
-    if (!j || J || !n || !b) return;
-    const e = n.canvas.width, t = n.canvas.height, o = e - H * 2, s = t - H * 2, a = o / b.width, l = s / b.height, N = Math.min(a, l, 2), C = b.minX + b.width / 2, ye = b.minY + b.height / 2, xe = e / 2, be = t / 2, ve = xe - C * N, Se = be - ye * N;
-    G(N), K({ x: ve, y: Se }), Q(!0);
-  }, [j, J, n, b, H]), F(() => {
-    j && Q(!1);
-  }, [m, j]);
-  const z = k(() => {
-    const e = new Set(x), t = new Set(w);
-    return { reserved: e, unavailable: t };
-  }, [x, w]), _ = W((e) => {
-    const t = e.id, o = e.seatNumber || "";
-    return z.unavailable.has(t) || z.unavailable.has(o) ? "unavailable" : z.reserved.has(t) || z.reserved.has(o) ? "reserved" : I.has(t) ? "selected" : e.state;
-  }, [z, I]);
-  F(() => {
-    n && E && E(n);
-  }, [n, E]), F(() => {
-    Y && D && D(Y);
-  }, [Y, D]);
-  const ge = W((e) => {
-    const t = _(e);
-    if (t !== "available" && t !== "selected")
+    const t = 12;
+    let n = 1 / 0, r = 1 / 0, c = -1 / 0, a = -1 / 0;
+    return X.forEach((s) => {
+      n = Math.min(n, s.position.x - t), r = Math.min(r, s.position.y - t), c = Math.max(c, s.position.x + t), a = Math.max(a, s.position.y + t);
+    }), $.forEach((s) => {
+      n = Math.min(n, s.position.x), r = Math.min(r, s.position.y), c = Math.max(c, s.position.x + (s.config?.width || 200)), a = Math.max(a, s.position.y + (s.config?.height || 100));
+    }), { minX: n, minY: r, maxX: c, maxY: a, width: c - n, height: a - r };
+  }, [e, X, $]);
+  Y(() => {
+    if (!D || J || !e || !I) return;
+    const t = e.canvas.width, n = e.canvas.height, r = t - L * 2, c = n - L * 2, a = r / I.width, s = c / I.height, O = Math.min(a, s, E), Mt = I.minX + I.width / 2, Ft = I.minY + I.height / 2, Rt = t / 2, Xt = n / 2, Yt = Rt - Mt * O, At = Xt - Ft * O;
+    V(O), T({ x: Yt, y: At }), bt(O), Q(!0);
+  }, [D, J, e, I, L, E]), Y(() => {
+    D && Q(!1);
+  }, [v, D]);
+  const j = F(() => {
+    const t = new Set(x), n = new Set(S);
+    return { reserved: t, unavailable: n };
+  }, [x, S]), G = M((t) => {
+    const n = t.id, r = t.seatNumber || "";
+    return j.unavailable.has(n) || j.unavailable.has(r) ? "unavailable" : j.reserved.has(n) || j.reserved.has(r) ? "reserved" : R.has(n) ? "selected" : t.state;
+  }, [j, R]);
+  Y(() => {
+    e && A && A(e);
+  }, [e, A]), Y(() => {
+    W && z && z(W);
+  }, [W, z]);
+  const Ct = M((t) => {
+    const n = G(t);
+    if (n !== "available" && n !== "selected")
       return;
-    const o = I.has(e.id);
-    le((s) => {
-      const a = new Set(s);
-      return o ? a.delete(e.id) : a.add(e.id), a;
-    }), o ? g?.(e) : (p?.(e), p || console.log("Seat selected:", e));
-  }, [_, I, p, g]), X = k(() => n ? M.filter((e) => I.has(e.id)) : [], [M, I]);
-  F(() => {
-    d?.(X);
-  }, [X, d]);
-  const me = W((e) => {
-    if (!A) return;
-    e.evt.preventDefault();
-    const t = q.current;
-    if (!t) return;
-    const o = B, s = t.getPointerPosition();
-    if (!s) return;
-    const a = {
-      x: (s.x - R.x) / o,
-      y: (s.y - R.y) / o
-    }, l = e.evt.deltaY > 0 ? -1 : 1, N = 1.05;
-    let C = l > 0 ? o * N : o / N;
-    C = Math.max(0.5, Math.min(5, C)), G(C), K({
-      x: s.x - a.x * C,
-      y: s.y - a.y * C
+    const r = R.has(t.id);
+    pt((c) => {
+      const a = new Set(c);
+      return r ? a.delete(t.id) : a.add(t.id), a;
+    }), r ? y?.(t) : (g?.(t), g || console.log("Seat selected:", t));
+  }, [G, R, g, y]), B = F(() => e ? X.filter((t) => R.has(t.id)) : [], [X, R]);
+  Y(() => {
+    h?.(B);
+  }, [B, h]);
+  const K = yt, kt = M(() => {
+    if (!b) return;
+    const t = Math.min(p + H, E);
+    if (t !== p) {
+      const n = e?.canvas.width || 800, r = e?.canvas.height || 600, c = n / 2, a = r / 2, s = {
+        x: (c - k.x) / p,
+        y: (a - k.y) / p
+      };
+      V(t), T({
+        x: c - s.x * t,
+        y: a - s.y * t
+      });
+    }
+  }, [b, p, H, E, e, k]), It = M(() => {
+    if (!b) return;
+    const t = Math.max(p - H, K);
+    if (t !== p) {
+      const n = e?.canvas.width || 800, r = e?.canvas.height || 600, c = n / 2, a = r / 2, s = {
+        x: (c - k.x) / p,
+        y: (a - k.y) / p
+      };
+      V(t), T({
+        x: c - s.x * t,
+        y: a - s.y * t
+      });
+    }
+  }, [b, p, H, K, e, k]), Nt = M((t) => {
+    T({
+      x: t.target.x(),
+      y: t.target.y()
     });
-  }, [A, B, R]);
-  return he ? /* @__PURE__ */ r("div", { className: `flex items-center justify-center h-full ${u}`, children: /* @__PURE__ */ r("p", { children: "Loading seat map..." }) }) : Y ? /* @__PURE__ */ r("div", { className: `flex items-center justify-center h-full ${u}`, children: /* @__PURE__ */ v("p", { className: "text-red-500", children: [
+  }, []);
+  return vt ? /* @__PURE__ */ i("div", { className: `flex items-center justify-center h-full ${u}`, children: /* @__PURE__ */ i("p", { children: "Loading seat map..." }) }) : W ? /* @__PURE__ */ i("div", { className: `flex items-center justify-center h-full ${u}`, children: /* @__PURE__ */ w("p", { className: "text-red-500", children: [
     "Error loading seat map: ",
-    Y.message
-  ] }) }) : n ? /* @__PURE__ */ v("div", { className: `relative ${u}`, children: [
-    pe && P.length > 0 && /* @__PURE__ */ r(
-      ie,
+    W.message
+  ] }) }) : e ? /* @__PURE__ */ w("div", { className: `relative ${u}`, children: [
+    wt && U.length > 0 && /* @__PURE__ */ i(
+      it,
       {
-        floors: P,
-        currentFloorId: m,
-        onFloorChange: ue,
-        showAllOption: se,
-        allLabel: ae,
-        position: oe,
-        className: re
+        floors: U,
+        currentFloorId: v,
+        onFloorChange: St,
+        showAllOption: lt,
+        allLabel: ct,
+        position: rt,
+        className: at
       }
     ),
-    /* @__PURE__ */ v(
-      Ce,
+    /* @__PURE__ */ w(
+      Wt,
       {
-        ref: q,
-        width: n.canvas.width,
-        height: n.canvas.height,
-        scaleX: B,
-        scaleY: B,
-        x: R.x,
-        y: R.y,
-        onWheel: me,
-        style: { backgroundColor: n.canvas.backgroundColor },
+        ref: ut,
+        width: e.canvas.width,
+        height: e.canvas.height,
+        scaleX: p,
+        scaleY: p,
+        x: k.x,
+        y: k.y,
+        draggable: !0,
+        onDragEnd: Nt,
+        style: { backgroundColor: e.canvas.backgroundColor, cursor: "grab" },
         children: [
-          /* @__PURE__ */ r(Z, { listening: !1, children: T.map((e) => /* @__PURE__ */ r(
-            ne,
+          /* @__PURE__ */ i(tt, { listening: !1, children: $.map((t) => /* @__PURE__ */ i(
+            ot,
             {
-              stage: e,
-              stageColor: V.stageColor
+              stage: t,
+              stageColor: q.stageColor
             },
-            e.id
+            t.id
           )) }),
-          /* @__PURE__ */ r(Z, { children: M.map((e) => /* @__PURE__ */ r(
-            te,
+          /* @__PURE__ */ i(tt, { children: X.map((t) => /* @__PURE__ */ i(
+            nt,
             {
-              seat: e,
-              state: _(e),
-              colors: V,
-              onClick: ge
+              seat: t,
+              state: G(t),
+              colors: q,
+              onClick: Ct
             },
-            e.id
+            t.id
           )) })
         ]
       }
     ),
-    X.length > 0 && /* @__PURE__ */ v("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
-      /* @__PURE__ */ v("h3", { className: "font-semibold mb-2", children: [
+    dt && b && /* @__PURE__ */ i(
+      st,
+      {
+        scale: p,
+        minScale: K,
+        maxScale: E,
+        onZoomIn: kt,
+        onZoomOut: It,
+        position: ht,
+        className: ft
+      }
+    ),
+    B.length > 0 && /* @__PURE__ */ w("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
+      /* @__PURE__ */ w("h3", { className: "font-semibold mb-2", children: [
         "Selected Seats (",
-        X.length,
+        B.length,
         ")"
       ] }),
-      /* @__PURE__ */ r("div", { className: "max-h-48 overflow-y-auto space-y-1", children: X.map((e) => /* @__PURE__ */ v("div", { className: "text-sm", children: [
-        e.seatNumber,
-        e.price && ` - ${V.currency} ${e.price.toFixed(2)}`
-      ] }, e.id)) })
+      /* @__PURE__ */ i("div", { className: "max-h-48 overflow-y-auto space-y-1", children: B.map((t) => /* @__PURE__ */ w("div", { className: "text-sm", children: [
+        t.seatNumber,
+        t.price && ` - ${q.currency} ${t.price.toFixed(2)}`
+      ] }, t.id)) })
     ] })
-  ] }) : /* @__PURE__ */ r("div", { className: `flex items-center justify-center h-full ${u}`, children: /* @__PURE__ */ r("p", { children: "No configuration provided" }) });
+  ] }) : /* @__PURE__ */ i("div", { className: `flex items-center justify-center h-full ${u}`, children: /* @__PURE__ */ i("p", { children: "No configuration provided" }) });
 };
 export {
-  Fe as DEFAULT_COLORS,
-  Ye as SeatMapViewer,
-  Ne as useConfigFetcher
+  Tt as DEFAULT_COLORS,
+  zt as SeatMapViewer,
+  Ht as useConfigFetcher
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zonetrix/viewer",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "type": "module",
   "description": "Lightweight React component for rendering interactive seat maps",
   "main": "./dist/index.js",