@zonetrix/viewer 2.1.1 → 2.2.0

package/dist/components/SeatMapViewer.d.ts

@@ -16,5 +16,10 @@ 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;
 }
 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 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;

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 () => {
+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);
       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 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);
       } finally {
         g(!1);
       }
     }
   };
-  return T(() => {
+  return $(() => {
     f();
   }, [t]), {
-    config: c,
-    loading: S,
-    error: y,
+    config: a,
+    loading: h,
+    error: b,
     refetch: f
   };
 }
-const ne = {
+const Se = {
   canvasBackground: "#1a1a1a",
   stageColor: "#808080",
   seatAvailable: "#2C2B30",
@@ -38,35 +38,35 @@ const ne = {
   seatHidden: "#4a4a4a",
   gridLines: "#404040",
   currency: "KD"
-}, Y = W(({ seat: t, state: c, colors: r, onClick: S }) => {
+}, U = V(({ seat: t, state: a, colors: i, onClick: h }) => {
   const d = {
-    available: r.seatAvailable,
-    reserved: r.seatReserved,
-    selected: r.seatSelected,
-    unavailable: r.seatUnavailable,
-    hidden: r.seatHidden
+    available: i.seatAvailable,
+    reserved: i.seatReserved,
+    selected: i.seatSelected,
+    unavailable: i.seatUnavailable,
+    hidden: i.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 = {
+  }[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,
     stroke: "#ffffff",
     strokeWidth: 1,
-    onClick: a,
-    onTap: a
+    onClick: s,
+    onTap: s
   };
-  return t.shape === "circle" ? /* @__PURE__ */ s(
-    ie,
+  return t.shape === "circle" ? /* @__PURE__ */ r(
+    me,
     {
-      ...o,
+      ...l,
       radius: 12
     }
-  ) : /* @__PURE__ */ s(
-    D,
+  ) : /* @__PURE__ */ r(
+    O,
     {
-      ...o,
+      ...l,
       width: 24,
       height: 24,
       offsetX: 12,
@@ -75,21 +75,21 @@ const ne = {
     }
   );
 });
-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,
+U.displayName = "ViewerSeat";
+const X = V(({ stage: t, stageColor: a }) => /* @__PURE__ */ m(pe, { x: t.position.x, y: t.position.y, children: [
+  /* @__PURE__ */ r(
+    O,
     {
       width: t.config.width,
       height: t.config.height,
-      fill: c + "80",
+      fill: a + "80",
       stroke: "#ffffff",
       strokeWidth: 2,
       cornerRadius: 10
     }
   ),
-  /* @__PURE__ */ s(
-    te,
+  /* @__PURE__ */ r(
+    ge,
     {
       text: t.config.label,
       x: 0,
@@ -104,130 +104,216 @@ const B = W(({ stage: t, stageColor: c }) => /* @__PURE__ */ u(ee, { x: t.positi
     }
   )
 ] }));
-B.displayName = "ViewerStage";
-const ce = ({
+X.displayName = "ViewerStage";
+const q = V(({
+  floors: t,
+  currentFloorId: a,
+  onFloorChange: i,
+  showAllOption: h,
+  allLabel: g,
+  position: b,
+  className: d
+}) => {
+  const f = w(
+    () => [...t].sort((c, k) => c.order - k.order),
+    [t]
+  ), 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]
+  }, 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"
+  }, C = {
+    ...E,
+    backgroundColor: "#3A7DE5",
+    borderColor: "#3A7DE5"
+  };
+  return /* @__PURE__ */ m("div", { className: d, style: l, children: [
+    h && /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        onClick: () => i(null),
+        style: a === null ? C : E,
+        children: g
+      }
+    ),
+    f.map((c) => /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        onClick: () => i(c.id),
+        style: a === c.id ? C : E,
+        children: c.name
+      },
+      c.id
+    ))
+  ] });
+});
+q.displayName = "FloorSelectorBar";
+const we = ({
   config: t,
-  configUrl: c,
-  floorId: r,
-  onFloorChange: S,
+  configUrl: a,
+  floorId: i,
+  onFloorChange: h,
   reservedSeats: g = [],
-  unavailableSeats: y = [],
+  unavailableSeats: b = [],
   onSeatSelect: d,
   onSeatDeselect: f,
-  onSelectionChange: a,
-  colorOverrides: o,
-  showTooltip: se = !0,
-  zoomEnabled: P = !0,
-  className: F = "",
-  onConfigLoad: j,
-  onError: z
+  onSelectionChange: s,
+  colorOverrides: l,
+  showTooltip: E = !0,
+  zoomEnabled: C = !0,
+  className: c = "",
+  onConfigLoad: k,
+  onError: j,
+  // Floor selector props
+  showFloorSelector: W,
+  floorSelectorPosition: G = "top-left",
+  floorSelectorClassName: K,
+  showAllFloorsOption: J = !0,
+  allFloorsLabel: Q = "All"
 }) => {
-  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 _ = 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"
     )), 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);
+  }, [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, 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);
+  }, [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")
       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 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;
     e.evt.preventDefault();
-    const n = V.current;
+    const n = _.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 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
     });
-  }, [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: [
+  }, [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: [
     "Error loading seat map: ",
-    x.message
-  ] }) }) : i ? /* @__PURE__ */ u("div", { className: `relative ${F}`, children: [
-    /* @__PURE__ */ u(
-      Z,
+    I.message
+  ] }) }) : o ? /* @__PURE__ */ m("div", { className: `relative ${c}`, children: [
+    le && P.length > 0 && /* @__PURE__ */ r(
+      q,
+      {
+        floors: P,
+        currentFloorId: p,
+        onFloorChange: se,
+        showAllOption: J,
+        allLabel: Q,
+        position: G,
+        className: K
+      }
+    ),
+    /* @__PURE__ */ m(
+      he,
       {
-        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: _,
+        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 },
         children: [
-          /* @__PURE__ */ s(L, { listening: !1, children: K.map((e) => /* @__PURE__ */ s(
-            B,
+          /* @__PURE__ */ r(H, { listening: !1, children: ae.map((e) => /* @__PURE__ */ r(
+            X,
             {
               stage: e,
-              stageColor: A.stageColor
+              stageColor: B.stageColor
             },
             e.id
           )) }),
-          /* @__PURE__ */ s(L, { children: E.map((e) => /* @__PURE__ */ s(
-            Y,
+          /* @__PURE__ */ r(H, { children: D.map((e) => /* @__PURE__ */ r(
+            U,
             {
               seat: e,
-              state: M(e),
-              colors: A,
-              onClick: O
+              state: L(e),
+              colors: B,
+              onClick: ce
             },
             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: [
+    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: [
         "Selected Seats (",
-        C.length,
+        F.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: F.map((e) => /* @__PURE__ */ m("div", { className: "text-sm", children: [
         e.seatNumber,
-        e.price && ` - ${A.currency} ${e.price.toFixed(2)}`
+        e.price && ` - ${B.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 ${c}`, children: /* @__PURE__ */ r("p", { children: "No configuration provided" }) });
 };
 export {
-  ne as DEFAULT_COLORS,
-  ce as SeatMapViewer,
-  re as useConfigFetcher
+  Se as DEFAULT_COLORS,
+  we as SeatMapViewer,
+  be 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.2.0",
   "type": "module",
   "description": "Lightweight React component for rendering interactive seat maps",
   "main": "./dist/index.js",