@zonetrix/viewer 2.3.0 → 2.4.1

package/README.md

@@ -113,7 +113,7 @@ function BookingApp() {
 | `onSelectionChange` | `(seats: SeatData[]) => void` | No | Callback when selection changes |
 | `colorOverrides` | `Partial<ColorSettings>` | No | Custom colors for seat states |
 | `showTooltip` | `boolean` | No | Show tooltips on hover (default: true) |
-| `zoomEnabled` | `boolean` | No | Enable/disable mouse wheel zoom (default: true) |
+| `zoomEnabled` | `boolean` | No | Enable/disable zoom functionality (default: true) |
 | `className` | `string` | No | Custom CSS class for the container |
 | `onConfigLoad` | `(config: SeatMapConfig) => void` | No | Callback when config is loaded |
 | `onError` | `(error: Error) => void` | No | Callback when an error occurs |
@@ -122,6 +122,13 @@ function BookingApp() {
 | `floorSelectorClassName` | `string` | No | Custom CSS class for floor selector |
 | `showAllFloorsOption` | `boolean` | No | Show "All" button in floor selector (default: true) |
 | `allFloorsLabel` | `string` | No | Custom label for "All" button (default: 'All') |
+| `fitToView` | `boolean` | No | Auto-fit content on load (default: true) |
+| `fitPadding` | `number` | No | Padding around content when fitting (default: 40) |
+| `showZoomControls` | `boolean` | No | Show zoom +/- buttons (default: true) |
+| `zoomControlsPosition` | `string` | No | Position: 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' (default: 'bottom-right') |
+| `zoomControlsClassName` | `string` | No | Custom CSS class for zoom controls |
+| `maxZoom` | `number` | No | Maximum zoom level (default: 3) |
+| `zoomStep` | `number` | No | Zoom increment per click (default: 0.25) |
 
 *Note: Either `config` or `configUrl` must be provided.
 
@@ -245,22 +252,33 @@ function SelectionTracker() {
 }
 ```
 
-### 5. Disable Zoom for Mobile
+### 5. Customize Zoom Controls
 
 ```tsx
 import { SeatMapViewer } from '@zonetrix/viewer';
 
-function MobileOptimized() {
-  const isMobile = window.innerWidth < 768;
-
+function CustomZoom() {
   return (
     <SeatMapViewer
       config={venueConfig}
-      zoomEnabled={!isMobile}
+      // Zoom controls appear in bottom-right by default
+      zoomControlsPosition="bottom-left"
+      maxZoom={5}        // Allow up to 5x zoom
+      zoomStep={0.5}     // Larger zoom increments
       onSeatSelect={(seat) => handleSelection(seat)}
     />
   );
 }
+
+// Hide zoom controls entirely
+function NoZoomControls() {
+  return (
+    <SeatMapViewer
+      config={venueConfig}
+      showZoomControls={false}
+    />
+  );
+}
 ```
 
 ### 6. Multi-floor Venue (Built-in Floor Selector)

package/dist/components/SeatMapViewer.d.ts

@@ -23,5 +23,10 @@ export interface SeatMapViewerProps {
     allFloorsLabel?: string;
     fitToView?: boolean;
     fitPadding?: number;
+    showZoomControls?: boolean;
+    zoomControlsPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    zoomControlsClassName?: string;
+    maxZoom?: number;
+    zoomStep?: number;
 }
 export declare const SeatMapViewer: React.FC<SeatMapViewerProps>;

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("react"),v=require("react-konva");function K(i){const[h,d]=t.useState(null),[S,y]=t.useState(!1),[w,x]=t.useState(null),g=async()=>{if(i){y(!0),x(null);try{const f=await fetch(i);if(!f.ok)throw new Error(`Failed to fetch config: ${f.statusText}`);const u=await f.json();d(u)}catch(f){const u=f instanceof Error?f:new Error("Unknown error occurred");x(u),console.error("Failed to fetch seat map config:",u)}finally{y(!1)}}};return t.useEffect(()=>{g()},[i]),{config:h,loading:S,error:w,refetch:g}}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:d,onClick:S})=>{const x={available:d.seatAvailable,reserved:d.seatReserved,selected:d.seatSelected,unavailable:d.seatUnavailable,hidden:d.seatHidden}[h],g=h==="available"||h==="selected",f=t.useCallback(()=>{g&&S(i)},[i,S,g]),u={x:i.position.x,y:i.position.y,fill:x,stroke:"#ffffff",strokeWidth:1,onClick:f,onTap:f};return i.shape==="circle"?o.jsx(v.Circle,{...u,radius:12}):o.jsx(v.Rect,{...u,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(v.Group,{x:i.position.x,y:i.position.y,children:[o.jsx(v.Rect,{width:i.config.width,height:i.config.height,fill:h+"80",stroke:"#ffffff",strokeWidth:2,cornerRadius:10}),o.jsx(v.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 Z=t.memo(({floors:i,currentFloorId:h,onFloorChange:d,showAllOption:S,allLabel:y,position:w,className:x})=>{const g=t.useMemo(()=>[...i].sort((p,I)=>p.order-I.order),[i]),u={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}}[w]},Y={padding:"6px 14px",fontSize:"14px",fontWeight:500,border:"1px solid #444",borderRadius:"6px",backgroundColor:"transparent",color:"#fff",cursor:"pointer",transition:"all 0.2s ease"},E={...Y,backgroundColor:"#3A7DE5",borderColor:"#3A7DE5"};return o.jsxs("div",{className:x,style:u,children:[S&&o.jsx("button",{type:"button",onClick:()=>d(null),style:h===null?E:Y,children:y}),g.map(p=>o.jsx("button",{type:"button",onClick:()=>d(p.id),style:h===p.id?E:Y,children:p.name},p.id))]})});Z.displayName="FloorSelectorBar";const Se=({config:i,configUrl:h,floorId:d,onFloorChange:S,reservedSeats:y=[],unavailableSeats:w=[],onSeatSelect:x,onSeatDeselect:g,onSelectionChange:f,colorOverrides:u,showTooltip:Y=!0,zoomEnabled:E=!0,className:p="",onConfigLoad:I,onError:T,showFloorSelector:O,floorSelectorPosition:ee="top-left",floorSelectorClassName:te,showAllFloorsOption:ne=!0,allFloorsLabel:se="All",fitToView:z=!0,fitPadding:W=40})=>{const P=t.useRef(null),[j,oe]=t.useState(new Set),[X,V]=t.useState(1),[F,_]=t.useState({x:0,y:0}),[ie,re]=t.useState(null),[q,U]=t.useState(!1),{config:ae,loading:le,error:N}=K(h),s=i||ae,$=d!==void 0,m=$?d||null:ie,ce=t.useCallback(e=>{$||re(e),S?.(e)},[$,S]),B=s?.floors||[],de=O!==void 0?O:B.length>1,D=t.useMemo(()=>s?{...s.colors,...u}:{...G,...u},[s,u]),k=t.useMemo(()=>{if(!s)return[];let e=s.seats.filter(n=>n.state!=="hidden");return m&&(e=e.filter(n=>n.floorId===m||!n.floorId&&m==="floor_default")),e},[s,m]),L=t.useMemo(()=>s?.stages?m?s.stages.filter(e=>e.floorId===m||!e.floorId&&m==="floor_default"):s.stages:[],[s,m]),b=t.useMemo(()=>{if(!s||k.length===0&&L.length===0)return null;const e=12;let n=1/0,r=1/0,a=-1/0,l=-1/0;return k.forEach(c=>{n=Math.min(n,c.position.x-e),r=Math.min(r,c.position.y-e),a=Math.max(a,c.position.x+e),l=Math.max(l,c.position.y+e)}),L.forEach(c=>{n=Math.min(n,c.position.x),r=Math.min(r,c.position.y),a=Math.max(a,c.position.x+(c.config?.width||200)),l=Math.max(l,c.position.y+(c.config?.height||100))}),{minX:n,minY:r,maxX:a,maxY:l,width:a-n,height:l-r}},[s,k,L]);t.useEffect(()=>{if(!z||q||!s||!b)return;const e=s.canvas.width,n=s.canvas.height,r=e-W*2,a=n-W*2,l=r/b.width,c=a/b.height,M=Math.min(l,c,2),C=b.minX+b.width/2,he=b.minY+b.height/2,pe=e/2,xe=n/2,ge=pe-C*M,me=xe-he*M;V(M),_({x:ge,y:me}),U(!0)},[z,q,s,b,W]),t.useEffect(()=>{z&&U(!1)},[m,z]);const R=t.useMemo(()=>{const e=new Set(y),n=new Set(w);return{reserved:e,unavailable:n}},[y,w]),H=t.useCallback(e=>{const n=e.id,r=e.seatNumber||"";return R.unavailable.has(n)||R.unavailable.has(r)?"unavailable":R.reserved.has(n)||R.reserved.has(r)?"reserved":j.has(n)?"selected":e.state},[R,j]);t.useEffect(()=>{s&&I&&I(s)},[s,I]),t.useEffect(()=>{N&&T&&T(N)},[N,T]);const fe=t.useCallback(e=>{const n=H(e);if(n!=="available"&&n!=="selected")return;const r=j.has(e.id);oe(a=>{const l=new Set(a);return r?l.delete(e.id):l.add(e.id),l}),r?g?.(e):(x?.(e),x||console.log("Seat selected:",e))},[H,j,x,g]),A=t.useMemo(()=>s?k.filter(e=>j.has(e.id)):[],[k,j]);t.useEffect(()=>{f?.(A)},[A,f]);const ue=t.useCallback(e=>{if(!E)return;e.evt.preventDefault();const n=P.current;if(!n)return;const r=X,a=n.getPointerPosition();if(!a)return;const l={x:(a.x-F.x)/r,y:(a.y-F.y)/r},c=e.evt.deltaY>0?-1:1,M=1.05;let C=c>0?r*M:r/M;C=Math.max(.5,Math.min(5,C)),V(C),_({x:a.x-l.x*C,y:a.y-l.y*C})},[E,X,F]);return le?o.jsx("div",{className:`flex items-center justify-center h-full ${p}`,children:o.jsx("p",{children:"Loading seat map..."})}):N?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: ",N.message]})}):s?o.jsxs("div",{className:`relative ${p}`,children:[de&&B.length>0&&o.jsx(Z,{floors:B,currentFloorId:m,onFloorChange:ce,showAllOption:ne,allLabel:se,position:ee,className:te}),o.jsxs(v.Stage,{ref:P,width:s.canvas.width,height:s.canvas.height,scaleX:X,scaleY:X,x:F.x,y:F.y,onWheel:ue,style:{backgroundColor:s.canvas.backgroundColor},children:[o.jsx(v.Layer,{listening:!1,children:L.map(e=>o.jsx(Q,{stage:e,stageColor:D.stageColor},e.id))}),o.jsx(v.Layer,{children:k.map(e=>o.jsx(J,{seat:e,state:H(e),colors:D,onClick:fe},e.id))})]}),A.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 (",A.length,")"]}),o.jsx("div",{className:"max-h-48 overflow-y-auto space-y-1",children:A.map(e=>o.jsxs("div",{className:"text-sm",children:[e.seatNumber,e.price&&` - ${D.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=Se;exports.useConfigFetcher=K;
+"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 r, jsxs as v } from "react/jsx-runtime";
-import { useState as S, useEffect as F, useRef as we, useCallback as W, useMemo as k, memo as O } from "react";
-import { Stage as Ce, Layer as Z, Group as ke, Rect as ee, Text as Ie, Circle as Me } from "react-konva";
-function Ne(i) {
-  const [h, c] = S(null), [y, x] = S(!1), [w, p] = S(null), g = async () => {
-    if (i) {
-      x(!0), p(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 d = await fetch(i);
-        if (!d.ok)
-          throw new Error(`Failed to fetch config: ${d.statusText}`);
-        const f = await d.json();
-        c(f);
-      } catch (d) {
-        const f = d instanceof Error ? d : new Error("Unknown error occurred");
-        p(f), console.error("Failed to fetch seat map config:", f);
+        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 F(() => {
-    g();
-  }, [i]), {
-    config: h,
-    loading: y,
-    error: w,
-    refetch: g
+  return W(() => {
+    w();
+  }, [n]), {
+    config: u,
+    loading: r,
+    error: m,
+    refetch: w
   };
 }
-const Fe = {
+const Zt = {
   canvasBackground: "#1a1a1a",
   stageColor: "#808080",
   seatAvailable: "#2C2B30",
@@ -38,64 +38,74 @@ const Fe = {
   seatHidden: "#4a4a4a",
   gridLines: "#404040",
   currency: "KD"
-}, te = O(({ seat: i, state: h, colors: c, onClick: y }) => {
+}, it = j(({ seat: n, state: u, colors: h, onClick: r, onMouseEnter: b, onMouseLeave: m }) => {
   const p = {
-    available: c.seatAvailable,
-    reserved: c.seatReserved,
-    selected: c.seatSelected,
-    unavailable: c.seatUnavailable,
-    hidden: c.seatHidden
+    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
-  }[h], g = h === "available" || h === "selected", d = W(() => {
-    g && y(i);
-  }, [i, y, g]), f = {
-    x: i.position.x,
-    y: i.position.y,
+  }[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: d,
-    onTap: d
+    onClick: g,
+    onTap: g,
+    onMouseEnter: y,
+    onMouseLeave: f
   };
-  return i.shape === "circle" ? /* @__PURE__ */ r(
-    Me,
+  return n.shape === "circle" ? /* @__PURE__ */ i(
+    Ht,
     {
-      ...f,
+      ...N,
       radius: 12
     }
-  ) : /* @__PURE__ */ r(
-    ee,
+  ) : /* @__PURE__ */ i(
+    ot,
     {
-      ...f,
+      ...N,
       width: 24,
       height: 24,
       offsetX: 12,
       offsetY: 12,
-      cornerRadius: i.shape === "square" ? 0 : 4
+      cornerRadius: n.shape === "square" ? 0 : 4
     }
   );
 });
-te.displayName = "ViewerSeat";
-const ne = O(({ stage: i, stageColor: h }) => /* @__PURE__ */ v(ke, { x: i.position.x, y: i.position.y, children: [
-  /* @__PURE__ */ r(
-    ee,
+it.displayName = "ViewerSeat";
+const rt = j(({ stage: n, stageColor: u }) => /* @__PURE__ */ x(Tt, { x: n.position.x, y: n.position.y, children: [
+  /* @__PURE__ */ i(
+    ot,
     {
-      width: i.config.width,
-      height: i.config.height,
-      fill: h + "80",
+      width: n.config.width,
+      height: n.config.height,
+      fill: u + "80",
       stroke: "#ffffff",
       strokeWidth: 2,
       cornerRadius: 10
     }
   ),
-  /* @__PURE__ */ r(
-    Ie,
+  /* @__PURE__ */ i(
+    jt,
     {
-      text: i.config.label,
+      text: n.config.label,
       x: 0,
       y: 0,
-      width: i.config.width,
-      height: i.config.height,
+      width: n.config.width,
+      height: n.config.height,
       fontSize: 24,
       fontStyle: "bold",
       fill: "#ffffff",
@@ -104,20 +114,20 @@ const ne = O(({ stage: i, stageColor: h }) => /* @__PURE__ */ v(ke, { x: i.posit
     }
   )
 ] }));
-ne.displayName = "ViewerStage";
-const ie = O(({
-  floors: i,
-  currentFloorId: h,
-  onFloorChange: c,
-  showAllOption: y,
-  allLabel: x,
-  position: w,
-  className: p
+rt.displayName = "ViewerStage";
+const st = j(({
+  floors: n,
+  currentFloorId: u,
+  onFloorChange: h,
+  showAllOption: r,
+  allLabel: b,
+  position: m,
+  className: v
 }) => {
-  const g = k(
-    () => [...i].sort((u, E) => u.order - E.order),
-    [i]
-  ), f = {
+  const w = L(
+    () => [...n].sort((f, N) => f.order - N.order),
+    [n]
+  ), s = {
     position: "absolute",
     display: "flex",
     alignItems: "center",
@@ -132,8 +142,8 @@ const ie = O(({
       "top-right": { top: 0, right: 0 },
       "bottom-left": { bottom: 0, left: 0 },
       "bottom-right": { bottom: 0, right: 0 }
-    }[w]
-  }, $ = {
+    }[m]
+  }, g = {
     padding: "6px 14px",
     fontSize: "14px",
     fontWeight: 500,
@@ -143,197 +153,392 @@ const ie = O(({
     color: "#fff",
     cursor: "pointer",
     transition: "all 0.2s ease"
-  }, A = {
-    ...$,
+  }, y = {
+    ...g,
     backgroundColor: "#3A7DE5",
     borderColor: "#3A7DE5"
   };
-  return /* @__PURE__ */ v("div", { className: p, style: f, children: [
-    y && /* @__PURE__ */ r(
+  return /* @__PURE__ */ x("div", { className: v, style: s, children: [
+    r && /* @__PURE__ */ i(
       "button",
       {
         type: "button",
-        onClick: () => c(null),
-        style: h === null ? A : $,
-        children: x
+        onClick: () => h(null),
+        style: u === null ? y : g,
+        children: b
       }
     ),
-    g.map((u) => /* @__PURE__ */ r(
+    w.map((f) => /* @__PURE__ */ i(
       "button",
       {
         type: "button",
-        onClick: () => c(u.id),
-        style: h === u.id ? A : $,
-        children: u.name
+        onClick: () => h(f.id),
+        style: u === f.id ? y : g,
+        children: f.name
       },
-      u.id
+      f.id
     ))
   ] });
 });
-ie.displayName = "FloorSelectorBar";
-const Ye = ({
-  config: i,
-  configUrl: h,
-  floorId: c,
-  onFloorChange: y,
-  reservedSeats: x = [],
-  unavailableSeats: w = [],
-  onSeatSelect: p,
-  onSeatDeselect: g,
-  onSelectionChange: d,
-  colorOverrides: f,
-  showTooltip: $ = !0,
-  zoomEnabled: A = !0,
-  className: u = "",
-  onConfigLoad: E,
-  onError: D,
+st.displayName = "FloorSelectorBar";
+const at = j(({
+  scale: n,
+  minScale: u,
+  maxScale: h,
+  onZoomIn: r,
+  onZoomOut: b,
+  position: m,
+  className: v
+}) => {
+  const p = {
+    position: "absolute",
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px",
+    padding: "8px",
+    backgroundColor: "rgba(26, 26, 26, 0.95)",
+    borderRadius: "8px",
+    margin: "12px",
+    zIndex: 10,
+    ...{
+      "top-left": { top: 0, left: 0 },
+      "top-right": { top: 0, right: 0 },
+      "bottom-left": { bottom: 0, left: 0 },
+      "bottom-right": { bottom: 0, right: 0 }
+    }[m]
+  }, s = {
+    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 = {
+    ...s,
+    opacity: 0.4,
+    cursor: "not-allowed"
+  }, y = n < h, f = n > u;
+  return /* @__PURE__ */ x("div", { className: v, style: p, children: [
+    /* @__PURE__ */ i(
+      "button",
+      {
+        type: "button",
+        onClick: r,
+        disabled: !y,
+        style: y ? s : g,
+        title: "Zoom In",
+        children: "+"
+      }
+    ),
+    /* @__PURE__ */ i(
+      "button",
+      {
+        type: "button",
+        onClick: b,
+        disabled: !f,
+        style: f ? s : g,
+        title: "Zoom Out",
+        children: "−"
+      }
+    )
+  ] });
+});
+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: U,
-  floorSelectorPosition: oe = "top-left",
-  floorSelectorClassName: re,
-  showAllFloorsOption: se = !0,
-  allFloorsLabel: ae = "All",
-  fitToView: j = !0,
-  fitPadding: H = 40
+  showFloorSelector: R,
+  floorSelectorPosition: ct = "top-left",
+  floorSelectorClassName: dt,
+  showAllFloorsOption: ft = !0,
+  allFloorsLabel: ht = "All",
+  fitToView: H = !0,
+  fitPadding: U = 40,
+  // Zoom controls
+  showZoomControls: ut = !0,
+  zoomControlsPosition: pt = "bottom-right",
+  zoomControlsClassName: gt,
+  maxZoom: X = 3,
+  zoomStep: O = 0.25
 }) => {
-  const q = we(null), [I, le] = S(/* @__PURE__ */ new Set()), [B, G] = S(1), [R, K] = S({ x: 0, y: 0 }), [ce, de] = S(null), [J, Q] = S(!1), { config: fe, loading: he, error: Y } = Ne(h), n = i || fe, L = c !== void 0, m = L ? c || null : ce, ue = W((e) => {
-    L || de(e), y?.(e);
-  }, [L, y]), P = n?.floors || [], pe = U !== void 0 ? U : P.length > 1, V = k(
-    () => n ? { ...n.colors, ...f } : { ...Fe, ...f },
-    [n, f]
-  ), M = k(() => {
-    if (!n) return [];
-    let e = n.seats.filter((t) => t.state !== "hidden");
-    return m && (e = e.filter(
-      (t) => t.floorId === m || !t.floorId && m === "floor_default"
-    )), e;
-  }, [n, m]), T = k(() => n?.stages ? m ? n.stages.filter(
-    (e) => e.floorId === m || !e.floorId && m === "floor_default"
-  ) : n.stages : [], [n, m]), b = k(() => {
-    if (!n || M.length === 0 && T.length === 0)
+  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((o) => o.state !== "hidden");
+    return k && (t = t.filter(
+      (o) => o.floorId === k || !o.floorId && k === "floor_default"
+    )), t;
+  }, [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 e = 12;
-    let t = 1 / 0, o = 1 / 0, s = -1 / 0, a = -1 / 0;
-    return M.forEach((l) => {
-      t = Math.min(t, l.position.x - e), o = Math.min(o, l.position.y - e), s = Math.max(s, l.position.x + e), a = Math.max(a, l.position.y + e);
-    }), T.forEach((l) => {
-      t = Math.min(t, l.position.x), o = Math.min(o, l.position.y), s = Math.max(s, l.position.x + (l.config?.width || 200)), a = Math.max(a, l.position.y + (l.config?.height || 100));
-    }), { minX: t, minY: o, maxX: s, maxY: a, width: s - t, height: a - o };
-  }, [n, M, T]);
-  F(() => {
-    if (!j || J || !n || !b) return;
-    const e = n.canvas.width, t = n.canvas.height, o = e - H * 2, s = t - H * 2, a = o / b.width, l = s / b.height, N = Math.min(a, l, 2), C = b.minX + b.width / 2, ye = b.minY + b.height / 2, xe = e / 2, be = t / 2, ve = xe - C * N, Se = be - ye * N;
-    G(N), K({ x: ve, y: Se }), Q(!0);
-  }, [j, J, n, b, H]), F(() => {
-    j && Q(!1);
-  }, [m, j]);
-  const z = k(() => {
-    const e = new Set(x), t = new Set(w);
-    return { reserved: e, unavailable: t };
-  }, [x, w]), _ = W((e) => {
-    const t = e.id, o = e.seatNumber || "";
-    return z.unavailable.has(t) || z.unavailable.has(o) ? "unavailable" : z.reserved.has(t) || z.reserved.has(o) ? "reserved" : I.has(t) ? "selected" : e.state;
-  }, [z, I]);
-  F(() => {
-    n && E && E(n);
-  }, [n, E]), F(() => {
-    Y && D && D(Y);
-  }, [Y, D]);
-  const ge = W((e) => {
-    const t = _(e);
-    if (t !== "available" && t !== "selected")
+    const t = 12;
+    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 o = I.has(e.id);
-    le((s) => {
-      const a = new Set(s);
-      return o ? a.delete(e.id) : a.add(e.id), a;
-    }), o ? g?.(e) : (p?.(e), p || console.log("Seat selected:", e));
-  }, [_, I, p, g]), X = k(() => n ? M.filter((e) => I.has(e.id)) : [], [M, I]);
-  F(() => {
-    d?.(X);
-  }, [X, d]);
-  const me = W((e) => {
-    if (!A) return;
-    e.evt.preventDefault();
-    const t = q.current;
-    if (!t) return;
-    const o = B, s = t.getPointerPosition();
-    if (!s) return;
-    const a = {
-      x: (s.x - R.x) / o,
-      y: (s.y - R.y) / o
-    }, l = e.evt.deltaY > 0 ? -1 : 1, N = 1.05;
-    let C = l > 0 ? o * N : o / N;
-    C = Math.max(0.5, Math.min(5, C)), G(C), K({
-      x: s.x - a.x * C,
-      y: s.y - a.y * C
+    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
+      };
+      q(t), Z({
+        x: c - d.x * t,
+        y: l - d.y * t
+      });
+    }
+  }, [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
+      };
+      q(t), Z({
+        x: c - d.x * t,
+        y: l - d.y * 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)
     });
-  }, [A, B, R]);
-  return he ? /* @__PURE__ */ r("div", { className: `flex items-center justify-center h-full ${u}`, children: /* @__PURE__ */ r("p", { children: "Loading seat map..." }) }) : Y ? /* @__PURE__ */ r("div", { className: `flex items-center justify-center h-full ${u}`, children: /* @__PURE__ */ v("p", { className: "text-red-500", children: [
+  }, [g, D]), Lt = C(() => {
+    et((t) => ({ ...t, visible: !1 }));
+  }, []);
+  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: ",
-    Y.message
-  ] }) }) : n ? /* @__PURE__ */ v("div", { className: `relative ${u}`, children: [
-    pe && P.length > 0 && /* @__PURE__ */ r(
-      ie,
+    $.message
+  ] }) }) : e ? /* @__PURE__ */ x("div", { className: `relative ${f}`, children: [
+    It && K.length > 0 && /* @__PURE__ */ i(
+      st,
       {
-        floors: P,
-        currentFloorId: m,
-        onFloorChange: ue,
-        showAllOption: se,
-        allLabel: ae,
-        position: oe,
-        className: re
+        floors: K,
+        currentFloorId: k,
+        onFloorChange: kt,
+        showAllOption: ft,
+        allLabel: ht,
+        position: ct,
+        className: dt
       }
     ),
-    /* @__PURE__ */ v(
-      Ce,
+    /* @__PURE__ */ x(
+      Dt,
       {
-        ref: q,
-        width: n.canvas.width,
-        height: n.canvas.height,
-        scaleX: B,
-        scaleY: B,
-        x: R.x,
-        y: R.y,
-        onWheel: me,
-        style: { backgroundColor: n.canvas.backgroundColor },
+        ref: yt,
+        width: e.canvas.width,
+        height: e.canvas.height,
+        scaleX: S,
+        scaleY: S,
+        x: F.x,
+        y: F.y,
+        draggable: !0,
+        onDragEnd: Ft,
+        style: { backgroundColor: e.canvas.backgroundColor, cursor: "grab" },
         children: [
-          /* @__PURE__ */ r(Z, { listening: !1, children: T.map((e) => /* @__PURE__ */ r(
-            ne,
+          /* @__PURE__ */ i(nt, { listening: !1, children: V.map((t) => /* @__PURE__ */ i(
+            rt,
             {
-              stage: e,
-              stageColor: V.stageColor
+              stage: t,
+              stageColor: P.stageColor
             },
-            e.id
+            t.id
           )) }),
-          /* @__PURE__ */ r(Z, { children: M.map((e) => /* @__PURE__ */ r(
-            te,
+          /* @__PURE__ */ i(nt, { children: B.map((t) => /* @__PURE__ */ i(
+            it,
             {
-              seat: e,
-              state: _(e),
-              colors: V,
-              onClick: ge
+              seat: t,
+              state: D(t),
+              colors: P,
+              onClick: Nt,
+              onMouseEnter: Et,
+              onMouseLeave: Lt
             },
-            e.id
+            t.id
           )) })
         ]
       }
     ),
-    X.length > 0 && /* @__PURE__ */ v("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
-      /* @__PURE__ */ v("h3", { className: "font-semibold mb-2", children: [
+    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: S,
+        minScale: J,
+        maxScale: X,
+        onZoomIn: Mt,
+        onZoomOut: Rt,
+        position: pt,
+        className: gt
+      }
+    ),
+    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 (",
-        X.length,
+        T.length,
         ")"
       ] }),
-      /* @__PURE__ */ r("div", { className: "max-h-48 overflow-y-auto space-y-1", children: X.map((e) => /* @__PURE__ */ v("div", { className: "text-sm", children: [
-        e.seatNumber,
-        e.price && ` - ${V.currency} ${e.price.toFixed(2)}`
-      ] }, e.id)) })
+      /* @__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 && ` - ${P.currency} ${t.price.toFixed(2)}`
+      ] }, t.id)) })
     ] })
-  ] }) : /* @__PURE__ */ r("div", { className: `flex items-center justify-center h-full ${u}`, children: /* @__PURE__ */ r("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 {
-  Fe as DEFAULT_COLORS,
-  Ye as SeatMapViewer,
-  Ne as useConfigFetcher
+  Zt as DEFAULT_COLORS,
+  Ut as SeatMapViewer,
+  Ot as useConfigFetcher
 };

package/package.json

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