@zonetrix/viewer 2.4.0 → 2.5.0

package/README.md

@@ -112,7 +112,7 @@ function BookingApp() {
 | `onSeatDeselect` | `(seat: SeatData) => void` | No | Callback when a seat is deselected |
 | `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) |
+| `showTooltip` | `boolean` | No | Show seat tooltips on hover with seat info, price, status (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 |

package/dist/components/SeatMapViewer.d.ts

@@ -28,5 +28,6 @@ export interface SeatMapViewerProps {
     zoomControlsClassName?: string;
     maxZoom?: number;
     zoomStep?: number;
+    touchEnabled?: boolean;
 }
 export declare const SeatMapViewer: React.FC<SeatMapViewerProps>;

package/dist/hooks/useContainerSize.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+interface ContainerSize {
+    width: number;
+    height: number;
+}
+/**
+ * Hook to track the size of a container element using ResizeObserver.
+ * Returns { width: 0, height: 0 } until the container is mounted and measured.
+ */
+export declare function useContainerSize(containerRef: RefObject<HTMLDivElement | null>): ContainerSize;
+export {};

package/dist/hooks/useTouchGestures.d.ts

@@ -0,0 +1,25 @@
+import { RefObject } from 'react';
+import { default as Konva } from 'konva';
+interface TouchGestureConfig {
+    enabled: boolean;
+    minScale: number;
+    maxScale: number;
+    currentScale: number;
+    currentPosition: {
+        x: number;
+        y: number;
+    };
+    onScaleChange: (scale: number, position: {
+        x: number;
+        y: number;
+    }) => void;
+    onPositionChange: (position: {
+        x: number;
+        y: number;
+    }) => void;
+}
+/**
+ * Hook to handle touch gestures (pinch-to-zoom and two-finger pan) on a Konva Stage.
+ */
+export declare function useTouchGestures(stageRef: RefObject<Konva.Stage | null>, config: TouchGestureConfig): void;
+export {};

package/dist/index.d.ts

@@ -3,3 +3,5 @@ export type { SeatMapViewerProps } from './components/SeatMapViewer';
 export type { SeatState, SeatShape, SeatData, SerializedSeat, SerializedSection, SerializedStage, ColorSettings, SeatMapConfig, FloorConfig, } from './types';
 export { DEFAULT_COLORS } from './types';
 export { useConfigFetcher } from './hooks/useConfigFetcher';
+export { useContainerSize } from './hooks/useContainerSize';
+export { useTouchGestures } from './hooks/useTouchGestures';

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

package/dist/index.mjs

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

package/package.json

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