@nex125/seatmap-editor 0.1.6 → 0.1.8

package/dist/index.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import { pointInPolygon, generateId, AVAILABLE_STATUS_ID, CommandHistory, serializeVenue, deserializeVenue, venueAABB } from '@nex125/seatmap-core';
+import { isDancefloorSection, pointInPolygon, generateId, isStageSection, AVAILABLE_STATUS_ID, CommandHistory, serializeVenue, deserializeVenue, venueAABB } from '@nex125/seatmap-core';
 import { SeatmapProvider, useSeatmapContext, SeatmapCanvas } from '@nex125/seatmap-react';
 import { useStore } from 'zustand';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -21,16 +21,75 @@ var BaseTool = class {
 };
 
 // src/tools/PanTool.ts
-var PanTool = class extends BaseTool {
+var PanTool = class _PanTool extends BaseTool {
   name = "pan";
   cursor = "grab";
   isPanning = false;
   lastX = 0;
   lastY = 0;
+  panVelocity = { x: 0, y: 0 };
+  lastPanSampleTime = 0;
+  inertiaRaf = 0;
+  inertiaLastTime = 0;
+  panInertiaJelly = 55;
+  panInertiaCarry;
+  panInertiaFriction;
+  panInertiaMinSpeed;
+  static DEFAULT_PAN_VELOCITY_BLEND = 0.3;
+  static DEFAULT_PAN_STOP_DELTA = 0.3;
+  static DEFAULT_PAN_RELEASE_IDLE_MS = 90;
+  panVelocityBlend = _PanTool.DEFAULT_PAN_VELOCITY_BLEND;
+  panStopDelta = _PanTool.DEFAULT_PAN_STOP_DELTA;
+  panReleaseIdleMs = _PanTool.DEFAULT_PAN_RELEASE_IDLE_MS;
+  setInertiaOptions(options) {
+    this.panInertiaJelly = options.panInertiaJelly ?? this.panInertiaJelly;
+    this.panInertiaCarry = options.panInertiaCarry;
+    this.panInertiaFriction = options.panInertiaFriction;
+    this.panInertiaMinSpeed = options.panInertiaMinSpeed;
+    this.panVelocityBlend = options.panVelocityBlend !== void 0 ? Math.max(0.05, Math.min(0.95, options.panVelocityBlend)) : _PanTool.DEFAULT_PAN_VELOCITY_BLEND;
+    this.panStopDelta = options.panStopDelta !== void 0 ? Math.max(0, Math.min(4, options.panStopDelta)) : _PanTool.DEFAULT_PAN_STOP_DELTA;
+    this.panReleaseIdleMs = options.panReleaseIdleMs !== void 0 ? Math.max(0, Math.min(400, options.panReleaseIdleMs)) : _PanTool.DEFAULT_PAN_RELEASE_IDLE_MS;
+  }
+  stopPanInertia() {
+    if (this.inertiaRaf) {
+      cancelAnimationFrame(this.inertiaRaf);
+      this.inertiaRaf = 0;
+    }
+  }
+  startPanInertia(viewport) {
+    this.stopPanInertia();
+    const jelly = Math.max(0, Math.min(100, this.panInertiaJelly)) / 100;
+    const carry = this.panInertiaCarry !== void 0 ? Math.max(0, Math.min(0.98, this.panInertiaCarry)) : 0.58 + jelly * 0.28;
+    const baseFriction = this.panInertiaFriction !== void 0 ? Math.max(0.8, Math.min(0.995, this.panInertiaFriction)) : 0.88 + jelly * 0.08;
+    const minSpeed = this.panInertiaMinSpeed !== void 0 ? Math.max(1e-3, Math.min(0.05, this.panInertiaMinSpeed)) : 0.012 - jelly * 4e-3;
+    let velocity = {
+      x: this.panVelocity.x * carry,
+      y: this.panVelocity.y * carry
+    };
+    if (Math.hypot(velocity.x, velocity.y) < minSpeed) return;
+    this.inertiaLastTime = performance.now();
+    const tick = () => {
+      const now = performance.now();
+      const dt = Math.min(32, Math.max(8, now - this.inertiaLastTime));
+      this.inertiaLastTime = now;
+      const decay = Math.pow(baseFriction, dt / 16.67);
+      velocity = { x: velocity.x * decay, y: velocity.y * decay };
+      if (Math.hypot(velocity.x, velocity.y) < minSpeed) {
+        this.inertiaRaf = 0;
+        return;
+      }
+      viewport.pan(velocity.x * dt, velocity.y * dt);
+      this.inertiaRaf = requestAnimationFrame(tick);
+    };
+    this.inertiaRaf = requestAnimationFrame(tick);
+  }
   onPointerDown(e) {
+    this.stopPanInertia();
     this.isPanning = true;
     this.lastX = e.screenX;
     this.lastY = e.screenY;
+    this.panVelocity = { x: 0, y: 0 };
+    this.lastPanSampleTime = performance.now();
   }
   onPointerMove(e, viewport) {
     if (!this.isPanning) return;
@@ -38,13 +97,30 @@ var PanTool = class extends BaseTool {
     const dy = e.screenY - this.lastY;
     this.lastX = e.screenX;
     this.lastY = e.screenY;
+    const now = performance.now();
+    const dt = Math.max(1, now - this.lastPanSampleTime);
+    this.lastPanSampleTime = now;
+    const nextVelocity = { x: dx / dt, y: dy / dt };
+    const isNearlyStopped = Math.hypot(dx, dy) < this.panStopDelta;
+    this.panVelocity = isNearlyStopped ? { x: this.panVelocity.x * 0.35, y: this.panVelocity.y * 0.35 } : {
+      x: this.panVelocity.x * (1 - this.panVelocityBlend) + nextVelocity.x * this.panVelocityBlend,
+      y: this.panVelocity.y * (1 - this.panVelocityBlend) + nextVelocity.y * this.panVelocityBlend
+    };
     viewport.pan(dx, dy);
   }
-  onPointerUp() {
+  onPointerUp(_e, viewport) {
+    if (this.isPanning) {
+      const timeSinceLastSample = performance.now() - this.lastPanSampleTime;
+      if (timeSinceLastSample > this.panReleaseIdleMs || Math.hypot(this.panVelocity.x, this.panVelocity.y) < 0.01) {
+        this.panVelocity = { x: 0, y: 0 };
+      }
+      this.startPanInertia(viewport);
+    }
     this.isPanning = false;
   }
   onDeactivate() {
     this.isPanning = false;
+    this.stopPanInertia();
   }
 };
 var GRID = 20;
@@ -89,6 +165,8 @@ var SelectTool = class extends BaseTool {
     const hits = this.spatialIndex.queryPoint({ x: e.worldX, y: e.worldY }, 12);
     const seatHit = this.pickNearestSeatHit(hits, { x: e.worldX, y: e.worldY });
     const sectionHit = hits.find((h) => h.type === "section");
+    const seatSection = seatHit ? venue.sections.find((section) => section.id === seatHit.sectionId) ?? null : null;
+    const treatSeatHitAsSection = Boolean(seatSection && isDancefloorSection(seatSection));
     if (this.sectionResizeEnabled) {
       const clickedSection = sectionHit ? venue.sections.find((s) => s.id === sectionHit.sectionId) ?? null : null;
       if (clickedSection) {
@@ -124,11 +202,12 @@ var SelectTool = class extends BaseTool {
           return;
         }
         if (clickedSection && !seatHit) {
+          this.beginSectionDrag(venue, store, clickedSection);
           return;
         }
       }
     }
-    if (seatHit?.seatId && store.getState().selectedSeatIds.has(seatHit.seatId)) {
+    if (seatHit?.seatId && !treatSeatHitAsSection && store.getState().selectedSeatIds.has(seatHit.seatId)) {
       const selectedIds = store.getState().selectedSeatIds;
       const sectionId = seatHit.sectionId;
       const originals = /* @__PURE__ */ new Map();
@@ -153,24 +232,11 @@ var SelectTool = class extends BaseTool {
         return;
       }
     }
-    if (!this.sectionResizeEnabled && sectionHit && !seatHit) {
-      const section = venue.sections.find((s) => s.id === sectionHit.sectionId);
+    const sectionToDragId = treatSeatHitAsSection ? seatHit?.sectionId : sectionHit?.sectionId;
+    if (sectionToDragId && (treatSeatHitAsSection || !seatHit)) {
+      const section = venue.sections.find((s) => s.id === sectionToDragId);
       if (section) {
-        const selectedSectionIds = store.getState().selectedSectionIds;
-        const sectionIds = selectedSectionIds.has(section.id) && selectedSectionIds.size > 1 ? [...selectedSectionIds] : [section.id];
-        const originalPositions = /* @__PURE__ */ new Map();
-        for (const sec of venue.sections) {
-          if (sectionIds.includes(sec.id)) {
-            originalPositions.set(sec.id, { ...sec.position });
-          }
-        }
-        this.dragMode = {
-          type: "section",
-          primarySectionId: section.id,
-          sectionIds,
-          originalPositions,
-          delta: { x: 0, y: 0 }
-        };
+        this.beginSectionDrag(venue, store, section);
         return;
       }
     }
@@ -325,8 +391,10 @@ var SelectTool = class extends BaseTool {
       const hits = this.spatialIndex.queryPoint({ x: e.worldX, y: e.worldY }, 12);
       const seatHit = this.pickNearestSeatHit(hits, { x: e.worldX, y: e.worldY });
       const sectionHit = hits.find((h) => h.type === "section");
+      const seatSection = seatHit ? store.getState().venue?.sections.find((section) => section.id === seatHit.sectionId) ?? null : null;
+      const treatSeatHitAsSection = Boolean(seatSection && isDancefloorSection(seatSection));
       const isMulti = e.ctrlKey || e.shiftKey || e.metaKey;
-      if (seatHit?.seatId) {
+      if (seatHit?.seatId && !treatSeatHitAsSection) {
         this.resizeTargetSectionId = seatHit.sectionId;
         if (isMulti) {
           store.getState().toggleSeat(seatHit.seatId);
@@ -337,22 +405,28 @@ var SelectTool = class extends BaseTool {
           store.getState().setSelection([seatHit.seatId]);
           store.getState().selectSection(seatHit.sectionId);
         }
-      } else if (sectionHit?.sectionId) {
+      } else {
+        const sectionId = treatSeatHitAsSection ? seatHit?.sectionId : sectionHit?.sectionId;
+        if (!sectionId) {
+          if (!isMulti) {
+            if (this.sectionResizeEnabled) {
+              this.resizeTargetSectionId = null;
+            }
+            store.getState().clearSelection();
+          }
+          this.reset();
+          return;
+        }
         if (this.sectionResizeEnabled) {
-          this.resizeTargetSectionId = sectionHit.sectionId;
+          this.resizeTargetSectionId = sectionId;
         } else {
           if (isMulti) {
-            store.getState().toggleSection(sectionHit.sectionId);
+            store.getState().toggleSection(sectionId);
           } else {
             store.getState().clearSelection();
-            store.getState().selectSection(sectionHit.sectionId);
+            store.getState().selectSection(sectionId);
           }
         }
-      } else if (!isMulti) {
-        if (this.sectionResizeEnabled) {
-          this.resizeTargetSectionId = null;
-        }
-        store.getState().clearSelection();
       }
     }
     this.reset();
@@ -393,6 +467,23 @@ var SelectTool = class extends BaseTool {
       }
     });
   }
+  beginSectionDrag(venue, store, section) {
+    const selectedSectionIds = store.getState().selectedSectionIds;
+    const sectionIds = selectedSectionIds.has(section.id) && selectedSectionIds.size > 1 ? [...selectedSectionIds] : [section.id];
+    const originalPositions = /* @__PURE__ */ new Map();
+    for (const sec of venue.sections) {
+      if (sectionIds.includes(sec.id)) {
+        originalPositions.set(sec.id, { ...sec.position });
+      }
+    }
+    this.dragMode = {
+      type: "section",
+      primarySectionId: section.id,
+      sectionIds,
+      originalPositions,
+      delta: { x: 0, y: 0 }
+    };
+  }
   commitDrag(store, dropWorld) {
     const venue = store.getState().venue;
     if (!venue) return;
@@ -1025,6 +1116,8 @@ var SelectTool = class extends BaseTool {
   }
 };
 var CLOSE_THRESHOLD = 15;
+var DANCEFLOOR_SEAT_ID_SUFFIX = "dancefloor-seat";
+var DANCEFLOOR_ROW_ID_SUFFIX = "dancefloor-row";
 var AddSectionTool = class extends BaseTool {
   constructor(history, categoryId = "") {
     super();
@@ -1034,8 +1127,10 @@ var AddSectionTool = class extends BaseTool {
   name = "add-section";
   cursor = "crosshair";
   mode = "rectangle";
+  sectionKind = "section";
   points = [];
   onPointsChange;
+  onSectionCreated;
   setCategoryId(id) {
     this.categoryId = id;
   }
@@ -1044,6 +1139,20 @@ var AddSectionTool = class extends BaseTool {
     this.points = [];
     this.notifyChange();
   }
+  setSectionKind(sectionKind) {
+    if (this.sectionKind === sectionKind) return;
+    this.sectionKind = sectionKind;
+    this.points = [];
+    this.notifyChange();
+  }
+  hasPendingDraft() {
+    return this.points.length > 0;
+  }
+  cancelDrawing() {
+    if (this.points.length === 0) return;
+    this.points = [];
+    this.notifyChange();
+  }
   onPointerDown(e, _viewport, store) {
     if (this.mode === "rectangle") {
       if (this.points.length === 0) {
@@ -1105,11 +1214,12 @@ var AddSectionTool = class extends BaseTool {
     }));
     const newSection = {
       id: generateId(),
-      label: `Section ${Date.now().toString(36).slice(-3).toUpperCase()}`,
+      label: this.sectionKind === "stage" ? "Stage" : this.sectionKind === "dancefloor" ? "Dancefloor" : `Section ${Date.now().toString(36).slice(-3).toUpperCase()}`,
+      kind: this.sectionKind,
       position: { x: cx, y: cy },
       rotation: 0,
-      categoryId: this.categoryId,
-      rows: [],
+      categoryId: this.sectionKind === "stage" ? "" : this.categoryId,
+      rows: this.sectionKind === "dancefloor" ? this.createDancefloorRows(this.categoryId) : [],
       outline
     };
     this.history.execute({
@@ -1118,6 +1228,7 @@ var AddSectionTool = class extends BaseTool {
         const v = store.getState().venue;
         if (!v) return;
         store.getState().setVenue({ ...v, sections: [...v.sections, newSection] });
+        this.onSectionCreated?.(newSection.id);
       },
       undo: () => {
         const v = store.getState().venue;
@@ -1137,12 +1248,27 @@ var AddSectionTool = class extends BaseTool {
       { x: a.x, y: b.y }
     ];
   }
+  createDancefloorRows(categoryId) {
+    const dancefloorSeat = {
+      id: generateId(DANCEFLOOR_SEAT_ID_SUFFIX),
+      label: "Dancefloor",
+      position: { x: 0, y: 0 },
+      status: "available",
+      categoryId
+    };
+    return [
+      {
+        id: generateId(DANCEFLOOR_ROW_ID_SUFFIX),
+        label: "DF",
+        seats: [dancefloorSeat]
+      }
+    ];
+  }
   notifyChange() {
     this.onPointsChange?.(this.points, false);
   }
   onDeactivate() {
-    this.points = [];
-    this.notifyChange();
+    this.cancelDrawing();
   }
 };
 var GRID2 = 20;
@@ -1274,7 +1400,7 @@ var AddRowTool = class extends BaseTool {
     const sectionHits = hits.filter((h) => h.type === "section");
     if (sectionHits.length === 0) return null;
     const sectionIds = [...new Set(sectionHits.map((h) => h.sectionId))];
-    const sections = sectionIds.map((id) => venue.sections.find((s) => s.id === id)).filter((s) => Boolean(s));
+    const sections = sectionIds.map((id) => venue.sections.find((s) => s.id === id)).filter((s) => Boolean(s)).filter((section) => !isStageSection(section) && !isDancefloorSection(section));
     if (sections.length === 0) return null;
     const containing = sections.find((section) => {
       if (section.outline.length < 3) return true;
@@ -1320,7 +1446,7 @@ var AddSeatTool = class extends BaseTool {
     const sectionHits = hits.filter((h) => h.type === "section");
     if (sectionHits.length === 0) return;
     const sectionIds = [...new Set(sectionHits.map((h) => h.sectionId))];
-    let section = sectionIds.map((id) => venue.sections.find((s) => s.id === id)).filter((s) => Boolean(s)).find((s) => {
+    let section = sectionIds.map((id) => venue.sections.find((s) => s.id === id)).filter((s) => Boolean(s)).filter((s) => !isStageSection(s) && !isDancefloorSection(s)).find((s) => {
       if (s.outline.length < 3) return true;
       const c2 = Math.cos(-s.rotation);
       const s22 = Math.sin(-s.rotation);
@@ -1333,7 +1459,7 @@ var AddSeatTool = class extends BaseTool {
       return pointInPolygon(local, s.outline);
     });
     if (!section) {
-      section = sectionIds.map((id) => venue.sections.find((s) => s.id === id)).filter((s) => Boolean(s)).sort(
+      section = sectionIds.map((id) => venue.sections.find((s) => s.id === id)).filter((s) => Boolean(s)).filter((s) => !isStageSection(s) && !isDancefloorSection(s)).sort(
         (a, b) => Math.hypot(e.worldX - a.position.x, e.worldY - a.position.y) - Math.hypot(e.worldX - b.position.x, e.worldY - b.position.y)
       )[0];
     }
@@ -1448,33 +1574,100 @@ var AddSeatTool = class extends BaseTool {
     return candidate;
   }
 };
+function PanIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.9", "aria-hidden": true, ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M8 11V6.6a1.6 1.6 0 1 1 3.2 0V10", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("path", { d: "M11.2 10V5.2a1.6 1.6 0 1 1 3.2 0v5", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("path", { d: "M14.4 10V6.8a1.6 1.6 0 1 1 3.2 0v6.2c0 4-2 6.2-6 6.2h-.4c-3.3 0-5.8-2.2-6.4-5.4l-.7-3.7a1.4 1.4 0 1 1 2.7-.6l.6 2.5", strokeLinecap: "round" })
+  ] });
+}
+function SelectIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.9", "aria-hidden": true, ...props, children: /* @__PURE__ */ jsx("path", { d: "M5 4.5v14l4.4-3 2.5 4.1 2.1-1.3-2.5-4.1 5-.3L5 4.5Z", strokeLinejoin: "round" }) });
+}
+function SectionIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.9", "aria-hidden": true, ...props, children: [
+    /* @__PURE__ */ jsx("rect", { x: "4.5", y: "4.5", width: "15", height: "15", rx: "2.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 9h6M9 15h6", strokeLinecap: "round" })
+  ] });
+}
+function RowIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.9", "aria-hidden": true, ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M4.5 8h15M4.5 12h15M4.5 16h15", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("circle", { cx: "6.4", cy: "8", r: "0.8", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "6.4", cy: "12", r: "0.8", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "6.4", cy: "16", r: "0.8", fill: "currentColor", stroke: "none" })
+  ] });
+}
+function SeatIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.9", "aria-hidden": true, ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M7 12.5V9.4a2.4 2.4 0 1 1 4.8 0v3.1", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 17v-3.1a1.9 1.9 0 0 1 1.9-1.9h8.2a1.9 1.9 0 0 1 1.9 1.9V17", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("path", { d: "M4.8 17.8h14.4", strokeLinecap: "round" })
+  ] });
+}
+function UndoIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.9", "aria-hidden": true, ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M8.5 8.5H5v3.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx("path", { d: "M5.2 8.7c1.8-2 4.2-3.2 7-3.2 5 0 8.8 3.7 8.8 8.5", strokeLinecap: "round" })
+  ] });
+}
+function RedoIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.9", "aria-hidden": true, ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M15.5 8.5H19v3.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx("path", { d: "M18.8 8.7c-1.8-2-4.2-3.2-7-3.2C6.8 5.5 3 9.2 3 14", strokeLinecap: "round" })
+  ] });
+}
+function FitIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.9", "aria-hidden": true, ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 4.8H4.8V9M15 4.8h4.2V9M9 19.2H4.8V15M15 19.2h4.2V15", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx("rect", { x: "8.2", y: "8.2", width: "7.6", height: "7.6", rx: "1.4" })
+  ] });
+}
+function GridIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.9", "aria-hidden": true, ...props, children: [
+    /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "14", height: "14", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14", strokeLinecap: "round" })
+  ] });
+}
+function HintIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.9", "aria-hidden": true, ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M9.4 9.2a2.7 2.7 0 1 1 4.8 1.6c-.6.8-1.6 1.4-1.8 2.7", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 17.4h.01M8.7 19h6.6", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 3.8a8.2 8.2 0 1 1 0 16.4 8.2 8.2 0 0 1 0-16.4Z" })
+  ] });
+}
+function SaveIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.9", "aria-hidden": true, ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 4.5v9.2M8.4 10.7 12 14.3l3.6-3.6", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx("rect", { x: "5", y: "16.2", width: "14", height: "3.8", rx: "1.2" })
+  ] });
+}
+function LoadIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.9", "aria-hidden": true, ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 14.7V5.5M8.4 9.3 12 5.7l3.6 3.6", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx("rect", { x: "5", y: "16.2", width: "14", height: "3.8", rx: "1.2" })
+  ] });
+}
+function SettingsIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.9", "aria-hidden": true, ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 8.2a3.8 3.8 0 1 1 0 7.6 3.8 3.8 0 0 1 0-7.6Z" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "m18.8 12 .9 1.6-1.5 2.6-1.8-.1a6.8 6.8 0 0 1-1.4.8L14.4 19h-3l-.6-2.1a6.8 6.8 0 0 1-1.4-.8l-1.8.1-1.5-2.6.9-1.6a6.7 6.7 0 0 1 0-1.6l-.9-1.6 1.5-2.6 1.8.1c.4-.3.9-.6 1.4-.8l.6-2.1h3l.6 2.1c.5.2 1 .5 1.4.8l1.8-.1 1.5 2.6-.9 1.6c.1.5.1 1.1 0 1.6Z",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
 var tools = [
-  { id: "pan", label: "Pan", icon: "\u270B" },
-  { id: "select", label: "Select", icon: "\u2196" },
-  { id: "add-section", label: "Section", icon: "\u25A2" },
-  { id: "add-row", label: "Row", icon: "\u22EF" },
-  { id: "add-seat", label: "Seat", icon: "+" }
+  { id: "pan", label: "Pan", icon: PanIcon },
+  { id: "select", label: "Select", icon: SelectIcon },
+  { id: "add-section", label: "Section", icon: SectionIcon },
+  { id: "add-row", label: "Row", icon: RowIcon },
+  { id: "add-seat", label: "Seat", icon: SeatIcon }
 ];
-var btnBase = {
-  padding: "6px 10px",
-  borderWidth: 1,
-  borderStyle: "solid",
-  borderColor: "#3a3a5a",
-  borderRadius: 6,
-  background: "#2a2a4a",
-  color: "#e0e0e0",
-  cursor: "pointer",
-  fontSize: 13,
-  fontFamily: "system-ui",
-  display: "flex",
-  alignItems: "center",
-  gap: 4
-};
-var activeBtnStyle = {
-  ...btnBase,
-  background: "#4a4a7a",
-  borderColor: "#6a6aaa"
-};
 function Toolbar({
   activeTool,
   onToolChange,
@@ -1488,112 +1681,171 @@ function Toolbar({
   onFitView,
   onSave,
   onLoad,
+  showHints,
+  onToggleHints,
+  isEditorSettingsOpen,
+  onToggleEditorSettings,
   style
 }) {
+  const getToolbarButtonClassName = (isActive = false, isHighlighted = false) => `seatmap-editor__toolbar-button${isActive ? " is-active" : ""}${isHighlighted ? " is-highlighted" : ""}`;
   return /* @__PURE__ */ jsx(
     "div",
     {
+      className: `seatmap-editor__toolbar${showHints ? " has-shortcuts-row" : ""}`,
       style: {
-        display: "flex",
-        background: "#1a1a2e",
-        borderBottom: "1px solid #2a2a4a",
         ...style
       },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            display: "flex",
-            gap: 4,
-            padding: "8px 12px",
-            alignItems: "center",
-            flexWrap: "wrap"
+      children: /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__toolbar-row seatmap-editor__toolbar-row--primary", children: [
+        tools.map((tool) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onToolChange(tool.id),
+            className: `${getToolbarButtonClassName(activeTool === tool.id)} seatmap-editor__toolbar-tool-button`,
+            title: tool.label,
+            children: [
+              /* @__PURE__ */ jsx(tool.icon, { className: "seatmap-editor__toolbar-icon" }),
+              /* @__PURE__ */ jsx("span", { children: tool.label })
+            ]
           },
-          children: [
-            tools.map((tool) => /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => onToolChange(tool.id),
-                style: activeTool === tool.id ? activeBtnStyle : btnBase,
-                title: tool.label,
-                children: [
-                  /* @__PURE__ */ jsx("span", { children: tool.icon }),
-                  /* @__PURE__ */ jsx("span", { children: tool.label })
-                ]
-              },
-              tool.id
-            )),
-            /* @__PURE__ */ jsx("div", { style: { width: 1, height: 24, background: "#3a3a5a", margin: "0 6px" } }),
-            /* @__PURE__ */ jsx("button", { onClick: onUndo, disabled: !canUndo, style: { ...btnBase, opacity: canUndo ? 1 : 0.4 }, title: "Undo (Ctrl+Z)", children: "\u21A9 Undo" }),
-            /* @__PURE__ */ jsx("button", { onClick: onRedo, disabled: !canRedo, style: { ...btnBase, opacity: canRedo ? 1 : 0.4 }, title: "Redo (Ctrl+Shift+Z)", children: "\u21AA Redo" }),
-            /* @__PURE__ */ jsx("div", { style: { width: 1, height: 24, background: "#3a3a5a", margin: "0 6px" } }),
-            /* @__PURE__ */ jsx("button", { onClick: onFitView, style: btnBase, title: "Fit to view", children: "\u229E Fit" }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: onToggleGridOptions,
-                style: {
-                  ...isGridOptionsOpen ? activeBtnStyle : btnBase,
-                  borderColor: gridEnabled ? "#57b26f" : isGridOptionsOpen ? activeBtnStyle.borderColor : btnBase.borderColor,
-                  boxShadow: gridEnabled ? "0 0 0 1px #57b26f inset" : "none"
-                },
-                title: "Show grid options",
-                children: "# Grid"
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { style: { width: 1, height: 24, background: "#3a3a5a", margin: "0 6px" } }),
-            /* @__PURE__ */ jsx("button", { onClick: onSave, style: btnBase, title: "Export venue as JSON", children: "\u2193 Save" }),
-            /* @__PURE__ */ jsx("button", { onClick: onLoad, style: btnBase, title: "Import venue from JSON", children: "\u2191 Load" })
-          ]
-        }
-      )
+          tool.id
+        )),
+        /* @__PURE__ */ jsx("div", { className: "seatmap-editor__toolbar-divider" }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onUndo,
+            disabled: !canUndo,
+            className: getToolbarButtonClassName(),
+            title: "Undo (Ctrl+Z)",
+            children: [
+              /* @__PURE__ */ jsx(UndoIcon, { className: "seatmap-editor__toolbar-icon" }),
+              /* @__PURE__ */ jsx("span", { children: "Undo" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onRedo,
+            disabled: !canRedo,
+            className: getToolbarButtonClassName(),
+            title: "Redo (Ctrl+Shift+Z)",
+            children: [
+              /* @__PURE__ */ jsx(RedoIcon, { className: "seatmap-editor__toolbar-icon" }),
+              /* @__PURE__ */ jsx("span", { children: "Redo" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "seatmap-editor__toolbar-divider" }),
+        /* @__PURE__ */ jsxs("button", { type: "button", onClick: onFitView, className: getToolbarButtonClassName(), title: "Fit to view", children: [
+          /* @__PURE__ */ jsx(FitIcon, { className: "seatmap-editor__toolbar-icon" }),
+          /* @__PURE__ */ jsx("span", { children: "Fit" })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onToggleGridOptions,
+            className: getToolbarButtonClassName(isGridOptionsOpen, gridEnabled),
+            title: "Show grid options",
+            children: [
+              /* @__PURE__ */ jsx(GridIcon, { className: "seatmap-editor__toolbar-icon" }),
+              /* @__PURE__ */ jsx("span", { children: "Grid" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onToggleHints,
+            className: getToolbarButtonClassName(showHints, showHints),
+            title: "Toggle inline editor hints",
+            children: [
+              /* @__PURE__ */ jsx(HintIcon, { className: "seatmap-editor__toolbar-icon" }),
+              /* @__PURE__ */ jsx("span", { children: "Hints" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onToggleEditorSettings,
+            className: getToolbarButtonClassName(isEditorSettingsOpen, isEditorSettingsOpen),
+            title: "Editor settings",
+            children: [
+              /* @__PURE__ */ jsx(SettingsIcon, { className: "seatmap-editor__toolbar-icon" }),
+              /* @__PURE__ */ jsx("span", { children: "Settings" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "seatmap-editor__toolbar-divider" }),
+        /* @__PURE__ */ jsxs("button", { type: "button", onClick: onSave, className: getToolbarButtonClassName(), title: "Export venue as JSON", children: [
+          /* @__PURE__ */ jsx(SaveIcon, { className: "seatmap-editor__toolbar-icon" }),
+          /* @__PURE__ */ jsx("span", { children: "Save" })
+        ] }),
+        /* @__PURE__ */ jsxs("button", { type: "button", onClick: onLoad, className: getToolbarButtonClassName(), title: "Import venue from JSON", children: [
+          /* @__PURE__ */ jsx(LoadIcon, { className: "seatmap-editor__toolbar-icon" }),
+          /* @__PURE__ */ jsx("span", { children: "Load" })
+        ] }),
+        showHints && /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__toolbar-shortcuts-panel", "aria-label": "Keyboard shortcuts", children: [
+          /* @__PURE__ */ jsx("span", { className: "seatmap-editor__toolbar-shortcuts-title", children: "Keyboard shortcuts" }),
+          /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__toolbar-shortcuts-row", children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              /* @__PURE__ */ jsx("kbd", { children: "H" }),
+              " / ",
+              /* @__PURE__ */ jsx("kbd", { children: "1" }),
+              " - Pan"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              /* @__PURE__ */ jsx("kbd", { children: "V" }),
+              " / ",
+              /* @__PURE__ */ jsx("kbd", { children: "2" }),
+              " - Select"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              /* @__PURE__ */ jsx("kbd", { children: "S" }),
+              " / ",
+              /* @__PURE__ */ jsx("kbd", { children: "3" }),
+              " - Add Section"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__toolbar-shortcuts-row", children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              /* @__PURE__ */ jsx("kbd", { children: "R" }),
+              " / ",
+              /* @__PURE__ */ jsx("kbd", { children: "4" }),
+              " - Add Row"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              /* @__PURE__ */ jsx("kbd", { children: "A" }),
+              " / ",
+              /* @__PURE__ */ jsx("kbd", { children: "5" }),
+              " - Add Seat"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              /* @__PURE__ */ jsx("kbd", { children: "Space" }),
+              " (toggle) - Toggle Pan"
+            ] })
+          ] })
+        ] })
+      ] })
     }
   );
 }
-var labelStyle = {
-  fontSize: 11,
-  color: "#9e9e9e",
-  marginBottom: 2,
-  fontFamily: "system-ui"
-};
-var inputStyle = {
-  width: "100%",
-  padding: "4px 8px",
-  background: "#2a2a4a",
-  border: "1px solid #3a3a5a",
-  borderRadius: 4,
-  color: "#e0e0e0",
-  fontSize: 13,
-  fontFamily: "system-ui",
-  boxSizing: "border-box"
-};
-var selectStyle = { ...inputStyle, cursor: "pointer" };
-var btnDanger = {
-  padding: "3px 8px",
-  border: "1px solid #5a2a2a",
-  borderRadius: 4,
-  background: "#3a1a1a",
-  color: "#f48888",
-  cursor: "pointer",
-  fontSize: 12,
-  fontFamily: "system-ui"
-};
-var btnSmall = {
-  padding: "3px 8px",
-  border: "1px solid #3a3a5a",
-  borderRadius: 4,
-  background: "#2a2a4a",
-  color: "#e0e0e0",
-  cursor: "pointer",
-  fontSize: 12,
-  fontFamily: "system-ui"
-};
 function freshVenue(store) {
   return store.getState().venue;
 }
 function setVenue(store, venue) {
   store.getState().setVenue(venue);
 }
+function isSectionSeatLayoutLocked(section) {
+  return isStageSection(section) || isDancefloorSection(section);
+}
 function PropertyPanel({
   venue,
   selectedSeatIds,
@@ -1666,7 +1918,9 @@ function PropertyPanel({
   const updateSectionCategory = (sectionId, categoryId) => {
     const v = freshVenue(store);
     if (!v) return;
-    const oldCatId = v.sections.find((s) => s.id === sectionId)?.categoryId ?? "";
+    const targetSection = v.sections.find((s) => s.id === sectionId);
+    if (!targetSection || isStageSection(targetSection)) return;
+    const oldCatId = targetSection.categoryId;
     history.execute({
       description: `Change section category`,
       execute: () => {
@@ -1741,12 +1995,15 @@ function PropertyPanel({
     if (sectionIds.length === 0) return;
     const v = freshVenue(store);
     if (!v) return;
-    const targetIds = new Set(sectionIds);
+    const targetIds = new Set(
+      v.sections.filter((section) => sectionIds.includes(section.id) && !isStageSection(section)).map((section) => section.id)
+    );
+    if (targetIds.size === 0) return;
     const previousCategoryBySectionId = new Map(
       v.sections.filter((section) => targetIds.has(section.id)).map((section) => [section.id, section.categoryId])
     );
     history.execute({
-      description: `Change category for ${sectionIds.length} section(s)`,
+      description: `Change category for ${targetIds.size} section(s)`,
       execute: () => {
         const cur = freshVenue(store);
         if (!cur) return;
@@ -1786,26 +2043,6 @@ function PropertyPanel({
       }
     });
   };
-  const deleteSection = (sectionId) => {
-    const v = freshVenue(store);
-    if (!v) return;
-    const removed = v.sections.find((s) => s.id === sectionId);
-    if (!removed) return;
-    history.execute({
-      description: `Delete section "${removed.label}"`,
-      execute: () => {
-        const cur = freshVenue(store);
-        if (!cur) return;
-        setVenue(store, { ...cur, sections: cur.sections.filter((s) => s.id !== sectionId) });
-        store.getState().clearSelection();
-      },
-      undo: () => {
-        const cur = freshVenue(store);
-        if (!cur) return;
-        setVenue(store, { ...cur, sections: [...cur.sections, removed] });
-      }
-    });
-  };
   const deleteRow = (sectionId, rowId) => {
     const v = freshVenue(store);
     if (!v) return;
@@ -1879,11 +2116,43 @@ function PropertyPanel({
       }
     });
   };
+  const deleteSelectedObjects = () => {
+    if (selectedSeatIds.size === 0 && selectedSectionIds.size === 0) return;
+    const v = freshVenue(store);
+    if (!v) return;
+    const selectedSectionIdSet = new Set(selectedSectionIds);
+    const selectedSeatIdSet = new Set(selectedSeatIds);
+    const previousVenue = v;
+    const nextVenue = {
+      ...v,
+      sections: v.sections.filter((section) => !selectedSectionIdSet.has(section.id)).map((section) => ({
+        ...section,
+        rows: section.rows.map((row) => ({
+          ...row,
+          seats: row.seats.filter((seat) => !selectedSeatIdSet.has(seat.id))
+        }))
+      })),
+      tables: v.tables.map((table) => ({
+        ...table,
+        seats: table.seats.filter((seat) => !selectedSeatIdSet.has(seat.id))
+      }))
+    };
+    history.execute({
+      description: "Delete selected objects",
+      execute: () => {
+        setVenue(store, nextVenue);
+        store.getState().clearSelection();
+      },
+      undo: () => {
+        setVenue(store, previousVenue);
+      }
+    });
+  };
   const addSingleSeat = (sectionId) => {
     const v = freshVenue(store);
     if (!v) return;
     const sec = v.sections.find((s) => s.id === sectionId);
-    if (!sec) return;
+    if (!sec || isSectionSeatLayoutLocked(sec)) return;
     let targetRow = sec.rows[sec.rows.length - 1];
     const newSeat = {
       id: generateId(),
@@ -1987,7 +2256,7 @@ function PropertyPanel({
     });
   };
   if (!venue) {
-    return /* @__PURE__ */ jsx("div", { style: { padding: 16, color: "#9e9e9e", fontSize: 13, fontFamily: "system-ui", ...style }, children: "No venue loaded" });
+    return /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel seatmap-editor__panel-muted", style, children: "No venue loaded" });
   }
   const selectedSeatsEverywhere = [];
   for (const section of venue.sections) {
@@ -2006,24 +2275,29 @@ function PropertyPanel({
   const isMixedSeatStatus = selectedSeatStatusIds.size > 1;
   const selectedSeatStatusId = selectedSeatStatusIds.size > 0 ? [...selectedSeatStatusIds][0] : AVAILABLE_STATUS_ID;
   const hasMultipleSelectedSections = selectedSections.length > 1;
+  const selectedNonStageSections = selectedSections.filter((section) => !isStageSection(section));
+  const hasSelectedStage = selectedSections.some((section) => isStageSection(section));
   const selectedSectionIdsList = selectedSections.map((section) => section.id);
   const selectedSectionLabels = new Set(selectedSections.map((section) => section.label));
-  const selectedSectionCategoryIds = new Set(selectedSections.map((section) => section.categoryId));
+  const selectedSectionCategoryIds = new Set(selectedNonStageSections.map((section) => section.categoryId));
   const sharedLabelValue = selectedSectionLabels.size === 1 ? selectedSections[0]?.label ?? "" : "";
-  const sharedCategoryValue = selectedSectionCategoryIds.size === 1 ? selectedSections[0]?.categoryId ?? "" : "__mixed__";
-  return /* @__PURE__ */ jsxs("div", { style: { padding: 16, ...style }, children: [
-    selectedSeatIds.size > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: 24 }, children: [
-      /* @__PURE__ */ jsxs("div", { style: { fontWeight: 600, color: "#e0e0e0", fontSize: 14, fontFamily: "system-ui", marginBottom: 12 }, children: [
-        "Seat Config (",
-        selectedSeatIds.size,
-        " selected)"
+  const sharedCategoryValue = selectedNonStageSections.length === 0 ? "" : selectedSectionCategoryIds.size === 1 ? selectedNonStageSections[0]?.categoryId ?? "" : "__mixed__";
+  return /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel", style, children: [
+    selectedSeatIds.size > 0 && /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-section", children: [
+      /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-section-header", children: [
+        /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-title", children: [
+          "Seat Config (",
+          selectedSeatIds.size,
+          " selected)"
+        ] }),
+        /* @__PURE__ */ jsx("button", { onClick: deleteSelectedObjects, className: "seatmap-editor__panel-button seatmap-editor__panel-button--danger", title: "Delete selected objects", children: "Delete Selected" })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: { marginBottom: 16 }, children: [
-        /* @__PURE__ */ jsx("div", { style: labelStyle, children: "Seat Status" }),
+      /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-section", children: [
+        /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-label", children: "Seat Status" }),
         /* @__PURE__ */ jsxs(
           "select",
           {
-            style: selectStyle,
+            className: "seatmap-editor__panel-select",
             value: isMixedSeatStatus ? "__mixed__" : selectedSeatStatusId,
             onChange: (e) => updateSelectedSeatStatus(e.target.value),
             children: [
@@ -2033,13 +2307,13 @@ function PropertyPanel({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: { marginBottom: 10 }, children: [
-        /* @__PURE__ */ jsxs("div", { style: labelStyle, children: [
+      /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-section", children: [
+        /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-label", children: [
           "Selected Seats (",
           selectedSeatIds.size,
           ")"
         ] }),
-        /* @__PURE__ */ jsx("div", { style: { maxHeight: 200, overflowY: "auto" }, children: Array.from(selectedSeatIds).map((seatId) => {
+        /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-list seatmap-editor__panel-scroll seatmap-editor__panel-scroll--sm", children: Array.from(selectedSeatIds).map((seatId) => {
           let found = null;
           for (const section2 of venue.sections) {
             for (const row2 of section2.rows) {
@@ -2056,20 +2330,9 @@ function PropertyPanel({
           return /* @__PURE__ */ jsxs(
             "div",
             {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: 6,
-                padding: "2px 6px",
-                fontSize: 12,
-                fontFamily: "system-ui",
-                color: "#e0e0e0",
-                background: "#2a2a4a",
-                marginBottom: 2,
-                borderRadius: 4
-              },
+              className: "seatmap-editor__panel-list-item",
               children: [
-                /* @__PURE__ */ jsxs("span", { style: { flex: 1 }, children: [
+                /* @__PURE__ */ jsxs("span", { className: "seatmap-editor__panel-text seatmap-editor__panel-content-grow", children: [
                   section.label,
                   " \xB7 Row ",
                   row.label,
@@ -2080,7 +2343,7 @@ function PropertyPanel({
                   "button",
                   {
                     onClick: () => deleteSeat(section.id, row.id, seat.id),
-                    style: { ...btnDanger, padding: "1px 5px", fontSize: 11 },
+                    className: "seatmap-editor__panel-button seatmap-editor__panel-button--danger seatmap-editor__panel-button--tiny",
                     title: "Delete seat",
                     children: "\u2715"
                   }
@@ -2091,20 +2354,23 @@ function PropertyPanel({
           );
         }) })
       ] }),
-      /* @__PURE__ */ jsx("div", { style: { height: 1, background: "#2a2a4a", margin: "20px 0" } })
+      /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-divider" })
     ] }),
-    selectedSeatIds.size === 0 && selectedSections.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: 24 }, children: [
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }, children: /* @__PURE__ */ jsxs("div", { style: { fontWeight: 600, color: "#e0e0e0", fontSize: 14, fontFamily: "system-ui" }, children: [
-        "Section Config",
-        selectedSections.length > 1 ? ` (${selectedSections.length} selected)` : ""
-      ] }) }),
-      hasMultipleSelectedSections && /* @__PURE__ */ jsxs("div", { style: { marginBottom: 12, padding: 10, borderRadius: 6, background: "#26264a" }, children: [
-        /* @__PURE__ */ jsxs("div", { style: { marginBottom: 10 }, children: [
-          /* @__PURE__ */ jsx("div", { style: labelStyle, children: "Label (apply to all selected)" }),
+    selectedSeatIds.size === 0 && selectedSections.length > 0 && /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-section", children: [
+      /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-section-header", children: [
+        /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-title", children: [
+          "Section / Stage / Dancefloor Config",
+          selectedSections.length > 1 ? ` (${selectedSections.length} selected)` : ""
+        ] }),
+        /* @__PURE__ */ jsx("button", { onClick: deleteSelectedObjects, className: "seatmap-editor__panel-button seatmap-editor__panel-button--danger", title: "Delete selected objects", children: "Delete Selected" })
+      ] }),
+      hasMultipleSelectedSections && /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-section seatmap-editor__panel-section--card", children: [
+        /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-section", children: [
+          /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-label", children: "Label (apply to all selected)" }),
           /* @__PURE__ */ jsx(
             "input",
             {
-              style: inputStyle,
+              className: "seatmap-editor__panel-input",
               value: sharedLabelValue,
               placeholder: "Mixed labels",
               onChange: (e) => updateSelectedSectionsLabel(selectedSectionIdsList, e.target.value)
@@ -2112,129 +2378,125 @@ function PropertyPanel({
           )
         ] }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("div", { style: labelStyle, children: "Category (apply to all selected)" }),
+          /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-label", children: "Category (apply to all selected)" }),
           /* @__PURE__ */ jsxs(
             "select",
             {
-              style: selectStyle,
+              className: "seatmap-editor__panel-select",
               value: sharedCategoryValue,
               onChange: (e) => updateSelectedSectionsCategory(selectedSectionIdsList, e.target.value),
+              disabled: selectedNonStageSections.length === 0,
               children: [
+                selectedNonStageSections.length === 0 && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Not applicable for stage" }),
                 sharedCategoryValue === "__mixed__" && /* @__PURE__ */ jsx("option", { value: "__mixed__", disabled: true, children: "Mixed" }),
                 venue.categories.map((cat) => /* @__PURE__ */ jsx("option", { value: cat.id, children: cat.name }, cat.id))
               ]
             }
-          )
+          ),
+          hasSelectedStage && /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-label", children: "Stage selection is excluded from category changes." })
         ] })
       ] }),
-      selectedSections.map((selectedSection) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: 14, padding: 10, borderRadius: 6, background: "#222242" }, children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { color: "#c7c7df", fontSize: 12, fontFamily: "system-ui", fontWeight: 600 }, children: [
-            "ID: ",
-            selectedSection.id
-          ] }),
-          /* @__PURE__ */ jsx("button", { onClick: () => deleteSection(selectedSection.id), style: btnDanger, title: "Delete section", children: "Delete" })
-        ] }),
+      selectedSections.map((selectedSection) => /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-section seatmap-editor__panel-section--card", children: [
+        /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-section-header", children: /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-muted", children: [
+          "ID: ",
+          selectedSection.id
+        ] }) }),
         !hasMultipleSelectedSections && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { style: { marginBottom: 10 }, children: [
-            /* @__PURE__ */ jsx("div", { style: labelStyle, children: "Label" }),
+          /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-section", children: [
+            /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-label", children: "Label" }),
             /* @__PURE__ */ jsx(
               "input",
               {
-                style: inputStyle,
+                className: "seatmap-editor__panel-input",
                 value: selectedSection.label,
                 onChange: (e) => updateSectionLabel(selectedSection.id, e.target.value)
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { style: { marginBottom: 10 }, children: [
-            /* @__PURE__ */ jsx("div", { style: labelStyle, children: "Category" }),
-            /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-section", children: [
+            /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-label", children: "Category" }),
+            /* @__PURE__ */ jsxs(
               "select",
               {
-                style: selectStyle,
+                className: "seatmap-editor__panel-select",
                 value: selectedSection.categoryId,
                 onChange: (e) => updateSectionCategory(selectedSection.id, e.target.value),
-                children: venue.categories.map((cat) => /* @__PURE__ */ jsx("option", { value: cat.id, children: cat.name }, cat.id))
+                disabled: isStageSection(selectedSection),
+                children: [
+                  isStageSection(selectedSection) && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Not applicable for stage" }),
+                  venue.categories.map((cat) => /* @__PURE__ */ jsx("option", { value: cat.id, children: cat.name }, cat.id))
+                ]
               }
-            )
+            ),
+            isStageSection(selectedSection) && /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-label", children: "Stage does not use pricing category." })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { style: { marginBottom: 10 }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-          /* @__PURE__ */ jsxs("div", { style: labelStyle, children: [
-            "Rows (",
-            selectedSection.rows.length,
-            ") \xB7",
-            " ",
-            selectedSection.rows.reduce((t, r) => t + r.seats.length, 0),
-            " seats"
-          ] }),
-          /* @__PURE__ */ jsx("button", { onClick: () => addSingleSeat(selectedSection.id), style: btnSmall, title: "Add a single seat to the last row", children: "+ Seat" })
-        ] }) }),
-        /* @__PURE__ */ jsx("div", { style: { maxHeight: 220, overflowY: "auto" }, children: selectedSection.rows.map((row) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: 6,
-              padding: "3px 6px",
-              borderRadius: 4,
-              marginBottom: 2,
-              background: "#2a2a4a",
-              fontSize: 12,
-              fontFamily: "system-ui",
-              color: "#e0e0e0"
+        isStageSection(selectedSection) ? /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-section seatmap-editor__panel-section--card seatmap-editor__panel-muted", children: "Stage areas do not support rows or seats." }) : isDancefloorSection(selectedSection) ? /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-section seatmap-editor__panel-section--card seatmap-editor__panel-muted", children: "Dancefloor works as one selectable area seat. Resize the section shape to adjust its footprint." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-section", children: /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-section-header", children: [
+            /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-label", children: [
+              "Rows (",
+              selectedSection.rows.length,
+              ") \xB7",
+              " ",
+              selectedSection.rows.reduce((t, r) => t + r.seats.length, 0),
+              " seats"
+            ] }),
+            /* @__PURE__ */ jsx("button", { onClick: () => addSingleSeat(selectedSection.id), className: "seatmap-editor__panel-button", title: "Add a single seat to the last row", children: "+ Seat" })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-list seatmap-editor__panel-scroll seatmap-editor__panel-scroll--md", children: selectedSection.rows.map((row) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "seatmap-editor__panel-list-item",
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "seatmap-editor__panel-text seatmap-editor__panel-text--strong seatmap-editor__panel-text--mono-min", children: [
+                  "Row ",
+                  row.label
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: "seatmap-editor__panel-muted seatmap-editor__panel-content-grow", children: [
+                  row.seats.length,
+                  " seats"
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => deleteRow(selectedSection.id, row.id),
+                    className: "seatmap-editor__panel-button seatmap-editor__panel-button--danger seatmap-editor__panel-button--tiny",
+                    title: `Delete row ${row.label}`,
+                    children: "\u2715"
+                  }
+                )
+              ]
             },
-            children: [
-              /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600, minWidth: 24 }, children: [
-                "Row ",
-                row.label
-              ] }),
-              /* @__PURE__ */ jsxs("span", { style: { flex: 1, color: "#9e9e9e" }, children: [
-                row.seats.length,
-                " seats"
-              ] }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => deleteRow(selectedSection.id, row.id),
-                  style: { ...btnDanger, padding: "1px 5px", fontSize: 11 },
-                  title: `Delete row ${row.label}`,
-                  children: "\u2715"
-                }
-              )
-            ]
-          },
-          row.id
-        )) })
+            row.id
+          )) })
+        ] })
       ] }, selectedSection.id))
     ] }),
     selectedSections.length === 0 && selectedSeatIds.size === 0 && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, color: "#e0e0e0", fontSize: 14, fontFamily: "system-ui", marginBottom: 12 }, children: "Venue Config" }),
-      /* @__PURE__ */ jsxs("div", { style: { marginBottom: 10 }, children: [
-        /* @__PURE__ */ jsx("div", { style: labelStyle, children: "Venue Name" }),
+      /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-title", children: "Venue Config" }),
+      /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-section", children: [
+        /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-label", children: "Venue Name" }),
         /* @__PURE__ */ jsx(
           "input",
           {
-            style: inputStyle,
+            className: "seatmap-editor__panel-input",
             value: venue.name,
             onChange: (e) => updateVenueName(e.target.value)
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: { marginBottom: 16 }, children: [
-        /* @__PURE__ */ jsx("div", { style: labelStyle, children: "Venue ID" }),
+      /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-section", children: [
+        /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-label", children: "Venue ID" }),
         /* @__PURE__ */ jsx(
           "input",
           {
-            style: inputStyle,
+            className: "seatmap-editor__panel-input",
             value: venue.id,
             onChange: (e) => updateVenueId(e.target.value)
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: { color: "#9e9e9e", fontSize: 11, fontFamily: "system-ui", marginBottom: 12 }, children: [
+      /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-muted seatmap-editor__panel-muted--small", children: [
         "Stats: ",
         venue.sections.length,
         " sections \xB7",
@@ -2242,31 +2504,11 @@ function PropertyPanel({
         venue.sections.reduce((t, s) => t + s.rows.reduce((rt, r) => rt + r.seats.length, 0), 0),
         " seats"
       ] }),
-      /* @__PURE__ */ jsx("div", { style: { height: 1, background: "#2a2a4a", margin: "14px 0" } }),
-      /* @__PURE__ */ jsx("div", { style: labelStyle, children: "Background Image" }),
-      venue.backgroundImage ? /* @__PURE__ */ jsxs("div", { style: { marginTop: 6 }, children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              width: "100%",
-              height: 80,
-              borderRadius: 4,
-              border: "1px solid #3a3a5a",
-              overflow: "hidden",
-              marginBottom: 8
-            },
-            children: /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: venue.backgroundImage,
-                alt: "Background",
-                style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { style: { ...labelStyle, marginBottom: 4 }, children: [
+      /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-divider" }),
+      /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-label", children: "Background Image" }),
+      venue.backgroundImage ? /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-section", children: [
+        /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-img-preview", children: /* @__PURE__ */ jsx("img", { src: venue.backgroundImage, alt: "Background" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-label", children: [
           "Opacity: ",
           Math.round((venue.backgroundImageOpacity ?? 0.5) * 100),
           "%"
@@ -2279,12 +2521,12 @@ function PropertyPanel({
             max: 100,
             value: Math.round((venue.backgroundImageOpacity ?? 0.5) * 100),
             onChange: (e) => onBackgroundOpacityChange?.(parseInt(e.target.value) / 100),
-            style: { width: "100%", accentColor: "#6a6aaa", cursor: "pointer" }
+            className: "seatmap-editor__panel-range"
           }
         ),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginTop: 10 }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-            /* @__PURE__ */ jsx("div", { style: labelStyle, children: "Width" }),
+        /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-grid-2", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-label", children: "Width" }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -2295,12 +2537,12 @@ function PropertyPanel({
                 onChange: (e) => onBackgroundSizeChange?.({
                   width: Math.max(1, Number.parseInt(e.target.value, 10) || 1)
                 }),
-                style: inputStyle
+                className: "seatmap-editor__panel-input"
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-            /* @__PURE__ */ jsx("div", { style: labelStyle, children: "Height" }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-label", children: "Height" }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -2311,68 +2553,44 @@ function PropertyPanel({
                 onChange: (e) => onBackgroundSizeChange?.({
                   height: Math.max(1, Number.parseInt(e.target.value, 10) || 1)
                 }),
-                style: inputStyle
+                className: "seatmap-editor__panel-input"
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs(
-          "label",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: 8,
-              marginTop: 8,
-              color: "#c7c7df",
-              fontSize: 12,
-              fontFamily: "system-ui",
-              cursor: "pointer"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "checkbox",
-                  checked: venue.backgroundImageKeepAspectRatio ?? true,
-                  onChange: (e) => onBackgroundKeepAspectRatioChange?.(e.target.checked)
-                }
-              ),
-              "Keep aspect ratio"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, marginTop: 8 }, children: [
-          /* @__PURE__ */ jsx("button", { onClick: onUploadBackground, style: btnSmall, children: "Replace" }),
-          /* @__PURE__ */ jsx("button", { onClick: onRemoveBackground, style: btnDanger, children: "Remove" })
+        /* @__PURE__ */ jsxs("label", { className: "seatmap-editor__panel-row seatmap-editor__panel-text", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              className: "seatmap-editor__panel-checkbox",
+              checked: venue.backgroundImageKeepAspectRatio ?? true,
+              onChange: (e) => onBackgroundKeepAspectRatioChange?.(e.target.checked)
+            }
+          ),
+          "Keep aspect ratio"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-row", children: [
+          /* @__PURE__ */ jsx("button", { onClick: onUploadBackground, className: "seatmap-editor__panel-button", children: "Replace" }),
+          /* @__PURE__ */ jsx("button", { onClick: onRemoveBackground, className: "seatmap-editor__panel-button seatmap-editor__panel-button--danger", children: "Remove" })
         ] })
       ] }) : /* @__PURE__ */ jsx(
         "button",
         {
           onClick: onUploadBackground,
-          style: { ...btnSmall, marginTop: 6, width: "100%" },
+          className: "seatmap-editor__panel-button seatmap-editor__panel-button--full",
           children: "Upload Image"
         }
       )
     ] })
   ] });
 }
-var btnSmall2 = {
-  padding: "3px 8px",
-  border: "1px solid #3a3a5a",
-  borderRadius: 4,
-  background: "#2a2a4a",
-  color: "#e0e0e0",
-  cursor: "pointer",
-  fontSize: 12,
-  fontFamily: "system-ui"
-};
 function replaceCategoryInVenue(venue, categoryId, replacementCategoryId) {
   return {
     ...venue,
     sections: venue.sections.map((section) => ({
       ...section,
-      categoryId: section.categoryId === categoryId ? replacementCategoryId : section.categoryId,
+      categoryId: isStageSection(section) ? "" : section.categoryId === categoryId ? replacementCategoryId : section.categoryId,
       rows: section.rows.map((row) => ({
         ...row,
         seats: row.seats.map(
@@ -2397,20 +2615,25 @@ function CategoryManager({
   history,
   store,
   fetchCategoryPrices,
-  style
+  style,
+  locale = "en-US",
+  currency = "BYN"
 }) {
   const [newName, setNewName] = useState("");
-  const [newColor, setNewColor] = useState("#4caf50");
+  const [newColor, setNewColor] = useState("#dfcd72");
   const [editingId, setEditingId] = useState(null);
   const [editingName, setEditingName] = useState("");
-  const [editingColor, setEditingColor] = useState("#4caf50");
+  const [editingColor, setEditingColor] = useState("#dfcd72");
   const [isPriceManagerOpen, setIsPriceManagerOpen] = useState(false);
   const [isFetchingPrices, setIsFetchingPrices] = useState(false);
   const [fetchError, setFetchError] = useState(null);
   const [syncStatus, setSyncStatus] = useState("not-synced");
   const [overridePriceDrafts, setOverridePriceDrafts] = useState({});
   if (!venue) return null;
-  const formatPrice = (price) => `$${(Number.isFinite(price) ? price : 0).toFixed(2)}`;
+  const formatPrice = (price) => new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency
+  }).format(Number.isFinite(price) ? price : 0);
   const effectivePrice = (category) => {
     if (category.isPriceOverridden && Number.isFinite(category.overriddenPrice)) {
       return category.overriddenPrice;
@@ -2544,7 +2767,7 @@ function CategoryManager({
       });
       setSyncStatus("synced");
     } catch (error) {
-      const message = error instanceof Error ? error.message : "Failed to fetch prices.";
+      const message = error instanceof Error ? error.message : "Failed to load prices.";
       setFetchError(message);
       const currentVenue = store.getState().venue;
       if (currentVenue) {
@@ -2645,92 +2868,57 @@ function CategoryManager({
       };
     });
   };
-  const switchTrackBase = {
-    width: 34,
-    height: 20,
-    borderRadius: 999,
-    border: "1px solid #4a4a6a",
-    padding: 2,
-    display: "inline-flex",
-    alignItems: "center",
-    transition: "all 0.12s ease"
-  };
-  const switchThumbBase = {
-    width: 14,
-    height: 14,
-    borderRadius: "50%",
-    background: "#e0e0e0",
-    transition: "transform 0.12s ease"
-  };
-  return /* @__PURE__ */ jsxs("div", { style: { padding: 16, ...style }, children: [
-    /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, color: "#e0e0e0", fontSize: 14, fontFamily: "system-ui", marginBottom: 12 }, children: "Pricing Categories" }),
+  return /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel", style, children: [
+    /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-title", children: "Pricing categories" }),
     venue.categories.map((cat) => {
       const isEditing = editingId === cat.id;
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-            flexWrap: "wrap",
-            marginBottom: 6,
-            padding: "4px 8px",
-            borderRadius: 4,
-            background: "#2a2a4a"
-          },
+          className: "seatmap-editor__panel-list-item",
           children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "color",
-                value: isEditing ? editingColor : cat.color,
-                onChange: (e) => isEditing && setEditingColor(e.target.value),
-                disabled: !isEditing,
-                style: { width: 18, height: 18, border: "none", padding: 0, cursor: isEditing ? "pointer" : "default" }
-              }
-            ),
+            /* @__PURE__ */ jsxs("span", { className: "seatmap-editor__color-picker-shell", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "seatmap-editor__color-picker-dot",
+                  style: { background: isEditing ? editingColor : cat.color }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "color",
+                  value: isEditing ? editingColor : cat.color,
+                  onChange: (e) => isEditing && setEditingColor(e.target.value),
+                  disabled: !isEditing,
+                  className: "seatmap-editor__color-picker-input",
+                  "data-editable": isEditing ? "true" : "false",
+                  title: isEditing ? "Pick category color" : "Enable edit mode to change color"
+                }
+              )
+            ] }),
             isEditing ? /* @__PURE__ */ jsx(
               "input",
               {
                 value: editingName,
                 onChange: (e) => setEditingName(e.target.value),
                 onKeyDown: (e) => e.key === "Enter" && saveEdit(),
-                style: {
-                  flex: 1,
-                  minWidth: 0,
-                  padding: "2px 6px",
-                  background: "#1f1f38",
-                  border: "1px solid #3a3a5a",
-                  borderRadius: 4,
-                  color: "#e0e0e0",
-                  fontSize: 12,
-                  fontFamily: "system-ui"
-                }
+                className: "seatmap-editor__panel-input seatmap-editor__panel-input--grow"
               }
-            ) : /* @__PURE__ */ jsx("div", { style: { flex: 1, color: "#e0e0e0", fontSize: 13, fontFamily: "system-ui" }, children: cat.name }),
+            ) : /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-text seatmap-editor__panel-text--truncate", children: cat.name }),
             isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("button", { onClick: saveEdit, style: { ...btnSmall2, padding: "1px 6px", fontSize: 11 }, children: "Save" }),
-              /* @__PURE__ */ jsx("button", { onClick: () => setEditingId(null), style: { ...btnSmall2, padding: "1px 6px", fontSize: 11 }, children: "Cancel" })
+              /* @__PURE__ */ jsx("button", { onClick: saveEdit, className: "seatmap-editor__panel-button seatmap-editor__panel-button--tiny", children: "Save" }),
+              /* @__PURE__ */ jsx("button", { onClick: () => setEditingId(null), className: "seatmap-editor__panel-button seatmap-editor__panel-button--tiny", children: "Cancel" })
             ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    color: "#8f8fa4",
-                    fontSize: 12,
-                    fontFamily: "system-ui",
-                    marginRight: 2
-                  },
-                  children: formatPrice(effectivePrice(cat))
-                }
-              ),
-              /* @__PURE__ */ jsx("button", { onClick: () => startEdit(cat), style: { ...btnSmall2, padding: "1px 6px", fontSize: 11 }, children: "Edit" }),
+              /* @__PURE__ */ jsx("span", { className: "seatmap-editor__panel-muted seatmap-editor__panel-price", children: formatPrice(effectivePrice(cat)) }),
+              /* @__PURE__ */ jsx("button", { onClick: () => startEdit(cat), className: "seatmap-editor__panel-button seatmap-editor__panel-button--tiny", children: "Edit" }),
               /* @__PURE__ */ jsx(
                 "button",
                 {
                   onClick: () => removeCategory(cat.id),
-                  style: { ...btnSmall2, padding: "1px 6px", fontSize: 11 },
+                  className: "seatmap-editor__panel-button seatmap-editor__panel-button--tiny",
                   disabled: venue.categories.length <= 1,
                   title: venue.categories.length <= 1 ? "At least one category is required" : "Delete category",
                   children: "\u2715"
@@ -2742,16 +2930,21 @@ function CategoryManager({
         cat.id
       );
     }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, marginTop: 10, alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "color",
-          value: newColor,
-          onChange: (e) => setNewColor(e.target.value),
-          style: { width: 28, height: 28, border: "none", padding: 0, cursor: "pointer" }
-        }
-      ),
+    /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-row seatmap-editor__panel-row--spaced", children: [
+      /* @__PURE__ */ jsxs("span", { className: "seatmap-editor__color-picker-shell seatmap-editor__color-picker-shell--lg", children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "seatmap-editor__color-picker-dot", style: { background: newColor } }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "color",
+            value: newColor,
+            onChange: (e) => setNewColor(e.target.value),
+            className: "seatmap-editor__color-picker-input",
+            "data-editable": "true",
+            title: "Pick new category color"
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -2759,300 +2952,158 @@ function CategoryManager({
           value: newName,
           onChange: (e) => setNewName(e.target.value),
           onKeyDown: (e) => e.key === "Enter" && addCategory(),
-          style: {
-            flex: 1,
-            padding: "4px 8px",
-            background: "#2a2a4a",
-            border: "1px solid #3a3a5a",
-            borderRadius: 4,
-            color: "#e0e0e0",
-            fontSize: 13,
-            fontFamily: "system-ui"
-          }
+          className: "seatmap-editor__panel-input seatmap-editor__panel-input--grow"
         }
       ),
-      /* @__PURE__ */ jsx("button", { onClick: addCategory, style: btnSmall2, children: "Add" })
+      /* @__PURE__ */ jsx("button", { onClick: addCategory, className: "seatmap-editor__panel-button", children: "Add" })
     ] }),
-    /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 10 }, children: /* @__PURE__ */ jsx("button", { onClick: openPriceManager, style: btnSmall2, children: "Manage Prices" }) }),
+    /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-actions-end", children: /* @__PURE__ */ jsx("button", { onClick: openPriceManager, className: "seatmap-editor__panel-button", children: "Manage prices" }) }),
     isPriceManagerOpen && /* @__PURE__ */ jsx(
       "div",
       {
-        style: {
-          position: "fixed",
-          inset: 0,
-          background: "rgba(8, 8, 18, 0.65)",
-          zIndex: 1e3,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: 16
-        },
+        className: "seatmap-editor__modal-backdrop",
         onClick: () => setIsPriceManagerOpen(false),
         children: /* @__PURE__ */ jsxs(
           "div",
           {
-            style: {
-              width: "min(860px, 95vw)",
-              maxHeight: "80vh",
-              overflow: "auto",
-              background: "#17172b",
-              border: "1px solid #3a3a5a",
-              borderRadius: 10,
-              padding: 16
-            },
+            className: "seatmap-editor__modal",
             onClick: (event) => event.stopPropagation(),
             children: [
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }, children: [
-                /* @__PURE__ */ jsx("div", { style: { color: "#e0e0e0", fontSize: 15, fontFamily: "system-ui", fontWeight: 600 }, children: "Category Pricing" }),
-                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+              /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__modal-header", children: [
+                /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-title", children: "Category prices" }),
+                /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__modal-actions", children: [
                   /* @__PURE__ */ jsx(
                     "button",
                     {
                       onClick: syncPricesFromBackend,
                       disabled: !fetchCategoryPrices || isFetchingPrices,
-                      style: {
-                        ...btnSmall2,
-                        opacity: !fetchCategoryPrices || isFetchingPrices ? 0.6 : 1,
-                        cursor: !fetchCategoryPrices || isFetchingPrices ? "not-allowed" : "pointer"
-                      },
-                      title: fetchCategoryPrices ? "Fetch latest category prices from backend" : "No backend price fetch configured",
-                      children: isFetchingPrices ? "Syncing..." : "Sync from Backend"
+                      className: "seatmap-editor__panel-button",
+                      title: fetchCategoryPrices ? "Load latest prices from backend" : "Backend price sync is not configured",
+                      children: isFetchingPrices ? "Syncing..." : "Sync with backend"
                     }
                   ),
-                  /* @__PURE__ */ jsx("button", { onClick: () => setIsPriceManagerOpen(false), style: btnSmall2, children: "Close" })
+                  /* @__PURE__ */ jsx("button", { onClick: () => setIsPriceManagerOpen(false), className: "seatmap-editor__panel-button", children: "Close" })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx("div", { style: { color: "#9e9eb4", fontSize: 12, fontFamily: "system-ui", marginBottom: 10 }, children: "Backend prices are read-only data. Override lets you temporarily use an overriden category price in this schema." }),
+              /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-muted seatmap-editor__panel-muted--spaced", children: "Backend prices are read-only. Override temporarily uses a custom category price for this seatmap." }),
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  style: {
-                    marginBottom: 10,
-                    color: syncStatus === "synced" ? "#8fd3a6" : syncStatus === "failed" ? "#ff9a9a" : "#b8b8cc",
-                    fontSize: 12,
-                    fontFamily: "system-ui"
-                  },
+                  className: syncStatus === "synced" ? "seatmap-editor__status-line seatmap-editor__status-line--success" : syncStatus === "failed" ? "seatmap-editor__status-line seatmap-editor__status-line--error" : "seatmap-editor__status-line seatmap-editor__status-line--idle",
                   children: [
                     "Sync status:",
                     " ",
-                    syncStatus === "not-synced" ? "Not synced" : syncStatus === "syncing" ? "Syncing..." : syncStatus === "synced" ? "Synced" : "Failed"
+                    syncStatus === "not-synced" ? "Not synced" : syncStatus === "syncing" ? "Syncing..." : syncStatus === "synced" ? "Synced" : "Error"
                   ]
                 }
               ),
-              fetchError && /* @__PURE__ */ jsx("div", { style: { marginBottom: 10, color: "#ff9a9a", fontSize: 12, fontFamily: "system-ui" }, children: fetchError }),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "grid",
-                    gridTemplateColumns: "minmax(160px, 1.6fr) minmax(92px, 0.9fr) minmax(88px, 0.8fr) minmax(188px, 1.4fr) minmax(96px, 0.9fr)",
-                    gap: 8
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("div", { style: { color: "#9e9eb4", fontSize: 11, fontFamily: "system-ui" }, children: "Category" }),
-                    /* @__PURE__ */ jsx("div", { style: { color: "#9e9eb4", fontSize: 11, fontFamily: "system-ui" }, children: "Backend" }),
-                    /* @__PURE__ */ jsx("div", { style: { color: "#9e9eb4", fontSize: 11, fontFamily: "system-ui" }, children: "Override" }),
-                    /* @__PURE__ */ jsx("div", { style: { color: "#9e9eb4", fontSize: 11, fontFamily: "system-ui" }, children: "Override Price" }),
-                    /* @__PURE__ */ jsx("div", { style: { color: "#9e9eb4", fontSize: 11, fontFamily: "system-ui" }, children: "Effective Price" }),
-                    venue.categories.map((category) => /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        style: {
-                          gridColumn: "1 / -1",
-                          display: "grid",
-                          gridTemplateColumns: "minmax(160px, 1.6fr) minmax(92px, 0.9fr) minmax(88px, 0.8fr) minmax(188px, 1.4fr) minmax(96px, 0.9fr)",
-                          gap: 8,
-                          alignItems: "center",
-                          padding: "8px 10px",
-                          borderRadius: 6,
-                          background: "#222242"
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: [
-                            /* @__PURE__ */ jsx(
-                              "span",
-                              {
-                                style: {
-                                  width: 10,
-                                  height: 10,
-                                  borderRadius: 2,
-                                  background: category.color,
-                                  flexShrink: 0
-                                }
+              fetchError && /* @__PURE__ */ jsx("div", { className: "seatmap-editor__status-line seatmap-editor__status-line--error", children: fetchError }),
+              /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__table-grid", children: [
+                /* @__PURE__ */ jsx("div", { className: "seatmap-editor__table-head", children: "Category" }),
+                /* @__PURE__ */ jsx("div", { className: "seatmap-editor__table-head", children: "Backend" }),
+                /* @__PURE__ */ jsx("div", { className: "seatmap-editor__table-head", children: "Override" }),
+                /* @__PURE__ */ jsx("div", { className: "seatmap-editor__table-head", children: "Override price" }),
+                /* @__PURE__ */ jsx("div", { className: "seatmap-editor__table-head", children: "Effective price" }),
+                venue.categories.map((category) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "seatmap-editor__table-row",
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__table-category-cell", children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "seatmap-editor__table-category-swatch",
+                            "aria-hidden": "true",
+                            style: { background: category.color }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "seatmap-editor__table-category-name", children: category.name })
+                      ] }),
+                      /* @__PURE__ */ jsx("span", { className: "seatmap-editor__table-amount", children: formatPrice(category.backendPrice) }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          role: "switch",
+                          "aria-checked": Boolean(category.isPriceOverridden),
+                          onClick: () => toggleOverride(category.id, !category.isPriceOverridden),
+                          className: `seatmap-editor__switch-track${category.isPriceOverridden ? " is-checked" : ""}`,
+                          title: category.isPriceOverridden ? "Disable override" : "Enable override",
+                          children: /* @__PURE__ */ jsx("span", { className: "seatmap-editor__switch-thumb" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__override-editor", children: [
+                        /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            type: "text",
+                            inputMode: "decimal",
+                            value: overridePriceDrafts[category.id] ?? "",
+                            disabled: !category.isPriceOverridden,
+                            onChange: (event) => setOverridePriceDrafts((current) => ({ ...current, [category.id]: event.target.value })),
+                            onKeyDown: (event) => {
+                              if (event.key === "Enter") {
+                                commitOverridePrice(category.id);
                               }
-                            ),
-                            /* @__PURE__ */ jsx("span", { style: { color: "#e0e0e0", fontSize: 13, fontFamily: "system-ui" }, children: category.name })
-                          ] }),
-                          /* @__PURE__ */ jsx("span", { style: { color: "#c7c7df", fontSize: 12, fontFamily: "system-ui" }, children: formatPrice(category.backendPrice) }),
+                              if (event.key === "Escape") {
+                                resetOverrideDraft(category);
+                              }
+                            },
+                            className: `seatmap-editor__override-input${category.isPriceOverridden ? "" : " is-disabled"}`
+                          }
+                        ),
+                        category.isPriceOverridden && /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__override-actions", children: [
                           /* @__PURE__ */ jsx(
                             "button",
                             {
                               type: "button",
-                              role: "switch",
-                              "aria-checked": Boolean(category.isPriceOverridden),
-                              onClick: () => toggleOverride(category.id, !category.isPriceOverridden),
-                              style: {
-                                ...switchTrackBase,
-                                background: category.isPriceOverridden ? "#2d6a3d" : "#2a2a4a",
-                                borderColor: category.isPriceOverridden ? "#57b26f" : "#4a4a6a",
-                                cursor: "pointer"
-                              },
-                              title: category.isPriceOverridden ? "Disable override" : "Enable override",
-                              children: /* @__PURE__ */ jsx(
-                                "span",
-                                {
-                                  style: {
-                                    ...switchThumbBase,
-                                    transform: category.isPriceOverridden ? "translateX(14px)" : "translateX(0)"
-                                  }
-                                }
-                              )
+                              onClick: () => adjustOverrideDraft(category.id, 0.01),
+                              className: "seatmap-editor__table-action-button",
+                              title: "Increase override price",
+                              children: "+"
                             }
                           ),
-                          /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%", minWidth: 0, maxWidth: "100%", overflow: "hidden" }, children: [
-                            /* @__PURE__ */ jsx(
-                              "input",
-                              {
-                                type: "text",
-                                inputMode: "decimal",
-                                value: overridePriceDrafts[category.id] ?? "",
-                                disabled: !category.isPriceOverridden,
-                                onChange: (event) => setOverridePriceDrafts((current) => ({ ...current, [category.id]: event.target.value })),
-                                onKeyDown: (event) => {
-                                  if (event.key === "Enter") {
-                                    commitOverridePrice(category.id);
-                                  }
-                                  if (event.key === "Escape") {
-                                    resetOverrideDraft(category);
-                                  }
-                                },
-                                style: {
-                                  padding: "4px 92px 4px 8px",
-                                  background: category.isPriceOverridden ? "#2a2a4a" : "#2a2a4a88",
-                                  border: "1px solid #3a3a5a",
-                                  borderRadius: 4,
-                                  color: category.isPriceOverridden ? "#e0e0e0" : "#8f8fa4",
-                                  fontSize: 12,
-                                  fontFamily: "system-ui",
-                                  width: "100%",
-                                  maxWidth: "100%",
-                                  boxSizing: "border-box",
-                                  MozAppearance: "textfield"
-                                }
-                              }
-                            ),
-                            category.isPriceOverridden && /* @__PURE__ */ jsxs(
-                              "div",
-                              {
-                                style: {
-                                  position: "absolute",
-                                  right: 3,
-                                  top: "50%",
-                                  transform: "translateY(-50%)",
-                                  display: "inline-flex",
-                                  gap: 2
-                                },
-                                children: [
-                                  /* @__PURE__ */ jsx(
-                                    "button",
-                                    {
-                                      type: "button",
-                                      onClick: () => adjustOverrideDraft(category.id, 0.01),
-                                      style: {
-                                        width: 20,
-                                        height: 20,
-                                        borderRadius: 4,
-                                        border: "1px solid #4a4a6a",
-                                        background: "#2a2a4a",
-                                        color: "#d8d8ee",
-                                        fontSize: 12,
-                                        lineHeight: 1,
-                                        padding: 0,
-                                        cursor: "pointer"
-                                      },
-                                      title: "Increase override price",
-                                      children: "+"
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsx(
-                                    "button",
-                                    {
-                                      type: "button",
-                                      onClick: () => adjustOverrideDraft(category.id, -0.01),
-                                      style: {
-                                        width: 20,
-                                        height: 20,
-                                        borderRadius: 4,
-                                        border: "1px solid #4a4a6a",
-                                        background: "#2a2a4a",
-                                        color: "#d8d8ee",
-                                        fontSize: 12,
-                                        lineHeight: 1,
-                                        padding: 0,
-                                        cursor: "pointer"
-                                      },
-                                      title: "Decrease override price",
-                                      children: "-"
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsx(
-                                    "button",
-                                    {
-                                      type: "button",
-                                      onClick: () => commitOverridePrice(category.id),
-                                      disabled: !isDraftChanged(category),
-                                      style: {
-                                        width: 20,
-                                        height: 20,
-                                        borderRadius: 4,
-                                        border: "1px solid #2f7b44",
-                                        background: isDraftChanged(category) ? "#2d6a3d" : "#244832",
-                                        color: "#d8ffe4",
-                                        fontSize: 11,
-                                        lineHeight: 1,
-                                        padding: 0,
-                                        opacity: isDraftChanged(category) ? 1 : 0.55,
-                                        cursor: isDraftChanged(category) ? "pointer" : "not-allowed"
-                                      },
-                                      title: "Apply override price",
-                                      children: "\u2713"
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsx(
-                                    "button",
-                                    {
-                                      type: "button",
-                                      onClick: () => resetOverrideDraft(category),
-                                      disabled: !isDraftChanged(category),
-                                      style: {
-                                        width: 20,
-                                        height: 20,
-                                        borderRadius: 4,
-                                        border: "1px solid #8b3f4d",
-                                        background: isDraftChanged(category) ? "#6f2c3b" : "#4d2730",
-                                        color: "#ffd9df",
-                                        fontSize: 11,
-                                        lineHeight: 1,
-                                        padding: 0,
-                                        opacity: isDraftChanged(category) ? 1 : 0.55,
-                                        cursor: isDraftChanged(category) ? "pointer" : "not-allowed"
-                                      },
-                                      title: "Cancel override price changes",
-                                      children: "\u2715"
-                                    }
-                                  )
-                                ]
-                              }
-                            )
-                          ] }),
-                          /* @__PURE__ */ jsx("span", { style: { color: "#e0e0e0", fontSize: 12, fontFamily: "system-ui", fontWeight: 600, whiteSpace: "nowrap" }, children: formatPrice(effectivePrice(category)) })
-                        ]
-                      },
-                      category.id
-                    ))
-                  ]
-                }
-              )
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => adjustOverrideDraft(category.id, -0.01),
+                              className: "seatmap-editor__table-action-button",
+                              title: "Decrease override price",
+                              children: "-"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => commitOverridePrice(category.id),
+                              disabled: !isDraftChanged(category),
+                              className: "seatmap-editor__table-action-button seatmap-editor__table-action-button--apply",
+                              title: "Apply override price",
+                              children: "\u2713"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => resetOverrideDraft(category),
+                              disabled: !isDraftChanged(category),
+                              className: "seatmap-editor__table-action-button seatmap-editor__table-action-button--reset",
+                              title: "Revert override changes",
+                              children: "\u2715"
+                            }
+                          )
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsx("span", { className: "seatmap-editor__table-effective-price", children: formatPrice(effectivePrice(category)) })
+                    ]
+                  },
+                  category.id
+                ))
+              ] })
             ]
           }
         )
@@ -3077,81 +3128,57 @@ function LayerPanel({
     return null;
   };
   const selectedSectionIdFromSeats = selectedSeatIds.size > 0 ? findSectionForSeat([...selectedSeatIds][0]) : null;
-  return /* @__PURE__ */ jsxs("div", { style: { padding: 16, ...style }, children: [
-    /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, color: "#e0e0e0", fontSize: 14, fontFamily: "system-ui", marginBottom: 12 }, children: "Layers" }),
-    venue.sections.map((section) => {
-      const seatCount = section.rows.reduce((t, r) => t + r.seats.length, 0);
-      const isActive = storeSelectedSectionIds.has(section.id) || section.id === selectedSectionIdFromSeats;
-      const catColor = venue.categories.find((c) => c.id === section.categoryId)?.color ?? "#666";
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          onClick: (event) => onSelectSection(section.id, {
-            multi: event.ctrlKey || event.metaKey
-          }),
-          style: {
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-            padding: "6px 8px",
-            borderRadius: 4,
-            marginBottom: 2,
-            cursor: "pointer",
-            background: isActive ? "#3a3a5a" : "transparent"
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  width: 10,
-                  height: 10,
-                  borderRadius: 2,
-                  background: catColor,
-                  flexShrink: 0
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    color: "#e0e0e0",
-                    fontSize: 13,
-                    fontFamily: "system-ui",
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis"
-                  },
-                  children: section.label
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { style: { color: "#9e9e9e", fontSize: 11, fontFamily: "system-ui" }, children: [
-                section.rows.length,
-                " rows, ",
-                seatCount,
-                " seats"
-              ] })
-            ] })
-          ]
-        },
-        section.id
-      );
-    }),
-    venue.sections.length === 0 && /* @__PURE__ */ jsx("div", { style: { color: "#9e9e9e", fontSize: 13, fontFamily: "system-ui" }, children: "No sections yet. Use the Add Section tool." })
+  return /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel", style, children: [
+    /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-title", children: "Layers" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "seatmap-editor__panel-list",
+        role: "listbox",
+        "aria-label": "Venue sections",
+        "aria-multiselectable": "true",
+        children: venue.sections.map((section) => {
+          const seatCount = section.rows.reduce((t, r) => t + r.seats.length, 0);
+          const isActive = storeSelectedSectionIds.has(section.id) || section.id === selectedSectionIdFromSeats;
+          const catColor = venue.categories.find((c) => c.id === section.categoryId)?.color ?? "var(--seatmap-editor-text-muted, #666)";
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": isActive,
+              onClick: (event) => onSelectSection(section.id, {
+                multi: event.ctrlKey || event.metaKey
+              }),
+              className: `seatmap-editor__panel-list-item seatmap-editor__panel-list-item--interactive seatmap-editor__panel-list-item--interactive-button${isActive ? " is-active" : ""}`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "seatmap-editor__table-category-swatch",
+                    "aria-hidden": "true",
+                    style: { background: catColor }
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-content-grow", children: [
+                  /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-text seatmap-editor__panel-text--truncate", children: section.label }),
+                  /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-muted seatmap-editor__panel-muted--small", children: [
+                    section.rows.length,
+                    " rows, ",
+                    seatCount,
+                    " seats"
+                  ] })
+                ] })
+              ]
+            },
+            section.id
+          );
+        })
+      }
+    ),
+    venue.sections.length === 0 && /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-muted", children: "No sections yet. Use the Add Section tool." })
   ] });
 }
-var btnSmall3 = {
-  padding: "3px 8px",
-  border: "1px solid #3a3a5a",
-  borderRadius: 4,
-  background: "#2a2a4a",
-  color: "#e0e0e0",
-  cursor: "pointer",
-  fontSize: 12,
-  fontFamily: "system-ui"
-};
 function sanitizeStatusId(name) {
   const slug = name.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
   return slug || generateId();
@@ -3178,10 +3205,10 @@ function replaceStatusInVenue(venue, statusId, replacementStatusId) {
 }
 function StatusManager({ venue, history, store, style }) {
   const [newName, setNewName] = useState("");
-  const [newColor, setNewColor] = useState("#4caf50");
+  const [newColor, setNewColor] = useState("#dfcd72");
   const [editingId, setEditingId] = useState(null);
   const [editingName, setEditingName] = useState("");
-  const [editingColor, setEditingColor] = useState("#4caf50");
+  const [editingColor, setEditingColor] = useState("#dfcd72");
   const statusIds = useMemo(() => new Set(venue?.seatStatuses.map((status) => status.id) ?? []), [venue]);
   if (!venue) return null;
   const addStatus = () => {
@@ -3274,63 +3301,56 @@ function StatusManager({ venue, history, store, style }) {
       }
     });
   };
-  return /* @__PURE__ */ jsxs("div", { style: { padding: 16, ...style }, children: [
-    /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, color: "#e0e0e0", fontSize: 14, fontFamily: "system-ui", marginBottom: 12 }, children: "Seat Statuses" }),
+  return /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel", style, children: [
+    /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-title", children: "Seat Statuses" }),
     venue.seatStatuses.map((status) => {
       const isEditing = editingId === status.id;
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-            flexWrap: "wrap",
-            marginBottom: 6,
-            padding: "4px 8px",
-            borderRadius: 4,
-            background: "#2a2a4a"
-          },
+          className: "seatmap-editor__panel-list-item",
           children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "color",
-                value: isEditing ? editingColor : status.color,
-                onChange: (e) => isEditing && setEditingColor(e.target.value),
-                disabled: !isEditing,
-                style: { width: 18, height: 18, border: "none", padding: 0, cursor: isEditing ? "pointer" : "default" }
-              }
-            ),
+            /* @__PURE__ */ jsxs("span", { className: "seatmap-editor__color-picker-shell", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "seatmap-editor__color-picker-dot",
+                  style: { background: isEditing ? editingColor : status.color }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "color",
+                  value: isEditing ? editingColor : status.color,
+                  onChange: (e) => isEditing && setEditingColor(e.target.value),
+                  disabled: !isEditing,
+                  className: "seatmap-editor__color-picker-input",
+                  "data-editable": isEditing ? "true" : "false",
+                  title: isEditing ? "Pick status color" : "Enable edit to change color"
+                }
+              )
+            ] }),
             isEditing ? /* @__PURE__ */ jsx(
               "input",
               {
                 value: editingName,
                 onChange: (e) => setEditingName(e.target.value),
                 onKeyDown: (e) => e.key === "Enter" && saveEdit(),
-                style: {
-                  flex: 1,
-                  minWidth: 0,
-                  padding: "2px 6px",
-                  background: "#1f1f38",
-                  border: "1px solid #3a3a5a",
-                  borderRadius: 4,
-                  color: "#e0e0e0",
-                  fontSize: 12,
-                  fontFamily: "system-ui"
-                }
+                className: "seatmap-editor__panel-input seatmap-editor__panel-input--grow"
               }
-            ) : /* @__PURE__ */ jsx("div", { style: { flex: 1, color: "#e0e0e0", fontSize: 13, fontFamily: "system-ui" }, children: status.name }),
+            ) : /* @__PURE__ */ jsx("div", { className: "seatmap-editor__panel-text seatmap-editor__panel-content-grow", children: status.name }),
             isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("button", { onClick: saveEdit, style: { ...btnSmall3, padding: "1px 6px", fontSize: 11 }, children: "Save" }),
-              /* @__PURE__ */ jsx("button", { onClick: () => setEditingId(null), style: { ...btnSmall3, padding: "1px 6px", fontSize: 11 }, children: "Cancel" })
+              /* @__PURE__ */ jsx("button", { onClick: saveEdit, className: "seatmap-editor__panel-button seatmap-editor__panel-button--tiny", children: "Save" }),
+              /* @__PURE__ */ jsx("button", { onClick: () => setEditingId(null), className: "seatmap-editor__panel-button seatmap-editor__panel-button--tiny", children: "Cancel" })
             ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("button", { onClick: () => startEdit(status), style: { ...btnSmall3, padding: "1px 6px", fontSize: 11 }, children: "Edit" }),
+              /* @__PURE__ */ jsx("button", { onClick: () => startEdit(status), className: "seatmap-editor__panel-button seatmap-editor__panel-button--tiny", children: "Edit" }),
               /* @__PURE__ */ jsx(
                 "button",
                 {
                   onClick: () => removeStatus(status.id),
-                  style: { ...btnSmall3, padding: "1px 6px", fontSize: 11 },
+                  className: "seatmap-editor__panel-button seatmap-editor__panel-button--tiny",
                   disabled: status.id === AVAILABLE_STATUS_ID,
                   title: status.id === AVAILABLE_STATUS_ID ? "Available status cannot be removed" : "Delete status",
                   children: "\u2715"
@@ -3342,16 +3362,21 @@ function StatusManager({ venue, history, store, style }) {
         status.id
       );
     }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, marginTop: 10, alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "color",
-          value: newColor,
-          onChange: (e) => setNewColor(e.target.value),
-          style: { width: 28, height: 28, border: "none", padding: 0, cursor: "pointer" }
-        }
-      ),
+    /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__panel-row seatmap-editor__panel-row--spaced", children: [
+      /* @__PURE__ */ jsxs("span", { className: "seatmap-editor__color-picker-shell seatmap-editor__color-picker-shell--lg", children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "seatmap-editor__color-picker-dot", style: { background: newColor } }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "color",
+            value: newColor,
+            onChange: (e) => setNewColor(e.target.value),
+            className: "seatmap-editor__color-picker-input",
+            "data-editable": "true",
+            title: "Pick new status color"
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -3359,19 +3384,10 @@ function StatusManager({ venue, history, store, style }) {
           value: newName,
           onChange: (e) => setNewName(e.target.value),
           onKeyDown: (e) => e.key === "Enter" && addStatus(),
-          style: {
-            flex: 1,
-            padding: "4px 8px",
-            background: "#2a2a4a",
-            border: "1px solid #3a3a5a",
-            borderRadius: 4,
-            color: "#e0e0e0",
-            fontSize: 13,
-            fontFamily: "system-ui"
-          }
+          className: "seatmap-editor__panel-input seatmap-editor__panel-input--grow"
         }
       ),
-      /* @__PURE__ */ jsx("button", { onClick: addStatus, style: btnSmall3, children: "Add" })
+      /* @__PURE__ */ jsx("button", { onClick: addStatus, className: "seatmap-editor__panel-button", children: "Add" })
     ] })
   ] });
 }
@@ -3385,6 +3401,26 @@ function fitBackgroundToBounds(boundsWidth, boundsHeight, imageWidth, imageHeigh
     aspectRatio: safeImageWidth / safeImageHeight
   };
 }
+function easeOutBack(t, overshoot) {
+  const c1 = Math.max(0, overshoot);
+  const c3 = c1 + 1;
+  const p = t - 1;
+  return 1 + c3 * p * p * p + c1 * p * p;
+}
+function getViewportStateForFitBounds(viewport, aabb, padding = 40) {
+  const contentW = aabb.maxX - aabb.minX;
+  const contentH = aabb.maxY - aabb.minY;
+  if (contentW <= 0 || contentH <= 0) return null;
+  if (viewport.screenWidth <= 0 || viewport.screenHeight <= 0) return null;
+  const minZoom = 0.05;
+  const maxZoom = 4;
+  const scaleX = (viewport.screenWidth - padding * 2) / contentW;
+  const scaleY = (viewport.screenHeight - padding * 2) / contentH;
+  const zoom = Math.min(maxZoom, Math.max(minZoom, Math.min(scaleX, scaleY)));
+  const x = -(aabb.minX + contentW / 2) + viewport.screenWidth / (2 * zoom);
+  const y = -(aabb.minY + contentH / 2) + viewport.screenHeight / (2 * zoom);
+  return { x, y, zoom };
+}
 function getBackgroundRectInWorld(venue) {
   const width = Math.max(1, venue.backgroundImageWidth ?? venue.bounds.width);
   const height = Math.max(1, venue.backgroundImageHeight ?? venue.bounds.height);
@@ -3397,6 +3433,129 @@ function getBackgroundRectInWorld(venue) {
     height
   };
 }
+var MOTION_SETTINGS_STORAGE_KEY = "seatmap-editor-motion-settings-v1";
+var DEFAULT_MOTION_SETTINGS = {
+  sectionDrawJelly: 46,
+  fitViewJelly: 52,
+  panInertiaJelly: 55,
+  pointerScrollZoomJelly: 52,
+  useAdvancedMotion: false,
+  sectionDrawDurationMs: 620,
+  sectionDrawCenterPullPct: 22,
+  sectionDrawZoomBoostPct: 5,
+  sectionDrawOvershootPct: 72,
+  fitViewDurationMs: 680,
+  fitViewOvershootPct: 90,
+  panInertiaCarryPct: 73,
+  panInertiaFrictionPct: 92,
+  panInertiaMinSpeedMilli: 10,
+  panVelocityBlendPct: 30,
+  panStopDeltaMilli: 300,
+  panReleaseIdleMs: 90,
+  pointerScrollZoomDurationMs: 180,
+  pointerScrollZoomStrengthPct: 22,
+  pointerScrollZoomDeltaDivisor: 680
+};
+function clampPercent(n) {
+  return Math.max(0, Math.min(100, n));
+}
+function clampRange(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+function loadMotionSettings() {
+  if (typeof window === "undefined") return DEFAULT_MOTION_SETTINGS;
+  try {
+    const raw = window.localStorage.getItem(MOTION_SETTINGS_STORAGE_KEY);
+    if (!raw) return DEFAULT_MOTION_SETTINGS;
+    const parsed = JSON.parse(raw);
+    return {
+      sectionDrawJelly: clampPercent(Number(parsed.sectionDrawJelly ?? DEFAULT_MOTION_SETTINGS.sectionDrawJelly)),
+      fitViewJelly: clampPercent(Number(parsed.fitViewJelly ?? DEFAULT_MOTION_SETTINGS.fitViewJelly)),
+      panInertiaJelly: clampPercent(Number(parsed.panInertiaJelly ?? DEFAULT_MOTION_SETTINGS.panInertiaJelly)),
+      pointerScrollZoomJelly: clampPercent(
+        Number(parsed.pointerScrollZoomJelly ?? DEFAULT_MOTION_SETTINGS.pointerScrollZoomJelly)
+      ),
+      useAdvancedMotion: Boolean(parsed.useAdvancedMotion ?? DEFAULT_MOTION_SETTINGS.useAdvancedMotion),
+      sectionDrawDurationMs: clampRange(
+        Number(parsed.sectionDrawDurationMs ?? DEFAULT_MOTION_SETTINGS.sectionDrawDurationMs),
+        100,
+        3e3
+      ),
+      sectionDrawCenterPullPct: clampRange(
+        Number(parsed.sectionDrawCenterPullPct ?? DEFAULT_MOTION_SETTINGS.sectionDrawCenterPullPct),
+        0,
+        100
+      ),
+      sectionDrawZoomBoostPct: clampRange(
+        Number(parsed.sectionDrawZoomBoostPct ?? DEFAULT_MOTION_SETTINGS.sectionDrawZoomBoostPct),
+        0,
+        50
+      ),
+      sectionDrawOvershootPct: clampRange(
+        Number(parsed.sectionDrawOvershootPct ?? DEFAULT_MOTION_SETTINGS.sectionDrawOvershootPct),
+        0,
+        180
+      ),
+      fitViewDurationMs: clampRange(
+        Number(parsed.fitViewDurationMs ?? DEFAULT_MOTION_SETTINGS.fitViewDurationMs),
+        100,
+        3e3
+      ),
+      fitViewOvershootPct: clampRange(
+        Number(parsed.fitViewOvershootPct ?? DEFAULT_MOTION_SETTINGS.fitViewOvershootPct),
+        0,
+        180
+      ),
+      panInertiaCarryPct: clampRange(
+        Number(parsed.panInertiaCarryPct ?? DEFAULT_MOTION_SETTINGS.panInertiaCarryPct),
+        0,
+        95
+      ),
+      panInertiaFrictionPct: clampRange(
+        Number(parsed.panInertiaFrictionPct ?? DEFAULT_MOTION_SETTINGS.panInertiaFrictionPct),
+        70,
+        99
+      ),
+      panInertiaMinSpeedMilli: clampRange(
+        Number(parsed.panInertiaMinSpeedMilli ?? DEFAULT_MOTION_SETTINGS.panInertiaMinSpeedMilli),
+        1,
+        50
+      ),
+      panVelocityBlendPct: clampRange(
+        Number(parsed.panVelocityBlendPct ?? DEFAULT_MOTION_SETTINGS.panVelocityBlendPct),
+        5,
+        95
+      ),
+      panStopDeltaMilli: clampRange(
+        Number(parsed.panStopDeltaMilli ?? DEFAULT_MOTION_SETTINGS.panStopDeltaMilli),
+        0,
+        4e3
+      ),
+      panReleaseIdleMs: clampRange(
+        Number(parsed.panReleaseIdleMs ?? DEFAULT_MOTION_SETTINGS.panReleaseIdleMs),
+        0,
+        400
+      ),
+      pointerScrollZoomDurationMs: clampRange(
+        Number(parsed.pointerScrollZoomDurationMs ?? DEFAULT_MOTION_SETTINGS.pointerScrollZoomDurationMs),
+        60,
+        600
+      ),
+      pointerScrollZoomStrengthPct: clampRange(
+        Number(parsed.pointerScrollZoomStrengthPct ?? DEFAULT_MOTION_SETTINGS.pointerScrollZoomStrengthPct),
+        8,
+        55
+      ),
+      pointerScrollZoomDeltaDivisor: clampRange(
+        Number(parsed.pointerScrollZoomDeltaDivisor ?? DEFAULT_MOTION_SETTINGS.pointerScrollZoomDeltaDivisor),
+        250,
+        1400
+      )
+    };
+  } catch {
+    return DEFAULT_MOTION_SETTINGS;
+  }
+}
 function PolygonPreviewOverlay({
   points,
   closeable,
@@ -3408,59 +3567,53 @@ function PolygonPreviewOverlay({
   const svgPoints = screenPoints.map((p) => `${p.x},${p.y}`).join(" ");
   const first = screenPoints[0];
   const last = screenPoints[screenPoints.length - 1];
+  const isRectanglePreview = mode === "rectangle" && screenPoints.length >= 3;
   return /* @__PURE__ */ jsxs(
     "svg",
     {
-      style: {
-        position: "absolute",
-        inset: 0,
-        width: "100%",
-        height: "100%",
-        pointerEvents: "none",
-        zIndex: 10
-      },
+      className: "seatmap-editor__overlay-svg seatmap-editor__overlay-svg--polygon",
       children: [
-        screenPoints.length >= 2 && /* @__PURE__ */ jsx(
+        screenPoints.length >= 2 && (isRectanglePreview ? /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            className: "seatmap-editor__overlay-polygon",
+            points: svgPoints
+          }
+        ) : /* @__PURE__ */ jsx(
           "polyline",
           {
-            points: svgPoints,
-            fill: "rgba(100, 180, 255, 0.1)",
-            stroke: "rgba(100, 180, 255, 0.8)",
-            strokeWidth: 2,
-            strokeDasharray: "6 4"
+            className: "seatmap-editor__overlay-polyline",
+            points: svgPoints
           }
-        ),
+        )),
         mode === "polygon" && screenPoints.length >= 3 && /* @__PURE__ */ jsx(
           "line",
           {
+            className: `seatmap-editor__overlay-close-line ${closeable ? "seatmap-editor__overlay-close-line--active" : "seatmap-editor__overlay-close-line--inactive"}`,
             x1: last.x,
             y1: last.y,
             x2: first.x,
             y2: first.y,
-            stroke: closeable ? "rgba(100, 255, 100, 0.8)" : "rgba(100, 180, 255, 0.3)",
-            strokeWidth: closeable ? 2 : 1,
             strokeDasharray: "4 4"
           }
         ),
         mode === "polygon" && screenPoints.map((p, i) => /* @__PURE__ */ jsx(
           "circle",
           {
+            className: `seatmap-editor__overlay-point${i === 0 && closeable ? " seatmap-editor__overlay-point--first-active" : ""}`,
             cx: p.x,
             cy: p.y,
-            r: i === 0 && closeable ? 8 : 4,
-            fill: i === 0 && closeable ? "rgba(100, 255, 100, 0.8)" : "rgba(100, 180, 255, 0.8)"
+            r: i === 0 && closeable ? 8 : 4
           },
           i
         )),
         mode === "polygon" && points.length >= 2 && /* @__PURE__ */ jsxs(
           "text",
           {
+            className: "seatmap-editor__overlay-label-text",
             x: (first.x + last.x) / 2,
             y: (first.y + last.y) / 2 - 10,
-            fill: "#e0e0e0",
             fontSize: 12,
-            fontFamily: "system-ui",
-            textAnchor: "middle",
             children: [
               points.length,
               " points ",
@@ -3485,35 +3638,23 @@ function DragPreviewOverlay({
   return /* @__PURE__ */ jsxs(
     "svg",
     {
-      style: {
-        position: "absolute",
-        inset: 0,
-        width: "100%",
-        height: "100%",
-        pointerEvents: "none",
-        zIndex: 14
-      },
+      className: "seatmap-editor__overlay-svg seatmap-editor__overlay-svg--drag",
       children: [
         sectionScreenOutlines.filter((outline) => outline.length >= 3).map((outline, i) => /* @__PURE__ */ jsx(
           "polygon",
           {
-            points: outline.map((p) => `${p.x},${p.y}`).join(" "),
-            fill: "rgba(110, 190, 255, 0.16)",
-            stroke: "rgba(110, 190, 255, 0.95)",
-            strokeWidth: 2,
-            strokeDasharray: "8 6"
+            className: "seatmap-editor__overlay-drag-outline",
+            points: outline.map((p) => `${p.x},${p.y}`).join(" ")
           },
           i
         )),
         seatScreenPoints.map((p, i) => /* @__PURE__ */ jsx(
           "circle",
           {
+            className: "seatmap-editor__overlay-drag-seat",
             cx: p.x,
             cy: p.y,
-            r: 5,
-            fill: "rgba(110, 190, 255, 0.35)",
-            stroke: "rgba(110, 190, 255, 0.95)",
-            strokeWidth: 1.5
+            r: 5
           },
           i
         ))
@@ -3539,6 +3680,8 @@ function EditorInner({
   const backgroundResizeAnchorRef = useRef(null);
   const backgroundMoveOffsetRef = useRef(null);
   const historyRef = useRef(new CommandHistory());
+  const fitViewRafRef = useRef(0);
+  const applyMotionSyncRafRef = useRef(0);
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
   const panTool = useMemo(() => new PanTool(), []);
@@ -3582,17 +3725,209 @@ function EditorInner({
   const sectionResizeReturnToAddSectionRef = useRef(false);
   const [, setDragPreviewVersion] = useState(0);
   const [sectionMode, setSectionMode] = useState("rectangle");
+  const [sectionKind, setSectionKind] = useState("section");
   const [sectionResizeEnabled, setSectionResizeEnabled] = useState(false);
+  const [autoFocusNewSection, setAutoFocusNewSection] = useState(true);
   const [gridEnabled, setGridEnabled] = useState(false);
   const [isGridOptionsOpen, setIsGridOptionsOpen] = useState(false);
   const [showCanvasGrid, setShowCanvasGrid] = useState(false);
   const [canvasGridStyle, setCanvasGridStyle] = useState("solid");
   const [showSectionGrid, setShowSectionGrid] = useState(true);
   const [sectionGridStyle, setSectionGridStyle] = useState("dots");
+  const [showHints, setShowHints] = useState(true);
+  const [isEditorSettingsOpen, setIsEditorSettingsOpen] = useState(false);
+  const motionSettings = useMemo(() => loadMotionSettings(), []);
+  const [sectionDrawJelly, setSectionDrawJelly] = useState(motionSettings.sectionDrawJelly);
+  const [fitViewJelly, setFitViewJelly] = useState(motionSettings.fitViewJelly);
+  const [panInertiaJelly, setPanInertiaJelly] = useState(motionSettings.panInertiaJelly);
+  const [pointerScrollZoomJelly, setPointerScrollZoomJelly] = useState(motionSettings.pointerScrollZoomJelly);
+  const [useAdvancedMotion, setUseAdvancedMotion] = useState(motionSettings.useAdvancedMotion);
+  const [sectionDrawDurationMs, setSectionDrawDurationMs] = useState(motionSettings.sectionDrawDurationMs);
+  const [sectionDrawCenterPullPct, setSectionDrawCenterPullPct] = useState(motionSettings.sectionDrawCenterPullPct);
+  const [sectionDrawZoomBoostPct, setSectionDrawZoomBoostPct] = useState(motionSettings.sectionDrawZoomBoostPct);
+  const [sectionDrawOvershootPct, setSectionDrawOvershootPct] = useState(motionSettings.sectionDrawOvershootPct);
+  const [fitViewDurationMs, setFitViewDurationMs] = useState(motionSettings.fitViewDurationMs);
+  const [fitViewOvershootPct, setFitViewOvershootPct] = useState(motionSettings.fitViewOvershootPct);
+  const [panInertiaCarryPct, setPanInertiaCarryPct] = useState(motionSettings.panInertiaCarryPct);
+  const [panInertiaFrictionPct, setPanInertiaFrictionPct] = useState(motionSettings.panInertiaFrictionPct);
+  const [panInertiaMinSpeedMilli, setPanInertiaMinSpeedMilli] = useState(motionSettings.panInertiaMinSpeedMilli);
+  const [panVelocityBlendPct, setPanVelocityBlendPct] = useState(motionSettings.panVelocityBlendPct);
+  const [panStopDeltaMilli, setPanStopDeltaMilli] = useState(motionSettings.panStopDeltaMilli);
+  const [panReleaseIdleMs, setPanReleaseIdleMs] = useState(motionSettings.panReleaseIdleMs);
+  const [pointerScrollZoomDurationMs, setPointerScrollZoomDurationMs] = useState(motionSettings.pointerScrollZoomDurationMs);
+  const [pointerScrollZoomStrengthPct, setPointerScrollZoomStrengthPct] = useState(motionSettings.pointerScrollZoomStrengthPct);
+  const [pointerScrollZoomDeltaDivisor, setPointerScrollZoomDeltaDivisor] = useState(motionSettings.pointerScrollZoomDeltaDivisor);
   const [seatsPerRow, setSeatsPerRow] = useState(10);
   const [rowsCount, setRowsCount] = useState(1);
   const [rowOrientationDeg, setRowOrientationDeg] = useState(0);
+  const [rowDirectionArrowMode, setRowDirectionArrowMode] = useState("row-direction");
   const [rowPreviewPoint, setRowPreviewPoint] = useState(null);
+  const [cursorScreenPoint, setCursorScreenPoint] = useState(null);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const payload = {
+      sectionDrawJelly,
+      fitViewJelly,
+      panInertiaJelly,
+      pointerScrollZoomJelly,
+      useAdvancedMotion,
+      sectionDrawDurationMs,
+      sectionDrawCenterPullPct,
+      sectionDrawZoomBoostPct,
+      sectionDrawOvershootPct,
+      fitViewDurationMs,
+      fitViewOvershootPct,
+      panInertiaCarryPct,
+      panInertiaFrictionPct,
+      panInertiaMinSpeedMilli,
+      panVelocityBlendPct,
+      panStopDeltaMilli,
+      panReleaseIdleMs,
+      pointerScrollZoomDurationMs,
+      pointerScrollZoomStrengthPct,
+      pointerScrollZoomDeltaDivisor
+    };
+    window.localStorage.setItem(MOTION_SETTINGS_STORAGE_KEY, JSON.stringify(payload));
+  }, [
+    sectionDrawJelly,
+    fitViewJelly,
+    panInertiaJelly,
+    pointerScrollZoomJelly,
+    useAdvancedMotion,
+    sectionDrawDurationMs,
+    sectionDrawCenterPullPct,
+    sectionDrawZoomBoostPct,
+    sectionDrawOvershootPct,
+    fitViewDurationMs,
+    fitViewOvershootPct,
+    panInertiaCarryPct,
+    panInertiaFrictionPct,
+    panInertiaMinSpeedMilli,
+    panVelocityBlendPct,
+    panStopDeltaMilli,
+    panReleaseIdleMs,
+    pointerScrollZoomDurationMs,
+    pointerScrollZoomStrengthPct,
+    pointerScrollZoomDeltaDivisor
+  ]);
+  useEffect(() => {
+    panTool.setInertiaOptions({
+      panInertiaJelly,
+      panInertiaCarry: useAdvancedMotion ? panInertiaCarryPct / 100 : void 0,
+      panInertiaFriction: useAdvancedMotion ? panInertiaFrictionPct / 100 : void 0,
+      panInertiaMinSpeed: useAdvancedMotion ? panInertiaMinSpeedMilli / 1e3 : void 0,
+      panVelocityBlend: useAdvancedMotion ? panVelocityBlendPct / 100 : void 0,
+      panStopDelta: useAdvancedMotion ? panStopDeltaMilli / 1e3 : void 0,
+      panReleaseIdleMs: useAdvancedMotion ? panReleaseIdleMs : void 0
+    });
+  }, [
+    panTool,
+    panInertiaJelly,
+    useAdvancedMotion,
+    panInertiaCarryPct,
+    panInertiaFrictionPct,
+    panInertiaMinSpeedMilli,
+    panVelocityBlendPct,
+    panStopDeltaMilli,
+    panReleaseIdleMs
+  ]);
+  const handleResetMotionSettings = useCallback(() => {
+    setSectionDrawJelly(DEFAULT_MOTION_SETTINGS.sectionDrawJelly);
+    setFitViewJelly(DEFAULT_MOTION_SETTINGS.fitViewJelly);
+    setPanInertiaJelly(DEFAULT_MOTION_SETTINGS.panInertiaJelly);
+    setPointerScrollZoomJelly(DEFAULT_MOTION_SETTINGS.pointerScrollZoomJelly);
+    setUseAdvancedMotion(DEFAULT_MOTION_SETTINGS.useAdvancedMotion);
+    setSectionDrawDurationMs(DEFAULT_MOTION_SETTINGS.sectionDrawDurationMs);
+    setSectionDrawCenterPullPct(DEFAULT_MOTION_SETTINGS.sectionDrawCenterPullPct);
+    setSectionDrawZoomBoostPct(DEFAULT_MOTION_SETTINGS.sectionDrawZoomBoostPct);
+    setSectionDrawOvershootPct(DEFAULT_MOTION_SETTINGS.sectionDrawOvershootPct);
+    setFitViewDurationMs(DEFAULT_MOTION_SETTINGS.fitViewDurationMs);
+    setFitViewOvershootPct(DEFAULT_MOTION_SETTINGS.fitViewOvershootPct);
+    setPanInertiaCarryPct(DEFAULT_MOTION_SETTINGS.panInertiaCarryPct);
+    setPanInertiaFrictionPct(DEFAULT_MOTION_SETTINGS.panInertiaFrictionPct);
+    setPanInertiaMinSpeedMilli(DEFAULT_MOTION_SETTINGS.panInertiaMinSpeedMilli);
+    setPanVelocityBlendPct(DEFAULT_MOTION_SETTINGS.panVelocityBlendPct);
+    setPanStopDeltaMilli(DEFAULT_MOTION_SETTINGS.panStopDeltaMilli);
+    setPanReleaseIdleMs(DEFAULT_MOTION_SETTINGS.panReleaseIdleMs);
+    setPointerScrollZoomDurationMs(DEFAULT_MOTION_SETTINGS.pointerScrollZoomDurationMs);
+    setPointerScrollZoomStrengthPct(DEFAULT_MOTION_SETTINGS.pointerScrollZoomStrengthPct);
+    setPointerScrollZoomDeltaDivisor(DEFAULT_MOTION_SETTINGS.pointerScrollZoomDeltaDivisor);
+  }, []);
+  const animateBasicKnobValues = useCallback((targets) => {
+    if (applyMotionSyncRafRef.current) {
+      cancelAnimationFrame(applyMotionSyncRafRef.current);
+      applyMotionSyncRafRef.current = 0;
+    }
+    const start = {
+      section: sectionDrawJelly,
+      fit: fitViewJelly,
+      pan: panInertiaJelly,
+      pointerZoom: pointerScrollZoomJelly
+    };
+    const startedAt = performance.now();
+    const durationMs = 260;
+    const easeOutCubicLocal = (t) => 1 - (1 - t) * (1 - t) * (1 - t);
+    const tick = (now) => {
+      const progress = Math.min(1, (now - startedAt) / durationMs);
+      const eased = easeOutCubicLocal(progress);
+      const nextSection = Math.round(start.section + (targets.section - start.section) * eased);
+      const nextFit = Math.round(start.fit + (targets.fit - start.fit) * eased);
+      const nextPan = Math.round(start.pan + (targets.pan - start.pan) * eased);
+      const nextPointerZoom = Math.round(start.pointerZoom + (targets.pointerZoom - start.pointerZoom) * eased);
+      setSectionDrawJelly(clampPercent(nextSection));
+      setFitViewJelly(clampPercent(nextFit));
+      setPanInertiaJelly(clampPercent(nextPan));
+      setPointerScrollZoomJelly(clampPercent(nextPointerZoom));
+      if (progress < 1) {
+        applyMotionSyncRafRef.current = requestAnimationFrame(tick);
+        return;
+      }
+      applyMotionSyncRafRef.current = 0;
+    };
+    applyMotionSyncRafRef.current = requestAnimationFrame(tick);
+  }, [sectionDrawJelly, fitViewJelly, panInertiaJelly, pointerScrollZoomJelly]);
+  const handleApplyAdvancedToBasic = useCallback(() => {
+    const sectionFromZoomBoost = (clampRange(sectionDrawZoomBoostPct, 0, 50) / 100 - 0.01) / 0.08;
+    const sectionFromCenterPull = (clampRange(sectionDrawCenterPullPct, 0, 100) / 100 - 0.12) / 0.22;
+    const sectionFromDuration = (clampRange(sectionDrawDurationMs, 100, 3e3) - 380) / 520;
+    const sectionFromOvershoot = (clampRange(sectionDrawOvershootPct, 0, 180) / 100 - 0.08) / 0.48;
+    const nextSectionDrawJelly = clampPercent(
+      Math.round((sectionFromZoomBoost + sectionFromCenterPull + sectionFromDuration + sectionFromOvershoot) / 4 * 100)
+    );
+    const fitFromDuration = (clampRange(fitViewDurationMs, 100, 3e3) - 360) / 620;
+    const fitFromOvershoot = (clampRange(fitViewOvershootPct, 0, 180) / 100 - 0.2) / 0.9;
+    const nextFitViewJelly = clampPercent(Math.round((fitFromDuration + fitFromOvershoot) / 2 * 100));
+    const panFromCarry = (clampRange(panInertiaCarryPct, 0, 95) / 100 - 0.58) / 0.28;
+    const panFromFriction = (clampRange(panInertiaFrictionPct, 70, 99) / 100 - 0.88) / 0.08;
+    const panFromMinSpeed = (0.012 - clampRange(panInertiaMinSpeedMilli, 1, 50) / 1e3) / 4e-3;
+    const nextPanInertiaJelly = clampPercent(Math.round((panFromCarry + panFromFriction + panFromMinSpeed) / 3 * 100));
+    const zoomFromDuration = (clampRange(pointerScrollZoomDurationMs, 60, 600) - 90) / 220;
+    const zoomFromSensitivity = (clampRange(pointerScrollZoomDeltaDivisor, 250, 1400) - 520) / 380;
+    const zoomFromStrength = (0.33 - clampRange(pointerScrollZoomStrengthPct, 8, 55) / 100) / 0.14;
+    const nextPointerScrollZoomJelly = clampPercent(
+      Math.round((zoomFromDuration + zoomFromSensitivity + zoomFromStrength) / 3 * 100)
+    );
+    animateBasicKnobValues({
+      section: nextSectionDrawJelly,
+      fit: nextFitViewJelly,
+      pan: nextPanInertiaJelly,
+      pointerZoom: nextPointerScrollZoomJelly
+    });
+  }, [
+    animateBasicKnobValues,
+    sectionDrawZoomBoostPct,
+    sectionDrawCenterPullPct,
+    sectionDrawDurationMs,
+    sectionDrawOvershootPct,
+    fitViewDurationMs,
+    fitViewOvershootPct,
+    panInertiaCarryPct,
+    panInertiaFrictionPct,
+    panInertiaMinSpeedMilli,
+    pointerScrollZoomDurationMs,
+    pointerScrollZoomStrengthPct,
+    pointerScrollZoomDeltaDivisor
+  ]);
   const handleSeatsPerRowChange = useCallback(
     (n) => {
       setSeatsPerRow(n);
@@ -3622,8 +3957,20 @@ function EditorInner({
     },
     [handleRowOrientationChange, rowOrientationDeg]
   );
-  const handleSectionModeChange = useCallback(
-    (mode) => {
+  const rowOrientationKnobDeg = useMemo(
+    () => rowDirectionArrowMode === "row-direction" ? ((rowOrientationDeg + 90) % 360 + 360) % 360 : rowOrientationDeg,
+    [rowDirectionArrowMode, rowOrientationDeg]
+  );
+  const handleRowOrientationKnobChange = useCallback(
+    (deg) => {
+      const mapped = rowDirectionArrowMode === "row-direction" ? deg - 90 : deg;
+      handleRowOrientationChange(mapped);
+    },
+    [rowDirectionArrowMode, handleRowOrientationChange]
+  );
+  const handleSectionToolVariantChange = useCallback(
+    (kind, mode) => {
+      setSectionKind(kind);
       setSectionMode(mode);
     },
     []
@@ -3631,6 +3978,72 @@ function EditorInner({
   useEffect(() => {
     addSectionTool.setMode(sectionMode);
   }, [addSectionTool, sectionMode]);
+  useEffect(() => {
+    addSectionTool.setSectionKind(sectionKind);
+  }, [addSectionTool, sectionKind]);
+  const focusSectionGently = useCallback(
+    (sectionId) => {
+      const currentVenue = store.getState().venue;
+      if (!currentVenue) return;
+      const section = currentVenue.sections.find((entry) => entry.id === sectionId);
+      if (!section) return;
+      if (viewport.screenWidth <= 0 || viewport.screenHeight <= 0) return;
+      const startX = viewport.x;
+      const startY = viewport.y;
+      const startZoom = viewport.zoom;
+      const jelly = Math.max(0, Math.min(100, sectionDrawJelly)) / 100;
+      const zoomBoost = useAdvancedMotion ? clampRange(sectionDrawZoomBoostPct, 0, 50) / 100 : 0.01 + jelly * 0.08;
+      const targetZoom = Math.min(4, Math.max(0.05, startZoom * (1 + zoomBoost)));
+      const centeredX = viewport.screenWidth / (2 * targetZoom) - section.position.x;
+      const centeredY = viewport.screenHeight / (2 * targetZoom) - section.position.y;
+      const centerPull = useAdvancedMotion ? clampRange(sectionDrawCenterPullPct, 0, 100) / 100 : 0.12 + jelly * 0.22;
+      const targetX = startX + (centeredX - startX) * centerPull;
+      const targetY = startY + (centeredY - startY) * centerPull;
+      const durationMs = useAdvancedMotion ? clampRange(sectionDrawDurationMs, 100, 3e3) : 380 + jelly * 520;
+      const overshoot = useAdvancedMotion ? clampRange(sectionDrawOvershootPct, 0, 180) / 100 : 0.08 + jelly * 0.48;
+      const startedAt = performance.now();
+      const animate = (now) => {
+        const elapsed = now - startedAt;
+        const progress = Math.min(1, elapsed / durationMs);
+        const eased = progress >= 1 ? 1 : easeOutBack(progress, overshoot);
+        viewport.x = startX + (targetX - startX) * eased;
+        viewport.y = startY + (targetY - startY) * eased;
+        viewport.setZoom(startZoom + (targetZoom - startZoom) * eased);
+        if (progress < 1) {
+          requestAnimationFrame(animate);
+        }
+      };
+      requestAnimationFrame(animate);
+    },
+    [store, viewport, sectionDrawJelly, useAdvancedMotion, sectionDrawZoomBoostPct, sectionDrawCenterPullPct, sectionDrawDurationMs, sectionDrawOvershootPct]
+  );
+  useEffect(() => {
+    addSectionTool.onSectionCreated = (sectionId) => {
+      if (!autoFocusNewSection) return;
+      focusSectionGently(sectionId);
+    };
+    return () => {
+      addSectionTool.onSectionCreated = void 0;
+    };
+  }, [addSectionTool, autoFocusNewSection, focusSectionGently]);
+  const sectionHintText = useMemo(() => {
+    if (activeToolName === "select" && sectionResizeEnabled) {
+      return "Resize mode: drag inside section to move it, drag corners to resize, drag sides to move edges, click a side to add a polygon point.";
+    }
+    if (activeToolName !== "add-section") return null;
+    if (sectionMode === "rectangle") {
+      if (addSectionTool.hasPendingDraft()) {
+        return "Click opposite corner to finish. Esc to cancel.";
+      }
+      return "Click first corner to start rectangle.";
+    }
+    if (addSectionTool.hasPendingDraft()) {
+      return "Click to add points. Click first point to close. Esc to cancel.";
+    }
+    return "Click to place first polygon point.";
+  }, [activeToolName, sectionMode, addSectionTool, sectionResizeEnabled]);
+  const rowPresetRows = [1, 2, 3, 4];
+  const rowPresetSeats = [8, 10, 12, 16];
   useEffect(() => {
     selectTool.setSectionResizeEnabled(sectionResizeEnabled);
   }, [selectTool, sectionResizeEnabled]);
@@ -3644,13 +4057,17 @@ function EditorInner({
       if (name !== "pan") {
         lastNonPanToolNameRef.current = name;
       }
+      if (name !== activeToolName) {
+        setIsGridOptionsOpen(false);
+        setIsEditorSettingsOpen(false);
+      }
       activeToolRef.current.onDeactivate();
       const tool = toolMap[name] ?? selectTool;
       tool.onActivate(viewport, store);
       activeToolRef.current = tool;
       setActiveToolName(name);
     },
-    [toolMap, selectTool, viewport, store]
+    [activeToolName, toolMap, selectTool, viewport, store]
   );
   const handleToggleSectionResize = useCallback(
     (fromAddSection = false) => {
@@ -3721,10 +4138,52 @@ function EditorInner({
     };
     input.click();
   }, [store, spatialIndex, viewport]);
+  const stopFitViewAnimation = useCallback(() => {
+    if (fitViewRafRef.current) {
+      cancelAnimationFrame(fitViewRafRef.current);
+      fitViewRafRef.current = 0;
+    }
+  }, []);
+  const animateFitView = useCallback(
+    (bounds) => {
+      const target = getViewportStateForFitBounds(viewport, bounds, 40);
+      if (!target) return;
+      stopFitViewAnimation();
+      const startX = viewport.x;
+      const startY = viewport.y;
+      const startZoom = viewport.zoom;
+      const jelly = Math.max(0, Math.min(100, fitViewJelly)) / 100;
+      const durationMs = useAdvancedMotion ? clampRange(fitViewDurationMs, 100, 3e3) : 360 + jelly * 620;
+      const overshoot = useAdvancedMotion ? clampRange(fitViewOvershootPct, 0, 180) / 100 : 0.2 + jelly * 0.9;
+      const startedAt = performance.now();
+      const animate = (now) => {
+        const elapsed = now - startedAt;
+        const progress = Math.min(1, elapsed / durationMs);
+        const eased = progress >= 1 ? 1 : easeOutBack(progress, overshoot);
+        viewport.x = startX + (target.x - startX) * eased;
+        viewport.y = startY + (target.y - startY) * eased;
+        viewport.setZoom(startZoom + (target.zoom - startZoom) * eased);
+        if (progress < 1) {
+          fitViewRafRef.current = requestAnimationFrame(animate);
+          return;
+        }
+        fitViewRafRef.current = 0;
+      };
+      fitViewRafRef.current = requestAnimationFrame(animate);
+    },
+    [viewport, stopFitViewAnimation, fitViewJelly, useAdvancedMotion, fitViewDurationMs, fitViewOvershootPct]
+  );
   const handleFitView = useCallback(() => {
     if (!venue) return;
-    viewport.fitBounds(venueAABB(venue));
-  }, [venue, viewport]);
+    animateFitView(venueAABB(venue));
+  }, [venue, animateFitView]);
+  useEffect(() => () => stopFitViewAnimation(), [stopFitViewAnimation]);
+  useEffect(() => () => {
+    if (applyMotionSyncRafRef.current) {
+      cancelAnimationFrame(applyMotionSyncRafRef.current);
+      applyMotionSyncRafRef.current = 0;
+    }
+  }, []);
   const handleUploadBackground = useCallback(() => {
     const input = document.createElement("input");
     input.type = "file";
@@ -4018,6 +4477,7 @@ function EditorInner({
   }, [isBackgroundMoving, store, viewport]);
   const renderBackgroundResizeOverlay = () => {
     if (!venue?.backgroundImage) return null;
+    if (activeToolName !== "select") return null;
     const rectWorld = getBackgroundRectInWorld(venue);
     const topLeft = viewport.worldToScreen(rectWorld.x, rectWorld.y);
     const topRight = viewport.worldToScreen(rectWorld.x + rectWorld.width, rectWorld.y);
@@ -4037,19 +4497,16 @@ function EditorInner({
       { left: midTop.x, top: midTop.y, cursor: "ns-resize", handle: "n" },
       { left: midBottom.x, top: midBottom.y, cursor: "ns-resize", handle: "s" }
     ];
-    return /* @__PURE__ */ jsxs("div", { style: { position: "absolute", inset: 0, pointerEvents: "none", zIndex: 15 }, children: [
+    return /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__background-overlay", children: [
       /* @__PURE__ */ jsx(
         "div",
         {
+          className: "seatmap-editor__background-frame",
           style: {
-            position: "absolute",
             left: topLeft.x,
             top: topLeft.y,
             width: Math.max(1, topRight.x - topLeft.x),
             height: Math.max(1, bottomLeft.y - topLeft.y),
-            border: "1px dashed rgba(130, 190, 255, 0.9)",
-            boxShadow: "0 0 0 1px rgba(30, 30, 50, 0.8) inset",
-            pointerEvents: "auto",
             cursor: isBackgroundMoving ? "grabbing" : "grab"
           },
           onPointerDown: (e) => {
@@ -4075,17 +4532,11 @@ function EditorInner({
       handles.map((handle, i) => /* @__PURE__ */ jsx(
         "div",
         {
+          className: "seatmap-editor__background-handle",
           style: {
-            position: "absolute",
             left: handle.left - 5,
             top: handle.top - 5,
-            width: 10,
-            height: 10,
-            borderRadius: 2,
-            background: "#82beff",
-            border: "1px solid #1f2f5f",
-            cursor: handle.cursor,
-            pointerEvents: "auto"
+            cursor: handle.cursor
           },
           onPointerDown: (e) => {
             if (e.button !== 0) return;
@@ -4125,48 +4576,34 @@ function EditorInner({
     return /* @__PURE__ */ jsxs(
       "svg",
       {
-        style: {
-          position: "absolute",
-          inset: 0,
-          width: "100%",
-          height: "100%",
-          pointerEvents: "none",
-          zIndex: 16
-        },
+        className: "seatmap-editor__overlay-svg seatmap-editor__overlay-svg--section-resize",
         children: [
           /* @__PURE__ */ jsx(
             "polygon",
             {
-              points: outlinePoints,
-              fill: "rgba(255, 193, 110, 0.08)",
-              stroke: "rgba(255, 193, 110, 0.9)",
-              strokeWidth: 1.5,
-              strokeDasharray: "7 4"
+              className: "seatmap-editor__overlay-section-outline",
+              points: outlinePoints
             }
           ),
           sideMidpoints.map((p, i) => /* @__PURE__ */ jsx(
             "rect",
             {
+              className: "seatmap-editor__overlay-section-side",
               x: p.x - 5,
               y: p.y - 5,
               width: 10,
               height: 10,
-              rx: 2,
-              fill: "rgba(255, 193, 110, 0.9)",
-              stroke: "rgba(45, 36, 20, 0.95)",
-              strokeWidth: 1
+              rx: 2
             },
             `side-${i}`
           )),
           corners.map((p, i) => /* @__PURE__ */ jsx(
             "circle",
             {
+              className: "seatmap-editor__overlay-section-corner",
               cx: p.x,
               cy: p.y,
-              r: 5,
-              fill: "#ffd38a",
-              stroke: "rgba(45, 36, 20, 0.95)",
-              strokeWidth: 1.2
+              r: 5
             },
             `corner-${i}`
           )),
@@ -4174,25 +4611,20 @@ function EditorInner({
             /* @__PURE__ */ jsx(
               "rect",
               {
+                className: "seatmap-editor__overlay-label-box",
                 x: hint.x - 88,
                 y: hint.y - 32,
                 width: 176,
                 height: 20,
-                rx: 6,
-                fill: "rgba(15, 15, 25, 0.9)",
-                stroke: "rgba(255, 193, 110, 0.65)",
-                strokeWidth: 1
+                rx: 6
               }
             ),
             /* @__PURE__ */ jsx(
               "text",
               {
+                className: "seatmap-editor__overlay-label-text",
                 x: hint.x,
                 y: hint.y - 18,
-                fill: "#ffd38a",
-                fontSize: 11,
-                fontFamily: "system-ui",
-                textAnchor: "middle",
                 children: resizeOverlay.mergeHint?.message
               }
             )
@@ -4205,42 +4637,37 @@ function EditorInner({
     if (activeToolName !== "add-row" || !rowPreviewPoint || !venue) return null;
     const preview = addRowTool.getPlacementPreview(rowPreviewPoint.x, rowPreviewPoint.y, venue);
     if (!preview) return null;
+    const displayAngleRad = rowDirectionArrowMode === "row-direction" ? preview.worldAngleRad + Math.PI / 2 : preview.worldAngleRad;
     const origin = viewport.worldToScreen(preview.worldX, preview.worldY);
     const lineLengthPx = 78;
     const end = {
-      x: origin.x + Math.cos(preview.worldAngleRad) * lineLengthPx,
-      y: origin.y + Math.sin(preview.worldAngleRad) * lineLengthPx
+      x: origin.x + Math.cos(displayAngleRad) * lineLengthPx,
+      y: origin.y + Math.sin(displayAngleRad) * lineLengthPx
     };
     const arrowSizePx = 11;
     const leftWing = {
-      x: end.x - Math.cos(preview.worldAngleRad - Math.PI / 6) * arrowSizePx,
-      y: end.y - Math.sin(preview.worldAngleRad - Math.PI / 6) * arrowSizePx
+      x: end.x - Math.cos(displayAngleRad - Math.PI / 6) * arrowSizePx,
+      y: end.y - Math.sin(displayAngleRad - Math.PI / 6) * arrowSizePx
     };
     const rightWing = {
-      x: end.x - Math.cos(preview.worldAngleRad + Math.PI / 6) * arrowSizePx,
-      y: end.y - Math.sin(preview.worldAngleRad + Math.PI / 6) * arrowSizePx
+      x: end.x - Math.cos(displayAngleRad + Math.PI / 6) * arrowSizePx,
+      y: end.y - Math.sin(displayAngleRad + Math.PI / 6) * arrowSizePx
     };
-    const worldAngleDeg = ((preview.worldAngleRad * 180 / Math.PI + 90) % 360 + 360) % 360;
+    const displayAngleDeg = ((displayAngleRad * 180 / Math.PI + 90) % 360 + 360) % 360;
+    const orientationLabel = rowDirectionArrowMode === "row-direction" ? "Row direction" : "Viewer direction";
     return /* @__PURE__ */ jsxs(
       "svg",
       {
-        style: {
-          position: "absolute",
-          inset: 0,
-          width: "100%",
-          height: "100%",
-          pointerEvents: "none",
-          zIndex: 17
-        },
+        className: "seatmap-editor__overlay-svg seatmap-editor__overlay-svg--row-direction",
         children: [
           /* @__PURE__ */ jsx(
             "line",
             {
+              className: "seatmap-editor__overlay-row-direction-line",
               x1: origin.x,
               y1: origin.y,
               x2: end.x,
               y2: end.y,
-              stroke: "rgba(255, 213, 122, 0.95)",
               strokeWidth: 3,
               strokeLinecap: "round"
             }
@@ -4248,44 +4675,38 @@ function EditorInner({
           /* @__PURE__ */ jsx(
             "polygon",
             {
-              points: `${end.x},${end.y} ${leftWing.x},${leftWing.y} ${rightWing.x},${rightWing.y}`,
-              fill: "rgba(255, 213, 122, 0.95)"
+              className: "seatmap-editor__overlay-row-direction-arrow",
+              points: `${end.x},${end.y} ${leftWing.x},${leftWing.y} ${rightWing.x},${rightWing.y}`
             }
           ),
           /* @__PURE__ */ jsx(
             "circle",
             {
+              className: "seatmap-editor__overlay-row-direction-origin",
               cx: origin.x,
               cy: origin.y,
               r: 5,
-              fill: "rgba(255, 213, 122, 0.28)",
-              stroke: "rgba(255, 213, 122, 0.95)",
               strokeWidth: 1.5
             }
           ),
           /* @__PURE__ */ jsx(
             "rect",
             {
+              className: "seatmap-editor__overlay-label-box",
               x: origin.x + 10,
               y: origin.y - 28,
               width: 90,
               height: 20,
-              rx: 5,
-              fill: "rgba(15, 15, 25, 0.9)",
-              stroke: "rgba(255, 213, 122, 0.65)",
-              strokeWidth: 1
+              rx: 5
             }
           ),
           /* @__PURE__ */ jsx(
             "text",
             {
+              className: "seatmap-editor__overlay-label-text",
               x: origin.x + 55,
               y: origin.y - 14,
-              fill: "#ffd57a",
-              fontSize: 11,
-              fontFamily: "system-ui",
-              textAnchor: "middle",
-              children: `Row angle ${Math.round(worldAngleDeg)}deg`
+              children: `${orientationLabel} ${Math.round(displayAngleDeg)}\xB0`
             }
           )
         ]
@@ -4304,719 +4725,808 @@ function EditorInner({
     },
     [venue, store]
   );
-  const renderActiveToolOptionsOverlay = () => {
-    const switchTrackBase = {
-      width: 34,
-      height: 20,
-      borderRadius: 999,
-      border: "1px solid #4a4a6a",
-      padding: 2,
-      display: "inline-flex",
-      alignItems: "center",
-      transition: "all 0.12s ease"
-    };
-    const switchThumbBase = {
-      width: 14,
-      height: 14,
-      borderRadius: "50%",
-      background: "#e0e0e0",
-      transition: "transform 0.12s ease"
+  const handleDeleteSelectedObjects = useCallback(() => {
+    const state = store.getState();
+    const currentVenue = state.venue;
+    if (!currentVenue) return;
+    const selectedSeatIdSet = new Set(state.selectedSeatIds);
+    const selectedSectionIdSet = new Set(state.selectedSectionIds);
+    if (selectedSeatIdSet.size === 0 && selectedSectionIdSet.size === 0) return;
+    const previousVenue = currentVenue;
+    const nextVenue = {
+      ...currentVenue,
+      sections: currentVenue.sections.filter((section) => !selectedSectionIdSet.has(section.id)).map((section) => ({
+        ...section,
+        rows: section.rows.map((row) => ({
+          ...row,
+          seats: row.seats.filter((seat) => !selectedSeatIdSet.has(seat.id))
+        }))
+      })),
+      tables: currentVenue.tables.map((table) => ({
+        ...table,
+        seats: table.seats.filter((seat) => !selectedSeatIdSet.has(seat.id))
+      }))
     };
-    const renderSwitch = (label, checked, onToggle) => /* @__PURE__ */ jsxs(
-      "label",
+    historyRef.current.execute({
+      description: "Delete selected objects",
+      execute: () => {
+        store.getState().setVenue(nextVenue);
+        store.getState().clearSelection();
+      },
+      undo: () => {
+        store.getState().setVenue(previousVenue);
+      }
+    });
+  }, [store]);
+  const renderActiveToolOptionsOverlay = () => {
+    const stopPointerPropagation = (e) => e.stopPropagation();
+    const renderOverlay = (content) => /* @__PURE__ */ jsx("div", { className: "seatmap-editor__tool-options-overlay", children: /* @__PURE__ */ jsx(
+      "div",
       {
-        style: {
-          display: "inline-flex",
-          alignItems: "center",
-          gap: 8,
-          color: "#d0d0e0",
-          fontSize: 12,
-          fontFamily: "system-ui",
-          userSelect: "none"
-        },
-        children: [
-          /* @__PURE__ */ jsx("span", { children: label }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              role: "switch",
-              "aria-checked": checked,
-              onClick: onToggle,
-              style: {
-                ...switchTrackBase,
-                background: checked ? "#2d6a3d" : "#2a2a4a",
-                borderColor: checked ? "#57b26f" : "#4a4a6a",
-                cursor: "pointer"
-              },
-              children: /* @__PURE__ */ jsx(
-                "span",
+        className: "seatmap-editor__tool-options-shell",
+        onPointerDown: stopPointerPropagation,
+        onPointerMove: stopPointerPropagation,
+        onPointerUp: stopPointerPropagation,
+        children: content
+      }
+    ) });
+    const renderSwitch = (label, checked, onToggle) => /* @__PURE__ */ jsxs("label", { className: "seatmap-editor__switch", children: [
+      /* @__PURE__ */ jsx("span", { children: label }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "switch",
+          "aria-checked": checked,
+          onClick: onToggle,
+          className: `seatmap-editor__switch-track${checked ? " is-checked" : ""}`,
+          children: /* @__PURE__ */ jsx("span", { className: "seatmap-editor__switch-thumb" })
+        }
+      )
+    ] });
+    const renderRange = (label, value, onChange2, hint, options) => {
+      const min = options?.min ?? 0;
+      const max = options?.max ?? 100;
+      const step = options?.step ?? 1;
+      const displayValue = options?.valueFormatter ? options.valueFormatter(value) : Math.round(value);
+      const normalized = max > min ? (value - min) / (max - min) : 0;
+      const clampedNormalized = clampRange(normalized, 0, 1);
+      const isDial360 = options?.knobMode === "dial360";
+      const knobFillStartDeg = options?.knobFillStartDeg ?? (isDial360 ? -90 : -130);
+      const knobAngle = isDial360 ? knobFillStartDeg + clampedNormalized * 360 : -130 + clampedNormalized * 260;
+      const knobFillPercent = isDial360 ? clampedNormalized * 100 : clampedNormalized * (260 / 360 * 100);
+      const knobDisabled = Boolean(options?.disabled);
+      const showKnob = Boolean(options?.displayAsKnob);
+      const valuePlacement = options?.valuePlacement ?? "header";
+      const compactKnobLayout = Boolean(options?.compactKnobLayout) && showKnob;
+      const isLabelValueKnobLayout = showKnob && options?.knobLayout === "label-value-knob";
+      const knobNamespace = options?.knobNamespace ?? "motion";
+      const tooltipText = knobDisabled ? "Disabled while advanced overrides are enabled." : hint;
+      const commitClampedValue = (raw) => {
+        const clamped = clampRange(raw, min, max);
+        const stepped = Math.round((clamped - min) / step) * step + min;
+        onChange2(clampRange(stepped, min, max));
+      };
+      return /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: `seatmap-editor__motion-slider${compactKnobLayout ? " seatmap-editor__motion-slider--compact-knob" : ""}${isLabelValueKnobLayout ? " seatmap-editor__motion-slider--label-value-knob" : ""}${knobDisabled ? " is-disabled" : ""}`,
+          children: [
+            !isLabelValueKnobLayout && /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__motion-slider-header", children: [
+              /* @__PURE__ */ jsx("span", { className: "seatmap-editor__label", title: label, children: label }),
+              valuePlacement === "header" && /* @__PURE__ */ jsx("span", { className: "seatmap-editor__motion-slider-value", children: displayValue })
+            ] }),
+            showKnob ? /* @__PURE__ */ jsxs("div", { className: `seatmap-editor__motion-knob-row${isLabelValueKnobLayout ? " seatmap-editor__motion-knob-row--label-value-knob" : ""}`, children: [
+              isLabelValueKnobLayout && /* @__PURE__ */ jsx("span", { className: "seatmap-editor__label", title: label, children: label }),
+              isLabelValueKnobLayout && /* @__PURE__ */ jsx("span", { className: "seatmap-editor__motion-slider-value", children: displayValue }),
+              /* @__PURE__ */ jsxs(
+                "button",
                 {
-                  style: {
-                    ...switchThumbBase,
-                    transform: checked ? "translateX(14px)" : "translateX(0)"
-                  }
+                  type: "button",
+                  className: "seatmap-editor__motion-knob",
+                  "aria-label": label,
+                  title: tooltipText,
+                  disabled: knobDisabled,
+                  onPointerDown: (e) => {
+                    if (knobDisabled) return;
+                    e.preventDefault();
+                    const pointerId = e.pointerId;
+                    const target = e.currentTarget;
+                    target.setPointerCapture(pointerId);
+                    const range = max - min;
+                    const getDialValue = (clientX, clientY) => {
+                      const rect = target.getBoundingClientRect();
+                      const centerX = rect.left + rect.width / 2;
+                      const centerY = rect.top + rect.height / 2;
+                      const angle = Math.atan2(clientY - centerY, clientX - centerX);
+                      const clockwiseFromUpDeg = ((angle * 180 / Math.PI + 90) % 360 + 360) % 360;
+                      return min + clockwiseFromUpDeg / 360 * range;
+                    };
+                    let handleMove;
+                    if (isDial360) {
+                      commitClampedValue(getDialValue(e.clientX, e.clientY));
+                      handleMove = (ev) => {
+                        commitClampedValue(getDialValue(ev.clientX, ev.clientY));
+                      };
+                    } else {
+                      const startY = e.clientY;
+                      const startValue = value;
+                      const dragHeightPx = 180;
+                      handleMove = (ev) => {
+                        const deltaY = startY - ev.clientY;
+                        commitClampedValue(startValue + deltaY / dragHeightPx * range);
+                      };
+                    }
+                    const handleUp = () => {
+                      target.removeEventListener("pointermove", handleMove);
+                      target.removeEventListener("pointerup", handleUp);
+                      target.removeEventListener("pointercancel", handleUp);
+                    };
+                    target.addEventListener("pointermove", handleMove);
+                    target.addEventListener("pointerup", handleUp);
+                    target.addEventListener("pointercancel", handleUp);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `seatmap-editor__motion-knob-ring${knobNamespace === "tool" ? " seatmap-editor__motion-knob-ring--tool" : " seatmap-editor__motion-knob-ring--motion"}`,
+                        style: {
+                          [knobNamespace === "tool" ? "--tool-knob-fill" : "--motion-knob-fill"]: `${Math.round(knobFillPercent)}%`,
+                          [knobNamespace === "tool" ? "--tool-knob-start-angle" : "--motion-knob-start-angle"]: `${knobFillStartDeg}deg`
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "seatmap-editor__motion-knob-indicator",
+                        style: { transform: `translate(-50%, -100%) rotate(${knobAngle}deg)` }
+                      }
+                    )
+                  ]
                 }
-              )
+              ),
+              valuePlacement === "knob" && /* @__PURE__ */ jsx("span", { className: "seatmap-editor__motion-slider-value seatmap-editor__motion-slider-value--knob", children: displayValue }),
+              options?.knobRightContent && /* @__PURE__ */ jsx("div", { className: "seatmap-editor__motion-knob-right-content", children: options.knobRightContent })
+            ] }) : /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min,
+                max,
+                step,
+                value,
+                onChange: (e) => commitClampedValue(Number(e.target.value) || 0),
+                disabled: knobDisabled,
+                className: "seatmap-editor__panel-range",
+                title: tooltipText
+              }
+            )
+          ]
+        }
+      );
+    };
+    const renderOptionCard = (title, body, className) => /* @__PURE__ */ jsxs("div", { className: `seatmap-editor__option-card${className ? ` ${className}` : ""}`, children: [
+      /* @__PURE__ */ jsx("span", { className: "seatmap-editor__option-card-title seatmap-editor__option-card-title--group", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "seatmap-editor__option-card-subdivider" }),
+      /* @__PURE__ */ jsx("div", { className: "seatmap-editor__option-card-body", children: body })
+    ] });
+    const renderGridOptionsCard = () => renderOptionCard(
+      "Grid options",
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderSwitch("Grid", gridEnabled, () => setGridEnabled((v) => !v)),
+        /* @__PURE__ */ jsx("div", { className: "seatmap-editor__option-card-divider" }),
+        /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__option-row", children: [
+          renderSwitch("Canvas grid", showCanvasGrid, () => setShowCanvasGrid((v) => !v)),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: canvasGridStyle,
+              onChange: (e) => setCanvasGridStyle(e.target.value),
+              className: "seatmap-editor__select",
+              disabled: !gridEnabled || !showCanvasGrid,
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "solid", children: "Solid" }),
+                /* @__PURE__ */ jsx("option", { value: "dashed", children: "Dashed" }),
+                /* @__PURE__ */ jsx("option", { value: "dotted", children: "Dotted" })
+              ]
             }
           )
-        ]
-      }
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__option-row", children: [
+          renderSwitch("Section grid", showSectionGrid, () => setShowSectionGrid((v) => !v)),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: sectionGridStyle,
+              onChange: (e) => setSectionGridStyle(e.target.value),
+              className: "seatmap-editor__select",
+              disabled: !gridEnabled || !showSectionGrid,
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "dots", children: "Dots" }),
+                /* @__PURE__ */ jsx("option", { value: "cross", children: "Cross" })
+              ]
+            }
+          )
+        ] })
+      ] })
     );
-    const selectStyle2 = {
-      padding: "4px 8px",
-      background: "#2a2a4a",
-      border: "1px solid #3a3a5a",
-      borderRadius: 4,
-      color: "#e0e0e0",
-      fontSize: 12,
-      fontFamily: "system-ui",
-      cursor: "pointer"
-    };
-    const renderGridOptionsCard = () => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "flex-start",
-          gap: 8,
-          padding: "8px 10px",
-          border: "1px solid #3a3a5a",
-          borderRadius: 6,
-          background: "rgba(42, 42, 74, 0.65)"
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
+    const renderMotionSettingsCard = () => renderOptionCard(
+      "Editor motion",
+      /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__motion-layout", children: [
+        /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__motion-column seatmap-editor__motion-column--basic", children: [
+          /* @__PURE__ */ jsx("span", { className: "seatmap-editor__option-card-title", children: "Basic" }),
+          /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__motion-control-grid", children: [
+            renderRange(
+              "Section draw zoom jelly",
+              sectionDrawJelly,
+              setSectionDrawJelly,
+              "Controls how floaty auto-focus feels after drawing a section.",
+              { disabled: useAdvancedMotion, displayAsKnob: true, knobLayout: "label-value-knob" }
+            ),
+            renderRange(
+              "Fit zoom jelly",
+              fitViewJelly,
+              setFitViewJelly,
+              "Controls smoothness and duration of Fit action.",
+              { disabled: useAdvancedMotion, displayAsKnob: true, knobLayout: "label-value-knob" }
+            ),
+            renderRange(
+              "Canvas pan inertia",
+              panInertiaJelly,
+              setPanInertiaJelly,
+              "Controls glide amount after you release a pan drag.",
+              { disabled: useAdvancedMotion, displayAsKnob: true, knobLayout: "label-value-knob" }
+            ),
+            renderRange(
+              "Pointer scroll zoom jelly",
+              pointerScrollZoomJelly,
+              setPointerScrollZoomJelly,
+              "Controls how smooth pointer wheel zoom feels.",
+              { disabled: useAdvancedMotion, displayAsKnob: true, knobLayout: "label-value-knob" }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "seatmap-editor__option-row seatmap-editor__option-row--end seatmap-editor__motion-basic-actions", children: /* @__PURE__ */ jsx(
+            "button",
             {
-              style: {
-                color: "#c7c7df",
-                fontSize: 12,
-                fontFamily: "system-ui",
-                fontWeight: 600
-              },
-              children: "Grid options"
+              type: "button",
+              className: "seatmap-editor__panel-button seatmap-editor__panel-button--tiny",
+              onClick: handleResetMotionSettings,
+              children: "Reset to defaults"
             }
-          ),
-          renderSwitch("Grid", gridEnabled, () => setGridEnabled((v) => !v)),
-          /* @__PURE__ */ jsx("div", { style: { width: "100%", height: 1, background: "#3a3a5a" } }),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-            renderSwitch("Canvas grid", showCanvasGrid, () => setShowCanvasGrid((v) => !v)),
-            /* @__PURE__ */ jsxs(
-              "select",
+          ) }),
+          renderSwitch("Use advanced overrides", useAdvancedMotion, () => setUseAdvancedMotion((v) => !v))
+        ] }),
+        useAdvancedMotion && /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__motion-column seatmap-editor__motion-column--advanced", children: [
+          /* @__PURE__ */ jsx("div", { className: "seatmap-editor__motion-advanced-header", children: /* @__PURE__ */ jsx("span", { className: "seatmap-editor__option-card-title", children: "Advanced" }) }),
+          /* @__PURE__ */ jsx("span", { className: "seatmap-editor__option-card-title seatmap-editor__option-card-title--subtle", children: "Section" }),
+          /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__motion-control-grid is-knob-grid", children: [
+            renderRange(
+              "Draw duration",
+              sectionDrawDurationMs,
+              setSectionDrawDurationMs,
+              "Animation duration in milliseconds.",
               {
-                value: canvasGridStyle,
-                onChange: (e) => setCanvasGridStyle(e.target.value),
-                style: selectStyle2,
-                disabled: !gridEnabled || !showCanvasGrid,
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "solid", children: "Solid" }),
-                  /* @__PURE__ */ jsx("option", { value: "dashed", children: "Dashed" }),
-                  /* @__PURE__ */ jsx("option", { value: "dotted", children: "Dotted" })
-                ]
+                min: 100,
+                max: 3e3,
+                step: 10,
+                valueFormatter: (n) => `${Math.round(n)}ms`,
+                displayAsKnob: true,
+                compactKnobLayout: true
+              }
+            ),
+            renderRange(
+              "Center pull",
+              sectionDrawCenterPullPct,
+              setSectionDrawCenterPullPct,
+              "How strongly section draw focus moves toward section center.",
+              {
+                min: 0,
+                max: 100,
+                step: 1,
+                valueFormatter: (n) => `${Math.round(n)}%`,
+                displayAsKnob: true,
+                compactKnobLayout: true
+              }
+            ),
+            renderRange(
+              "Zoom boost",
+              sectionDrawZoomBoostPct,
+              setSectionDrawZoomBoostPct,
+              "Additional zoom applied during section draw focus.",
+              {
+                min: 0,
+                max: 50,
+                step: 1,
+                valueFormatter: (n) => `${Math.round(n)}%`,
+                displayAsKnob: true,
+                compactKnobLayout: true
+              }
+            ),
+            renderRange(
+              "Overshoot",
+              sectionDrawOvershootPct,
+              setSectionDrawOvershootPct,
+              "Spring amount near the end of section auto-focus.",
+              {
+                min: 0,
+                max: 180,
+                step: 1,
+                valueFormatter: (n) => `${Math.round(n)}%`,
+                displayAsKnob: true,
+                compactKnobLayout: true
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-            renderSwitch("Section grid", showSectionGrid, () => setShowSectionGrid((v) => !v)),
-            /* @__PURE__ */ jsxs(
-              "select",
+          /* @__PURE__ */ jsx("div", { className: "seatmap-editor__motion-group-divider" }),
+          /* @__PURE__ */ jsx("span", { className: "seatmap-editor__option-card-title seatmap-editor__option-card-title--subtle", children: "Fit" }),
+          /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__motion-control-grid is-knob-grid", children: [
+            renderRange(
+              "Duration",
+              fitViewDurationMs,
+              setFitViewDurationMs,
+              "Animation duration for Fit action.",
               {
-                value: sectionGridStyle,
-                onChange: (e) => setSectionGridStyle(e.target.value),
-                style: selectStyle2,
-                disabled: !gridEnabled || !showSectionGrid,
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "dots", children: "Dots" }),
-                  /* @__PURE__ */ jsx("option", { value: "cross", children: "Cross" })
-                ]
+                min: 100,
+                max: 3e3,
+                step: 10,
+                valueFormatter: (n) => `${Math.round(n)}ms`,
+                displayAsKnob: true,
+                compactKnobLayout: true
+              }
+            ),
+            renderRange(
+              "Overshoot",
+              fitViewOvershootPct,
+              setFitViewOvershootPct,
+              "Spring amount near the end of Fit movement.",
+              {
+                min: 0,
+                max: 180,
+                step: 1,
+                valueFormatter: (n) => `${Math.round(n)}%`,
+                displayAsKnob: true,
+                compactKnobLayout: true
               }
             )
-          ] })
-        ]
-      }
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "seatmap-editor__motion-group-divider" }),
+          /* @__PURE__ */ jsx("span", { className: "seatmap-editor__option-card-title seatmap-editor__option-card-title--subtle", children: "Pan" }),
+          /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__motion-control-grid is-knob-grid", children: [
+            renderRange(
+              "Inertia carry",
+              panInertiaCarryPct,
+              setPanInertiaCarryPct,
+              "Velocity retained at pan release.",
+              {
+                min: 0,
+                max: 95,
+                step: 1,
+                valueFormatter: (n) => `${Math.round(n)}%`,
+                displayAsKnob: true,
+                compactKnobLayout: true
+              }
+            ),
+            renderRange(
+              "Inertia friction",
+              panInertiaFrictionPct,
+              setPanInertiaFrictionPct,
+              "Per-frame damping (higher = longer glide).",
+              {
+                min: 70,
+                max: 99,
+                step: 1,
+                valueFormatter: (n) => `${Math.round(n)}%`,
+                displayAsKnob: true,
+                compactKnobLayout: true
+              }
+            ),
+            renderRange(
+              "Stop speed",
+              panInertiaMinSpeedMilli,
+              setPanInertiaMinSpeedMilli,
+              "Stop threshold in px/ms x1000.",
+              {
+                min: 1,
+                max: 50,
+                step: 1,
+                valueFormatter: (n) => `${Math.round(n)}`,
+                displayAsKnob: true,
+                compactKnobLayout: true
+              }
+            ),
+            renderRange(
+              "Velocity blend",
+              panVelocityBlendPct,
+              setPanVelocityBlendPct,
+              "How quickly release velocity follows latest drag samples.",
+              {
+                min: 5,
+                max: 95,
+                step: 1,
+                valueFormatter: (n) => `${Math.round(n)}%`,
+                displayAsKnob: true,
+                compactKnobLayout: true
+              }
+            ),
+            renderRange(
+              "Stop delta",
+              panStopDeltaMilli,
+              setPanStopDeltaMilli,
+              "Treat movement below this px x1000 as stopped while dragging.",
+              {
+                min: 0,
+                max: 4e3,
+                step: 10,
+                valueFormatter: (n) => `${Math.round(n)}`,
+                displayAsKnob: true,
+                compactKnobLayout: true
+              }
+            ),
+            renderRange(
+              "Release idle",
+              panReleaseIdleMs,
+              setPanReleaseIdleMs,
+              "If pointer pauses this long before release, inertia is dropped.",
+              {
+                min: 0,
+                max: 400,
+                step: 5,
+                valueFormatter: (n) => `${Math.round(n)}ms`,
+                displayAsKnob: true,
+                compactKnobLayout: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "seatmap-editor__motion-group-divider" }),
+          /* @__PURE__ */ jsx("span", { className: "seatmap-editor__option-card-title seatmap-editor__option-card-title--subtle", children: "Pointer scroll zoom" }),
+          /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__motion-control-grid is-knob-grid", children: [
+            renderRange(
+              "Duration",
+              pointerScrollZoomDurationMs,
+              setPointerScrollZoomDurationMs,
+              "Wheel zoom easing duration.",
+              {
+                min: 60,
+                max: 600,
+                step: 5,
+                valueFormatter: (n) => `${Math.round(n)}ms`,
+                displayAsKnob: true,
+                compactKnobLayout: true
+              }
+            ),
+            renderRange(
+              "Strength",
+              pointerScrollZoomStrengthPct,
+              setPointerScrollZoomStrengthPct,
+              "Per-frame zoom blend amount (higher = snappier response).",
+              {
+                min: 8,
+                max: 55,
+                step: 1,
+                valueFormatter: (n) => `${Math.round(n)}%`,
+                displayAsKnob: true,
+                compactKnobLayout: true
+              }
+            ),
+            renderRange(
+              "Sensitivity",
+              pointerScrollZoomDeltaDivisor,
+              setPointerScrollZoomDeltaDivisor,
+              "Wheel delta divisor (higher = less sensitive).",
+              {
+                min: 250,
+                max: 1400,
+                step: 10,
+                valueFormatter: (n) => `${Math.round(n)}`,
+                displayAsKnob: true,
+                compactKnobLayout: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "seatmap-editor__motion-advanced-actions", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "seatmap-editor__panel-button seatmap-editor__panel-button--tiny",
+              onClick: handleApplyAdvancedToBasic,
+              title: "Recalculate basic knobs from advanced settings",
+              children: "Apply to basic"
+            }
+          ) })
+        ] })
+      ] }),
+      `seatmap-editor__option-card--motion${useAdvancedMotion ? " is-advanced-open" : ""}`
     );
     if (activeToolName === "add-section") {
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            top: 12,
-            left: 12,
-            right: 12,
-            zIndex: 20,
-            pointerEvents: "none"
-          },
-          children: /* @__PURE__ */ jsxs(
-            "div",
+      return renderOverlay(
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "seatmap-editor__tool-options-title", children: "Tool Options" }),
+          /* @__PURE__ */ jsx("div", { className: "seatmap-editor__tool-options-divider" }),
+          renderOptionCard("Section", /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__option-row", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleSectionToolVariantChange("section", "rectangle"),
+                className: `seatmap-editor__segmented-button${sectionKind === "section" && sectionMode === "rectangle" ? " is-active" : ""}`,
+                children: "Rectangle"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleSectionToolVariantChange("section", "polygon"),
+                className: `seatmap-editor__segmented-button${sectionKind === "section" && sectionMode === "polygon" ? " is-active" : ""}`,
+                children: "Polygon"
+              }
+            )
+          ] })),
+          renderOptionCard("Stage", /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__option-row", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleSectionToolVariantChange("stage", "rectangle"),
+                className: `seatmap-editor__segmented-button${sectionKind === "stage" && sectionMode === "rectangle" ? " is-active" : ""}`,
+                children: "Rectangle"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleSectionToolVariantChange("stage", "polygon"),
+                className: `seatmap-editor__segmented-button${sectionKind === "stage" && sectionMode === "polygon" ? " is-active" : ""}`,
+                children: "Polygon"
+              }
+            )
+          ] })),
+          renderOptionCard("Dancefloor", /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__option-row", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleSectionToolVariantChange("dancefloor", "rectangle"),
+                className: `seatmap-editor__segmented-button${sectionKind === "dancefloor" && sectionMode === "rectangle" ? " is-active" : ""}`,
+                children: "Rectangle"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleSectionToolVariantChange("dancefloor", "polygon"),
+                className: `seatmap-editor__segmented-button${sectionKind === "dancefloor" && sectionMode === "polygon" ? " is-active" : ""}`,
+                children: "Polygon"
+              }
+            )
+          ] })),
+          renderOptionCard("Section resize", /* @__PURE__ */ jsx(
+            "button",
             {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: 10,
-                padding: "8px 12px",
-                border: "1px solid #3a3a5a",
-                borderRadius: 8,
-                background: "rgba(21, 21, 40, 0.92)",
-                backdropFilter: "blur(2px)",
-                pointerEvents: "auto"
-              },
-              onPointerDown: (e) => e.stopPropagation(),
-              onPointerMove: (e) => e.stopPropagation(),
-              onPointerUp: (e) => e.stopPropagation(),
-              children: [
+              onClick: () => handleToggleSectionResize(true),
+              className: `seatmap-editor__segmented-button${sectionResizeEnabled ? " is-active" : ""}`,
+              title: "Enable section corner/side resizing",
+              children: sectionResizeEnabled ? "Resize On" : "Resize Off"
+            }
+          )),
+          renderOptionCard("Auto focus", renderSwitch(
+            "Zoom to new section",
+            autoFocusNewSection,
+            () => setAutoFocusNewSection((current) => !current)
+          )),
+          isGridOptionsOpen && renderGridOptionsCard(),
+          isEditorSettingsOpen && renderMotionSettingsCard()
+        ] })
+      );
+    }
+    if (activeToolName === "select") {
+      return renderOverlay(
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "seatmap-editor__tool-options-title", children: "Tool Options" }),
+          /* @__PURE__ */ jsx("div", { className: "seatmap-editor__tool-options-divider" }),
+          renderOptionCard("Section resize", /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => handleToggleSectionResize(false),
+              className: `seatmap-editor__segmented-button${sectionResizeEnabled ? " is-active" : ""}`,
+              children: sectionResizeEnabled ? "Resize On" : "Resize Off"
+            }
+          )),
+          isGridOptionsOpen && renderGridOptionsCard(),
+          isEditorSettingsOpen && renderMotionSettingsCard()
+        ] })
+      );
+    }
+    if (activeToolName !== "add-row") {
+      if (!isGridOptionsOpen && !isEditorSettingsOpen) return null;
+      return renderOverlay(
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "seatmap-editor__tool-options-title", children: "Tool Options" }),
+          /* @__PURE__ */ jsx("div", { className: "seatmap-editor__tool-options-divider" }),
+          isGridOptionsOpen && renderGridOptionsCard(),
+          isEditorSettingsOpen && renderMotionSettingsCard()
+        ] })
+      );
+    }
+    return renderOverlay(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "seatmap-editor__tool-options-title", children: "Tool Options" }),
+        /* @__PURE__ */ jsx("div", { className: "seatmap-editor__tool-options-divider" }),
+        renderOptionCard("Row layout", /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__row-layout-body", children: [
+          /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__row-layout-controls", children: [
+            /* @__PURE__ */ jsxs("label", { className: "seatmap-editor__label seatmap-editor__option-row", children: [
+              "Seats:",
+              /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__input-stepper", children: [
                 /* @__PURE__ */ jsx(
-                  "span",
+                  "input",
                   {
-                    style: {
-                      color: "#c7c7df",
-                      fontSize: 12,
-                      fontFamily: "system-ui",
-                      fontWeight: 600,
-                      letterSpacing: 0.2
-                    },
-                    children: "Tool Options"
+                    type: "number",
+                    min: 1,
+                    max: 100,
+                    value: seatsPerRow,
+                    onChange: (e) => handleSeatsPerRowChange(Math.max(1, Math.min(100, parseInt(e.target.value) || 1))),
+                    className: "seatmap-editor__input seatmap-editor__input--stepper"
                   }
                 ),
-                /* @__PURE__ */ jsx("div", { style: { width: 1, height: 18, background: "#3a3a5a" } }),
-                /* @__PURE__ */ jsxs(
-                  "div",
+                /* @__PURE__ */ jsx(
+                  "button",
                   {
-                    style: {
-                      display: "flex",
-                      flexDirection: "column",
-                      alignItems: "flex-start",
-                      gap: 8,
-                      padding: "8px 10px",
-                      border: "1px solid #3a3a5a",
-                      borderRadius: 6,
-                      background: "rgba(42, 42, 74, 0.65)"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          style: {
-                            color: "#c7c7df",
-                            fontSize: 12,
-                            fontFamily: "system-ui",
-                            fontWeight: 600
-                          },
-                          children: "Section shape"
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-                        /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            onClick: () => handleSectionModeChange("rectangle"),
-                            style: {
-                              padding: "4px 8px",
-                              borderRadius: 6,
-                              border: "1px solid #3a3a5a",
-                              background: sectionMode === "rectangle" ? "#4a4a7a" : "#2a2a4a",
-                              color: sectionMode === "rectangle" ? "#ffffff" : "#d0d0e0",
-                              cursor: "pointer",
-                              fontSize: 12,
-                              fontFamily: "system-ui",
-                              fontWeight: 600
-                            },
-                            children: "Rectangle"
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            onClick: () => handleSectionModeChange("polygon"),
-                            style: {
-                              padding: "4px 8px",
-                              borderRadius: 6,
-                              border: "1px solid #3a3a5a",
-                              background: sectionMode === "polygon" ? "#4a4a7a" : "#2a2a4a",
-                              color: sectionMode === "polygon" ? "#ffffff" : "#d0d0e0",
-                              cursor: "pointer",
-                              fontSize: 12,
-                              fontFamily: "system-ui",
-                              fontWeight: 600
-                            },
-                            children: "Polygon"
-                          }
-                        )
-                      ] })
-                    ]
+                    type: "button",
+                    className: "seatmap-editor__stepper-button",
+                    "aria-label": "Increase seats per row",
+                    onClick: () => handleSeatsPerRowChange(seatsPerRow + 1),
+                    children: "+"
                   }
                 ),
-                /* @__PURE__ */ jsxs(
-                  "div",
+                /* @__PURE__ */ jsx(
+                  "button",
                   {
-                    style: {
-                      display: "flex",
-                      flexDirection: "column",
-                      alignItems: "flex-start",
-                      gap: 8,
-                      padding: "8px 10px",
-                      border: "1px solid #3a3a5a",
-                      borderRadius: 6,
-                      background: "rgba(42, 42, 74, 0.65)"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          style: {
-                            color: "#c7c7df",
-                            fontSize: 12,
-                            fontFamily: "system-ui",
-                            fontWeight: 600
-                          },
-                          children: "Section resize"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          onClick: () => handleToggleSectionResize(true),
-                          style: {
-                            padding: "4px 8px",
-                            borderRadius: 6,
-                            border: "1px solid #3a3a5a",
-                            background: sectionResizeEnabled ? "#8a6a32" : "#2a2a4a",
-                            color: sectionResizeEnabled ? "#fff3d8" : "#d0d0e0",
-                            cursor: "pointer",
-                            fontSize: 12,
-                            fontFamily: "system-ui",
-                            fontWeight: 600
-                          },
-                          title: "Enable section corner/side resizing",
-                          children: sectionResizeEnabled ? "Resize On" : "Resize Off"
-                        }
-                      )
-                    ]
+                    type: "button",
+                    className: "seatmap-editor__stepper-button",
+                    "aria-label": "Decrease seats per row",
+                    onClick: () => handleSeatsPerRowChange(seatsPerRow - 1),
+                    children: "-"
                   }
-                ),
-                isGridOptionsOpen && renderGridOptionsCard()
-              ]
-            }
-          )
-        }
-      );
-    }
-    if (activeToolName === "select") {
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            top: 12,
-            left: 12,
-            right: 12,
-            zIndex: 20,
-            pointerEvents: "none"
-          },
-          children: /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: 10,
-                padding: "8px 12px",
-                border: "1px solid #3a3a5a",
-                borderRadius: 8,
-                background: "rgba(21, 21, 40, 0.92)",
-                backdropFilter: "blur(2px)",
-                pointerEvents: "auto"
-              },
-              onPointerDown: (e) => e.stopPropagation(),
-              onPointerMove: (e) => e.stopPropagation(),
-              onPointerUp: (e) => e.stopPropagation(),
-              children: [
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "seatmap-editor__label seatmap-editor__option-row", children: [
+              "Rows:",
+              /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__input-stepper", children: [
                 /* @__PURE__ */ jsx(
-                  "span",
+                  "input",
                   {
-                    style: {
-                      color: "#c7c7df",
-                      fontSize: 12,
-                      fontFamily: "system-ui",
-                      fontWeight: 600
-                    },
-                    children: "Tool Options"
+                    type: "number",
+                    min: 1,
+                    max: 100,
+                    value: rowsCount,
+                    onChange: (e) => handleRowsCountChange(Math.max(1, Math.min(100, parseInt(e.target.value) || 1))),
+                    className: "seatmap-editor__input seatmap-editor__input--stepper"
                   }
                 ),
-                /* @__PURE__ */ jsx("div", { style: { width: 1, height: 18, background: "#3a3a5a" } }),
-                /* @__PURE__ */ jsxs(
-                  "div",
+                /* @__PURE__ */ jsx(
+                  "button",
                   {
-                    style: {
-                      display: "flex",
-                      flexDirection: "column",
-                      alignItems: "flex-start",
-                      gap: 8,
-                      padding: "8px 10px",
-                      border: "1px solid #3a3a5a",
-                      borderRadius: 6,
-                      background: "rgba(42, 42, 74, 0.65)"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          style: {
-                            color: "#c7c7df",
-                            fontSize: 12,
-                            fontFamily: "system-ui",
-                            fontWeight: 600
-                          },
-                          children: "Section resize"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          onClick: () => handleToggleSectionResize(false),
-                          style: {
-                            padding: "4px 8px",
-                            borderRadius: 6,
-                            border: "1px solid #3a3a5a",
-                            background: sectionResizeEnabled ? "#8a6a32" : "#2a2a4a",
-                            color: sectionResizeEnabled ? "#fff3d8" : "#d0d0e0",
-                            cursor: "pointer",
-                            fontSize: 12,
-                            fontFamily: "system-ui",
-                            fontWeight: 600
-                          },
-                          children: sectionResizeEnabled ? "Resize On" : "Resize Off"
-                        }
-                      )
-                    ]
+                    type: "button",
+                    className: "seatmap-editor__stepper-button",
+                    "aria-label": "Increase rows",
+                    onClick: () => handleRowsCountChange(rowsCount + 1),
+                    children: "+"
                   }
                 ),
-                isGridOptionsOpen && renderGridOptionsCard()
-              ]
-            }
-          )
-        }
-      );
-    }
-    if (activeToolName !== "add-row") {
-      if (!isGridOptionsOpen) return null;
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            top: 12,
-            left: 12,
-            right: 12,
-            zIndex: 20,
-            pointerEvents: "none"
-          },
-          children: /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: 10,
-                padding: "8px 12px",
-                border: "1px solid #3a3a5a",
-                borderRadius: 8,
-                background: "rgba(21, 21, 40, 0.92)",
-                backdropFilter: "blur(2px)",
-                pointerEvents: "auto"
-              },
-              onPointerDown: (e) => e.stopPropagation(),
-              onPointerMove: (e) => e.stopPropagation(),
-              onPointerUp: (e) => e.stopPropagation(),
-              children: [
                 /* @__PURE__ */ jsx(
-                  "span",
+                  "button",
                   {
-                    style: {
-                      color: "#c7c7df",
-                      fontSize: 12,
-                      fontFamily: "system-ui",
-                      fontWeight: 600
-                    },
-                    children: "Tool Options"
+                    type: "button",
+                    className: "seatmap-editor__stepper-button",
+                    "aria-label": "Decrease rows",
+                    onClick: () => handleRowsCountChange(rowsCount - 1),
+                    children: "-"
                   }
-                ),
-                /* @__PURE__ */ jsx("div", { style: { width: 1, height: 18, background: "#3a3a5a" } }),
-                renderGridOptionsCard()
-              ]
-            }
-          )
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          top: 12,
-          left: 12,
-          right: 12,
-          zIndex: 20,
-          pointerEvents: "none"
-        },
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: 10,
-              padding: "8px 12px",
-              border: "1px solid #3a3a5a",
-              borderRadius: 8,
-              background: "rgba(21, 21, 40, 0.92)",
-              backdropFilter: "blur(2px)",
-              pointerEvents: "auto"
-            },
-            onPointerDown: (e) => e.stopPropagation(),
-            onPointerMove: (e) => e.stopPropagation(),
-            onPointerUp: (e) => e.stopPropagation(),
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    color: "#c7c7df",
-                    fontSize: 12,
-                    fontFamily: "system-ui",
-                    fontWeight: 600,
-                    letterSpacing: 0.2
-                  },
-                  children: "Tool Options"
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { style: { width: 1, height: 18, background: "#3a3a5a" } }),
-              /* @__PURE__ */ jsxs(
-                "div",
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__option-card-title", children: [
+              "Total seats to add: ",
+              seatsPerRow * Math.max(1, rowsCount)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "seatmap-editor__row-layout-separator" }),
+          /* @__PURE__ */ jsx("div", { className: "seatmap-editor__row-presets", children: /* @__PURE__ */ jsx("table", { className: "seatmap-editor__row-presets-table", children: /* @__PURE__ */ jsx("tbody", { children: rowPresetRows.map((rowPreset) => /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "row", className: "seatmap-editor__row-preset-row-label", children: rowPreset }),
+            rowPresetSeats.map((seatPreset) => {
+              const isActive = rowsCount === rowPreset && seatsPerRow === seatPreset;
+              return /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+                "button",
                 {
-                  style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "flex-start",
-                    gap: 8,
-                    padding: "8px 10px",
-                    border: "1px solid #3a3a5a",
-                    borderRadius: 6,
-                    background: "rgba(42, 42, 74, 0.65)"
+                  type: "button",
+                  className: `seatmap-editor__row-preset-button${isActive ? " is-active" : ""}`,
+                  onClick: () => {
+                    handleRowsCountChange(rowPreset);
+                    handleSeatsPerRowChange(seatPreset);
                   },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        style: {
-                          color: "#c7c7df",
-                          fontSize: 12,
-                          fontFamily: "system-ui",
-                          fontWeight: 600
-                        },
-                        children: "Row layout"
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs(
-                      "label",
-                      {
-                        style: {
-                          color: "#9e9e9e",
-                          fontSize: 12,
-                          fontFamily: "system-ui",
-                          display: "flex",
-                          alignItems: "center",
-                          gap: 6
-                        },
-                        children: [
-                          "Seats/row:",
-                          /* @__PURE__ */ jsx(
-                            "input",
-                            {
-                              type: "number",
-                              min: 1,
-                              max: 100,
-                              value: seatsPerRow,
-                              onChange: (e) => handleSeatsPerRowChange(Math.max(1, Math.min(100, parseInt(e.target.value) || 1))),
-                              style: {
-                                width: 56,
-                                padding: "3px 6px",
-                                background: "#2a2a4a",
-                                border: "1px solid #3a3a5a",
-                                borderRadius: 4,
-                                color: "#e0e0e0",
-                                fontSize: 13,
-                                fontFamily: "system-ui"
-                              }
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs(
-                      "label",
-                      {
-                        style: {
-                          color: "#9e9e9e",
-                          fontSize: 12,
-                          fontFamily: "system-ui",
-                          display: "flex",
-                          alignItems: "center",
-                          gap: 6
-                        },
-                        children: [
-                          "Rows:",
-                          /* @__PURE__ */ jsx(
-                            "input",
-                            {
-                              type: "number",
-                              min: 1,
-                              max: 100,
-                              value: rowsCount,
-                              onChange: (e) => handleRowsCountChange(Math.max(1, Math.min(100, parseInt(e.target.value) || 1))),
-                              style: {
-                                width: 56,
-                                padding: "3px 6px",
-                                background: "#2a2a4a",
-                                border: "1px solid #3a3a5a",
-                                borderRadius: 4,
-                                color: "#e0e0e0",
-                                fontSize: 13,
-                                fontFamily: "system-ui"
-                              }
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        style: {
-                          color: "#c7c7df",
-                          fontSize: 12,
-                          fontFamily: "system-ui",
-                          fontWeight: 600
-                        },
-                        children: [
-                          "Total seats to add: ",
-                          seatsPerRow * Math.max(1, rowsCount)
-                        ]
-                      }
-                    )
-                  ]
+                  children: seatPreset
                 }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
+              ) }, `${rowPreset}-${seatPreset}`);
+            })
+          ] }, `row-preset-${rowPreset}`)) }) }) })
+        ] })),
+        renderOptionCard("Orientation", /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__option-row seatmap-editor__orientation-toggle", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `seatmap-editor__orientation-label${rowDirectionArrowMode === "viewer-direction" ? " is-active" : ""}`,
+                children: "Viewer direction"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "switch",
+                "aria-checked": rowDirectionArrowMode === "row-direction",
+                onClick: () => setRowDirectionArrowMode(
+                  (mode) => mode === "row-direction" ? "viewer-direction" : "row-direction"
+                ),
+                className: `seatmap-editor__switch-track seatmap-editor__switch-track--wide${rowDirectionArrowMode === "row-direction" ? " is-checked" : ""}`,
+                title: "Toggle arrow orientation mode",
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "seatmap-editor__switch-thumb seatmap-editor__switch-thumb--wide",
+                    style: {
+                      transform: rowDirectionArrowMode === "row-direction" ? "translateX(22px)" : "translateX(0)"
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `seatmap-editor__orientation-label${rowDirectionArrowMode === "row-direction" ? " is-active" : ""}`,
+                children: "Row direction"
+              }
+            )
+          ] }),
+          renderRange(
+            "Orientation",
+            rowOrientationKnobDeg,
+            handleRowOrientationKnobChange,
+            "Drag vertically on the knob to set row orientation.",
+            {
+              min: 0,
+              max: 359,
+              step: 1,
+              valueFormatter: (n) => `${Math.round(n)}\xB0`,
+              displayAsKnob: true,
+              knobMode: "dial360",
+              knobFillStartDeg: 0,
+              knobNamespace: "tool",
+              valuePlacement: "knob",
+              knobRightContent: /* @__PURE__ */ jsx(
+                "button",
                 {
-                  style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "flex-start",
-                    gap: 8,
-                    padding: "8px 10px",
-                    border: "1px solid #3a3a5a",
-                    borderRadius: 6,
-                    background: "rgba(42, 42, 74, 0.65)"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        style: {
-                          color: "#c7c7df",
-                          fontSize: 12,
-                          fontFamily: "system-ui",
-                          fontWeight: 600
-                        },
-                        children: "Orientation"
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs(
-                      "label",
-                      {
-                        style: {
-                          color: "#9e9e9e",
-                          fontSize: 12,
-                          fontFamily: "system-ui",
-                          display: "flex",
-                          alignItems: "center",
-                          gap: 6
-                        },
-                        children: [
-                          "Orientation:",
-                          /* @__PURE__ */ jsx(
-                            "input",
-                            {
-                              type: "number",
-                              min: 0,
-                              max: 359,
-                              value: rowOrientationDeg,
-                              onChange: (e) => handleRowOrientationChange(parseInt(e.target.value, 10) || 0),
-                              style: {
-                                width: 56,
-                                padding: "3px 6px",
-                                background: "#2a2a4a",
-                                border: "1px solid #3a3a5a",
-                                borderRadius: 4,
-                                color: "#e0e0e0",
-                                fontSize: 13,
-                                fontFamily: "system-ui"
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("span", { style: { color: "#9e9e9e" }, children: "deg" }),
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              onClick: handleRotateRowOrientationQuarterTurn,
-                              style: {
-                                padding: "3px 6px",
-                                borderRadius: 4,
-                                border: "1px solid #3a3a5a",
-                                background: "#2a2a4a",
-                                color: "#d0d0e0",
-                                cursor: "pointer",
-                                fontSize: 12,
-                                fontFamily: "system-ui",
-                                fontWeight: 600
-                              },
-                              title: "Rotate row direction by 90 degrees",
-                              children: "+90deg"
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          color: "#9e9e9e",
-                          fontSize: 11,
-                          fontFamily: "system-ui"
-                        },
-                        children: "0deg = up, 90deg = right"
-                      }
-                    )
-                  ]
+                  onClick: handleRotateRowOrientationQuarterTurn,
+                  className: "seatmap-editor__segmented-button",
+                  title: "Rotate row direction by 90 degrees",
+                  children: "+90\xB0"
                 }
-              ),
-              isGridOptionsOpen && renderGridOptionsCard()
-            ]
-          }
-        )
-      }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "seatmap-editor__hint-text", children: rowDirectionArrowMode === "row-direction" ? "Arrow: row direction (viewer +90\xB0)" : "Arrow: viewer direction (0\xB0 = up, 90\xB0 = right)" })
+        ] })),
+        isGridOptionsOpen && renderGridOptionsCard(),
+        isEditorSettingsOpen && renderMotionSettingsCard()
+      ] })
     );
   };
   useEffect(() => {
     const isTyping = () => {
-      const tag = document.activeElement?.tagName;
-      return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
+      const activeElement = document.activeElement;
+      if (!activeElement) return false;
+      const tag = activeElement.tagName;
+      return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || activeElement.isContentEditable;
     };
     const handler = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "z") {
@@ -5026,8 +5536,18 @@ function EditorInner({
         return;
       }
       if (isTyping()) return;
-      if (e.key === "v" || e.key === "1") setActiveTool("select");
-      if (e.key === "h" || e.key === "2") setActiveTool("pan");
+      if (e.key === "Delete" || e.key === "Backspace") {
+        e.preventDefault();
+        handleDeleteSelectedObjects();
+        return;
+      }
+      if (e.key === "Escape" && activeToolName === "add-section") {
+        e.preventDefault();
+        addSectionTool.cancelDrawing();
+        return;
+      }
+      if (e.key === "v" || e.key === "2") setActiveTool("select");
+      if (e.key === "h" || e.key === "1") setActiveTool("pan");
       if (e.key === "s" || e.key === "3") setActiveTool("add-section");
       if (e.key === "r" || e.key === "4") setActiveTool("add-row");
       if (e.key === "a" || e.key === "5") setActiveTool("add-seat");
@@ -5048,7 +5568,7 @@ function EditorInner({
       window.removeEventListener("keydown", handler);
       window.removeEventListener("keyup", upHandler);
     };
-  }, [setActiveTool, activeToolName]);
+  }, [setActiveTool, activeToolName, handleDeleteSelectedObjects, addSectionTool]);
   const toToolPointerEvent = useCallback(
     (e) => {
       const rect = e.currentTarget.getBoundingClientRect();
@@ -5095,6 +5615,11 @@ function EditorInner({
     (e) => {
       const toolEvent = toToolPointerEvent(e);
       activeToolRef.current.onPointerMove(toolEvent, viewport, store);
+      const rect = e.currentTarget.getBoundingClientRect();
+      setCursorScreenPoint({
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top
+      });
       if (activeToolName === "add-row") {
         setRowPreviewPoint({ x: toolEvent.worldX, y: toolEvent.worldY });
       }
@@ -5110,14 +5635,7 @@ function EditorInner({
     (e) => handlePointerRelease(e),
     [handlePointerRelease]
   );
-  const sidebarStyle = {
-    width: 260,
-    background: "#1a1a2e",
-    borderLeft: "1px solid #2a2a4a",
-    overflowY: "auto",
-    flexShrink: 0
-  };
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", width: "100%", height: "100%" }, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "seatmap-editor seatmap-editor--root", children: [
     /* @__PURE__ */ jsx(
       Toolbar,
       {
@@ -5132,19 +5650,25 @@ function EditorInner({
         onRedo: () => historyRef.current.redo(),
         onFitView: handleFitView,
         onSave: handleSave,
-        onLoad: handleLoad
+        onLoad: handleLoad,
+        showHints,
+        onToggleHints: () => setShowHints((current) => !current),
+        isEditorSettingsOpen,
+        onToggleEditorSettings: () => setIsEditorSettingsOpen((current) => !current)
       }
     ),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flex: 1, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__canvas-layout", children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
           ref: canvasAreaRef,
-          style: { flex: 1, position: "relative", cursor: (toolMap[activeToolName] ?? selectTool).cursor },
+          className: "seatmap-editor__canvas-area",
+          style: { cursor: (toolMap[activeToolName] ?? selectTool).cursor },
           onPointerDown: handleCanvasPointerDown,
           onPointerMove: handleCanvasPointerMove,
           onPointerUp: handleCanvasPointerUp,
           onPointerCancel: handleCanvasPointerCancel,
+          onPointerLeave: () => setCursorScreenPoint(null),
           children: [
             /* @__PURE__ */ jsx(
               SeatmapCanvas,
@@ -5153,7 +5677,15 @@ function EditorInner({
                 showGridLines: gridEnabled && showCanvasGrid,
                 showSectionGridDots: gridEnabled && showSectionGrid,
                 canvasGridLineStyle: canvasGridStyle,
-                sectionGridMarkerStyle: sectionGridStyle
+                sectionGridMarkerStyle: sectionGridStyle,
+                panInertiaJelly,
+                panInertiaCarry: useAdvancedMotion ? panInertiaCarryPct / 100 : void 0,
+                panInertiaFriction: useAdvancedMotion ? panInertiaFrictionPct / 100 : void 0,
+                panInertiaMinSpeed: useAdvancedMotion ? panInertiaMinSpeedMilli / 1e3 : void 0,
+                pointerScrollZoomJelly,
+                pointerScrollZoomDurationMs: useAdvancedMotion ? pointerScrollZoomDurationMs : void 0,
+                pointerScrollZoomStrengthPct: useAdvancedMotion ? pointerScrollZoomStrengthPct : void 0,
+                pointerScrollZoomDeltaDivisor: useAdvancedMotion ? pointerScrollZoomDeltaDivisor : void 0
               }
             ),
             /* @__PURE__ */ jsx(
@@ -5176,11 +5708,22 @@ function EditorInner({
                 mode: sectionMode,
                 viewport
               }
+            ),
+            showHints && sectionHintText && cursorScreenPoint && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "seatmap-editor__hint-bubble",
+                style: {
+                  left: cursorScreenPoint.x + 14,
+                  top: cursorScreenPoint.y + 14
+                },
+                children: sectionHintText
+              }
             )
           ]
         }
       ),
-      /* @__PURE__ */ jsxs("div", { style: sidebarStyle, children: [
+      /* @__PURE__ */ jsxs("div", { className: "seatmap-editor__sidebar", children: [
         /* @__PURE__ */ jsx(
           PropertyPanel,
           {
@@ -5197,7 +5740,7 @@ function EditorInner({
           }
         ),
         selectedSeatIds.size === 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { style: { height: 1, background: "#2a2a4a", margin: "0 16px" } }),
+          /* @__PURE__ */ jsx("div", { className: "seatmap-editor__sidebar-separator" }),
           /* @__PURE__ */ jsx(
             LayerPanel,
             {
@@ -5207,7 +5750,7 @@ function EditorInner({
               onSelectSection: handleSelectSection
             }
           ),
-          /* @__PURE__ */ jsx("div", { style: { height: 1, background: "#2a2a4a", margin: "0 16px" } }),
+          /* @__PURE__ */ jsx("div", { className: "seatmap-editor__sidebar-separator" }),
           /* @__PURE__ */ jsx(
             CategoryManager,
             {
@@ -5219,7 +5762,7 @@ function EditorInner({
           )
         ] }),
         selectedSeatIds.size === 0 && selectedSectionIds.size === 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { style: { height: 1, background: "#2a2a4a", margin: "0 16px" } }),
+          /* @__PURE__ */ jsx("div", { className: "seatmap-editor__sidebar-separator" }),
           /* @__PURE__ */ jsx(
             StatusManager,
             {
@@ -5234,7 +5777,7 @@ function EditorInner({
   ] });
 }
 function SeatmapEditor({ venue, onChange, onSave, fetchCategoryPrices, className }) {
-  return /* @__PURE__ */ jsx(SeatmapProvider, { venue, children: /* @__PURE__ */ jsx("div", { className, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(EditorInner, { onChange, onSave, fetchCategoryPrices }) }) });
+  return /* @__PURE__ */ jsx(SeatmapProvider, { venue, children: /* @__PURE__ */ jsx("div", { className: className ? `seatmap-editor__host ${className}` : "seatmap-editor__host", children: /* @__PURE__ */ jsx(EditorInner, { onChange, onSave, fetchCategoryPrices }) }) });
 }
 var DrawGATool = class extends BaseTool {
   constructor(history) {