@zonetrix/viewer 2.5.0 → 2.7.0

package/README.md

@@ -108,6 +108,7 @@ function BookingApp() {
 | `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 |
+| `selectedSeats` | `string[]` | No | Array of seat IDs for controlled selection mode |
 | `onSeatSelect` | `(seat: SeatData) => void` | No | Callback when a seat is selected |
 | `onSeatDeselect` | `(seat: SeatData) => void` | No | Callback when a seat is deselected |
 | `onSelectionChange` | `(seats: SeatData[]) => void` | No | Callback when selection changes |
@@ -341,7 +342,88 @@ function CustomFloorSelector() {
 }
 ```
 
-### 7. Error Handling
+### 7. Controlled Selection Mode
+
+For complete control over seat selection state (e.g., syncing with external state, URL params, or database):
+
+```tsx
+import { useState } from 'react';
+import { SeatMapViewer } from '@zonetrix/viewer';
+import type { SeatData } from '@zonetrix/viewer';
+
+function ControlledSelection() {
+  const [selectedSeatIds, setSelectedSeatIds] = useState<string[]>([]);
+
+  const handleSeatSelect = (seat: SeatData) => {
+    setSelectedSeatIds(prev => [...prev, seat.id]);
+  };
+
+  const handleSeatDeselect = (seat: SeatData) => {
+    setSelectedSeatIds(prev => prev.filter(id => id !== seat.id));
+  };
+
+  return (
+    <SeatMapViewer
+      config={venueConfig}
+      selectedSeats={selectedSeatIds}  // Controlled mode
+      onSeatSelect={handleSeatSelect}
+      onSeatDeselect={handleSeatDeselect}
+    />
+  );
+}
+```
+
+**Use cases for controlled selection mode:**
+- Syncing selection with URL query parameters
+- Persisting selection in Redux/Zustand store
+- Loading pre-selected seats from database
+- Implementing undo/redo functionality
+- Syncing selection across multiple components
+- Integrating with shopping cart state management
+
+**Example with cart integration:**
+
+```tsx
+import { useState } from 'react';
+import { SeatMapViewer } from '@zonetrix/viewer';
+import type { SeatData } from '@zonetrix/viewer';
+
+function CartIntegration() {
+  const [cartItems, setCartItems] = useState<SeatData[]>([]);
+
+  // Derive selected IDs from cart
+  const selectedSeatIds = cartItems.map(seat => seat.id);
+
+  const handleSeatSelect = (seat: SeatData) => {
+    setCartItems(prev => [...prev, seat]);
+  };
+
+  const handleSeatDeselect = (seat: SeatData) => {
+    setCartItems(prev => prev.filter(item => item.id !== seat.id));
+  };
+
+  const totalPrice = cartItems.reduce((sum, seat) => sum + (seat.price || 0), 0);
+
+  return (
+    <div>
+      <SeatMapViewer
+        config={venueConfig}
+        selectedSeats={selectedSeatIds}
+        onSeatSelect={handleSeatSelect}
+        onSeatDeselect={handleSeatDeselect}
+      />
+
+      <div className="cart">
+        <h3>Shopping Cart</h3>
+        <p>Selected: {cartItems.length} seat(s)</p>
+        <p>Total: ${totalPrice.toFixed(2)}</p>
+      </div>
+    </div>
+  );
+}
+```
+
+### 8. Error Handling
 
 ```tsx
 import { SeatMapViewer } from '@zonetrix/viewer';

package/dist/components/SeatMapViewer.d.ts

@@ -7,6 +7,7 @@ export interface SeatMapViewerProps {
     onFloorChange?: (floorId: string) => void;
     reservedSeats?: string[];
     unavailableSeats?: string[];
+    selectedSeats?: string[];
     onSeatSelect?: (seat: SeatData) => void;
     onSeatDeselect?: (seat: SeatData) => void;
     onSelectionChange?: (seats: SeatData[]) => void;

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),e=require("react"),L=require("react-konva");function dt(n){const[i,d]=e.useState(null),[r,b]=e.useState(!1),[S,p]=e.useState(null),v=async()=>{if(n){b(!0),p(null);try{const y=await fetch(n);if(!y.ok)throw new Error(`Failed to fetch config: ${y.statusText}`);const a=await y.json();d(a)}catch(y){const a=y instanceof Error?y:new Error("Unknown error occurred");p(a),console.error("Failed to fetch seat map config:",a)}finally{b(!1)}}};return e.useEffect(()=>{v()},[n]),{config:i,loading:r,error:S,refetch:v}}function ft(n){const[i,d]=e.useState({width:0,height:0});return e.useEffect(()=>{const r=n.current;if(!r)return;const{width:b,height:S}=r.getBoundingClientRect();b>0&&S>0&&d({width:b,height:S});const p=new ResizeObserver(v=>{const y=v[0];if(!y)return;const{width:a,height:s}=y.contentRect;a>0&&s>0&&d(u=>u.width===a&&u.height===s?u:{width:a,height:s})});return p.observe(r),()=>{p.disconnect()}},[n]),i}function ut(n,i){return Math.sqrt(Math.pow(i.x-n.x,2)+Math.pow(i.y-n.y,2))}function ht(n,i){return{x:(n.x+i.x)/2,y:(n.y+i.y)/2}}function xt(n,i){const d=e.useRef(null),r=e.useRef(null),b=e.useRef(1);e.useEffect(()=>{const S=n.current;if(!S||!i.enabled)return;const p=S.container(),v=s=>{if(s.touches.length===2){s.preventDefault();const u={x:s.touches[0].clientX,y:s.touches[0].clientY},g={x:s.touches[1].clientX,y:s.touches[1].clientY};d.current=ut(u,g),r.current=ht(u,g),b.current=i.currentScale}},y=s=>{if(s.touches.length!==2)return;s.preventDefault();const u={x:s.touches[0].clientX,y:s.touches[0].clientY},g={x:s.touches[1].clientX,y:s.touches[1].clientY},k=ut(u,g),C=ht(u,g);if(d.current!==null&&r.current!==null){const R=k/d.current,P=Math.min(Math.max(i.currentScale*R,i.minScale),i.maxScale),V=p.getBoundingClientRect(),_=C.x-V.left,G=C.y-V.top,W=i.currentScale,T={x:(_-i.currentPosition.x)/W,y:(G-i.currentPosition.y)/W},et=C.x-r.current.x,nt=C.y-r.current.y,ot={x:_-T.x*P+et,y:G-T.y*P+nt};i.onScaleChange(P,ot),d.current=k,r.current=C}},a=s=>{s.touches.length<2&&(d.current=null,r.current=null)};return p.addEventListener("touchstart",v,{passive:!1}),p.addEventListener("touchmove",y,{passive:!1}),p.addEventListener("touchend",a),()=>{p.removeEventListener("touchstart",v),p.removeEventListener("touchmove",y),p.removeEventListener("touchend",a)}},[n,i])}const pt={canvasBackground:"#1a1a1a",stageColor:"#808080",seatAvailable:"#2C2B30",seatReserved:"#FCEA00",seatSelected:"#3A7DE5",seatUnavailable:"#6b7280",seatHidden:"#4a4a4a",gridLines:"#404040",currency:"KD"},gt=e.memo(({seat:n,state:i,colors:d,onClick:r,onMouseEnter:b,onMouseLeave:S})=>{const y={available:d.seatAvailable,reserved:d.seatReserved,selected:d.seatSelected,unavailable:d.seatUnavailable,hidden:d.seatHidden}[i],a=i==="available"||i==="selected",s=e.useCallback(()=>{a&&r(n)},[n,r,a]),u=e.useCallback(C=>{b(n,C);const R=C.target.getStage();R&&a&&(R.container().style.cursor="pointer")},[n,b,a]),g=e.useCallback(C=>{S();const R=C.target.getStage();R&&(R.container().style.cursor="grab")},[S]),k={x:n.position.x,y:n.position.y,fill:y,stroke:"#ffffff",strokeWidth:1,onClick:s,onTap:s,onMouseEnter:u,onMouseLeave:g};return n.shape==="circle"?o.jsx(L.Circle,{...k,radius:12}):o.jsx(L.Rect,{...k,width:24,height:24,offsetX:12,offsetY:12,cornerRadius:n.shape==="square"?0:4})});gt.displayName="ViewerSeat";const yt=e.memo(({stage:n,stageColor:i})=>o.jsxs(L.Group,{x:n.position.x,y:n.position.y,children:[o.jsx(L.Rect,{width:n.config.width,height:n.config.height,fill:i+"80",stroke:"#ffffff",strokeWidth:2,cornerRadius:10}),o.jsx(L.Text,{text:n.config.label,x:0,y:0,width:n.config.width,height:n.config.height,fontSize:24,fontStyle:"bold",fill:"#ffffff",align:"center",verticalAlign:"middle"})]}));yt.displayName="ViewerStage";const mt=e.memo(({floors:n,currentFloorId:i,onFloorChange:d,showAllOption:r,allLabel:b,position:S,className:p})=>{const v=e.useMemo(()=>[...n].sort((g,k)=>g.order-k.order),[n]),a={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}}[S]},s={padding:"10px 16px",fontSize:"14px",fontWeight:500,border:"1px solid #444",borderRadius:"6px",backgroundColor:"transparent",color:"#fff",cursor:"pointer",transition:"all 0.2s ease",minHeight:"44px",touchAction:"manipulation"},u={...s,backgroundColor:"#3A7DE5",borderColor:"#3A7DE5"};return o.jsxs("div",{className:p,style:a,children:[r&&o.jsx("button",{type:"button",onClick:()=>d(null),style:i===null?u:s,children:b}),v.map(g=>o.jsx("button",{type:"button",onClick:()=>d(g.id),style:i===g.id?u:s,children:g.name},g.id))]})});mt.displayName="FloorSelectorBar";const bt=e.memo(({scale:n,minScale:i,maxScale:d,onZoomIn:r,onZoomOut:b,position:S,className:p})=>{const y={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]},a={width:"44px",height:"44px",minWidth:"44px",minHeight:"44px",fontSize:"22px",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",touchAction:"manipulation"},s={...a,opacity:.4,cursor:"not-allowed"},u=n<d,g=n>i;return o.jsxs("div",{className:p,style:y,children:[o.jsx("button",{type:"button",onClick:r,disabled:!u,style:u?a:s,title:"Zoom In",children:"+"}),o.jsx("button",{type:"button",onClick:b,disabled:!g,style:g?a:s,title:"Zoom Out",children:"−"})]})});bt.displayName="ZoomControls";const St=e.memo(({visible:n,x:i,y:d,seat:r,currency:b,state:S})=>{if(!n||!r)return null;const p=r.seatNumber||(r.rowLabel&&r.columnLabel?`${r.rowLabel}-${r.columnLabel}`:"N/A"),v={position:"fixed",left:`${i+15}px`,top:`${d+15}px`,zIndex:1e3,pointerEvents:"none"},y={backgroundColor:"rgba(26, 26, 26, 0.95)",color:"#fff",border:"1px solid #444",borderRadius:"8px",padding:"8px 12px",fontSize:"13px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.3)",minWidth:"140px"},a={color:"#9ca3af",marginRight:"4px"},s={fontWeight:600},u={color:"#4ade80",fontWeight:600},g={fontSize:"11px",color:"#6b7280",textTransform:"capitalize",marginTop:"4px"};return o.jsx("div",{style:v,children:o.jsxs("div",{style:y,children:[r.sectionName&&o.jsxs("div",{style:{marginBottom:"4px"},children:[o.jsx("span",{style:a,children:"Section:"}),o.jsx("span",{style:{...s,color:"#3b82f6"},children:r.sectionName})]}),o.jsxs("div",{style:{marginBottom:"4px"},children:[o.jsx("span",{style:a,children:"Seat:"}),o.jsx("span",{style:s,children:p})]}),r.price!==void 0&&r.price>0&&o.jsxs("div",{style:{marginBottom:"4px"},children:[o.jsx("span",{style:a,children:"Price:"}),o.jsxs("span",{style:u,children:[b," ",r.price.toFixed(2)]})]}),o.jsxs("div",{style:g,children:["Status: ",S]})]})})});St.displayName="SeatTooltip";const Vt=({config:n,configUrl:i,floorId:d,onFloorChange:r,reservedSeats:b=[],unavailableSeats:S=[],onSeatSelect:p,onSeatDeselect:v,onSelectionChange:y,colorOverrides:a,showTooltip:s=!0,zoomEnabled:u=!0,className:g="",onConfigLoad:k,onError:C,showFloorSelector:R,floorSelectorPosition:P="top-left",floorSelectorClassName:V,showAllFloorsOption:_=!0,allFloorsLabel:G="All",fitToView:W=!0,fitPadding:T=40,showZoomControls:et=!0,zoomControlsPosition:nt="bottom-right",zoomControlsClassName:ot,maxZoom:I=3,zoomStep:U=.25,touchEnabled:vt=!0})=>{const st=e.useRef(null),at=e.useRef(null),w=ft(at),[X,wt]=e.useState(new Set),[j,A]=e.useState(1),[M,D]=e.useState({x:0,y:0}),[Ct,jt]=e.useState(null),[Mt,kt]=e.useState(1),Z=e.useRef({width:0,height:0}),[B,lt]=e.useState({visible:!1,x:0,y:0,seat:null,state:"available"}),{config:Rt,loading:Et,error:z}=dt(i),l=n||Rt,it=d!==void 0,E=it?d||null:Ct,It=e.useCallback(t=>{it||jt(t),r?.(t)},[it,r]),rt=l?.floors||[],Nt=R!==void 0?R:rt.length>1,K=e.useMemo(()=>l?{...l.colors,...a}:{...pt,...a},[l,a]),Y=e.useMemo(()=>{if(!l)return[];let t=l.seats.filter(c=>c.state!=="hidden");return E&&(t=t.filter(c=>c.floorId===E||!c.floorId&&E==="floor_default")),t},[l,E]),J=e.useMemo(()=>l?.stages?E?l.stages.filter(t=>t.floorId===E||!t.floorId&&E==="floor_default"):l.stages:[],[l,E]),N=e.useMemo(()=>{if(!l||Y.length===0&&J.length===0)return null;const t=12;let c=1/0,f=1/0,h=-1/0,x=-1/0;return Y.forEach(m=>{c=Math.min(c,m.position.x-t),f=Math.min(f,m.position.y-t),h=Math.max(h,m.position.x+t),x=Math.max(x,m.position.y+t)}),J.forEach(m=>{c=Math.min(c,m.position.x),f=Math.min(f,m.position.y),h=Math.max(h,m.position.x+(m.config?.width||200)),x=Math.max(x,m.position.y+(m.config?.height||100))}),{minX:c,minY:f,maxX:h,maxY:x,width:h-c,height:x-f}},[l,Y,J]);e.useEffect(()=>{if(!W||!l||!N||w.width===0||w.height===0)return;const t=Math.abs(w.width-Z.current.width),c=Math.abs(w.height-Z.current.height);if(!(Z.current.width===0)&&t<10&&c<10)return;Z.current=w;const h=w.width,x=w.height,m=h-T*2,q=x-T*2,Q=m/N.width,ct=q/N.height,tt=Math.min(Q,ct,I),Bt=N.minX+N.width/2,zt=N.minY+N.height/2,$t=h/2,Ht=x/2,Ot=$t-Bt*tt,qt=Ht-zt*tt;A(tt),D({x:Ot,y:qt}),kt(tt)},[W,l,N,T,I,w,E]);const $=e.useMemo(()=>{const t=new Set(b),c=new Set(S);return{reserved:t,unavailable:c}},[b,S]),H=e.useCallback(t=>{const c=t.id,f=t.seatNumber||"";return $.unavailable.has(c)||$.unavailable.has(f)?"unavailable":$.reserved.has(c)||$.reserved.has(f)?"reserved":X.has(c)?"selected":t.state},[$,X]);e.useEffect(()=>{l&&k&&k(l)},[l,k]),e.useEffect(()=>{z&&C&&C(z)},[z,C]);const Lt=e.useCallback(t=>{const c=H(t);if(c!=="available"&&c!=="selected")return;const f=X.has(t.id);wt(h=>{const x=new Set(h);return f?x.delete(t.id):x.add(t.id),x}),f?v?.(t):(p?.(t),p||console.log("Seat selected:",t))},[H,X,p,v]),O=e.useMemo(()=>l?Y.filter(t=>X.has(t.id)):[],[Y,X]);e.useEffect(()=>{y?.(O)},[O,y]);const F=Mt,Dt=e.useCallback(()=>{if(!u)return;const t=Math.min(j+U,I);if(t!==j){const c=w.width||l?.canvas.width||800,f=w.height||l?.canvas.height||600,h=c/2,x=f/2,m={x:(h-M.x)/j,y:(x-M.y)/j};A(t),D({x:h-m.x*t,y:x-m.y*t})}},[u,j,U,I,w,l,M]),Tt=e.useCallback(()=>{if(!u)return;const t=Math.max(j-U,F);if(t!==j){const c=w.width||l?.canvas.width||800,f=w.height||l?.canvas.height||600,h=c/2,x=f/2,m={x:(h-M.x)/j,y:(x-M.y)/j};A(t),D({x:h-m.x*t,y:x-m.y*t})}},[u,j,U,F,w,l,M]),Xt=e.useCallback(t=>{D({x:t.target.x(),y:t.target.y()})},[]),Yt=e.useCallback(t=>{if(!u)return;t.evt.preventDefault();const c=st.current;if(!c)return;const f=c.scaleX(),h=c.getPointerPosition();if(!h)return;const x=1.1,m=t.evt.deltaY>0?f/x:f*x,q=Math.min(Math.max(m,F),I),Q={x:(h.x-M.x)/f,y:(h.y-M.y)/f},ct={x:h.x-Q.x*q,y:h.y-Q.y*q};A(q),D(ct)},[u,M,F,I]);xt(st,{enabled:vt&&u,minScale:F,maxScale:I,currentScale:j,currentPosition:M,onScaleChange:(t,c)=>{A(t),D(c)},onPositionChange:t=>{D(t)}});const Ft=e.useCallback((t,c)=>{if(!s)return;const f=c.target.getStage();if(!f)return;const h=f.getPointerPosition();if(!h)return;const x=f.container().getBoundingClientRect();lt({visible:!0,x:x.left+h.x,y:x.top+h.y,seat:t,state:H(t)})},[s,H]),Pt=e.useCallback(()=>{lt(t=>({...t,visible:!1}))},[]);if(Et)return o.jsx("div",{className:`flex items-center justify-center h-full ${g}`,children:o.jsx("p",{children:"Loading seat map..."})});if(z)return o.jsx("div",{className:`flex items-center justify-center h-full ${g}`,children:o.jsxs("p",{className:"text-red-500",children:["Error loading seat map: ",z.message]})});if(!l)return o.jsx("div",{className:`flex items-center justify-center h-full ${g}`,children:o.jsx("p",{children:"No configuration provided"})});const Wt=w.width||l.canvas.width,At=w.height||l.canvas.height;return o.jsxs("div",{ref:at,className:`relative ${g}`,style:{width:"100%",height:"100%"},children:[Nt&&rt.length>0&&o.jsx(mt,{floors:rt,currentFloorId:E,onFloorChange:It,showAllOption:_,allLabel:G,position:P,className:V}),o.jsxs(L.Stage,{ref:st,width:Wt,height:At,scaleX:j,scaleY:j,x:M.x,y:M.y,draggable:!0,onDragEnd:Xt,onWheel:Yt,style:{backgroundColor:l.canvas.backgroundColor,cursor:"grab"},children:[o.jsx(L.Layer,{listening:!1,children:J.map(t=>o.jsx(yt,{stage:t,stageColor:K.stageColor},t.id))}),o.jsx(L.Layer,{children:Y.map(t=>o.jsx(gt,{seat:t,state:H(t),colors:K,onClick:Lt,onMouseEnter:Ft,onMouseLeave:Pt},t.id))})]}),s&&o.jsx(St,{visible:B.visible,x:B.x,y:B.y,seat:B.seat,currency:K.currency,state:B.state}),et&&u&&o.jsx(bt,{scale:j,minScale:F,maxScale:I,onZoomIn:Dt,onZoomOut:Tt,position:nt,className:ot}),O.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 (",O.length,")"]}),o.jsx("div",{className:"max-h-48 overflow-y-auto space-y-1",children:O.map(t=>o.jsxs("div",{className:"text-sm",children:[t.seatNumber,t.price&&` - ${K.currency} ${t.price.toFixed(2)}`]},t.id))})]})]})};exports.DEFAULT_COLORS=pt;exports.SeatMapViewer=Vt;exports.useConfigFetcher=dt;exports.useContainerSize=ft;exports.useTouchGestures=xt;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),e=require("react"),I=require("react-konva");function pt(n){const[r,u]=e.useState(null),[i,m]=e.useState(!1),[b,f]=e.useState(null),v=async()=>{if(n){m(!0),f(null);try{const y=await fetch(n);if(!y.ok)throw new Error(`Failed to fetch config: ${y.statusText}`);const a=await y.json();u(a)}catch(y){const a=y instanceof Error?y:new Error("Unknown error occurred");f(a),console.error("Failed to fetch seat map config:",a)}finally{m(!1)}}};return e.useEffect(()=>{v()},[n]),{config:r,loading:i,error:b,refetch:v}}function gt(n){const[r,u]=e.useState({width:0,height:0});return e.useEffect(()=>{const i=n.current;if(!i)return;const{width:m,height:b}=i.getBoundingClientRect();m>0&&b>0&&u({width:m,height:b});const f=new ResizeObserver(v=>{const y=v[0];if(!y)return;const{width:a,height:s}=y.contentRect;a>0&&s>0&&u(g=>g.width===a&&g.height===s?g:{width:a,height:s})});return f.observe(i),()=>{f.disconnect()}},[n]),r}function ft(n,r){return Math.sqrt(Math.pow(r.x-n.x,2)+Math.pow(r.y-n.y,2))}function xt(n,r){return{x:(n.x+r.x)/2,y:(n.y+r.y)/2}}function yt(n,r){const u=e.useRef(null),i=e.useRef(null),m=e.useRef(1);e.useEffect(()=>{const b=n.current;if(!b||!r.enabled)return;const f=b.container(),v=s=>{if(s.touches.length===2){s.preventDefault();const g={x:s.touches[0].clientX,y:s.touches[0].clientY},h={x:s.touches[1].clientX,y:s.touches[1].clientY};u.current=ft(g,h),i.current=xt(g,h),m.current=r.currentScale}},y=s=>{if(s.touches.length!==2)return;s.preventDefault();const g={x:s.touches[0].clientX,y:s.touches[0].clientY},h={x:s.touches[1].clientX,y:s.touches[1].clientY},M=ft(g,h),C=xt(g,h);if(u.current!==null&&i.current!==null){const R=M/u.current,D=Math.min(Math.max(r.currentScale*R,r.minScale),r.maxScale),V=f.getBoundingClientRect(),_=C.x-V.left,G=C.y-V.top,U=r.currentScale,P={x:(_-r.currentPosition.x)/U,y:(G-r.currentPosition.y)/U},W=C.x-i.current.x,ot=C.y-i.current.y,it={x:_-P.x*D+W,y:G-P.y*D+ot};r.onScaleChange(D,it),u.current=M,i.current=C}},a=s=>{s.touches.length<2&&(u.current=null,i.current=null)};return f.addEventListener("touchstart",v,{passive:!1}),f.addEventListener("touchmove",y,{passive:!1}),f.addEventListener("touchend",a),()=>{f.removeEventListener("touchstart",v),f.removeEventListener("touchmove",y),f.removeEventListener("touchend",a)}},[n,r])}const mt={canvasBackground:"#1a1a1a",stageColor:"#808080",seatAvailable:"#2C2B30",seatReserved:"#FCEA00",seatSelected:"#3A7DE5",seatUnavailable:"#6b7280",seatHidden:"#4a4a4a",gridLines:"#404040",currency:"KD"},bt=e.memo(({seat:n,state:r,colors:u,onClick:i,onMouseEnter:m,onMouseLeave:b})=>{const y={available:u.seatAvailable,reserved:u.seatReserved,selected:u.seatSelected,unavailable:u.seatUnavailable,hidden:u.seatHidden}[r],a=r==="available"||r==="selected",s=e.useCallback(()=>{a&&i(n)},[n,i,a]),g=e.useCallback(C=>{m(n,C);const R=C.target.getStage();R&&a&&(R.container().style.cursor="pointer")},[n,m,a]),h=e.useCallback(C=>{b();const R=C.target.getStage();R&&(R.container().style.cursor="grab")},[b]),M={x:n.position.x,y:n.position.y,fill:y,stroke:"#ffffff",strokeWidth:1,onClick:s,onTap:s,onMouseEnter:g,onMouseLeave:h};return n.shape==="circle"?o.jsx(I.Circle,{...M,radius:12}):o.jsx(I.Rect,{...M,width:24,height:24,offsetX:12,offsetY:12,cornerRadius:n.shape==="square"?0:4})});bt.displayName="ViewerSeat";const St=e.memo(({stage:n,stageColor:r})=>{const u=b=>({stage:"🎭",table:"⬜",wall:"▬",barrier:"🛡️","dj-booth":"🎵",bar:"🍷","entry-exit":"🚪",custom:"➕"})[b||"stage"]||"🎭",i=n.config.color||r,m=u(n.config.objectType);return o.jsxs(I.Group,{x:n.position.x,y:n.position.y,rotation:n.config.rotation||0,children:[o.jsx(I.Rect,{width:n.config.width,height:n.config.height,fill:i+"80",stroke:"#ffffff",strokeWidth:2,cornerRadius:10}),o.jsx(I.Text,{text:m,x:0,y:0,width:n.config.width,height:n.config.height*.4,fontSize:32,fill:"#ffffff",align:"center",verticalAlign:"middle"}),o.jsx(I.Text,{text:n.config.label,x:0,y:n.config.height*.4,width:n.config.width,height:n.config.height*.6,fontSize:20,fontStyle:"bold",fill:"#ffffff",align:"center",verticalAlign:"middle"})]})});St.displayName="ViewerStage";const vt=e.memo(({floors:n,currentFloorId:r,onFloorChange:u,showAllOption:i,allLabel:m,position:b,className:f})=>{const v=e.useMemo(()=>[...n].sort((h,M)=>h.order-M.order),[n]),a={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}}[b]},s={padding:"10px 16px",fontSize:"14px",fontWeight:500,border:"1px solid #444",borderRadius:"6px",backgroundColor:"transparent",color:"#fff",cursor:"pointer",transition:"all 0.2s ease",minHeight:"44px",touchAction:"manipulation"},g={...s,backgroundColor:"#3A7DE5",borderColor:"#3A7DE5"};return o.jsxs("div",{className:f,style:a,children:[i&&o.jsx("button",{type:"button",onClick:()=>u(null),style:r===null?g:s,children:m}),v.map(h=>o.jsx("button",{type:"button",onClick:()=>u(h.id),style:r===h.id?g:s,children:h.name},h.id))]})});vt.displayName="FloorSelectorBar";const wt=e.memo(({scale:n,minScale:r,maxScale:u,onZoomIn:i,onZoomOut:m,position:b,className:f})=>{const y={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}}[b]},a={width:"44px",height:"44px",minWidth:"44px",minHeight:"44px",fontSize:"22px",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",touchAction:"manipulation"},s={...a,opacity:.4,cursor:"not-allowed"},g=n<u,h=n>r;return o.jsxs("div",{className:f,style:y,children:[o.jsx("button",{type:"button",onClick:i,disabled:!g,style:g?a:s,title:"Zoom In",children:"+"}),o.jsx("button",{type:"button",onClick:m,disabled:!h,style:h?a:s,title:"Zoom Out",children:"−"})]})});wt.displayName="ZoomControls";const Ct=e.memo(({visible:n,x:r,y:u,seat:i,currency:m,state:b})=>{if(!n||!i)return null;const f=i.seatNumber||(i.rowLabel&&i.columnLabel?`${i.rowLabel}-${i.columnLabel}`:"N/A"),v={position:"fixed",left:`${r+15}px`,top:`${u+15}px`,zIndex:1e3,pointerEvents:"none"},y={backgroundColor:"rgba(26, 26, 26, 0.95)",color:"#fff",border:"1px solid #444",borderRadius:"8px",padding:"8px 12px",fontSize:"13px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.3)",minWidth:"140px"},a={color:"#9ca3af",marginRight:"4px"},s={fontWeight:600},g={color:"#4ade80",fontWeight:600},h={fontSize:"11px",color:"#6b7280",textTransform:"capitalize",marginTop:"4px"};return o.jsx("div",{style:v,children:o.jsxs("div",{style:y,children:[i.sectionName&&o.jsxs("div",{style:{marginBottom:"4px"},children:[o.jsx("span",{style:a,children:"Section:"}),o.jsx("span",{style:{...s,color:"#3b82f6"},children:i.sectionName})]}),o.jsxs("div",{style:{marginBottom:"4px"},children:[o.jsx("span",{style:a,children:"Seat:"}),o.jsx("span",{style:s,children:f})]}),i.price!==void 0&&i.price>0&&o.jsxs("div",{style:{marginBottom:"4px"},children:[o.jsx("span",{style:a,children:"Price:"}),o.jsxs("span",{style:g,children:[m," ",i.price.toFixed(2)]})]}),o.jsxs("div",{style:h,children:["Status: ",b]})]})})});Ct.displayName="SeatTooltip";const Ut=({config:n,configUrl:r,floorId:u,onFloorChange:i,reservedSeats:m=[],unavailableSeats:b=[],selectedSeats:f,onSeatSelect:v,onSeatDeselect:y,onSelectionChange:a,colorOverrides:s,showTooltip:g=!0,zoomEnabled:h=!0,className:M="",onConfigLoad:C,onError:R,showFloorSelector:D,floorSelectorPosition:V="top-left",floorSelectorClassName:_,showAllFloorsOption:G=!0,allFloorsLabel:U="All",fitToView:P=!0,fitPadding:W=40,showZoomControls:ot=!0,zoomControlsPosition:it="bottom-right",zoomControlsClassName:jt,maxZoom:N=3,zoomStep:Z=.25,touchEnabled:Mt=!0})=>{const st=e.useRef(null),ut=e.useRef(null),w=gt(ut),[X,ht]=e.useState(new Set),[j,A]=e.useState(1),[k,T]=e.useState({x:0,y:0}),[kt,Rt]=e.useState(null),[Et,It]=e.useState(1),K=e.useRef({width:0,height:0}),[z,dt]=e.useState({visible:!1,x:0,y:0,seat:null,state:"available"}),{config:Nt,loading:Lt,error:B}=pt(r),l=n||Nt,rt=u!==void 0,E=rt?u||null:kt,J=f!==void 0,Tt=e.useCallback(t=>{rt||Rt(t),i?.(t)},[rt,i]),ct=l?.floors||[],Dt=D!==void 0?D:ct.length>1,Q=e.useMemo(()=>l?{...l.colors,...s}:{...mt,...s},[l,s]),Y=e.useMemo(()=>{if(!l)return[];let t=l.seats.filter(c=>c.state!=="hidden");return E&&(t=t.filter(c=>c.floorId===E||!c.floorId&&E==="floor_default")),t},[l,E]),tt=e.useMemo(()=>l?.stages?E?l.stages.filter(t=>t.floorId===E||!t.floorId&&E==="floor_default"):l.stages:[],[l,E]),L=e.useMemo(()=>{if(!l||Y.length===0&&tt.length===0)return null;const t=12;let c=1/0,x=1/0,d=-1/0,p=-1/0;return Y.forEach(S=>{c=Math.min(c,S.position.x-t),x=Math.min(x,S.position.y-t),d=Math.max(d,S.position.x+t),p=Math.max(p,S.position.y+t)}),tt.forEach(S=>{c=Math.min(c,S.position.x),x=Math.min(x,S.position.y),d=Math.max(d,S.position.x+(S.config?.width||200)),p=Math.max(p,S.position.y+(S.config?.height||100))}),{minX:c,minY:x,maxX:d,maxY:p,width:d-c,height:p-x}},[l,Y,tt]);e.useEffect(()=>{if(!P||!l||!L||w.width===0||w.height===0)return;const t=Math.abs(w.width-K.current.width),c=Math.abs(w.height-K.current.height);if(!(K.current.width===0)&&t<10&&c<10)return;K.current=w;const d=w.width,p=w.height,S=d-W*2,q=p-W*2,et=S/L.width,lt=q/L.height,nt=Math.min(et,lt,N),$t=L.minX+L.width/2,Ht=L.minY+L.height/2,qt=d/2,Vt=p/2,_t=qt-$t*nt,Gt=Vt-Ht*nt;A(nt),T({x:_t,y:Gt}),It(nt)},[P,l,L,W,N,w,E]);const O=e.useMemo(()=>{const t=new Set(m),c=new Set(b);return{reserved:t,unavailable:c}},[m,b]),at=e.useMemo(()=>f?new Set(f):null,[f]),$=e.useCallback(t=>{const c=t.id,x=t.seatNumber||"";return O.unavailable.has(c)||O.unavailable.has(x)?"unavailable":O.reserved.has(c)||O.reserved.has(x)?"reserved":X.has(c)?"selected":t.state},[O,X]);e.useEffect(()=>{l&&C&&C(l)},[l,C]),e.useEffect(()=>{B&&R&&R(B)},[B,R]),e.useEffect(()=>{J&&at&&ht(at)},[J,at]);const Xt=e.useCallback(t=>{const c=$(t);if(c!=="available"&&c!=="selected")return;const x=X.has(t.id);J||ht(d=>{const p=new Set(d);return x?p.delete(t.id):p.add(t.id),p}),x?y?.(t):(v?.(t),v||console.log("Seat selected:",t))},[$,X,J,v,y]),H=e.useMemo(()=>l?Y.filter(t=>X.has(t.id)):[],[Y,X]);e.useEffect(()=>{a?.(H)},[H,a]);const F=Et,Yt=e.useCallback(()=>{if(!h)return;const t=Math.min(j+Z,N);if(t!==j){const c=w.width||l?.canvas.width||800,x=w.height||l?.canvas.height||600,d=c/2,p=x/2,S={x:(d-k.x)/j,y:(p-k.y)/j};A(t),T({x:d-S.x*t,y:p-S.y*t})}},[h,j,Z,N,w,l,k]),Ft=e.useCallback(()=>{if(!h)return;const t=Math.max(j-Z,F);if(t!==j){const c=w.width||l?.canvas.width||800,x=w.height||l?.canvas.height||600,d=c/2,p=x/2,S={x:(d-k.x)/j,y:(p-k.y)/j};A(t),T({x:d-S.x*t,y:p-S.y*t})}},[h,j,Z,F,w,l,k]),Pt=e.useCallback(t=>{T({x:t.target.x(),y:t.target.y()})},[]),Wt=e.useCallback(t=>{if(!h)return;t.evt.preventDefault();const c=st.current;if(!c)return;const x=c.scaleX(),d=c.getPointerPosition();if(!d)return;const p=1.1,S=t.evt.deltaY>0?x/p:x*p,q=Math.min(Math.max(S,F),N),et={x:(d.x-k.x)/x,y:(d.y-k.y)/x},lt={x:d.x-et.x*q,y:d.y-et.y*q};A(q),T(lt)},[h,k,F,N]);yt(st,{enabled:Mt&&h,minScale:F,maxScale:N,currentScale:j,currentPosition:k,onScaleChange:(t,c)=>{A(t),T(c)},onPositionChange:t=>{T(t)}});const At=e.useCallback((t,c)=>{if(!g)return;const x=c.target.getStage();if(!x)return;const d=x.getPointerPosition();if(!d)return;const p=x.container().getBoundingClientRect();dt({visible:!0,x:p.left+d.x,y:p.top+d.y,seat:t,state:$(t)})},[g,$]),zt=e.useCallback(()=>{dt(t=>({...t,visible:!1}))},[]);if(Lt)return o.jsx("div",{className:`flex items-center justify-center h-full ${M}`,children:o.jsx("p",{children:"Loading seat map..."})});if(B)return o.jsx("div",{className:`flex items-center justify-center h-full ${M}`,children:o.jsxs("p",{className:"text-red-500",children:["Error loading seat map: ",B.message]})});if(!l)return o.jsx("div",{className:`flex items-center justify-center h-full ${M}`,children:o.jsx("p",{children:"No configuration provided"})});const Bt=w.width||l.canvas.width,Ot=w.height||l.canvas.height;return o.jsxs("div",{ref:ut,className:`relative ${M}`,style:{width:"100%",height:"100%"},children:[Dt&&ct.length>0&&o.jsx(vt,{floors:ct,currentFloorId:E,onFloorChange:Tt,showAllOption:G,allLabel:U,position:V,className:_}),o.jsxs(I.Stage,{ref:st,width:Bt,height:Ot,scaleX:j,scaleY:j,x:k.x,y:k.y,draggable:!0,onDragEnd:Pt,onWheel:Wt,style:{backgroundColor:l.canvas.backgroundColor,cursor:"grab"},children:[o.jsx(I.Layer,{listening:!1,children:tt.map(t=>o.jsx(St,{stage:t,stageColor:Q.stageColor},t.id))}),o.jsx(I.Layer,{children:Y.map(t=>o.jsx(bt,{seat:t,state:$(t),colors:Q,onClick:Xt,onMouseEnter:At,onMouseLeave:zt},t.id))})]}),g&&o.jsx(Ct,{visible:z.visible,x:z.x,y:z.y,seat:z.seat,currency:Q.currency,state:z.state}),ot&&h&&o.jsx(wt,{scale:j,minScale:F,maxScale:N,onZoomIn:Yt,onZoomOut:Ft,position:it,className:jt}),H.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 (",H.length,")"]}),o.jsx("div",{className:"max-h-48 overflow-y-auto space-y-1",children:H.map(t=>o.jsxs("div",{className:"text-sm",children:[t.seatNumber,t.price&&` - ${Q.currency} ${t.price.toFixed(2)}`]},t.id))})]})]})};exports.DEFAULT_COLORS=mt;exports.SeatMapViewer=Ut;exports.useConfigFetcher=pt;exports.useContainerSize=gt;exports.useTouchGestures=yt;

package/dist/index.mjs

@@ -1,97 +1,97 @@
 import { jsx as h, jsxs as w } from "react/jsx-runtime";
-import { useState as L, useEffect as W, useRef as z, useCallback as I, useMemo as T, memo as U } from "react";
-import { Stage as Gt, Layer as gt, Group as Ut, Rect as mt, Text as Kt, Circle as Jt } from "react-konva";
-function Qt(e) {
-  const [o, d] = L(null), [i, m] = L(!1), [b, p] = L(null), S = async () => {
+import { useState as E, useEffect as T, useRef as F, useCallback as N, useMemo as Y, memo as U } from "react";
+import { Stage as Qt, Layer as mt, Group as te, Rect as wt, Text as bt, Circle as ee } from "react-konva";
+function ne(e) {
+  const [i, a] = E(null), [n, x] = E(!1), [m, u] = E(null), v = async () => {
     if (e) {
-      m(!0), p(null);
+      x(!0), u(null);
       try {
         const y = await fetch(e);
         if (!y.ok)
           throw new Error(`Failed to fetch config: ${y.statusText}`);
         const s = await y.json();
-        d(s);
+        a(s);
       } catch (y) {
         const s = y instanceof Error ? y : new Error("Unknown error occurred");
-        p(s), console.error("Failed to fetch seat map config:", s);
+        u(s), console.error("Failed to fetch seat map config:", s);
       } finally {
-        m(!1);
+        x(!1);
       }
     }
   };
-  return W(() => {
-    S();
+  return T(() => {
+    v();
   }, [e]), {
-    config: o,
-    loading: i,
-    error: b,
-    refetch: S
+    config: i,
+    loading: n,
+    error: m,
+    refetch: v
   };
 }
-function te(e) {
-  const [o, d] = L({ width: 0, height: 0 });
-  return W(() => {
-    const i = e.current;
-    if (!i) return;
-    const { width: m, height: b } = i.getBoundingClientRect();
-    m > 0 && b > 0 && d({ width: m, height: b });
-    const p = new ResizeObserver((S) => {
-      const y = S[0];
+function oe(e) {
+  const [i, a] = E({ width: 0, height: 0 });
+  return T(() => {
+    const n = e.current;
+    if (!n) return;
+    const { width: x, height: m } = n.getBoundingClientRect();
+    x > 0 && m > 0 && a({ width: x, height: m });
+    const u = new ResizeObserver((v) => {
+      const y = v[0];
       if (!y) return;
-      const { width: s, height: n } = y.contentRect;
-      s > 0 && n > 0 && d((a) => a.width === s && a.height === n ? a : { width: s, height: n });
+      const { width: s, height: o } = y.contentRect;
+      s > 0 && o > 0 && a((g) => g.width === s && g.height === o ? g : { width: s, height: o });
     });
-    return p.observe(i), () => {
-      p.disconnect();
+    return u.observe(n), () => {
+      u.disconnect();
     };
-  }, [e]), o;
+  }, [e]), i;
 }
-function yt(e, o) {
-  return Math.sqrt(Math.pow(o.x - e.x, 2) + Math.pow(o.y - e.y, 2));
+function vt(e, i) {
+  return Math.sqrt(Math.pow(i.x - e.x, 2) + Math.pow(i.y - e.y, 2));
 }
-function xt(e, o) {
+function St(e, i) {
   return {
-    x: (e.x + o.x) / 2,
-    y: (e.y + o.y) / 2
+    x: (e.x + i.x) / 2,
+    y: (e.y + i.y) / 2
   };
 }
-function ee(e, o) {
-  const d = z(null), i = z(null), m = z(1);
-  W(() => {
-    const b = e.current;
-    if (!b || !o.enabled) return;
-    const p = b.container(), S = (n) => {
-      if (n.touches.length === 2) {
-        n.preventDefault();
-        const a = { x: n.touches[0].clientX, y: n.touches[0].clientY }, g = { x: n.touches[1].clientX, y: n.touches[1].clientY };
-        d.current = yt(a, g), i.current = xt(a, g), m.current = o.currentScale;
+function ie(e, i) {
+  const a = F(null), n = F(null), x = F(1);
+  T(() => {
+    const m = e.current;
+    if (!m || !i.enabled) return;
+    const u = m.container(), v = (o) => {
+      if (o.touches.length === 2) {
+        o.preventDefault();
+        const g = { x: o.touches[0].clientX, y: o.touches[0].clientY }, l = { x: o.touches[1].clientX, y: o.touches[1].clientY };
+        a.current = vt(g, l), n.current = St(g, l), x.current = i.currentScale;
       }
-    }, y = (n) => {
-      if (n.touches.length !== 2) return;
-      n.preventDefault();
-      const a = { x: n.touches[0].clientX, y: n.touches[0].clientY }, g = { x: n.touches[1].clientX, y: n.touches[1].clientY }, N = yt(a, g), C = xt(a, g);
-      if (d.current !== null && i.current !== null) {
-        const D = N / d.current, $ = Math.min(
-          Math.max(o.currentScale * D, o.minScale),
-          o.maxScale
-        ), K = p.getBoundingClientRect(), J = C.x - K.left, Q = C.y - K.top, H = o.currentScale, P = {
-          x: (J - o.currentPosition.x) / H,
-          y: (Q - o.currentPosition.y) / H
-        }, st = C.x - i.current.x, ct = C.y - i.current.y, at = {
-          x: J - P.x * $ + st,
-          y: Q - P.y * $ + ct
+    }, y = (o) => {
+      if (o.touches.length !== 2) return;
+      o.preventDefault();
+      const g = { x: o.touches[0].clientX, y: o.touches[0].clientY }, l = { x: o.touches[1].clientX, y: o.touches[1].clientY }, k = vt(g, l), C = St(g, l);
+      if (a.current !== null && n.current !== null) {
+        const D = k / a.current, P = Math.min(
+          Math.max(i.currentScale * D, i.minScale),
+          i.maxScale
+        ), K = u.getBoundingClientRect(), J = C.x - K.left, Q = C.y - K.top, tt = i.currentScale, z = {
+          x: (J - i.currentPosition.x) / tt,
+          y: (Q - i.currentPosition.y) / tt
+        }, $ = C.x - n.current.x, at = C.y - n.current.y, lt = {
+          x: J - z.x * P + $,
+          y: Q - z.y * P + at
         };
-        o.onScaleChange($, at), d.current = N, i.current = C;
+        i.onScaleChange(P, lt), a.current = k, n.current = C;
       }
-    }, s = (n) => {
-      n.touches.length < 2 && (d.current = null, i.current = null);
+    }, s = (o) => {
+      o.touches.length < 2 && (a.current = null, n.current = null);
     };
-    return p.addEventListener("touchstart", S, { passive: !1 }), p.addEventListener("touchmove", y, { passive: !1 }), p.addEventListener("touchend", s), () => {
-      p.removeEventListener("touchstart", S), p.removeEventListener("touchmove", y), p.removeEventListener("touchend", s);
+    return u.addEventListener("touchstart", v, { passive: !1 }), u.addEventListener("touchmove", y, { passive: !1 }), u.addEventListener("touchend", s), () => {
+      u.removeEventListener("touchstart", v), u.removeEventListener("touchmove", y), u.removeEventListener("touchend", s);
     };
-  }, [e, o]);
+  }, [e, i]);
 }
-const ne = {
+const re = {
   canvasBackground: "#1a1a1a",
   stageColor: "#808080",
   seatAvailable: "#2C2B30",
@@ -101,45 +101,45 @@ const ne = {
   seatHidden: "#4a4a4a",
   gridLines: "#404040",
   currency: "KD"
-}, bt = U(({ seat: e, state: o, colors: d, onClick: i, onMouseEnter: m, onMouseLeave: b }) => {
+}, Ct = U(({ seat: e, state: i, colors: a, onClick: n, onMouseEnter: x, onMouseLeave: m }) => {
   const y = {
-    available: d.seatAvailable,
-    reserved: d.seatReserved,
-    selected: d.seatSelected,
-    unavailable: d.seatUnavailable,
-    hidden: d.seatHidden
+    available: a.seatAvailable,
+    reserved: a.seatReserved,
+    selected: a.seatSelected,
+    unavailable: a.seatUnavailable,
+    hidden: a.seatHidden
     // Hidden seats are filtered out, but included for type safety
-  }[o], s = o === "available" || o === "selected", n = I(() => {
-    s && i(e);
-  }, [e, i, s]), a = I((C) => {
-    m(e, C);
+  }[i], s = i === "available" || i === "selected", o = N(() => {
+    s && n(e);
+  }, [e, n, s]), g = N((C) => {
+    x(e, C);
     const D = C.target.getStage();
     D && s && (D.container().style.cursor = "pointer");
-  }, [e, m, s]), g = I((C) => {
-    b();
+  }, [e, x, s]), l = N((C) => {
+    m();
     const D = C.target.getStage();
     D && (D.container().style.cursor = "grab");
-  }, [b]), N = {
+  }, [m]), k = {
     x: e.position.x,
     y: e.position.y,
     fill: y,
     stroke: "#ffffff",
     strokeWidth: 1,
-    onClick: n,
-    onTap: n,
-    onMouseEnter: a,
-    onMouseLeave: g
+    onClick: o,
+    onTap: o,
+    onMouseEnter: g,
+    onMouseLeave: l
   };
   return e.shape === "circle" ? /* @__PURE__ */ h(
-    Jt,
+    ee,
     {
-      ...N,
+      ...k,
       radius: 12
     }
   ) : /* @__PURE__ */ h(
-    mt,
+    wt,
     {
-      ...N,
+      ...k,
       width: 24,
       height: 24,
       offsetX: 12,
@@ -148,47 +148,73 @@ const ne = {
     }
   );
 });
-bt.displayName = "ViewerSeat";
-const St = U(({ stage: e, stageColor: o }) => /* @__PURE__ */ w(Ut, { x: e.position.x, y: e.position.y, children: [
-  /* @__PURE__ */ h(
-    mt,
-    {
-      width: e.config.width,
-      height: e.config.height,
-      fill: o + "80",
-      stroke: "#ffffff",
-      strokeWidth: 2,
-      cornerRadius: 10
-    }
-  ),
-  /* @__PURE__ */ h(
-    Kt,
-    {
-      text: e.config.label,
-      x: 0,
-      y: 0,
-      width: e.config.width,
-      height: e.config.height,
-      fontSize: 24,
-      fontStyle: "bold",
-      fill: "#ffffff",
-      align: "center",
-      verticalAlign: "middle"
-    }
-  )
-] }));
-St.displayName = "ViewerStage";
-const vt = U(({
+Ct.displayName = "ViewerSeat";
+const Mt = U(({ stage: e, stageColor: i }) => {
+  const a = (m) => ({
+    stage: "🎭",
+    table: "⬜",
+    wall: "▬",
+    barrier: "🛡️",
+    "dj-booth": "🎵",
+    bar: "🍷",
+    "entry-exit": "🚪",
+    custom: "➕"
+  })[m || "stage"] || "🎭", n = e.config.color || i, x = a(e.config.objectType);
+  return /* @__PURE__ */ w(te, { x: e.position.x, y: e.position.y, rotation: e.config.rotation || 0, children: [
+    /* @__PURE__ */ h(
+      wt,
+      {
+        width: e.config.width,
+        height: e.config.height,
+        fill: n + "80",
+        stroke: "#ffffff",
+        strokeWidth: 2,
+        cornerRadius: 10
+      }
+    ),
+    /* @__PURE__ */ h(
+      bt,
+      {
+        text: x,
+        x: 0,
+        y: 0,
+        width: e.config.width,
+        height: e.config.height * 0.4,
+        fontSize: 32,
+        fill: "#ffffff",
+        align: "center",
+        verticalAlign: "middle"
+      }
+    ),
+    /* @__PURE__ */ h(
+      bt,
+      {
+        text: e.config.label,
+        x: 0,
+        y: e.config.height * 0.4,
+        width: e.config.width,
+        height: e.config.height * 0.6,
+        fontSize: 20,
+        fontStyle: "bold",
+        fill: "#ffffff",
+        align: "center",
+        verticalAlign: "middle"
+      }
+    )
+  ] });
+});
+Mt.displayName = "ViewerStage";
+const kt = U(({
   floors: e,
-  currentFloorId: o,
-  onFloorChange: d,
-  showAllOption: i,
-  allLabel: m,
-  position: b,
-  className: p
+  currentFloorId: i,
+  onFloorChange: a,
+  showAllOption: n,
+  allLabel: x,
+  position: m,
+  className: u
 }) => {
-  const S = T(
-    () => [...e].sort((g, N) => g.order - N.order),
+  const v = Y(
+    () => [...e].sort((l, k) => l.order - k.order),
     [e]
   ), s = {
     position: "absolute",
@@ -205,8 +231,8 @@ const vt = U(({
       "top-right": { top: 0, right: 0 },
       "bottom-left": { bottom: 0, left: 0 },
       "bottom-right": { bottom: 0, right: 0 }
-    }[b]
-  }, n = {
+    }[m]
+  }, o = {
     padding: "10px 16px",
     fontSize: "14px",
     fontWeight: 500,
@@ -218,42 +244,42 @@ const vt = U(({
     transition: "all 0.2s ease",
     minHeight: "44px",
     touchAction: "manipulation"
-  }, a = {
-    ...n,
+  }, g = {
+    ...o,
     backgroundColor: "#3A7DE5",
     borderColor: "#3A7DE5"
   };
-  return /* @__PURE__ */ w("div", { className: p, style: s, children: [
-    i && /* @__PURE__ */ h(
+  return /* @__PURE__ */ w("div", { className: u, style: s, children: [
+    n && /* @__PURE__ */ h(
       "button",
       {
         type: "button",
-        onClick: () => d(null),
-        style: o === null ? a : n,
-        children: m
+        onClick: () => a(null),
+        style: i === null ? g : o,
+        children: x
       }
     ),
-    S.map((g) => /* @__PURE__ */ h(
+    v.map((l) => /* @__PURE__ */ h(
       "button",
       {
         type: "button",
-        onClick: () => d(g.id),
-        style: o === g.id ? a : n,
-        children: g.name
+        onClick: () => a(l.id),
+        style: i === l.id ? g : o,
+        children: l.name
       },
-      g.id
+      l.id
     ))
   ] });
 });
-vt.displayName = "FloorSelectorBar";
-const wt = U(({
+kt.displayName = "FloorSelectorBar";
+const It = U(({
   scale: e,
-  minScale: o,
-  maxScale: d,
-  onZoomIn: i,
-  onZoomOut: m,
-  position: b,
-  className: p
+  minScale: i,
+  maxScale: a,
+  onZoomIn: n,
+  onZoomOut: x,
+  position: m,
+  className: u
 }) => {
   const y = {
     position: "absolute",
@@ -270,7 +296,7 @@ const wt = U(({
       "top-right": { top: 0, right: 0 },
       "bottom-left": { bottom: 0, left: 0 },
       "bottom-right": { bottom: 0, right: 0 }
-    }[b]
+    }[m]
   }, s = {
     width: "44px",
     height: "44px",
@@ -288,19 +314,19 @@ const wt = U(({
     justifyContent: "center",
     transition: "all 0.2s ease",
     touchAction: "manipulation"
-  }, n = {
+  }, o = {
     ...s,
     opacity: 0.4,
     cursor: "not-allowed"
-  }, a = e < d, g = e > o;
-  return /* @__PURE__ */ w("div", { className: p, style: y, children: [
+  }, g = e < a, l = e > i;
+  return /* @__PURE__ */ w("div", { className: u, style: y, children: [
     /* @__PURE__ */ h(
       "button",
       {
         type: "button",
-        onClick: i,
-        disabled: !a,
-        style: a ? s : n,
+        onClick: n,
+        disabled: !g,
+        style: g ? s : o,
         title: "Zoom In",
         children: "+"
       }
@@ -309,29 +335,29 @@ const wt = U(({
       "button",
       {
         type: "button",
-        onClick: m,
-        disabled: !g,
-        style: g ? s : n,
+        onClick: x,
+        disabled: !l,
+        style: l ? s : o,
         title: "Zoom Out",
         children: "−"
       }
     )
   ] });
 });
-wt.displayName = "ZoomControls";
-const Ct = U(({
+It.displayName = "ZoomControls";
+const Nt = U(({
   visible: e,
-  x: o,
-  y: d,
-  seat: i,
-  currency: m,
-  state: b
+  x: i,
+  y: a,
+  seat: n,
+  currency: x,
+  state: m
 }) => {
-  if (!e || !i) return null;
-  const p = i.seatNumber || (i.rowLabel && i.columnLabel ? `${i.rowLabel}-${i.columnLabel}` : "N/A"), S = {
+  if (!e || !n) return null;
+  const u = n.seatNumber || (n.rowLabel && n.columnLabel ? `${n.rowLabel}-${n.columnLabel}` : "N/A"), v = {
     position: "fixed",
-    left: `${o + 15}px`,
-    top: `${d + 15}px`,
+    left: `${i + 15}px`,
+    top: `${a + 15}px`,
     zIndex: 1e3,
     pointerEvents: "none"
   }, y = {
@@ -346,296 +372,299 @@ const Ct = U(({
   }, s = {
     color: "#9ca3af",
     marginRight: "4px"
-  }, n = {
+  }, o = {
     fontWeight: 600
-  }, a = {
+  }, g = {
     color: "#4ade80",
     fontWeight: 600
-  }, g = {
+  }, l = {
     fontSize: "11px",
     color: "#6b7280",
     textTransform: "capitalize",
     marginTop: "4px"
   };
-  return /* @__PURE__ */ h("div", { style: S, children: /* @__PURE__ */ w("div", { style: y, children: [
-    i.sectionName && /* @__PURE__ */ w("div", { style: { marginBottom: "4px" }, children: [
+  return /* @__PURE__ */ h("div", { style: v, children: /* @__PURE__ */ w("div", { style: y, children: [
+    n.sectionName && /* @__PURE__ */ w("div", { style: { marginBottom: "4px" }, children: [
       /* @__PURE__ */ h("span", { style: s, children: "Section:" }),
-      /* @__PURE__ */ h("span", { style: { ...n, color: "#3b82f6" }, children: i.sectionName })
+      /* @__PURE__ */ h("span", { style: { ...o, color: "#3b82f6" }, children: n.sectionName })
     ] }),
     /* @__PURE__ */ w("div", { style: { marginBottom: "4px" }, children: [
       /* @__PURE__ */ h("span", { style: s, children: "Seat:" }),
-      /* @__PURE__ */ h("span", { style: n, children: p })
+      /* @__PURE__ */ h("span", { style: o, children: u })
     ] }),
-    i.price !== void 0 && i.price > 0 && /* @__PURE__ */ w("div", { style: { marginBottom: "4px" }, children: [
+    n.price !== void 0 && n.price > 0 && /* @__PURE__ */ w("div", { style: { marginBottom: "4px" }, children: [
       /* @__PURE__ */ h("span", { style: s, children: "Price:" }),
-      /* @__PURE__ */ w("span", { style: a, children: [
-        m,
+      /* @__PURE__ */ w("span", { style: g, children: [
+        x,
         " ",
-        i.price.toFixed(2)
+        n.price.toFixed(2)
       ] })
     ] }),
-    /* @__PURE__ */ w("div", { style: g, children: [
+    /* @__PURE__ */ w("div", { style: l, children: [
       "Status: ",
-      b
+      m
     ] })
   ] }) });
 });
-Ct.displayName = "SeatTooltip";
-const se = ({
+Nt.displayName = "SeatTooltip";
+const le = ({
   config: e,
-  configUrl: o,
-  floorId: d,
-  onFloorChange: i,
-  reservedSeats: m = [],
-  unavailableSeats: b = [],
-  onSeatSelect: p,
-  onSeatDeselect: S,
-  onSelectionChange: y,
-  colorOverrides: s,
-  showTooltip: n = !0,
-  zoomEnabled: a = !0,
-  className: g = "",
-  onConfigLoad: N,
-  onError: C,
+  configUrl: i,
+  floorId: a,
+  onFloorChange: n,
+  reservedSeats: x = [],
+  unavailableSeats: m = [],
+  selectedSeats: u,
+  onSeatSelect: v,
+  onSeatDeselect: y,
+  onSelectionChange: s,
+  colorOverrides: o,
+  showTooltip: g = !0,
+  zoomEnabled: l = !0,
+  className: k = "",
+  onConfigLoad: C,
+  onError: D,
   // Floor selector props
-  showFloorSelector: D,
-  floorSelectorPosition: $ = "top-left",
-  floorSelectorClassName: K,
-  showAllFloorsOption: J = !0,
-  allFloorsLabel: Q = "All",
-  fitToView: H = !0,
-  fitPadding: P = 40,
+  showFloorSelector: P,
+  floorSelectorPosition: K = "top-left",
+  floorSelectorClassName: J,
+  showAllFloorsOption: Q = !0,
+  allFloorsLabel: tt = "All",
+  fitToView: z = !0,
+  fitPadding: $ = 40,
   // Zoom controls
-  showZoomControls: st = !0,
-  zoomControlsPosition: ct = "bottom-right",
-  zoomControlsClassName: at,
-  maxZoom: X = 3,
-  zoomStep: tt = 0.25,
+  showZoomControls: at = !0,
+  zoomControlsPosition: lt = "bottom-right",
+  zoomControlsClassName: Dt,
+  maxZoom: L = 3,
+  zoomStep: et = 0.25,
   // Touch gestures
-  touchEnabled: Mt = !0
+  touchEnabled: Rt = !0
 }) => {
-  const lt = z(null), ft = z(null), v = te(ft), [B, kt] = L(/* @__PURE__ */ new Set()), [M, j] = L(1), [k, E] = L({ x: 0, y: 0 }), [It, Nt] = L(null), [Dt, Rt] = L(1), et = z({ width: 0, height: 0 }), [O, pt] = L({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: Lt, loading: Xt, error: V } = Qt(o), c = e || Lt, ht = d !== void 0, R = ht ? d || null : It, Yt = I((t) => {
-    ht || Nt(t), i?.(t);
-  }, [ht, i]), dt = c?.floors || [], Et = D !== void 0 ? D : dt.length > 1, nt = T(
-    () => c ? { ...c.colors, ...s } : { ...ne, ...s },
-    [c, s]
-  ), F = T(() => {
+  const ht = F(null), gt = F(null), S = oe(gt), [j, yt] = E(/* @__PURE__ */ new Set()), [M, H] = E(1), [I, W] = E({ x: 0, y: 0 }), [Et, Lt] = E(null), [Xt, Yt] = E(1), nt = F({ width: 0, height: 0 }), [O, xt] = E({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: Tt, loading: Wt, error: V } = ne(i), c = e || Tt, dt = a !== void 0, R = dt ? a || null : Et, ot = u !== void 0, Pt = N((t) => {
+    dt || Lt(t), n?.(t);
+  }, [dt, n]), ut = c?.floors || [], jt = P !== void 0 ? P : ut.length > 1, it = Y(
+    () => c ? { ...c.colors, ...o } : { ...re, ...o },
+    [c, o]
+  ), A = Y(() => {
     if (!c) return [];
     let t = c.seats.filter((r) => r.state !== "hidden");
     return R && (t = t.filter(
       (r) => r.floorId === R || !r.floorId && R === "floor_default"
     )), t;
-  }, [c, R]), ot = T(() => c?.stages ? R ? c.stages.filter(
+  }, [c, R]), rt = Y(() => c?.stages ? R ? c.stages.filter(
     (t) => t.floorId === R || !t.floorId && R === "floor_default"
-  ) : c.stages : [], [c, R]), Y = T(() => {
-    if (!c || F.length === 0 && ot.length === 0)
+  ) : c.stages : [], [c, R]), X = Y(() => {
+    if (!c || A.length === 0 && rt.length === 0)
       return null;
     const t = 12;
-    let r = 1 / 0, u = 1 / 0, l = -1 / 0, f = -1 / 0;
-    return F.forEach((x) => {
-      r = Math.min(r, x.position.x - t), u = Math.min(u, x.position.y - t), l = Math.max(l, x.position.x + t), f = Math.max(f, x.position.y + t);
-    }), ot.forEach((x) => {
-      r = Math.min(r, x.position.x), u = Math.min(u, x.position.y), l = Math.max(l, x.position.x + (x.config?.width || 200)), f = Math.max(f, x.position.y + (x.config?.height || 100));
-    }), { minX: r, minY: u, maxX: l, maxY: f, width: l - r, height: f - u };
-  }, [c, F, ot]);
-  W(() => {
-    if (!H || !c || !Y || v.width === 0 || v.height === 0) return;
-    const t = Math.abs(v.width - et.current.width), r = Math.abs(v.height - et.current.height);
-    if (!(et.current.width === 0) && t < 10 && r < 10) return;
-    et.current = v;
-    const l = v.width, f = v.height, x = l - P * 2, G = f - P * 2, it = x / Y.width, ut = G / Y.height, rt = Math.min(it, ut, X), jt = Y.minX + Y.width / 2, Ot = Y.minY + Y.height / 2, Vt = l / 2, Zt = f / 2, _t = Vt - jt * rt, qt = Zt - Ot * rt;
-    j(rt), E({ x: _t, y: qt }), Rt(rt);
-  }, [H, c, Y, P, X, v, R]);
-  const Z = T(() => {
-    const t = new Set(m), r = new Set(b);
+    let r = 1 / 0, f = 1 / 0, d = -1 / 0, p = -1 / 0;
+    return A.forEach((b) => {
+      r = Math.min(r, b.position.x - t), f = Math.min(f, b.position.y - t), d = Math.max(d, b.position.x + t), p = Math.max(p, b.position.y + t);
+    }), rt.forEach((b) => {
+      r = Math.min(r, b.position.x), f = Math.min(f, b.position.y), d = Math.max(d, b.position.x + (b.config?.width || 200)), p = Math.max(p, b.position.y + (b.config?.height || 100));
+    }), { minX: r, minY: f, maxX: d, maxY: p, width: d - r, height: p - f };
+  }, [c, A, rt]);
+  T(() => {
+    if (!z || !c || !X || S.width === 0 || S.height === 0) return;
+    const t = Math.abs(S.width - nt.current.width), r = Math.abs(S.height - nt.current.height);
+    if (!(nt.current.width === 0) && t < 10 && r < 10) return;
+    nt.current = S;
+    const d = S.width, p = S.height, b = d - $ * 2, G = p - $ * 2, st = b / X.width, pt = G / X.height, ct = Math.min(st, pt, L), _t = X.minX + X.width / 2, qt = X.minY + X.height / 2, Gt = d / 2, Ut = p / 2, Kt = Gt - _t * ct, Jt = Ut - qt * ct;
+    H(ct), W({ x: Kt, y: Jt }), Yt(ct);
+  }, [z, c, X, $, L, S, R]);
+  const Z = Y(() => {
+    const t = new Set(x), r = new Set(m);
     return { reserved: t, unavailable: r };
-  }, [m, b]), _ = I((t) => {
-    const r = t.id, u = t.seatNumber || "";
-    return Z.unavailable.has(r) || Z.unavailable.has(u) ? "unavailable" : Z.reserved.has(r) || Z.reserved.has(u) ? "reserved" : B.has(r) ? "selected" : t.state;
-  }, [Z, B]);
-  W(() => {
-    c && N && N(c);
-  }, [c, N]), W(() => {
-    V && C && C(V);
-  }, [V, C]);
-  const Tt = I((t) => {
+  }, [x, m]), ft = Y(() => u ? new Set(u) : null, [u]), _ = N((t) => {
+    const r = t.id, f = t.seatNumber || "";
+    return Z.unavailable.has(r) || Z.unavailable.has(f) ? "unavailable" : Z.reserved.has(r) || Z.reserved.has(f) ? "reserved" : j.has(r) ? "selected" : t.state;
+  }, [Z, j]);
+  T(() => {
+    c && C && C(c);
+  }, [c, C]), T(() => {
+    V && D && D(V);
+  }, [V, D]), T(() => {
+    ot && ft && yt(ft);
+  }, [ot, ft]);
+  const At = N((t) => {
     const r = _(t);
     if (r !== "available" && r !== "selected")
       return;
-    const u = B.has(t.id);
-    kt((l) => {
-      const f = new Set(l);
-      return u ? f.delete(t.id) : f.add(t.id), f;
-    }), u ? S?.(t) : (p?.(t), p || console.log("Seat selected:", t));
-  }, [_, B, p, S]), q = T(() => c ? F.filter((t) => B.has(t.id)) : [], [F, B]);
-  W(() => {
-    y?.(q);
-  }, [q, y]);
-  const A = Dt, Wt = I(() => {
-    if (!a) return;
-    const t = Math.min(M + tt, X);
+    const f = j.has(t.id);
+    ot || yt((d) => {
+      const p = new Set(d);
+      return f ? p.delete(t.id) : p.add(t.id), p;
+    }), f ? y?.(t) : (v?.(t), v || console.log("Seat selected:", t));
+  }, [_, j, ot, v, y]), q = Y(() => c ? A.filter((t) => j.has(t.id)) : [], [A, j]);
+  T(() => {
+    s?.(q);
+  }, [q, s]);
+  const B = Xt, Bt = N(() => {
+    if (!l) return;
+    const t = Math.min(M + et, L);
     if (t !== M) {
-      const r = v.width || c?.canvas.width || 800, u = v.height || c?.canvas.height || 600, l = r / 2, f = u / 2, x = {
-        x: (l - k.x) / M,
-        y: (f - k.y) / M
+      const r = S.width || c?.canvas.width || 800, f = S.height || c?.canvas.height || 600, d = r / 2, p = f / 2, b = {
+        x: (d - I.x) / M,
+        y: (p - I.y) / M
       };
-      j(t), E({
-        x: l - x.x * t,
-        y: f - x.y * t
+      H(t), W({
+        x: d - b.x * t,
+        y: p - b.y * t
       });
     }
-  }, [a, M, tt, X, v, c, k]), Pt = I(() => {
-    if (!a) return;
-    const t = Math.max(M - tt, A);
+  }, [l, M, et, L, S, c, I]), Ft = N(() => {
+    if (!l) return;
+    const t = Math.max(M - et, B);
     if (t !== M) {
-      const r = v.width || c?.canvas.width || 800, u = v.height || c?.canvas.height || 600, l = r / 2, f = u / 2, x = {
-        x: (l - k.x) / M,
-        y: (f - k.y) / M
+      const r = S.width || c?.canvas.width || 800, f = S.height || c?.canvas.height || 600, d = r / 2, p = f / 2, b = {
+        x: (d - I.x) / M,
+        y: (p - I.y) / M
       };
-      j(t), E({
-        x: l - x.x * t,
-        y: f - x.y * t
+      H(t), W({
+        x: d - b.x * t,
+        y: p - b.y * t
       });
     }
-  }, [a, M, tt, A, v, c, k]), Bt = I((t) => {
-    E({
+  }, [l, M, et, B, S, c, I]), zt = N((t) => {
+    W({
       x: t.target.x(),
       y: t.target.y()
     });
-  }, []), Ft = I((t) => {
-    if (!a) return;
+  }, []), $t = N((t) => {
+    if (!l) return;
     t.evt.preventDefault();
-    const r = lt.current;
+    const r = ht.current;
     if (!r) return;
-    const u = r.scaleX(), l = r.getPointerPosition();
-    if (!l) return;
-    const f = 1.1, x = t.evt.deltaY > 0 ? u / f : u * f, G = Math.min(Math.max(x, A), X), it = {
-      x: (l.x - k.x) / u,
-      y: (l.y - k.y) / u
-    }, ut = {
-      x: l.x - it.x * G,
-      y: l.y - it.y * G
+    const f = r.scaleX(), d = r.getPointerPosition();
+    if (!d) return;
+    const p = 1.1, b = t.evt.deltaY > 0 ? f / p : f * p, G = Math.min(Math.max(b, B), L), st = {
+      x: (d.x - I.x) / f,
+      y: (d.y - I.y) / f
+    }, pt = {
+      x: d.x - st.x * G,
+      y: d.y - st.y * G
     };
-    j(G), E(ut);
-  }, [a, k, A, X]);
-  ee(lt, {
-    enabled: Mt && a,
-    minScale: A,
-    maxScale: X,
+    H(G), W(pt);
+  }, [l, I, B, L]);
+  ie(ht, {
+    enabled: Rt && l,
+    minScale: B,
+    maxScale: L,
     currentScale: M,
-    currentPosition: k,
+    currentPosition: I,
     onScaleChange: (t, r) => {
-      j(t), E(r);
+      H(t), W(r);
     },
     onPositionChange: (t) => {
-      E(t);
+      W(t);
     }
   });
-  const At = I((t, r) => {
-    if (!n) return;
-    const u = r.target.getStage();
-    if (!u) return;
-    const l = u.getPointerPosition();
-    if (!l) return;
-    const f = u.container().getBoundingClientRect();
-    pt({
+  const Ht = N((t, r) => {
+    if (!g) return;
+    const f = r.target.getStage();
+    if (!f) return;
+    const d = f.getPointerPosition();
+    if (!d) return;
+    const p = f.container().getBoundingClientRect();
+    xt({
       visible: !0,
-      x: f.left + l.x,
-      y: f.top + l.y,
+      x: p.left + d.x,
+      y: p.top + d.y,
       seat: t,
       state: _(t)
     });
-  }, [n, _]), zt = I(() => {
-    pt((t) => ({ ...t, visible: !1 }));
+  }, [g, _]), Ot = N(() => {
+    xt((t) => ({ ...t, visible: !1 }));
   }, []);
-  if (Xt)
-    return /* @__PURE__ */ h("div", { className: `flex items-center justify-center h-full ${g}`, children: /* @__PURE__ */ h("p", { children: "Loading seat map..." }) });
+  if (Wt)
+    return /* @__PURE__ */ h("div", { className: `flex items-center justify-center h-full ${k}`, children: /* @__PURE__ */ h("p", { children: "Loading seat map..." }) });
   if (V)
-    return /* @__PURE__ */ h("div", { className: `flex items-center justify-center h-full ${g}`, children: /* @__PURE__ */ w("p", { className: "text-red-500", children: [
+    return /* @__PURE__ */ h("div", { className: `flex items-center justify-center h-full ${k}`, children: /* @__PURE__ */ w("p", { className: "text-red-500", children: [
       "Error loading seat map: ",
       V.message
     ] }) });
   if (!c)
-    return /* @__PURE__ */ h("div", { className: `flex items-center justify-center h-full ${g}`, children: /* @__PURE__ */ h("p", { children: "No configuration provided" }) });
-  const $t = v.width || c.canvas.width, Ht = v.height || c.canvas.height;
+    return /* @__PURE__ */ h("div", { className: `flex items-center justify-center h-full ${k}`, children: /* @__PURE__ */ h("p", { children: "No configuration provided" }) });
+  const Vt = S.width || c.canvas.width, Zt = S.height || c.canvas.height;
   return /* @__PURE__ */ w(
     "div",
     {
-      ref: ft,
-      className: `relative ${g}`,
+      ref: gt,
+      className: `relative ${k}`,
       style: { width: "100%", height: "100%" },
       children: [
-        Et && dt.length > 0 && /* @__PURE__ */ h(
-          vt,
+        jt && ut.length > 0 && /* @__PURE__ */ h(
+          kt,
           {
-            floors: dt,
+            floors: ut,
             currentFloorId: R,
-            onFloorChange: Yt,
-            showAllOption: J,
-            allLabel: Q,
-            position: $,
-            className: K
+            onFloorChange: Pt,
+            showAllOption: Q,
+            allLabel: tt,
+            position: K,
+            className: J
           }
         ),
         /* @__PURE__ */ w(
-          Gt,
+          Qt,
           {
-            ref: lt,
-            width: $t,
-            height: Ht,
+            ref: ht,
+            width: Vt,
+            height: Zt,
             scaleX: M,
             scaleY: M,
-            x: k.x,
-            y: k.y,
+            x: I.x,
+            y: I.y,
             draggable: !0,
-            onDragEnd: Bt,
-            onWheel: Ft,
+            onDragEnd: zt,
+            onWheel: $t,
             style: { backgroundColor: c.canvas.backgroundColor, cursor: "grab" },
             children: [
-              /* @__PURE__ */ h(gt, { listening: !1, children: ot.map((t) => /* @__PURE__ */ h(
-                St,
+              /* @__PURE__ */ h(mt, { listening: !1, children: rt.map((t) => /* @__PURE__ */ h(
+                Mt,
                 {
                   stage: t,
-                  stageColor: nt.stageColor
+                  stageColor: it.stageColor
                 },
                 t.id
               )) }),
-              /* @__PURE__ */ h(gt, { children: F.map((t) => /* @__PURE__ */ h(
-                bt,
+              /* @__PURE__ */ h(mt, { children: A.map((t) => /* @__PURE__ */ h(
+                Ct,
                 {
                   seat: t,
                   state: _(t),
-                  colors: nt,
-                  onClick: Tt,
-                  onMouseEnter: At,
-                  onMouseLeave: zt
+                  colors: it,
+                  onClick: At,
+                  onMouseEnter: Ht,
+                  onMouseLeave: Ot
                 },
                 t.id
               )) })
             ]
           }
         ),
-        n && /* @__PURE__ */ h(
-          Ct,
+        g && /* @__PURE__ */ h(
+          Nt,
           {
             visible: O.visible,
             x: O.x,
             y: O.y,
             seat: O.seat,
-            currency: nt.currency,
+            currency: it.currency,
             state: O.state
           }
         ),
-        st && a && /* @__PURE__ */ h(
-          wt,
+        at && l && /* @__PURE__ */ h(
+          It,
           {
             scale: M,
-            minScale: A,
-            maxScale: X,
-            onZoomIn: Wt,
-            onZoomOut: Pt,
-            position: ct,
-            className: at
+            minScale: B,
+            maxScale: L,
+            onZoomIn: Bt,
+            onZoomOut: Ft,
+            position: lt,
+            className: Dt
           }
         ),
         q.length > 0 && /* @__PURE__ */ w("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
@@ -646,7 +675,7 @@ const se = ({
           ] }),
           /* @__PURE__ */ h("div", { className: "max-h-48 overflow-y-auto space-y-1", children: q.map((t) => /* @__PURE__ */ w("div", { className: "text-sm", children: [
             t.seatNumber,
-            t.price && ` - ${nt.currency} ${t.price.toFixed(2)}`
+            t.price && ` - ${it.currency} ${t.price.toFixed(2)}`
           ] }, t.id)) })
         ] })
       ]
@@ -654,9 +683,9 @@ const se = ({
   );
 };
 export {
-  ne as DEFAULT_COLORS,
-  se as SeatMapViewer,
-  Qt as useConfigFetcher,
-  te as useContainerSize,
-  ee as useTouchGestures
+  re as DEFAULT_COLORS,
+  le as SeatMapViewer,
+  ne as useConfigFetcher,
+  oe as useContainerSize,
+  ie as useTouchGestures
 };

package/package.json

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