@zonetrix/viewer 2.13.2 → 2.13.3

package/dist/index.js

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

package/dist/index.mjs

@@ -1,20 +1,20 @@
-import { jsx as a, jsxs as k } from "react/jsx-runtime";
-import { useState as E, useCallback as N, useEffect as B, useRef as K, useMemo as z, memo as J } from "react";
-import { Stage as oe, Layer as vt, Group as re, Text as Rt, Circle as Dt, Rect as Nt, Path as se, RegularPolygon as ae } from "react-konva";
-import { clearFirebaseInstance as be, getFirebaseDatabase as me, initializeFirebaseForViewer as ve, isFirebaseInitialized as Se, useFirebaseConfig as we, useFirebaseSeatStates as Ce, useRealtimeSeatMap as Me } from "@zonetrix/shared";
-function ce(n) {
-  const [u, e] = E(null), [r, S] = E(!1), [y, f] = E(null), x = N(async () => {
+import { jsx as c, jsxs as k } from "react/jsx-runtime";
+import { useState as A, useCallback as N, useEffect as B, useRef as K, useMemo as z, memo as J } from "react";
+import { Stage as oe, Layer as St, Group as re, Text as Dt, Circle as Nt, Rect as Tt, Path as se, RegularPolygon as ce } from "react-konva";
+import { clearFirebaseInstance as me, getFirebaseDatabase as be, initializeFirebaseForViewer as ve, isFirebaseInitialized as Se, useFirebaseConfig as we, useFirebaseSeatStates as Ce, useRealtimeSeatMap as Me } from "@zonetrix/shared";
+function ae(n) {
+  const [u, e] = A(null), [r, S] = A(!1), [y, f] = A(null), x = N(async () => {
     if (n) {
       S(!0), f(null);
       try {
         const g = await fetch(n);
         if (!g.ok)
           throw new Error(`Failed to fetch config: ${g.statusText}`);
-        const c = await g.json();
-        e(c);
+        const a = await g.json();
+        e(a);
       } catch (g) {
-        const c = g instanceof Error ? g : new Error("Unknown error occurred");
-        f(c), console.error("Failed to fetch seat map config:", c);
+        const a = g instanceof Error ? g : new Error("Unknown error occurred");
+        f(a), console.error("Failed to fetch seat map config:", a);
       } finally {
         S(!1);
       }
@@ -30,7 +30,7 @@ function ce(n) {
   };
 }
 function le(n) {
-  const [u, e] = E({ width: 0, height: 0 });
+  const [u, e] = A({ width: 0, height: 0 });
   return B(() => {
     const r = n.current;
     if (!r) return;
@@ -39,18 +39,18 @@ function le(n) {
     const f = new ResizeObserver((x) => {
       const g = x[0];
       if (!g) return;
-      const { width: c, height: p } = g.contentRect;
-      c > 0 && p > 0 && e((b) => b.width === c && b.height === p ? b : { width: c, height: p });
+      const { width: a, height: p } = g.contentRect;
+      a > 0 && p > 0 && e((m) => m.width === a && m.height === p ? m : { width: a, height: p });
     });
     return f.observe(r), () => {
       f.disconnect();
     };
   }, [n]), u;
 }
-function Ft(n, u) {
+function kt(n, u) {
   return Math.sqrt(Math.pow(u.x - n.x, 2) + Math.pow(u.y - n.y, 2));
 }
-function kt(n, u) {
+function Rt(n, u) {
   return {
     x: (n.x + u.x) / 2,
     y: (n.y + u.y) / 2
@@ -62,44 +62,46 @@ function he(n, u) {
     minScale: f,
     maxScale: x,
     currentScale: g,
-    currentPosition: c,
+    currentPosition: a,
     onScaleChange: p
   } = u;
   B(() => {
-    const b = n.current;
-    if (!b || !y) return;
-    const d = b.container(), I = (m) => {
-      if (m.touches.length === 2) {
-        m.preventDefault();
-        const X = { x: m.touches[0].clientX, y: m.touches[0].clientY }, W = { x: m.touches[1].clientX, y: m.touches[1].clientY };
-        e.current = Ft(X, W), r.current = kt(X, W), S.current = g;
+    const m = n.current;
+    if (!m || !y) return;
+    const h = m.container(), I = h.style.touchAction;
+    h.style.touchAction = "none";
+    const b = (v) => {
+      if (v.touches.length === 2) {
+        v.preventDefault();
+        const T = { x: v.touches[0].clientX, y: v.touches[0].clientY }, P = { x: v.touches[1].clientX, y: v.touches[1].clientY };
+        e.current = kt(T, P), r.current = Rt(T, P), S.current = g;
       }
-    }, v = (m) => {
-      if (m.touches.length !== 2) return;
-      m.preventDefault();
-      const X = { x: m.touches[0].clientX, y: m.touches[0].clientY }, W = { x: m.touches[1].clientX, y: m.touches[1].clientY }, O = Ft(X, W), M = kt(X, W);
+    }, w = (v) => {
+      if (v.touches.length !== 2) return;
+      v.preventDefault();
+      const T = { x: v.touches[0].clientX, y: v.touches[0].clientY }, P = { x: v.touches[1].clientX, y: v.touches[1].clientY }, F = kt(T, P), W = Rt(T, P);
       if (e.current !== null && r.current !== null) {
-        const P = O / e.current, A = Math.min(
-          Math.max(g * P, f),
+        const Q = F / e.current, O = Math.min(
+          Math.max(g * Q, f),
           x
-        ), Q = d.getBoundingClientRect(), j = M.x - Q.left, st = M.y - Q.top, at = g, ct = {
-          x: (j - c.x) / at,
-          y: (st - c.y) / at
-        }, lt = M.x - r.current.x, Y = M.y - r.current.y, V = {
-          x: j - ct.x * A + lt,
-          y: st - ct.y * A + Y
+        ), j = h.getBoundingClientRect(), ct = W.x - j.left, at = W.y - j.top, lt = g, tt = {
+          x: (ct - a.x) / lt,
+          y: (at - a.y) / lt
+        }, Y = W.x - r.current.x, V = W.y - r.current.y, ht = {
+          x: ct - tt.x * O + Y,
+          y: at - tt.y * O + V
         };
-        p(A, V), e.current = O, r.current = M;
+        p(O, ht), e.current = F, r.current = W;
       }
-    }, w = (m) => {
-      m.touches.length < 2 && (e.current = null, r.current = null);
+    }, E = (v) => {
+      v.touches.length < 2 && (e.current = null, r.current = null);
     };
-    return d.addEventListener("touchstart", I, {
+    return h.addEventListener("touchstart", b, {
       passive: !1
-    }), d.addEventListener("touchmove", v, {
+    }), h.addEventListener("touchmove", w, {
       passive: !1
-    }), d.addEventListener("touchend", w), () => {
-      d.removeEventListener("touchstart", I), d.removeEventListener("touchmove", v), d.removeEventListener("touchend", w);
+    }), h.addEventListener("touchend", E), () => {
+      h.style.touchAction = I, h.removeEventListener("touchstart", b), h.removeEventListener("touchmove", w), h.removeEventListener("touchend", E);
     };
   }, [
     n,
@@ -107,7 +109,7 @@ function he(n, u) {
     f,
     x,
     g,
-    c,
+    a,
     p
   ]);
 }
@@ -130,35 +132,36 @@ const de = {
       unavailable: e.seatUnavailable,
       hidden: e.seatHidden
       // Hidden seats are filtered out, but included for type safety
-    }[u], c = u === "available" || u === "selected", p = N(() => {
-      c && r(n);
-    }, [n, r, c]), b = N(
-      (v) => {
-        S(n, v);
-        const w = v.target.getStage();
-        w && c && (w.container().style.cursor = "pointer");
+    }[u], a = u === "available" || u === "selected", p = N(() => {
+      a && r(n);
+    }, [n, r, a]), m = N(
+      (b) => {
+        S(n, b);
+        const w = b.target.getStage();
+        w && a && (w.container().style.cursor = "pointer");
       },
-      [n, S, c]
-    ), d = N(
-      (v) => {
+      [n, S, a]
+    ), h = N(
+      (b) => {
         y();
-        const w = v.target.getStage();
+        const w = b.target.getStage();
         w && (w.container().style.cursor = "grab");
       },
       [y]
     ), I = {
       x: n.position.x,
       y: n.position.y,
+      rotation: n.rotation || 0,
       fill: g,
       stroke: "#ffffff",
       strokeWidth: 1,
       onClick: p,
       onTap: p,
-      onMouseEnter: b,
-      onMouseLeave: d
+      onMouseEnter: m,
+      onMouseLeave: h
     };
-    return n.shape === "circle" ? /* @__PURE__ */ a(Dt, { ...I, radius: f }) : /* @__PURE__ */ a(
-      Nt,
+    return n.shape === "circle" ? /* @__PURE__ */ c(Nt, { ...I, radius: f }) : /* @__PURE__ */ c(
+      Tt,
       {
         ...I,
         width: f * 2,
@@ -171,59 +174,59 @@ const de = {
   }
 );
 Wt.displayName = "ViewerSeat";
-const Tt = J(({ stage: n, stageColor: u }) => {
+const Xt = J(({ stage: n, stageColor: u }) => {
   const e = n.config, r = e.shape || "rectangle", S = e.showLabel !== !1, y = e.color || u, f = e.width / e.height, x = f < 0.5, g = f > 2;
-  let c;
-  x ? c = e.width * 0.25 : g ? c = e.height * 0.35 : c = Math.min(e.width, e.height) * 0.25;
-  const p = e.label?.length || 6, I = e.width * 0.85 / p * 1.5, v = Math.max(
+  let a;
+  x ? a = e.width * 0.25 : g ? a = e.height * 0.35 : a = Math.min(e.width, e.height) * 0.25;
+  const p = e.label?.length || 6, I = e.width * 0.85 / p * 1.5, b = Math.max(
     10,
-    Math.min(24, Math.min(c, I))
-  ), w = 4, m = Math.max(20, e.width - w * 2), X = (e.width - m) / 2, W = {
+    Math.min(24, Math.min(a, I))
+  ), w = 4, E = Math.max(20, e.width - w * 2), v = (e.width - E) / 2, T = {
     fill: y + "80",
     stroke: "#ffffff",
     strokeWidth: 2,
     perfectDrawEnabled: !1,
     hitStrokeWidth: 0
-  }, O = () => {
+  }, P = () => {
     switch (r) {
       case "circle": {
-        const M = Math.min(e.width, e.height) / 2;
-        return /* @__PURE__ */ a(
-          Dt,
+        const F = Math.min(e.width, e.height) / 2;
+        return /* @__PURE__ */ c(
+          Nt,
           {
             x: e.width / 2,
             y: e.height / 2,
-            radius: M,
-            ...W
+            radius: F,
+            ...T
           }
         );
       }
       case "triangle": {
-        const M = Math.min(e.width, e.height) / 2;
-        return /* @__PURE__ */ a(
-          ae,
+        const F = Math.min(e.width, e.height) / 2;
+        return /* @__PURE__ */ c(
+          ce,
           {
             x: e.width / 2,
             y: e.height / 2,
             sides: 3,
-            radius: M,
+            radius: F,
             rotation: -90,
-            ...W
+            ...T
           }
         );
       }
       case "arrow": {
-        const M = e.width / 24, P = e.height / 24, A = `M${9 * M},${18 * P} v${-8 * P} H${5 * M} l${7 * M},${-7 * P} l${7 * M},${7 * P} h${-4 * M} v${8 * P} Z`;
-        return /* @__PURE__ */ a(se, { data: A, ...W });
+        const F = e.width / 24, W = e.height / 24, Q = `M${9 * F},${18 * W} v${-8 * W} H${5 * F} l${7 * F},${-7 * W} l${7 * F},${7 * W} h${-4 * F} v${8 * W} Z`;
+        return /* @__PURE__ */ c(se, { data: Q, ...T });
       }
       default:
-        return /* @__PURE__ */ a(
-          Nt,
+        return /* @__PURE__ */ c(
+          Tt,
           {
             width: e.width,
             height: e.height,
             cornerRadius: 10,
-            ...W
+            ...T
           }
         );
     }
@@ -235,16 +238,16 @@ const Tt = J(({ stage: n, stageColor: u }) => {
       y: n.position.y,
       rotation: e.rotation || 0,
       children: [
-        O(),
-        S && /* @__PURE__ */ a(
-          Rt,
+        P(),
+        S && /* @__PURE__ */ c(
+          Dt,
           {
             text: e.label,
-            x: X,
+            x: v,
             y: w,
-            width: m,
+            width: E,
             height: e.height - w * 2,
-            fontSize: v,
+            fontSize: b,
             fontStyle: "bold",
             fill: "#ffffff",
             align: "center",
@@ -257,9 +260,9 @@ const Tt = J(({ stage: n, stageColor: u }) => {
     }
   );
 });
-Tt.displayName = "ViewerStage";
-const Xt = J(({ text: n }) => /* @__PURE__ */ a(
-  Rt,
+Xt.displayName = "ViewerStage";
+const Yt = J(({ text: n }) => /* @__PURE__ */ c(
+  Dt,
   {
     x: n.position.x,
     y: n.position.y,
@@ -272,8 +275,8 @@ const Xt = J(({ text: n }) => /* @__PURE__ */ a(
     listening: !1
   }
 ));
-Xt.displayName = "ViewerText";
-const Yt = J(
+Yt.displayName = "ViewerText";
+const Lt = J(
   ({
     floors: n,
     currentFloorId: u,
@@ -284,9 +287,9 @@ const Yt = J(
     className: f
   }) => {
     const x = z(
-      () => [...n].sort((d, I) => d.order - I.order),
+      () => [...n].sort((h, I) => h.order - I.order),
       [n]
-    ), c = {
+    ), a = {
       position: "absolute",
       display: "flex",
       alignItems: "center",
@@ -314,36 +317,36 @@ const Yt = J(
       transition: "all 0.2s ease",
       minHeight: "44px",
       touchAction: "manipulation"
-    }, b = {
+    }, m = {
       ...p,
       backgroundColor: "#3A7DE5",
       borderColor: "#3A7DE5"
     };
-    return /* @__PURE__ */ k("div", { className: f, style: c, children: [
-      r && /* @__PURE__ */ a(
+    return /* @__PURE__ */ k("div", { className: f, style: a, children: [
+      r && /* @__PURE__ */ c(
         "button",
         {
           type: "button",
           onClick: () => e(null),
-          style: u === null ? b : p,
+          style: u === null ? m : p,
           children: S
         }
       ),
-      x.map((d) => /* @__PURE__ */ a(
+      x.map((h) => /* @__PURE__ */ c(
         "button",
         {
           type: "button",
-          onClick: () => e(d.id),
-          style: u === d.id ? b : p,
-          children: d.name
+          onClick: () => e(h.id),
+          style: u === h.id ? m : p,
+          children: h.name
         },
-        d.id
+        h.id
       ))
     ] });
   }
 );
-Yt.displayName = "FloorSelectorBar";
-const Lt = J(
+Lt.displayName = "FloorSelectorBar";
+const $t = J(
   ({ scale: n, minScale: u, maxScale: e, fitScale: r, onZoomIn: S, onZoomOut: y, onFitToScreen: f, position: x, className: g }) => {
     const p = {
       position: "absolute",
@@ -361,7 +364,7 @@ const Lt = J(
         "bottom-left": { bottom: 0, left: 0 },
         "bottom-right": { bottom: 0, right: 0 }
       }[x]
-    }, b = {
+    }, m = {
       width: "44px",
       height: "44px",
       minWidth: "44px",
@@ -378,43 +381,43 @@ const Lt = J(
       justifyContent: "center",
       transition: "all 0.2s ease",
       touchAction: "manipulation"
-    }, d = {
-      ...b,
+    }, h = {
+      ...m,
       opacity: 0.4,
       cursor: "not-allowed"
-    }, I = n < e, v = n > u, w = Math.abs(n - r) < 0.01;
+    }, I = n < e, b = n > u, w = Math.abs(n - r) < 0.01;
     return /* @__PURE__ */ k("div", { className: g, style: p, children: [
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ c(
         "button",
         {
           type: "button",
           onClick: S,
           disabled: !I,
-          style: I ? b : d,
+          style: I ? m : h,
           title: "Zoom In",
           "aria-label": "Zoom In",
           children: "+"
         }
       ),
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ c(
         "button",
         {
           type: "button",
           onClick: f,
           disabled: w,
-          style: w ? d : b,
+          style: w ? h : m,
           title: "Fit to Screen",
           "aria-label": "Fit to Screen",
           children: "⤢"
         }
       ),
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ c(
         "button",
         {
           type: "button",
           onClick: y,
-          disabled: !v,
-          style: v ? b : d,
+          disabled: !b,
+          style: b ? m : h,
           title: "Zoom Out",
           "aria-label": "Zoom Out",
           children: "−"
@@ -423,8 +426,8 @@ const Lt = J(
     ] });
   }
 );
-Lt.displayName = "ZoomControls";
-const $t = J(
+$t.displayName = "ZoomControls";
+const At = J(
   ({ visible: n, x: u, y: e, seat: r, currency: S, state: y }) => {
     if (!n || !r) return null;
     const f = r.seatNumber || (r.rowLabel && r.columnLabel ? `${r.rowLabel}-${r.columnLabel}` : "N/A"), x = {
@@ -442,45 +445,45 @@ const $t = J(
       fontSize: "13px",
       boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
       minWidth: "140px"
-    }, c = {
+    }, a = {
       color: "#9ca3af",
       marginRight: "4px"
     }, p = {
       fontWeight: 600
-    }, b = {
+    }, m = {
       color: "#4ade80",
       fontWeight: 600
-    }, d = {
+    }, h = {
       fontSize: "11px",
       color: "#6b7280",
       textTransform: "capitalize",
       marginTop: "4px"
     };
-    return /* @__PURE__ */ a("div", { style: x, children: /* @__PURE__ */ k("div", { style: g, children: [
+    return /* @__PURE__ */ c("div", { style: x, children: /* @__PURE__ */ k("div", { style: g, children: [
       r.sectionName && /* @__PURE__ */ k("div", { style: { marginBottom: "4px" }, children: [
-        /* @__PURE__ */ a("span", { style: c, children: "Section:" }),
-        /* @__PURE__ */ a("span", { style: { ...p, color: "#3b82f6" }, children: r.sectionName })
+        /* @__PURE__ */ c("span", { style: a, children: "Section:" }),
+        /* @__PURE__ */ c("span", { style: { ...p, color: "#3b82f6" }, children: r.sectionName })
       ] }),
       /* @__PURE__ */ k("div", { style: { marginBottom: "4px" }, children: [
-        /* @__PURE__ */ a("span", { style: c, children: "Seat:" }),
-        /* @__PURE__ */ a("span", { style: p, children: f })
+        /* @__PURE__ */ c("span", { style: a, children: "Seat:" }),
+        /* @__PURE__ */ c("span", { style: p, children: f })
       ] }),
       r.price !== void 0 && r.price > 0 && y === "available" && /* @__PURE__ */ k("div", { style: { marginBottom: "4px" }, children: [
-        /* @__PURE__ */ a("span", { style: c, children: "Price:" }),
-        /* @__PURE__ */ k("span", { style: b, children: [
+        /* @__PURE__ */ c("span", { style: a, children: "Price:" }),
+        /* @__PURE__ */ k("span", { style: m, children: [
           S,
           " ",
           r.price.toFixed(2)
         ] })
       ] }),
-      /* @__PURE__ */ k("div", { style: d, children: [
+      /* @__PURE__ */ k("div", { style: h, children: [
         "Status: ",
         y
       ] })
     ] }) });
   }
 );
-$t.displayName = "SeatTooltip";
+At.displayName = "SeatTooltip";
 const pe = ({
   config: n,
   configUrl: u,
@@ -492,84 +495,84 @@ const pe = ({
   unavailableSeats: f = [],
   selectedSeats: x,
   myReservedSeats: g = [],
-  onSeatSelect: c,
+  onSeatSelect: a,
   onSeatDeselect: p,
-  onSelectionChange: b,
-  colorOverrides: d,
+  onSelectionChange: m,
+  colorOverrides: h,
   showTooltip: I = !0,
-  zoomEnabled: v = !0,
+  zoomEnabled: b = !0,
   className: w = "",
-  onConfigLoad: m,
-  onError: X,
+  onConfigLoad: E,
+  onError: v,
   // Floor selector props
-  showFloorSelector: W,
-  floorSelectorPosition: O = "top-left",
-  floorSelectorClassName: M,
-  showAllFloorsOption: P = !0,
-  allFloorsLabel: A = "All",
-  fitToView: Q = !0,
+  showFloorSelector: T,
+  floorSelectorPosition: P = "top-left",
+  floorSelectorClassName: F,
+  showAllFloorsOption: W = !0,
+  allFloorsLabel: Q = "All",
+  fitToView: O = !0,
   fitPadding: j = 40,
   // Zoom controls
-  showZoomControls: st = !0,
+  showZoomControls: ct = !0,
   zoomControlsPosition: at = "bottom-right",
-  zoomControlsClassName: ct,
-  minZoom: lt,
+  zoomControlsClassName: lt,
+  minZoom: tt,
   maxZoom: Y = 3,
   zoomStep: V = 0.25,
   // Touch gestures
-  touchEnabled: Et = !0
+  touchEnabled: ht = !0
 }) => {
-  const St = y !== void 0 ? y : S, pt = K(null), wt = K(null), C = le(wt), [Z, Ct] = E(
+  const wt = y !== void 0 ? y : S, yt = K(null), Ct = K(null), C = le(Ct), [Z, Mt] = A(
     /* @__PURE__ */ new Set()
-  ), [R, tt] = E(1), [T, _] = E({ x: 0, y: 0 }), [Pt, zt] = E(null), [Mt, Bt] = E(1), ht = K({ width: 0, height: 0 }), [et, It] = E({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: At, loading: Ht, error: nt } = ce(u), s = n || At, yt = e !== void 0, D = yt ? e || null : Pt, dt = x !== void 0, Ot = N(
+  ), [R, et] = A(1), [X, _] = A({ x: 0, y: 0 }), [Et, Pt] = A(null), [It, zt] = A(1), dt = K({ width: 0, height: 0 }), [nt, Ft] = A({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: Bt, loading: Ht, error: it } = ae(u), s = n || Bt, xt = e !== void 0, D = xt ? e || null : Et, ut = x !== void 0, Ot = N(
     (t) => {
-      yt || zt(t), r?.(t);
+      xt || Pt(t), r?.(t);
     },
-    [yt, r]
-  ), xt = s?.floors || [], jt = W !== void 0 ? W : xt.length > 1, ut = z(
-    () => s ? { ...s.colors, ...d } : { ...de, ...d },
-    [s, d]
+    [xt, r]
+  ), mt = s?.floors || [], jt = T !== void 0 ? T : mt.length > 1, ft = z(
+    () => s ? { ...s.colors, ...h } : { ...de, ...h },
+    [s, h]
   ), q = z(() => {
     if (!s) return [];
     let t = s.seats.filter((i) => i.state !== "hidden");
     return D && (t = t.filter(
       (i) => i.floorId === D || !i.floorId && D === "floor_default"
     )), t;
-  }, [s, D]), ft = z(() => s?.stages ? D ? s.stages.filter(
+  }, [s, D]), gt = z(() => s?.stages ? D ? s.stages.filter(
     (t) => t.floorId === D || !t.floorId && D === "floor_default"
-  ) : s.stages : [], [s, D]), gt = z(() => s?.texts ? D ? s.texts.filter(
+  ) : s.stages : [], [s, D]), pt = z(() => s?.texts ? D ? s.texts.filter(
     (t) => t.floorId === D || !t.floorId && D === "floor_default"
   ) : s.texts : [], [s, D]), L = z(() => {
-    if (!s || q.length === 0 && ft.length === 0 && gt.length === 0)
+    if (!s || q.length === 0 && gt.length === 0 && pt.length === 0)
       return null;
-    let t = 1 / 0, i = 1 / 0, l = -1 / 0, h = -1 / 0;
+    let t = 1 / 0, i = 1 / 0, l = -1 / 0, d = -1 / 0;
     return q.forEach((o) => {
-      const F = (o.size || 24) / 2;
-      t = Math.min(t, o.position.x - F), i = Math.min(i, o.position.y - F), l = Math.max(l, o.position.x + F), h = Math.max(h, o.position.y + F);
-    }), ft.forEach((o) => {
-      t = Math.min(t, o.position.x), i = Math.min(i, o.position.y), l = Math.max(l, o.position.x + (o.config?.width || 200)), h = Math.max(h, o.position.y + (o.config?.height || 100));
+      const M = (o.size || 24) / 2;
+      t = Math.min(t, o.position.x - M), i = Math.min(i, o.position.y - M), l = Math.max(l, o.position.x + M), d = Math.max(d, o.position.y + M);
     }), gt.forEach((o) => {
-      const F = o.config.scaleX || 1, $ = o.config.scaleY || 1, U = o.config.text.length * o.config.fontSize * 0.6 * F, rt = o.config.fontSize * $;
-      t = Math.min(t, o.position.x), i = Math.min(i, o.position.y), l = Math.max(l, o.position.x + U), h = Math.max(h, o.position.y + rt);
-    }), { minX: t, minY: i, maxX: l, maxY: h, width: l - t, height: h - i };
-  }, [s, q, ft, gt]), bt = N(() => {
+      t = Math.min(t, o.position.x), i = Math.min(i, o.position.y), l = Math.max(l, o.position.x + (o.config?.width || 200)), d = Math.max(d, o.position.y + (o.config?.height || 100));
+    }), pt.forEach((o) => {
+      const M = o.config.scaleX || 1, $ = o.config.scaleY || 1, U = o.config.text.length * o.config.fontSize * 0.6 * M, st = o.config.fontSize * $;
+      t = Math.min(t, o.position.x), i = Math.min(i, o.position.y), l = Math.max(l, o.position.x + U), d = Math.max(d, o.position.y + st);
+    }), { minX: t, minY: i, maxX: l, maxY: d, width: l - t, height: d - i };
+  }, [s, q, gt, pt]), bt = N(() => {
     if (!s || !L || C.width === 0 || C.height === 0) return;
-    const t = C.width, i = C.height, l = t - j * 2, h = i - j * 2, o = l / L.width, F = h / L.height, $ = Math.min(o, F, Y), U = L.minX + L.width / 2, rt = L.minY + L.height / 2, te = t / 2, ee = i / 2, ne = te - U * $, ie = ee - rt * $;
-    tt($), _({ x: ne, y: ie }), Bt($);
+    const t = C.width, i = C.height, l = t - j * 2, d = i - j * 2, o = l / L.width, M = d / L.height, $ = Math.min(o, M, Y), U = L.minX + L.width / 2, st = L.minY + L.height / 2, te = t / 2, ee = i / 2, ne = te - U * $, ie = ee - st * $;
+    et($), _({ x: ne, y: ie }), zt($);
   }, [s, L, C, j, Y]);
   B(() => {
-    if (!Q || !s || !L || C.width === 0 || C.height === 0) return;
+    if (!O || !s || !L || C.width === 0 || C.height === 0) return;
     const t = Math.abs(
-      C.width - ht.current.width
+      C.width - dt.current.width
     ), i = Math.abs(
-      C.height - ht.current.height
+      C.height - dt.current.height
     );
-    !(ht.current.width === 0) && t < 10 && i < 10 || (ht.current = C, bt());
-  }, [Q, s, L, C, D, bt]);
+    !(dt.current.width === 0) && t < 10 && i < 10 || (dt.current = C, bt());
+  }, [O, s, L, C, D, bt]);
   const H = z(() => {
-    const t = new Set(St), i = new Set(f), l = new Set(g);
+    const t = new Set(wt), i = new Set(f), l = new Set(g);
     return { reserved: t, unavailable: i, myReserved: l };
-  }, [St, f, g]), mt = z(() => x ? new Set(x) : null, [x]), it = N(
+  }, [wt, f, g]), vt = z(() => x ? new Set(x) : null, [x]), ot = N(
     (t) => {
       const i = t.id, l = t.seatNumber || "";
       return H.unavailable.has(i) || H.unavailable.has(l) ? "unavailable" : H.reserved.has(i) || H.reserved.has(l) ? "reserved" : H.myReserved.has(i) || H.myReserved.has(l) || Z.has(i) ? "selected" : t.state;
@@ -577,76 +580,76 @@ const pe = ({
     [H, Z]
   );
   B(() => {
-    s && m && m(s);
-  }, [s, m]), B(() => {
-    nt && X && X(nt);
-  }, [nt, X]), B(() => {
-    dt && mt && Ct(mt);
-  }, [dt, mt]);
+    s && E && E(s);
+  }, [s, E]), B(() => {
+    it && v && v(it);
+  }, [it, v]), B(() => {
+    ut && vt && Mt(vt);
+  }, [ut, vt]);
   const Vt = N(
     (t) => {
-      const i = it(t);
+      const i = ot(t);
       if (i !== "available" && i !== "selected")
         return;
       const l = Z.has(t.id);
-      dt || Ct((h) => {
-        const o = new Set(h);
+      ut || Mt((d) => {
+        const o = new Set(d);
         return l ? o.delete(t.id) : o.add(t.id), o;
-      }), l ? p?.(t) : (c?.(t), c || console.log("Seat selected:", t));
+      }), l ? p?.(t) : (a?.(t), a || console.log("Seat selected:", t));
     },
     [
-      it,
+      ot,
       Z,
-      dt,
-      c,
+      ut,
+      a,
       p
     ]
-  ), ot = z(() => s ? q.filter((t) => Z.has(t.id)) : [], [s, q, Z]);
+  ), rt = z(() => s ? q.filter((t) => Z.has(t.id)) : [], [s, q, Z]);
   B(() => {
-    b?.(ot);
-  }, [ot, b]);
-  const G = lt !== void 0 ? lt : Mt * 0.5, Zt = N(() => {
-    if (!v) return;
+    m?.(rt);
+  }, [rt, m]);
+  const G = tt !== void 0 ? tt : It * 0.5, Zt = N(() => {
+    if (!b) return;
     const t = Math.min(R + V, Y);
     if (t !== R) {
-      const i = C.width || s?.canvas.width || 800, l = C.height || s?.canvas.height || 600, h = i / 2, o = l / 2, F = {
-        x: (h - T.x) / R,
-        y: (o - T.y) / R
+      const i = C.width || s?.canvas.width || 800, l = C.height || s?.canvas.height || 600, d = i / 2, o = l / 2, M = {
+        x: (d - X.x) / R,
+        y: (o - X.y) / R
       };
-      tt(t), _({
-        x: h - F.x * t,
-        y: o - F.y * t
+      et(t), _({
+        x: d - M.x * t,
+        y: o - M.y * t
       });
     }
   }, [
-    v,
+    b,
     R,
     V,
     Y,
     C,
     s,
-    T
+    X
   ]), _t = N(() => {
-    if (!v) return;
+    if (!b) return;
     const t = Math.max(R - V, G);
     if (t !== R) {
-      const i = C.width || s?.canvas.width || 800, l = C.height || s?.canvas.height || 600, h = i / 2, o = l / 2, F = {
-        x: (h - T.x) / R,
-        y: (o - T.y) / R
+      const i = C.width || s?.canvas.width || 800, l = C.height || s?.canvas.height || 600, d = i / 2, o = l / 2, M = {
+        x: (d - X.x) / R,
+        y: (o - X.y) / R
       };
-      tt(t), _({
-        x: h - F.x * t,
-        y: o - F.y * t
+      et(t), _({
+        x: d - M.x * t,
+        y: o - M.y * t
       });
     }
   }, [
-    v,
+    b,
     R,
     V,
     G,
     C,
     s,
-    T
+    X
   ]), qt = N((t) => {
     _({
       x: t.target.x(),
@@ -654,31 +657,31 @@ const pe = ({
     });
   }, []), Gt = N(
     (t) => {
-      if (!v) return;
+      if (!b) return;
       t.evt.preventDefault();
-      const i = pt.current;
+      const i = yt.current;
       if (!i) return;
-      const l = i.scaleX(), h = i.getPointerPosition();
-      if (!h) return;
-      const o = 1.1, F = t.evt.deltaY > 0 ? l / o : l * o, $ = Math.min(Math.max(F, G), Y), U = {
-        x: (h.x - T.x) / l,
-        y: (h.y - T.y) / l
-      }, rt = {
-        x: h.x - U.x * $,
-        y: h.y - U.y * $
+      const l = i.scaleX(), d = i.getPointerPosition();
+      if (!d) return;
+      const o = 1.1, M = t.evt.deltaY > 0 ? l / o : l * o, $ = Math.min(Math.max(M, G), Y), U = {
+        x: (d.x - X.x) / l,
+        y: (d.y - X.y) / l
+      }, st = {
+        x: d.x - U.x * $,
+        y: d.y - U.y * $
       };
-      tt($), _(rt);
+      et($), _(st);
     },
-    [v, T, G, Y]
+    [b, X, G, Y]
   );
-  he(pt, {
-    enabled: Et && v,
+  he(yt, {
+    enabled: ht && b,
     minScale: G,
     maxScale: Y,
     currentScale: R,
-    currentPosition: T,
+    currentPosition: X,
     onScaleChange: (t, i) => {
-      tt(t), _(i);
+      et(t), _(i);
     }
   });
   const Ut = N(
@@ -686,60 +689,60 @@ const pe = ({
       if (!I) return;
       const l = i.target.getStage();
       if (!l) return;
-      const h = l.getPointerPosition();
-      if (!h) return;
+      const d = l.getPointerPosition();
+      if (!d) return;
       const o = l.container().getBoundingClientRect();
-      It({
+      Ft({
         visible: !0,
-        x: o.left + h.x,
-        y: o.top + h.y,
+        x: o.left + d.x,
+        y: o.top + d.y,
         seat: t,
-        state: it(t)
+        state: ot(t)
       });
     },
-    [I, it]
+    [I, ot]
   ), Kt = N(() => {
-    It((t) => ({ ...t, visible: !1 }));
+    Ft((t) => ({ ...t, visible: !1 }));
   }, []);
   if (Ht)
-    return /* @__PURE__ */ a("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ a("p", { children: "Loading seat map..." }) });
-  if (nt)
-    return /* @__PURE__ */ a("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ k("p", { className: "text-red-500", children: [
+    return /* @__PURE__ */ c("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ c("p", { children: "Loading seat map..." }) });
+  if (it)
+    return /* @__PURE__ */ c("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ k("p", { className: "text-red-500", children: [
       "Error loading seat map: ",
-      nt.message
+      it.message
     ] }) });
   if (!s)
-    return /* @__PURE__ */ a("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ a("p", { children: "No configuration provided" }) });
+    return /* @__PURE__ */ c("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ c("p", { children: "No configuration provided" }) });
   const Jt = C.width || s.canvas.width, Qt = C.height || s.canvas.height;
   return /* @__PURE__ */ k(
     "div",
     {
-      ref: wt,
+      ref: Ct,
       className: `relative ${w}`,
-      style: { width: "100%", height: "100%" },
+      style: { width: "100%", height: "100%", touchAction: ht && b ? "none" : "auto" },
       children: [
-        jt && xt.length > 0 && /* @__PURE__ */ a(
-          Yt,
+        jt && mt.length > 0 && /* @__PURE__ */ c(
+          Lt,
           {
-            floors: xt,
+            floors: mt,
             currentFloorId: D,
             onFloorChange: Ot,
-            showAllOption: P,
-            allLabel: A,
-            position: O,
-            className: M
+            showAllOption: W,
+            allLabel: Q,
+            position: P,
+            className: F
           }
         ),
         /* @__PURE__ */ k(
           oe,
           {
-            ref: pt,
+            ref: yt,
             width: Jt,
             height: Qt,
             scaleX: R,
             scaleY: R,
-            x: T.x,
-            y: T.y,
+            x: X.x,
+            y: X.y,
             draggable: !0,
             onDragEnd: qt,
             onWheel: Gt,
@@ -748,21 +751,21 @@ const pe = ({
               cursor: "grab"
             },
             children: [
-              /* @__PURE__ */ a(vt, { listening: !1, children: ft.map((t) => /* @__PURE__ */ a(
-                Tt,
+              /* @__PURE__ */ c(St, { listening: !1, children: gt.map((t) => /* @__PURE__ */ c(
+                Xt,
                 {
                   stage: t,
-                  stageColor: ut.stageColor
+                  stageColor: ft.stageColor
                 },
                 t.id
               )) }),
-              /* @__PURE__ */ a(vt, { listening: !1, children: gt.map((t) => /* @__PURE__ */ a(Xt, { text: t }, t.id)) }),
-              /* @__PURE__ */ a(vt, { children: q.map((t) => /* @__PURE__ */ a(
+              /* @__PURE__ */ c(St, { listening: !1, children: pt.map((t) => /* @__PURE__ */ c(Yt, { text: t }, t.id)) }),
+              /* @__PURE__ */ c(St, { children: q.map((t) => /* @__PURE__ */ c(
                 Wt,
                 {
                   seat: t,
-                  state: it(t),
-                  colors: ut,
+                  state: ot(t),
+                  colors: ft,
                   onClick: Vt,
                   onMouseEnter: Ut,
                   onMouseLeave: Kt
@@ -772,40 +775,40 @@ const pe = ({
             ]
           }
         ),
-        I && /* @__PURE__ */ a(
-          $t,
+        I && /* @__PURE__ */ c(
+          At,
           {
-            visible: et.visible,
-            x: et.x,
-            y: et.y,
-            seat: et.seat,
-            currency: ut.currency,
-            state: et.state
+            visible: nt.visible,
+            x: nt.x,
+            y: nt.y,
+            seat: nt.seat,
+            currency: ft.currency,
+            state: nt.state
           }
         ),
-        st && v && /* @__PURE__ */ a(
-          Lt,
+        ct && b && /* @__PURE__ */ c(
+          $t,
           {
             scale: R,
             minScale: G,
             maxScale: Y,
-            fitScale: Mt,
+            fitScale: It,
             onZoomIn: Zt,
             onZoomOut: _t,
             onFitToScreen: bt,
             position: at,
-            className: ct
+            className: lt
           }
         ),
-        ot.length > 0 && /* @__PURE__ */ k("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
+        rt.length > 0 && /* @__PURE__ */ k("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
           /* @__PURE__ */ k("h3", { className: "font-semibold mb-2", children: [
             "Selected Seats (",
-            ot.length,
+            rt.length,
             ")"
           ] }),
-          /* @__PURE__ */ a("div", { className: "max-h-48 overflow-y-auto space-y-1", children: ot.map((t) => /* @__PURE__ */ k("div", { className: "text-sm", children: [
+          /* @__PURE__ */ c("div", { className: "max-h-48 overflow-y-auto space-y-1", children: rt.map((t) => /* @__PURE__ */ k("div", { className: "text-sm", children: [
             t.seatNumber,
-            t.price && ` - ${ut.currency} ${t.price.toFixed(2)}`
+            t.price && ` - ${ft.currency} ${t.price.toFixed(2)}`
           ] }, t.id)) })
         ] })
       ]
@@ -815,11 +818,11 @@ const pe = ({
 export {
   de as DEFAULT_COLORS,
   pe as SeatMapViewer,
-  be as clearFirebaseInstance,
-  me as getFirebaseDatabase,
+  me as clearFirebaseInstance,
+  be as getFirebaseDatabase,
   ve as initializeFirebaseForViewer,
   Se as isFirebaseInitialized,
-  ce as useConfigFetcher,
+  ae as useConfigFetcher,
   le as useContainerSize,
   we as useFirebaseConfig,
   Ce as useFirebaseSeatStates,

package/dist/types/index.d.ts

@@ -26,6 +26,7 @@ export interface SerializedSeat {
     price?: number;
     floorId?: string;
     size?: number;
+    rotation?: number;
 }
 export interface SectionConfig {
     rows?: number;

package/package.json

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