@zonetrix/viewer 2.10.1 → 2.10.2

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),t=require("react"),P=require("react-konva"),B=require("firebase/database"),rt=require("@zonetrix/shared");function Re(n){const[s,o]=t.useState(null),[r,h]=t.useState(!1),[d,l]=t.useState(null),v=async()=>{if(n){h(!0),l(null);try{const p=await fetch(n);if(!p.ok)throw new Error(`Failed to fetch config: ${p.statusText}`);const a=await p.json();o(a)}catch(p){const a=p instanceof Error?p:new Error("Unknown error occurred");l(a),console.error("Failed to fetch seat map config:",a)}finally{h(!1)}}};return t.useEffect(()=>{v()},[n]),{config:s,loading:r,error:d,refetch:v}}function je(n){const[s,o]=t.useState({width:0,height:0});return t.useEffect(()=>{const r=n.current;if(!r)return;const{width:h,height:d}=r.getBoundingClientRect();h>0&&d>0&&o({width:h,height:d});const l=new ResizeObserver(v=>{const p=v[0];if(!p)return;const{width:a,height:c}=p.contentRect;a>0&&c>0&&o(f=>f.width===a&&f.height===c?f:{width:a,height:c})});return l.observe(r),()=>{l.disconnect()}},[n]),s}function we(n,s){return Math.sqrt(Math.pow(s.x-n.x,2)+Math.pow(s.y-n.y,2))}function Ce(n,s){return{x:(n.x+s.x)/2,y:(n.y+s.y)/2}}function Me(n,s){const o=t.useRef(null),r=t.useRef(null),h=t.useRef(1);t.useEffect(()=>{const d=n.current;if(!d||!s.enabled)return;const l=d.container(),v=c=>{if(c.touches.length===2){c.preventDefault();const f={x:c.touches[0].clientX,y:c.touches[0].clientY},g={x:c.touches[1].clientX,y:c.touches[1].clientY};o.current=we(f,g),r.current=Ce(f,g),h.current=s.currentScale}},p=c=>{if(c.touches.length!==2)return;c.preventDefault();const f={x:c.touches[0].clientX,y:c.touches[0].clientY},g={x:c.touches[1].clientX,y:c.touches[1].clientY},m=we(f,g),w=Ce(f,g);if(o.current!==null&&r.current!==null){const R=m/o.current,E=Math.min(Math.max(s.currentScale*R,s.minScale),s.maxScale),F=l.getBoundingClientRect(),j=w.x-F.left,I=w.y-F.top,L=s.currentScale,T={x:(j-s.currentPosition.x)/L,y:(I-s.currentPosition.y)/L},V=w.x-r.current.x,W=w.y-r.current.y,q={x:j-T.x*E+V,y:I-T.y*E+W};s.onScaleChange(E,q),o.current=m,r.current=w}},a=c=>{c.touches.length<2&&(o.current=null,r.current=null)};return l.addEventListener("touchstart",v,{passive:!1}),l.addEventListener("touchmove",p,{passive:!1}),l.addEventListener("touchend",a),()=>{l.removeEventListener("touchstart",v),l.removeEventListener("touchmove",p),l.removeEventListener("touchend",a)}},[n,s])}const Ee={canvasBackground:"#1a1a1a",stageColor:"#808080",seatAvailable:"#2C2B30",seatReserved:"#FCEA00",seatSelected:"#3A7DE5",seatUnavailable:"#6b7280",seatHidden:"#4a4a4a",gridLines:"#404040",currency:"KD"},Fe=t.memo(({seat:n,state:s,colors:o,onClick:r,onMouseEnter:h,onMouseLeave:d})=>{const p={available:o.seatAvailable,reserved:o.seatReserved,selected:o.seatSelected,unavailable:o.seatUnavailable,hidden:o.seatHidden}[s],a=s==="available"||s==="selected",c=t.useCallback(()=>{a&&r(n)},[n,r,a]),f=t.useCallback(w=>{h(n,w);const R=w.target.getStage();R&&a&&(R.container().style.cursor="pointer")},[n,h,a]),g=t.useCallback(w=>{d();const R=w.target.getStage();R&&(R.container().style.cursor="grab")},[d]),m={x:n.position.x,y:n.position.y,fill:p,stroke:"#ffffff",strokeWidth:1,onClick:c,onTap:c,onMouseEnter:f,onMouseLeave:g};return n.shape==="circle"?i.jsx(P.Circle,{...m,radius:12}):i.jsx(P.Rect,{...m,width:24,height:24,offsetX:12,offsetY:12,cornerRadius:n.shape==="square"?0:4})});Fe.displayName="ViewerSeat";const ke=t.memo(({stage:n,stageColor:s})=>{const o=d=>({stage:"🎭",table:"⬜",wall:"▬",barrier:"🛡️","dj-booth":"🎵",bar:"🍷","entry-exit":"🚪",custom:"➕"})[d||"stage"]||"🎭",r=n.config.color||s,h=o(n.config.objectType);return i.jsxs(P.Group,{x:n.position.x,y:n.position.y,rotation:n.config.rotation||0,children:[i.jsx(P.Rect,{width:n.config.width,height:n.config.height,fill:r+"80",stroke:"#ffffff",strokeWidth:2,cornerRadius:10}),i.jsx(P.Text,{text:h,x:0,y:0,width:n.config.width,height:n.config.height*.4,fontSize:32,fill:"#ffffff",align:"center",verticalAlign:"middle"}),i.jsx(P.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"})]})});ke.displayName="ViewerStage";const Ie=t.memo(({floors:n,currentFloorId:s,onFloorChange:o,showAllOption:r,allLabel:h,position:d,className:l})=>{const v=t.useMemo(()=>[...n].sort((g,m)=>g.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}}[d]},c={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"},f={...c,backgroundColor:"#3A7DE5",borderColor:"#3A7DE5"};return i.jsxs("div",{className:l,style:a,children:[r&&i.jsx("button",{type:"button",onClick:()=>o(null),style:s===null?f:c,children:h}),v.map(g=>i.jsx("button",{type:"button",onClick:()=>o(g.id),style:s===g.id?f:c,children:g.name},g.id))]})});Ie.displayName="FloorSelectorBar";const Le=t.memo(({scale:n,minScale:s,maxScale:o,onZoomIn:r,onZoomOut:h,position:d,className:l})=>{const p={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}}[d]},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"},c={...a,opacity:.4,cursor:"not-allowed"},f=n<o,g=n>s;return i.jsxs("div",{className:l,style:p,children:[i.jsx("button",{type:"button",onClick:r,disabled:!f,style:f?a:c,title:"Zoom In",children:"+"}),i.jsx("button",{type:"button",onClick:h,disabled:!g,style:g?a:c,title:"Zoom Out",children:"−"})]})});Le.displayName="ZoomControls";const De=t.memo(({visible:n,x:s,y:o,seat:r,currency:h,state:d})=>{if(!n||!r)return null;const l=r.seatNumber||(r.rowLabel&&r.columnLabel?`${r.rowLabel}-${r.columnLabel}`:"N/A"),v={position:"fixed",left:`${s+15}px`,top:`${o+15}px`,zIndex:1e3,pointerEvents:"none"},p={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"},c={fontWeight:600},f={color:"#4ade80",fontWeight:600},g={fontSize:"11px",color:"#6b7280",textTransform:"capitalize",marginTop:"4px"};return i.jsx("div",{style:v,children:i.jsxs("div",{style:p,children:[r.sectionName&&i.jsxs("div",{style:{marginBottom:"4px"},children:[i.jsx("span",{style:a,children:"Section:"}),i.jsx("span",{style:{...c,color:"#3b82f6"},children:r.sectionName})]}),i.jsxs("div",{style:{marginBottom:"4px"},children:[i.jsx("span",{style:a,children:"Seat:"}),i.jsx("span",{style:c,children:l})]}),r.price!==void 0&&r.price>0&&d==="available"&&i.jsxs("div",{style:{marginBottom:"4px"},children:[i.jsx("span",{style:a,children:"Price:"}),i.jsxs("span",{style:f,children:[h," ",r.price.toFixed(2)]})]}),i.jsxs("div",{style:g,children:["Status: ",d]})]})})});De.displayName="SeatTooltip";const ot=({config:n,configUrl:s,floorId:o,onFloorChange:r,reservedSeats:h=[],unavailableSeats:d=[],selectedSeats:l,myReservedSeats:v=[],onSeatSelect:p,onSeatDeselect:a,onSelectionChange:c,colorOverrides:f,showTooltip:g=!0,zoomEnabled:m=!0,className:w="",onConfigLoad:R,onError:E,showFloorSelector:F,floorSelectorPosition:j="top-left",floorSelectorClassName:I,showAllFloorsOption:L=!0,allFloorsLabel:T="All",fitToView:V=!0,fitPadding:W=40,showZoomControls:q=!0,zoomControlsPosition:fe="bottom-right",zoomControlsClassName:se,minZoom:re,maxZoom:z=3,zoomStep:A=.25,touchEnabled:ve=!0})=>{const X=t.useRef(null),O=t.useRef(null),M=je(O),[Y,he]=t.useState(new Set),[k,J]=t.useState(1),[D,U]=t.useState({x:0,y:0}),[Ne,Ae]=t.useState(null),[Xe,Ye]=t.useState(1),oe=t.useRef({width:0,height:0}),[K,me]=t.useState({visible:!1,x:0,y:0,seat:null,state:"available"}),{config:Pe,loading:We,error:Z}=Re(s),b=n||Pe,ge=o!==void 0,N=ge?o||null:Ne,ie=l!==void 0,Oe=t.useCallback(e=>{ge||Ae(e),r?.(e)},[ge,r]),pe=b?.floors||[],$e=F!==void 0?F:pe.length>1,ae=t.useMemo(()=>b?{...b.colors,...f}:{...Ee,...f},[b,f]),_=t.useMemo(()=>{if(!b)return[];let e=b.seats.filter(u=>u.state!=="hidden");return N&&(e=e.filter(u=>u.floorId===N||!u.floorId&&N==="floor_default")),e},[b,N]),ce=t.useMemo(()=>b?.stages?N?b.stages.filter(e=>e.floorId===N||!e.floorId&&N==="floor_default"):b.stages:[],[b,N]),$=t.useMemo(()=>{if(!b||_.length===0&&ce.length===0)return null;const e=12;let u=1/0,x=1/0,y=-1/0,S=-1/0;return _.forEach(C=>{u=Math.min(u,C.position.x-e),x=Math.min(x,C.position.y-e),y=Math.max(y,C.position.x+e),S=Math.max(S,C.position.y+e)}),ce.forEach(C=>{u=Math.min(u,C.position.x),x=Math.min(x,C.position.y),y=Math.max(y,C.position.x+(C.config?.width||200)),S=Math.max(S,C.position.y+(C.config?.height||100))}),{minX:u,minY:x,maxX:y,maxY:S,width:y-u,height:S-x}},[b,_,ce]);t.useEffect(()=>{if(!V||!b||!$||M.width===0||M.height===0)return;const e=Math.abs(M.width-oe.current.width),u=Math.abs(M.height-oe.current.height);if(!(oe.current.width===0)&&e<10&&u<10)return;oe.current=M;const y=M.width,S=M.height,C=y-W*2,te=S-W*2,le=C/$.width,xe=te/$.height,ue=Math.min(le,xe,z),Ze=$.minX+$.width/2,Qe=$.minY+$.height/2,et=y/2,tt=S/2,nt=et-Ze*ue,st=tt-Qe*ue;J(ue),U({x:nt,y:st}),Ye(ue)},[V,b,$,W,z,M,N]);const H=t.useMemo(()=>{const e=new Set(h),u=new Set(d),x=new Set(v);return{reserved:e,unavailable:u,myReserved:x}},[h,d,v]),be=t.useMemo(()=>l?new Set(l):null,[l]),Q=t.useCallback(e=>{const u=e.id,x=e.seatNumber||"";return H.unavailable.has(u)||H.unavailable.has(x)?"unavailable":H.reserved.has(u)||H.reserved.has(x)?"reserved":H.myReserved.has(u)||H.myReserved.has(x)||Y.has(u)?"selected":e.state},[H,Y]);t.useEffect(()=>{b&&R&&R(b)},[b,R]),t.useEffect(()=>{Z&&E&&E(Z)},[Z,E]),t.useEffect(()=>{ie&&be&&he(be)},[ie,be]);const Be=t.useCallback(e=>{const u=Q(e);if(u!=="available"&&u!=="selected")return;const x=Y.has(e.id);ie||he(y=>{const S=new Set(y);return x?S.delete(e.id):S.add(e.id),S}),x?a?.(e):(p?.(e),p||console.log("Seat selected:",e))},[Q,Y,ie,p,a]),ee=t.useMemo(()=>b?_.filter(e=>Y.has(e.id)):[],[_,Y]);t.useEffect(()=>{c?.(ee)},[ee,c]);const G=re!==void 0?re:Xe,Ve=t.useCallback(()=>{if(!m)return;const e=Math.min(k+A,z);if(e!==k){const u=M.width||b?.canvas.width||800,x=M.height||b?.canvas.height||600,y=u/2,S=x/2,C={x:(y-D.x)/k,y:(S-D.y)/k};J(e),U({x:y-C.x*e,y:S-C.y*e})}},[m,k,A,z,M,b,D]),Ue=t.useCallback(()=>{if(!m)return;const e=Math.max(k-A,G);if(e!==k){const u=M.width||b?.canvas.width||800,x=M.height||b?.canvas.height||600,y=u/2,S=x/2,C={x:(y-D.x)/k,y:(S-D.y)/k};J(e),U({x:y-C.x*e,y:S-C.y*e})}},[m,k,A,G,M,b,D]),He=t.useCallback(e=>{U({x:e.target.x(),y:e.target.y()})},[]),qe=t.useCallback(e=>{if(!m)return;e.evt.preventDefault();const u=X.current;if(!u)return;const x=u.scaleX(),y=u.getPointerPosition();if(!y)return;const S=1.1,C=e.evt.deltaY>0?x/S:x*S,te=Math.min(Math.max(C,G),z),le={x:(y.x-D.x)/x,y:(y.y-D.y)/x},xe={x:y.x-le.x*te,y:y.y-le.y*te};J(te),U(xe)},[m,D,G,z]);Me(X,{enabled:ve&&m,minScale:G,maxScale:z,currentScale:k,currentPosition:D,onScaleChange:(e,u)=>{J(e),U(u)},onPositionChange:e=>{U(e)}});const _e=t.useCallback((e,u)=>{if(!g)return;const x=u.target.getStage();if(!x)return;const y=x.getPointerPosition();if(!y)return;const S=x.container().getBoundingClientRect();me({visible:!0,x:S.left+y.x,y:S.top+y.y,seat:e,state:Q(e)})},[g,Q]),Ge=t.useCallback(()=>{me(e=>({...e,visible:!1}))},[]);if(We)return i.jsx("div",{className:`flex items-center justify-center h-full ${w}`,children:i.jsx("p",{children:"Loading seat map..."})});if(Z)return i.jsx("div",{className:`flex items-center justify-center h-full ${w}`,children:i.jsxs("p",{className:"text-red-500",children:["Error loading seat map: ",Z.message]})});if(!b)return i.jsx("div",{className:`flex items-center justify-center h-full ${w}`,children:i.jsx("p",{children:"No configuration provided"})});const Je=M.width||b.canvas.width,Ke=M.height||b.canvas.height;return i.jsxs("div",{ref:O,className:`relative ${w}`,style:{width:"100%",height:"100%"},children:[$e&&pe.length>0&&i.jsx(Ie,{floors:pe,currentFloorId:N,onFloorChange:Oe,showAllOption:L,allLabel:T,position:j,className:I}),i.jsxs(P.Stage,{ref:X,width:Je,height:Ke,scaleX:k,scaleY:k,x:D.x,y:D.y,draggable:!0,onDragEnd:He,onWheel:qe,style:{backgroundColor:b.canvas.backgroundColor,cursor:"grab"},children:[i.jsx(P.Layer,{listening:!1,children:ce.map(e=>i.jsx(ke,{stage:e,stageColor:ae.stageColor},e.id))}),i.jsx(P.Layer,{children:_.map(e=>i.jsx(Fe,{seat:e,state:Q(e),colors:ae,onClick:Be,onMouseEnter:_e,onMouseLeave:Ge},e.id))})]}),g&&i.jsx(De,{visible:K.visible,x:K.x,y:K.y,seat:K.seat,currency:ae.currency,state:K.state}),q&&m&&i.jsx(Le,{scale:k,minScale:G,maxScale:z,onZoomIn:Ve,onZoomOut:Ue,position:fe,className:se}),ee.length>0&&i.jsxs("div",{className:"absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg",children:[i.jsxs("h3",{className:"font-semibold mb-2",children:["Selected Seats (",ee.length,")"]}),i.jsx("div",{className:"max-h-48 overflow-y-auto space-y-1",children:ee.map(e=>i.jsxs("div",{className:"text-sm",children:[e.seatNumber,e.price&&` - ${ae.currency} ${e.price.toFixed(2)}`]},e.id))})]})]})};let ne=null;function it(n){ne=n}function Se(){if(!ne)throw new Error("Firebase database not initialized. Call initializeFirebaseForViewer(db) first.");return ne}function de(){return ne!==null}function at(){ne=null}function ye(n,s){if(n.length!==s.length)return!1;for(let o=0;o<n.length;o++)if(n[o]!==s[o])return!1;return!0}function ct(n,s){return ye(n.myReserved,s.myReserved)&&ye(n.otherReserved,s.otherReserved)&&ye(n.unavailable,s.unavailable)}function lt(n,s){const o=[],r=[],h=[];return Object.entries(n).forEach(([d,l])=>{l&&typeof l=="object"&&l.state&&(l.state==="unavailable"?h.push(d):l.state==="reserved"&&(s&&l.userId===s?o.push(d):r.push(d)))}),{myReserved:o,otherReserved:r,unavailable:h}}function Te(n){const{seatMapId:s,currentUserId:o,enabled:r=!0,onStateChange:h,onError:d}=n,[l,v]=t.useState(null),[p,a]=t.useState(!0),[c,f]=t.useState(null),[g,m]=t.useState(null),[w,R]=t.useState([]),[E,F]=t.useState([]),[j,I]=t.useState([]),L=t.useRef(h),T=t.useRef(d),V=t.useRef(o);L.current=h,T.current=d,V.current=o;const W=t.useRef({myReserved:[],otherReserved:[],unavailable:[]}),q=t.useRef(null);return t.useEffect(()=>{if(!r||!s){a(!1);return}if(!de()){a(!1),f(new Error("Firebase not initialized. Call initializeFirebaseForViewer first."));return}const fe=Se(),se=B.ref(fe,`seat_states/${s}`);a(!0),f(null);const re=A=>{const X=A.val()||{},O=lt(X,V.current),M=W.current,Y=JSON.stringify(q.current)!==JSON.stringify(X);Y&&(v(X),q.current=X),a(!1),!ct(M,O)&&(m(Date.now()),R(O.myReserved),F(O.otherReserved),I(O.unavailable),W.current=O),Y&&L.current?.(X)},z=A=>{f(A),a(!1),T.current?.(A)};return B.onValue(se,re,z),()=>{B.off(se)}},[s,r]),{states:l,loading:p,error:c,lastUpdated:g,myReservedSeats:w,otherReservedSeats:E,unavailableSeats:j,reservedSeats:E}}function ze(n){const{seatMapId:s,enabled:o=!0,subscribeToChanges:r=!1,onConfigLoad:h,onError:d}=n,[l,v]=t.useState(null),[p,a]=t.useState(!0),[c,f]=t.useState(null),g=t.useRef(h),m=t.useRef(d);g.current=h,m.current=d;const w=t.useCallback(async()=>{if(!s)return;if(!de()){f(new Error("Firebase not initialized. Call initializeFirebaseForViewer first.")),a(!1);return}const R=Se(),E=B.ref(R,`seatmaps/${s}`);try{a(!0),f(null);const j=(await B.get(E)).val();if(j){const I=rt.fromFirebaseSeatMap(j);v(I),g.current?.(I)}else f(new Error(`Seat map ${s} not found in Firebase`))}catch(F){const j=F instanceof Error?F:new Error("Unknown error");f(j),m.current?.(j)}finally{a(!1)}},[s]);return t.useEffect(()=>{if(!o||!s){a(!1);return}if(w(),r&&de()){const R=Se(),E=B.ref(R,`seatmaps/${s}/meta/updated_at`);let F=!0,j=null;const I=L=>{if(F){F=!1,j=L.val();return}const T=L.val();L.exists()&&T!==j&&(j=T,w())};return B.onValue(E,I),()=>{B.off(E)}}},[s,o,r]),{config:l,loading:p,error:c,refetch:w}}function ut(n){const{seatMapId:s,userId:o,enabled:r=!0,subscribeToDesignChanges:h=!1,onConfigLoad:d,onStateChange:l,onError:v}=n,{config:p,loading:a,error:c,refetch:f}=ze({seatMapId:s,enabled:r,subscribeToChanges:h,onConfigLoad:d,onError:v}),{states:g,loading:m,error:w,lastUpdated:R,myReservedSeats:E,otherReservedSeats:F,unavailableSeats:j,reservedSeats:I}=Te({seatMapId:s,currentUserId:o,enabled:r,onStateChange:l,onError:v});return{config:p,loading:a||m,error:c||w,myReservedSeats:E,otherReservedSeats:F,unavailableSeats:j,reservedSeats:I,seatStates:g,lastUpdated:R,refetch:f}}exports.DEFAULT_COLORS=Ee;exports.SeatMapViewer=ot;exports.clearFirebaseInstance=at;exports.initializeFirebaseForViewer=it;exports.isFirebaseInitialized=de;exports.useConfigFetcher=Re;exports.useContainerSize=je;exports.useFirebaseConfig=ze;exports.useFirebaseSeatStates=Te;exports.useRealtimeSeatMap=ut;exports.useTouchGestures=Me;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),e=require("react"),O=require("react-konva"),V=require("firebase/database"),it=require("@zonetrix/shared");function Me(n){const[s,o]=e.useState(null),[r,h]=e.useState(!1),[d,c]=e.useState(null),m=async()=>{if(n){h(!0),c(null);try{const p=await fetch(n);if(!p.ok)throw new Error(`Failed to fetch config: ${p.statusText}`);const a=await p.json();o(a)}catch(p){const a=p instanceof Error?p:new Error("Unknown error occurred");c(a),console.error("Failed to fetch seat map config:",a)}finally{h(!1)}}};return e.useEffect(()=>{m()},[n]),{config:s,loading:r,error:d,refetch:m}}function Ee(n){const[s,o]=e.useState({width:0,height:0});return e.useEffect(()=>{const r=n.current;if(!r)return;const{width:h,height:d}=r.getBoundingClientRect();h>0&&d>0&&o({width:h,height:d});const c=new ResizeObserver(m=>{const p=m[0];if(!p)return;const{width:a,height:l}=p.contentRect;a>0&&l>0&&o(f=>f.width===a&&f.height===l?f:{width:a,height:l})});return c.observe(r),()=>{c.disconnect()}},[n]),s}function we(n,s){return Math.sqrt(Math.pow(s.x-n.x,2)+Math.pow(s.y-n.y,2))}function Ce(n,s){return{x:(n.x+s.x)/2,y:(n.y+s.y)/2}}function Fe(n,s){const o=e.useRef(null),r=e.useRef(null),h=e.useRef(1);e.useEffect(()=>{const d=n.current;if(!d||!s.enabled)return;const c=d.container(),m=l=>{if(l.touches.length===2){l.preventDefault();const f={x:l.touches[0].clientX,y:l.touches[0].clientY},g={x:l.touches[1].clientX,y:l.touches[1].clientY};o.current=we(f,g),r.current=Ce(f,g),h.current=s.currentScale}},p=l=>{if(l.touches.length!==2)return;l.preventDefault();const f={x:l.touches[0].clientX,y:l.touches[0].clientY},g={x:l.touches[1].clientX,y:l.touches[1].clientY},v=we(f,g),w=Ce(f,g);if(o.current!==null&&r.current!==null){const R=v/o.current,E=Math.min(Math.max(s.currentScale*R,s.minScale),s.maxScale),F=c.getBoundingClientRect(),j=w.x-F.left,k=w.y-F.top,D=s.currentScale,T={x:(j-s.currentPosition.x)/D,y:(k-s.currentPosition.y)/D},U=w.x-r.current.x,z=w.y-r.current.y,_={x:j-T.x*E+U,y:k-T.y*E+z};s.onScaleChange(E,_),o.current=v,r.current=w}},a=l=>{l.touches.length<2&&(o.current=null,r.current=null)};return c.addEventListener("touchstart",m,{passive:!1}),c.addEventListener("touchmove",p,{passive:!1}),c.addEventListener("touchend",a),()=>{c.removeEventListener("touchstart",m),c.removeEventListener("touchmove",p),c.removeEventListener("touchend",a)}},[n,s])}const ke={canvasBackground:"#1a1a1a",stageColor:"#808080",seatAvailable:"#2C2B30",seatReserved:"#FCEA00",seatSelected:"#3A7DE5",seatUnavailable:"#6b7280",seatHidden:"#4a4a4a",gridLines:"#404040",currency:"KD"},Ie=e.memo(({seat:n,state:s,colors:o,onClick:r,onMouseEnter:h,onMouseLeave:d})=>{const p={available:o.seatAvailable,reserved:o.seatReserved,selected:o.seatSelected,unavailable:o.seatUnavailable,hidden:o.seatHidden}[s],a=s==="available"||s==="selected",l=e.useCallback(()=>{a&&r(n)},[n,r,a]),f=e.useCallback(w=>{h(n,w);const R=w.target.getStage();R&&a&&(R.container().style.cursor="pointer")},[n,h,a]),g=e.useCallback(w=>{d();const R=w.target.getStage();R&&(R.container().style.cursor="grab")},[d]),v={x:n.position.x,y:n.position.y,fill:p,stroke:"#ffffff",strokeWidth:1,onClick:l,onTap:l,onMouseEnter:f,onMouseLeave:g};return n.shape==="circle"?i.jsx(O.Circle,{...v,radius:12}):i.jsx(O.Rect,{...v,width:24,height:24,offsetX:12,offsetY:12,cornerRadius:n.shape==="square"?0:4})});Ie.displayName="ViewerSeat";const De=e.memo(({stage:n,stageColor:s})=>{const o=d=>({stage:"🎭",table:"⬜",wall:"▬",barrier:"🛡️","dj-booth":"🎵",bar:"🍷","entry-exit":"🚪",custom:"➕"})[d||"stage"]||"🎭",r=n.config.color||s,h=o(n.config.objectType);return i.jsxs(O.Group,{x:n.position.x,y:n.position.y,rotation:n.config.rotation||0,children:[i.jsx(O.Rect,{width:n.config.width,height:n.config.height,fill:r+"80",stroke:"#ffffff",strokeWidth:2,cornerRadius:10}),i.jsx(O.Text,{text:h,x:0,y:0,width:n.config.width,height:n.config.height*.4,fontSize:32,fill:"#ffffff",align:"center",verticalAlign:"middle"}),i.jsx(O.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"})]})});De.displayName="ViewerStage";const Le=e.memo(({floors:n,currentFloorId:s,onFloorChange:o,showAllOption:r,allLabel:h,position:d,className:c})=>{const m=e.useMemo(()=>[...n].sort((g,v)=>g.order-v.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}}[d]},l={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"},f={...l,backgroundColor:"#3A7DE5",borderColor:"#3A7DE5"};return i.jsxs("div",{className:c,style:a,children:[r&&i.jsx("button",{type:"button",onClick:()=>o(null),style:s===null?f:l,children:h}),m.map(g=>i.jsx("button",{type:"button",onClick:()=>o(g.id),style:s===g.id?f:l,children:g.name},g.id))]})});Le.displayName="FloorSelectorBar";const Te=e.memo(({scale:n,minScale:s,maxScale:o,onZoomIn:r,onZoomOut:h,position:d,className:c})=>{const p={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}}[d]},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"},l={...a,opacity:.4,cursor:"not-allowed"},f=n<o,g=n>s;return i.jsxs("div",{className:c,style:p,children:[i.jsx("button",{type:"button",onClick:r,disabled:!f,style:f?a:l,title:"Zoom In",children:"+"}),i.jsx("button",{type:"button",onClick:h,disabled:!g,style:g?a:l,title:"Zoom Out",children:"−"})]})});Te.displayName="ZoomControls";const ze=e.memo(({visible:n,x:s,y:o,seat:r,currency:h,state:d})=>{if(!n||!r)return null;const c=r.seatNumber||(r.rowLabel&&r.columnLabel?`${r.rowLabel}-${r.columnLabel}`:"N/A"),m={position:"fixed",left:`${s+15}px`,top:`${o+15}px`,zIndex:1e3,pointerEvents:"none"},p={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"},l={fontWeight:600},f={color:"#4ade80",fontWeight:600},g={fontSize:"11px",color:"#6b7280",textTransform:"capitalize",marginTop:"4px"};return i.jsx("div",{style:m,children:i.jsxs("div",{style:p,children:[r.sectionName&&i.jsxs("div",{style:{marginBottom:"4px"},children:[i.jsx("span",{style:a,children:"Section:"}),i.jsx("span",{style:{...l,color:"#3b82f6"},children:r.sectionName})]}),i.jsxs("div",{style:{marginBottom:"4px"},children:[i.jsx("span",{style:a,children:"Seat:"}),i.jsx("span",{style:l,children:c})]}),r.price!==void 0&&r.price>0&&d==="available"&&i.jsxs("div",{style:{marginBottom:"4px"},children:[i.jsx("span",{style:a,children:"Price:"}),i.jsxs("span",{style:f,children:[h," ",r.price.toFixed(2)]})]}),i.jsxs("div",{style:g,children:["Status: ",d]})]})})});ze.displayName="SeatTooltip";const at=({config:n,configUrl:s,floorId:o,onFloorChange:r,reservedSeats:h=[],unavailableSeats:d=[],selectedSeats:c,myReservedSeats:m=[],onSeatSelect:p,onSeatDeselect:a,onSelectionChange:l,colorOverrides:f,showTooltip:g=!0,zoomEnabled:v=!0,className:w="",onConfigLoad:R,onError:E,showFloorSelector:F,floorSelectorPosition:j="top-left",floorSelectorClassName:k,showAllFloorsOption:D=!0,allFloorsLabel:T="All",fitToView:U=!0,fitPadding:z=40,showZoomControls:_=!0,zoomControlsPosition:X="bottom-right",zoomControlsClassName:G,minZoom:Z,maxZoom:N=3,zoomStep:Y=.25,touchEnabled:ve=!0})=>{const P=e.useRef(null),$=e.useRef(null),M=Ee($),[W,he]=e.useState(new Set),[I,Q]=e.useState(1),[L,H]=e.useState({x:0,y:0}),[Xe,Ye]=e.useState(null),[Pe,We]=e.useState(1),ie=e.useRef({width:0,height:0}),[ee,me]=e.useState({visible:!1,x:0,y:0,seat:null,state:"available"}),{config:Oe,loading:$e,error:te}=Me(s),b=n||Oe,ge=o!==void 0,A=ge?o||null:Xe,ae=c!==void 0,Be=e.useCallback(t=>{ge||Ye(t),r?.(t)},[ge,r]),pe=b?.floors||[],Ve=F!==void 0?F:pe.length>1,ce=e.useMemo(()=>b?{...b.colors,...f}:{...ke,...f},[b,f]),J=e.useMemo(()=>{if(!b)return[];let t=b.seats.filter(u=>u.state!=="hidden");return A&&(t=t.filter(u=>u.floorId===A||!u.floorId&&A==="floor_default")),t},[b,A]),le=e.useMemo(()=>b?.stages?A?b.stages.filter(t=>t.floorId===A||!t.floorId&&A==="floor_default"):b.stages:[],[b,A]),B=e.useMemo(()=>{if(!b||J.length===0&&le.length===0)return null;const t=12;let u=1/0,x=1/0,y=-1/0,S=-1/0;return J.forEach(C=>{u=Math.min(u,C.position.x-t),x=Math.min(x,C.position.y-t),y=Math.max(y,C.position.x+t),S=Math.max(S,C.position.y+t)}),le.forEach(C=>{u=Math.min(u,C.position.x),x=Math.min(x,C.position.y),y=Math.max(y,C.position.x+(C.config?.width||200)),S=Math.max(S,C.position.y+(C.config?.height||100))}),{minX:u,minY:x,maxX:y,maxY:S,width:y-u,height:S-x}},[b,J,le]);e.useEffect(()=>{if(!U||!b||!B||M.width===0||M.height===0)return;const t=Math.abs(M.width-ie.current.width),u=Math.abs(M.height-ie.current.height);if(!(ie.current.width===0)&&t<10&&u<10)return;ie.current=M;const y=M.width,S=M.height,C=y-z*2,re=S-z*2,ue=C/B.width,xe=re/B.height,de=Math.min(ue,xe,N),et=B.minX+B.width/2,tt=B.minY+B.height/2,nt=y/2,st=S/2,rt=nt-et*de,ot=st-tt*de;Q(de),H({x:rt,y:ot}),We(de)},[U,b,B,z,N,M,A]);const q=e.useMemo(()=>{const t=new Set(h),u=new Set(d),x=new Set(m);return{reserved:t,unavailable:u,myReserved:x}},[h,d,m]),be=e.useMemo(()=>c?new Set(c):null,[c]),ne=e.useCallback(t=>{const u=t.id,x=t.seatNumber||"";return q.unavailable.has(u)||q.unavailable.has(x)?"unavailable":q.reserved.has(u)||q.reserved.has(x)?"reserved":q.myReserved.has(u)||q.myReserved.has(x)||W.has(u)?"selected":t.state},[q,W]);e.useEffect(()=>{b&&R&&R(b)},[b,R]),e.useEffect(()=>{te&&E&&E(te)},[te,E]),e.useEffect(()=>{ae&&be&&he(be)},[ae,be]);const Ue=e.useCallback(t=>{const u=ne(t);if(u!=="available"&&u!=="selected")return;const x=W.has(t.id);ae||he(y=>{const S=new Set(y);return x?S.delete(t.id):S.add(t.id),S}),x?a?.(t):(p?.(t),p||console.log("Seat selected:",t))},[ne,W,ae,p,a]),se=e.useMemo(()=>b?J.filter(t=>W.has(t.id)):[],[J,W]);e.useEffect(()=>{l?.(se)},[se,l]);const K=Z!==void 0?Z:Pe,He=e.useCallback(()=>{if(!v)return;const t=Math.min(I+Y,N);if(t!==I){const u=M.width||b?.canvas.width||800,x=M.height||b?.canvas.height||600,y=u/2,S=x/2,C={x:(y-L.x)/I,y:(S-L.y)/I};Q(t),H({x:y-C.x*t,y:S-C.y*t})}},[v,I,Y,N,M,b,L]),qe=e.useCallback(()=>{if(!v)return;const t=Math.max(I-Y,K);if(t!==I){const u=M.width||b?.canvas.width||800,x=M.height||b?.canvas.height||600,y=u/2,S=x/2,C={x:(y-L.x)/I,y:(S-L.y)/I};Q(t),H({x:y-C.x*t,y:S-C.y*t})}},[v,I,Y,K,M,b,L]),_e=e.useCallback(t=>{H({x:t.target.x(),y:t.target.y()})},[]),Ge=e.useCallback(t=>{if(!v)return;t.evt.preventDefault();const u=P.current;if(!u)return;const x=u.scaleX(),y=u.getPointerPosition();if(!y)return;const S=1.1,C=t.evt.deltaY>0?x/S:x*S,re=Math.min(Math.max(C,K),N),ue={x:(y.x-L.x)/x,y:(y.y-L.y)/x},xe={x:y.x-ue.x*re,y:y.y-ue.y*re};Q(re),H(xe)},[v,L,K,N]);Fe(P,{enabled:ve&&v,minScale:K,maxScale:N,currentScale:I,currentPosition:L,onScaleChange:(t,u)=>{Q(t),H(u)},onPositionChange:t=>{H(t)}});const Je=e.useCallback((t,u)=>{if(!g)return;const x=u.target.getStage();if(!x)return;const y=x.getPointerPosition();if(!y)return;const S=x.container().getBoundingClientRect();me({visible:!0,x:S.left+y.x,y:S.top+y.y,seat:t,state:ne(t)})},[g,ne]),Ke=e.useCallback(()=>{me(t=>({...t,visible:!1}))},[]);if($e)return i.jsx("div",{className:`flex items-center justify-center h-full ${w}`,children:i.jsx("p",{children:"Loading seat map..."})});if(te)return i.jsx("div",{className:`flex items-center justify-center h-full ${w}`,children:i.jsxs("p",{className:"text-red-500",children:["Error loading seat map: ",te.message]})});if(!b)return i.jsx("div",{className:`flex items-center justify-center h-full ${w}`,children:i.jsx("p",{children:"No configuration provided"})});const Ze=M.width||b.canvas.width,Qe=M.height||b.canvas.height;return i.jsxs("div",{ref:$,className:`relative ${w}`,style:{width:"100%",height:"100%"},children:[Ve&&pe.length>0&&i.jsx(Le,{floors:pe,currentFloorId:A,onFloorChange:Be,showAllOption:D,allLabel:T,position:j,className:k}),i.jsxs(O.Stage,{ref:P,width:Ze,height:Qe,scaleX:I,scaleY:I,x:L.x,y:L.y,draggable:!0,onDragEnd:_e,onWheel:Ge,style:{backgroundColor:b.canvas.backgroundColor,cursor:"grab"},children:[i.jsx(O.Layer,{listening:!1,children:le.map(t=>i.jsx(De,{stage:t,stageColor:ce.stageColor},t.id))}),i.jsx(O.Layer,{children:J.map(t=>i.jsx(Ie,{seat:t,state:ne(t),colors:ce,onClick:Ue,onMouseEnter:Je,onMouseLeave:Ke},t.id))})]}),g&&i.jsx(ze,{visible:ee.visible,x:ee.x,y:ee.y,seat:ee.seat,currency:ce.currency,state:ee.state}),_&&v&&i.jsx(Te,{scale:I,minScale:K,maxScale:N,onZoomIn:He,onZoomOut:qe,position:X,className:G}),se.length>0&&i.jsxs("div",{className:"absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg",children:[i.jsxs("h3",{className:"font-semibold mb-2",children:["Selected Seats (",se.length,")"]}),i.jsx("div",{className:"max-h-48 overflow-y-auto space-y-1",children:se.map(t=>i.jsxs("div",{className:"text-sm",children:[t.seatNumber,t.price&&` - ${ce.currency} ${t.price.toFixed(2)}`]},t.id))})]})]})};let oe=null;function ct(n){oe=n}function Se(){if(!oe)throw new Error("Firebase database not initialized. Call initializeFirebaseForViewer(db) first.");return oe}function fe(){return oe!==null}function lt(){oe=null}function ye(n,s){if(n.length!==s.length)return!1;for(let o=0;o<n.length;o++)if(n[o]!==s[o])return!1;return!0}function Re(n,s){return ye(n.myReserved,s.myReserved)&&ye(n.otherReserved,s.otherReserved)&&ye(n.unavailable,s.unavailable)}function je(n,s){const o=[],r=[],h=[];return Object.entries(n).forEach(([d,c])=>{c&&typeof c=="object"&&c.state&&(c.state==="unavailable"?h.push(d):c.state==="reserved"&&(s&&c.userId===s?o.push(d):r.push(d)))}),{myReserved:o,otherReserved:r,unavailable:h}}function Ne(n){const{seatMapId:s,currentUserId:o,enabled:r=!0,onStateChange:h,onError:d}=n,[c,m]=e.useState(null),[p,a]=e.useState(!0),[l,f]=e.useState(null),[g,v]=e.useState(null),[w,R]=e.useState([]),[E,F]=e.useState([]),[j,k]=e.useState([]),D=e.useRef(h),T=e.useRef(d),U=e.useRef(o);D.current=h,T.current=d,U.current=o;const z=e.useRef({myReserved:[],otherReserved:[],unavailable:[]}),_=e.useRef(null);return e.useEffect(()=>{if(!r||!s){a(!1);return}if(!fe()){a(!1),f(new Error("Firebase not initialized. Call initializeFirebaseForViewer first."));return}const X=Se(),G=V.ref(X,`seat_states/${s}`);a(!0),f(null);const Z=Y=>{const P=Y.val()||{},$=je(P,U.current),M=z.current,W=JSON.stringify(_.current)!==JSON.stringify(P);W&&(m(P),_.current=P),a(!1),!Re(M,$)&&(v(Date.now()),R($.myReserved),F($.otherReserved),k($.unavailable),z.current=$),W&&D.current?.(P)},N=Y=>{f(Y),a(!1),T.current?.(Y)};return V.onValue(G,Z,N),()=>{V.off(G)}},[s,r]),e.useEffect(()=>{if(c){const X=je(c,o),G=z.current;!Re(G,X)&&(R(X.myReserved),F(X.otherReserved),k(X.unavailable),z.current=X,v(Date.now()))}},[o]),{states:c,loading:p,error:l,lastUpdated:g,myReservedSeats:w,otherReservedSeats:E,unavailableSeats:j,reservedSeats:E}}function Ae(n){const{seatMapId:s,enabled:o=!0,subscribeToChanges:r=!1,onConfigLoad:h,onError:d}=n,[c,m]=e.useState(null),[p,a]=e.useState(!0),[l,f]=e.useState(null),g=e.useRef(h),v=e.useRef(d);g.current=h,v.current=d;const w=e.useCallback(async()=>{if(!s)return;if(!fe()){f(new Error("Firebase not initialized. Call initializeFirebaseForViewer first.")),a(!1);return}const R=Se(),E=V.ref(R,`seatmaps/${s}`);try{a(!0),f(null);const j=(await V.get(E)).val();if(j){const k=it.fromFirebaseSeatMap(j);m(k),g.current?.(k)}else f(new Error(`Seat map ${s} not found in Firebase`))}catch(F){const j=F instanceof Error?F:new Error("Unknown error");f(j),v.current?.(j)}finally{a(!1)}},[s]);return e.useEffect(()=>{if(!o||!s){a(!1);return}if(w(),r&&fe()){const R=Se(),E=V.ref(R,`seatmaps/${s}/meta/updated_at`);let F=!0,j=null;const k=D=>{if(F){F=!1,j=D.val();return}const T=D.val();D.exists()&&T!==j&&(j=T,w())};return V.onValue(E,k),()=>{V.off(E)}}},[s,o,r]),{config:c,loading:p,error:l,refetch:w}}function ut(n){const{seatMapId:s,userId:o,enabled:r=!0,subscribeToDesignChanges:h=!1,onConfigLoad:d,onStateChange:c,onError:m}=n,{config:p,loading:a,error:l,refetch:f}=Ae({seatMapId:s,enabled:r,subscribeToChanges:h,onConfigLoad:d,onError:m}),{states:g,loading:v,error:w,lastUpdated:R,myReservedSeats:E,otherReservedSeats:F,unavailableSeats:j,reservedSeats:k}=Ne({seatMapId:s,currentUserId:o,enabled:r,onStateChange:c,onError:m});return{config:p,loading:a||v,error:l||w,myReservedSeats:E,otherReservedSeats:F,unavailableSeats:j,reservedSeats:k,seatStates:g,lastUpdated:R,refetch:f}}exports.DEFAULT_COLORS=ke;exports.SeatMapViewer=at;exports.clearFirebaseInstance=lt;exports.initializeFirebaseForViewer=ct;exports.isFirebaseInitialized=fe;exports.useConfigFetcher=Me;exports.useContainerSize=Ee;exports.useFirebaseConfig=Ae;exports.useFirebaseSeatStates=Ne;exports.useRealtimeSeatMap=ut;exports.useTouchGestures=Fe;

package/dist/index.mjs

@@ -1,12 +1,12 @@
-import { jsx as y, jsxs as k } from "react/jsx-runtime";
-import { useState as C, useEffect as j, useRef as N, useCallback as L, useMemo as H, memo as se } from "react";
-import { Stage as ct, Layer as Fe, Group as lt, Rect as Le, Text as Ie, Circle as ut } from "react-konva";
-import { ref as we, onValue as Ne, off as Te, get as dt } from "firebase/database";
-import { fromFirebaseSeatMap as ht } from "@zonetrix/shared";
-function ft(t) {
-  const [n, o] = C(null), [r, d] = C(!1), [l, a] = C(null), m = async () => {
+import { jsx as y, jsxs as D } from "react/jsx-runtime";
+import { useState as R, useEffect as Y, useRef as T, useCallback as N, useMemo as _, memo as ce } from "react";
+import { Stage as dt, Layer as Fe, Group as ut, Rect as Te, Text as Ie, Circle as ht } from "react-konva";
+import { ref as we, onValue as ze, off as Ae, get as ft } from "firebase/database";
+import { fromFirebaseSeatMap as gt } from "@zonetrix/shared";
+function pt(t) {
+  const [n, o] = R(null), [r, u] = R(!1), [l, s] = R(null), x = async () => {
     if (t) {
-      d(!0), a(null);
+      u(!0), s(null);
       try {
         const f = await fetch(t);
         if (!f.ok)
@@ -15,85 +15,85 @@ function ft(t) {
         o(i);
       } catch (f) {
         const i = f instanceof Error ? f : new Error("Unknown error occurred");
-        a(i), console.error("Failed to fetch seat map config:", i);
+        s(i), console.error("Failed to fetch seat map config:", i);
       } finally {
-        d(!1);
+        u(!1);
       }
     }
   };
-  return j(() => {
-    m();
+  return Y(() => {
+    x();
   }, [t]), {
     config: n,
     loading: r,
     error: l,
-    refetch: m
+    refetch: x
   };
 }
-function gt(t) {
-  const [n, o] = C({ width: 0, height: 0 });
-  return j(() => {
+function yt(t) {
+  const [n, o] = R({ width: 0, height: 0 });
+  return Y(() => {
     const r = t.current;
     if (!r) return;
-    const { width: d, height: l } = r.getBoundingClientRect();
-    d > 0 && l > 0 && o({ width: d, height: l });
-    const a = new ResizeObserver((m) => {
-      const f = m[0];
+    const { width: u, height: l } = r.getBoundingClientRect();
+    u > 0 && l > 0 && o({ width: u, height: l });
+    const s = new ResizeObserver((x) => {
+      const f = x[0];
       if (!f) return;
-      const { width: i, height: s } = f.contentRect;
-      i > 0 && s > 0 && o((u) => u.width === i && u.height === s ? u : { width: i, height: s });
+      const { width: i, height: a } = f.contentRect;
+      i > 0 && a > 0 && o((d) => d.width === i && d.height === a ? d : { width: i, height: a });
     });
-    return a.observe(r), () => {
-      a.disconnect();
+    return s.observe(r), () => {
+      s.disconnect();
     };
   }, [t]), n;
 }
-function ke(t, n) {
+function De(t, n) {
   return Math.sqrt(Math.pow(n.x - t.x, 2) + Math.pow(n.y - t.y, 2));
 }
-function De(t, n) {
+function ke(t, n) {
   return {
     x: (t.x + n.x) / 2,
     y: (t.y + n.y) / 2
   };
 }
-function pt(t, n) {
-  const o = N(null), r = N(null), d = N(1);
-  j(() => {
+function bt(t, n) {
+  const o = T(null), r = T(null), u = T(1);
+  Y(() => {
     const l = t.current;
     if (!l || !n.enabled) return;
-    const a = l.container(), m = (s) => {
-      if (s.touches.length === 2) {
-        s.preventDefault();
-        const u = { x: s.touches[0].clientX, y: s.touches[0].clientY }, h = { x: s.touches[1].clientX, y: s.touches[1].clientY };
-        o.current = ke(u, h), r.current = De(u, h), d.current = n.currentScale;
+    const s = l.container(), x = (a) => {
+      if (a.touches.length === 2) {
+        a.preventDefault();
+        const d = { x: a.touches[0].clientX, y: a.touches[0].clientY }, h = { x: a.touches[1].clientX, y: a.touches[1].clientY };
+        o.current = De(d, h), r.current = ke(d, h), u.current = n.currentScale;
       }
-    }, f = (s) => {
-      if (s.touches.length !== 2) return;
-      s.preventDefault();
-      const u = { x: s.touches[0].clientX, y: s.touches[0].clientY }, h = { x: s.touches[1].clientX, y: s.touches[1].clientY }, x = ke(u, h), S = De(u, h);
+    }, f = (a) => {
+      if (a.touches.length !== 2) return;
+      a.preventDefault();
+      const d = { x: a.touches[0].clientX, y: a.touches[0].clientY }, h = { x: a.touches[1].clientX, y: a.touches[1].clientY }, m = De(d, h), S = ke(d, h);
       if (o.current !== null && r.current !== null) {
-        const R = x / o.current, F = Math.min(
-          Math.max(n.currentScale * R, n.minScale),
+        const C = m / o.current, F = Math.min(
+          Math.max(n.currentScale * C, n.minScale),
           n.maxScale
-        ), I = a.getBoundingClientRect(), M = S.x - I.left, T = S.y - I.top, z = n.currentScale, X = {
+        ), I = s.getBoundingClientRect(), M = S.x - I.left, L = S.y - I.top, z = n.currentScale, X = {
           x: (M - n.currentPosition.x) / z,
-          y: (T - n.currentPosition.y) / z
-        }, _ = S.x - r.current.x, O = S.y - r.current.y, J = {
-          x: M - X.x * F + _,
-          y: T - X.y * F + O
+          y: (L - n.currentPosition.y) / z
+        }, q = S.x - r.current.x, j = S.y - r.current.y, Z = {
+          x: M - X.x * F + q,
+          y: L - X.y * F + j
         };
-        n.onScaleChange(F, J), o.current = x, r.current = S;
+        n.onScaleChange(F, Z), o.current = m, r.current = S;
       }
-    }, i = (s) => {
-      s.touches.length < 2 && (o.current = null, r.current = null);
+    }, i = (a) => {
+      a.touches.length < 2 && (o.current = null, r.current = null);
     };
-    return a.addEventListener("touchstart", m, { passive: !1 }), a.addEventListener("touchmove", f, { passive: !1 }), a.addEventListener("touchend", i), () => {
-      a.removeEventListener("touchstart", m), a.removeEventListener("touchmove", f), a.removeEventListener("touchend", i);
+    return s.addEventListener("touchstart", x, { passive: !1 }), s.addEventListener("touchmove", f, { passive: !1 }), s.addEventListener("touchend", i), () => {
+      s.removeEventListener("touchstart", x), s.removeEventListener("touchmove", f), s.removeEventListener("touchend", i);
     };
   }, [t, n]);
 }
-const yt = {
+const vt = {
   canvasBackground: "#1a1a1a",
   stageColor: "#808080",
   seatAvailable: "#2C2B30",
@@ -103,7 +103,7 @@ const yt = {
   seatHidden: "#4a4a4a",
   gridLines: "#404040",
   currency: "KD"
-}, ze = se(({ seat: t, state: n, colors: o, onClick: r, onMouseEnter: d, onMouseLeave: l }) => {
+}, Xe = ce(({ seat: t, state: n, colors: o, onClick: r, onMouseEnter: u, onMouseLeave: l }) => {
   const f = {
     available: o.seatAvailable,
     reserved: o.seatReserved,
@@ -111,37 +111,37 @@ const yt = {
     unavailable: o.seatUnavailable,
     hidden: o.seatHidden
     // Hidden seats are filtered out, but included for type safety
-  }[n], i = n === "available" || n === "selected", s = L(() => {
+  }[n], i = n === "available" || n === "selected", a = N(() => {
     i && r(t);
-  }, [t, r, i]), u = L((S) => {
-    d(t, S);
-    const R = S.target.getStage();
-    R && i && (R.container().style.cursor = "pointer");
-  }, [t, d, i]), h = L((S) => {
+  }, [t, r, i]), d = N((S) => {
+    u(t, S);
+    const C = S.target.getStage();
+    C && i && (C.container().style.cursor = "pointer");
+  }, [t, u, i]), h = N((S) => {
     l();
-    const R = S.target.getStage();
-    R && (R.container().style.cursor = "grab");
-  }, [l]), x = {
+    const C = S.target.getStage();
+    C && (C.container().style.cursor = "grab");
+  }, [l]), m = {
     x: t.position.x,
     y: t.position.y,
     fill: f,
     stroke: "#ffffff",
     strokeWidth: 1,
-    onClick: s,
-    onTap: s,
-    onMouseEnter: u,
+    onClick: a,
+    onTap: a,
+    onMouseEnter: d,
     onMouseLeave: h
   };
   return t.shape === "circle" ? /* @__PURE__ */ y(
-    ut,
+    ht,
     {
-      ...x,
+      ...m,
       radius: 12
     }
   ) : /* @__PURE__ */ y(
-    Le,
+    Te,
     {
-      ...x,
+      ...m,
       width: 24,
       height: 24,
       offsetX: 12,
@@ -150,8 +150,8 @@ const yt = {
     }
   );
 });
-ze.displayName = "ViewerSeat";
-const Ae = se(({ stage: t, stageColor: n }) => {
+Xe.displayName = "ViewerSeat";
+const Ye = ce(({ stage: t, stageColor: n }) => {
   const o = (l) => ({
     stage: "🎭",
     table: "⬜",
@@ -161,10 +161,10 @@ const Ae = se(({ stage: t, stageColor: n }) => {
     bar: "🍷",
     "entry-exit": "🚪",
     custom: "➕"
-  })[l || "stage"] || "🎭", r = t.config.color || n, d = o(t.config.objectType);
-  return /* @__PURE__ */ k(lt, { x: t.position.x, y: t.position.y, rotation: t.config.rotation || 0, children: [
+  })[l || "stage"] || "🎭", r = t.config.color || n, u = o(t.config.objectType);
+  return /* @__PURE__ */ D(ut, { x: t.position.x, y: t.position.y, rotation: t.config.rotation || 0, children: [
     /* @__PURE__ */ y(
-      Le,
+      Te,
       {
         width: t.config.width,
         height: t.config.height,
@@ -177,7 +177,7 @@ const Ae = se(({ stage: t, stageColor: n }) => {
     /* @__PURE__ */ y(
       Ie,
       {
-        text: d,
+        text: u,
         x: 0,
         y: 0,
         width: t.config.width,
@@ -205,18 +205,18 @@ const Ae = se(({ stage: t, stageColor: n }) => {
     )
   ] });
 });
-Ae.displayName = "ViewerStage";
-const Xe = se(({
+Ye.displayName = "ViewerStage";
+const je = ce(({
   floors: t,
   currentFloorId: n,
   onFloorChange: o,
   showAllOption: r,
-  allLabel: d,
+  allLabel: u,
   position: l,
-  className: a
+  className: s
 }) => {
-  const m = H(
-    () => [...t].sort((h, x) => h.order - x.order),
+  const x = _(
+    () => [...t].sort((h, m) => h.order - m.order),
     [t]
   ), i = {
     position: "absolute",
@@ -234,7 +234,7 @@ const Xe = se(({
       "bottom-left": { bottom: 0, left: 0 },
       "bottom-right": { bottom: 0, right: 0 }
     }[l]
-  }, s = {
+  }, a = {
     padding: "10px 16px",
     fontSize: "14px",
     fontWeight: 500,
@@ -246,42 +246,42 @@ const Xe = se(({
     transition: "all 0.2s ease",
     minHeight: "44px",
     touchAction: "manipulation"
-  }, u = {
-    ...s,
+  }, d = {
+    ...a,
     backgroundColor: "#3A7DE5",
     borderColor: "#3A7DE5"
   };
-  return /* @__PURE__ */ k("div", { className: a, style: i, children: [
+  return /* @__PURE__ */ D("div", { className: s, style: i, children: [
     r && /* @__PURE__ */ y(
       "button",
       {
         type: "button",
         onClick: () => o(null),
-        style: n === null ? u : s,
-        children: d
+        style: n === null ? d : a,
+        children: u
       }
     ),
-    m.map((h) => /* @__PURE__ */ y(
+    x.map((h) => /* @__PURE__ */ y(
       "button",
       {
         type: "button",
         onClick: () => o(h.id),
-        style: n === h.id ? u : s,
+        style: n === h.id ? d : a,
         children: h.name
       },
       h.id
     ))
   ] });
 });
-Xe.displayName = "FloorSelectorBar";
-const Ye = se(({
+je.displayName = "FloorSelectorBar";
+const We = ce(({
   scale: t,
   minScale: n,
   maxScale: o,
   onZoomIn: r,
-  onZoomOut: d,
+  onZoomOut: u,
   position: l,
-  className: a
+  className: s
 }) => {
   const f = {
     position: "absolute",
@@ -316,19 +316,19 @@ const Ye = se(({
     justifyContent: "center",
     transition: "all 0.2s ease",
     touchAction: "manipulation"
-  }, s = {
+  }, a = {
     ...i,
     opacity: 0.4,
     cursor: "not-allowed"
-  }, u = t < o, h = t > n;
-  return /* @__PURE__ */ k("div", { className: a, style: f, children: [
+  }, d = t < o, h = t > n;
+  return /* @__PURE__ */ D("div", { className: s, style: f, children: [
     /* @__PURE__ */ y(
       "button",
       {
         type: "button",
         onClick: r,
-        disabled: !u,
-        style: u ? i : s,
+        disabled: !d,
+        style: d ? i : a,
         title: "Zoom In",
         children: "+"
       }
@@ -337,26 +337,26 @@ const Ye = se(({
       "button",
       {
         type: "button",
-        onClick: d,
+        onClick: u,
         disabled: !h,
-        style: h ? i : s,
+        style: h ? i : a,
         title: "Zoom Out",
         children: "−"
       }
     )
   ] });
 });
-Ye.displayName = "ZoomControls";
-const je = se(({
+We.displayName = "ZoomControls";
+const Pe = ce(({
   visible: t,
   x: n,
   y: o,
   seat: r,
-  currency: d,
+  currency: u,
   state: l
 }) => {
   if (!t || !r) return null;
-  const a = r.seatNumber || (r.rowLabel && r.columnLabel ? `${r.rowLabel}-${r.columnLabel}` : "N/A"), m = {
+  const s = r.seatNumber || (r.rowLabel && r.columnLabel ? `${r.rowLabel}-${r.columnLabel}` : "N/A"), x = {
     position: "fixed",
     left: `${n + 15}px`,
     top: `${o + 15}px`,
@@ -374,9 +374,9 @@ const je = se(({
   }, i = {
     color: "#9ca3af",
     marginRight: "4px"
-  }, s = {
+  }, a = {
     fontWeight: 600
-  }, u = {
+  }, d = {
     color: "#4ade80",
     fontWeight: 600
   }, h = {
@@ -385,186 +385,186 @@ const je = se(({
     textTransform: "capitalize",
     marginTop: "4px"
   };
-  return /* @__PURE__ */ y("div", { style: m, children: /* @__PURE__ */ k("div", { style: f, children: [
-    r.sectionName && /* @__PURE__ */ k("div", { style: { marginBottom: "4px" }, children: [
+  return /* @__PURE__ */ y("div", { style: x, children: /* @__PURE__ */ D("div", { style: f, children: [
+    r.sectionName && /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
       /* @__PURE__ */ y("span", { style: i, children: "Section:" }),
-      /* @__PURE__ */ y("span", { style: { ...s, color: "#3b82f6" }, children: r.sectionName })
+      /* @__PURE__ */ y("span", { style: { ...a, color: "#3b82f6" }, children: r.sectionName })
     ] }),
-    /* @__PURE__ */ k("div", { style: { marginBottom: "4px" }, children: [
+    /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
       /* @__PURE__ */ y("span", { style: i, children: "Seat:" }),
-      /* @__PURE__ */ y("span", { style: s, children: a })
+      /* @__PURE__ */ y("span", { style: a, children: s })
     ] }),
-    r.price !== void 0 && r.price > 0 && l === "available" && /* @__PURE__ */ k("div", { style: { marginBottom: "4px" }, children: [
+    r.price !== void 0 && r.price > 0 && l === "available" && /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
       /* @__PURE__ */ y("span", { style: i, children: "Price:" }),
-      /* @__PURE__ */ k("span", { style: u, children: [
-        d,
+      /* @__PURE__ */ D("span", { style: d, children: [
+        u,
         " ",
         r.price.toFixed(2)
       ] })
     ] }),
-    /* @__PURE__ */ k("div", { style: h, children: [
+    /* @__PURE__ */ D("div", { style: h, children: [
       "Status: ",
       l
     ] })
   ] }) });
 });
-je.displayName = "SeatTooltip";
+Pe.displayName = "SeatTooltip";
 const Et = ({
   config: t,
   configUrl: n,
   floorId: o,
   onFloorChange: r,
-  reservedSeats: d = [],
+  reservedSeats: u = [],
   unavailableSeats: l = [],
-  selectedSeats: a,
-  myReservedSeats: m = [],
+  selectedSeats: s,
+  myReservedSeats: x = [],
   onSeatSelect: f,
   onSeatDeselect: i,
-  onSelectionChange: s,
-  colorOverrides: u,
+  onSelectionChange: a,
+  colorOverrides: d,
   showTooltip: h = !0,
-  zoomEnabled: x = !0,
+  zoomEnabled: m = !0,
   className: S = "",
-  onConfigLoad: R,
+  onConfigLoad: C,
   onError: F,
   // Floor selector props
   showFloorSelector: I,
   floorSelectorPosition: M = "top-left",
-  floorSelectorClassName: T,
+  floorSelectorClassName: L,
   showAllFloorsOption: z = !0,
   allFloorsLabel: X = "All",
-  fitToView: _ = !0,
-  fitPadding: O = 40,
+  fitToView: q = !0,
+  fitPadding: j = 40,
   // Zoom controls
-  showZoomControls: J = !0,
-  zoomControlsPosition: ge = "bottom-right",
-  zoomControlsClassName: ae,
-  minZoom: pe,
-  maxZoom: W = 3,
-  zoomStep: P = 0.25,
+  showZoomControls: Z = !0,
+  zoomControlsPosition: P = "bottom-right",
+  zoomControlsClassName: K,
+  minZoom: le,
+  maxZoom: $ = 3,
+  zoomStep: B = 0.25,
   // Touch gestures
   touchEnabled: Me = !0
 }) => {
-  const $ = N(null), U = N(null), E = gt(U), [B, ye] = C(/* @__PURE__ */ new Set()), [D, Q] = C(1), [A, q] = C({ x: 0, y: 0 }), [We, Pe] = C(null), [$e, Be] = C(1), ce = N({ width: 0, height: 0 }), [ee, Ee] = C({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: Oe, loading: Ue, error: te } = ft(n), g = t || Oe, be = o !== void 0, Y = be ? o || null : We, le = a !== void 0, Ve = L((e) => {
-    be || Pe(e), r?.(e);
-  }, [be, r]), ve = g?.floors || [], He = I !== void 0 ? I : ve.length > 1, ue = H(
-    () => g ? { ...g.colors, ...u } : { ...yt, ...u },
-    [g, u]
-  ), Z = H(() => {
+  const O = T(null), V = T(null), E = yt(V), [U, ye] = R(/* @__PURE__ */ new Set()), [k, te] = R(1), [A, G] = R({ x: 0, y: 0 }), [$e, Be] = R(null), [Oe, Ue] = R(1), de = T({ width: 0, height: 0 }), [ne, Ee] = R({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: Ve, loading: He, error: re } = pt(n), g = t || Ve, be = o !== void 0, W = be ? o || null : $e, ue = s !== void 0, _e = N((e) => {
+    be || Be(e), r?.(e);
+  }, [be, r]), ve = g?.floors || [], qe = I !== void 0 ? I : ve.length > 1, he = _(
+    () => g ? { ...g.colors, ...d } : { ...vt, ...d },
+    [g, d]
+  ), Q = _(() => {
     if (!g) return [];
     let e = g.seats.filter((c) => c.state !== "hidden");
-    return Y && (e = e.filter(
-      (c) => c.floorId === Y || !c.floorId && Y === "floor_default"
+    return W && (e = e.filter(
+      (c) => c.floorId === W || !c.floorId && W === "floor_default"
     )), e;
-  }, [g, Y]), de = H(() => g?.stages ? Y ? g.stages.filter(
-    (e) => e.floorId === Y || !e.floorId && Y === "floor_default"
-  ) : g.stages : [], [g, Y]), V = H(() => {
-    if (!g || Z.length === 0 && de.length === 0)
+  }, [g, W]), fe = _(() => g?.stages ? W ? g.stages.filter(
+    (e) => e.floorId === W || !e.floorId && W === "floor_default"
+  ) : g.stages : [], [g, W]), H = _(() => {
+    if (!g || Q.length === 0 && fe.length === 0)
       return null;
     const e = 12;
     let c = 1 / 0, p = 1 / 0, b = -1 / 0, v = -1 / 0;
-    return Z.forEach((w) => {
+    return Q.forEach((w) => {
       c = Math.min(c, w.position.x - e), p = Math.min(p, w.position.y - e), b = Math.max(b, w.position.x + e), v = Math.max(v, w.position.y + e);
-    }), de.forEach((w) => {
+    }), fe.forEach((w) => {
       c = Math.min(c, w.position.x), p = Math.min(p, w.position.y), b = Math.max(b, w.position.x + (w.config?.width || 200)), v = Math.max(v, w.position.y + (w.config?.height || 100));
     }), { minX: c, minY: p, maxX: b, maxY: v, width: b - c, height: v - p };
-  }, [g, Z, de]);
-  j(() => {
-    if (!_ || !g || !V || E.width === 0 || E.height === 0) return;
-    const e = Math.abs(E.width - ce.current.width), c = Math.abs(E.height - ce.current.height);
-    if (!(ce.current.width === 0) && e < 10 && c < 10) return;
-    ce.current = E;
-    const b = E.width, v = E.height, w = b - O * 2, oe = v - O * 2, he = w / V.width, xe = oe / V.height, fe = Math.min(he, xe, W), nt = V.minX + V.width / 2, rt = V.minY + V.height / 2, ot = b / 2, it = v / 2, st = ot - nt * fe, at = it - rt * fe;
-    Q(fe), q({ x: st, y: at }), Be(fe);
-  }, [_, g, V, O, W, E, Y]);
-  const G = H(() => {
-    const e = new Set(d), c = new Set(l), p = new Set(m);
+  }, [g, Q, fe]);
+  Y(() => {
+    if (!q || !g || !H || E.width === 0 || E.height === 0) return;
+    const e = Math.abs(E.width - de.current.width), c = Math.abs(E.height - de.current.height);
+    if (!(de.current.width === 0) && e < 10 && c < 10) return;
+    de.current = E;
+    const b = E.width, v = E.height, w = b - j * 2, se = v - j * 2, ge = w / H.width, xe = se / H.height, pe = Math.min(ge, xe, $), ot = H.minX + H.width / 2, it = H.minY + H.height / 2, st = b / 2, at = v / 2, ct = st - ot * pe, lt = at - it * pe;
+    te(pe), G({ x: ct, y: lt }), Ue(pe);
+  }, [q, g, H, j, $, E, W]);
+  const J = _(() => {
+    const e = new Set(u), c = new Set(l), p = new Set(x);
     return { reserved: e, unavailable: c, myReserved: p };
-  }, [d, l, m]), me = H(() => a ? new Set(a) : null, [a]), ne = L((e) => {
+  }, [u, l, x]), me = _(() => s ? new Set(s) : null, [s]), oe = N((e) => {
     const c = e.id, p = e.seatNumber || "";
-    return G.unavailable.has(c) || G.unavailable.has(p) ? "unavailable" : G.reserved.has(c) || G.reserved.has(p) ? "reserved" : G.myReserved.has(c) || G.myReserved.has(p) || B.has(c) ? "selected" : e.state;
-  }, [G, B]);
-  j(() => {
-    g && R && R(g);
-  }, [g, R]), j(() => {
-    te && F && F(te);
-  }, [te, F]), j(() => {
-    le && me && ye(me);
-  }, [le, me]);
-  const _e = L((e) => {
-    const c = ne(e);
+    return J.unavailable.has(c) || J.unavailable.has(p) ? "unavailable" : J.reserved.has(c) || J.reserved.has(p) ? "reserved" : J.myReserved.has(c) || J.myReserved.has(p) || U.has(c) ? "selected" : e.state;
+  }, [J, U]);
+  Y(() => {
+    g && C && C(g);
+  }, [g, C]), Y(() => {
+    re && F && F(re);
+  }, [re, F]), Y(() => {
+    ue && me && ye(me);
+  }, [ue, me]);
+  const Ge = N((e) => {
+    const c = oe(e);
     if (c !== "available" && c !== "selected")
       return;
-    const p = B.has(e.id);
-    le || ye((b) => {
+    const p = U.has(e.id);
+    ue || ye((b) => {
       const v = new Set(b);
       return p ? v.delete(e.id) : v.add(e.id), v;
     }), p ? i?.(e) : (f?.(e), f || console.log("Seat selected:", e));
-  }, [ne, B, le, f, i]), re = H(() => g ? Z.filter((e) => B.has(e.id)) : [], [Z, B]);
-  j(() => {
-    s?.(re);
-  }, [re, s]);
-  const K = pe !== void 0 ? pe : $e, qe = L(() => {
-    if (!x) return;
-    const e = Math.min(D + P, W);
-    if (e !== D) {
+  }, [oe, U, ue, f, i]), ie = _(() => g ? Q.filter((e) => U.has(e.id)) : [], [Q, U]);
+  Y(() => {
+    a?.(ie);
+  }, [ie, a]);
+  const ee = le !== void 0 ? le : Oe, Je = N(() => {
+    if (!m) return;
+    const e = Math.min(k + B, $);
+    if (e !== k) {
       const c = E.width || g?.canvas.width || 800, p = E.height || g?.canvas.height || 600, b = c / 2, v = p / 2, w = {
-        x: (b - A.x) / D,
-        y: (v - A.y) / D
+        x: (b - A.x) / k,
+        y: (v - A.y) / k
       };
-      Q(e), q({
+      te(e), G({
         x: b - w.x * e,
         y: v - w.y * e
       });
     }
-  }, [x, D, P, W, E, g, A]), Ge = L(() => {
-    if (!x) return;
-    const e = Math.max(D - P, K);
-    if (e !== D) {
+  }, [m, k, B, $, E, g, A]), Ze = N(() => {
+    if (!m) return;
+    const e = Math.max(k - B, ee);
+    if (e !== k) {
       const c = E.width || g?.canvas.width || 800, p = E.height || g?.canvas.height || 600, b = c / 2, v = p / 2, w = {
-        x: (b - A.x) / D,
-        y: (v - A.y) / D
+        x: (b - A.x) / k,
+        y: (v - A.y) / k
       };
-      Q(e), q({
+      te(e), G({
         x: b - w.x * e,
         y: v - w.y * e
       });
     }
-  }, [x, D, P, K, E, g, A]), Je = L((e) => {
-    q({
+  }, [m, k, B, ee, E, g, A]), Ke = N((e) => {
+    G({
       x: e.target.x(),
       y: e.target.y()
     });
-  }, []), Ze = L((e) => {
-    if (!x) return;
+  }, []), Qe = N((e) => {
+    if (!m) return;
     e.evt.preventDefault();
-    const c = $.current;
+    const c = O.current;
     if (!c) return;
     const p = c.scaleX(), b = c.getPointerPosition();
     if (!b) return;
-    const v = 1.1, w = e.evt.deltaY > 0 ? p / v : p * v, oe = Math.min(Math.max(w, K), W), he = {
+    const v = 1.1, w = e.evt.deltaY > 0 ? p / v : p * v, se = Math.min(Math.max(w, ee), $), ge = {
       x: (b.x - A.x) / p,
       y: (b.y - A.y) / p
     }, xe = {
-      x: b.x - he.x * oe,
-      y: b.y - he.y * oe
+      x: b.x - ge.x * se,
+      y: b.y - ge.y * se
     };
-    Q(oe), q(xe);
-  }, [x, A, K, W]);
-  pt($, {
-    enabled: Me && x,
-    minScale: K,
-    maxScale: W,
-    currentScale: D,
+    te(se), G(xe);
+  }, [m, A, ee, $]);
+  bt(O, {
+    enabled: Me && m,
+    minScale: ee,
+    maxScale: $,
+    currentScale: k,
     currentPosition: A,
     onScaleChange: (e, c) => {
-      Q(e), q(c);
+      te(e), G(c);
     },
     onPositionChange: (e) => {
-      q(e);
+      G(e);
     }
   });
-  const Ke = L((e, c) => {
+  const et = N((e, c) => {
     if (!h) return;
     const p = c.target.getStage();
     if (!p) return;
@@ -576,72 +576,72 @@ const Et = ({
       x: v.left + b.x,
       y: v.top + b.y,
       seat: e,
-      state: ne(e)
+      state: oe(e)
     });
-  }, [h, ne]), Qe = L(() => {
+  }, [h, oe]), tt = N(() => {
     Ee((e) => ({ ...e, visible: !1 }));
   }, []);
-  if (Ue)
+  if (He)
     return /* @__PURE__ */ y("div", { className: `flex items-center justify-center h-full ${S}`, children: /* @__PURE__ */ y("p", { children: "Loading seat map..." }) });
-  if (te)
-    return /* @__PURE__ */ y("div", { className: `flex items-center justify-center h-full ${S}`, children: /* @__PURE__ */ k("p", { className: "text-red-500", children: [
+  if (re)
+    return /* @__PURE__ */ y("div", { className: `flex items-center justify-center h-full ${S}`, children: /* @__PURE__ */ D("p", { className: "text-red-500", children: [
       "Error loading seat map: ",
-      te.message
+      re.message
     ] }) });
   if (!g)
     return /* @__PURE__ */ y("div", { className: `flex items-center justify-center h-full ${S}`, children: /* @__PURE__ */ y("p", { children: "No configuration provided" }) });
-  const et = E.width || g.canvas.width, tt = E.height || g.canvas.height;
-  return /* @__PURE__ */ k(
+  const nt = E.width || g.canvas.width, rt = E.height || g.canvas.height;
+  return /* @__PURE__ */ D(
     "div",
     {
-      ref: U,
+      ref: V,
       className: `relative ${S}`,
       style: { width: "100%", height: "100%" },
       children: [
-        He && ve.length > 0 && /* @__PURE__ */ y(
-          Xe,
+        qe && ve.length > 0 && /* @__PURE__ */ y(
+          je,
           {
             floors: ve,
-            currentFloorId: Y,
-            onFloorChange: Ve,
+            currentFloorId: W,
+            onFloorChange: _e,
             showAllOption: z,
             allLabel: X,
             position: M,
-            className: T
+            className: L
           }
         ),
-        /* @__PURE__ */ k(
-          ct,
+        /* @__PURE__ */ D(
+          dt,
           {
-            ref: $,
-            width: et,
-            height: tt,
-            scaleX: D,
-            scaleY: D,
+            ref: O,
+            width: nt,
+            height: rt,
+            scaleX: k,
+            scaleY: k,
             x: A.x,
             y: A.y,
             draggable: !0,
-            onDragEnd: Je,
-            onWheel: Ze,
+            onDragEnd: Ke,
+            onWheel: Qe,
             style: { backgroundColor: g.canvas.backgroundColor, cursor: "grab" },
             children: [
-              /* @__PURE__ */ y(Fe, { listening: !1, children: de.map((e) => /* @__PURE__ */ y(
-                Ae,
+              /* @__PURE__ */ y(Fe, { listening: !1, children: fe.map((e) => /* @__PURE__ */ y(
+                Ye,
                 {
                   stage: e,
-                  stageColor: ue.stageColor
+                  stageColor: he.stageColor
                 },
                 e.id
               )) }),
-              /* @__PURE__ */ y(Fe, { children: Z.map((e) => /* @__PURE__ */ y(
-                ze,
+              /* @__PURE__ */ y(Fe, { children: Q.map((e) => /* @__PURE__ */ y(
+                Xe,
                 {
                   seat: e,
-                  state: ne(e),
-                  colors: ue,
-                  onClick: _e,
-                  onMouseEnter: Ke,
-                  onMouseLeave: Qe
+                  state: oe(e),
+                  colors: he,
+                  onClick: Ge,
+                  onMouseEnter: et,
+                  onMouseLeave: tt
                 },
                 e.id
               )) })
@@ -649,59 +649,59 @@ const Et = ({
           }
         ),
         h && /* @__PURE__ */ y(
-          je,
+          Pe,
           {
-            visible: ee.visible,
-            x: ee.x,
-            y: ee.y,
-            seat: ee.seat,
-            currency: ue.currency,
-            state: ee.state
+            visible: ne.visible,
+            x: ne.x,
+            y: ne.y,
+            seat: ne.seat,
+            currency: he.currency,
+            state: ne.state
           }
         ),
-        J && x && /* @__PURE__ */ y(
-          Ye,
+        Z && m && /* @__PURE__ */ y(
+          We,
           {
-            scale: D,
-            minScale: K,
-            maxScale: W,
-            onZoomIn: qe,
-            onZoomOut: Ge,
-            position: ge,
-            className: ae
+            scale: k,
+            minScale: ee,
+            maxScale: $,
+            onZoomIn: Je,
+            onZoomOut: Ze,
+            position: P,
+            className: K
           }
         ),
-        re.length > 0 && /* @__PURE__ */ k("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
-          /* @__PURE__ */ k("h3", { className: "font-semibold mb-2", children: [
+        ie.length > 0 && /* @__PURE__ */ D("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
+          /* @__PURE__ */ D("h3", { className: "font-semibold mb-2", children: [
             "Selected Seats (",
-            re.length,
+            ie.length,
             ")"
           ] }),
-          /* @__PURE__ */ y("div", { className: "max-h-48 overflow-y-auto space-y-1", children: re.map((e) => /* @__PURE__ */ k("div", { className: "text-sm", children: [
+          /* @__PURE__ */ y("div", { className: "max-h-48 overflow-y-auto space-y-1", children: ie.map((e) => /* @__PURE__ */ D("div", { className: "text-sm", children: [
             e.seatNumber,
-            e.price && ` - ${ue.currency} ${e.price.toFixed(2)}`
+            e.price && ` - ${he.currency} ${e.price.toFixed(2)}`
           ] }, e.id)) })
         ] })
       ]
     }
   );
 };
-let ie = null;
+let ae = null;
 function Ft(t) {
-  ie = t;
+  ae = t;
 }
 function Ce() {
-  if (!ie)
+  if (!ae)
     throw new Error(
       "Firebase database not initialized. Call initializeFirebaseForViewer(db) first."
     );
-  return ie;
+  return ae;
 }
 function Re() {
-  return ie !== null;
+  return ae !== null;
 }
 function It() {
-  ie = null;
+  ae = null;
 }
 function Se(t, n) {
   if (t.length !== n.length) return !1;
@@ -709,45 +709,50 @@ function Se(t, n) {
     if (t[o] !== n[o]) return !1;
   return !0;
 }
-function bt(t, n) {
+function Le(t, n) {
   return Se(t.myReserved, n.myReserved) && Se(t.otherReserved, n.otherReserved) && Se(t.unavailable, n.unavailable);
 }
-function vt(t, n) {
-  const o = [], r = [], d = [];
-  return Object.entries(t).forEach(([l, a]) => {
-    a && typeof a == "object" && a.state && (a.state === "unavailable" ? d.push(l) : a.state === "reserved" && (n && a.userId === n ? o.push(l) : r.push(l)));
-  }), { myReserved: o, otherReserved: r, unavailable: d };
+function Ne(t, n) {
+  const o = [], r = [], u = [];
+  return Object.entries(t).forEach(([l, s]) => {
+    s && typeof s == "object" && s.state && (s.state === "unavailable" ? u.push(l) : s.state === "reserved" && (n && s.userId === n ? o.push(l) : r.push(l)));
+  }), { myReserved: o, otherReserved: r, unavailable: u };
 }
 function mt(t) {
-  const { seatMapId: n, currentUserId: o, enabled: r = !0, onStateChange: d, onError: l } = t, [a, m] = C(null), [f, i] = C(!0), [s, u] = C(null), [h, x] = C(null), [S, R] = C([]), [F, I] = C([]), [M, T] = C([]), z = N(d), X = N(l), _ = N(o);
-  z.current = d, X.current = l, _.current = o;
-  const O = N({
+  const { seatMapId: n, currentUserId: o, enabled: r = !0, onStateChange: u, onError: l } = t, [s, x] = R(null), [f, i] = R(!0), [a, d] = R(null), [h, m] = R(null), [S, C] = R([]), [F, I] = R([]), [M, L] = R([]), z = T(u), X = T(l), q = T(o);
+  z.current = u, X.current = l, q.current = o;
+  const j = T({
     myReserved: [],
     otherReserved: [],
     unavailable: []
-  }), J = N(null);
-  return j(() => {
+  }), Z = T(null);
+  return Y(() => {
     if (!r || !n) {
       i(!1);
       return;
     }
     if (!Re()) {
-      i(!1), u(new Error("Firebase not initialized. Call initializeFirebaseForViewer first."));
+      i(!1), d(new Error("Firebase not initialized. Call initializeFirebaseForViewer first."));
       return;
     }
-    const ge = Ce(), ae = we(ge, `seat_states/${n}`);
-    return i(!0), u(null), Ne(ae, (P) => {
-      const $ = P.val() || {}, U = vt($, _.current), E = O.current, B = JSON.stringify(J.current) !== JSON.stringify($);
-      B && (m($), J.current = $), i(!1), !bt(E, U) && (x(Date.now()), R(U.myReserved), I(U.otherReserved), T(U.unavailable), O.current = U), B && z.current?.($);
-    }, (P) => {
-      u(P), i(!1), X.current?.(P);
+    const P = Ce(), K = we(P, `seat_states/${n}`);
+    return i(!0), d(null), ze(K, (B) => {
+      const O = B.val() || {}, V = Ne(O, q.current), E = j.current, U = JSON.stringify(Z.current) !== JSON.stringify(O);
+      U && (x(O), Z.current = O), i(!1), !Le(E, V) && (m(Date.now()), C(V.myReserved), I(V.otherReserved), L(V.unavailable), j.current = V), U && z.current?.(O);
+    }, (B) => {
+      d(B), i(!1), X.current?.(B);
     }), () => {
-      Te(ae);
+      Ae(K);
     };
-  }, [n, r]), {
-    states: a,
+  }, [n, r]), Y(() => {
+    if (s) {
+      const P = Ne(s, o), K = j.current;
+      !Le(K, P) && (C(P.myReserved), I(P.otherReserved), L(P.unavailable), j.current = P, m(Date.now()));
+    }
+  }, [o]), {
+    states: s,
     loading: f,
-    error: s,
+    error: a,
     lastUpdated: h,
     myReservedSeats: S,
     otherReservedSeats: F,
@@ -761,41 +766,41 @@ function xt(t) {
     seatMapId: n,
     enabled: o = !0,
     subscribeToChanges: r = !1,
-    onConfigLoad: d,
+    onConfigLoad: u,
     onError: l
-  } = t, [a, m] = C(null), [f, i] = C(!0), [s, u] = C(null), h = N(d), x = N(l);
-  h.current = d, x.current = l;
-  const S = L(async () => {
+  } = t, [s, x] = R(null), [f, i] = R(!0), [a, d] = R(null), h = T(u), m = T(l);
+  h.current = u, m.current = l;
+  const S = N(async () => {
     if (!n) return;
     if (!Re()) {
-      u(new Error("Firebase not initialized. Call initializeFirebaseForViewer first.")), i(!1);
+      d(new Error("Firebase not initialized. Call initializeFirebaseForViewer first.")), i(!1);
       return;
     }
-    const R = Ce(), F = we(R, `seatmaps/${n}`);
+    const C = Ce(), F = we(C, `seatmaps/${n}`);
     try {
-      i(!0), u(null);
-      const M = (await dt(F)).val();
+      i(!0), d(null);
+      const M = (await ft(F)).val();
       if (M) {
-        const T = ht(M);
-        m(T), h.current?.(T);
+        const L = gt(M);
+        x(L), h.current?.(L);
       } else
-        u(new Error(`Seat map ${n} not found in Firebase`));
+        d(new Error(`Seat map ${n} not found in Firebase`));
     } catch (I) {
       const M = I instanceof Error ? I : new Error("Unknown error");
-      u(M), x.current?.(M);
+      d(M), m.current?.(M);
     } finally {
       i(!1);
     }
   }, [n]);
-  return j(() => {
+  return Y(() => {
     if (!o || !n) {
       i(!1);
       return;
     }
     if (S(), r && Re()) {
-      const R = Ce(), F = we(R, `seatmaps/${n}/meta/updated_at`);
+      const C = Ce(), F = we(C, `seatmaps/${n}/meta/updated_at`);
       let I = !0, M = null;
-      return Ne(F, (z) => {
+      return ze(F, (z) => {
         if (I) {
           I = !1, M = z.val();
           return;
@@ -803,75 +808,75 @@ function xt(t) {
         const X = z.val();
         z.exists() && X !== M && (M = X, S());
       }), () => {
-        Te(F);
+        Ae(F);
       };
     }
   }, [n, o, r]), {
-    config: a,
+    config: s,
     loading: f,
-    error: s,
+    error: a,
     refetch: S
   };
 }
-function kt(t) {
+function Dt(t) {
   const {
     seatMapId: n,
     userId: o,
     enabled: r = !0,
-    subscribeToDesignChanges: d = !1,
+    subscribeToDesignChanges: u = !1,
     onConfigLoad: l,
-    onStateChange: a,
-    onError: m
+    onStateChange: s,
+    onError: x
   } = t, {
     config: f,
     loading: i,
-    error: s,
-    refetch: u
+    error: a,
+    refetch: d
   } = xt({
     seatMapId: n,
     enabled: r,
-    subscribeToChanges: d,
+    subscribeToChanges: u,
     onConfigLoad: l,
-    onError: m
+    onError: x
   }), {
     states: h,
-    loading: x,
+    loading: m,
     error: S,
-    lastUpdated: R,
+    lastUpdated: C,
     myReservedSeats: F,
     otherReservedSeats: I,
     unavailableSeats: M,
-    reservedSeats: T
+    reservedSeats: L
   } = mt({
     seatMapId: n,
     currentUserId: o,
     enabled: r,
-    onStateChange: a,
-    onError: m
+    onStateChange: s,
+    onError: x
   });
   return {
     config: f,
-    loading: i || x,
-    error: s || S,
+    loading: i || m,
+    error: a || S,
     myReservedSeats: F,
     otherReservedSeats: I,
     unavailableSeats: M,
-    reservedSeats: T,
+    reservedSeats: L,
     seatStates: h,
-    lastUpdated: R,
-    refetch: u
+    lastUpdated: C,
+    refetch: d
   };
 }
 export {
-  yt as DEFAULT_COLORS,
+  vt as DEFAULT_COLORS,
   Et as SeatMapViewer,
   It as clearFirebaseInstance,
   Ft as initializeFirebaseForViewer,
   Re as isFirebaseInitialized,
-  ft as useConfigFetcher,
-  gt as useContainerSize,
+  pt as useConfigFetcher,
+  yt as useContainerSize,
   xt as useFirebaseConfig,
   mt as useFirebaseSeatStates,
-  kt as useRealtimeSeatMap,
-  pt as useTouchGestures
+  Dt as useRealtimeSeatMap,
+  bt as useTouchGestures
 };

package/package.json

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