@zonetrix/viewer 2.4.1 → 2.6.0

package/README.md

@@ -108,11 +108,12 @@ function BookingApp() {
 | `onFloorChange` | `(floorId: string) => void` | No | Callback when floor changes |
 | `reservedSeats` | `string[]` | No | Array of seat IDs/numbers to mark as reserved |
 | `unavailableSeats` | `string[]` | No | Array of seat IDs/numbers to mark as unavailable |
+| `selectedSeats` | `string[]` | No | Array of seat IDs for controlled selection mode |
 | `onSeatSelect` | `(seat: SeatData) => void` | No | Callback when a seat is selected |
 | `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 |
@@ -341,7 +342,88 @@ function CustomFloorSelector() {
 }
 ```
 
-### 7. Error Handling
+### 7. Controlled Selection Mode
+
+For complete control over seat selection state (e.g., syncing with external state, URL params, or database):
+
+```tsx
+import { useState } from 'react';
+import { SeatMapViewer } from '@zonetrix/viewer';
+import type { SeatData } from '@zonetrix/viewer';
+
+function ControlledSelection() {
+  const [selectedSeatIds, setSelectedSeatIds] = useState<string[]>([]);
+
+  const handleSeatSelect = (seat: SeatData) => {
+    setSelectedSeatIds(prev => [...prev, seat.id]);
+  };
+
+  const handleSeatDeselect = (seat: SeatData) => {
+    setSelectedSeatIds(prev => prev.filter(id => id !== seat.id));
+  };
+
+  return (
+    <SeatMapViewer
+      config={venueConfig}
+      selectedSeats={selectedSeatIds}  // Controlled mode
+      onSeatSelect={handleSeatSelect}
+      onSeatDeselect={handleSeatDeselect}
+    />
+  );
+}
+```
+
+**Use cases for controlled selection mode:**
+- Syncing selection with URL query parameters
+- Persisting selection in Redux/Zustand store
+- Loading pre-selected seats from database
+- Implementing undo/redo functionality
+- Syncing selection across multiple components
+- Integrating with shopping cart state management
+
+**Example with cart integration:**
+
+```tsx
+import { useState } from 'react';
+import { SeatMapViewer } from '@zonetrix/viewer';
+import type { SeatData } from '@zonetrix/viewer';
+
+function CartIntegration() {
+  const [cartItems, setCartItems] = useState<SeatData[]>([]);
+
+  // Derive selected IDs from cart
+  const selectedSeatIds = cartItems.map(seat => seat.id);
+
+  const handleSeatSelect = (seat: SeatData) => {
+    setCartItems(prev => [...prev, seat]);
+  };
+
+  const handleSeatDeselect = (seat: SeatData) => {
+    setCartItems(prev => prev.filter(item => item.id !== seat.id));
+  };
+
+  const totalPrice = cartItems.reduce((sum, seat) => sum + (seat.price || 0), 0);
+
+  return (
+    <div>
+      <SeatMapViewer
+        config={venueConfig}
+        selectedSeats={selectedSeatIds}
+        onSeatSelect={handleSeatSelect}
+        onSeatDeselect={handleSeatDeselect}
+      />
+
+      <div className="cart">
+        <h3>Shopping Cart</h3>
+        <p>Selected: {cartItems.length} seat(s)</p>
+        <p>Total: ${totalPrice.toFixed(2)}</p>
+      </div>
+    </div>
+  );
+}
+```
+
+### 8. Error Handling
 
 ```tsx
 import { SeatMapViewer } from '@zonetrix/viewer';

package/dist/components/SeatMapViewer.d.ts

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

package/dist/index.mjs

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

package/package.json

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