@zonetrix/viewer 2.10.3 → 2.10.4

package/dist/index.js

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

package/dist/index.mjs

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

package/package.json

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