@zonetrix/viewer 2.13.0 → 2.13.2

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),n=require("react"),T=require("react-konva"),O=require("@zonetrix/shared");function Ce(o){const[f,t]=n.useState(null),[a,w]=n.useState(!1),[b,g]=n.useState(null),y=n.useCallback(async()=>{if(o){w(!0),g(null);try{const p=await fetch(o);if(!p.ok)throw new Error(`Failed to fetch config: ${p.statusText}`);const l=await p.json();t(l)}catch(p){const l=p instanceof Error?p:new Error("Unknown error occurred");g(l),console.error("Failed to fetch seat map config:",l)}finally{w(!1)}}},[o]);return n.useEffect(()=>{y()},[y]),{config:f,loading:a,error:b,refetch:y}}function je(o){const[f,t]=n.useState({width:0,height:0});return n.useEffect(()=>{const a=o.current;if(!a)return;const{width:w,height:b}=a.getBoundingClientRect();w>0&&b>0&&t({width:w,height:b});const g=new ResizeObserver(y=>{const p=y[0];if(!p)return;const{width:l,height:x}=p.contentRect;l>0&&x>0&&t(m=>m.width===l&&m.height===x?m:{width:l,height:x})});return g.observe(a),()=>{g.disconnect()}},[o]),f}function ve(o,f){return Math.sqrt(Math.pow(f.x-o.x,2)+Math.pow(f.y-o.y,2))}function we(o,f){return{x:(o.x+f.x)/2,y:(o.y+f.y)/2}}function Me(o,f){const t=n.useRef(null),a=n.useRef(null),w=n.useRef(1),{enabled:b,minScale:g,maxScale:y,currentScale:p,currentPosition:l,onScaleChange:x}=f;n.useEffect(()=>{const m=o.current;if(!m||!b)return;const d=m.container(),k=S=>{if(S.touches.length===2){S.preventDefault();const P={x:S.touches[0].clientX,y:S.touches[0].clientY},E={x:S.touches[1].clientX,y:S.touches[1].clientY};t.current=ve(P,E),a.current=we(P,E),w.current=p}},v=S=>{if(S.touches.length!==2)return;S.preventDefault();const P={x:S.touches[0].clientX,y:S.touches[0].clientY},E={x:S.touches[1].clientX,y:S.touches[1].clientY},Y=ve(P,E),M=we(P,E);if(t.current!==null&&a.current!==null){const $=Y/t.current,z=Math.min(Math.max(p*$,g),y),_=d.getBoundingClientRect(),A=M.x-_.left,ee=M.y-_.top,te=p,ne={x:(A-l.x)/te,y:(ee-l.y)/te},ie=M.x-a.current.x,L=M.y-a.current.y,B={x:A-ne.x*z+ie,y:ee-ne.y*z+L};x(z,B),t.current=Y,a.current=M}},C=S=>{S.touches.length<2&&(t.current=null,a.current=null)};return d.addEventListener("touchstart",k,{passive:!1}),d.addEventListener("touchmove",v,{passive:!1}),d.addEventListener("touchend",C),()=>{d.removeEventListener("touchstart",k),d.removeEventListener("touchmove",v),d.removeEventListener("touchend",C)}},[o,b,g,y,p,l,x])}const ke={canvasBackground:"#1a1a1a",stageColor:"#808080",seatAvailable:"#2C2B30",seatReserved:"#FCEA00",seatSelected:"#3A7DE5",seatUnavailable:"#6b7280",seatHidden:"#4a4a4a",gridLines:"#404040",currency:"KD"},Fe=n.memo(({seat:o,state:f,colors:t,onClick:a,onMouseEnter:w,onMouseLeave:b})=>{const g=(o.size||24)/2,p={available:t.seatAvailable,reserved:t.seatReserved,selected:t.seatSelected,unavailable:t.seatUnavailable,hidden:t.seatHidden}[f],l=f==="available"||f==="selected",x=n.useCallback(()=>{l&&a(o)},[o,a,l]),m=n.useCallback(v=>{w(o,v);const C=v.target.getStage();C&&l&&(C.container().style.cursor="pointer")},[o,w,l]),d=n.useCallback(v=>{b();const C=v.target.getStage();C&&(C.container().style.cursor="grab")},[b]),k={x:o.position.x,y:o.position.y,fill:p,stroke:"#ffffff",strokeWidth:1,onClick:x,onTap:x,onMouseEnter:m,onMouseLeave:d};return o.shape==="circle"?i.jsx(T.Circle,{...k,radius:g}):i.jsx(T.Rect,{...k,width:g*2,height:g*2,offsetX:g,offsetY:g,cornerRadius:o.shape==="square"?0:4})});Fe.displayName="ViewerSeat";const Re=n.memo(({stage:o,stageColor:f})=>{const t=o.config,a=t.shape||"rectangle",w=t.showLabel!==!1,b=t.color||f,g=t.width/t.height,y=g<.5,p=g>2;let l;y?l=t.width*.25:p?l=t.height*.35:l=Math.min(t.width,t.height)*.25;const x=t.label?.length||6,k=t.width*.85/x*1.5,v=Math.max(10,Math.min(24,Math.min(l,k))),C=4,S=Math.max(20,t.width-C*2),P=(t.width-S)/2,E={fill:b+"80",stroke:"#ffffff",strokeWidth:2,perfectDrawEnabled:!1,hitStrokeWidth:0},Y=()=>{switch(a){case"circle":{const M=Math.min(t.width,t.height)/2;return i.jsx(T.Circle,{x:t.width/2,y:t.height/2,radius:M,...E})}case"triangle":{const M=Math.min(t.width,t.height)/2;return i.jsx(T.RegularPolygon,{x:t.width/2,y:t.height/2,sides:3,radius:M,rotation:-90,...E})}case"arrow":{const M=t.width/24,$=t.height/24,z=`M${9*M},${18*$} v${-8*$} H${5*M} l${7*M},${-7*$} l${7*M},${7*$} h${-4*M} v${8*$} Z`;return i.jsx(T.Path,{data:z,...E})}default:return i.jsx(T.Rect,{width:t.width,height:t.height,cornerRadius:10,...E})}};return i.jsxs(T.Group,{x:o.position.x,y:o.position.y,rotation:t.rotation||0,children:[Y(),w&&i.jsx(T.Text,{text:t.label,x:P,y:C,width:S,height:t.height-C*2,fontSize:v,fontStyle:"bold",fill:"#ffffff",align:"center",verticalAlign:"middle",wrap:"word",ellipsis:!0})]})});Re.displayName="ViewerStage";const Ie=n.memo(({text:o})=>i.jsx(T.Text,{x:o.position.x,y:o.position.y,text:o.config.text,fontSize:o.config.fontSize,fill:o.config.color,rotation:o.config.rotation||0,listening:!1}));Ie.displayName="ViewerText";const Ee=n.memo(({floors:o,currentFloorId:f,onFloorChange:t,showAllOption:a,allLabel:w,position:b,className:g})=>{const y=n.useMemo(()=>[...o].sort((d,k)=>d.order-k.order),[o]),l={position:"absolute",display:"flex",alignItems:"center",gap:"8px",padding:"8px 12px",backgroundColor:"rgba(26, 26, 26, 0.95)",borderRadius:"8px",margin:"12px",zIndex:10,...{"top-left":{top:0,left:0},"top-right":{top:0,right:0},"bottom-left":{bottom:0,left:0},"bottom-right":{bottom:0,right:0}}[b]},x={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"},m={...x,backgroundColor:"#3A7DE5",borderColor:"#3A7DE5"};return i.jsxs("div",{className:g,style:l,children:[a&&i.jsx("button",{type:"button",onClick:()=>t(null),style:f===null?m:x,children:w}),y.map(d=>i.jsx("button",{type:"button",onClick:()=>t(d.id),style:f===d.id?m:x,children:d.name},d.id))]})});Ee.displayName="FloorSelectorBar";const Te=n.memo(({scale:o,minScale:f,maxScale:t,fitScale:a,onZoomIn:w,onZoomOut:b,onFitToScreen:g,position:y,className:p})=>{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}}[y]},m={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"},d={...m,opacity:.4,cursor:"not-allowed"},k=o<t,v=o>f,C=Math.abs(o-a)<.01;return i.jsxs("div",{className:p,style:x,children:[i.jsx("button",{type:"button",onClick:w,disabled:!k,style:k?m:d,title:"Zoom In","aria-label":"Zoom In",children:"+"}),i.jsx("button",{type:"button",onClick:g,disabled:C,style:C?d:m,title:"Fit to Screen","aria-label":"Fit to Screen",children:"⤢"}),i.jsx("button",{type:"button",onClick:b,disabled:!v,style:v?m:d,title:"Zoom Out","aria-label":"Zoom Out",children:"−"})]})});Te.displayName="ZoomControls";const De=n.memo(({visible:o,x:f,y:t,seat:a,currency:w,state:b})=>{if(!o||!a)return null;const g=a.seatNumber||(a.rowLabel&&a.columnLabel?`${a.rowLabel}-${a.columnLabel}`:"N/A"),y={position:"fixed",left:`${f+15}px`,top:`${t+15}px`,zIndex:1e3,pointerEvents:"none"},p={backgroundColor:"rgba(26, 26, 26, 0.95)",color:"#fff",border:"1px solid #444",borderRadius:"8px",padding:"8px 12px",fontSize:"13px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.3)",minWidth:"140px"},l={color:"#9ca3af",marginRight:"4px"},x={fontWeight:600},m={color:"#4ade80",fontWeight:600},d={fontSize:"11px",color:"#6b7280",textTransform:"capitalize",marginTop:"4px"};return i.jsx("div",{style:y,children:i.jsxs("div",{style:p,children:[a.sectionName&&i.jsxs("div",{style:{marginBottom:"4px"},children:[i.jsx("span",{style:l,children:"Section:"}),i.jsx("span",{style:{...x,color:"#3b82f6"},children:a.sectionName})]}),i.jsxs("div",{style:{marginBottom:"4px"},children:[i.jsx("span",{style:l,children:"Seat:"}),i.jsx("span",{style:x,children:g})]}),a.price!==void 0&&a.price>0&&b==="available"&&i.jsxs("div",{style:{marginBottom:"4px"},children:[i.jsx("span",{style:l,children:"Price:"}),i.jsxs("span",{style:m,children:[w," ",a.price.toFixed(2)]})]}),i.jsxs("div",{style:d,children:["Status: ",b]})]})})});De.displayName="SeatTooltip";const et=({config:o,configUrl:f,floorId:t,onFloorChange:a,reservedSeats:w=[],otherReservedSeats:b,unavailableSeats:g=[],selectedSeats:y,myReservedSeats:p=[],onSeatSelect:l,onSeatDeselect:x,onSelectionChange:m,colorOverrides:d,showTooltip:k=!0,zoomEnabled:v=!0,className:C="",onConfigLoad:S,onError:P,showFloorSelector:E,floorSelectorPosition:Y="top-left",floorSelectorClassName:M,showAllFloorsOption:$=!0,allFloorsLabel:z="All",fitToView:_=!0,fitPadding:A=40,showZoomControls:ee=!0,zoomControlsPosition:te="bottom-right",zoomControlsClassName:ne,minZoom:ie,maxZoom:L=3,zoomStep:B=.25,touchEnabled:Pe=!0})=>{const xe=b!==void 0?b:w,ue=n.useRef(null),be=n.useRef(null),j=je(be),[H,ye]=n.useState(new Set),[R,G]=n.useState(1),[D,V]=n.useState({x:0,y:0}),[Le,Ne]=n.useState(null),[me,We]=n.useState(1),oe=n.useRef({width:0,height:0}),[U,Se]=n.useState({visible:!1,x:0,y:0,seat:null,state:"available"}),{config:$e,loading:ze,error:K}=Ce(f),c=o||$e,he=t!==void 0,I=he?t||null:Le,se=y!==void 0,Xe=n.useCallback(e=>{he||Ne(e),a?.(e)},[he,a]),de=c?.floors||[],Oe=E!==void 0?E:de.length>1,re=n.useMemo(()=>c?{...c.colors,...d}:{...ke,...d},[c,d]),q=n.useMemo(()=>{if(!c)return[];let e=c.seats.filter(s=>s.state!=="hidden");return I&&(e=e.filter(s=>s.floorId===I||!s.floorId&&I==="floor_default")),e},[c,I]),ae=n.useMemo(()=>c?.stages?I?c.stages.filter(e=>e.floorId===I||!e.floorId&&I==="floor_default"):c.stages:[],[c,I]),ce=n.useMemo(()=>c?.texts?I?c.texts.filter(e=>e.floorId===I||!e.floorId&&I==="floor_default"):c.texts:[],[c,I]),N=n.useMemo(()=>{if(!c||q.length===0&&ae.length===0&&ce.length===0)return null;let e=1/0,s=1/0,u=-1/0,h=-1/0;return q.forEach(r=>{const F=(r.size||24)/2;e=Math.min(e,r.position.x-F),s=Math.min(s,r.position.y-F),u=Math.max(u,r.position.x+F),h=Math.max(h,r.position.y+F)}),ae.forEach(r=>{e=Math.min(e,r.position.x),s=Math.min(s,r.position.y),u=Math.max(u,r.position.x+(r.config?.width||200)),h=Math.max(h,r.position.y+(r.config?.height||100))}),ce.forEach(r=>{const F=r.config.text.length*r.config.fontSize*.6,W=r.config.fontSize;e=Math.min(e,r.position.x),s=Math.min(s,r.position.y),u=Math.max(u,r.position.x+F),h=Math.max(h,r.position.y+W)}),{minX:e,minY:s,maxX:u,maxY:h,width:u-e,height:h-s}},[c,q,ae,ce]),fe=n.useCallback(()=>{if(!c||!N||j.width===0||j.height===0)return;const e=j.width,s=j.height,u=e-A*2,h=s-A*2,r=u/N.width,F=h/N.height,W=Math.min(r,F,L),le=N.minX+N.width/2,pe=N.minY+N.height/2,Ue=e/2,Ke=s/2,Je=Ue-le*W,Qe=Ke-pe*W;G(W),V({x:Je,y:Qe}),We(W)},[c,N,j,A,L]);n.useEffect(()=>{if(!_||!c||!N||j.width===0||j.height===0)return;const e=Math.abs(j.width-oe.current.width),s=Math.abs(j.height-oe.current.height);!(oe.current.width===0)&&e<10&&s<10||(oe.current=j,fe())},[_,c,N,j,I,fe]);const X=n.useMemo(()=>{const e=new Set(xe),s=new Set(g),u=new Set(p);return{reserved:e,unavailable:s,myReserved:u}},[xe,g,p]),ge=n.useMemo(()=>y?new Set(y):null,[y]),J=n.useCallback(e=>{const s=e.id,u=e.seatNumber||"";return X.unavailable.has(s)||X.unavailable.has(u)?"unavailable":X.reserved.has(s)||X.reserved.has(u)?"reserved":X.myReserved.has(s)||X.myReserved.has(u)||H.has(s)?"selected":e.state},[X,H]);n.useEffect(()=>{c&&S&&S(c)},[c,S]),n.useEffect(()=>{K&&P&&P(K)},[K,P]),n.useEffect(()=>{se&&ge&&ye(ge)},[se,ge]);const Ye=n.useCallback(e=>{const s=J(e);if(s!=="available"&&s!=="selected")return;const u=H.has(e.id);se||ye(h=>{const r=new Set(h);return u?r.delete(e.id):r.add(e.id),r}),u?x?.(e):(l?.(e),l||console.log("Seat selected:",e))},[J,H,se,l,x]),Q=n.useMemo(()=>c?q.filter(e=>H.has(e.id)):[],[c,q,H]);n.useEffect(()=>{m?.(Q)},[Q,m]);const Z=ie!==void 0?ie:me*.5,Ae=n.useCallback(()=>{if(!v)return;const e=Math.min(R+B,L);if(e!==R){const s=j.width||c?.canvas.width||800,u=j.height||c?.canvas.height||600,h=s/2,r=u/2,F={x:(h-D.x)/R,y:(r-D.y)/R};G(e),V({x:h-F.x*e,y:r-F.y*e})}},[v,R,B,L,j,c,D]),Be=n.useCallback(()=>{if(!v)return;const e=Math.max(R-B,Z);if(e!==R){const s=j.width||c?.canvas.width||800,u=j.height||c?.canvas.height||600,h=s/2,r=u/2,F={x:(h-D.x)/R,y:(r-D.y)/R};G(e),V({x:h-F.x*e,y:r-F.y*e})}},[v,R,B,Z,j,c,D]),He=n.useCallback(e=>{V({x:e.target.x(),y:e.target.y()})},[]),Ve=n.useCallback(e=>{if(!v)return;e.evt.preventDefault();const s=ue.current;if(!s)return;const u=s.scaleX(),h=s.getPointerPosition();if(!h)return;const r=1.1,F=e.evt.deltaY>0?u/r:u*r,W=Math.min(Math.max(F,Z),L),le={x:(h.x-D.x)/u,y:(h.y-D.y)/u},pe={x:h.x-le.x*W,y:h.y-le.y*W};G(W),V(pe)},[v,D,Z,L]);Me(ue,{enabled:Pe&&v,minScale:Z,maxScale:L,currentScale:R,currentPosition:D,onScaleChange:(e,s)=>{G(e),V(s)}});const qe=n.useCallback((e,s)=>{if(!k)return;const u=s.target.getStage();if(!u)return;const h=u.getPointerPosition();if(!h)return;const r=u.container().getBoundingClientRect();Se({visible:!0,x:r.left+h.x,y:r.top+h.y,seat:e,state:J(e)})},[k,J]),Ze=n.useCallback(()=>{Se(e=>({...e,visible:!1}))},[]);if(ze)return i.jsx("div",{className:`flex items-center justify-center h-full ${C}`,children:i.jsx("p",{children:"Loading seat map..."})});if(K)return i.jsx("div",{className:`flex items-center justify-center h-full ${C}`,children:i.jsxs("p",{className:"text-red-500",children:["Error loading seat map: ",K.message]})});if(!c)return i.jsx("div",{className:`flex items-center justify-center h-full ${C}`,children:i.jsx("p",{children:"No configuration provided"})});const _e=j.width||c.canvas.width,Ge=j.height||c.canvas.height;return i.jsxs("div",{ref:be,className:`relative ${C}`,style:{width:"100%",height:"100%"},children:[Oe&&de.length>0&&i.jsx(Ee,{floors:de,currentFloorId:I,onFloorChange:Xe,showAllOption:$,allLabel:z,position:Y,className:M}),i.jsxs(T.Stage,{ref:ue,width:_e,height:Ge,scaleX:R,scaleY:R,x:D.x,y:D.y,draggable:!0,onDragEnd:He,onWheel:Ve,style:{backgroundColor:c.canvas.backgroundColor,cursor:"grab"},children:[i.jsx(T.Layer,{listening:!1,children:ae.map(e=>i.jsx(Re,{stage:e,stageColor:re.stageColor},e.id))}),i.jsx(T.Layer,{listening:!1,children:ce.map(e=>i.jsx(Ie,{text:e},e.id))}),i.jsx(T.Layer,{children:q.map(e=>i.jsx(Fe,{seat:e,state:J(e),colors:re,onClick:Ye,onMouseEnter:qe,onMouseLeave:Ze},e.id))})]}),k&&i.jsx(De,{visible:U.visible,x:U.x,y:U.y,seat:U.seat,currency:re.currency,state:U.state}),ee&&v&&i.jsx(Te,{scale:R,minScale:Z,maxScale:L,fitScale:me,onZoomIn:Ae,onZoomOut:Be,onFitToScreen:fe,position:te,className:ne}),Q.length>0&&i.jsxs("div",{className:"absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg",children:[i.jsxs("h3",{className:"font-semibold mb-2",children:["Selected Seats (",Q.length,")"]}),i.jsx("div",{className:"max-h-48 overflow-y-auto space-y-1",children:Q.map(e=>i.jsxs("div",{className:"text-sm",children:[e.seatNumber,e.price&&` - ${re.currency} ${e.price.toFixed(2)}`]},e.id))})]})]})};Object.defineProperty(exports,"clearFirebaseInstance",{enumerable:!0,get:()=>O.clearFirebaseInstance});Object.defineProperty(exports,"getFirebaseDatabase",{enumerable:!0,get:()=>O.getFirebaseDatabase});Object.defineProperty(exports,"initializeFirebaseForViewer",{enumerable:!0,get:()=>O.initializeFirebaseForViewer});Object.defineProperty(exports,"isFirebaseInitialized",{enumerable:!0,get:()=>O.isFirebaseInitialized});Object.defineProperty(exports,"useFirebaseConfig",{enumerable:!0,get:()=>O.useFirebaseConfig});Object.defineProperty(exports,"useFirebaseSeatStates",{enumerable:!0,get:()=>O.useFirebaseSeatStates});Object.defineProperty(exports,"useRealtimeSeatMap",{enumerable:!0,get:()=>O.useRealtimeSeatMap});exports.DEFAULT_COLORS=ke;exports.SeatMapViewer=et;exports.useConfigFetcher=Ce;exports.useContainerSize=je;exports.useTouchGestures=Me;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),n=require("react"),T=require("react-konva"),z=require("@zonetrix/shared");function Ce(i){const[f,t]=n.useState(null),[a,w]=n.useState(!1),[b,g]=n.useState(null),y=n.useCallback(async()=>{if(i){w(!0),g(null);try{const p=await fetch(i);if(!p.ok)throw new Error(`Failed to fetch config: ${p.statusText}`);const l=await p.json();t(l)}catch(p){const l=p instanceof Error?p:new Error("Unknown error occurred");g(l),console.error("Failed to fetch seat map config:",l)}finally{w(!1)}}},[i]);return n.useEffect(()=>{y()},[y]),{config:f,loading:a,error:b,refetch:y}}function je(i){const[f,t]=n.useState({width:0,height:0});return n.useEffect(()=>{const a=i.current;if(!a)return;const{width:w,height:b}=a.getBoundingClientRect();w>0&&b>0&&t({width:w,height:b});const g=new ResizeObserver(y=>{const p=y[0];if(!p)return;const{width:l,height:x}=p.contentRect;l>0&&x>0&&t(m=>m.width===l&&m.height===x?m:{width:l,height:x})});return g.observe(a),()=>{g.disconnect()}},[i]),f}function ve(i,f){return Math.sqrt(Math.pow(f.x-i.x,2)+Math.pow(f.y-i.y,2))}function we(i,f){return{x:(i.x+f.x)/2,y:(i.y+f.y)/2}}function Me(i,f){const t=n.useRef(null),a=n.useRef(null),w=n.useRef(1),{enabled:b,minScale:g,maxScale:y,currentScale:p,currentPosition:l,onScaleChange:x}=f;n.useEffect(()=>{const m=i.current;if(!m||!b)return;const d=m.container(),k=S=>{if(S.touches.length===2){S.preventDefault();const P={x:S.touches[0].clientX,y:S.touches[0].clientY},E={x:S.touches[1].clientX,y:S.touches[1].clientY};t.current=ve(P,E),a.current=we(P,E),w.current=p}},v=S=>{if(S.touches.length!==2)return;S.preventDefault();const P={x:S.touches[0].clientX,y:S.touches[0].clientY},E={x:S.touches[1].clientX,y:S.touches[1].clientY},O=ve(P,E),M=we(P,E);if(t.current!==null&&a.current!==null){const X=O/t.current,Y=Math.min(Math.max(p*X,g),y),G=d.getBoundingClientRect(),A=M.x-G.left,ne=M.y-G.top,ie=p,se={x:(A-l.x)/ie,y:(ne-l.y)/ie},oe=M.x-a.current.x,L=M.y-a.current.y,B={x:A-se.x*Y+oe,y:ne-se.y*Y+L};x(Y,B),t.current=O,a.current=M}},C=S=>{S.touches.length<2&&(t.current=null,a.current=null)};return d.addEventListener("touchstart",k,{passive:!1}),d.addEventListener("touchmove",v,{passive:!1}),d.addEventListener("touchend",C),()=>{d.removeEventListener("touchstart",k),d.removeEventListener("touchmove",v),d.removeEventListener("touchend",C)}},[i,b,g,y,p,l,x])}const ke={canvasBackground:"#1a1a1a",stageColor:"#808080",seatAvailable:"#2C2B30",seatReserved:"#FCEA00",seatSelected:"#3A7DE5",seatUnavailable:"#6b7280",seatHidden:"#4a4a4a",gridLines:"#404040",currency:"KD"},Fe=n.memo(({seat:i,state:f,colors:t,onClick:a,onMouseEnter:w,onMouseLeave:b})=>{const g=(i.size||24)/2,p={available:t.seatAvailable,reserved:t.seatReserved,selected:t.seatSelected,unavailable:t.seatUnavailable,hidden:t.seatHidden}[f],l=f==="available"||f==="selected",x=n.useCallback(()=>{l&&a(i)},[i,a,l]),m=n.useCallback(v=>{w(i,v);const C=v.target.getStage();C&&l&&(C.container().style.cursor="pointer")},[i,w,l]),d=n.useCallback(v=>{b();const C=v.target.getStage();C&&(C.container().style.cursor="grab")},[b]),k={x:i.position.x,y:i.position.y,fill:p,stroke:"#ffffff",strokeWidth:1,onClick:x,onTap:x,onMouseEnter:m,onMouseLeave:d};return i.shape==="circle"?s.jsx(T.Circle,{...k,radius:g}):s.jsx(T.Rect,{...k,width:g*2,height:g*2,offsetX:g,offsetY:g,cornerRadius:i.shape==="square"?0:4})});Fe.displayName="ViewerSeat";const Re=n.memo(({stage:i,stageColor:f})=>{const t=i.config,a=t.shape||"rectangle",w=t.showLabel!==!1,b=t.color||f,g=t.width/t.height,y=g<.5,p=g>2;let l;y?l=t.width*.25:p?l=t.height*.35:l=Math.min(t.width,t.height)*.25;const x=t.label?.length||6,k=t.width*.85/x*1.5,v=Math.max(10,Math.min(24,Math.min(l,k))),C=4,S=Math.max(20,t.width-C*2),P=(t.width-S)/2,E={fill:b+"80",stroke:"#ffffff",strokeWidth:2,perfectDrawEnabled:!1,hitStrokeWidth:0},O=()=>{switch(a){case"circle":{const M=Math.min(t.width,t.height)/2;return s.jsx(T.Circle,{x:t.width/2,y:t.height/2,radius:M,...E})}case"triangle":{const M=Math.min(t.width,t.height)/2;return s.jsx(T.RegularPolygon,{x:t.width/2,y:t.height/2,sides:3,radius:M,rotation:-90,...E})}case"arrow":{const M=t.width/24,X=t.height/24,Y=`M${9*M},${18*X} v${-8*X} H${5*M} l${7*M},${-7*X} l${7*M},${7*X} h${-4*M} v${8*X} Z`;return s.jsx(T.Path,{data:Y,...E})}default:return s.jsx(T.Rect,{width:t.width,height:t.height,cornerRadius:10,...E})}};return s.jsxs(T.Group,{x:i.position.x,y:i.position.y,rotation:t.rotation||0,children:[O(),w&&s.jsx(T.Text,{text:t.label,x:P,y:C,width:S,height:t.height-C*2,fontSize:v,fontStyle:"bold",fill:"#ffffff",align:"center",verticalAlign:"middle",wrap:"word",ellipsis:!0})]})});Re.displayName="ViewerStage";const Ie=n.memo(({text:i})=>s.jsx(T.Text,{x:i.position.x,y:i.position.y,text:i.config.text,fontSize:i.config.fontSize,fill:i.config.color,rotation:i.config.rotation||0,scaleX:i.config.scaleX||1,scaleY:i.config.scaleY||1,listening:!1}));Ie.displayName="ViewerText";const Ee=n.memo(({floors:i,currentFloorId:f,onFloorChange:t,showAllOption:a,allLabel:w,position:b,className:g})=>{const y=n.useMemo(()=>[...i].sort((d,k)=>d.order-k.order),[i]),l={position:"absolute",display:"flex",alignItems:"center",gap:"8px",padding:"8px 12px",backgroundColor:"rgba(26, 26, 26, 0.95)",borderRadius:"8px",margin:"12px",zIndex:10,...{"top-left":{top:0,left:0},"top-right":{top:0,right:0},"bottom-left":{bottom:0,left:0},"bottom-right":{bottom:0,right:0}}[b]},x={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"},m={...x,backgroundColor:"#3A7DE5",borderColor:"#3A7DE5"};return s.jsxs("div",{className:g,style:l,children:[a&&s.jsx("button",{type:"button",onClick:()=>t(null),style:f===null?m:x,children:w}),y.map(d=>s.jsx("button",{type:"button",onClick:()=>t(d.id),style:f===d.id?m:x,children:d.name},d.id))]})});Ee.displayName="FloorSelectorBar";const Te=n.memo(({scale:i,minScale:f,maxScale:t,fitScale:a,onZoomIn:w,onZoomOut:b,onFitToScreen:g,position:y,className:p})=>{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}}[y]},m={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"},d={...m,opacity:.4,cursor:"not-allowed"},k=i<t,v=i>f,C=Math.abs(i-a)<.01;return s.jsxs("div",{className:p,style:x,children:[s.jsx("button",{type:"button",onClick:w,disabled:!k,style:k?m:d,title:"Zoom In","aria-label":"Zoom In",children:"+"}),s.jsx("button",{type:"button",onClick:g,disabled:C,style:C?d:m,title:"Fit to Screen","aria-label":"Fit to Screen",children:"⤢"}),s.jsx("button",{type:"button",onClick:b,disabled:!v,style:v?m:d,title:"Zoom Out","aria-label":"Zoom Out",children:"−"})]})});Te.displayName="ZoomControls";const De=n.memo(({visible:i,x:f,y:t,seat:a,currency:w,state:b})=>{if(!i||!a)return null;const g=a.seatNumber||(a.rowLabel&&a.columnLabel?`${a.rowLabel}-${a.columnLabel}`:"N/A"),y={position:"fixed",left:`${f+15}px`,top:`${t+15}px`,zIndex:1e3,pointerEvents:"none"},p={backgroundColor:"rgba(26, 26, 26, 0.95)",color:"#fff",border:"1px solid #444",borderRadius:"8px",padding:"8px 12px",fontSize:"13px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.3)",minWidth:"140px"},l={color:"#9ca3af",marginRight:"4px"},x={fontWeight:600},m={color:"#4ade80",fontWeight:600},d={fontSize:"11px",color:"#6b7280",textTransform:"capitalize",marginTop:"4px"};return s.jsx("div",{style:y,children:s.jsxs("div",{style:p,children:[a.sectionName&&s.jsxs("div",{style:{marginBottom:"4px"},children:[s.jsx("span",{style:l,children:"Section:"}),s.jsx("span",{style:{...x,color:"#3b82f6"},children:a.sectionName})]}),s.jsxs("div",{style:{marginBottom:"4px"},children:[s.jsx("span",{style:l,children:"Seat:"}),s.jsx("span",{style:x,children:g})]}),a.price!==void 0&&a.price>0&&b==="available"&&s.jsxs("div",{style:{marginBottom:"4px"},children:[s.jsx("span",{style:l,children:"Price:"}),s.jsxs("span",{style:m,children:[w," ",a.price.toFixed(2)]})]}),s.jsxs("div",{style:d,children:["Status: ",b]})]})})});De.displayName="SeatTooltip";const et=({config:i,configUrl:f,floorId:t,onFloorChange:a,reservedSeats:w=[],otherReservedSeats:b,unavailableSeats:g=[],selectedSeats:y,myReservedSeats:p=[],onSeatSelect:l,onSeatDeselect:x,onSelectionChange:m,colorOverrides:d,showTooltip:k=!0,zoomEnabled:v=!0,className:C="",onConfigLoad:S,onError:P,showFloorSelector:E,floorSelectorPosition:O="top-left",floorSelectorClassName:M,showAllFloorsOption:X=!0,allFloorsLabel:Y="All",fitToView:G=!0,fitPadding:A=40,showZoomControls:ne=!0,zoomControlsPosition:ie="bottom-right",zoomControlsClassName:se,minZoom:oe,maxZoom:L=3,zoomStep:B=.25,touchEnabled:Pe=!0})=>{const xe=b!==void 0?b:w,he=n.useRef(null),be=n.useRef(null),j=je(be),[H,ye]=n.useState(new Set),[R,U]=n.useState(1),[D,V]=n.useState({x:0,y:0}),[Le,Ne]=n.useState(null),[me,We]=n.useState(1),re=n.useRef({width:0,height:0}),[K,Se]=n.useState({visible:!1,x:0,y:0,seat:null,state:"available"}),{config:Xe,loading:Ye,error:J}=Ce(f),c=i||Xe,de=t!==void 0,I=de?t||null:Le,ae=y!==void 0,$e=n.useCallback(e=>{de||Ne(e),a?.(e)},[de,a]),fe=c?.floors||[],ze=E!==void 0?E:fe.length>1,ce=n.useMemo(()=>c?{...c.colors,...d}:{...ke,...d},[c,d]),q=n.useMemo(()=>{if(!c)return[];let e=c.seats.filter(o=>o.state!=="hidden");return I&&(e=e.filter(o=>o.floorId===I||!o.floorId&&I==="floor_default")),e},[c,I]),le=n.useMemo(()=>c?.stages?I?c.stages.filter(e=>e.floorId===I||!e.floorId&&I==="floor_default"):c.stages:[],[c,I]),ue=n.useMemo(()=>c?.texts?I?c.texts.filter(e=>e.floorId===I||!e.floorId&&I==="floor_default"):c.texts:[],[c,I]),N=n.useMemo(()=>{if(!c||q.length===0&&le.length===0&&ue.length===0)return null;let e=1/0,o=1/0,u=-1/0,h=-1/0;return q.forEach(r=>{const F=(r.size||24)/2;e=Math.min(e,r.position.x-F),o=Math.min(o,r.position.y-F),u=Math.max(u,r.position.x+F),h=Math.max(h,r.position.y+F)}),le.forEach(r=>{e=Math.min(e,r.position.x),o=Math.min(o,r.position.y),u=Math.max(u,r.position.x+(r.config?.width||200)),h=Math.max(h,r.position.y+(r.config?.height||100))}),ue.forEach(r=>{const F=r.config.scaleX||1,W=r.config.scaleY||1,_=r.config.text.length*r.config.fontSize*.6*F,te=r.config.fontSize*W;e=Math.min(e,r.position.x),o=Math.min(o,r.position.y),u=Math.max(u,r.position.x+_),h=Math.max(h,r.position.y+te)}),{minX:e,minY:o,maxX:u,maxY:h,width:u-e,height:h-o}},[c,q,le,ue]),ge=n.useCallback(()=>{if(!c||!N||j.width===0||j.height===0)return;const e=j.width,o=j.height,u=e-A*2,h=o-A*2,r=u/N.width,F=h/N.height,W=Math.min(r,F,L),_=N.minX+N.width/2,te=N.minY+N.height/2,Ue=e/2,Ke=o/2,Je=Ue-_*W,Qe=Ke-te*W;U(W),V({x:Je,y:Qe}),We(W)},[c,N,j,A,L]);n.useEffect(()=>{if(!G||!c||!N||j.width===0||j.height===0)return;const e=Math.abs(j.width-re.current.width),o=Math.abs(j.height-re.current.height);!(re.current.width===0)&&e<10&&o<10||(re.current=j,ge())},[G,c,N,j,I,ge]);const $=n.useMemo(()=>{const e=new Set(xe),o=new Set(g),u=new Set(p);return{reserved:e,unavailable:o,myReserved:u}},[xe,g,p]),pe=n.useMemo(()=>y?new Set(y):null,[y]),Q=n.useCallback(e=>{const o=e.id,u=e.seatNumber||"";return $.unavailable.has(o)||$.unavailable.has(u)?"unavailable":$.reserved.has(o)||$.reserved.has(u)?"reserved":$.myReserved.has(o)||$.myReserved.has(u)||H.has(o)?"selected":e.state},[$,H]);n.useEffect(()=>{c&&S&&S(c)},[c,S]),n.useEffect(()=>{J&&P&&P(J)},[J,P]),n.useEffect(()=>{ae&&pe&&ye(pe)},[ae,pe]);const Oe=n.useCallback(e=>{const o=Q(e);if(o!=="available"&&o!=="selected")return;const u=H.has(e.id);ae||ye(h=>{const r=new Set(h);return u?r.delete(e.id):r.add(e.id),r}),u?x?.(e):(l?.(e),l||console.log("Seat selected:",e))},[Q,H,ae,l,x]),ee=n.useMemo(()=>c?q.filter(e=>H.has(e.id)):[],[c,q,H]);n.useEffect(()=>{m?.(ee)},[ee,m]);const Z=oe!==void 0?oe:me*.5,Ae=n.useCallback(()=>{if(!v)return;const e=Math.min(R+B,L);if(e!==R){const o=j.width||c?.canvas.width||800,u=j.height||c?.canvas.height||600,h=o/2,r=u/2,F={x:(h-D.x)/R,y:(r-D.y)/R};U(e),V({x:h-F.x*e,y:r-F.y*e})}},[v,R,B,L,j,c,D]),Be=n.useCallback(()=>{if(!v)return;const e=Math.max(R-B,Z);if(e!==R){const o=j.width||c?.canvas.width||800,u=j.height||c?.canvas.height||600,h=o/2,r=u/2,F={x:(h-D.x)/R,y:(r-D.y)/R};U(e),V({x:h-F.x*e,y:r-F.y*e})}},[v,R,B,Z,j,c,D]),He=n.useCallback(e=>{V({x:e.target.x(),y:e.target.y()})},[]),Ve=n.useCallback(e=>{if(!v)return;e.evt.preventDefault();const o=he.current;if(!o)return;const u=o.scaleX(),h=o.getPointerPosition();if(!h)return;const r=1.1,F=e.evt.deltaY>0?u/r:u*r,W=Math.min(Math.max(F,Z),L),_={x:(h.x-D.x)/u,y:(h.y-D.y)/u},te={x:h.x-_.x*W,y:h.y-_.y*W};U(W),V(te)},[v,D,Z,L]);Me(he,{enabled:Pe&&v,minScale:Z,maxScale:L,currentScale:R,currentPosition:D,onScaleChange:(e,o)=>{U(e),V(o)}});const qe=n.useCallback((e,o)=>{if(!k)return;const u=o.target.getStage();if(!u)return;const h=u.getPointerPosition();if(!h)return;const r=u.container().getBoundingClientRect();Se({visible:!0,x:r.left+h.x,y:r.top+h.y,seat:e,state:Q(e)})},[k,Q]),Ze=n.useCallback(()=>{Se(e=>({...e,visible:!1}))},[]);if(Ye)return s.jsx("div",{className:`flex items-center justify-center h-full ${C}`,children:s.jsx("p",{children:"Loading seat map..."})});if(J)return s.jsx("div",{className:`flex items-center justify-center h-full ${C}`,children:s.jsxs("p",{className:"text-red-500",children:["Error loading seat map: ",J.message]})});if(!c)return s.jsx("div",{className:`flex items-center justify-center h-full ${C}`,children:s.jsx("p",{children:"No configuration provided"})});const _e=j.width||c.canvas.width,Ge=j.height||c.canvas.height;return s.jsxs("div",{ref:be,className:`relative ${C}`,style:{width:"100%",height:"100%"},children:[ze&&fe.length>0&&s.jsx(Ee,{floors:fe,currentFloorId:I,onFloorChange:$e,showAllOption:X,allLabel:Y,position:O,className:M}),s.jsxs(T.Stage,{ref:he,width:_e,height:Ge,scaleX:R,scaleY:R,x:D.x,y:D.y,draggable:!0,onDragEnd:He,onWheel:Ve,style:{backgroundColor:c.canvas.backgroundColor,cursor:"grab"},children:[s.jsx(T.Layer,{listening:!1,children:le.map(e=>s.jsx(Re,{stage:e,stageColor:ce.stageColor},e.id))}),s.jsx(T.Layer,{listening:!1,children:ue.map(e=>s.jsx(Ie,{text:e},e.id))}),s.jsx(T.Layer,{children:q.map(e=>s.jsx(Fe,{seat:e,state:Q(e),colors:ce,onClick:Oe,onMouseEnter:qe,onMouseLeave:Ze},e.id))})]}),k&&s.jsx(De,{visible:K.visible,x:K.x,y:K.y,seat:K.seat,currency:ce.currency,state:K.state}),ne&&v&&s.jsx(Te,{scale:R,minScale:Z,maxScale:L,fitScale:me,onZoomIn:Ae,onZoomOut:Be,onFitToScreen:ge,position:ie,className:se}),ee.length>0&&s.jsxs("div",{className:"absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg",children:[s.jsxs("h3",{className:"font-semibold mb-2",children:["Selected Seats (",ee.length,")"]}),s.jsx("div",{className:"max-h-48 overflow-y-auto space-y-1",children:ee.map(e=>s.jsxs("div",{className:"text-sm",children:[e.seatNumber,e.price&&` - ${ce.currency} ${e.price.toFixed(2)}`]},e.id))})]})]})};Object.defineProperty(exports,"clearFirebaseInstance",{enumerable:!0,get:()=>z.clearFirebaseInstance});Object.defineProperty(exports,"getFirebaseDatabase",{enumerable:!0,get:()=>z.getFirebaseDatabase});Object.defineProperty(exports,"initializeFirebaseForViewer",{enumerable:!0,get:()=>z.initializeFirebaseForViewer});Object.defineProperty(exports,"isFirebaseInitialized",{enumerable:!0,get:()=>z.isFirebaseInitialized});Object.defineProperty(exports,"useFirebaseConfig",{enumerable:!0,get:()=>z.useFirebaseConfig});Object.defineProperty(exports,"useFirebaseSeatStates",{enumerable:!0,get:()=>z.useFirebaseSeatStates});Object.defineProperty(exports,"useRealtimeSeatMap",{enumerable:!0,get:()=>z.useRealtimeSeatMap});exports.DEFAULT_COLORS=ke;exports.SeatMapViewer=et;exports.useConfigFetcher=Ce;exports.useContainerSize=je;exports.useTouchGestures=Me;

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import { jsx as a, jsxs as k } from "react/jsx-runtime";
-import { useState as Y, useCallback as N, useEffect as B, useRef as U, useMemo as z, memo as K } from "react";
+import { useState as E, useCallback as N, useEffect as B, useRef as K, useMemo as z, memo as J } from "react";
 import { Stage as oe, Layer as vt, Group as re, Text as Rt, Circle as Dt, Rect as Nt, Path as se, RegularPolygon as ae } from "react-konva";
 import { clearFirebaseInstance as be, getFirebaseDatabase as me, initializeFirebaseForViewer as ve, isFirebaseInitialized as Se, useFirebaseConfig as we, useFirebaseSeatStates as Ce, useRealtimeSeatMap as Me } from "@zonetrix/shared";
 function ce(n) {
-  const [u, e] = Y(null), [r, S] = Y(!1), [y, f] = Y(null), x = N(async () => {
+  const [u, e] = E(null), [r, S] = E(!1), [y, f] = E(null), x = N(async () => {
     if (n) {
       S(!0), f(null);
       try {
@@ -30,7 +30,7 @@ function ce(n) {
   };
 }
 function le(n) {
-  const [u, e] = Y({ width: 0, height: 0 });
+  const [u, e] = E({ width: 0, height: 0 });
   return B(() => {
     const r = n.current;
     if (!r) return;
@@ -57,7 +57,7 @@ function kt(n, u) {
   };
 }
 function he(n, u) {
-  const e = U(null), r = U(null), S = U(1), {
+  const e = K(null), r = K(null), S = K(1), {
     enabled: y,
     minScale: f,
     maxScale: x,
@@ -71,23 +71,23 @@ function he(n, u) {
     const d = b.container(), I = (m) => {
       if (m.touches.length === 2) {
         m.preventDefault();
-        const L = { x: m.touches[0].clientX, y: m.touches[0].clientY }, W = { x: m.touches[1].clientX, y: m.touches[1].clientY };
-        e.current = Ft(L, W), r.current = kt(L, W), S.current = g;
+        const X = { x: m.touches[0].clientX, y: m.touches[0].clientY }, W = { x: m.touches[1].clientX, y: m.touches[1].clientY };
+        e.current = Ft(X, W), r.current = kt(X, W), S.current = g;
       }
     }, v = (m) => {
       if (m.touches.length !== 2) return;
       m.preventDefault();
-      const L = { x: m.touches[0].clientX, y: m.touches[0].clientY }, W = { x: m.touches[1].clientX, y: m.touches[1].clientY }, O = Ft(L, W), M = kt(L, W);
+      const X = { x: m.touches[0].clientX, y: m.touches[0].clientY }, W = { x: m.touches[1].clientX, y: m.touches[1].clientY }, O = Ft(X, W), M = kt(X, W);
       if (e.current !== null && r.current !== null) {
         const P = O / e.current, A = Math.min(
           Math.max(g * P, f),
           x
-        ), J = d.getBoundingClientRect(), j = M.x - J.left, ot = M.y - J.top, rt = g, st = {
-          x: (j - c.x) / rt,
-          y: (ot - c.y) / rt
-        }, at = M.x - r.current.x, $ = M.y - r.current.y, V = {
-          x: j - st.x * A + at,
-          y: ot - st.y * A + $
+        ), Q = d.getBoundingClientRect(), j = M.x - Q.left, st = M.y - Q.top, at = g, ct = {
+          x: (j - c.x) / at,
+          y: (st - c.y) / at
+        }, lt = M.x - r.current.x, Y = M.y - r.current.y, V = {
+          x: j - ct.x * A + lt,
+          y: st - ct.y * A + Y
         };
         p(A, V), e.current = O, r.current = M;
       }
@@ -121,7 +121,7 @@ const de = {
   seatHidden: "#4a4a4a",
   gridLines: "#404040",
   currency: "KD"
-}, Wt = K(
+}, Wt = J(
   ({ seat: n, state: u, colors: e, onClick: r, onMouseEnter: S, onMouseLeave: y }) => {
     const f = (n.size || 24) / 2, g = {
       available: e.seatAvailable,
@@ -171,14 +171,14 @@ const de = {
   }
 );
 Wt.displayName = "ViewerSeat";
-const Tt = K(({ stage: n, stageColor: u }) => {
+const Tt = J(({ stage: n, stageColor: u }) => {
   const e = n.config, r = e.shape || "rectangle", S = e.showLabel !== !1, y = e.color || u, f = e.width / e.height, x = f < 0.5, g = f > 2;
   let c;
   x ? c = e.width * 0.25 : g ? c = e.height * 0.35 : c = Math.min(e.width, e.height) * 0.25;
   const p = e.label?.length || 6, I = e.width * 0.85 / p * 1.5, v = Math.max(
     10,
     Math.min(24, Math.min(c, I))
-  ), w = 4, m = Math.max(20, e.width - w * 2), L = (e.width - m) / 2, W = {
+  ), w = 4, m = Math.max(20, e.width - w * 2), X = (e.width - m) / 2, W = {
     fill: y + "80",
     stroke: "#ffffff",
     strokeWidth: 2,
@@ -240,7 +240,7 @@ const Tt = K(({ stage: n, stageColor: u }) => {
           Rt,
           {
             text: e.label,
-            x: L,
+            x: X,
             y: w,
             width: m,
             height: e.height - w * 2,
@@ -258,7 +258,7 @@ const Tt = K(({ stage: n, stageColor: u }) => {
   );
 });
 Tt.displayName = "ViewerStage";
-const Lt = K(({ text: n }) => /* @__PURE__ */ a(
+const Xt = J(({ text: n }) => /* @__PURE__ */ a(
   Rt,
   {
     x: n.position.x,
@@ -267,11 +267,13 @@ const Lt = K(({ text: n }) => /* @__PURE__ */ a(
     fontSize: n.config.fontSize,
     fill: n.config.color,
     rotation: n.config.rotation || 0,
+    scaleX: n.config.scaleX || 1,
+    scaleY: n.config.scaleY || 1,
     listening: !1
   }
 ));
-Lt.displayName = "ViewerText";
-const $t = K(
+Xt.displayName = "ViewerText";
+const Yt = J(
   ({
     floors: n,
     currentFloorId: u,
@@ -340,8 +342,8 @@ const $t = K(
     ] });
   }
 );
-$t.displayName = "FloorSelectorBar";
-const Et = K(
+Yt.displayName = "FloorSelectorBar";
+const Lt = J(
   ({ scale: n, minScale: u, maxScale: e, fitScale: r, onZoomIn: S, onZoomOut: y, onFitToScreen: f, position: x, className: g }) => {
     const p = {
       position: "absolute",
@@ -421,8 +423,8 @@ const Et = K(
     ] });
   }
 );
-Et.displayName = "ZoomControls";
-const Xt = K(
+Lt.displayName = "ZoomControls";
+const $t = J(
   ({ visible: n, x: u, y: e, seat: r, currency: S, state: y }) => {
     if (!n || !r) return null;
     const f = r.seatNumber || (r.rowLabel && r.columnLabel ? `${r.rowLabel}-${r.columnLabel}` : "N/A"), x = {
@@ -478,7 +480,7 @@ const Xt = K(
     ] }) });
   }
 );
-Xt.displayName = "SeatTooltip";
+$t.displayName = "SeatTooltip";
 const pe = ({
   config: n,
   configUrl: u,
@@ -498,33 +500,33 @@ const pe = ({
   zoomEnabled: v = !0,
   className: w = "",
   onConfigLoad: m,
-  onError: L,
+  onError: X,
   // Floor selector props
   showFloorSelector: W,
   floorSelectorPosition: O = "top-left",
   floorSelectorClassName: M,
   showAllFloorsOption: P = !0,
   allFloorsLabel: A = "All",
-  fitToView: J = !0,
+  fitToView: Q = !0,
   fitPadding: j = 40,
   // Zoom controls
-  showZoomControls: ot = !0,
-  zoomControlsPosition: rt = "bottom-right",
-  zoomControlsClassName: st,
-  minZoom: at,
-  maxZoom: $ = 3,
+  showZoomControls: st = !0,
+  zoomControlsPosition: at = "bottom-right",
+  zoomControlsClassName: ct,
+  minZoom: lt,
+  maxZoom: Y = 3,
   zoomStep: V = 0.25,
   // Touch gestures
-  touchEnabled: Yt = !0
+  touchEnabled: Et = !0
 }) => {
-  const St = y !== void 0 ? y : S, gt = U(null), wt = U(null), C = le(wt), [Z, Ct] = Y(
+  const St = y !== void 0 ? y : S, pt = K(null), wt = K(null), C = le(wt), [Z, Ct] = E(
     /* @__PURE__ */ new Set()
-  ), [R, Q] = Y(1), [T, _] = Y({ x: 0, y: 0 }), [Pt, zt] = Y(null), [Mt, Bt] = Y(1), ct = U({ width: 0, height: 0 }), [tt, It] = Y({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: At, loading: Ht, error: et } = ce(u), s = n || At, pt = e !== void 0, D = pt ? e || null : Pt, lt = x !== void 0, Ot = N(
+  ), [R, tt] = E(1), [T, _] = E({ x: 0, y: 0 }), [Pt, zt] = E(null), [Mt, Bt] = E(1), ht = K({ width: 0, height: 0 }), [et, It] = E({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: At, loading: Ht, error: nt } = ce(u), s = n || At, yt = e !== void 0, D = yt ? e || null : Pt, dt = x !== void 0, Ot = N(
     (t) => {
-      pt || zt(t), r?.(t);
+      yt || zt(t), r?.(t);
     },
-    [pt, r]
-  ), yt = s?.floors || [], jt = W !== void 0 ? W : yt.length > 1, ht = z(
+    [yt, r]
+  ), xt = s?.floors || [], jt = W !== void 0 ? W : xt.length > 1, ut = z(
     () => s ? { ...s.colors, ...d } : { ...de, ...d },
     [s, d]
   ), q = z(() => {
@@ -533,41 +535,41 @@ const pe = ({
     return D && (t = t.filter(
       (i) => i.floorId === D || !i.floorId && D === "floor_default"
     )), t;
-  }, [s, D]), dt = z(() => s?.stages ? D ? s.stages.filter(
+  }, [s, D]), ft = z(() => s?.stages ? D ? s.stages.filter(
     (t) => t.floorId === D || !t.floorId && D === "floor_default"
-  ) : s.stages : [], [s, D]), ut = z(() => s?.texts ? D ? s.texts.filter(
+  ) : s.stages : [], [s, D]), gt = z(() => s?.texts ? D ? s.texts.filter(
     (t) => t.floorId === D || !t.floorId && D === "floor_default"
-  ) : s.texts : [], [s, D]), E = z(() => {
-    if (!s || q.length === 0 && dt.length === 0 && ut.length === 0)
+  ) : s.texts : [], [s, D]), L = z(() => {
+    if (!s || q.length === 0 && ft.length === 0 && gt.length === 0)
       return null;
     let t = 1 / 0, i = 1 / 0, l = -1 / 0, h = -1 / 0;
     return q.forEach((o) => {
       const F = (o.size || 24) / 2;
       t = Math.min(t, o.position.x - F), i = Math.min(i, o.position.y - F), l = Math.max(l, o.position.x + F), h = Math.max(h, o.position.y + F);
-    }), dt.forEach((o) => {
+    }), ft.forEach((o) => {
       t = Math.min(t, o.position.x), i = Math.min(i, o.position.y), l = Math.max(l, o.position.x + (o.config?.width || 200)), h = Math.max(h, o.position.y + (o.config?.height || 100));
-    }), ut.forEach((o) => {
-      const F = o.config.text.length * o.config.fontSize * 0.6, X = o.config.fontSize;
-      t = Math.min(t, o.position.x), i = Math.min(i, o.position.y), l = Math.max(l, o.position.x + F), h = Math.max(h, o.position.y + X);
+    }), gt.forEach((o) => {
+      const F = o.config.scaleX || 1, $ = o.config.scaleY || 1, U = o.config.text.length * o.config.fontSize * 0.6 * F, rt = o.config.fontSize * $;
+      t = Math.min(t, o.position.x), i = Math.min(i, o.position.y), l = Math.max(l, o.position.x + U), h = Math.max(h, o.position.y + rt);
     }), { minX: t, minY: i, maxX: l, maxY: h, width: l - t, height: h - i };
-  }, [s, q, dt, ut]), xt = N(() => {
-    if (!s || !E || C.width === 0 || C.height === 0) return;
-    const t = C.width, i = C.height, l = t - j * 2, h = i - j * 2, o = l / E.width, F = h / E.height, X = Math.min(o, F, $), ft = E.minX + E.width / 2, mt = E.minY + E.height / 2, te = t / 2, ee = i / 2, ne = te - ft * X, ie = ee - mt * X;
-    Q(X), _({ x: ne, y: ie }), Bt(X);
-  }, [s, E, C, j, $]);
+  }, [s, q, ft, gt]), bt = N(() => {
+    if (!s || !L || C.width === 0 || C.height === 0) return;
+    const t = C.width, i = C.height, l = t - j * 2, h = i - j * 2, o = l / L.width, F = h / L.height, $ = Math.min(o, F, Y), U = L.minX + L.width / 2, rt = L.minY + L.height / 2, te = t / 2, ee = i / 2, ne = te - U * $, ie = ee - rt * $;
+    tt($), _({ x: ne, y: ie }), Bt($);
+  }, [s, L, C, j, Y]);
   B(() => {
-    if (!J || !s || !E || C.width === 0 || C.height === 0) return;
+    if (!Q || !s || !L || C.width === 0 || C.height === 0) return;
     const t = Math.abs(
-      C.width - ct.current.width
+      C.width - ht.current.width
     ), i = Math.abs(
-      C.height - ct.current.height
+      C.height - ht.current.height
     );
-    !(ct.current.width === 0) && t < 10 && i < 10 || (ct.current = C, xt());
-  }, [J, s, E, C, D, xt]);
+    !(ht.current.width === 0) && t < 10 && i < 10 || (ht.current = C, bt());
+  }, [Q, s, L, C, D, bt]);
   const H = z(() => {
     const t = new Set(St), i = new Set(f), l = new Set(g);
     return { reserved: t, unavailable: i, myReserved: l };
-  }, [St, f, g]), bt = z(() => x ? new Set(x) : null, [x]), nt = N(
+  }, [St, f, g]), mt = z(() => x ? new Set(x) : null, [x]), it = N(
     (t) => {
       const i = t.id, l = t.seatNumber || "";
       return H.unavailable.has(i) || H.unavailable.has(l) ? "unavailable" : H.reserved.has(i) || H.reserved.has(l) ? "reserved" : H.myReserved.has(i) || H.myReserved.has(l) || Z.has(i) ? "selected" : t.state;
@@ -577,41 +579,41 @@ const pe = ({
   B(() => {
     s && m && m(s);
   }, [s, m]), B(() => {
-    et && L && L(et);
-  }, [et, L]), B(() => {
-    lt && bt && Ct(bt);
-  }, [lt, bt]);
+    nt && X && X(nt);
+  }, [nt, X]), B(() => {
+    dt && mt && Ct(mt);
+  }, [dt, mt]);
   const Vt = N(
     (t) => {
-      const i = nt(t);
+      const i = it(t);
       if (i !== "available" && i !== "selected")
         return;
       const l = Z.has(t.id);
-      lt || Ct((h) => {
+      dt || Ct((h) => {
         const o = new Set(h);
         return l ? o.delete(t.id) : o.add(t.id), o;
       }), l ? p?.(t) : (c?.(t), c || console.log("Seat selected:", t));
     },
     [
-      nt,
+      it,
       Z,
-      lt,
+      dt,
       c,
       p
     ]
-  ), it = z(() => s ? q.filter((t) => Z.has(t.id)) : [], [s, q, Z]);
+  ), ot = z(() => s ? q.filter((t) => Z.has(t.id)) : [], [s, q, Z]);
   B(() => {
-    b?.(it);
-  }, [it, b]);
-  const G = at !== void 0 ? at : Mt * 0.5, Zt = N(() => {
+    b?.(ot);
+  }, [ot, b]);
+  const G = lt !== void 0 ? lt : Mt * 0.5, Zt = N(() => {
     if (!v) return;
-    const t = Math.min(R + V, $);
+    const t = Math.min(R + V, Y);
     if (t !== R) {
       const i = C.width || s?.canvas.width || 800, l = C.height || s?.canvas.height || 600, h = i / 2, o = l / 2, F = {
         x: (h - T.x) / R,
         y: (o - T.y) / R
       };
-      Q(t), _({
+      tt(t), _({
         x: h - F.x * t,
         y: o - F.y * t
       });
@@ -620,7 +622,7 @@ const pe = ({
     v,
     R,
     V,
-    $,
+    Y,
     C,
     s,
     T
@@ -632,7 +634,7 @@ const pe = ({
         x: (h - T.x) / R,
         y: (o - T.y) / R
       };
-      Q(t), _({
+      tt(t), _({
         x: h - F.x * t,
         y: o - F.y * t
       });
@@ -654,29 +656,29 @@ const pe = ({
     (t) => {
       if (!v) return;
       t.evt.preventDefault();
-      const i = gt.current;
+      const i = pt.current;
       if (!i) return;
       const l = i.scaleX(), h = i.getPointerPosition();
       if (!h) return;
-      const o = 1.1, F = t.evt.deltaY > 0 ? l / o : l * o, X = Math.min(Math.max(F, G), $), ft = {
+      const o = 1.1, F = t.evt.deltaY > 0 ? l / o : l * o, $ = Math.min(Math.max(F, G), Y), U = {
         x: (h.x - T.x) / l,
         y: (h.y - T.y) / l
-      }, mt = {
-        x: h.x - ft.x * X,
-        y: h.y - ft.y * X
+      }, rt = {
+        x: h.x - U.x * $,
+        y: h.y - U.y * $
       };
-      Q(X), _(mt);
+      tt($), _(rt);
     },
-    [v, T, G, $]
+    [v, T, G, Y]
   );
-  he(gt, {
-    enabled: Yt && v,
+  he(pt, {
+    enabled: Et && v,
     minScale: G,
-    maxScale: $,
+    maxScale: Y,
     currentScale: R,
     currentPosition: T,
     onScaleChange: (t, i) => {
-      Q(t), _(i);
+      tt(t), _(i);
     }
   });
   const Ut = N(
@@ -692,19 +694,19 @@ const pe = ({
         x: o.left + h.x,
         y: o.top + h.y,
         seat: t,
-        state: nt(t)
+        state: it(t)
       });
     },
-    [I, nt]
+    [I, it]
   ), Kt = N(() => {
     It((t) => ({ ...t, visible: !1 }));
   }, []);
   if (Ht)
     return /* @__PURE__ */ a("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ a("p", { children: "Loading seat map..." }) });
-  if (et)
+  if (nt)
     return /* @__PURE__ */ a("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ k("p", { className: "text-red-500", children: [
       "Error loading seat map: ",
-      et.message
+      nt.message
     ] }) });
   if (!s)
     return /* @__PURE__ */ a("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ a("p", { children: "No configuration provided" }) });
@@ -716,10 +718,10 @@ const pe = ({
       className: `relative ${w}`,
       style: { width: "100%", height: "100%" },
       children: [
-        jt && yt.length > 0 && /* @__PURE__ */ a(
-          $t,
+        jt && xt.length > 0 && /* @__PURE__ */ a(
+          Yt,
           {
-            floors: yt,
+            floors: xt,
             currentFloorId: D,
             onFloorChange: Ot,
             showAllOption: P,
@@ -731,7 +733,7 @@ const pe = ({
         /* @__PURE__ */ k(
           oe,
           {
-            ref: gt,
+            ref: pt,
             width: Jt,
             height: Qt,
             scaleX: R,
@@ -746,21 +748,21 @@ const pe = ({
               cursor: "grab"
             },
             children: [
-              /* @__PURE__ */ a(vt, { listening: !1, children: dt.map((t) => /* @__PURE__ */ a(
+              /* @__PURE__ */ a(vt, { listening: !1, children: ft.map((t) => /* @__PURE__ */ a(
                 Tt,
                 {
                   stage: t,
-                  stageColor: ht.stageColor
+                  stageColor: ut.stageColor
                 },
                 t.id
               )) }),
-              /* @__PURE__ */ a(vt, { listening: !1, children: ut.map((t) => /* @__PURE__ */ a(Lt, { text: t }, t.id)) }),
+              /* @__PURE__ */ a(vt, { listening: !1, children: gt.map((t) => /* @__PURE__ */ a(Xt, { text: t }, t.id)) }),
               /* @__PURE__ */ a(vt, { children: q.map((t) => /* @__PURE__ */ a(
                 Wt,
                 {
                   seat: t,
-                  state: nt(t),
-                  colors: ht,
+                  state: it(t),
+                  colors: ut,
                   onClick: Vt,
                   onMouseEnter: Ut,
                   onMouseLeave: Kt
@@ -771,39 +773,39 @@ const pe = ({
           }
         ),
         I && /* @__PURE__ */ a(
-          Xt,
+          $t,
           {
-            visible: tt.visible,
-            x: tt.x,
-            y: tt.y,
-            seat: tt.seat,
-            currency: ht.currency,
-            state: tt.state
+            visible: et.visible,
+            x: et.x,
+            y: et.y,
+            seat: et.seat,
+            currency: ut.currency,
+            state: et.state
           }
         ),
-        ot && v && /* @__PURE__ */ a(
-          Et,
+        st && v && /* @__PURE__ */ a(
+          Lt,
           {
             scale: R,
             minScale: G,
-            maxScale: $,
+            maxScale: Y,
             fitScale: Mt,
             onZoomIn: Zt,
             onZoomOut: _t,
-            onFitToScreen: xt,
-            position: rt,
-            className: st
+            onFitToScreen: bt,
+            position: at,
+            className: ct
           }
         ),
-        it.length > 0 && /* @__PURE__ */ k("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
+        ot.length > 0 && /* @__PURE__ */ k("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
           /* @__PURE__ */ k("h3", { className: "font-semibold mb-2", children: [
             "Selected Seats (",
-            it.length,
+            ot.length,
             ")"
           ] }),
-          /* @__PURE__ */ a("div", { className: "max-h-48 overflow-y-auto space-y-1", children: it.map((t) => /* @__PURE__ */ k("div", { className: "text-sm", children: [
+          /* @__PURE__ */ a("div", { className: "max-h-48 overflow-y-auto space-y-1", children: ot.map((t) => /* @__PURE__ */ k("div", { className: "text-sm", children: [
             t.seatNumber,
-            t.price && ` - ${ht.currency} ${t.price.toFixed(2)}`
+            t.price && ` - ${ut.currency} ${t.price.toFixed(2)}`
           ] }, t.id)) })
         ] })
       ]

package/dist/types/index.d.ts

@@ -67,6 +67,8 @@ export interface TextConfig {
     fontSize: number;
     color: string;
     rotation?: number;
+    scaleX?: number;
+    scaleY?: number;
 }
 export interface SerializedText {
     id: string;

package/package.json

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