@zonetrix/viewer 2.8.0 → 2.8.1

package/dist/index.js

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

package/dist/index.mjs

@@ -2,20 +2,20 @@ import { jsx as h, jsxs as w } from "react/jsx-runtime";
 import { useState as E, useEffect as T, useRef as F, useCallback as N, useMemo as Y, memo as Z } from "react";
 import { Stage as te, Layer as bt, Group as ee, Rect as Ct, Text as vt, Circle as ne } from "react-konva";
 function oe(e) {
-  const [i, a] = E(null), [n, x] = E(!1), [m, u] = E(null), v = async () => {
+  const [i, a] = E(null), [n, m] = E(!1), [y, u] = E(null), v = async () => {
     if (e) {
-      x(!0), u(null);
+      m(!0), u(null);
       try {
-        const y = await fetch(e);
-        if (!y.ok)
-          throw new Error(`Failed to fetch config: ${y.statusText}`);
-        const s = await y.json();
+        const x = await fetch(e);
+        if (!x.ok)
+          throw new Error(`Failed to fetch config: ${x.statusText}`);
+        const s = await x.json();
         a(s);
-      } catch (y) {
-        const s = y instanceof Error ? y : new Error("Unknown error occurred");
+      } catch (x) {
+        const s = x instanceof Error ? x : new Error("Unknown error occurred");
         u(s), console.error("Failed to fetch seat map config:", s);
       } finally {
-        x(!1);
+        m(!1);
       }
     }
   };
@@ -24,7 +24,7 @@ function oe(e) {
   }, [e]), {
     config: i,
     loading: n,
-    error: m,
+    error: y,
     refetch: v
   };
 }
@@ -33,12 +33,12 @@ function ie(e) {
   return T(() => {
     const n = e.current;
     if (!n) return;
-    const { width: x, height: m } = n.getBoundingClientRect();
-    x > 0 && m > 0 && a({ width: x, height: m });
+    const { width: m, height: y } = n.getBoundingClientRect();
+    m > 0 && y > 0 && a({ width: m, height: y });
     const u = new ResizeObserver((v) => {
-      const y = v[0];
-      if (!y) return;
-      const { width: s, height: o } = y.contentRect;
+      const x = v[0];
+      if (!x) return;
+      const { width: s, height: o } = x.contentRect;
       s > 0 && o > 0 && a((g) => g.width === s && g.height === o ? g : { width: s, height: o });
     });
     return u.observe(n), () => {
@@ -56,17 +56,17 @@ function wt(e, i) {
   };
 }
 function re(e, i) {
-  const a = F(null), n = F(null), x = F(1);
+  const a = F(null), n = F(null), m = F(1);
   T(() => {
-    const m = e.current;
-    if (!m || !i.enabled) return;
-    const u = m.container(), v = (o) => {
+    const y = e.current;
+    if (!y || !i.enabled) return;
+    const u = y.container(), v = (o) => {
       if (o.touches.length === 2) {
         o.preventDefault();
         const g = { x: o.touches[0].clientX, y: o.touches[0].clientY }, l = { x: o.touches[1].clientX, y: o.touches[1].clientY };
-        a.current = St(g, l), n.current = wt(g, l), x.current = i.currentScale;
+        a.current = St(g, l), n.current = wt(g, l), m.current = i.currentScale;
       }
-    }, y = (o) => {
+    }, x = (o) => {
       if (o.touches.length !== 2) return;
       o.preventDefault();
       const g = { x: o.touches[0].clientX, y: o.touches[0].clientY }, l = { x: o.touches[1].clientX, y: o.touches[1].clientY }, k = St(g, l), C = wt(g, l);
@@ -86,8 +86,8 @@ function re(e, i) {
     }, s = (o) => {
       o.touches.length < 2 && (a.current = null, n.current = null);
     };
-    return u.addEventListener("touchstart", v, { passive: !1 }), u.addEventListener("touchmove", y, { passive: !1 }), u.addEventListener("touchend", s), () => {
-      u.removeEventListener("touchstart", v), u.removeEventListener("touchmove", y), u.removeEventListener("touchend", s);
+    return u.addEventListener("touchstart", v, { passive: !1 }), u.addEventListener("touchmove", x, { passive: !1 }), u.addEventListener("touchend", s), () => {
+      u.removeEventListener("touchstart", v), u.removeEventListener("touchmove", x), u.removeEventListener("touchend", s);
     };
   }, [e, i]);
 }
@@ -101,8 +101,8 @@ const se = {
   seatHidden: "#4a4a4a",
   gridLines: "#404040",
   currency: "KD"
-}, Mt = Z(({ seat: e, state: i, colors: a, onClick: n, onMouseEnter: x, onMouseLeave: m }) => {
-  const y = {
+}, Mt = Z(({ seat: e, state: i, colors: a, onClick: n, onMouseEnter: m, onMouseLeave: y }) => {
+  const x = {
     available: a.seatAvailable,
     reserved: a.seatReserved,
     selected: a.seatSelected,
@@ -112,17 +112,17 @@ const se = {
   }[i], s = i === "available" || i === "selected", o = N(() => {
     s && n(e);
   }, [e, n, s]), g = N((C) => {
-    x(e, C);
+    m(e, C);
     const D = C.target.getStage();
     D && s && (D.container().style.cursor = "pointer");
-  }, [e, x, s]), l = N((C) => {
-    m();
+  }, [e, m, s]), l = N((C) => {
+    y();
     const D = C.target.getStage();
     D && (D.container().style.cursor = "grab");
-  }, [m]), k = {
+  }, [y]), k = {
     x: e.position.x,
     y: e.position.y,
-    fill: y,
+    fill: x,
     stroke: "#ffffff",
     strokeWidth: 1,
     onClick: o,
@@ -150,7 +150,7 @@ const se = {
 });
 Mt.displayName = "ViewerSeat";
 const kt = Z(({ stage: e, stageColor: i }) => {
-  const a = (m) => ({
+  const a = (y) => ({
     stage: "🎭",
     table: "⬜",
     wall: "▬",
@@ -159,7 +159,7 @@ const kt = Z(({ stage: e, stageColor: i }) => {
     bar: "🍷",
     "entry-exit": "🚪",
     custom: "➕"
-  })[m || "stage"] || "🎭", n = e.config.color || i, x = a(e.config.objectType);
+  })[y || "stage"] || "🎭", n = e.config.color || i, m = a(e.config.objectType);
   return /* @__PURE__ */ w(ee, { x: e.position.x, y: e.position.y, rotation: e.config.rotation || 0, children: [
     /* @__PURE__ */ h(
       Ct,
@@ -175,7 +175,7 @@ const kt = Z(({ stage: e, stageColor: i }) => {
     /* @__PURE__ */ h(
       vt,
       {
-        text: x,
+        text: m,
         x: 0,
         y: 0,
         width: e.config.width,
@@ -209,8 +209,8 @@ const It = Z(({
   currentFloorId: i,
   onFloorChange: a,
   showAllOption: n,
-  allLabel: x,
-  position: m,
+  allLabel: m,
+  position: y,
   className: u
 }) => {
   const v = Y(
@@ -231,7 +231,7 @@ const It = Z(({
       "top-right": { top: 0, right: 0 },
       "bottom-left": { bottom: 0, left: 0 },
       "bottom-right": { bottom: 0, right: 0 }
-    }[m]
+    }[y]
   }, o = {
     padding: "10px 16px",
     fontSize: "14px",
@@ -256,7 +256,7 @@ const It = Z(({
         type: "button",
         onClick: () => a(null),
         style: i === null ? g : o,
-        children: x
+        children: m
       }
     ),
     v.map((l) => /* @__PURE__ */ h(
@@ -277,11 +277,11 @@ const Nt = Z(({
   minScale: i,
   maxScale: a,
   onZoomIn: n,
-  onZoomOut: x,
-  position: m,
+  onZoomOut: m,
+  position: y,
   className: u
 }) => {
-  const y = {
+  const x = {
     position: "absolute",
     display: "flex",
     flexDirection: "column",
@@ -296,7 +296,7 @@ const Nt = Z(({
       "top-right": { top: 0, right: 0 },
       "bottom-left": { bottom: 0, left: 0 },
       "bottom-right": { bottom: 0, right: 0 }
-    }[m]
+    }[y]
   }, s = {
     width: "44px",
     height: "44px",
@@ -319,7 +319,7 @@ const Nt = Z(({
     opacity: 0.4,
     cursor: "not-allowed"
   }, g = e < a, l = e > i;
-  return /* @__PURE__ */ w("div", { className: u, style: y, children: [
+  return /* @__PURE__ */ w("div", { className: u, style: x, children: [
     /* @__PURE__ */ h(
       "button",
       {
@@ -335,7 +335,7 @@ const Nt = Z(({
       "button",
       {
         type: "button",
-        onClick: x,
+        onClick: m,
         disabled: !l,
         style: l ? s : o,
         title: "Zoom Out",
@@ -350,8 +350,8 @@ const Dt = Z(({
   x: i,
   y: a,
   seat: n,
-  currency: x,
-  state: m
+  currency: m,
+  state: y
 }) => {
   if (!e || !n) return null;
   const u = n.seatNumber || (n.rowLabel && n.columnLabel ? `${n.rowLabel}-${n.columnLabel}` : "N/A"), v = {
@@ -360,7 +360,7 @@ const Dt = Z(({
     top: `${a + 15}px`,
     zIndex: 1e3,
     pointerEvents: "none"
-  }, y = {
+  }, x = {
     backgroundColor: "rgba(26, 26, 26, 0.95)",
     color: "#fff",
     border: "1px solid #444",
@@ -383,7 +383,7 @@ const Dt = Z(({
     textTransform: "capitalize",
     marginTop: "4px"
   };
-  return /* @__PURE__ */ h("div", { style: v, children: /* @__PURE__ */ w("div", { style: y, children: [
+  return /* @__PURE__ */ h("div", { style: v, children: /* @__PURE__ */ w("div", { style: x, children: [
     n.sectionName && /* @__PURE__ */ w("div", { style: { marginBottom: "4px" }, children: [
       /* @__PURE__ */ h("span", { style: s, children: "Section:" }),
       /* @__PURE__ */ h("span", { style: { ...o, color: "#3b82f6" }, children: n.sectionName })
@@ -392,17 +392,17 @@ const Dt = Z(({
       /* @__PURE__ */ h("span", { style: s, children: "Seat:" }),
       /* @__PURE__ */ h("span", { style: o, children: u })
     ] }),
-    n.price !== void 0 && n.price > 0 && /* @__PURE__ */ w("div", { style: { marginBottom: "4px" }, children: [
+    n.price !== void 0 && n.price > 0 && y === "available" && /* @__PURE__ */ w("div", { style: { marginBottom: "4px" }, children: [
       /* @__PURE__ */ h("span", { style: s, children: "Price:" }),
       /* @__PURE__ */ w("span", { style: g, children: [
-        x,
+        m,
         " ",
         n.price.toFixed(2)
       ] })
     ] }),
     /* @__PURE__ */ w("div", { style: l, children: [
       "Status: ",
-      m
+      y
     ] })
   ] }) });
 });
@@ -412,11 +412,11 @@ const he = ({
   configUrl: i,
   floorId: a,
   onFloorChange: n,
-  reservedSeats: x = [],
-  unavailableSeats: m = [],
+  reservedSeats: m = [],
+  unavailableSeats: y = [],
   selectedSeats: u,
   onSeatSelect: v,
-  onSeatDeselect: y,
+  onSeatDeselect: x,
   onSelectionChange: s,
   colorOverrides: o,
   showTooltip: g = !0,
@@ -475,9 +475,9 @@ const he = ({
     H(ct), W({ x: Jt, y: Qt }), Tt(ct);
   }, [z, c, X, $, L, S, R]);
   const _ = Y(() => {
-    const t = new Set(x), r = new Set(m);
+    const t = new Set(m), r = new Set(y);
     return { reserved: t, unavailable: r };
-  }, [x, m]), ft = Y(() => u ? new Set(u) : null, [u]), q = N((t) => {
+  }, [m, y]), ft = Y(() => u ? new Set(u) : null, [u]), q = N((t) => {
     const r = t.id, f = t.seatNumber || "";
     return _.unavailable.has(r) || _.unavailable.has(f) ? "unavailable" : _.reserved.has(r) || _.reserved.has(f) ? "reserved" : j.has(r) ? "selected" : t.state;
   }, [_, j]);
@@ -496,8 +496,8 @@ const he = ({
     ot || xt((d) => {
       const p = new Set(d);
       return f ? p.delete(t.id) : p.add(t.id), p;
-    }), f ? y?.(t) : (v?.(t), v || console.log("Seat selected:", t));
-  }, [q, j, ot, v, y]), G = Y(() => c ? A.filter((t) => j.has(t.id)) : [], [A, j]);
+    }), f ? x?.(t) : (v?.(t), v || console.log("Seat selected:", t));
+  }, [q, j, ot, v, x]), G = Y(() => c ? A.filter((t) => j.has(t.id)) : [], [A, j]);
   T(() => {
     s?.(G);
   }, [G, s]);

package/package.json

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