@zonetrix/viewer 2.2.0 → 2.4.0

package/README.md

@@ -49,7 +49,8 @@ import type {
   SeatShape,
   SeatData,
   SeatMapConfig,
-  ColorSettings
+  ColorSettings,
+  FloorConfig
 } from '@zonetrix/viewer';
 
 // Hooks
@@ -103,7 +104,7 @@ function BookingApp() {
 |------|------|----------|-------------|
 | `config` | `SeatMapConfig` | No* | Seat map configuration object |
 | `configUrl` | `string` | No* | URL to fetch configuration from |
-| `floorId` | `string` | No | Filter seats/stages by floor ID |
+| `floorId` | `string` | No | Filter seats/stages by floor ID (controlled mode) |
 | `onFloorChange` | `(floorId: string) => void` | No | Callback when floor changes |
 | `reservedSeats` | `string[]` | No | Array of seat IDs/numbers to mark as reserved |
 | `unavailableSeats` | `string[]` | No | Array of seat IDs/numbers to mark as unavailable |
@@ -112,10 +113,22 @@ 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 |
+| `showFloorSelector` | `boolean` | No | Show/hide built-in floor selector (default: true when floors > 1) |
+| `floorSelectorPosition` | `string` | No | Position: 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' |
+| `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.
 
@@ -239,37 +252,72 @@ 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}
+      // 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)
 
+The viewer includes a built-in floor selector that automatically appears when your config has multiple floors.
+
+```tsx
+import { SeatMapViewer } from '@zonetrix/viewer';
+
+function MultiFloorVenue() {
   return (
     <SeatMapViewer
       config={venueConfig}
-      zoomEnabled={!isMobile}
       onSeatSelect={(seat) => handleSelection(seat)}
+      // Floor selector auto-shows when config.floors.length > 1
+      // Customize position and labels:
+      floorSelectorPosition="top-right"
+      allFloorsLabel="All Floors"
     />
   );
 }
 ```
 
-### 6. Multi-floor Venue
+#### Custom Floor Selector (Controlled Mode)
+
+For full control over the floor selector UI, use controlled mode:
 
 ```tsx
 import { useState } from 'react';
 import { SeatMapViewer } from '@zonetrix/viewer';
 
-function MultiFloorVenue() {
-  const [currentFloor, setCurrentFloor] = useState('floor_1');
+function CustomFloorSelector() {
+  const [currentFloor, setCurrentFloor] = useState<string | null>(null);
 
   return (
     <div>
-      {/* Floor selector */}
+      {/* Your custom floor selector */}
       <div className="floor-tabs">
+        <button onClick={() => setCurrentFloor(null)}>All</button>
         {venueConfig.floors?.map((floor) => (
           <button
             key={floor.id}
@@ -283,7 +331,8 @@ function MultiFloorVenue() {
 
       <SeatMapViewer
         config={venueConfig}
-        floorId={currentFloor}
+        showFloorSelector={false}  // Hide built-in selector
+        floorId={currentFloor || undefined}
         onFloorChange={setCurrentFloor}
         onSeatSelect={(seat) => handleSelection(seat)}
       />
@@ -364,7 +413,11 @@ The viewer accepts a `SeatMapConfig` object. You can create these configurations
     }
   ],
   "sections": [],
-  "stages": []
+  "stages": [],
+  "floors": [
+    { "id": "floor_1", "name": "Ground Floor", "order": 0 },
+    { "id": "floor_2", "name": "First Floor", "order": 1 }
+  ]
 }
 ```
 
@@ -416,6 +469,17 @@ interface ColorSettings {
 }
 ```
 
+### FloorConfig
+
+```typescript
+interface FloorConfig {
+  id: string;        // Unique identifier (e.g., "floor_1")
+  name: string;      // Display name (e.g., "Ground Floor")
+  order: number;     // Sort order (0 = first)
+  color?: string;    // Optional floor color
+}
+```
+
 ## Seat States Explained
 
 | State | Description | User Can Select? | Visual |

package/dist/components/SeatMapViewer.d.ts

@@ -21,5 +21,12 @@ export interface SeatMapViewerProps {
     floorSelectorClassName?: string;
     showAllFloorsOption?: boolean;
     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 s=require("react/jsx-runtime"),t=require("react"),S=require("react-konva");function B(o){const[c,i]=t.useState(null),[g,x]=t.useState(!1),[m,f]=t.useState(null),u=async()=>{if(o){x(!0),f(null);try{const a=await fetch(o);if(!a.ok)throw new Error(`Failed to fetch config: ${a.statusText}`);const l=await a.json();i(l)}catch(a){const l=a instanceof Error?a:new Error("Unknown error occurred");f(l),console.error("Failed to fetch seat map config:",l)}finally{x(!1)}}};return t.useEffect(()=>{u()},[o]),{config:c,loading:g,error:m,refetch:u}}const O={canvasBackground:"#1a1a1a",stageColor:"#808080",seatAvailable:"#2C2B30",seatReserved:"#FCEA00",seatSelected:"#3A7DE5",seatUnavailable:"#6b7280",seatHidden:"#4a4a4a",gridLines:"#404040",currency:"KD"},W=t.memo(({seat:o,state:c,colors:i,onClick:g})=>{const f={available:i.seatAvailable,reserved:i.seatReserved,selected:i.seatSelected,unavailable:i.seatUnavailable,hidden:i.seatHidden}[c],u=c==="available"||c==="selected",a=t.useCallback(()=>{u&&g(o)},[o,g,u]),l={x:o.position.x,y:o.position.y,fill:f,stroke:"#ffffff",strokeWidth:1,onClick:a,onTap:a};return o.shape==="circle"?s.jsx(S.Circle,{...l,radius:12}):s.jsx(S.Rect,{...l,width:24,height:24,offsetX:12,offsetY:12,cornerRadius:o.shape==="square"?0:4})});W.displayName="ViewerSeat";const _=t.memo(({stage:o,stageColor:c})=>s.jsxs(S.Group,{x:o.position.x,y:o.position.y,children:[s.jsx(S.Rect,{width:o.config.width,height:o.config.height,fill:c+"80",stroke:"#ffffff",strokeWidth:2,cornerRadius:10}),s.jsx(S.Text,{text:o.config.label,x:0,y:0,width:o.config.width,height:o.config.height,fontSize:24,fontStyle:"bold",fill:"#ffffff",align:"center",verticalAlign:"middle"})]}));_.displayName="ViewerStage";const q=t.memo(({floors:o,currentFloorId:c,onFloorChange:i,showAllOption:g,allLabel:x,position:m,className:f})=>{const u=t.useMemo(()=>[...o].sort((d,w)=>d.order-w.order),[o]),l={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}}[m]},E={padding:"6px 14px",fontSize:"14px",fontWeight:500,border:"1px solid #444",borderRadius:"6px",backgroundColor:"transparent",color:"#fff",cursor:"pointer",transition:"all 0.2s ease"},j={...E,backgroundColor:"#3A7DE5",borderColor:"#3A7DE5"};return s.jsxs("div",{className:f,style:l,children:[g&&s.jsx("button",{type:"button",onClick:()=>i(null),style:c===null?j:E,children:x}),u.map(d=>s.jsx("button",{type:"button",onClick:()=>i(d.id),style:c===d.id?j:E,children:d.name},d.id))]})});q.displayName="FloorSelectorBar";const le=({config:o,configUrl:c,floorId:i,onFloorChange:g,reservedSeats:x=[],unavailableSeats:m=[],onSeatSelect:f,onSeatDeselect:u,onSelectionChange:a,colorOverrides:l,showTooltip:E=!0,zoomEnabled:j=!0,className:d="",onConfigLoad:w,onError:A,showFloorSelector:$,floorSelectorPosition:U="top-left",floorSelectorClassName:Y,showAllFloorsOption:H=!0,allFloorsLabel:K="All"})=>{const D=t.useRef(null),[y,X]=t.useState(new Set),[F,G]=t.useState(1),[C,J]=t.useState({x:0,y:0}),[Q,Z]=t.useState(null),{config:ee,loading:te,error:k}=B(c),r=o||ee,I=i!==void 0,p=I?i||null:Q,se=t.useCallback(e=>{I||Z(e),g?.(e)},[I,g]),T=r?.floors||[],oe=$!==void 0?$:T.length>1,z=t.useMemo(()=>r?{...r.colors,...l}:{...O,...l},[r,l]),L=t.useMemo(()=>{if(!r)return[];let e=r.seats.filter(n=>n.state!=="hidden");return p&&(e=e.filter(n=>n.floorId===p||!n.floorId&&p==="floor_default")),e},[r,p]),re=t.useMemo(()=>r?.stages?p?r.stages.filter(e=>e.floorId===p||!e.floorId&&p==="floor_default"):r.stages:[],[r,p]),N=t.useMemo(()=>{const e=new Set(x),n=new Set(m);return{reserved:e,unavailable:n}},[x,m]),P=t.useCallback(e=>{const n=e.id,h=e.seatNumber||"";return N.unavailable.has(n)||N.unavailable.has(h)?"unavailable":N.reserved.has(n)||N.reserved.has(h)?"reserved":y.has(n)?"selected":e.state},[N,y]);t.useEffect(()=>{r&&w&&w(r)},[r,w]),t.useEffect(()=>{k&&A&&A(k)},[k,A]);const ne=t.useCallback(e=>{const n=P(e);if(n!=="available"&&n!=="selected")return;const h=y.has(e.id);X(b=>{const v=new Set(b);return h?v.delete(e.id):v.add(e.id),v}),h?u?.(e):(f?.(e),f||console.log("Seat selected:",e))},[P,y,f,u]),M=t.useMemo(()=>r?L.filter(e=>y.has(e.id)):[],[L,y]);t.useEffect(()=>{a?.(M)},[M,a]);const ie=t.useCallback(e=>{if(!j)return;e.evt.preventDefault();const n=D.current;if(!n)return;const h=F,b=n.getPointerPosition();if(!b)return;const v={x:(b.x-C.x)/h,y:(b.y-C.y)/h},ae=e.evt.deltaY>0?-1:1,V=1.05;let R=ae>0?h*V:h/V;R=Math.max(.5,Math.min(5,R)),G(R),J({x:b.x-v.x*R,y:b.y-v.y*R})},[j,F,C]);return te?s.jsx("div",{className:`flex items-center justify-center h-full ${d}`,children:s.jsx("p",{children:"Loading seat map..."})}):k?s.jsx("div",{className:`flex items-center justify-center h-full ${d}`,children:s.jsxs("p",{className:"text-red-500",children:["Error loading seat map: ",k.message]})}):r?s.jsxs("div",{className:`relative ${d}`,children:[oe&&T.length>0&&s.jsx(q,{floors:T,currentFloorId:p,onFloorChange:se,showAllOption:H,allLabel:K,position:U,className:Y}),s.jsxs(S.Stage,{ref:D,width:r.canvas.width,height:r.canvas.height,scaleX:F,scaleY:F,x:C.x,y:C.y,onWheel:ie,style:{backgroundColor:r.canvas.backgroundColor},children:[s.jsx(S.Layer,{listening:!1,children:re.map(e=>s.jsx(_,{stage:e,stageColor:z.stageColor},e.id))}),s.jsx(S.Layer,{children:L.map(e=>s.jsx(W,{seat:e,state:P(e),colors:z,onClick:ne},e.id))})]}),M.length>0&&s.jsxs("div",{className:"absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg",children:[s.jsxs("h3",{className:"font-semibold mb-2",children:["Selected Seats (",M.length,")"]}),s.jsx("div",{className:"max-h-48 overflow-y-auto space-y-1",children:M.map(e=>s.jsxs("div",{className:"text-sm",children:[e.seatNumber,e.price&&` - ${z.currency} ${e.price.toFixed(2)}`]},e.id))})]})]}):s.jsx("div",{className:`flex items-center justify-center h-full ${d}`,children:s.jsx("p",{children:"No configuration provided"})})};exports.DEFAULT_COLORS=O;exports.SeatMapViewer=le;exports.useConfigFetcher=B;
+"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 m } from "react/jsx-runtime";
-import { useState as y, useEffect as $, useRef as ue, useCallback as z, useMemo as w, memo as V } from "react";
-import { Stage as he, Layer as H, Group as pe, Rect as O, Text as ge, Circle as me } from "react-konva";
-function be(t) {
-  const [a, i] = y(null), [h, g] = y(!1), [b, d] = y(null), f = async () => {
-    if (t) {
-      g(!0), d(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 s = await fetch(t);
-        if (!s.ok)
-          throw new Error(`Failed to fetch config: ${s.statusText}`);
-        const l = await s.json();
-        i(l);
-      } catch (s) {
-        const l = s instanceof Error ? s : new Error("Unknown error occurred");
-        d(l), console.error("Failed to fetch seat map config:", l);
+        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 {
-        g(!1);
+        x(!1);
       }
     }
   };
-  return $(() => {
-    f();
-  }, [t]), {
-    config: a,
-    loading: h,
-    error: b,
-    refetch: f
+  return Y(() => {
+    y();
+  }, [o]), {
+    config: f,
+    loading: m,
+    error: S,
+    refetch: y
   };
 }
-const Se = {
+const Tt = {
   canvasBackground: "#1a1a1a",
   stageColor: "#808080",
   seatAvailable: "#2C2B30",
@@ -38,64 +38,64 @@ const Se = {
   seatHidden: "#4a4a4a",
   gridLines: "#404040",
   currency: "KD"
-}, U = V(({ seat: t, state: a, colors: i, onClick: h }) => {
-  const d = {
-    available: i.seatAvailable,
-    reserved: i.seatReserved,
-    selected: i.seatSelected,
-    unavailable: i.seatUnavailable,
-    hidden: i.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
-  }[a], f = a === "available" || a === "selected", s = z(() => {
-    f && h(t);
-  }, [t, h, f]), l = {
-    x: t.position.x,
-    y: t.position.y,
-    fill: d,
+  }[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: s,
-    onTap: s
+    onClick: h,
+    onTap: h
   };
-  return t.shape === "circle" ? /* @__PURE__ */ r(
-    me,
+  return o.shape === "circle" ? /* @__PURE__ */ i(
+    Dt,
     {
       ...l,
       radius: 12
     }
-  ) : /* @__PURE__ */ r(
-    O,
+  ) : /* @__PURE__ */ i(
+    et,
     {
       ...l,
       width: 24,
       height: 24,
       offsetX: 12,
       offsetY: 12,
-      cornerRadius: t.shape === "square" ? 0 : 4
+      cornerRadius: o.shape === "square" ? 0 : 4
     }
   );
 });
-U.displayName = "ViewerSeat";
-const X = V(({ stage: t, stageColor: a }) => /* @__PURE__ */ m(pe, { x: t.position.x, y: t.position.y, children: [
-  /* @__PURE__ */ r(
-    O,
+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: t.config.width,
-      height: t.config.height,
-      fill: a + "80",
+      width: o.config.width,
+      height: o.config.height,
+      fill: f + "80",
       stroke: "#ffffff",
       strokeWidth: 2,
       cornerRadius: 10
     }
   ),
-  /* @__PURE__ */ r(
-    ge,
+  /* @__PURE__ */ i(
+    Bt,
     {
-      text: t.config.label,
+      text: o.config.label,
       x: 0,
       y: 0,
-      width: t.config.width,
-      height: t.config.height,
+      width: o.config.width,
+      height: o.config.height,
       fontSize: 24,
       fontStyle: "bold",
       fill: "#ffffff",
@@ -104,19 +104,19 @@ const X = V(({ stage: t, stageColor: a }) => /* @__PURE__ */ m(pe, { x: t.positi
     }
   )
 ] }));
-X.displayName = "ViewerStage";
-const q = V(({
-  floors: t,
-  currentFloorId: a,
-  onFloorChange: i,
-  showAllOption: h,
-  allLabel: g,
-  position: b,
-  className: d
+ot.displayName = "ViewerStage";
+const it = Z(({
+  floors: o,
+  currentFloorId: f,
+  onFloorChange: d,
+  showAllOption: m,
+  allLabel: x,
+  position: S,
+  className: g
 }) => {
-  const f = w(
-    () => [...t].sort((c, k) => c.order - k.order),
-    [t]
+  const y = F(
+    () => [...o].sort((u, A) => u.order - A.order),
+    [o]
   ), l = {
     position: "absolute",
     display: "flex",
@@ -132,8 +132,8 @@ const q = V(({
       "top-right": { top: 0, right: 0 },
       "bottom-left": { bottom: 0, left: 0 },
       "bottom-right": { bottom: 0, right: 0 }
-    }[b]
-  }, E = {
+    }[S]
+  }, N = {
     padding: "6px 14px",
     fontSize: "14px",
     fontWeight: 500,
@@ -143,177 +143,301 @@ const q = V(({
     color: "#fff",
     cursor: "pointer",
     transition: "all 0.2s ease"
-  }, C = {
-    ...E,
+  }, b = {
+    ...N,
     backgroundColor: "#3A7DE5",
     borderColor: "#3A7DE5"
   };
-  return /* @__PURE__ */ m("div", { className: d, style: l, children: [
-    h && /* @__PURE__ */ r(
+  return /* @__PURE__ */ w("div", { className: g, style: l, children: [
+    m && /* @__PURE__ */ i(
       "button",
       {
         type: "button",
-        onClick: () => i(null),
-        style: a === null ? C : E,
-        children: g
+        onClick: () => d(null),
+        style: f === null ? b : N,
+        children: x
       }
     ),
-    f.map((c) => /* @__PURE__ */ r(
+    y.map((u) => /* @__PURE__ */ i(
       "button",
       {
         type: "button",
-        onClick: () => i(c.id),
-        style: a === c.id ? C : E,
-        children: c.name
+        onClick: () => d(u.id),
+        style: f === u.id ? b : N,
+        children: u.name
       },
-      c.id
+      u.id
     ))
   ] });
 });
-q.displayName = "FloorSelectorBar";
-const we = ({
-  config: t,
-  configUrl: a,
-  floorId: i,
-  onFloorChange: h,
-  reservedSeats: g = [],
-  unavailableSeats: b = [],
-  onSeatSelect: d,
-  onSeatDeselect: f,
-  onSelectionChange: s,
+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: S = [],
+  onSeatSelect: g,
+  onSeatDeselect: y,
+  onSelectionChange: h,
   colorOverrides: l,
-  showTooltip: E = !0,
-  zoomEnabled: C = !0,
-  className: c = "",
-  onConfigLoad: k,
-  onError: j,
+  showTooltip: N = !0,
+  zoomEnabled: b = !0,
+  className: u = "",
+  onConfigLoad: A,
+  onError: z,
   // Floor selector props
-  showFloorSelector: W,
-  floorSelectorPosition: G = "top-left",
-  floorSelectorClassName: K,
-  showAllFloorsOption: J = !0,
-  allFloorsLabel: Q = "All"
+  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 _ = ue(null), [v, Z] = y(/* @__PURE__ */ new Set()), [T, ee] = y(1), [N, te] = y({ x: 0, y: 0 }), [oe, re] = y(null), { config: ne, loading: ie, error: I } = be(a), o = t || ne, M = i !== void 0, p = M ? i || null : oe, se = z((e) => {
-    M || re(e), h?.(e);
-  }, [M, h]), P = o?.floors || [], le = W !== void 0 ? W : P.length > 1, B = w(
-    () => o ? { ...o.colors, ...l } : { ...Se, ...l },
-    [o, l]
-  ), D = w(() => {
-    if (!o) return [];
-    let e = o.seats.filter((n) => n.state !== "hidden");
-    return p && (e = e.filter(
-      (n) => n.floorId === p || !n.floorId && p === "floor_default"
-    )), e;
-  }, [o, p]), ae = w(() => o?.stages ? p ? o.stages.filter(
-    (e) => e.floorId === p || !e.floorId && p === "floor_default"
-  ) : o.stages : [], [o, p]), A = w(() => {
-    const e = new Set(g), n = new Set(b);
-    return { reserved: e, unavailable: n };
-  }, [g, b]), L = z((e) => {
-    const n = e.id, u = e.seatNumber || "";
-    return A.unavailable.has(n) || A.unavailable.has(u) ? "unavailable" : A.reserved.has(n) || A.reserved.has(u) ? "reserved" : v.has(n) ? "selected" : e.state;
-  }, [A, v]);
-  $(() => {
-    o && k && k(o);
-  }, [o, k]), $(() => {
-    I && j && j(I);
-  }, [I, j]);
-  const ce = z((e) => {
-    const n = L(e);
+  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 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 u = v.has(e.id);
-    Z((S) => {
-      const x = new Set(S);
-      return u ? x.delete(e.id) : x.add(e.id), x;
-    }), u ? f?.(e) : (d?.(e), d || console.log("Seat selected:", e));
-  }, [L, v, d, f]), F = w(() => o ? D.filter((e) => v.has(e.id)) : [], [D, v]);
-  $(() => {
-    s?.(F);
-  }, [F, s]);
-  const de = z((e) => {
-    if (!C) return;
-    e.evt.preventDefault();
-    const n = _.current;
-    if (!n) return;
-    const u = T, S = n.getPointerPosition();
-    if (!S) return;
-    const x = {
-      x: (S.x - N.x) / u,
-      y: (S.y - N.y) / u
-    }, fe = e.evt.deltaY > 0 ? -1 : 1, Y = 1.05;
-    let R = fe > 0 ? u * Y : u / Y;
-    R = Math.max(0.5, Math.min(5, R)), ee(R), te({
-      x: S.x - x.x * R,
-      y: S.y - x.y * R
+    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()
     });
-  }, [C, T, N]);
-  return ie ? /* @__PURE__ */ r("div", { className: `flex items-center justify-center h-full ${c}`, children: /* @__PURE__ */ r("p", { children: "Loading seat map..." }) }) : I ? /* @__PURE__ */ r("div", { className: `flex items-center justify-center h-full ${c}`, children: /* @__PURE__ */ m("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: ",
-    I.message
-  ] }) }) : o ? /* @__PURE__ */ m("div", { className: `relative ${c}`, children: [
-    le && P.length > 0 && /* @__PURE__ */ r(
-      q,
+    W.message
+  ] }) }) : e ? /* @__PURE__ */ w("div", { className: `relative ${u}`, children: [
+    wt && U.length > 0 && /* @__PURE__ */ i(
+      it,
       {
-        floors: P,
-        currentFloorId: p,
-        onFloorChange: se,
-        showAllOption: J,
-        allLabel: Q,
-        position: G,
-        className: K
+        floors: U,
+        currentFloorId: v,
+        onFloorChange: St,
+        showAllOption: lt,
+        allLabel: ct,
+        position: rt,
+        className: at
       }
     ),
-    /* @__PURE__ */ m(
-      he,
+    /* @__PURE__ */ w(
+      Wt,
       {
-        ref: _,
-        width: o.canvas.width,
-        height: o.canvas.height,
-        scaleX: T,
-        scaleY: T,
-        x: N.x,
-        y: N.y,
-        onWheel: de,
-        style: { backgroundColor: o.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(H, { listening: !1, children: ae.map((e) => /* @__PURE__ */ r(
-            X,
+          /* @__PURE__ */ i(tt, { listening: !1, children: $.map((t) => /* @__PURE__ */ i(
+            ot,
             {
-              stage: e,
-              stageColor: B.stageColor
+              stage: t,
+              stageColor: q.stageColor
             },
-            e.id
+            t.id
           )) }),
-          /* @__PURE__ */ r(H, { children: D.map((e) => /* @__PURE__ */ r(
-            U,
+          /* @__PURE__ */ i(tt, { children: X.map((t) => /* @__PURE__ */ i(
+            nt,
             {
-              seat: e,
-              state: L(e),
-              colors: B,
-              onClick: ce
+              seat: t,
+              state: G(t),
+              colors: q,
+              onClick: Ct
             },
-            e.id
+            t.id
           )) })
         ]
       }
     ),
-    F.length > 0 && /* @__PURE__ */ m("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
-      /* @__PURE__ */ m("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 (",
-        F.length,
+        B.length,
         ")"
       ] }),
-      /* @__PURE__ */ r("div", { className: "max-h-48 overflow-y-auto space-y-1", children: F.map((e) => /* @__PURE__ */ m("div", { className: "text-sm", children: [
-        e.seatNumber,
-        e.price && ` - ${B.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 ${c}`, 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 {
-  Se as DEFAULT_COLORS,
-  we as SeatMapViewer,
-  be as useConfigFetcher
+  Tt as DEFAULT_COLORS,
+  zt as SeatMapViewer,
+  Ht as useConfigFetcher
 };

package/package.json

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