@zonetrix/viewer 2.0.0 → 2.1.1

package/README.md

@@ -14,8 +14,10 @@ Lightweight React component for rendering interactive seat maps in your booking
 - 🌐 **Flexible Config Loading** - Load from JSON files or API endpoints
 - 🔍 **Mouse Wheel Zoom** - Smooth zoom with configurable limits
 - 🎨 **Customizable Colors** - Override default colors to match your brand
+- 🏢 **Multi-floor Support** - Filter and display seats by floor
+- 👁️ **Hidden Seats** - Automatically filters out hidden seats
 - 📱 **Responsive** - Works seamlessly across all screen sizes
-- ⚡ **Lightweight** - Minimal dependencies (~95KB gzipped)
+- ⚡ **Lightweight** - Minimal dependencies
 - 🔒 **Type-safe** - Full TypeScript support
 
 ## Installation
@@ -31,7 +33,30 @@ pnpm add @zonetrix/viewer
 ### Peer Dependencies
 
 ```bash
-npm install react react-dom
+npm install react react-dom konva react-konva
+```
+
+## Exports
+
+```typescript
+// Main component
+import { SeatMapViewer } from '@zonetrix/viewer';
+import type { SeatMapViewerProps } from '@zonetrix/viewer';
+
+// Types
+import type {
+  SeatState,
+  SeatShape,
+  SeatData,
+  SeatMapConfig,
+  ColorSettings
+} from '@zonetrix/viewer';
+
+// Hooks
+import { useConfigFetcher } from '@zonetrix/viewer';
+
+// Constants
+import { DEFAULT_COLORS } from '@zonetrix/viewer';
 ```
 
 ## Quick Start
@@ -40,6 +65,7 @@ npm install react react-dom
 
 ```tsx
 import { SeatMapViewer } from '@zonetrix/viewer';
+import type { SeatData, SeatMapConfig } from '@zonetrix/viewer';
 import venueConfig from './venue-config.json';
 
 function BookingApp() {
@@ -77,14 +103,19 @@ 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 |
+| `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 |
 | `onSeatSelect` | `(seat: SeatData) => void` | No | Callback when a seat is selected |
 | `onSeatDeselect` | `(seat: SeatData) => void` | No | Callback when a seat is deselected |
 | `onSelectionChange` | `(seats: SeatData[]) => void` | No | Callback when selection changes |
 | `colorOverrides` | `Partial<ColorSettings>` | No | Custom colors for seat states |
+| `showTooltip` | `boolean` | No | Show tooltips on hover (default: true) |
 | `zoomEnabled` | `boolean` | No | Enable/disable mouse wheel zoom (default: true) |
-| `showSelectedCount` | `boolean` | No | Show selected seats counter (default: true) |
+| `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 |
 
 *Note: Either `config` or `configUrl` must be provided.
 
@@ -226,6 +257,68 @@ function MobileOptimized() {
 }
 ```
 
+### 6. Multi-floor Venue
+
+```tsx
+import { useState } from 'react';
+import { SeatMapViewer } from '@zonetrix/viewer';
+
+function MultiFloorVenue() {
+  const [currentFloor, setCurrentFloor] = useState('floor_1');
+
+  return (
+    <div>
+      {/* Floor selector */}
+      <div className="floor-tabs">
+        {venueConfig.floors?.map((floor) => (
+          <button
+            key={floor.id}
+            onClick={() => setCurrentFloor(floor.id)}
+            className={currentFloor === floor.id ? 'active' : ''}
+          >
+            {floor.name}
+          </button>
+        ))}
+      </div>
+
+      <SeatMapViewer
+        config={venueConfig}
+        floorId={currentFloor}
+        onFloorChange={setCurrentFloor}
+        onSeatSelect={(seat) => handleSelection(seat)}
+      />
+    </div>
+  );
+}
+```
+
+### 7. Error Handling
+
+```tsx
+import { SeatMapViewer } from '@zonetrix/viewer';
+
+function RobustViewer() {
+  const handleConfigLoad = (config) => {
+    console.log('Config loaded:', config.metadata.name);
+    console.log('Total seats:', config.seats.length);
+  };
+
+  const handleError = (error) => {
+    console.error('Failed to load seat map:', error.message);
+    // Show error notification to user
+  };
+
+  return (
+    <SeatMapViewer
+      configUrl="https://api.example.com/venues/123/config"
+      onConfigLoad={handleConfigLoad}
+      onError={handleError}
+      onSeatSelect={(seat) => console.log('Selected:', seat)}
+    />
+  );
+}
+```
+
 ## Configuration Format
 
 The viewer accepts a `SeatMapConfig` object. You can create these configurations using our creator studio or build them programmatically.
@@ -289,15 +382,18 @@ interface SeatData {
   columnLabel?: string;
   price?: number;
   seatNumber?: string;
+  floorId?: string;
 }
 ```
 
 ### SeatState
 
 ```typescript
-type SeatState = 'available' | 'reserved' | 'selected' | 'unavailable';
+type SeatState = 'available' | 'reserved' | 'selected' | 'unavailable' | 'hidden';
 ```
 
+Note: Hidden seats are automatically filtered out from the viewer.
+
 ### SeatShape
 
 ```typescript
@@ -314,6 +410,7 @@ interface ColorSettings {
   seatReserved: string;
   seatSelected: string;
   seatUnavailable: string;
+  seatHidden: string;
   gridLines: string;
   currency: string;
 }
@@ -327,6 +424,7 @@ interface ColorSettings {
 | `reserved` | Seat is booked by another user | ❌ No | Yellow/Warning color |
 | `selected` | Seat is selected by current user | ✅ Yes (to deselect) | Primary/Blue color |
 | `unavailable` | Seat is blocked (maintenance, etc.) | ❌ No | Gray color |
+| `hidden` | Seat exists but is not displayed | ❌ No | Not rendered |
 
 ## Events & Callbacks
 

package/dist/components/SeatMapViewer.d.ts

@@ -1,9 +1,10 @@
 import { default as React } from 'react';
 import { SeatMapConfig, SeatData, ColorSettings } from '../types';
-
 export interface SeatMapViewerProps {
     config?: SeatMapConfig;
     configUrl?: string;
+    floorId?: string;
+    onFloorChange?: (floorId: string) => void;
     reservedSeats?: string[];
     unavailableSeats?: string[];
     onSeatSelect?: (seat: SeatData) => void;

package/dist/hooks/useConfigFetcher.d.ts

@@ -1,5 +1,4 @@
 import { SeatMapConfig } from '../types';
-
 interface UseConfigFetcherResult {
     config: SeatMapConfig | null;
     loading: boolean;

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("react"),x=require("react-konva");function P(s){const[o,d]=r.useState(null),[g,f]=r.useState(!1),[m,u]=r.useState(null),h=async()=>{if(s){f(!0),u(null);try{const n=await fetch(s);if(!n.ok)throw new Error(`Failed to fetch config: ${n.statusText}`);const c=await n.json();d(c)}catch(n){const c=n instanceof Error?n:new Error("Unknown error occurred");u(c),console.error("Failed to fetch seat map config:",c)}finally{f(!1)}}};return r.useEffect(()=>{h()},[s]),{config:o,loading:g,error:m,refetch:h}}const $={canvasBackground:"#1a1a1a",stageColor:"#808080",seatAvailable:"#2C2B30",seatReserved:"#FCEA00",seatSelected:"#3A7DE5",seatUnavailable:"#6b7280",gridLines:"#404040",currency:"KD"},z=r.memo(({seat:s,state:o,colors:d,onClick:g})=>{const u={available:d.seatAvailable,reserved:d.seatReserved,selected:d.seatSelected,unavailable:d.seatUnavailable}[o],h=o==="available"||o==="selected",n=r.useCallback(()=>{h&&g(s)},[s,g,h]),c={x:s.position.x,y:s.position.y,fill:u,stroke:"#ffffff",strokeWidth:1,onClick:n,onTap:n};return s.shape==="circle"?t.jsx(x.Circle,{...c,radius:12}):t.jsx(x.Rect,{...c,width:12*2,height:12*2,offsetX:12,offsetY:12,cornerRadius:s.shape==="square"?0:4})});z.displayName="ViewerSeat";const V=r.memo(({stage:s,stageColor:o})=>t.jsxs(x.Group,{x:s.position.x,y:s.position.y,children:[t.jsx(x.Rect,{width:s.config.width,height:s.config.height,fill:o+"80",stroke:"#ffffff",strokeWidth:2,cornerRadius:10}),t.jsx(x.Text,{text:s.config.label,x:0,y:0,width:s.config.width,height:s.config.height,fontSize:24,fontStyle:"bold",fill:"#ffffff",align:"center",verticalAlign:"middle"})]}));V.displayName="ViewerStage";const X=({config:s,configUrl:o,reservedSeats:d=[],unavailableSeats:g=[],onSeatSelect:f,onSeatDeselect:m,onSelectionChange:u,colorOverrides:h,showTooltip:n=!0,zoomEnabled:c=!0,className:C="",onConfigLoad:R,onError:E})=>{var A;const T=r.useRef(null),[p,q]=r.useState(new Set),[N,O]=r.useState(1),[b,W]=r.useState({x:0,y:0}),{config:I,loading:U,error:w}=P(o),i=s||I,M=r.useMemo(()=>i?{...i.colors,...h}:{...$,...h},[i,h]),j=r.useMemo(()=>{const e=new Set(d),a=new Set(g);return{reserved:e,unavailable:a}},[d,g]),F=r.useCallback(e=>{const a=e.id,l=e.seatNumber||"";return j.unavailable.has(a)||j.unavailable.has(l)?"unavailable":j.reserved.has(a)||j.reserved.has(l)?"reserved":p.has(a)?"selected":e.state},[j,p]);r.useEffect(()=>{i&&R&&R(i)},[i,R]),r.useEffect(()=>{w&&E&&E(w)},[w,E]);const Y=r.useCallback(e=>{const a=F(e);if(a!=="available"&&a!=="selected")return;const l=p.has(e.id);q(v=>{const y=new Set(v);return l?y.delete(e.id):y.add(e.id),y}),l?m==null||m(e):(f==null||f(e),f||console.log("Seat selected:",e))},[F,p,f,m]),S=r.useMemo(()=>i?i.seats.filter(e=>p.has(e.id)):[],[i,p]);r.useEffect(()=>{u==null||u(S)},[S,u]);const B=r.useCallback(e=>{if(!c)return;e.evt.preventDefault();const a=T.current;if(!a)return;const l=N,v=a.getPointerPosition();if(!v)return;const y={x:(v.x-b.x)/l,y:(v.y-b.y)/l},K=e.evt.deltaY>0?-1:1,L=1.05;let k=K>0?l*L:l/L;k=Math.max(.5,Math.min(5,k)),O(k),W({x:v.x-y.x*k,y:v.y-y.y*k})},[c,N,b]);return U?t.jsx("div",{className:`flex items-center justify-center h-full ${C}`,children:t.jsx("p",{children:"Loading seat map..."})}):w?t.jsx("div",{className:`flex items-center justify-center h-full ${C}`,children:t.jsxs("p",{className:"text-red-500",children:["Error loading seat map: ",w.message]})}):i?t.jsxs("div",{className:`relative ${C}`,children:[t.jsxs(x.Stage,{ref:T,width:i.canvas.width,height:i.canvas.height,scaleX:N,scaleY:N,x:b.x,y:b.y,onWheel:B,style:{backgroundColor:i.canvas.backgroundColor},children:[t.jsx(x.Layer,{listening:!1,children:(A=i.stages)==null?void 0:A.map(e=>t.jsx(V,{stage:e,stageColor:M.stageColor},e.id))}),t.jsx(x.Layer,{children:i.seats.map(e=>t.jsx(z,{seat:e,state:F(e),colors:M,onClick:Y},e.id))})]}),S.length>0&&t.jsxs("div",{className:"absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg",children:[t.jsxs("h3",{className:"font-semibold mb-2",children:["Selected Seats (",S.length,")"]}),t.jsx("div",{className:"max-h-48 overflow-y-auto space-y-1",children:S.map(e=>t.jsxs("div",{className:"text-sm",children:[e.seatNumber,e.price&&` - ${M.currency} ${e.price.toFixed(2)}`]},e.id))})]})]}):t.jsx("div",{className:`flex items-center justify-center h-full ${C}`,children:t.jsx("p",{children:"No configuration provided"})})};exports.DEFAULT_COLORS=$;exports.SeatMapViewer=X;exports.useConfigFetcher=P;
+"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=$;

package/dist/index.mjs

@@ -1,71 +1,74 @@
-import { jsx as i, jsxs as p } from "react/jsx-runtime";
-import { useState as w, useEffect as $, useRef as J, useMemo as M, useCallback as j, memo as W } from "react";
-import { Stage as Q, Layer as L, Group as Z, Rect as I, Text as D, Circle as ee } from "react-konva";
-function te(t) {
-  const [o, l] = w(null), [u, d] = w(!1), [g, f] = w(null), h = async () => {
+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) {
-      d(!0), f(null);
+      g(!0), d(null);
       try {
-        const n = await fetch(t);
-        if (!n.ok)
-          throw new Error(`Failed to fetch config: ${n.statusText}`);
-        const a = await n.json();
-        l(a);
-      } catch (n) {
-        const a = n instanceof Error ? n : new Error("Unknown error occurred");
-        f(a), console.error("Failed to fetch seat map config:", a);
+        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);
       } finally {
-        d(!1);
+        g(!1);
       }
     }
   };
-  return $(() => {
-    h();
+  return T(() => {
+    f();
   }, [t]), {
-    config: o,
-    loading: u,
-    error: g,
-    refetch: h
+    config: c,
+    loading: S,
+    error: y,
+    refetch: f
   };
 }
-const re = {
+const ne = {
   canvasBackground: "#1a1a1a",
   stageColor: "#808080",
   seatAvailable: "#2C2B30",
   seatReserved: "#FCEA00",
   seatSelected: "#3A7DE5",
   seatUnavailable: "#6b7280",
+  seatHidden: "#4a4a4a",
   gridLines: "#404040",
   currency: "KD"
-}, Y = W(({ seat: t, state: o, colors: l, onClick: u }) => {
-  const f = {
-    available: l.seatAvailable,
-    reserved: l.seatReserved,
-    selected: l.seatSelected,
-    unavailable: l.seatUnavailable
-  }[o], h = o === "available" || o === "selected", n = j(() => {
-    h && u(t);
-  }, [t, u, h]), a = {
+}, 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
+    // 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: f,
+    fill: d,
     stroke: "#ffffff",
     strokeWidth: 1,
-    onClick: n,
-    onTap: n
+    onClick: a,
+    onTap: a
   };
-  return t.shape === "circle" ? /* @__PURE__ */ i(
-    ee,
+  return t.shape === "circle" ? /* @__PURE__ */ s(
+    ie,
     {
-      ...a,
+      ...o,
       radius: 12
     }
-  ) : /* @__PURE__ */ i(
-    I,
+  ) : /* @__PURE__ */ s(
+    D,
     {
-      ...a,
-      width: 12 * 2,
-      height: 12 * 2,
+      ...o,
+      width: 24,
+      height: 24,
       offsetX: 12,
       offsetY: 12,
       cornerRadius: t.shape === "square" ? 0 : 4
@@ -73,20 +76,20 @@ const re = {
   );
 });
 Y.displayName = "ViewerSeat";
-const B = W(({ stage: t, stageColor: o }) => /* @__PURE__ */ p(Z, { x: t.position.x, y: t.position.y, children: [
-  /* @__PURE__ */ i(
-    I,
+const B = W(({ stage: t, stageColor: c }) => /* @__PURE__ */ u(ee, { x: t.position.x, y: t.position.y, children: [
+  /* @__PURE__ */ s(
+    D,
     {
       width: t.config.width,
       height: t.config.height,
-      fill: o + "80",
+      fill: c + "80",
       stroke: "#ffffff",
       strokeWidth: 2,
       cornerRadius: 10
     }
   ),
-  /* @__PURE__ */ i(
-    D,
+  /* @__PURE__ */ s(
+    te,
     {
       text: t.config.label,
       x: 0,
@@ -102,98 +105,107 @@ const B = W(({ stage: t, stageColor: o }) => /* @__PURE__ */ p(Z, { x: t.positio
   )
 ] }));
 B.displayName = "ViewerStage";
-const ae = ({
+const ce = ({
   config: t,
-  configUrl: o,
-  reservedSeats: l = [],
-  unavailableSeats: u = [],
+  configUrl: c,
+  floorId: r,
+  onFloorChange: S,
+  reservedSeats: g = [],
+  unavailableSeats: y = [],
   onSeatSelect: d,
-  onSeatDeselect: g,
-  onSelectionChange: f,
-  colorOverrides: h,
-  showTooltip: n = !0,
-  zoomEnabled: a = !0,
-  className: N = "",
-  onConfigLoad: z,
-  onError: A
+  onSeatDeselect: f,
+  onSelectionChange: a,
+  colorOverrides: o,
+  showTooltip: se = !0,
+  zoomEnabled: P = !0,
+  className: F = "",
+  onConfigLoad: j,
+  onError: z
 }) => {
-  var T;
-  const P = J(null), [v, U] = w(/* @__PURE__ */ new Set()), [R, X] = w(1), [x, q] = w({ x: 0, y: 0 }), { config: G, loading: K, error: b } = te(o), r = t || G, E = M(
-    () => r ? { ...r.colors, ...h } : { ...re, ...h },
-    [r, h]
-  ), S = M(() => {
-    const e = new Set(l), s = new Set(u);
-    return { reserved: e, unavailable: s };
-  }, [l, u]), F = j((e) => {
-    const s = e.id, c = e.seatNumber || "";
-    return S.unavailable.has(s) || S.unavailable.has(c) ? "unavailable" : S.reserved.has(s) || S.reserved.has(c) ? "reserved" : v.has(s) ? "selected" : e.state;
-  }, [S, v]);
-  $(() => {
-    r && z && z(r);
-  }, [r, z]), $(() => {
-    b && A && A(b);
-  }, [b, A]);
-  const O = j((e) => {
-    const s = F(e);
-    if (s !== "available" && s !== "selected")
+  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"
+    )), 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")
       return;
-    const c = v.has(e.id);
-    U((m) => {
-      const y = new Set(m);
-      return c ? y.delete(e.id) : y.add(e.id), y;
-    }), c ? g == null || g(e) : (d == null || d(e), d || console.log("Seat selected:", e));
-  }, [F, v, d, g]), k = M(() => r ? r.seats.filter((e) => v.has(e.id)) : [], [r, v]);
-  $(() => {
-    f == null || f(k);
-  }, [k, f]);
-  const _ = j((e) => {
-    if (!a) 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;
     e.evt.preventDefault();
-    const s = P.current;
-    if (!s) return;
-    const c = R, m = s.getPointerPosition();
-    if (!m) return;
-    const y = {
-      x: (m.x - x.x) / c,
-      y: (m.y - x.y) / c
-    }, H = e.evt.deltaY > 0 ? -1 : 1, V = 1.05;
-    let C = H > 0 ? c * V : c / V;
-    C = Math.max(0.5, Math.min(5, C)), X(C), q({
-      x: m.x - y.x * C,
-      y: m.y - y.y * C
+    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
     });
-  }, [a, R, x]);
-  return K ? /* @__PURE__ */ i("div", { className: `flex items-center justify-center h-full ${N}`, children: /* @__PURE__ */ i("p", { children: "Loading seat map..." }) }) : b ? /* @__PURE__ */ i("div", { className: `flex items-center justify-center h-full ${N}`, children: /* @__PURE__ */ p("p", { className: "text-red-500", children: [
+  }, [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: [
     "Error loading seat map: ",
-    b.message
-  ] }) }) : r ? /* @__PURE__ */ p("div", { className: `relative ${N}`, children: [
-    /* @__PURE__ */ p(
-      Q,
+    x.message
+  ] }) }) : i ? /* @__PURE__ */ u("div", { className: `relative ${F}`, children: [
+    /* @__PURE__ */ u(
+      Z,
       {
-        ref: P,
-        width: r.canvas.width,
-        height: r.canvas.height,
+        ref: V,
+        width: i.canvas.width,
+        height: i.canvas.height,
         scaleX: R,
         scaleY: R,
-        x: x.x,
-        y: x.y,
-        onWheel: _,
-        style: { backgroundColor: r.canvas.backgroundColor },
+        x: w.x,
+        y: w.y,
+        onWheel: I,
+        style: { backgroundColor: i.canvas.backgroundColor },
         children: [
-          /* @__PURE__ */ i(L, { listening: !1, children: (T = r.stages) == null ? void 0 : T.map((e) => /* @__PURE__ */ i(
+          /* @__PURE__ */ s(L, { listening: !1, children: K.map((e) => /* @__PURE__ */ s(
             B,
             {
               stage: e,
-              stageColor: E.stageColor
+              stageColor: A.stageColor
             },
             e.id
           )) }),
-          /* @__PURE__ */ i(L, { children: r.seats.map((e) => /* @__PURE__ */ i(
+          /* @__PURE__ */ s(L, { children: E.map((e) => /* @__PURE__ */ s(
             Y,
             {
               seat: e,
-              state: F(e),
-              colors: E,
+              state: M(e),
+              colors: A,
               onClick: O
             },
             e.id
@@ -201,21 +213,21 @@ const ae = ({
         ]
       }
     ),
-    k.length > 0 && /* @__PURE__ */ p("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
-      /* @__PURE__ */ p("h3", { className: "font-semibold mb-2", children: [
+    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: [
         "Selected Seats (",
-        k.length,
+        C.length,
         ")"
       ] }),
-      /* @__PURE__ */ i("div", { className: "max-h-48 overflow-y-auto space-y-1", children: k.map((e) => /* @__PURE__ */ p("div", { className: "text-sm", children: [
+      /* @__PURE__ */ s("div", { className: "max-h-48 overflow-y-auto space-y-1", children: C.map((e) => /* @__PURE__ */ u("div", { className: "text-sm", children: [
         e.seatNumber,
-        e.price && ` - ${E.currency} ${e.price.toFixed(2)}`
+        e.price && ` - ${A.currency} ${e.price.toFixed(2)}`
       ] }, e.id)) })
     ] })
-  ] }) : /* @__PURE__ */ i("div", { className: `flex items-center justify-center h-full ${N}`, children: /* @__PURE__ */ i("p", { children: "No configuration provided" }) });
+  ] }) : /* @__PURE__ */ s("div", { className: `flex items-center justify-center h-full ${F}`, children: /* @__PURE__ */ s("p", { children: "No configuration provided" }) });
 };
 export {
-  re as DEFAULT_COLORS,
-  ae as SeatMapViewer,
-  te as useConfigFetcher
+  ne as DEFAULT_COLORS,
+  ce as SeatMapViewer,
+  re as useConfigFetcher
 };

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export type SeatState = "available" | "reserved" | "selected" | "unavailable";
+export type SeatState = "available" | "reserved" | "selected" | "unavailable" | "hidden";
 export type SeatShape = "circle" | "square" | "rounded-square";
 export interface SeatData {
     id: string;
@@ -23,6 +23,7 @@ export interface SerializedSeat {
     columnLabel?: string;
     seatNumber?: string;
     price?: number;
+    floorId?: string;
 }
 export interface SerializedSection {
     id: string;
@@ -41,6 +42,7 @@ export interface SerializedStage {
         y: number;
     };
     config: any;
+    floorId?: string;
 }
 export interface ColorSettings {
     canvasBackground: string;
@@ -49,6 +51,7 @@ export interface ColorSettings {
     seatReserved: string;
     seatSelected: string;
     seatUnavailable: string;
+    seatHidden: string;
     gridLines: string;
     currency: string;
 }

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@zonetrix/viewer",
-  "version": "2.0.0",
+  "version": "2.1.1",
+  "type": "module",
   "description": "Lightweight React component for rendering interactive seat maps",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -8,9 +9,9 @@
   "sideEffects": false,
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     },
     "./styles.css": "./dist/style.css"
   },
@@ -34,19 +35,19 @@
   "author": "",
   "license": "MIT",
   "peerDependencies": {
+    "konva": "^10.0.12",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "konva": "^9.0.0",
-    "react-konva": "^18.0.0"
+    "react-konva": "^19.2.1"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
-    "@vitejs/plugin-react-swc": "^4.0.0",
-    "konva": "^9.3.18",
-    "react-konva": "^18.2.10",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "konva": "^10.0.12",
+    "react-konva": "^19.2.1",
     "typescript": "^5.8.3",
-    "vite": "^5.4.19",
-    "vite-plugin-dts": "^3.7.0"
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4"
   }
 }