@zonetrix/viewer 2.2.0 → 2.3.0

package/README.md

@@ -49,7 +49,8 @@ import type {
   SeatShape,
   SeatData,
   SeatMapConfig,
-  ColorSettings
+  ColorSettings,
+  FloorConfig
 } from '@zonetrix/viewer';
 
 // Hooks
@@ -103,7 +104,7 @@ function BookingApp() {
 |------|------|----------|-------------|
 | `config` | `SeatMapConfig` | No* | Seat map configuration object |
 | `configUrl` | `string` | No* | URL to fetch configuration from |
-| `floorId` | `string` | No | Filter seats/stages by floor ID |
+| `floorId` | `string` | No | Filter seats/stages by floor ID (controlled mode) |
 | `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 |
@@ -116,6 +117,11 @@ function BookingApp() {
 | `className` | `string` | No | Custom CSS class for the container |
 | `onConfigLoad` | `(config: SeatMapConfig) => void` | No | Callback when config is loaded |
 | `onError` | `(error: Error) => void` | No | Callback when an error occurs |
+| `showFloorSelector` | `boolean` | No | Show/hide built-in floor selector (default: true when floors > 1) |
+| `floorSelectorPosition` | `string` | No | Position: 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' |
+| `floorSelectorClassName` | `string` | No | Custom CSS class for floor selector |
+| `showAllFloorsOption` | `boolean` | No | Show "All" button in floor selector (default: true) |
+| `allFloorsLabel` | `string` | No | Custom label for "All" button (default: 'All') |
 
 *Note: Either `config` or `configUrl` must be provided.
 
@@ -257,19 +263,43 @@ function MobileOptimized() {
 }
 ```
 
-### 6. Multi-floor Venue
+### 6. Multi-floor Venue (Built-in Floor Selector)
+
+The viewer includes a built-in floor selector that automatically appears when your config has multiple floors.
 
 ```tsx
-import { useState } from 'react';
 import { SeatMapViewer } from '@zonetrix/viewer';
 
 function MultiFloorVenue() {
-  const [currentFloor, setCurrentFloor] = useState('floor_1');
+  return (
+    <SeatMapViewer
+      config={venueConfig}
+      onSeatSelect={(seat) => handleSelection(seat)}
+      // Floor selector auto-shows when config.floors.length > 1
+      // Customize position and labels:
+      floorSelectorPosition="top-right"
+      allFloorsLabel="All Floors"
+    />
+  );
+}
+```
+
+#### Custom Floor Selector (Controlled Mode)
+
+For full control over the floor selector UI, use controlled mode:
+
+```tsx
+import { useState } from 'react';
+import { SeatMapViewer } from '@zonetrix/viewer';
+
+function CustomFloorSelector() {
+  const [currentFloor, setCurrentFloor] = useState<string | null>(null);
 
   return (
     <div>
-      {/* Floor selector */}
+      {/* Your custom floor selector */}
       <div className="floor-tabs">
+        <button onClick={() => setCurrentFloor(null)}>All</button>
         {venueConfig.floors?.map((floor) => (
           <button
             key={floor.id}
@@ -283,7 +313,8 @@ function MultiFloorVenue() {
 
       <SeatMapViewer
         config={venueConfig}
-        floorId={currentFloor}
+        showFloorSelector={false}  // Hide built-in selector
+        floorId={currentFloor || undefined}
         onFloorChange={setCurrentFloor}
         onSeatSelect={(seat) => handleSelection(seat)}
       />
@@ -364,7 +395,11 @@ The viewer accepts a `SeatMapConfig` object. You can create these configurations
     }
   ],
   "sections": [],
-  "stages": []
+  "stages": [],
+  "floors": [
+    { "id": "floor_1", "name": "Ground Floor", "order": 0 },
+    { "id": "floor_2", "name": "First Floor", "order": 1 }
+  ]
 }
 ```
 
@@ -416,6 +451,17 @@ interface ColorSettings {
 }
 ```
 
+### FloorConfig
+
+```typescript
+interface FloorConfig {
+  id: string;        // Unique identifier (e.g., "floor_1")
+  name: string;      // Display name (e.g., "Ground Floor")
+  order: number;     // Sort order (0 = first)
+  color?: string;    // Optional floor color
+}
+```
+
 ## Seat States Explained
 
 | State | Description | User Can Select? | Visual |

package/dist/components/SeatMapViewer.d.ts

@@ -21,5 +21,7 @@ export interface SeatMapViewerProps {
     floorSelectorClassName?: string;
     showAllFloorsOption?: boolean;
     allFloorsLabel?: string;
+    fitToView?: boolean;
+    fitPadding?: number;
 }
 export declare const SeatMapViewer: React.FC<SeatMapViewerProps>;

package/dist/index.js

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

package/dist/index.mjs

@@ -1,34 +1,34 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { useState as y, useEffect as $, useRef as ue, useCallback as z, useMemo as w, memo as V } from "react";
-import { Stage as he, Layer as H, Group as pe, Rect as O, Text as ge, Circle as me } from "react-konva";
-function be(t) {
-  const [a, i] = y(null), [h, g] = y(!1), [b, d] = y(null), f = async () => {
-    if (t) {
-      g(!0), d(null);
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
+import { useState as S, useEffect as F, useRef as we, useCallback as W, useMemo as k, memo as O } from "react";
+import { Stage as Ce, Layer as Z, Group as ke, Rect as ee, Text as Ie, Circle as Me } from "react-konva";
+function Ne(i) {
+  const [h, c] = S(null), [y, x] = S(!1), [w, p] = S(null), g = async () => {
+    if (i) {
+      x(!0), p(null);
       try {
-        const s = await fetch(t);
-        if (!s.ok)
-          throw new Error(`Failed to fetch config: ${s.statusText}`);
-        const l = await s.json();
-        i(l);
-      } catch (s) {
-        const l = s instanceof Error ? s : new Error("Unknown error occurred");
-        d(l), console.error("Failed to fetch seat map config:", l);
+        const d = await fetch(i);
+        if (!d.ok)
+          throw new Error(`Failed to fetch config: ${d.statusText}`);
+        const f = await d.json();
+        c(f);
+      } catch (d) {
+        const f = d instanceof Error ? d : new Error("Unknown error occurred");
+        p(f), console.error("Failed to fetch seat map config:", f);
       } finally {
-        g(!1);
+        x(!1);
       }
     }
   };
-  return $(() => {
-    f();
-  }, [t]), {
-    config: a,
-    loading: h,
-    error: b,
-    refetch: f
+  return F(() => {
+    g();
+  }, [i]), {
+    config: h,
+    loading: y,
+    error: w,
+    refetch: g
   };
 }
-const Se = {
+const Fe = {
   canvasBackground: "#1a1a1a",
   stageColor: "#808080",
   seatAvailable: "#2C2B30",
@@ -38,64 +38,64 @@ const Se = {
   seatHidden: "#4a4a4a",
   gridLines: "#404040",
   currency: "KD"
-}, U = V(({ seat: t, state: a, colors: i, onClick: h }) => {
-  const d = {
-    available: i.seatAvailable,
-    reserved: i.seatReserved,
-    selected: i.seatSelected,
-    unavailable: i.seatUnavailable,
-    hidden: i.seatHidden
+}, te = O(({ seat: i, state: h, colors: c, onClick: y }) => {
+  const p = {
+    available: c.seatAvailable,
+    reserved: c.seatReserved,
+    selected: c.seatSelected,
+    unavailable: c.seatUnavailable,
+    hidden: c.seatHidden
     // Hidden seats are filtered out, but included for type safety
-  }[a], f = a === "available" || a === "selected", s = z(() => {
-    f && h(t);
-  }, [t, h, f]), l = {
-    x: t.position.x,
-    y: t.position.y,
-    fill: d,
+  }[h], g = h === "available" || h === "selected", d = W(() => {
+    g && y(i);
+  }, [i, y, g]), f = {
+    x: i.position.x,
+    y: i.position.y,
+    fill: p,
     stroke: "#ffffff",
     strokeWidth: 1,
-    onClick: s,
-    onTap: s
+    onClick: d,
+    onTap: d
   };
-  return t.shape === "circle" ? /* @__PURE__ */ r(
-    me,
+  return i.shape === "circle" ? /* @__PURE__ */ r(
+    Me,
     {
-      ...l,
+      ...f,
       radius: 12
     }
   ) : /* @__PURE__ */ r(
-    O,
+    ee,
     {
-      ...l,
+      ...f,
       width: 24,
       height: 24,
       offsetX: 12,
       offsetY: 12,
-      cornerRadius: t.shape === "square" ? 0 : 4
+      cornerRadius: i.shape === "square" ? 0 : 4
     }
   );
 });
-U.displayName = "ViewerSeat";
-const X = V(({ stage: t, stageColor: a }) => /* @__PURE__ */ m(pe, { x: t.position.x, y: t.position.y, children: [
+te.displayName = "ViewerSeat";
+const ne = O(({ stage: i, stageColor: h }) => /* @__PURE__ */ v(ke, { x: i.position.x, y: i.position.y, children: [
   /* @__PURE__ */ r(
-    O,
+    ee,
     {
-      width: t.config.width,
-      height: t.config.height,
-      fill: a + "80",
+      width: i.config.width,
+      height: i.config.height,
+      fill: h + "80",
       stroke: "#ffffff",
       strokeWidth: 2,
       cornerRadius: 10
     }
   ),
   /* @__PURE__ */ r(
-    ge,
+    Ie,
     {
-      text: t.config.label,
+      text: i.config.label,
       x: 0,
       y: 0,
-      width: t.config.width,
-      height: t.config.height,
+      width: i.config.width,
+      height: i.config.height,
       fontSize: 24,
       fontStyle: "bold",
       fill: "#ffffff",
@@ -104,20 +104,20 @@ const X = V(({ stage: t, stageColor: a }) => /* @__PURE__ */ m(pe, { x: t.positi
     }
   )
 ] }));
-X.displayName = "ViewerStage";
-const q = V(({
-  floors: t,
-  currentFloorId: a,
-  onFloorChange: i,
-  showAllOption: h,
-  allLabel: g,
-  position: b,
-  className: d
+ne.displayName = "ViewerStage";
+const ie = O(({
+  floors: i,
+  currentFloorId: h,
+  onFloorChange: c,
+  showAllOption: y,
+  allLabel: x,
+  position: w,
+  className: p
 }) => {
-  const f = w(
-    () => [...t].sort((c, k) => c.order - k.order),
-    [t]
-  ), l = {
+  const g = k(
+    () => [...i].sort((u, E) => u.order - E.order),
+    [i]
+  ), f = {
     position: "absolute",
     display: "flex",
     alignItems: "center",
@@ -132,8 +132,8 @@ const q = V(({
       "top-right": { top: 0, right: 0 },
       "bottom-left": { bottom: 0, left: 0 },
       "bottom-right": { bottom: 0, right: 0 }
-    }[b]
-  }, E = {
+    }[w]
+  }, $ = {
     padding: "6px 14px",
     fontSize: "14px",
     fontWeight: 500,
@@ -143,177 +143,197 @@ const q = V(({
     color: "#fff",
     cursor: "pointer",
     transition: "all 0.2s ease"
-  }, C = {
-    ...E,
+  }, A = {
+    ...$,
     backgroundColor: "#3A7DE5",
     borderColor: "#3A7DE5"
   };
-  return /* @__PURE__ */ m("div", { className: d, style: l, children: [
-    h && /* @__PURE__ */ r(
+  return /* @__PURE__ */ v("div", { className: p, style: f, children: [
+    y && /* @__PURE__ */ r(
       "button",
       {
         type: "button",
-        onClick: () => i(null),
-        style: a === null ? C : E,
-        children: g
+        onClick: () => c(null),
+        style: h === null ? A : $,
+        children: x
       }
     ),
-    f.map((c) => /* @__PURE__ */ r(
+    g.map((u) => /* @__PURE__ */ r(
       "button",
       {
         type: "button",
-        onClick: () => i(c.id),
-        style: a === c.id ? C : E,
-        children: c.name
+        onClick: () => c(u.id),
+        style: h === u.id ? A : $,
+        children: u.name
       },
-      c.id
+      u.id
     ))
   ] });
 });
-q.displayName = "FloorSelectorBar";
-const we = ({
-  config: t,
-  configUrl: a,
-  floorId: i,
-  onFloorChange: h,
-  reservedSeats: g = [],
-  unavailableSeats: b = [],
-  onSeatSelect: d,
-  onSeatDeselect: f,
-  onSelectionChange: s,
-  colorOverrides: l,
-  showTooltip: E = !0,
-  zoomEnabled: C = !0,
-  className: c = "",
-  onConfigLoad: k,
-  onError: j,
+ie.displayName = "FloorSelectorBar";
+const Ye = ({
+  config: i,
+  configUrl: h,
+  floorId: c,
+  onFloorChange: y,
+  reservedSeats: x = [],
+  unavailableSeats: w = [],
+  onSeatSelect: p,
+  onSeatDeselect: g,
+  onSelectionChange: d,
+  colorOverrides: f,
+  showTooltip: $ = !0,
+  zoomEnabled: A = !0,
+  className: u = "",
+  onConfigLoad: E,
+  onError: D,
   // Floor selector props
-  showFloorSelector: W,
-  floorSelectorPosition: G = "top-left",
-  floorSelectorClassName: K,
-  showAllFloorsOption: J = !0,
-  allFloorsLabel: Q = "All"
+  showFloorSelector: U,
+  floorSelectorPosition: oe = "top-left",
+  floorSelectorClassName: re,
+  showAllFloorsOption: se = !0,
+  allFloorsLabel: ae = "All",
+  fitToView: j = !0,
+  fitPadding: H = 40
 }) => {
-  const _ = ue(null), [v, Z] = y(/* @__PURE__ */ new Set()), [T, ee] = y(1), [N, te] = y({ x: 0, y: 0 }), [oe, re] = y(null), { config: ne, loading: ie, error: I } = be(a), o = t || ne, M = i !== void 0, p = M ? i || null : oe, se = z((e) => {
-    M || re(e), h?.(e);
-  }, [M, h]), P = o?.floors || [], le = W !== void 0 ? W : P.length > 1, B = w(
-    () => o ? { ...o.colors, ...l } : { ...Se, ...l },
-    [o, l]
-  ), D = w(() => {
-    if (!o) return [];
-    let e = o.seats.filter((n) => n.state !== "hidden");
-    return p && (e = e.filter(
-      (n) => n.floorId === p || !n.floorId && p === "floor_default"
+  const q = we(null), [I, le] = S(/* @__PURE__ */ new Set()), [B, G] = S(1), [R, K] = S({ x: 0, y: 0 }), [ce, de] = S(null), [J, Q] = S(!1), { config: fe, loading: he, error: Y } = Ne(h), n = i || fe, L = c !== void 0, m = L ? c || null : ce, ue = W((e) => {
+    L || de(e), y?.(e);
+  }, [L, y]), P = n?.floors || [], pe = U !== void 0 ? U : P.length > 1, V = k(
+    () => n ? { ...n.colors, ...f } : { ...Fe, ...f },
+    [n, f]
+  ), M = k(() => {
+    if (!n) return [];
+    let e = n.seats.filter((t) => t.state !== "hidden");
+    return m && (e = e.filter(
+      (t) => t.floorId === m || !t.floorId && m === "floor_default"
     )), e;
-  }, [o, p]), ae = w(() => o?.stages ? p ? o.stages.filter(
-    (e) => e.floorId === p || !e.floorId && p === "floor_default"
-  ) : o.stages : [], [o, p]), A = w(() => {
-    const e = new Set(g), n = new Set(b);
-    return { reserved: e, unavailable: n };
-  }, [g, b]), L = z((e) => {
-    const n = e.id, u = e.seatNumber || "";
-    return A.unavailable.has(n) || A.unavailable.has(u) ? "unavailable" : A.reserved.has(n) || A.reserved.has(u) ? "reserved" : v.has(n) ? "selected" : e.state;
-  }, [A, v]);
-  $(() => {
-    o && k && k(o);
-  }, [o, k]), $(() => {
-    I && j && j(I);
-  }, [I, j]);
-  const ce = z((e) => {
-    const n = L(e);
-    if (n !== "available" && n !== "selected")
+  }, [n, m]), T = k(() => n?.stages ? m ? n.stages.filter(
+    (e) => e.floorId === m || !e.floorId && m === "floor_default"
+  ) : n.stages : [], [n, m]), b = k(() => {
+    if (!n || M.length === 0 && T.length === 0)
+      return null;
+    const e = 12;
+    let t = 1 / 0, o = 1 / 0, s = -1 / 0, a = -1 / 0;
+    return M.forEach((l) => {
+      t = Math.min(t, l.position.x - e), o = Math.min(o, l.position.y - e), s = Math.max(s, l.position.x + e), a = Math.max(a, l.position.y + e);
+    }), T.forEach((l) => {
+      t = Math.min(t, l.position.x), o = Math.min(o, l.position.y), s = Math.max(s, l.position.x + (l.config?.width || 200)), a = Math.max(a, l.position.y + (l.config?.height || 100));
+    }), { minX: t, minY: o, maxX: s, maxY: a, width: s - t, height: a - o };
+  }, [n, M, T]);
+  F(() => {
+    if (!j || J || !n || !b) return;
+    const e = n.canvas.width, t = n.canvas.height, o = e - H * 2, s = t - H * 2, a = o / b.width, l = s / b.height, N = Math.min(a, l, 2), C = b.minX + b.width / 2, ye = b.minY + b.height / 2, xe = e / 2, be = t / 2, ve = xe - C * N, Se = be - ye * N;
+    G(N), K({ x: ve, y: Se }), Q(!0);
+  }, [j, J, n, b, H]), F(() => {
+    j && Q(!1);
+  }, [m, j]);
+  const z = k(() => {
+    const e = new Set(x), t = new Set(w);
+    return { reserved: e, unavailable: t };
+  }, [x, w]), _ = W((e) => {
+    const t = e.id, o = e.seatNumber || "";
+    return z.unavailable.has(t) || z.unavailable.has(o) ? "unavailable" : z.reserved.has(t) || z.reserved.has(o) ? "reserved" : I.has(t) ? "selected" : e.state;
+  }, [z, I]);
+  F(() => {
+    n && E && E(n);
+  }, [n, E]), F(() => {
+    Y && D && D(Y);
+  }, [Y, D]);
+  const ge = W((e) => {
+    const t = _(e);
+    if (t !== "available" && t !== "selected")
       return;
-    const u = v.has(e.id);
-    Z((S) => {
-      const x = new Set(S);
-      return u ? x.delete(e.id) : x.add(e.id), x;
-    }), u ? f?.(e) : (d?.(e), d || console.log("Seat selected:", e));
-  }, [L, v, d, f]), F = w(() => o ? D.filter((e) => v.has(e.id)) : [], [D, v]);
-  $(() => {
-    s?.(F);
-  }, [F, s]);
-  const de = z((e) => {
-    if (!C) return;
+    const o = I.has(e.id);
+    le((s) => {
+      const a = new Set(s);
+      return o ? a.delete(e.id) : a.add(e.id), a;
+    }), o ? g?.(e) : (p?.(e), p || console.log("Seat selected:", e));
+  }, [_, I, p, g]), X = k(() => n ? M.filter((e) => I.has(e.id)) : [], [M, I]);
+  F(() => {
+    d?.(X);
+  }, [X, d]);
+  const me = W((e) => {
+    if (!A) return;
     e.evt.preventDefault();
-    const n = _.current;
-    if (!n) return;
-    const u = T, S = n.getPointerPosition();
-    if (!S) return;
-    const x = {
-      x: (S.x - N.x) / u,
-      y: (S.y - N.y) / u
-    }, fe = e.evt.deltaY > 0 ? -1 : 1, Y = 1.05;
-    let R = fe > 0 ? u * Y : u / Y;
-    R = Math.max(0.5, Math.min(5, R)), ee(R), te({
-      x: S.x - x.x * R,
-      y: S.y - x.y * R
+    const t = q.current;
+    if (!t) return;
+    const o = B, s = t.getPointerPosition();
+    if (!s) return;
+    const a = {
+      x: (s.x - R.x) / o,
+      y: (s.y - R.y) / o
+    }, l = e.evt.deltaY > 0 ? -1 : 1, N = 1.05;
+    let C = l > 0 ? o * N : o / N;
+    C = Math.max(0.5, Math.min(5, C)), G(C), K({
+      x: s.x - a.x * C,
+      y: s.y - a.y * C
     });
-  }, [C, T, N]);
-  return ie ? /* @__PURE__ */ r("div", { className: `flex items-center justify-center h-full ${c}`, children: /* @__PURE__ */ r("p", { children: "Loading seat map..." }) }) : I ? /* @__PURE__ */ r("div", { className: `flex items-center justify-center h-full ${c}`, children: /* @__PURE__ */ m("p", { className: "text-red-500", children: [
+  }, [A, B, R]);
+  return he ? /* @__PURE__ */ r("div", { className: `flex items-center justify-center h-full ${u}`, children: /* @__PURE__ */ r("p", { children: "Loading seat map..." }) }) : Y ? /* @__PURE__ */ r("div", { className: `flex items-center justify-center h-full ${u}`, children: /* @__PURE__ */ v("p", { className: "text-red-500", children: [
     "Error loading seat map: ",
-    I.message
-  ] }) }) : o ? /* @__PURE__ */ m("div", { className: `relative ${c}`, children: [
-    le && P.length > 0 && /* @__PURE__ */ r(
-      q,
+    Y.message
+  ] }) }) : n ? /* @__PURE__ */ v("div", { className: `relative ${u}`, children: [
+    pe && P.length > 0 && /* @__PURE__ */ r(
+      ie,
       {
         floors: P,
-        currentFloorId: p,
-        onFloorChange: se,
-        showAllOption: J,
-        allLabel: Q,
-        position: G,
-        className: K
+        currentFloorId: m,
+        onFloorChange: ue,
+        showAllOption: se,
+        allLabel: ae,
+        position: oe,
+        className: re
       }
     ),
-    /* @__PURE__ */ m(
-      he,
+    /* @__PURE__ */ v(
+      Ce,
       {
-        ref: _,
-        width: o.canvas.width,
-        height: o.canvas.height,
-        scaleX: T,
-        scaleY: T,
-        x: N.x,
-        y: N.y,
-        onWheel: de,
-        style: { backgroundColor: o.canvas.backgroundColor },
+        ref: q,
+        width: n.canvas.width,
+        height: n.canvas.height,
+        scaleX: B,
+        scaleY: B,
+        x: R.x,
+        y: R.y,
+        onWheel: me,
+        style: { backgroundColor: n.canvas.backgroundColor },
         children: [
-          /* @__PURE__ */ r(H, { listening: !1, children: ae.map((e) => /* @__PURE__ */ r(
-            X,
+          /* @__PURE__ */ r(Z, { listening: !1, children: T.map((e) => /* @__PURE__ */ r(
+            ne,
             {
               stage: e,
-              stageColor: B.stageColor
+              stageColor: V.stageColor
             },
             e.id
           )) }),
-          /* @__PURE__ */ r(H, { children: D.map((e) => /* @__PURE__ */ r(
-            U,
+          /* @__PURE__ */ r(Z, { children: M.map((e) => /* @__PURE__ */ r(
+            te,
             {
               seat: e,
-              state: L(e),
-              colors: B,
-              onClick: ce
+              state: _(e),
+              colors: V,
+              onClick: ge
             },
             e.id
           )) })
         ]
       }
     ),
-    F.length > 0 && /* @__PURE__ */ m("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
-      /* @__PURE__ */ m("h3", { className: "font-semibold mb-2", children: [
+    X.length > 0 && /* @__PURE__ */ v("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
+      /* @__PURE__ */ v("h3", { className: "font-semibold mb-2", children: [
         "Selected Seats (",
-        F.length,
+        X.length,
         ")"
       ] }),
-      /* @__PURE__ */ r("div", { className: "max-h-48 overflow-y-auto space-y-1", children: F.map((e) => /* @__PURE__ */ m("div", { className: "text-sm", children: [
+      /* @__PURE__ */ r("div", { className: "max-h-48 overflow-y-auto space-y-1", children: X.map((e) => /* @__PURE__ */ v("div", { className: "text-sm", children: [
         e.seatNumber,
-        e.price && ` - ${B.currency} ${e.price.toFixed(2)}`
+        e.price && ` - ${V.currency} ${e.price.toFixed(2)}`
       ] }, e.id)) })
     ] })
-  ] }) : /* @__PURE__ */ r("div", { className: `flex items-center justify-center h-full ${c}`, children: /* @__PURE__ */ r("p", { children: "No configuration provided" }) });
+  ] }) : /* @__PURE__ */ r("div", { className: `flex items-center justify-center h-full ${u}`, children: /* @__PURE__ */ r("p", { children: "No configuration provided" }) });
 };
 export {
-  Se as DEFAULT_COLORS,
-  we as SeatMapViewer,
-  be as useConfigFetcher
+  Fe as DEFAULT_COLORS,
+  Ye as SeatMapViewer,
+  Ne as useConfigFetcher
 };

package/package.json

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