@zonetrix/viewer 2.4.0 → 2.4.1

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("react"),k=require("react-konva");function P(i){const[h,u]=t.useState(null),[m,S]=t.useState(!1),[C,x]=t.useState(null),b=async()=>{if(i){S(!0),x(null);try{const f=await fetch(i);if(!f.ok)throw new Error(`Failed to fetch config: ${f.statusText}`);const c=await f.json();u(c)}catch(f){const c=f instanceof Error?f:new Error("Unknown error occurred");x(c),console.error("Failed to fetch seat map config:",c)}finally{S(!1)}}};return t.useEffect(()=>{b()},[i]),{config:h,loading:m,error:C,refetch:b}}const G={canvasBackground:"#1a1a1a",stageColor:"#808080",seatAvailable:"#2C2B30",seatReserved:"#FCEA00",seatSelected:"#3A7DE5",seatUnavailable:"#6b7280",seatHidden:"#4a4a4a",gridLines:"#404040",currency:"KD"},J=t.memo(({seat:i,state:h,colors:u,onClick:m})=>{const x={available:u.seatAvailable,reserved:u.seatReserved,selected:u.seatSelected,unavailable:u.seatUnavailable,hidden:u.seatHidden}[h],b=h==="available"||h==="selected",f=t.useCallback(()=>{b&&m(i)},[i,m,b]),c={x:i.position.x,y:i.position.y,fill:x,stroke:"#ffffff",strokeWidth:1,onClick:f,onTap:f};return i.shape==="circle"?o.jsx(k.Circle,{...c,radius:12}):o.jsx(k.Rect,{...c,width:24,height:24,offsetX:12,offsetY:12,cornerRadius:i.shape==="square"?0:4})});J.displayName="ViewerSeat";const Q=t.memo(({stage:i,stageColor:h})=>o.jsxs(k.Group,{x:i.position.x,y:i.position.y,children:[o.jsx(k.Rect,{width:i.config.width,height:i.config.height,fill:h+"80",stroke:"#ffffff",strokeWidth:2,cornerRadius:10}),o.jsx(k.Text,{text:i.config.label,x:0,y:0,width:i.config.width,height:i.config.height,fontSize:24,fontStyle:"bold",fill:"#ffffff",align:"center",verticalAlign:"middle"})]}));Q.displayName="ViewerStage";const ee=t.memo(({floors:i,currentFloorId:h,onFloorChange:u,showAllOption:m,allLabel:S,position:C,className:x})=>{const b=t.useMemo(()=>[...i].sort((p,E)=>p.order-E.order),[i]),c={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}}[C]},M={padding:"6px 14px",fontSize:"14px",fontWeight:500,border:"1px solid #444",borderRadius:"6px",backgroundColor:"transparent",color:"#fff",cursor:"pointer",transition:"all 0.2s ease"},y={...M,backgroundColor:"#3A7DE5",borderColor:"#3A7DE5"};return o.jsxs("div",{className:x,style:c,children:[m&&o.jsx("button",{type:"button",onClick:()=>u(null),style:h===null?y:M,children:S}),b.map(p=>o.jsx("button",{type:"button",onClick:()=>u(p.id),style:h===p.id?y:M,children:p.name},p.id))]})});ee.displayName="FloorSelectorBar";const te=t.memo(({scale:i,minScale:h,maxScale:u,onZoomIn:m,onZoomOut:S,position:C,className:x})=>{const f={position:"absolute",display:"flex",flexDirection:"column",gap:"4px",padding:"8px",backgroundColor:"rgba(26, 26, 26, 0.95)",borderRadius:"8px",margin:"12px",zIndex:10,...{"top-left":{top:0,left:0},"top-right":{top:0,right:0},"bottom-left":{bottom:0,left:0},"bottom-right":{bottom:0,right:0}}[C]},c={width:"36px",height:"36px",fontSize:"20px",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"},M={...c,opacity:.4,cursor:"not-allowed"},y=i<u,p=i>h;return o.jsxs("div",{className:x,style:f,children:[o.jsx("button",{type:"button",onClick:m,disabled:!y,style:y?c:M,title:"Zoom In",children:"+"}),o.jsx("button",{type:"button",onClick:S,disabled:!p,style:p?c:M,title:"Zoom Out",children:"−"})]})});te.displayName="ZoomControls";const Ee=({config:i,configUrl:h,floorId:u,onFloorChange:m,reservedSeats:S=[],unavailableSeats:C=[],onSeatSelect:x,onSeatDeselect:b,onSelectionChange:f,colorOverrides:c,showTooltip:M=!0,zoomEnabled:y=!0,className:p="",onConfigLoad:E,onError:W,showFloorSelector:q,floorSelectorPosition:ne="top-left",floorSelectorClassName:oe,showAllFloorsOption:se=!0,allFloorsLabel:ie="All",fitToView:Y=!0,fitPadding:B=40,showZoomControls:ae=!0,zoomControlsPosition:re="bottom-right",zoomControlsClassName:le,maxZoom:F=3,zoomStep:O=.25})=>{const ce=t.useRef(null),[I,de]=t.useState(new Set),[g,H]=t.useState(1),[w,T]=t.useState({x:0,y:0}),[ue,fe]=t.useState(null),[U,K]=t.useState(!1),[he,pe]=t.useState(1),{config:ge,loading:xe,error:R}=P(h),n=i||ge,$=u!==void 0,v=$?u||null:ue,me=t.useCallback(e=>{$||fe(e),m?.(e)},[$,m]),Z=n?.floors||[],be=q!==void 0?q:Z.length>1,z=t.useMemo(()=>n?{...n.colors,...c}:{...G,...c},[n,c]),N=t.useMemo(()=>{if(!n)return[];let e=n.seats.filter(s=>s.state!=="hidden");return v&&(e=e.filter(s=>s.floorId===v||!s.floorId&&v==="floor_default")),e},[n,v]),D=t.useMemo(()=>n?.stages?v?n.stages.filter(e=>e.floorId===v||!e.floorId&&v==="floor_default"):n.stages:[],[n,v]),j=t.useMemo(()=>{if(!n||N.length===0&&D.length===0)return null;const e=12;let s=1/0,r=1/0,d=-1/0,l=-1/0;return N.forEach(a=>{s=Math.min(s,a.position.x-e),r=Math.min(r,a.position.y-e),d=Math.max(d,a.position.x+e),l=Math.max(l,a.position.y+e)}),D.forEach(a=>{s=Math.min(s,a.position.x),r=Math.min(r,a.position.y),d=Math.max(d,a.position.x+(a.config?.width||200)),l=Math.max(l,a.position.y+(a.config?.height||100))}),{minX:s,minY:r,maxX:d,maxY:l,width:d-s,height:l-r}},[n,N,D]);t.useEffect(()=>{if(!Y||U||!n||!j)return;const e=n.canvas.width,s=n.canvas.height,r=e-B*2,d=s-B*2,l=r/j.width,a=d/j.height,L=Math.min(l,a,F),we=j.minX+j.width/2,je=j.minY+j.height/2,ke=e/2,Me=s/2,Ie=ke-we*L,Ne=Me-je*L;H(L),T({x:Ie,y:Ne}),pe(L),K(!0)},[Y,U,n,j,B,F]),t.useEffect(()=>{Y&&K(!1)},[v,Y]);const A=t.useMemo(()=>{const e=new Set(S),s=new Set(C);return{reserved:e,unavailable:s}},[S,C]),V=t.useCallback(e=>{const s=e.id,r=e.seatNumber||"";return A.unavailable.has(s)||A.unavailable.has(r)?"unavailable":A.reserved.has(s)||A.reserved.has(r)?"reserved":I.has(s)?"selected":e.state},[A,I]);t.useEffect(()=>{n&&E&&E(n)},[n,E]),t.useEffect(()=>{R&&W&&W(R)},[R,W]);const ye=t.useCallback(e=>{const s=V(e);if(s!=="available"&&s!=="selected")return;const r=I.has(e.id);de(d=>{const l=new Set(d);return r?l.delete(e.id):l.add(e.id),l}),r?b?.(e):(x?.(e),x||console.log("Seat selected:",e))},[V,I,x,b]),X=t.useMemo(()=>n?N.filter(e=>I.has(e.id)):[],[N,I]);t.useEffect(()=>{f?.(X)},[X,f]);const _=he,Se=t.useCallback(()=>{if(!y)return;const e=Math.min(g+O,F);if(e!==g){const s=n?.canvas.width||800,r=n?.canvas.height||600,d=s/2,l=r/2,a={x:(d-w.x)/g,y:(l-w.y)/g};H(e),T({x:d-a.x*e,y:l-a.y*e})}},[y,g,O,F,n,w]),ve=t.useCallback(()=>{if(!y)return;const e=Math.max(g-O,_);if(e!==g){const s=n?.canvas.width||800,r=n?.canvas.height||600,d=s/2,l=r/2,a={x:(d-w.x)/g,y:(l-w.y)/g};H(e),T({x:d-a.x*e,y:l-a.y*e})}},[y,g,O,_,n,w]),Ce=t.useCallback(e=>{T({x:e.target.x(),y:e.target.y()})},[]);return xe?o.jsx("div",{className:`flex items-center justify-center h-full ${p}`,children:o.jsx("p",{children:"Loading seat map..."})}):R?o.jsx("div",{className:`flex items-center justify-center h-full ${p}`,children:o.jsxs("p",{className:"text-red-500",children:["Error loading seat map: ",R.message]})}):n?o.jsxs("div",{className:`relative ${p}`,children:[be&&Z.length>0&&o.jsx(ee,{floors:Z,currentFloorId:v,onFloorChange:me,showAllOption:se,allLabel:ie,position:ne,className:oe}),o.jsxs(k.Stage,{ref:ce,width:n.canvas.width,height:n.canvas.height,scaleX:g,scaleY:g,x:w.x,y:w.y,draggable:!0,onDragEnd:Ce,style:{backgroundColor:n.canvas.backgroundColor,cursor:"grab"},children:[o.jsx(k.Layer,{listening:!1,children:D.map(e=>o.jsx(Q,{stage:e,stageColor:z.stageColor},e.id))}),o.jsx(k.Layer,{children:N.map(e=>o.jsx(J,{seat:e,state:V(e),colors:z,onClick:ye},e.id))})]}),ae&&y&&o.jsx(te,{scale:g,minScale:_,maxScale:F,onZoomIn:Se,onZoomOut:ve,position:re,className:le}),X.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 (",X.length,")"]}),o.jsx("div",{className:"max-h-48 overflow-y-auto space-y-1",children:X.map(e=>o.jsxs("div",{className:"text-sm",children:[e.seatNumber,e.price&&` - ${z.currency} ${e.price.toFixed(2)}`]},e.id))})]})]}):o.jsx("div",{className:`flex items-center justify-center h-full ${p}`,children:o.jsx("p",{children:"No configuration provided"})})};exports.DEFAULT_COLORS=G;exports.SeatMapViewer=Ee;exports.useConfigFetcher=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("react"),E=require("react-konva");function J(o){const[p,h]=n.useState(null),[a,y]=n.useState(!1),[m,S]=n.useState(null),j=async()=>{if(o){y(!0),S(null);try{const x=await fetch(o);if(!x.ok)throw new Error(`Failed to fetch config: ${x.statusText}`);const r=await x.json();h(r)}catch(x){const r=x instanceof Error?x:new Error("Unknown error occurred");S(r),console.error("Failed to fetch seat map config:",r)}finally{y(!1)}}};return n.useEffect(()=>{j()},[o]),{config:p,loading:a,error:m,refetch:j}}const Q={canvasBackground:"#1a1a1a",stageColor:"#808080",seatAvailable:"#2C2B30",seatReserved:"#FCEA00",seatSelected:"#3A7DE5",seatUnavailable:"#6b7280",seatHidden:"#4a4a4a",gridLines:"#404040",currency:"KD"},ee=n.memo(({seat:o,state:p,colors:h,onClick:a,onMouseEnter:y,onMouseLeave:m})=>{const x={available:h.seatAvailable,reserved:h.seatReserved,selected:h.seatSelected,unavailable:h.seatUnavailable,hidden:h.seatHidden}[p],r=p==="available"||p==="selected",g=n.useCallback(()=>{r&&a(o)},[o,a,r]),b=n.useCallback(k=>{y(o,k);const M=k.target.getStage();M&&r&&(M.container().style.cursor="pointer")},[o,y,r]),f=n.useCallback(k=>{m();const M=k.target.getStage();M&&(M.container().style.cursor="grab")},[m]),w={x:o.position.x,y:o.position.y,fill:x,stroke:"#ffffff",strokeWidth:1,onClick:g,onTap:g,onMouseEnter:b,onMouseLeave:f};return o.shape==="circle"?t.jsx(E.Circle,{...w,radius:12}):t.jsx(E.Rect,{...w,width:24,height:24,offsetX:12,offsetY:12,cornerRadius:o.shape==="square"?0:4})});ee.displayName="ViewerSeat";const te=n.memo(({stage:o,stageColor:p})=>t.jsxs(E.Group,{x:o.position.x,y:o.position.y,children:[t.jsx(E.Rect,{width:o.config.width,height:o.config.height,fill:p+"80",stroke:"#ffffff",strokeWidth:2,cornerRadius:10}),t.jsx(E.Text,{text:o.config.label,x:0,y:0,width:o.config.width,height:o.config.height,fontSize:24,fontStyle:"bold",fill:"#ffffff",align:"center",verticalAlign:"middle"})]}));te.displayName="ViewerStage";const ne=n.memo(({floors:o,currentFloorId:p,onFloorChange:h,showAllOption:a,allLabel:y,position:m,className:S})=>{const j=n.useMemo(()=>[...o].sort((f,w)=>f.order-w.order),[o]),r={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}}[m]},g={padding:"6px 14px",fontSize:"14px",fontWeight:500,border:"1px solid #444",borderRadius:"6px",backgroundColor:"transparent",color:"#fff",cursor:"pointer",transition:"all 0.2s ease"},b={...g,backgroundColor:"#3A7DE5",borderColor:"#3A7DE5"};return t.jsxs("div",{className:S,style:r,children:[a&&t.jsx("button",{type:"button",onClick:()=>h(null),style:p===null?b:g,children:y}),j.map(f=>t.jsx("button",{type:"button",onClick:()=>h(f.id),style:p===f.id?b:g,children:f.name},f.id))]})});ne.displayName="FloorSelectorBar";const se=n.memo(({scale:o,minScale:p,maxScale:h,onZoomIn:a,onZoomOut:y,position:m,className:S})=>{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}}[m]},r={width:"36px",height:"36px",fontSize:"20px",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"},g={...r,opacity:.4,cursor:"not-allowed"},b=o<h,f=o>p;return t.jsxs("div",{className:S,style:x,children:[t.jsx("button",{type:"button",onClick:a,disabled:!b,style:b?r:g,title:"Zoom In",children:"+"}),t.jsx("button",{type:"button",onClick:y,disabled:!f,style:f?r:g,title:"Zoom Out",children:"−"})]})});se.displayName="ZoomControls";const oe=n.memo(({visible:o,x:p,y:h,seat:a,currency:y,state:m})=>{if(!o||!a)return null;const S=a.seatNumber||(a.rowLabel&&a.columnLabel?`${a.rowLabel}-${a.columnLabel}`:"N/A"),j={position:"fixed",left:`${p+15}px`,top:`${h+15}px`,zIndex:1e3,pointerEvents:"none"},x={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"},r={color:"#9ca3af",marginRight:"4px"},g={fontWeight:600},b={color:"#4ade80",fontWeight:600},f={fontSize:"11px",color:"#6b7280",textTransform:"capitalize",marginTop:"4px"};return t.jsx("div",{style:j,children:t.jsxs("div",{style:x,children:[a.sectionName&&t.jsxs("div",{style:{marginBottom:"4px"},children:[t.jsx("span",{style:r,children:"Section:"}),t.jsx("span",{style:{...g,color:"#3b82f6"},children:a.sectionName})]}),t.jsxs("div",{style:{marginBottom:"4px"},children:[t.jsx("span",{style:r,children:"Seat:"}),t.jsx("span",{style:g,children:S})]}),a.price!==void 0&&a.price>0&&t.jsxs("div",{style:{marginBottom:"4px"},children:[t.jsx("span",{style:r,children:"Price:"}),t.jsxs("span",{style:b,children:[y," ",a.price.toFixed(2)]})]}),t.jsxs("div",{style:f,children:["Status: ",m]})]})})});oe.displayName="SeatTooltip";const Be=({config:o,configUrl:p,floorId:h,onFloorChange:a,reservedSeats:y=[],unavailableSeats:m=[],onSeatSelect:S,onSeatDeselect:j,onSelectionChange:x,colorOverrides:r,showTooltip:g=!0,zoomEnabled:b=!0,className:f="",onConfigLoad:w,onError:k,showFloorSelector:M,floorSelectorPosition:ie="top-left",floorSelectorClassName:ae,showAllFloorsOption:re=!0,allFloorsLabel:le="All",fitToView:$=!0,fitPadding:P=40,showZoomControls:ce=!0,zoomControlsPosition:de="bottom-right",zoomControlsClassName:ue,maxZoom:L=3,zoomStep:D=.25})=>{const fe=n.useRef(null),[R,he]=n.useState(new Set),[v,Z]=n.useState(1),[I,T]=n.useState({x:0,y:0}),[pe,xe]=n.useState(null),[U,K]=n.useState(!1),[ge,be]=n.useState(1),[A,G]=n.useState({visible:!1,x:0,y:0,seat:null,state:"available"}),{config:ye,loading:me,error:B}=J(p),s=o||ye,V=h!==void 0,C=V?h||null:pe,Se=n.useCallback(e=>{V||xe(e),a?.(e)},[V,a]),q=s?.floors||[],ve=M!==void 0?M:q.length>1,z=n.useMemo(()=>s?{...s.colors,...r}:{...Q,...r},[s,r]),F=n.useMemo(()=>{if(!s)return[];let e=s.seats.filter(i=>i.state!=="hidden");return C&&(e=e.filter(i=>i.floorId===C||!i.floorId&&C==="floor_default")),e},[s,C]),O=n.useMemo(()=>s?.stages?C?s.stages.filter(e=>e.floorId===C||!e.floorId&&C==="floor_default"):s.stages:[],[s,C]),N=n.useMemo(()=>{if(!s||F.length===0&&O.length===0)return null;const e=12;let i=1/0,l=1/0,d=-1/0,c=-1/0;return F.forEach(u=>{i=Math.min(i,u.position.x-e),l=Math.min(l,u.position.y-e),d=Math.max(d,u.position.x+e),c=Math.max(c,u.position.y+e)}),O.forEach(u=>{i=Math.min(i,u.position.x),l=Math.min(l,u.position.y),d=Math.max(d,u.position.x+(u.config?.width||200)),c=Math.max(c,u.position.y+(u.config?.height||100))}),{minX:i,minY:l,maxX:d,maxY:c,width:d-i,height:c-l}},[s,F,O]);n.useEffect(()=>{if(!$||U||!s||!N)return;const e=s.canvas.width,i=s.canvas.height,l=e-P*2,d=i-P*2,c=l/N.width,u=d/N.height,H=Math.min(c,u,L),Ne=N.minX+N.width/2,Ee=N.minY+N.height/2,Re=e/2,Fe=i/2,Le=Re-Ne*H,Ae=Fe-Ee*H;Z(H),T({x:Le,y:Ae}),be(H),K(!0)},[$,U,s,N,P,L]),n.useEffect(()=>{$&&K(!1)},[C,$]);const W=n.useMemo(()=>{const e=new Set(y),i=new Set(m);return{reserved:e,unavailable:i}},[y,m]),X=n.useCallback(e=>{const i=e.id,l=e.seatNumber||"";return W.unavailable.has(i)||W.unavailable.has(l)?"unavailable":W.reserved.has(i)||W.reserved.has(l)?"reserved":R.has(i)?"selected":e.state},[W,R]);n.useEffect(()=>{s&&w&&w(s)},[s,w]),n.useEffect(()=>{B&&k&&k(B)},[B,k]);const je=n.useCallback(e=>{const i=X(e);if(i!=="available"&&i!=="selected")return;const l=R.has(e.id);he(d=>{const c=new Set(d);return l?c.delete(e.id):c.add(e.id),c}),l?j?.(e):(S?.(e),S||console.log("Seat selected:",e))},[X,R,S,j]),Y=n.useMemo(()=>s?F.filter(e=>R.has(e.id)):[],[F,R]);n.useEffect(()=>{x?.(Y)},[Y,x]);const _=ge,Ce=n.useCallback(()=>{if(!b)return;const e=Math.min(v+D,L);if(e!==v){const i=s?.canvas.width||800,l=s?.canvas.height||600,d=i/2,c=l/2,u={x:(d-I.x)/v,y:(c-I.y)/v};Z(e),T({x:d-u.x*e,y:c-u.y*e})}},[b,v,D,L,s,I]),we=n.useCallback(()=>{if(!b)return;const e=Math.max(v-D,_);if(e!==v){const i=s?.canvas.width||800,l=s?.canvas.height||600,d=i/2,c=l/2,u={x:(d-I.x)/v,y:(c-I.y)/v};Z(e),T({x:d-u.x*e,y:c-u.y*e})}},[b,v,D,_,s,I]),ke=n.useCallback(e=>{T({x:e.target.x(),y:e.target.y()})},[]),Me=n.useCallback((e,i)=>{if(!g)return;const l=i.target.getStage();if(!l)return;const d=l.getPointerPosition();if(!d)return;const c=l.container().getBoundingClientRect();G({visible:!0,x:c.left+d.x,y:c.top+d.y,seat:e,state:X(e)})},[g,X]),Ie=n.useCallback(()=>{G(e=>({...e,visible:!1}))},[]);return me?t.jsx("div",{className:`flex items-center justify-center h-full ${f}`,children:t.jsx("p",{children:"Loading seat map..."})}):B?t.jsx("div",{className:`flex items-center justify-center h-full ${f}`,children:t.jsxs("p",{className:"text-red-500",children:["Error loading seat map: ",B.message]})}):s?t.jsxs("div",{className:`relative ${f}`,children:[ve&&q.length>0&&t.jsx(ne,{floors:q,currentFloorId:C,onFloorChange:Se,showAllOption:re,allLabel:le,position:ie,className:ae}),t.jsxs(E.Stage,{ref:fe,width:s.canvas.width,height:s.canvas.height,scaleX:v,scaleY:v,x:I.x,y:I.y,draggable:!0,onDragEnd:ke,style:{backgroundColor:s.canvas.backgroundColor,cursor:"grab"},children:[t.jsx(E.Layer,{listening:!1,children:O.map(e=>t.jsx(te,{stage:e,stageColor:z.stageColor},e.id))}),t.jsx(E.Layer,{children:F.map(e=>t.jsx(ee,{seat:e,state:X(e),colors:z,onClick:je,onMouseEnter:Me,onMouseLeave:Ie},e.id))})]}),g&&t.jsx(oe,{visible:A.visible,x:A.x,y:A.y,seat:A.seat,currency:z.currency,state:A.state}),ce&&b&&t.jsx(se,{scale:v,minScale:_,maxScale:L,onZoomIn:Ce,onZoomOut:we,position:de,className:ue}),Y.length>0&&t.jsxs("div",{className:"absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg",children:[t.jsxs("h3",{className:"font-semibold mb-2",children:["Selected Seats (",Y.length,")"]}),t.jsx("div",{className:"max-h-48 overflow-y-auto space-y-1",children:Y.map(e=>t.jsxs("div",{className:"text-sm",children:[e.seatNumber,e.price&&` - ${z.currency} ${e.price.toFixed(2)}`]},e.id))})]})]}):t.jsx("div",{className:`flex items-center justify-center h-full ${f}`,children:t.jsx("p",{children:"No configuration provided"})})};exports.DEFAULT_COLORS=Q;exports.SeatMapViewer=Be;exports.useConfigFetcher=J;

package/dist/index.mjs

@@ -1,34 +1,34 @@
-import { jsx as i, jsxs as w } from "react/jsx-runtime";
-import { useState as C, useEffect as Y, useRef as Et, useCallback as M, useMemo as F, memo as Z } from "react";
-import { Stage as Wt, Layer as tt, Group as jt, Rect as et, Text as Bt, Circle as Dt } from "react-konva";
-function Ht(o) {
-  const [f, d] = C(null), [m, x] = C(!1), [S, g] = C(null), y = async () => {
-    if (o) {
-      x(!0), g(null);
+import { jsx as i, jsxs as x } from "react/jsx-runtime";
+import { useState as I, useEffect as W, useRef as zt, useCallback as C, useMemo as L, memo as j } from "react";
+import { Stage as Dt, Layer as nt, Group as Tt, Rect as ot, Text as jt, Circle as Ht } from "react-konva";
+function Ot(n) {
+  const [u, h] = I(null), [r, b] = I(!1), [m, v] = I(null), w = async () => {
+    if (n) {
+      b(!0), v(null);
       try {
-        const h = await fetch(o);
-        if (!h.ok)
-          throw new Error(`Failed to fetch config: ${h.statusText}`);
-        const l = await h.json();
-        d(l);
-      } catch (h) {
-        const l = h instanceof Error ? h : new Error("Unknown error occurred");
-        g(l), console.error("Failed to fetch seat map config:", l);
+        const p = await fetch(n);
+        if (!p.ok)
+          throw new Error(`Failed to fetch config: ${p.statusText}`);
+        const s = await p.json();
+        h(s);
+      } catch (p) {
+        const s = p instanceof Error ? p : new Error("Unknown error occurred");
+        v(s), console.error("Failed to fetch seat map config:", s);
       } finally {
-        x(!1);
+        b(!1);
       }
     }
   };
-  return Y(() => {
-    y();
-  }, [o]), {
-    config: f,
-    loading: m,
-    error: S,
-    refetch: y
+  return W(() => {
+    w();
+  }, [n]), {
+    config: u,
+    loading: r,
+    error: m,
+    refetch: w
   };
 }
-const Tt = {
+const Zt = {
   canvasBackground: "#1a1a1a",
   stageColor: "#808080",
   seatAvailable: "#2C2B30",
@@ -38,64 +38,74 @@ const Tt = {
   seatHidden: "#4a4a4a",
   gridLines: "#404040",
   currency: "KD"
-}, nt = Z(({ seat: o, state: f, colors: d, onClick: m }) => {
-  const g = {
-    available: d.seatAvailable,
-    reserved: d.seatReserved,
-    selected: d.seatSelected,
-    unavailable: d.seatUnavailable,
-    hidden: d.seatHidden
+}, it = j(({ seat: n, state: u, colors: h, onClick: r, onMouseEnter: b, onMouseLeave: m }) => {
+  const p = {
+    available: h.seatAvailable,
+    reserved: h.seatReserved,
+    selected: h.seatSelected,
+    unavailable: h.seatUnavailable,
+    hidden: h.seatHidden
     // Hidden seats are filtered out, but included for type safety
-  }[f], y = f === "available" || f === "selected", h = M(() => {
-    y && m(o);
-  }, [o, m, y]), l = {
-    x: o.position.x,
-    y: o.position.y,
-    fill: g,
+  }[u], s = u === "available" || u === "selected", g = C(() => {
+    s && r(n);
+  }, [n, r, s]), y = C((M) => {
+    b(n, M);
+    const R = M.target.getStage();
+    R && s && (R.container().style.cursor = "pointer");
+  }, [n, b, s]), f = C((M) => {
+    m();
+    const R = M.target.getStage();
+    R && (R.container().style.cursor = "grab");
+  }, [m]), N = {
+    x: n.position.x,
+    y: n.position.y,
+    fill: p,
     stroke: "#ffffff",
     strokeWidth: 1,
-    onClick: h,
-    onTap: h
+    onClick: g,
+    onTap: g,
+    onMouseEnter: y,
+    onMouseLeave: f
   };
-  return o.shape === "circle" ? /* @__PURE__ */ i(
-    Dt,
+  return n.shape === "circle" ? /* @__PURE__ */ i(
+    Ht,
     {
-      ...l,
+      ...N,
       radius: 12
     }
   ) : /* @__PURE__ */ i(
-    et,
+    ot,
     {
-      ...l,
+      ...N,
       width: 24,
       height: 24,
       offsetX: 12,
       offsetY: 12,
-      cornerRadius: o.shape === "square" ? 0 : 4
+      cornerRadius: n.shape === "square" ? 0 : 4
     }
   );
 });
-nt.displayName = "ViewerSeat";
-const ot = Z(({ stage: o, stageColor: f }) => /* @__PURE__ */ w(jt, { x: o.position.x, y: o.position.y, children: [
+it.displayName = "ViewerSeat";
+const rt = j(({ stage: n, stageColor: u }) => /* @__PURE__ */ x(Tt, { x: n.position.x, y: n.position.y, children: [
   /* @__PURE__ */ i(
-    et,
+    ot,
     {
-      width: o.config.width,
-      height: o.config.height,
-      fill: f + "80",
+      width: n.config.width,
+      height: n.config.height,
+      fill: u + "80",
       stroke: "#ffffff",
       strokeWidth: 2,
       cornerRadius: 10
     }
   ),
   /* @__PURE__ */ i(
-    Bt,
+    jt,
     {
-      text: o.config.label,
+      text: n.config.label,
       x: 0,
       y: 0,
-      width: o.config.width,
-      height: o.config.height,
+      width: n.config.width,
+      height: n.config.height,
       fontSize: 24,
       fontStyle: "bold",
       fill: "#ffffff",
@@ -104,20 +114,20 @@ const ot = Z(({ stage: o, stageColor: f }) => /* @__PURE__ */ w(jt, { x: o.posit
     }
   )
 ] }));
-ot.displayName = "ViewerStage";
-const it = Z(({
-  floors: o,
-  currentFloorId: f,
-  onFloorChange: d,
-  showAllOption: m,
-  allLabel: x,
-  position: S,
-  className: g
+rt.displayName = "ViewerStage";
+const st = j(({
+  floors: n,
+  currentFloorId: u,
+  onFloorChange: h,
+  showAllOption: r,
+  allLabel: b,
+  position: m,
+  className: v
 }) => {
-  const y = F(
-    () => [...o].sort((u, A) => u.order - A.order),
-    [o]
-  ), l = {
+  const w = L(
+    () => [...n].sort((f, N) => f.order - N.order),
+    [n]
+  ), s = {
     position: "absolute",
     display: "flex",
     alignItems: "center",
@@ -132,8 +142,8 @@ const it = Z(({
       "top-right": { top: 0, right: 0 },
       "bottom-left": { bottom: 0, left: 0 },
       "bottom-right": { bottom: 0, right: 0 }
-    }[S]
-  }, N = {
+    }[m]
+  }, g = {
     padding: "6px 14px",
     fontSize: "14px",
     fontWeight: 500,
@@ -143,44 +153,44 @@ const it = Z(({
     color: "#fff",
     cursor: "pointer",
     transition: "all 0.2s ease"
-  }, b = {
-    ...N,
+  }, y = {
+    ...g,
     backgroundColor: "#3A7DE5",
     borderColor: "#3A7DE5"
   };
-  return /* @__PURE__ */ w("div", { className: g, style: l, children: [
-    m && /* @__PURE__ */ i(
+  return /* @__PURE__ */ x("div", { className: v, style: s, children: [
+    r && /* @__PURE__ */ i(
       "button",
       {
         type: "button",
-        onClick: () => d(null),
-        style: f === null ? b : N,
-        children: x
+        onClick: () => h(null),
+        style: u === null ? y : g,
+        children: b
       }
     ),
-    y.map((u) => /* @__PURE__ */ i(
+    w.map((f) => /* @__PURE__ */ i(
       "button",
       {
         type: "button",
-        onClick: () => d(u.id),
-        style: f === u.id ? b : N,
-        children: u.name
+        onClick: () => h(f.id),
+        style: u === f.id ? y : g,
+        children: f.name
       },
-      u.id
+      f.id
     ))
   ] });
 });
-it.displayName = "FloorSelectorBar";
-const st = Z(({
-  scale: o,
-  minScale: f,
-  maxScale: d,
-  onZoomIn: m,
-  onZoomOut: x,
-  position: S,
-  className: g
+st.displayName = "FloorSelectorBar";
+const at = j(({
+  scale: n,
+  minScale: u,
+  maxScale: h,
+  onZoomIn: r,
+  onZoomOut: b,
+  position: m,
+  className: v
 }) => {
-  const h = {
+  const p = {
     position: "absolute",
     display: "flex",
     flexDirection: "column",
@@ -195,8 +205,8 @@ const st = Z(({
       "top-right": { top: 0, right: 0 },
       "bottom-left": { bottom: 0, left: 0 },
       "bottom-right": { bottom: 0, right: 0 }
-    }[S]
-  }, l = {
+    }[m]
+  }, s = {
     width: "36px",
     height: "36px",
     fontSize: "20px",
@@ -210,19 +220,19 @@ const st = Z(({
     alignItems: "center",
     justifyContent: "center",
     transition: "all 0.2s ease"
-  }, N = {
-    ...l,
+  }, g = {
+    ...s,
     opacity: 0.4,
     cursor: "not-allowed"
-  }, b = o < d, u = o > f;
-  return /* @__PURE__ */ w("div", { className: g, style: h, children: [
+  }, y = n < h, f = n > u;
+  return /* @__PURE__ */ x("div", { className: v, style: p, children: [
     /* @__PURE__ */ i(
       "button",
       {
         type: "button",
-        onClick: m,
-        disabled: !b,
-        style: b ? l : N,
+        onClick: r,
+        disabled: !y,
+        style: y ? s : g,
         title: "Zoom In",
         children: "+"
       }
@@ -231,213 +241,304 @@ const st = Z(({
       "button",
       {
         type: "button",
-        onClick: x,
-        disabled: !u,
-        style: u ? l : N,
+        onClick: b,
+        disabled: !f,
+        style: f ? s : g,
         title: "Zoom Out",
         children: "−"
       }
     )
   ] });
 });
-st.displayName = "ZoomControls";
-const zt = ({
-  config: o,
-  configUrl: f,
-  floorId: d,
-  onFloorChange: m,
-  reservedSeats: x = [],
-  unavailableSeats: S = [],
-  onSeatSelect: g,
-  onSeatDeselect: y,
-  onSelectionChange: h,
-  colorOverrides: l,
-  showTooltip: N = !0,
-  zoomEnabled: b = !0,
-  className: u = "",
-  onConfigLoad: A,
-  onError: z,
+at.displayName = "ZoomControls";
+const lt = j(({
+  visible: n,
+  x: u,
+  y: h,
+  seat: r,
+  currency: b,
+  state: m
+}) => {
+  if (!n || !r) return null;
+  const v = r.seatNumber || (r.rowLabel && r.columnLabel ? `${r.rowLabel}-${r.columnLabel}` : "N/A"), w = {
+    position: "fixed",
+    left: `${u + 15}px`,
+    top: `${h + 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"
+  }, s = {
+    color: "#9ca3af",
+    marginRight: "4px"
+  }, g = {
+    fontWeight: 600
+  }, y = {
+    color: "#4ade80",
+    fontWeight: 600
+  }, f = {
+    fontSize: "11px",
+    color: "#6b7280",
+    textTransform: "capitalize",
+    marginTop: "4px"
+  };
+  return /* @__PURE__ */ i("div", { style: w, children: /* @__PURE__ */ x("div", { style: p, children: [
+    r.sectionName && /* @__PURE__ */ x("div", { style: { marginBottom: "4px" }, children: [
+      /* @__PURE__ */ i("span", { style: s, children: "Section:" }),
+      /* @__PURE__ */ i("span", { style: { ...g, color: "#3b82f6" }, children: r.sectionName })
+    ] }),
+    /* @__PURE__ */ x("div", { style: { marginBottom: "4px" }, children: [
+      /* @__PURE__ */ i("span", { style: s, children: "Seat:" }),
+      /* @__PURE__ */ i("span", { style: g, children: v })
+    ] }),
+    r.price !== void 0 && r.price > 0 && /* @__PURE__ */ x("div", { style: { marginBottom: "4px" }, children: [
+      /* @__PURE__ */ i("span", { style: s, children: "Price:" }),
+      /* @__PURE__ */ x("span", { style: y, children: [
+        b,
+        " ",
+        r.price.toFixed(2)
+      ] })
+    ] }),
+    /* @__PURE__ */ x("div", { style: f, children: [
+      "Status: ",
+      m
+    ] })
+  ] }) });
+});
+lt.displayName = "SeatTooltip";
+const Ut = ({
+  config: n,
+  configUrl: u,
+  floorId: h,
+  onFloorChange: r,
+  reservedSeats: b = [],
+  unavailableSeats: m = [],
+  onSeatSelect: v,
+  onSeatDeselect: w,
+  onSelectionChange: p,
+  colorOverrides: s,
+  showTooltip: g = !0,
+  zoomEnabled: y = !0,
+  className: f = "",
+  onConfigLoad: N,
+  onError: M,
   // Floor selector props
-  showFloorSelector: P,
-  floorSelectorPosition: rt = "top-left",
-  floorSelectorClassName: at,
-  showAllFloorsOption: lt = !0,
-  allFloorsLabel: ct = "All",
-  fitToView: D = !0,
-  fitPadding: L = 40,
+  showFloorSelector: R,
+  floorSelectorPosition: ct = "top-left",
+  floorSelectorClassName: dt,
+  showAllFloorsOption: ft = !0,
+  allFloorsLabel: ht = "All",
+  fitToView: H = !0,
+  fitPadding: U = 40,
   // Zoom controls
-  showZoomControls: dt = !0,
-  zoomControlsPosition: ht = "bottom-right",
-  zoomControlsClassName: ft,
-  maxZoom: E = 3,
-  zoomStep: H = 0.25
+  showZoomControls: ut = !0,
+  zoomControlsPosition: pt = "bottom-right",
+  zoomControlsClassName: gt,
+  maxZoom: X = 3,
+  zoomStep: O = 0.25
 }) => {
-  const ut = Et(null), [R, pt] = C(/* @__PURE__ */ new Set()), [p, V] = C(1), [k, T] = C({ x: 0, y: 0 }), [gt, mt] = C(null), [J, Q] = C(!1), [yt, bt] = C(1), { config: xt, loading: vt, error: W } = Ht(f), e = o || xt, _ = d !== void 0, v = _ ? d || null : gt, St = M((t) => {
-    _ || mt(t), m?.(t);
-  }, [_, m]), U = e?.floors || [], wt = P !== void 0 ? P : U.length > 1, q = F(
-    () => e ? { ...e.colors, ...l } : { ...Tt, ...l },
-    [e, l]
-  ), X = F(() => {
+  const yt = zt(null), [A, xt] = I(/* @__PURE__ */ new Set()), [S, q] = I(1), [F, Z] = I({ x: 0, y: 0 }), [bt, mt] = I(null), [Q, tt] = I(!1), [vt, St] = I(1), [Y, et] = I({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: wt, loading: Ct, error: $ } = Ot(u), e = n || wt, G = h !== void 0, k = G ? h || null : bt, kt = C((t) => {
+    G || mt(t), r?.(t);
+  }, [G, r]), K = e?.floors || [], It = R !== void 0 ? R : K.length > 1, P = L(
+    () => e ? { ...e.colors, ...s } : { ...Zt, ...s },
+    [e, s]
+  ), B = L(() => {
     if (!e) return [];
-    let t = e.seats.filter((n) => n.state !== "hidden");
-    return v && (t = t.filter(
-      (n) => n.floorId === v || !n.floorId && v === "floor_default"
+    let t = e.seats.filter((o) => o.state !== "hidden");
+    return k && (t = t.filter(
+      (o) => o.floorId === k || !o.floorId && k === "floor_default"
     )), t;
-  }, [e, v]), $ = F(() => e?.stages ? v ? e.stages.filter(
-    (t) => t.floorId === v || !t.floorId && v === "floor_default"
-  ) : e.stages : [], [e, v]), I = F(() => {
-    if (!e || X.length === 0 && $.length === 0)
+  }, [e, k]), V = L(() => e?.stages ? k ? e.stages.filter(
+    (t) => t.floorId === k || !t.floorId && k === "floor_default"
+  ) : e.stages : [], [e, k]), E = L(() => {
+    if (!e || B.length === 0 && V.length === 0)
       return null;
     const t = 12;
-    let n = 1 / 0, r = 1 / 0, c = -1 / 0, a = -1 / 0;
-    return X.forEach((s) => {
-      n = Math.min(n, s.position.x - t), r = Math.min(r, s.position.y - t), c = Math.max(c, s.position.x + t), a = Math.max(a, s.position.y + t);
-    }), $.forEach((s) => {
-      n = Math.min(n, s.position.x), r = Math.min(r, s.position.y), c = Math.max(c, s.position.x + (s.config?.width || 200)), a = Math.max(a, s.position.y + (s.config?.height || 100));
-    }), { minX: n, minY: r, maxX: c, maxY: a, width: c - n, height: a - r };
-  }, [e, X, $]);
-  Y(() => {
-    if (!D || J || !e || !I) return;
-    const t = e.canvas.width, n = e.canvas.height, r = t - L * 2, c = n - L * 2, a = r / I.width, s = c / I.height, O = Math.min(a, s, E), Mt = I.minX + I.width / 2, Ft = I.minY + I.height / 2, Rt = t / 2, Xt = n / 2, Yt = Rt - Mt * O, At = Xt - Ft * O;
-    V(O), T({ x: Yt, y: At }), bt(O), Q(!0);
-  }, [D, J, e, I, L, E]), Y(() => {
-    D && Q(!1);
-  }, [v, D]);
-  const j = F(() => {
-    const t = new Set(x), n = new Set(S);
-    return { reserved: t, unavailable: n };
-  }, [x, S]), G = M((t) => {
-    const n = t.id, r = t.seatNumber || "";
-    return j.unavailable.has(n) || j.unavailable.has(r) ? "unavailable" : j.reserved.has(n) || j.reserved.has(r) ? "reserved" : R.has(n) ? "selected" : t.state;
-  }, [j, R]);
-  Y(() => {
-    e && A && A(e);
-  }, [e, A]), Y(() => {
-    W && z && z(W);
-  }, [W, z]);
-  const Ct = M((t) => {
-    const n = G(t);
-    if (n !== "available" && n !== "selected")
+    let o = 1 / 0, a = 1 / 0, c = -1 / 0, l = -1 / 0;
+    return B.forEach((d) => {
+      o = Math.min(o, d.position.x - t), a = Math.min(a, d.position.y - t), c = Math.max(c, d.position.x + t), l = Math.max(l, d.position.y + t);
+    }), V.forEach((d) => {
+      o = Math.min(o, d.position.x), a = Math.min(a, d.position.y), c = Math.max(c, d.position.x + (d.config?.width || 200)), l = Math.max(l, d.position.y + (d.config?.height || 100));
+    }), { minX: o, minY: a, maxX: c, maxY: l, width: c - o, height: l - a };
+  }, [e, B, V]);
+  W(() => {
+    if (!H || Q || !e || !E) return;
+    const t = e.canvas.width, o = e.canvas.height, a = t - U * 2, c = o - U * 2, l = a / E.width, d = c / E.height, _ = Math.min(l, d, X), At = E.minX + E.width / 2, Bt = E.minY + E.height / 2, Wt = t / 2, Xt = o / 2, Yt = Wt - At * _, $t = Xt - Bt * _;
+    q(_), Z({ x: Yt, y: $t }), St(_), tt(!0);
+  }, [H, Q, e, E, U, X]), W(() => {
+    H && tt(!1);
+  }, [k, H]);
+  const z = L(() => {
+    const t = new Set(b), o = new Set(m);
+    return { reserved: t, unavailable: o };
+  }, [b, m]), D = C((t) => {
+    const o = t.id, a = t.seatNumber || "";
+    return z.unavailable.has(o) || z.unavailable.has(a) ? "unavailable" : z.reserved.has(o) || z.reserved.has(a) ? "reserved" : A.has(o) ? "selected" : t.state;
+  }, [z, A]);
+  W(() => {
+    e && N && N(e);
+  }, [e, N]), W(() => {
+    $ && M && M($);
+  }, [$, M]);
+  const Nt = C((t) => {
+    const o = D(t);
+    if (o !== "available" && o !== "selected")
       return;
-    const r = R.has(t.id);
-    pt((c) => {
-      const a = new Set(c);
-      return r ? a.delete(t.id) : a.add(t.id), a;
-    }), r ? y?.(t) : (g?.(t), g || console.log("Seat selected:", t));
-  }, [G, R, g, y]), B = F(() => e ? X.filter((t) => R.has(t.id)) : [], [X, R]);
-  Y(() => {
-    h?.(B);
-  }, [B, h]);
-  const K = yt, kt = M(() => {
-    if (!b) return;
-    const t = Math.min(p + H, E);
-    if (t !== p) {
-      const n = e?.canvas.width || 800, r = e?.canvas.height || 600, c = n / 2, a = r / 2, s = {
-        x: (c - k.x) / p,
-        y: (a - k.y) / p
+    const a = A.has(t.id);
+    xt((c) => {
+      const l = new Set(c);
+      return a ? l.delete(t.id) : l.add(t.id), l;
+    }), a ? w?.(t) : (v?.(t), v || console.log("Seat selected:", t));
+  }, [D, A, v, w]), T = L(() => e ? B.filter((t) => A.has(t.id)) : [], [B, A]);
+  W(() => {
+    p?.(T);
+  }, [T, p]);
+  const J = vt, Mt = C(() => {
+    if (!y) return;
+    const t = Math.min(S + O, X);
+    if (t !== S) {
+      const o = e?.canvas.width || 800, a = e?.canvas.height || 600, c = o / 2, l = a / 2, d = {
+        x: (c - F.x) / S,
+        y: (l - F.y) / S
       };
-      V(t), T({
-        x: c - s.x * t,
-        y: a - s.y * t
+      q(t), Z({
+        x: c - d.x * t,
+        y: l - d.y * t
       });
     }
-  }, [b, p, H, E, e, k]), It = M(() => {
-    if (!b) return;
-    const t = Math.max(p - H, K);
-    if (t !== p) {
-      const n = e?.canvas.width || 800, r = e?.canvas.height || 600, c = n / 2, a = r / 2, s = {
-        x: (c - k.x) / p,
-        y: (a - k.y) / p
+  }, [y, S, O, X, e, F]), Rt = C(() => {
+    if (!y) return;
+    const t = Math.max(S - O, J);
+    if (t !== S) {
+      const o = e?.canvas.width || 800, a = e?.canvas.height || 600, c = o / 2, l = a / 2, d = {
+        x: (c - F.x) / S,
+        y: (l - F.y) / S
       };
-      V(t), T({
-        x: c - s.x * t,
-        y: a - s.y * t
+      q(t), Z({
+        x: c - d.x * t,
+        y: l - d.y * t
       });
     }
-  }, [b, p, H, K, e, k]), Nt = M((t) => {
-    T({
+  }, [y, S, O, J, e, F]), Ft = C((t) => {
+    Z({
       x: t.target.x(),
       y: t.target.y()
     });
+  }, []), Et = C((t, o) => {
+    if (!g) return;
+    const a = o.target.getStage();
+    if (!a) return;
+    const c = a.getPointerPosition();
+    if (!c) return;
+    const l = a.container().getBoundingClientRect();
+    et({
+      visible: !0,
+      x: l.left + c.x,
+      y: l.top + c.y,
+      seat: t,
+      state: D(t)
+    });
+  }, [g, D]), Lt = C(() => {
+    et((t) => ({ ...t, visible: !1 }));
   }, []);
-  return vt ? /* @__PURE__ */ i("div", { className: `flex items-center justify-center h-full ${u}`, children: /* @__PURE__ */ i("p", { children: "Loading seat map..." }) }) : W ? /* @__PURE__ */ i("div", { className: `flex items-center justify-center h-full ${u}`, children: /* @__PURE__ */ w("p", { className: "text-red-500", children: [
+  return Ct ? /* @__PURE__ */ i("div", { className: `flex items-center justify-center h-full ${f}`, children: /* @__PURE__ */ i("p", { children: "Loading seat map..." }) }) : $ ? /* @__PURE__ */ i("div", { className: `flex items-center justify-center h-full ${f}`, children: /* @__PURE__ */ x("p", { className: "text-red-500", children: [
     "Error loading seat map: ",
-    W.message
-  ] }) }) : e ? /* @__PURE__ */ w("div", { className: `relative ${u}`, children: [
-    wt && U.length > 0 && /* @__PURE__ */ i(
-      it,
+    $.message
+  ] }) }) : e ? /* @__PURE__ */ x("div", { className: `relative ${f}`, children: [
+    It && K.length > 0 && /* @__PURE__ */ i(
+      st,
       {
-        floors: U,
-        currentFloorId: v,
-        onFloorChange: St,
-        showAllOption: lt,
-        allLabel: ct,
-        position: rt,
-        className: at
+        floors: K,
+        currentFloorId: k,
+        onFloorChange: kt,
+        showAllOption: ft,
+        allLabel: ht,
+        position: ct,
+        className: dt
       }
     ),
-    /* @__PURE__ */ w(
-      Wt,
+    /* @__PURE__ */ x(
+      Dt,
       {
-        ref: ut,
+        ref: yt,
         width: e.canvas.width,
         height: e.canvas.height,
-        scaleX: p,
-        scaleY: p,
-        x: k.x,
-        y: k.y,
+        scaleX: S,
+        scaleY: S,
+        x: F.x,
+        y: F.y,
         draggable: !0,
-        onDragEnd: Nt,
+        onDragEnd: Ft,
         style: { backgroundColor: e.canvas.backgroundColor, cursor: "grab" },
         children: [
-          /* @__PURE__ */ i(tt, { listening: !1, children: $.map((t) => /* @__PURE__ */ i(
-            ot,
+          /* @__PURE__ */ i(nt, { listening: !1, children: V.map((t) => /* @__PURE__ */ i(
+            rt,
             {
               stage: t,
-              stageColor: q.stageColor
+              stageColor: P.stageColor
             },
             t.id
           )) }),
-          /* @__PURE__ */ i(tt, { children: X.map((t) => /* @__PURE__ */ i(
-            nt,
+          /* @__PURE__ */ i(nt, { children: B.map((t) => /* @__PURE__ */ i(
+            it,
             {
               seat: t,
-              state: G(t),
-              colors: q,
-              onClick: Ct
+              state: D(t),
+              colors: P,
+              onClick: Nt,
+              onMouseEnter: Et,
+              onMouseLeave: Lt
             },
             t.id
           )) })
         ]
       }
     ),
-    dt && b && /* @__PURE__ */ i(
-      st,
+    g && /* @__PURE__ */ i(
+      lt,
+      {
+        visible: Y.visible,
+        x: Y.x,
+        y: Y.y,
+        seat: Y.seat,
+        currency: P.currency,
+        state: Y.state
+      }
+    ),
+    ut && y && /* @__PURE__ */ i(
+      at,
       {
-        scale: p,
-        minScale: K,
-        maxScale: E,
-        onZoomIn: kt,
-        onZoomOut: It,
-        position: ht,
-        className: ft
+        scale: S,
+        minScale: J,
+        maxScale: X,
+        onZoomIn: Mt,
+        onZoomOut: Rt,
+        position: pt,
+        className: gt
       }
     ),
-    B.length > 0 && /* @__PURE__ */ w("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
-      /* @__PURE__ */ w("h3", { className: "font-semibold mb-2", children: [
+    T.length > 0 && /* @__PURE__ */ x("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
+      /* @__PURE__ */ x("h3", { className: "font-semibold mb-2", children: [
         "Selected Seats (",
-        B.length,
+        T.length,
         ")"
       ] }),
-      /* @__PURE__ */ i("div", { className: "max-h-48 overflow-y-auto space-y-1", children: B.map((t) => /* @__PURE__ */ w("div", { className: "text-sm", children: [
+      /* @__PURE__ */ i("div", { className: "max-h-48 overflow-y-auto space-y-1", children: T.map((t) => /* @__PURE__ */ x("div", { className: "text-sm", children: [
         t.seatNumber,
-        t.price && ` - ${q.currency} ${t.price.toFixed(2)}`
+        t.price && ` - ${P.currency} ${t.price.toFixed(2)}`
       ] }, t.id)) })
     ] })
-  ] }) : /* @__PURE__ */ i("div", { className: `flex items-center justify-center h-full ${u}`, children: /* @__PURE__ */ i("p", { children: "No configuration provided" }) });
+  ] }) : /* @__PURE__ */ i("div", { className: `flex items-center justify-center h-full ${f}`, children: /* @__PURE__ */ i("p", { children: "No configuration provided" }) });
 };
 export {
-  Tt as DEFAULT_COLORS,
-  zt as SeatMapViewer,
-  Ht as useConfigFetcher
+  Zt as DEFAULT_COLORS,
+  Ut as SeatMapViewer,
+  Ot as useConfigFetcher
 };

package/package.json

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