@zonetrix/viewer 2.10.7 → 2.10.8

package/dist/index.js

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

package/dist/index.mjs

@@ -1,20 +1,20 @@
-import { jsx as v, jsxs as D } from "react/jsx-runtime";
+import { jsx as b, jsxs as D } from "react/jsx-runtime";
 import { useState as T, useEffect as W, useRef as A, useCallback as L, useMemo as U, memo as re, useSyncExternalStore as ut } from "react";
 import { Stage as ht, Layer as Ee, Group as ft, Rect as De, Text as Ie, Circle as gt } from "react-konva";
-import { ref as me, onValue as Ne, off as Te, get as pt } from "firebase/database";
-import { fromFirebaseSeatMap as bt } from "@zonetrix/shared";
-function vt(t) {
+import { ref as ye, onValue as Ne, off as Te, get as pt } from "firebase/database";
+import { fromFirebaseSeatMap as vt } from "@zonetrix/shared";
+function bt(t) {
   const [n, i] = T(null), [r, d] = T(!1), [c, o] = T(null), m = async () => {
     if (t) {
       d(!0), o(null);
       try {
-        const u = await fetch(t);
-        if (!u.ok)
-          throw new Error(`Failed to fetch config: ${u.statusText}`);
-        const a = await u.json();
+        const g = await fetch(t);
+        if (!g.ok)
+          throw new Error(`Failed to fetch config: ${g.statusText}`);
+        const a = await g.json();
         i(a);
-      } catch (u) {
-        const a = u instanceof Error ? u : new Error("Unknown error occurred");
+      } catch (g) {
+        const a = g instanceof Error ? g : new Error("Unknown error occurred");
         o(a), console.error("Failed to fetch seat map config:", a);
       } finally {
         d(!1);
@@ -38,10 +38,10 @@ function yt(t) {
     const { width: d, height: c } = r.getBoundingClientRect();
     d > 0 && c > 0 && i({ width: d, height: c });
     const o = new ResizeObserver((m) => {
-      const u = m[0];
-      if (!u) return;
-      const { width: a, height: s } = u.contentRect;
-      a > 0 && s > 0 && i((h) => h.width === a && h.height === s ? h : { width: a, height: s });
+      const g = m[0];
+      if (!g) return;
+      const { width: a, height: s } = g.contentRect;
+      a > 0 && s > 0 && i((u) => u.width === a && u.height === s ? u : { width: a, height: s });
     });
     return o.observe(r), () => {
       o.disconnect();
@@ -65,31 +65,31 @@ function mt(t, n) {
     const o = c.container(), m = (s) => {
       if (s.touches.length === 2) {
         s.preventDefault();
-        const h = { x: s.touches[0].clientX, y: s.touches[0].clientY }, f = { x: s.touches[1].clientX, y: s.touches[1].clientY };
-        i.current = Fe(h, f), r.current = Le(h, f), d.current = n.currentScale;
+        const u = { x: s.touches[0].clientX, y: s.touches[0].clientY }, h = { x: s.touches[1].clientX, y: s.touches[1].clientY };
+        i.current = Fe(u, h), r.current = Le(u, h), d.current = n.currentScale;
       }
-    }, u = (s) => {
+    }, g = (s) => {
       if (s.touches.length !== 2) return;
       s.preventDefault();
-      const h = { x: s.touches[0].clientX, y: s.touches[0].clientY }, f = { x: s.touches[1].clientX, y: s.touches[1].clientY }, S = Fe(h, f), g = Le(h, f);
+      const u = { x: s.touches[0].clientX, y: s.touches[0].clientY }, h = { x: s.touches[1].clientX, y: s.touches[1].clientY }, S = Fe(u, h), f = Le(u, h);
       if (i.current !== null && r.current !== null) {
         const C = S / i.current, E = Math.min(
           Math.max(n.currentScale * C, n.minScale),
           n.maxScale
-        ), I = o.getBoundingClientRect(), R = g.x - I.left, M = g.y - I.top, X = n.currentScale, k = {
+        ), I = o.getBoundingClientRect(), R = f.x - I.left, M = f.y - I.top, X = n.currentScale, k = {
           x: (R - n.currentPosition.x) / X,
           y: (M - n.currentPosition.y) / X
-        }, Y = g.x - r.current.x, P = g.y - r.current.y, H = {
+        }, Y = f.x - r.current.x, P = f.y - r.current.y, V = {
           x: R - k.x * E + Y,
           y: M - k.y * E + P
         };
-        n.onScaleChange(E, H), i.current = S, r.current = g;
+        n.onScaleChange(E, V), i.current = S, r.current = f;
       }
     }, a = (s) => {
       s.touches.length < 2 && (i.current = null, r.current = null);
     };
-    return o.addEventListener("touchstart", m, { passive: !1 }), o.addEventListener("touchmove", u, { passive: !1 }), o.addEventListener("touchend", a), () => {
-      o.removeEventListener("touchstart", m), o.removeEventListener("touchmove", u), o.removeEventListener("touchend", a);
+    return o.addEventListener("touchstart", m, { passive: !1 }), o.addEventListener("touchmove", g, { passive: !1 }), o.addEventListener("touchend", a), () => {
+      o.removeEventListener("touchstart", m), o.removeEventListener("touchmove", g), o.removeEventListener("touchend", a);
     };
   }, [t, n]);
 }
@@ -104,7 +104,7 @@ const St = {
   gridLines: "#404040",
   currency: "KD"
 }, ke = re(({ seat: t, state: n, colors: i, onClick: r, onMouseEnter: d, onMouseLeave: c }) => {
-  const u = {
+  const g = {
     available: i.seatAvailable,
     reserved: i.seatReserved,
     selected: i.seatSelected,
@@ -113,32 +113,32 @@ const St = {
     // Hidden seats are filtered out, but included for type safety
   }[n], a = n === "available" || n === "selected", s = L(() => {
     a && r(t);
-  }, [t, r, a]), h = L((g) => {
-    d(t, g);
-    const C = g.target.getStage();
+  }, [t, r, a]), u = L((f) => {
+    d(t, f);
+    const C = f.target.getStage();
     C && a && (C.container().style.cursor = "pointer");
-  }, [t, d, a]), f = L((g) => {
+  }, [t, d, a]), h = L((f) => {
     c();
-    const C = g.target.getStage();
+    const C = f.target.getStage();
     C && (C.container().style.cursor = "grab");
   }, [c]), S = {
     x: t.position.x,
     y: t.position.y,
-    fill: u,
+    fill: g,
     stroke: "#ffffff",
     strokeWidth: 1,
     onClick: s,
     onTap: s,
-    onMouseEnter: h,
-    onMouseLeave: f
+    onMouseEnter: u,
+    onMouseLeave: h
   };
-  return t.shape === "circle" ? /* @__PURE__ */ v(
+  return t.shape === "circle" ? /* @__PURE__ */ b(
     gt,
     {
       ...S,
       radius: 12
     }
-  ) : /* @__PURE__ */ v(
+  ) : /* @__PURE__ */ b(
     De,
     {
       ...S,
@@ -163,7 +163,7 @@ const ze = re(({ stage: t, stageColor: n }) => {
     custom: "➕"
   })[c || "stage"] || "🎭", r = t.config.color || n, d = i(t.config.objectType);
   return /* @__PURE__ */ D(ft, { x: t.position.x, y: t.position.y, rotation: t.config.rotation || 0, children: [
-    /* @__PURE__ */ v(
+    /* @__PURE__ */ b(
       De,
       {
         width: t.config.width,
@@ -174,7 +174,7 @@ const ze = re(({ stage: t, stageColor: n }) => {
         cornerRadius: 10
       }
     ),
-    /* @__PURE__ */ v(
+    /* @__PURE__ */ b(
       Ie,
       {
         text: d,
@@ -188,7 +188,7 @@ const ze = re(({ stage: t, stageColor: n }) => {
         verticalAlign: "middle"
       }
     ),
-    /* @__PURE__ */ v(
+    /* @__PURE__ */ b(
       Ie,
       {
         text: t.config.label,
@@ -216,7 +216,7 @@ const Ae = re(({
   className: o
 }) => {
   const m = U(
-    () => [...t].sort((f, S) => f.order - S.order),
+    () => [...t].sort((h, S) => h.order - S.order),
     [t]
   ), a = {
     position: "absolute",
@@ -246,30 +246,30 @@ const Ae = re(({
     transition: "all 0.2s ease",
     minHeight: "44px",
     touchAction: "manipulation"
-  }, h = {
+  }, u = {
     ...s,
     backgroundColor: "#3A7DE5",
     borderColor: "#3A7DE5"
   };
   return /* @__PURE__ */ D("div", { className: o, style: a, children: [
-    r && /* @__PURE__ */ v(
+    r && /* @__PURE__ */ b(
       "button",
       {
         type: "button",
         onClick: () => i(null),
-        style: n === null ? h : s,
+        style: n === null ? u : s,
         children: d
       }
     ),
-    m.map((f) => /* @__PURE__ */ v(
+    m.map((h) => /* @__PURE__ */ b(
       "button",
       {
         type: "button",
-        onClick: () => i(f.id),
-        style: n === f.id ? h : s,
-        children: f.name
+        onClick: () => i(h.id),
+        style: n === h.id ? u : s,
+        children: h.name
       },
-      f.id
+      h.id
     ))
   ] });
 });
@@ -283,7 +283,7 @@ const Xe = re(({
   position: c,
   className: o
 }) => {
-  const u = {
+  const g = {
     position: "absolute",
     display: "flex",
     flexDirection: "column",
@@ -320,26 +320,26 @@ const Xe = re(({
     ...a,
     opacity: 0.4,
     cursor: "not-allowed"
-  }, h = t < i, f = t > n;
-  return /* @__PURE__ */ D("div", { className: o, style: u, children: [
-    /* @__PURE__ */ v(
+  }, u = t < i, h = t > n;
+  return /* @__PURE__ */ D("div", { className: o, style: g, children: [
+    /* @__PURE__ */ b(
       "button",
       {
         type: "button",
         onClick: r,
-        disabled: !h,
-        style: h ? a : s,
+        disabled: !u,
+        style: u ? a : s,
         title: "Zoom In",
         children: "+"
       }
     ),
-    /* @__PURE__ */ v(
+    /* @__PURE__ */ b(
       "button",
       {
         type: "button",
         onClick: d,
-        disabled: !f,
-        style: f ? a : s,
+        disabled: !h,
+        style: h ? a : s,
         title: "Zoom Out",
         children: "−"
       }
@@ -362,7 +362,7 @@ const Ye = re(({
     top: `${i + 15}px`,
     zIndex: 1e3,
     pointerEvents: "none"
-  }, u = {
+  }, g = {
     backgroundColor: "rgba(26, 26, 26, 0.95)",
     color: "#fff",
     border: "1px solid #444",
@@ -376,33 +376,33 @@ const Ye = re(({
     marginRight: "4px"
   }, s = {
     fontWeight: 600
-  }, h = {
+  }, u = {
     color: "#4ade80",
     fontWeight: 600
-  }, f = {
+  }, h = {
     fontSize: "11px",
     color: "#6b7280",
     textTransform: "capitalize",
     marginTop: "4px"
   };
-  return /* @__PURE__ */ v("div", { style: m, children: /* @__PURE__ */ D("div", { style: u, children: [
+  return /* @__PURE__ */ b("div", { style: m, children: /* @__PURE__ */ D("div", { style: g, children: [
     r.sectionName && /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
-      /* @__PURE__ */ v("span", { style: a, children: "Section:" }),
-      /* @__PURE__ */ v("span", { style: { ...s, color: "#3b82f6" }, children: r.sectionName })
+      /* @__PURE__ */ b("span", { style: a, children: "Section:" }),
+      /* @__PURE__ */ b("span", { style: { ...s, color: "#3b82f6" }, children: r.sectionName })
     ] }),
     /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
-      /* @__PURE__ */ v("span", { style: a, children: "Seat:" }),
-      /* @__PURE__ */ v("span", { style: s, children: o })
+      /* @__PURE__ */ b("span", { style: a, children: "Seat:" }),
+      /* @__PURE__ */ b("span", { style: s, children: o })
     ] }),
     r.price !== void 0 && r.price > 0 && c === "available" && /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
-      /* @__PURE__ */ v("span", { style: a, children: "Price:" }),
-      /* @__PURE__ */ D("span", { style: h, children: [
+      /* @__PURE__ */ b("span", { style: a, children: "Price:" }),
+      /* @__PURE__ */ D("span", { style: u, children: [
         d,
         " ",
         r.price.toFixed(2)
       ] })
     ] }),
-    /* @__PURE__ */ D("div", { style: f, children: [
+    /* @__PURE__ */ D("div", { style: h, children: [
       "Status: ",
       c
     ] })
@@ -419,13 +419,13 @@ const Lt = ({
   // v2.4.0: New prop name (preferred)
   unavailableSeats: o = [],
   selectedSeats: m,
-  myReservedSeats: u = [],
+  myReservedSeats: g = [],
   onSeatSelect: a,
   onSeatDeselect: s,
-  onSelectionChange: h,
-  colorOverrides: f,
+  onSelectionChange: u,
+  colorOverrides: h,
   showTooltip: S = !0,
-  zoomEnabled: g = !0,
+  zoomEnabled: f = !0,
   className: C = "",
   onConfigLoad: E,
   onError: I,
@@ -436,156 +436,143 @@ const Lt = ({
   showAllFloorsOption: k = !0,
   allFloorsLabel: Y = "All",
   fitToView: P = !0,
-  fitPadding: H = 40,
+  fitPadding: V = 40,
   // Zoom controls
   showZoomControls: je = !0,
   zoomControlsPosition: Pe = "bottom-right",
   zoomControlsClassName: We,
-  minZoom: we,
+  minZoom: xe,
   maxZoom: B = 3,
   zoomStep: oe = 0.25,
   // Touch gestures
   touchEnabled: Be = !0
 }) => {
-  const ie = c !== void 0 ? c : d;
-  console.log("🔍 ZonetrixViewer received props:", {
-    reservedSeats: d,
-    otherReservedSeats: c,
-    effectiveOtherReservedSeats: ie,
-    myReservedSeats: u,
-    unavailableSeats: o
-  });
-  const fe = A(null), Ce = A(null), F = yt(Ce), [_, Re] = T(/* @__PURE__ */ new Set()), [N, G] = T(1), [z, O] = T({ x: 0, y: 0 }), [$e, Ue] = T(null), [Oe, Ve] = T(1), se = A({ width: 0, height: 0 }), [K, Me] = T({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: He, loading: _e, error: J } = vt(n), p = t || He, ge = i !== void 0, j = ge ? i || null : $e, ae = m !== void 0, qe = L((e) => {
-    ge || Ue(e), r?.(e);
-  }, [ge, r]), pe = p?.floors || [], Ze = R !== void 0 ? R : pe.length > 1, ce = U(
-    () => p ? { ...p.colors, ...f } : { ...St, ...f },
-    [p, f]
+  const we = c !== void 0 ? c : d, he = A(null), Ce = A(null), F = yt(Ce), [_, Re] = T(/* @__PURE__ */ new Set()), [N, Z] = T(1), [z, H] = T({ x: 0, y: 0 }), [$e, Ue] = T(null), [He, Oe] = T(1), ie = A({ width: 0, height: 0 }), [K, Me] = T({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: Ve, loading: _e, error: J } = bt(n), p = t || Ve, fe = i !== void 0, j = fe ? i || null : $e, se = m !== void 0, qe = L((e) => {
+    fe || Ue(e), r?.(e);
+  }, [fe, r]), ge = p?.floors || [], Ge = R !== void 0 ? R : ge.length > 1, ae = U(
+    () => p ? { ...p.colors, ...h } : { ...St, ...h },
+    [p, h]
   ), q = U(() => {
     if (!p) return [];
     let e = p.seats.filter((l) => l.state !== "hidden");
     return j && (e = e.filter(
       (l) => l.floorId === j || !l.floorId && j === "floor_default"
     )), e;
-  }, [p, j]), le = U(() => p?.stages ? j ? p.stages.filter(
+  }, [p, j]), ce = U(() => p?.stages ? j ? p.stages.filter(
     (e) => e.floorId === j || !e.floorId && j === "floor_default"
   ) : p.stages : [], [p, j]), $ = U(() => {
-    if (!p || q.length === 0 && le.length === 0)
+    if (!p || q.length === 0 && ce.length === 0)
       return null;
     const e = 12;
-    let l = 1 / 0, b = 1 / 0, y = -1 / 0, x = -1 / 0;
+    let l = 1 / 0, v = 1 / 0, y = -1 / 0, x = -1 / 0;
     return q.forEach((w) => {
-      l = Math.min(l, w.position.x - e), b = Math.min(b, w.position.y - e), y = Math.max(y, w.position.x + e), x = Math.max(x, w.position.y + e);
-    }), le.forEach((w) => {
-      l = Math.min(l, w.position.x), b = Math.min(b, w.position.y), y = Math.max(y, w.position.x + (w.config?.width || 200)), x = Math.max(x, w.position.y + (w.config?.height || 100));
-    }), { minX: l, minY: b, maxX: y, maxY: x, width: y - l, height: x - b };
-  }, [p, q, le]);
+      l = Math.min(l, w.position.x - e), v = Math.min(v, w.position.y - e), y = Math.max(y, w.position.x + e), x = Math.max(x, w.position.y + e);
+    }), ce.forEach((w) => {
+      l = Math.min(l, w.position.x), v = Math.min(v, w.position.y), y = Math.max(y, w.position.x + (w.config?.width || 200)), x = Math.max(x, w.position.y + (w.config?.height || 100));
+    }), { minX: l, minY: v, maxX: y, maxY: x, width: y - l, height: x - v };
+  }, [p, q, ce]);
   W(() => {
     if (!P || !p || !$ || F.width === 0 || F.height === 0) return;
-    const e = Math.abs(F.width - se.current.width), l = Math.abs(F.height - se.current.height);
-    if (!(se.current.width === 0) && e < 10 && l < 10) return;
-    se.current = F;
-    const y = F.width, x = F.height, w = y - H * 2, te = x - H * 2, de = w / $.width, ve = te / $.height, ue = Math.min(de, ve, B), it = $.minX + $.width / 2, st = $.minY + $.height / 2, at = y / 2, ct = x / 2, lt = at - it * ue, dt = ct - st * ue;
-    G(ue), O({ x: lt, y: dt }), Ve(ue);
-  }, [P, p, $, H, B, F, j]);
-  const V = U(() => {
-    console.log("🔍 Creating seatStateOverrides:", {
-      effectiveOtherReservedSeats: ie,
-      myReservedSeats: u,
-      unavailableSeats: o
-    });
-    const e = new Set(ie), l = new Set(o), b = new Set(u);
-    return { reserved: e, unavailable: l, myReserved: b };
-  }, [ie, o, u]), be = U(() => m ? new Set(m) : null, [m]), Q = L((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) || _.has(l) ? "selected" : e.state;
-  }, [V, _]);
+    const e = Math.abs(F.width - ie.current.width), l = Math.abs(F.height - ie.current.height);
+    if (!(ie.current.width === 0) && e < 10 && l < 10) return;
+    ie.current = F;
+    const y = F.width, x = F.height, w = y - V * 2, te = x - V * 2, le = w / $.width, ve = te / $.height, de = Math.min(le, ve, B), it = $.minX + $.width / 2, st = $.minY + $.height / 2, at = y / 2, ct = x / 2, lt = at - it * de, dt = ct - st * de;
+    Z(de), H({ x: lt, y: dt }), Oe(de);
+  }, [P, p, $, V, B, F, j]);
+  const O = U(() => {
+    const e = new Set(we), l = new Set(o), v = new Set(g);
+    return { reserved: e, unavailable: l, myReserved: v };
+  }, [we, o, g]), pe = U(() => m ? new Set(m) : null, [m]), Q = L((e) => {
+    const l = e.id, v = e.seatNumber || "";
+    return O.unavailable.has(l) || O.unavailable.has(v) ? "unavailable" : O.reserved.has(l) || O.reserved.has(v) ? "reserved" : O.myReserved.has(l) || O.myReserved.has(v) || _.has(l) ? "selected" : e.state;
+  }, [O, _]);
   W(() => {
     p && E && E(p);
   }, [p, E]), W(() => {
     J && I && I(J);
   }, [J, I]), W(() => {
-    ae && be && Re(be);
-  }, [ae, be]);
-  const Ge = L((e) => {
+    se && pe && Re(pe);
+  }, [se, pe]);
+  const Ze = L((e) => {
     const l = Q(e);
     if (l !== "available" && l !== "selected")
       return;
-    const b = _.has(e.id);
-    ae || Re((y) => {
+    const v = _.has(e.id);
+    se || Re((y) => {
       const x = new Set(y);
-      return b ? x.delete(e.id) : x.add(e.id), x;
-    }), b ? s?.(e) : (a?.(e), a || console.log("Seat selected:", e));
-  }, [Q, _, ae, a, s]), ee = U(() => p ? q.filter((e) => _.has(e.id)) : [], [q, _]);
+      return v ? x.delete(e.id) : x.add(e.id), x;
+    }), v ? s?.(e) : (a?.(e), a || console.log("Seat selected:", e));
+  }, [Q, _, se, a, s]), ee = U(() => p ? q.filter((e) => _.has(e.id)) : [], [q, _]);
   W(() => {
-    h?.(ee);
-  }, [ee, h]);
-  const Z = we !== void 0 ? we : Oe, Ke = L(() => {
-    if (!g) return;
+    u?.(ee);
+  }, [ee, u]);
+  const G = xe !== void 0 ? xe : He, Ke = L(() => {
+    if (!f) return;
     const e = Math.min(N + oe, B);
     if (e !== N) {
-      const l = F.width || p?.canvas.width || 800, b = F.height || p?.canvas.height || 600, y = l / 2, x = b / 2, w = {
+      const l = F.width || p?.canvas.width || 800, v = F.height || p?.canvas.height || 600, y = l / 2, x = v / 2, w = {
         x: (y - z.x) / N,
         y: (x - z.y) / N
       };
-      G(e), O({
+      Z(e), H({
         x: y - w.x * e,
         y: x - w.y * e
       });
     }
-  }, [g, N, oe, B, F, p, z]), Je = L(() => {
-    if (!g) return;
-    const e = Math.max(N - oe, Z);
+  }, [f, N, oe, B, F, p, z]), Je = L(() => {
+    if (!f) return;
+    const e = Math.max(N - oe, G);
     if (e !== N) {
-      const l = F.width || p?.canvas.width || 800, b = F.height || p?.canvas.height || 600, y = l / 2, x = b / 2, w = {
+      const l = F.width || p?.canvas.width || 800, v = F.height || p?.canvas.height || 600, y = l / 2, x = v / 2, w = {
         x: (y - z.x) / N,
         y: (x - z.y) / N
       };
-      G(e), O({
+      Z(e), H({
         x: y - w.x * e,
         y: x - w.y * e
       });
     }
-  }, [g, N, oe, Z, F, p, z]), Qe = L((e) => {
-    O({
+  }, [f, N, oe, G, F, p, z]), Qe = L((e) => {
+    H({
       x: e.target.x(),
       y: e.target.y()
     });
   }, []), et = L((e) => {
-    if (!g) return;
+    if (!f) return;
     e.evt.preventDefault();
-    const l = fe.current;
+    const l = he.current;
     if (!l) return;
-    const b = l.scaleX(), y = l.getPointerPosition();
+    const v = l.scaleX(), y = l.getPointerPosition();
     if (!y) return;
-    const x = 1.1, w = e.evt.deltaY > 0 ? b / x : b * x, te = Math.min(Math.max(w, Z), B), de = {
-      x: (y.x - z.x) / b,
-      y: (y.y - z.y) / b
+    const x = 1.1, w = e.evt.deltaY > 0 ? v / x : v * x, te = Math.min(Math.max(w, G), B), le = {
+      x: (y.x - z.x) / v,
+      y: (y.y - z.y) / v
     }, ve = {
-      x: y.x - de.x * te,
-      y: y.y - de.y * te
+      x: y.x - le.x * te,
+      y: y.y - le.y * te
     };
-    G(te), O(ve);
-  }, [g, z, Z, B]);
-  mt(fe, {
-    enabled: Be && g,
-    minScale: Z,
+    Z(te), H(ve);
+  }, [f, z, G, B]);
+  mt(he, {
+    enabled: Be && f,
+    minScale: G,
     maxScale: B,
     currentScale: N,
     currentPosition: z,
     onScaleChange: (e, l) => {
-      G(e), O(l);
+      Z(e), H(l);
     },
     onPositionChange: (e) => {
-      O(e);
+      H(e);
     }
   });
   const tt = L((e, l) => {
     if (!S) return;
-    const b = l.target.getStage();
-    if (!b) return;
-    const y = b.getPointerPosition();
+    const v = l.target.getStage();
+    if (!v) return;
+    const y = v.getPointerPosition();
     if (!y) return;
-    const x = b.container().getBoundingClientRect();
+    const x = v.container().getBoundingClientRect();
     Me({
       visible: !0,
       x: x.left + y.x,
@@ -597,14 +584,14 @@ const Lt = ({
     Me((e) => ({ ...e, visible: !1 }));
   }, []);
   if (_e)
-    return /* @__PURE__ */ v("div", { className: `flex items-center justify-center h-full ${C}`, children: /* @__PURE__ */ v("p", { children: "Loading seat map..." }) });
+    return /* @__PURE__ */ b("div", { className: `flex items-center justify-center h-full ${C}`, children: /* @__PURE__ */ b("p", { children: "Loading seat map..." }) });
   if (J)
-    return /* @__PURE__ */ v("div", { className: `flex items-center justify-center h-full ${C}`, children: /* @__PURE__ */ D("p", { className: "text-red-500", children: [
+    return /* @__PURE__ */ b("div", { className: `flex items-center justify-center h-full ${C}`, children: /* @__PURE__ */ D("p", { className: "text-red-500", children: [
       "Error loading seat map: ",
       J.message
     ] }) });
   if (!p)
-    return /* @__PURE__ */ v("div", { className: `flex items-center justify-center h-full ${C}`, children: /* @__PURE__ */ v("p", { children: "No configuration provided" }) });
+    return /* @__PURE__ */ b("div", { className: `flex items-center justify-center h-full ${C}`, children: /* @__PURE__ */ b("p", { children: "No configuration provided" }) });
   const rt = F.width || p.canvas.width, ot = F.height || p.canvas.height;
   return /* @__PURE__ */ D(
     "div",
@@ -613,10 +600,10 @@ const Lt = ({
       className: `relative ${C}`,
       style: { width: "100%", height: "100%" },
       children: [
-        Ze && pe.length > 0 && /* @__PURE__ */ v(
+        Ge && ge.length > 0 && /* @__PURE__ */ b(
           Ae,
           {
-            floors: pe,
+            floors: ge,
             currentFloorId: j,
             onFloorChange: qe,
             showAllOption: k,
@@ -628,7 +615,7 @@ const Lt = ({
         /* @__PURE__ */ D(
           ht,
           {
-            ref: fe,
+            ref: he,
             width: rt,
             height: ot,
             scaleX: N,
@@ -640,21 +627,21 @@ const Lt = ({
             onWheel: et,
             style: { backgroundColor: p.canvas.backgroundColor, cursor: "grab" },
             children: [
-              /* @__PURE__ */ v(Ee, { listening: !1, children: le.map((e) => /* @__PURE__ */ v(
+              /* @__PURE__ */ b(Ee, { listening: !1, children: ce.map((e) => /* @__PURE__ */ b(
                 ze,
                 {
                   stage: e,
-                  stageColor: ce.stageColor
+                  stageColor: ae.stageColor
                 },
                 e.id
               )) }),
-              /* @__PURE__ */ v(Ee, { children: q.map((e) => /* @__PURE__ */ v(
+              /* @__PURE__ */ b(Ee, { children: q.map((e) => /* @__PURE__ */ b(
                 ke,
                 {
                   seat: e,
                   state: Q(e),
-                  colors: ce,
-                  onClick: Ge,
+                  colors: ae,
+                  onClick: Ze,
                   onMouseEnter: tt,
                   onMouseLeave: nt
                 },
@@ -663,22 +650,22 @@ const Lt = ({
             ]
           }
         ),
-        S && /* @__PURE__ */ v(
+        S && /* @__PURE__ */ b(
           Ye,
           {
             visible: K.visible,
             x: K.x,
             y: K.y,
             seat: K.seat,
-            currency: ce.currency,
+            currency: ae.currency,
             state: K.state
           }
         ),
-        je && g && /* @__PURE__ */ v(
+        je && f && /* @__PURE__ */ b(
           Xe,
           {
             scale: N,
-            minScale: Z,
+            minScale: G,
             maxScale: B,
             onZoomIn: Ke,
             onZoomOut: Je,
@@ -692,9 +679,9 @@ const Lt = ({
             ee.length,
             ")"
           ] }),
-          /* @__PURE__ */ v("div", { className: "max-h-48 overflow-y-auto space-y-1", children: ee.map((e) => /* @__PURE__ */ D("div", { className: "text-sm", children: [
+          /* @__PURE__ */ b("div", { className: "max-h-48 overflow-y-auto space-y-1", children: ee.map((e) => /* @__PURE__ */ D("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)) })
         ] })
       ]
@@ -705,20 +692,20 @@ let ne = null;
 function Dt(t) {
   ne = t;
 }
-function Se() {
+function me() {
   if (!ne)
     throw new Error(
       "Firebase database not initialized. Call initializeFirebaseForViewer(db) first."
     );
   return ne;
 }
-function xe() {
+function Se() {
   return ne !== null;
 }
 function Nt() {
   ne = null;
 }
-function ye(t, n) {
+function be(t, n) {
   if (t.length !== n.length) return !1;
   const i = [...t].sort(), r = [...n].sort();
   return i.every((d, c) => d === r[c]);
@@ -733,7 +720,7 @@ function xt(t, n) {
     unavailable: d.sort()
   };
 }
-const he = {
+const ue = {
   states: null,
   loading: !0,
   error: null,
@@ -743,26 +730,26 @@ const he = {
   unavailableSeats: []
 };
 function wt(t) {
-  const { seatMapId: n, currentUserId: i, enabled: r = !0, onStateChange: d, onError: c } = t, o = A({ ...he }), m = A(d), u = A(c), a = A(i);
-  m.current = d, u.current = c, a.current = i;
+  const { seatMapId: n, currentUserId: i, enabled: r = !0, onStateChange: d, onError: c } = t, o = A({ ...ue }), m = A(d), g = A(c), a = A(i);
+  m.current = d, g.current = c, a.current = i;
   const s = L(
-    (g) => {
+    (f) => {
       if (!r || !n)
-        return (o.current.loading !== !1 || o.current.states !== null) && (o.current = { ...he, loading: !1 }, g()), () => {
+        return (o.current.loading !== !1 || o.current.states !== null) && (o.current = { ...ue, loading: !1 }, f()), () => {
         };
-      if (!xe()) {
+      if (!Se()) {
         const M = "Firebase not initialized. Call initializeFirebaseForViewer first.";
         return o.current.error?.message !== M && (o.current = {
-          ...he,
+          ...ue,
           loading: !1,
           error: new Error(M)
-        }, g()), () => {
+        }, f()), () => {
         };
       }
-      const C = Se(), E = me(C, `seatmaps/${n}/seat_states`);
+      const C = me(), E = ye(C, `seatmaps/${n}/seat_states`);
       return Ne(E, (M) => {
         const k = M.val() || {}, Y = xt(k, a.current), P = o.current;
-        (P.loading || !ye(P.myReservedSeats, Y.myReserved) || !ye(P.otherReservedSeats, Y.otherReserved) || !ye(P.unavailableSeats, Y.unavailable)) && (o.current = {
+        (P.loading || !be(P.myReservedSeats, Y.myReserved) || !be(P.otherReservedSeats, Y.otherReserved) || !be(P.unavailableSeats, Y.unavailable)) && (o.current = {
           states: k,
           loading: !1,
           error: null,
@@ -770,20 +757,20 @@ function wt(t) {
           myReservedSeats: Y.myReserved,
           otherReservedSeats: Y.otherReserved,
           unavailableSeats: Y.unavailable
-        }, m.current?.(k), g());
+        }, m.current?.(k), f());
       }, (M) => {
         o.current = {
           ...o.current,
           loading: !1,
           error: M
-        }, u.current?.(M), g();
+        }, g.current?.(M), f();
       }), () => {
         Te(E);
       };
     },
     [n, r]
     // Don't include currentUserId - we use currentUserIdRef.current which is always up-to-date
-  ), h = L(() => o.current, []), f = L(() => he, []), S = ut(s, h, f);
+  ), u = L(() => o.current, []), h = L(() => ue, []), S = ut(s, u, h);
   return {
     states: S.states,
     loading: S.loading,
@@ -803,26 +790,26 @@ function Ct(t) {
     subscribeToChanges: r = !1,
     onConfigLoad: d,
     onError: c
-  } = t, [o, m] = T(null), [u, a] = T(!0), [s, h] = T(null), f = A(d), S = A(c);
-  f.current = d, S.current = c;
-  const g = L(async () => {
+  } = t, [o, m] = T(null), [g, a] = T(!0), [s, u] = T(null), h = A(d), S = A(c);
+  h.current = d, S.current = c;
+  const f = L(async () => {
     if (!n) return;
-    if (!xe()) {
-      h(new Error("Firebase not initialized. Call initializeFirebaseForViewer first.")), a(!1);
+    if (!Se()) {
+      u(new Error("Firebase not initialized. Call initializeFirebaseForViewer first.")), a(!1);
       return;
     }
-    const C = Se(), E = me(C, `seatmaps/${n}`);
+    const C = me(), E = ye(C, `seatmaps/${n}`);
     try {
-      a(!0), h(null);
+      a(!0), u(null);
       const R = (await pt(E)).val();
       if (R) {
-        const M = bt(R);
-        m(M), f.current?.(M);
+        const M = vt(R);
+        m(M), h.current?.(M);
       } else
-        h(new Error(`Seat map ${n} not found in Firebase`));
+        u(new Error(`Seat map ${n} not found in Firebase`));
     } catch (I) {
       const R = I instanceof Error ? I : new Error("Unknown error");
-      h(R), S.current?.(R);
+      u(R), S.current?.(R);
     } finally {
       a(!1);
     }
@@ -832,8 +819,8 @@ function Ct(t) {
       a(!1);
       return;
     }
-    if (g(), r && xe()) {
-      const C = Se(), E = me(C, `seatmaps/${n}/meta/updated_at`);
+    if (f(), r && Se()) {
+      const C = me(), E = ye(C, `seatmaps/${n}/meta/updated_at`);
       let I = !0, R = null;
       return Ne(E, (X) => {
         if (I) {
@@ -841,16 +828,16 @@ function Ct(t) {
           return;
         }
         const k = X.val();
-        X.exists() && k !== R && (R = k, g());
+        X.exists() && k !== R && (R = k, f());
       }), () => {
         Te(E);
       };
     }
   }, [n, i, r]), {
     config: o,
-    loading: u,
+    loading: g,
     error: s,
-    refetch: g
+    refetch: f
   };
 }
 function Tt(t) {
@@ -863,10 +850,10 @@ function Tt(t) {
     onStateChange: o,
     onError: m
   } = t, {
-    config: u,
+    config: g,
     loading: a,
     error: s,
-    refetch: h
+    refetch: u
   } = Ct({
     seatMapId: n,
     enabled: r,
@@ -874,9 +861,9 @@ function Tt(t) {
     onConfigLoad: c,
     onError: m
   }), {
-    states: f,
+    states: h,
     loading: S,
-    error: g,
+    error: f,
     lastUpdated: C,
     myReservedSeats: E,
     otherReservedSeats: I,
@@ -890,16 +877,16 @@ function Tt(t) {
     onError: m
   });
   return {
-    config: u,
+    config: g,
     loading: a || S,
-    error: s || g,
+    error: s || f,
     myReservedSeats: E,
     otherReservedSeats: I,
     unavailableSeats: R,
     reservedSeats: M,
-    seatStates: f,
+    seatStates: h,
     lastUpdated: C,
-    refetch: h
+    refetch: u
   };
 }
 export {
@@ -907,8 +894,8 @@ export {
   Lt as SeatMapViewer,
   Nt as clearFirebaseInstance,
   Dt as initializeFirebaseForViewer,
-  xe as isFirebaseInitialized,
-  vt as useConfigFetcher,
+  Se as isFirebaseInitialized,
+  bt as useConfigFetcher,
   yt as useContainerSize,
   Ct as useFirebaseConfig,
   wt as useFirebaseSeatStates,

package/package.json

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