@zonetrix/viewer 2.1.1 → 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

@@ -16,5 +16,12 @@ export interface SeatMapViewerProps {
     className?: string;
     onConfigLoad?: (config: SeatMapConfig) => void;
     onError?: (error: Error) => void;
+    showFloorSelector?: boolean;
+    floorSelectorPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    floorSelectorClassName?: string;
+    showAllFloorsOption?: boolean;
+    allFloorsLabel?: string;
+    fitToView?: boolean;
+    fitPadding?: number;
 }
 export declare const SeatMapViewer: React.FC<SeatMapViewerProps>;

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/types/index.d.ts

@@ -44,6 +44,12 @@ export interface SerializedStage {
     config: any;
     floorId?: string;
 }
+export interface FloorConfig {
+    id: string;
+    name: string;
+    order: number;
+    color?: string;
+}
 export interface ColorSettings {
     canvasBackground: string;
     stageColor: string;
@@ -74,5 +80,6 @@ export interface SeatMapConfig {
     seats: SerializedSeat[];
     sections?: SerializedSection[];
     stages?: SerializedStage[];
+    floors?: FloorConfig[];
 }
 export declare const DEFAULT_COLORS: ColorSettings;

package/package.json

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