@zentto/report-designer 0.5.0 → 1.1.0

package/dist/zentto-report-designer.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 // @zentto/report-designer — WYSIWYG report designer web component
 import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { createBlankLayout, toPx } from '@zentto/report-core';
+import { createBlankLayout, toPx, PAGE_SIZES } from '@zentto/report-core';
 const BAND_LABELS = {
     reportHeader: 'Report Header',
     pageHeader: 'Page Header',
@@ -103,6 +103,13 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
         this._editingElementId = null;
         this._contextMenu = null;
         this._zoom = 1.5; // Default 150% for comfortable editing
+        this._showPageSetup = false;
+        this._showBandMenu = false;
+        this._mobileLeftOpen = false;
+        this._mobileRightOpen = false;
+        this._guides = { x: [], y: [] };
+        this._collapsedSections = new Set();
+        this._pageSetupDraft = null;
         this._clipboard = [];
         this._saveTimer = null;
         this._idCounter = 0;
@@ -127,6 +134,14 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
     get _unit() {
         return this._layout.pageSize.unit;
     }
+    _toggleSection(section) {
+        const next = new Set(this._collapsedSections);
+        if (next.has(section))
+            next.delete(section);
+        else
+            next.add(section);
+        this._collapsedSections = next;
+    }
     // Helper: single selected element id (for property panel, backward compat)
     get _selectedElementId() {
         if (this._selectedElementIds.size === 1) {
@@ -158,7 +173,7 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
     .designer {
       display: grid;
       grid-template-columns: 220px 1fr 260px;
-      grid-template-rows: auto 1fr;
+      grid-template-rows: auto auto 1fr;
       height: 100%;
       background: var(--zrd-bg);
       color: var(--zrd-text);
@@ -173,6 +188,8 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
       padding: 6px 12px;
       background: var(--zrd-panel-bg);
       border-bottom: 1px solid var(--zrd-border);
+      flex-wrap: wrap;
+      min-height: 36px;
     }
     .top-toolbar button {
       background: none;
@@ -284,10 +301,12 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
       background: #d0d0d0;
       display: flex;
       justify-content: center;
+      -webkit-overflow-scrolling: touch;
     }
     .canvas-scroll-container {
       transform-origin: top center;
       transition: transform 0.1s ease;
+      min-width: min-content;
     }
     .canvas-wrapper {
       position: relative;
@@ -380,6 +399,7 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
       cursor: pointer;
       user-select: none;
       gap: 6px;
+      overflow: hidden;
     }
     .band-header:hover { filter: brightness(0.95); }
     .band-header.selected { box-shadow: inset 0 0 0 2px var(--zrd-accent); color: var(--zrd-accent); }
@@ -387,6 +407,10 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
       display: flex;
       align-items: center;
       gap: 6px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      min-width: 0;
     }
     .band-type-icon {
       font-size: 13px;
@@ -501,79 +525,306 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
       box-sizing: border-box;
     }
 
-    /* ─── Right Panel (Properties) ─── */
+    /* ─── Right Panel (Figma-style Properties) ─── */
     .right-panel {
       background: var(--zrd-panel-bg);
       border-left: 1px solid var(--zrd-border);
       overflow-y: auto;
-      padding: 12px;
+      overflow-x: hidden;
+      scrollbar-width: thin;
+      scrollbar-color: #ccc transparent;
     }
+    .right-panel::-webkit-scrollbar { width: 6px; }
+    .right-panel::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
+
     .prop-section {
-      margin-bottom: 12px;
+      border-bottom: 1px solid var(--zrd-border);
+      padding: 10px 12px;
     }
-    .prop-section h4 {
+    .prop-section:last-child { border-bottom: none; }
+
+    .prop-section-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+      user-select: none;
+      margin-bottom: 8px;
+    }
+    .prop-section-header h4 {
       font-size: 11px;
+      font-weight: 600;
       text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--zrd-text);
+      margin: 0;
+    }
+    .prop-section-header .collapse-icon {
+      font-size: 10px;
       color: var(--zrd-text-muted);
-      margin-bottom: 6px;
+      transition: transform 0.15s;
+    }
+    .prop-section-header .collapse-icon.collapsed {
+      transform: rotate(-90deg);
+    }
+    .prop-section-body {
+      display: grid;
+      gap: 4px;
+    }
+    .prop-section-body.collapsed {
+      display: none;
     }
+
+    /* ─── Property Rows ─── */
     .prop-row {
-      display: flex;
+      display: grid;
+      grid-template-columns: 68px 1fr;
       align-items: center;
-      gap: 4px;
-      margin-bottom: 4px;
+      gap: 6px;
+      min-height: 28px;
+    }
+    .prop-row-full {
+      grid-template-columns: 1fr;
     }
     .prop-label {
-      width: 70px;
       font-size: 11px;
       color: var(--zrd-text-muted);
-      flex-shrink: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-left: 2px;
     }
+
+    /* ─── Inputs (Figma-style) ─── */
     .prop-input {
-      flex: 1;
-      border: 1px solid var(--zrd-border);
-      border-radius: 3px;
-      padding: 3px 6px;
+      width: 100%;
+      border: 1px solid transparent;
+      border-radius: 4px;
+      padding: 4px 8px;
       font-size: 12px;
-      background: white;
+      background: var(--zrd-bg);
       color: var(--zrd-text);
+      transition: border-color 0.15s, background 0.15s;
+      outline: none;
+      min-width: 0;
     }
-    .prop-input:focus { outline: none; border-color: var(--zrd-accent); }
-    select.prop-input { padding: 2px 4px; }
-    .prop-unit {
+    .prop-input:hover {
+      border-color: var(--zrd-border);
+    }
+    .prop-input:focus {
+      border-color: var(--zrd-accent);
+      background: white;
+    }
+    select.prop-input {
+      padding: 3px 6px;
+      cursor: pointer;
+      appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 6px center;
+      padding-right: 20px;
+    }
+    textarea.prop-input {
+      min-height: 52px;
+      resize: vertical;
+      font-family: 'Consolas', 'Monaco', monospace;
+      font-size: 11px;
+      line-height: 1.5;
+    }
+
+    /* ─── Compact number inputs (X, Y, W, H grid) ─── */
+    .prop-grid-2x2 {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 4px;
+    }
+    .prop-grid-item {
+      display: flex;
+      align-items: center;
+      background: var(--zrd-bg);
+      border: 1px solid transparent;
+      border-radius: 4px;
+      padding: 2px 6px;
+      gap: 4px;
+      transition: border-color 0.15s;
+    }
+    .prop-grid-item:hover { border-color: var(--zrd-border); }
+    .prop-grid-item:focus-within { border-color: var(--zrd-accent); }
+    .prop-grid-item .prop-grid-label {
       font-size: 10px;
-      color: var(--zrd-text-muted);
-      width: 22px;
+      color: var(--zrd-accent);
+      font-weight: 600;
+      width: 12px;
+      text-align: center;
       flex-shrink: 0;
     }
+    .prop-grid-item input {
+      border: none;
+      background: transparent;
+      width: 100%;
+      font-size: 12px;
+      color: var(--zrd-text);
+      outline: none;
+      padding: 2px 0;
+      min-width: 0;
+    }
 
-    .btn-danger {
-      background: var(--zrd-danger);
-      color: white;
+    /* ─── Color picker (Figma-style swatch + input) ─── */
+    .prop-color-row {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .prop-color-swatch {
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+      border: 1px solid var(--zrd-border);
+      cursor: pointer;
+      flex-shrink: 0;
+      position: relative;
+      overflow: hidden;
+    }
+    .prop-color-swatch input[type="color"] {
+      position: absolute;
+      inset: -4px;
+      width: calc(100% + 8px);
+      height: calc(100% + 8px);
+      cursor: pointer;
       border: none;
+      padding: 0;
+    }
+    .prop-color-hex {
+      border: 1px solid transparent;
       border-radius: 4px;
-      padding: 4px 10px;
+      padding: 4px 8px;
+      font-size: 11px;
+      font-family: 'Consolas', 'Monaco', monospace;
+      background: var(--zrd-bg);
+      color: var(--zrd-text);
+      width: 80px;
+      outline: none;
+    }
+    .prop-color-hex:hover { border-color: var(--zrd-border); }
+    .prop-color-hex:focus { border-color: var(--zrd-accent); }
+
+    /* ─── Toggle switches ─── */
+    .prop-toggle {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .prop-switch {
+      position: relative;
+      width: 32px;
+      height: 18px;
+      border-radius: 9px;
+      background: #ccc;
+      cursor: pointer;
+      transition: background 0.2s;
+      flex-shrink: 0;
+    }
+    .prop-switch.active { background: var(--zrd-accent); }
+    .prop-switch::after {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: white;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+      transition: transform 0.2s;
+    }
+    .prop-switch.active::after { transform: translateX(14px); }
+
+    /* ─── Segmented buttons (alignment, etc.) ─── */
+    .prop-segmented {
+      display: flex;
+      border: 1px solid var(--zrd-border);
+      border-radius: 4px;
+      overflow: hidden;
+    }
+    .prop-seg-btn {
+      flex: 1;
+      padding: 4px 0;
+      background: var(--zrd-bg);
+      border: none;
+      border-right: 1px solid var(--zrd-border);
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--zrd-text-muted);
+      transition: background 0.15s;
+      text-align: center;
+    }
+    .prop-seg-btn:last-child { border-right: none; }
+    .prop-seg-btn:hover { background: var(--zrd-accent-light); }
+    .prop-seg-btn.active { background: var(--zrd-accent); color: white; }
+
+    /* ─── Font size + family row ─── */
+    .prop-font-row {
+      display: grid;
+      grid-template-columns: 1fr 60px;
+      gap: 4px;
+    }
+
+    /* ─── Delete button ─── */
+    .btn-danger {
+      background: none;
+      color: var(--zrd-danger);
+      border: 1px solid var(--zrd-danger);
+      border-radius: 4px;
+      padding: 6px 10px;
       cursor: pointer;
       font-size: 12px;
       width: 100%;
+      transition: background 0.15s;
     }
-    .btn-danger:hover { opacity: 0.9; }
+    .btn-danger:hover { background: var(--zrd-danger); color: white; }
 
+    /* ─── Z-order buttons ─── */
+    .z-order-buttons {
+      display: flex;
+      gap: 2px;
+    }
     .btn-small {
-      background: none;
-      border: 1px solid var(--zrd-border);
-      border-radius: 3px;
-      padding: 3px 8px;
+      background: var(--zrd-bg);
+      border: 1px solid transparent;
+      border-radius: 4px;
+      padding: 4px 8px;
       cursor: pointer;
       font-size: 11px;
       color: var(--zrd-text);
+      transition: all 0.15s;
     }
-    .btn-small:hover { background: var(--zrd-accent-light); }
+    .btn-small:hover { background: var(--zrd-accent-light); border-color: var(--zrd-border); }
 
-    .z-order-buttons {
-      display: flex;
+    .prop-unit {
+      font-size: 10px;
+      color: var(--zrd-text-muted);
+      width: 20px;
+      flex-shrink: 0;
+      text-align: center;
+    }
+
+    /* ─── Section-specific colors ─── */
+    .prop-section[data-section="position"] .prop-section-header h4 { color: var(--zrd-accent); }
+    .prop-section[data-section="style"] .prop-section-header h4 { color: #7c3aed; }
+    .prop-section[data-section="visibility"] .prop-section-header h4 { color: #0d9488; }
+    .prop-section[data-section="data"] .prop-section-header h4 { color: #ea580c; }
+
+    /* ─── Element type badge ─── */
+    .element-type-badge {
+      display: inline-flex;
+      align-items: center;
       gap: 4px;
-      flex-wrap: wrap;
+      padding: 3px 10px;
+      border-radius: 10px;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
     }
 
     /* ─── Data Source Panel ─── */
@@ -603,6 +854,8 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
       z-index: 1000;
       min-width: 160px;
       padding: 4px 0;
+      max-height: calc(100vh - 40px);
+      overflow-y: auto;
     }
     .context-menu-item {
       padding: 6px 12px;
@@ -629,67 +882,367 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
       inset: 0;
       z-index: 999;
     }
-  `; }
-    // ─── Lifecycle ──────────────────────────────────────────────────
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.layout) {
-            this._layout = structuredClone(this.layout);
-        }
-        this._pushUndo();
-        this._onKeyDown = this._onKeyDown.bind(this);
-        this._onGlobalClick = this._onGlobalClick.bind(this);
-        document.addEventListener('keydown', this._onKeyDown);
-        document.addEventListener('click', this._onGlobalClick);
+
+    /* ─── Dialog ─── */
+    .dialog-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1000;display:flex;align-items:center;justify-content:center; }
+    .dialog { background:white;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,0.3);min-width:480px;max-width:600px; }
+    .dialog-header { padding:16px 20px;border-bottom:1px solid var(--zrd-border);font-weight:600;font-size:15px;display:flex;justify-content:space-between;align-items:center; }
+    .dialog-body { padding:20px; }
+    .dialog-footer { padding:12px 20px;border-top:1px solid var(--zrd-border);display:flex;justify-content:flex-end;gap:8px; }
+    .dialog-btn { padding:8px 16px;border-radius:4px;border:1px solid var(--zrd-border);cursor:pointer;font-size:13px;background:white; }
+    .dialog-btn-primary { background:var(--zrd-accent);color:white;border-color:var(--zrd-accent); }
+    .dialog-btn-primary:hover { opacity:0.9; }
+    .dialog-row { display:flex;gap:12px;margin-bottom:12px;align-items:center; }
+    .dialog-label { font-size:12px;font-weight:600;color:var(--zrd-text-muted);min-width:70px; }
+    .dialog-select, .dialog-input {
+      flex:1;padding:6px 8px;border:1px solid var(--zrd-border);border-radius:4px;font-size:13px;
+      font-family:inherit;color:var(--zrd-text);
+    }
+    .dialog-input { width:60px;flex:none; }
+    .dialog-group { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px; }
+    .dialog-group label { font-size:11px;color:var(--zrd-text-muted);display:flex;flex-direction:column;gap:2px; }
+    .dialog-group input { padding:5px 6px;border:1px solid var(--zrd-border);border-radius:3px;font-size:12px; }
+    .orientation-toggle { display:flex;gap:0; }
+    .orientation-toggle button {
+      padding:6px 14px;border:1px solid var(--zrd-border);cursor:pointer;font-size:12px;background:white;color:var(--zrd-text);
+    }
+    .orientation-toggle button:first-child { border-radius:4px 0 0 4px; }
+    .orientation-toggle button:last-child { border-radius:0 4px 4px 0;border-left:none; }
+    .orientation-toggle button.active { background:var(--zrd-accent);color:white;border-color:var(--zrd-accent); }
+    .page-preview-box {
+      width:100%;height:140px;background:#f9f9f9;border:1px solid var(--zrd-border);border-radius:4px;
+      display:flex;align-items:center;justify-content:center;position:relative;
+    }
+    .page-preview-page {
+      background:white;border:1px solid #999;position:relative;box-shadow:0 1px 4px rgba(0,0,0,0.15);
+    }
+    .page-preview-margin {
+      position:absolute;border:1px dashed rgba(25,118,210,0.4);
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.removeEventListener('keydown', this._onKeyDown);
-        document.removeEventListener('click', this._onGlobalClick);
+
+    /* ─── Band Menu Dropdown ─── */
+    .band-menu-wrapper { position:relative;display:inline-block; }
+    .band-menu {
+      position:absolute;top:100%;left:0;background:white;border:1px solid var(--zrd-border);border-radius:4px;
+      box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:100;min-width:200px;padding:4px 0;
+    }
+    .band-menu-item {
+      padding:6px 12px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:8px;
+    }
+    .band-menu-item:hover { background:var(--zrd-accent-light); }
+    .band-menu-item.disabled { opacity:0.4;cursor:default; }
+    .band-menu-cat { padding:4px 12px;font-size:10px;font-weight:600;color:var(--zrd-text-muted);text-transform:uppercase; }
+
+    /* ─── Page Setup Bar ─── */
+    .page-setup-bar {
+      grid-column: 1 / -1;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 6px 16px;
+      background: #f8f9fa;
+      border-bottom: 1px solid var(--zrd-border);
+      font-size: 12px;
+      flex-wrap: wrap;
+      min-height: 32px;
     }
-    updated(changed) {
-        if (changed.has('layout') && this.layout) {
-            this._layout = structuredClone(this.layout);
-        }
-        if (changed.has('dataSources') && this.dataSources.length > 0) {
-            // Sync dataSources into layout
-            this._layout = { ...this._layout, dataSources: this.dataSources };
-        }
+    .page-setup-group {
+      display: flex;
+      align-items: center;
+      gap: 4px;
     }
-    // ─── Global click to dismiss context menu ──────────────────────
-    _onGlobalClick() {
-        if (this._contextMenu) {
-            this._contextMenu = null;
-            this.requestUpdate();
-        }
+    .page-setup-label {
+      font-size: 11px;
+      color: var(--zrd-text-muted);
+      white-space: nowrap;
     }
-    // ─── ID Generation ──────────────────────────────────────────────
-    _newId(prefix = 'el') {
-        return `${prefix}_${Date.now()}_${this._idCounter++}`;
+    .page-setup-select {
+      border: 1px solid var(--zrd-border);
+      border-radius: 3px;
+      padding: 3px 6px;
+      font-size: 12px;
+      background: white;
+      color: var(--zrd-text);
+      max-width: 180px;
     }
-    // ─── Undo / Redo ────────────────────────────────────────────────
-    _pushUndo() {
-        this._undoStack = [...this._undoStack, JSON.stringify(this._layout)];
-        this._redoStack = [];
-        if (this._undoStack.length > 50)
-            this._undoStack = this._undoStack.slice(-50);
+    .page-setup-input {
+      border: 1px solid var(--zrd-border);
+      border-radius: 3px;
+      padding: 3px 4px;
+      font-size: 11px;
+      width: 42px;
+      text-align: center;
+      background: white;
     }
-    _undo() {
-        if (this._undoStack.length <= 1)
-            return;
-        const current = this._undoStack.pop();
-        this._redoStack = [...this._redoStack, current];
-        const prev = this._undoStack[this._undoStack.length - 1];
-        this._layout = JSON.parse(prev);
-        this._emitChange();
+    .orientation-btn {
+      padding: 4px 8px;
+      border: 1px solid var(--zrd-border);
+      border-radius: 3px;
+      background: white;
+      cursor: pointer;
+      font-size: 14px;
+      line-height: 1;
     }
-    _redo() {
-        if (this._redoStack.length === 0)
-            return;
-        const next = this._redoStack.pop();
-        this._undoStack = [...this._undoStack, next];
-        this._layout = JSON.parse(next);
-        this._emitChange();
+    .orientation-btn.active {
+      background: var(--zrd-accent);
+      color: white;
+      border-color: var(--zrd-accent);
+    }
+    .page-setup-separator {
+      width: 1px;
+      height: 20px;
+      background: var(--zrd-border);
+    }
+
+    /* ─── Smart Alignment Guides ─── */
+    .guide-line-v { position:absolute;top:0;bottom:0;width:1px;background:#ff4444;z-index:100;pointer-events:none; }
+    .guide-line-h { position:absolute;left:0;right:0;height:1px;background:#ff4444;z-index:100;pointer-events:none; }
+
+    /* ─── Empty State / Onboarding ─── */
+    .band-empty-hint {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #bbb;
+      font-size: 11px;
+      pointer-events: none;
+      font-style: italic;
+    }
+    .help-card {
+      background: #f0f7ff;
+      border: 1px solid #c2deff;
+      border-radius: 6px;
+      padding: 12px;
+      font-size: 12px;
+      line-height: 1.6;
+    }
+    .help-card h4 { margin: 0 0 8px; font-size: 13px; color: var(--zrd-accent); }
+    .help-card-section { margin-top: 10px; }
+    .help-card kbd {
+      background: #e8e8e8;
+      border: 1px solid #ccc;
+      border-radius: 3px;
+      padding: 1px 5px;
+      font-size: 10px;
+      font-family: monospace;
+    }
+
+    /* ─── Mobile Panel Toggle Buttons ─── */
+    .mobile-panel-toggles {
+      display: none;
+      gap: 8px;
+      padding: 8px;
+    }
+    @media (max-width: 768px) {
+      .mobile-panel-toggles {
+        display: flex;
+      }
+    }
+    .mobile-toggle-btn {
+      padding: 6px 12px;
+      border: 1px solid var(--zrd-border);
+      border-radius: 4px;
+      background: var(--zrd-panel-bg);
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--zrd-text);
+    }
+    .mobile-toggle-btn.active {
+      background: var(--zrd-accent);
+      color: white;
+      border-color: var(--zrd-accent);
+    }
+    .mobile-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.3);
+      z-index: 499;
+    }
+
+    /* ─── Responsive: Grid Layout ─── */
+    @media (max-width: 1024px) {
+      .designer {
+        grid-template-columns: 180px 1fr 220px;
+      }
+    }
+    @media (max-width: 768px) {
+      .designer {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto auto 1fr auto;
+      }
+      .left-panel {
+        display: none;
+        position: fixed;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 260px;
+        z-index: 500;
+        box-shadow: 4px 0 20px rgba(0,0,0,0.2);
+      }
+      .left-panel.mobile-open {
+        display: block;
+      }
+      .right-panel {
+        display: none;
+        position: fixed;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: 280px;
+        z-index: 500;
+        box-shadow: -4px 0 20px rgba(0,0,0,0.2);
+      }
+      .right-panel.mobile-open {
+        display: block;
+      }
+    }
+
+    /* ─── Responsive: Top Toolbar ─── */
+    @media (max-width: 768px) {
+      .top-toolbar {
+        padding: 4px 8px;
+        gap: 4px;
+      }
+      .top-toolbar button {
+        padding: 3px 6px;
+        font-size: 11px;
+      }
+      .top-toolbar .report-name {
+        font-size: 12px;
+        max-width: 120px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .zoom-controls {
+        border-left: none;
+        padding-left: 0;
+        margin-left: 0;
+      }
+    }
+
+    /* ─── Responsive: Page Setup Bar ─── */
+    @media (max-width: 900px) {
+      .page-setup-bar {
+        gap: 6px;
+        padding: 4px 8px;
+      }
+      .page-setup-input {
+        width: 36px;
+      }
+      .page-setup-select {
+        max-width: 140px;
+      }
+    }
+    @media (max-width: 600px) {
+      .page-setup-bar {
+        font-size: 11px;
+      }
+      .page-setup-label {
+        display: none;
+      }
+    }
+
+    /* ─── Responsive: Toolbox Touch Targets ─── */
+    @media (max-width: 768px) {
+      .toolbox-item {
+        padding: 12px 10px;
+        min-height: 44px;
+      }
+      .toolbox-icon {
+        width: 32px;
+        height: 32px;
+        font-size: 13px;
+      }
+    }
+
+    /* ─── Responsive: Properties Panel ─── */
+    @media (max-width: 768px) {
+      .prop-label {
+        width: 60px;
+        font-size: 10px;
+      }
+      .prop-input {
+        font-size: 11px;
+        padding: 4px 4px;
+      }
+    }
+
+    /* ─── Responsive: Dialog ─── */
+    @media (max-width: 600px) {
+      .dialog {
+        min-width: auto;
+        max-width: calc(100vw - 32px);
+        margin: 16px;
+      }
+      .dialog-body {
+        padding: 12px;
+      }
+    }
+  `; }
+    // ─── Lifecycle ──────────────────────────────────────────────────
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.layout) {
+            this._layout = structuredClone(this.layout);
+        }
+        this._pushUndo();
+        this._onKeyDown = this._onKeyDown.bind(this);
+        this._onGlobalClick = this._onGlobalClick.bind(this);
+        document.addEventListener('keydown', this._onKeyDown);
+        document.addEventListener('click', this._onGlobalClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('keydown', this._onKeyDown);
+        document.removeEventListener('click', this._onGlobalClick);
+    }
+    updated(changed) {
+        if (changed.has('layout') && this.layout) {
+            this._layout = structuredClone(this.layout);
+        }
+        if (changed.has('dataSources') && this.dataSources.length > 0) {
+            // Sync dataSources into layout
+            this._layout = { ...this._layout, dataSources: this.dataSources };
+        }
+    }
+    // ─── Global click to dismiss context menu ──────────────────────
+    _onGlobalClick() {
+        if (this._contextMenu) {
+            this._contextMenu = null;
+            this.requestUpdate();
+        }
+    }
+    // ─── ID Generation ──────────────────────────────────────────────
+    _newId(prefix = 'el') {
+        return `${prefix}_${Date.now()}_${this._idCounter++}`;
+    }
+    // ─── Undo / Redo ────────────────────────────────────────────────
+    _pushUndo() {
+        this._undoStack = [...this._undoStack, JSON.stringify(this._layout)];
+        this._redoStack = [];
+        if (this._undoStack.length > 50)
+            this._undoStack = this._undoStack.slice(-50);
+    }
+    _undo() {
+        if (this._undoStack.length <= 1)
+            return;
+        const current = this._undoStack.pop();
+        this._redoStack = [...this._redoStack, current];
+        const prev = this._undoStack[this._undoStack.length - 1];
+        this._layout = JSON.parse(prev);
+        this._emitChange();
+    }
+    _redo() {
+        if (this._redoStack.length === 0)
+            return;
+        const next = this._redoStack.pop();
+        this._undoStack = [...this._undoStack, next];
+        this._layout = JSON.parse(next);
+        this._emitChange();
     }
     // ─── Change Emission ────────────────────────────────────────────
     _emitChange() {
@@ -939,10 +1492,17 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
                 el.x = Math.max(0, Math.round((orig.x + dxUnit) / snap) * snap);
                 el.y = Math.max(0, Math.round((orig.y + dyUnit) / snap) * snap);
             }
+            // Smart alignment guides
+            const primaryEl = elements.find(e => e.id === elementId);
+            const currentBand = this._layout.bands.find(b => b.id === bandId);
+            if (primaryEl && currentBand) {
+                this._calculateGuides(primaryEl, currentBand);
+            }
             this.requestUpdate();
         };
         const onUp = () => {
             this._drag = null;
+            this._guides = { x: [], y: [] };
             // Update originals for final positions
             this._commitChange();
             document.removeEventListener('mousemove', onMove);
@@ -1217,8 +1777,13 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
         return html `
       <div class="designer">
         ${this._renderTopToolbar()}
+        ${this._renderPageSetupBar()}
+
+        ${this._mobileLeftOpen || this._mobileRightOpen ? html `
+          <div class="mobile-overlay" @click=${() => { this._mobileLeftOpen = false; this._mobileRightOpen = false; }}></div>
+        ` : nothing}
 
-        <div class="left-panel">
+        <div class="left-panel ${this._mobileLeftOpen ? 'mobile-open' : ''}">
           <div class="panel-tabs">
             <div class="panel-tab ${this._activePanel === 'toolbox' ? 'active' : ''}"
                  @click=${() => this._activePanel = 'toolbox'}>Toolbox</div>
@@ -1241,6 +1806,16 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
                 this.requestUpdate();
             }
         }}>
+          <div class="mobile-panel-toggles">
+            <button class="mobile-toggle-btn ${this._mobileLeftOpen ? 'active' : ''}"
+                    @click=${(e) => { e.stopPropagation(); this._mobileLeftOpen = !this._mobileLeftOpen; this._mobileRightOpen = false; }}>
+              Toolbox
+            </button>
+            <button class="mobile-toggle-btn ${this._mobileRightOpen ? 'active' : ''}"
+                    @click=${(e) => { e.stopPropagation(); this._mobileRightOpen = !this._mobileRightOpen; this._mobileLeftOpen = false; }}>
+              Properties
+            </button>
+          </div>
           <div class="canvas-scroll-container" style="transform:scale(${this._zoom});padding:20px;">
             <div class="canvas-wrapper" style="width:${pageWidthPx}px;">
               ${this._renderRuler(pageWidthPx)}
@@ -1258,11 +1833,12 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
           </div>
         </div>
 
-        <div class="right-panel">
+        <div class="right-panel ${this._mobileRightOpen ? 'mobile-open' : ''}">
           ${this._renderPropertiesPanel()}
         </div>
       </div>
       ${this._renderContextMenu()}
+      ${this._renderPageSetupDialog()}
     `;
     }
     // ─── Ruler ────────────────────────────────────────────────────
@@ -1308,6 +1884,476 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
       </div>
     `;
     }
+    // ─── Page Setup Dialog ──────────────────────────────────────
+    _openPageSetup() {
+        // Find matching preset
+        const layout = this._layout;
+        const match = PAGE_SIZES.find(p => Math.abs(p.pageSize.width - layout.pageSize.width) < 0.5 &&
+            Math.abs(p.pageSize.height - layout.pageSize.height) < 0.5 &&
+            p.pageSize.unit === layout.pageSize.unit);
+        this._pageSetupDraft = {
+            presetId: match?.id || 'custom',
+            width: layout.pageSize.width,
+            height: layout.pageSize.height,
+            unit: layout.pageSize.unit,
+            marginTop: layout.margins.top,
+            marginRight: layout.margins.right,
+            marginBottom: layout.margins.bottom,
+            marginLeft: layout.margins.left,
+        };
+        this._showPageSetup = true;
+    }
+    _applyPageSetup() {
+        if (!this._pageSetupDraft)
+            return;
+        const d = this._pageSetupDraft;
+        this._layout = {
+            ...this._layout,
+            pageSize: { width: d.width, height: d.height, unit: d.unit },
+            margins: { top: d.marginTop, right: d.marginRight, bottom: d.marginBottom, left: d.marginLeft },
+        };
+        this._showPageSetup = false;
+        this._pageSetupDraft = null;
+        this._commitChange();
+    }
+    _onPresetChange(presetId) {
+        if (!this._pageSetupDraft)
+            return;
+        if (presetId === 'custom') {
+            this._pageSetupDraft = { ...this._pageSetupDraft, presetId: 'custom' };
+            return;
+        }
+        const preset = PAGE_SIZES.find(p => p.id === presetId);
+        if (!preset)
+            return;
+        this._pageSetupDraft = {
+            presetId,
+            width: preset.pageSize.width,
+            height: preset.pageSize.height,
+            unit: preset.pageSize.unit,
+            marginTop: preset.margins.top,
+            marginRight: preset.margins.right,
+            marginBottom: preset.margins.bottom,
+            marginLeft: preset.margins.left,
+        };
+    }
+    _toggleOrientation() {
+        if (!this._pageSetupDraft)
+            return;
+        const d = this._pageSetupDraft;
+        this._pageSetupDraft = {
+            ...d,
+            width: d.height,
+            height: d.width,
+            marginTop: d.marginLeft,
+            marginRight: d.marginTop,
+            marginBottom: d.marginRight,
+            marginLeft: d.marginBottom,
+            presetId: 'custom', // swapping breaks preset match
+        };
+    }
+    _renderPageSetupDialog() {
+        if (!this._showPageSetup || !this._pageSetupDraft)
+            return nothing;
+        const d = this._pageSetupDraft;
+        const isPortrait = d.height >= d.width;
+        // Mini preview scaling — fit into 120x120 box
+        const scale = Math.min(120 / d.width, 120 / d.height);
+        const pw = d.width * scale;
+        const ph = d.height * scale;
+        const mt = d.marginTop * scale;
+        const mr = d.marginRight * scale;
+        const mb = d.marginBottom * scale;
+        const ml = d.marginLeft * scale;
+        // Group presets by category
+        const categories = [
+            { label: 'Paper', cat: 'paper' },
+            { label: 'Receipt / POS', cat: 'receipt' },
+            { label: 'Labels', cat: 'label' },
+        ];
+        return html `
+      <div class="dialog-overlay" @click=${(e) => {
+            if (e.target.classList.contains('dialog-overlay')) {
+                this._showPageSetup = false;
+            }
+        }}>
+        <div class="dialog" @click=${(e) => e.stopPropagation()}>
+          <div class="dialog-header">
+            <span>Page Setup</span>
+            <button class="dialog-btn" @click=${() => { this._showPageSetup = false; }}>\u2715</button>
+          </div>
+          <div class="dialog-body">
+            <!-- Page size preset -->
+            <div class="dialog-row">
+              <span class="dialog-label">Page Size</span>
+              <select class="dialog-select" .value=${d.presetId}
+                      @change=${(e) => this._onPresetChange(e.target.value)}>
+                <option value="custom">Custom</option>
+                ${categories.map(c => html `
+                  <optgroup label=${c.label}>
+                    ${PAGE_SIZES.filter(p => p.category === c.cat).map(p => html `
+                      <option value=${p.id} ?selected=${d.presetId === p.id}>${p.name} (${p.pageSize.width}\u00D7${p.pageSize.height} ${p.pageSize.unit})</option>
+                    `)}
+                  </optgroup>
+                `)}
+              </select>
+            </div>
+
+            <!-- Orientation -->
+            <div class="dialog-row">
+              <span class="dialog-label">Orientation</span>
+              <div class="orientation-toggle">
+                <button class=${isPortrait ? 'active' : ''}
+                        @click=${() => { if (!isPortrait)
+            this._toggleOrientation(); }}>Portrait</button>
+                <button class=${!isPortrait ? 'active' : ''}
+                        @click=${() => { if (isPortrait)
+            this._toggleOrientation(); }}>Landscape</button>
+              </div>
+            </div>
+
+            <!-- Unit -->
+            <div class="dialog-row">
+              <span class="dialog-label">Unit</span>
+              <select class="dialog-select" style="max-width:100px;"
+                      .value=${d.unit}
+                      @change=${(e) => {
+            this._pageSetupDraft = { ...d, unit: e.target.value, presetId: 'custom' };
+        }}>
+                <option value="mm">mm</option>
+                <option value="in">in</option>
+                <option value="pt">pt</option>
+                <option value="px">px</option>
+              </select>
+            </div>
+
+            <!-- Width / Height -->
+            <div class="dialog-row">
+              <span class="dialog-label">Dimensions</span>
+              <label style="font-size:11px;color:var(--zrd-text-muted)">W
+                <input class="dialog-input" type="number" step="0.1" .value=${String(d.width)}
+                       @change=${(e) => {
+            this._pageSetupDraft = { ...d, width: parseFloat(e.target.value) || d.width, presetId: 'custom' };
+        }} />
+              </label>
+              <label style="font-size:11px;color:var(--zrd-text-muted)">H
+                <input class="dialog-input" type="number" step="0.1" .value=${String(d.height)}
+                       @change=${(e) => {
+            this._pageSetupDraft = { ...d, height: parseFloat(e.target.value) || d.height, presetId: 'custom' };
+        }} />
+              </label>
+              <span style="font-size:11px;color:var(--zrd-text-muted)">${d.unit}</span>
+            </div>
+
+            <!-- Margins -->
+            <div class="dialog-row" style="align-items:flex-start;">
+              <span class="dialog-label" style="margin-top:4px;">Margins</span>
+              <div class="dialog-group" style="flex:1;">
+                <label>Top
+                  <input type="number" step="0.1" .value=${String(d.marginTop)}
+                         @change=${(e) => {
+            this._pageSetupDraft = { ...d, marginTop: parseFloat(e.target.value) || 0 };
+        }} />
+                </label>
+                <label>Right
+                  <input type="number" step="0.1" .value=${String(d.marginRight)}
+                         @change=${(e) => {
+            this._pageSetupDraft = { ...d, marginRight: parseFloat(e.target.value) || 0 };
+        }} />
+                </label>
+                <label>Bottom
+                  <input type="number" step="0.1" .value=${String(d.marginBottom)}
+                         @change=${(e) => {
+            this._pageSetupDraft = { ...d, marginBottom: parseFloat(e.target.value) || 0 };
+        }} />
+                </label>
+                <label>Left
+                  <input type="number" step="0.1" .value=${String(d.marginLeft)}
+                         @change=${(e) => {
+            this._pageSetupDraft = { ...d, marginLeft: parseFloat(e.target.value) || 0 };
+        }} />
+                </label>
+              </div>
+            </div>
+
+            <!-- Preview -->
+            <div class="page-preview-box">
+              <div class="page-preview-page" style="width:${pw}px;height:${ph}px;">
+                <div class="page-preview-margin" style="top:${mt}px;right:${mr}px;bottom:${mb}px;left:${ml}px;"></div>
+              </div>
+            </div>
+          </div>
+          <div class="dialog-footer">
+            <button class="dialog-btn" @click=${() => { this._showPageSetup = false; }}>Cancel</button>
+            <button class="dialog-btn dialog-btn-primary" @click=${() => this._applyPageSetup()}>Apply</button>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    // ─── Band Menu Dropdown ──────────────────────────────────────
+    _renderBandMenu() {
+        const existingTypes = new Set(this._layout.bands.map(b => b.type));
+        // Band types that can only appear once
+        const singleBands = ['reportHeader', 'pageHeader', 'columnHeader', 'detail', 'columnFooter', 'pageFooter', 'reportFooter'];
+        // Group header/footer can have multiples
+        const allBands = ['reportHeader', 'pageHeader', 'groupHeader', 'columnHeader', 'detail', 'columnFooter', 'groupFooter', 'pageFooter', 'reportFooter'];
+        return html `
+      <div class="overlay-dismiss" @click=${() => { this._showBandMenu = false; }}></div>
+      <div class="band-menu">
+        ${allBands.map(type => {
+            const isSingle = singleBands.includes(type);
+            const alreadyExists = existingTypes.has(type);
+            const disabled = isSingle && alreadyExists;
+            return html `
+            <div class="band-menu-item ${disabled ? 'disabled' : ''}"
+                 @click=${() => {
+                if (!disabled) {
+                    this._addBand(type);
+                    this._showBandMenu = false;
+                }
+            }}>
+              <span>${BAND_ICONS[type]}</span>
+              <span>${BAND_LABELS[type]}</span>
+              ${disabled ? html `<span style="font-size:10px;color:var(--zrd-text-muted);margin-left:auto;">(exists)</span>` : nothing}
+            </div>
+          `;
+        })}
+      </div>
+    `;
+    }
+    // ─── Page Setup Bar (always visible) ──────────────────────────
+    _renderPageSetupBar() {
+        const ps = this._layout.pageSize;
+        const m = this._layout.margins;
+        const isPortrait = ps.height > ps.width;
+        const currentPreset = PAGE_SIZES.find(p => Math.abs(p.pageSize.width - ps.width) < 0.5 && Math.abs(p.pageSize.height - ps.height) < 0.5);
+        const categories = [
+            { key: 'paper', label: 'Paper' },
+            { key: 'receipt', label: 'Receipt / POS' },
+            { key: 'label', label: 'Labels' },
+        ];
+        return html `
+      <div class="page-setup-bar">
+        <!-- Page Size Dropdown -->
+        <div class="page-setup-group">
+          <span class="page-setup-label">Page:</span>
+          <select class="page-setup-select" @change=${(e) => this._onPageSizePresetChange(e.target.value)}>
+            ${categories.map(cat => html `
+              <optgroup label="${cat.label}">
+                ${PAGE_SIZES.filter(p => p.category === cat.key).map(p => html `
+                  <option value="${p.id}" ?selected=${currentPreset?.id === p.id}>${p.name} (${p.pageSize.width}\u00D7${p.pageSize.height})</option>
+                `)}
+              </optgroup>
+            `)}
+            <optgroup label="Custom">
+              <option value="custom" ?selected=${!currentPreset}>Custom (${ps.width}\u00D7${ps.height} ${ps.unit})</option>
+            </optgroup>
+          </select>
+        </div>
+
+        <div class="page-setup-separator"></div>
+
+        <!-- Orientation -->
+        <div class="page-setup-group">
+          <span class="page-setup-label">Orientation:</span>
+          <button class="orientation-btn ${isPortrait ? 'active' : ''}"
+                  title="Portrait"
+                  @click=${() => this._setOrientation('portrait')}>
+            <span style="display:inline-block;width:10px;height:14px;border:1.5px solid currentColor;border-radius:1px;"></span>
+          </button>
+          <button class="orientation-btn ${!isPortrait ? 'active' : ''}"
+                  title="Landscape"
+                  @click=${() => this._setOrientation('landscape')}>
+            <span style="display:inline-block;width:14px;height:10px;border:1.5px solid currentColor;border-radius:1px;"></span>
+          </button>
+        </div>
+
+        <div class="page-setup-separator"></div>
+
+        <!-- Margins -->
+        <div class="page-setup-group">
+          <span class="page-setup-label">Margins:</span>
+          <span class="page-setup-label">T</span>
+          <input class="page-setup-input" type="number" step="0.5" min="0"
+                 .value=${String(m.top)}
+                 @change=${(e) => this._updateMargin('top', Number(e.target.value))} />
+          <span class="page-setup-label">R</span>
+          <input class="page-setup-input" type="number" step="0.5" min="0"
+                 .value=${String(m.right)}
+                 @change=${(e) => this._updateMargin('right', Number(e.target.value))} />
+          <span class="page-setup-label">B</span>
+          <input class="page-setup-input" type="number" step="0.5" min="0"
+                 .value=${String(m.bottom)}
+                 @change=${(e) => this._updateMargin('bottom', Number(e.target.value))} />
+          <span class="page-setup-label">L</span>
+          <input class="page-setup-input" type="number" step="0.5" min="0"
+                 .value=${String(m.left)}
+                 @change=${(e) => this._updateMargin('left', Number(e.target.value))} />
+          <span class="page-setup-label">${ps.unit}</span>
+        </div>
+
+        <div class="page-setup-separator"></div>
+
+        <!-- Unit -->
+        <div class="page-setup-group">
+          <span class="page-setup-label">Unit:</span>
+          <select class="page-setup-select" style="width:60px;"
+                  @change=${(e) => this._changeUnit(e.target.value)}>
+            <option value="mm" ?selected=${ps.unit === 'mm'}>mm</option>
+            <option value="in" ?selected=${ps.unit === 'in'}>in</option>
+            <option value="pt" ?selected=${ps.unit === 'pt'}>pt</option>
+            <option value="px" ?selected=${ps.unit === 'px'}>px</option>
+          </select>
+        </div>
+      </div>
+    `;
+    }
+    _onPageSizePresetChange(presetId) {
+        if (presetId === 'custom')
+            return;
+        const preset = PAGE_SIZES.find(p => p.id === presetId);
+        if (!preset)
+            return;
+        this._layout.pageSize = { ...preset.pageSize };
+        this._layout.margins = { ...preset.margins };
+        this._commitChange();
+    }
+    _setOrientation(orientation) {
+        const ps = this._layout.pageSize;
+        const isPortrait = ps.height > ps.width;
+        if ((orientation === 'portrait' && !isPortrait) || (orientation === 'landscape' && isPortrait)) {
+            const tmp = ps.width;
+            ps.width = ps.height;
+            ps.height = tmp;
+            // Also swap horizontal/vertical margins
+            const m = this._layout.margins;
+            const tmpT = m.top;
+            const tmpB = m.bottom;
+            m.top = m.left;
+            m.bottom = m.right;
+            m.left = tmpT;
+            m.right = tmpB;
+            this._commitChange();
+        }
+    }
+    _updateMargin(side, value) {
+        this._layout.margins[side] = Math.max(0, value);
+        this._commitChange();
+    }
+    _changeUnit(newUnit) {
+        // Convert all dimensions from old unit to new unit via px
+        const oldUnit = this._layout.pageSize.unit;
+        if (oldUnit === newUnit)
+            return;
+        const convert = (val) => {
+            // old unit -> px -> new unit
+            const px = toPx(val, oldUnit);
+            switch (newUnit) {
+                case 'mm': return Math.round((px * 25.4 / 96) * 100) / 100;
+                case 'in': return Math.round((px / 96) * 1000) / 1000;
+                case 'pt': return Math.round((px * 72 / 96) * 100) / 100;
+                case 'px': return Math.round(px);
+                default: return val;
+            }
+        };
+        this._layout.pageSize.width = convert(this._layout.pageSize.width);
+        this._layout.pageSize.height = convert(this._layout.pageSize.height);
+        this._layout.pageSize.unit = newUnit;
+        this._layout.margins.top = convert(this._layout.margins.top);
+        this._layout.margins.right = convert(this._layout.margins.right);
+        this._layout.margins.bottom = convert(this._layout.margins.bottom);
+        this._layout.margins.left = convert(this._layout.margins.left);
+        // Convert band heights and element positions/sizes
+        for (const band of this._layout.bands) {
+            band.height = convert(band.height);
+            for (const el of band.elements) {
+                el.x = convert(el.x);
+                el.y = convert(el.y);
+                el.width = convert(el.width);
+                el.height = convert(el.height);
+            }
+        }
+        this._commitChange();
+    }
+    // ─── Smart Alignment Guides ──────────────────────────────────
+    _calculateGuides(movingEl, band) {
+        const SNAP_THRESHOLD = 2; // layout units
+        const guidesX = [];
+        const guidesY = [];
+        const movLeft = movingEl.x;
+        const movRight = movingEl.x + movingEl.width;
+        const movCenterX = movingEl.x + movingEl.width / 2;
+        const movTop = movingEl.y;
+        const movBottom = movingEl.y + movingEl.height;
+        const movCenterY = movingEl.y + movingEl.height / 2;
+        // Check against other elements in the same band
+        for (const other of band.elements) {
+            if (this._selectedElementIds.has(other.id))
+                continue;
+            const edges = [
+                { val: other.x, movEdges: [movLeft, movRight, movCenterX] },
+                { val: other.x + other.width, movEdges: [movLeft, movRight, movCenterX] },
+                { val: other.x + other.width / 2, movEdges: [movCenterX] },
+            ];
+            for (const edge of edges) {
+                for (const me of edge.movEdges) {
+                    if (Math.abs(me - edge.val) <= SNAP_THRESHOLD) {
+                        guidesX.push(edge.val);
+                        // Snap the element
+                        const diff = edge.val - me;
+                        if (me === movLeft)
+                            movingEl.x += diff;
+                        else if (me === movRight)
+                            movingEl.x += diff;
+                        else if (me === movCenterX)
+                            movingEl.x += diff;
+                    }
+                }
+            }
+            const yEdges = [
+                { val: other.y, movEdges: [movTop, movBottom, movCenterY] },
+                { val: other.y + other.height, movEdges: [movTop, movBottom, movCenterY] },
+                { val: other.y + other.height / 2, movEdges: [movCenterY] },
+            ];
+            for (const edge of yEdges) {
+                for (const me of edge.movEdges) {
+                    if (Math.abs(me - edge.val) <= SNAP_THRESHOLD) {
+                        guidesY.push(edge.val);
+                        const diff = edge.val - me;
+                        if (me === movTop)
+                            movingEl.y += diff;
+                        else if (me === movBottom)
+                            movingEl.y += diff;
+                        else if (me === movCenterY)
+                            movingEl.y += diff;
+                    }
+                }
+            }
+        }
+        // Check against band center
+        const bandCenterX = (this._layout.pageSize.width - this._layout.margins.left - this._layout.margins.right) / 2 + this._layout.margins.left;
+        if (Math.abs(movCenterX - bandCenterX) <= SNAP_THRESHOLD) {
+            guidesX.push(bandCenterX);
+            movingEl.x += bandCenterX - movCenterX;
+        }
+        // Check against page margins
+        const ml = this._layout.margins.left;
+        const mr = this._layout.pageSize.width - this._layout.margins.right;
+        if (Math.abs(movLeft - ml) <= SNAP_THRESHOLD) {
+            guidesX.push(ml);
+            movingEl.x = ml;
+        }
+        if (Math.abs(movRight - mr) <= SNAP_THRESHOLD) {
+            guidesX.push(mr);
+            movingEl.x = mr - movingEl.width;
+        }
+        // Deduplicate
+        this._guides = {
+            x: [...new Set(guidesX)],
+            y: [...new Set(guidesY)],
+        };
+    }
     // ─── Top Toolbar ──────────────────────────────────────────────
     _renderTopToolbar() {
         return html `
@@ -1329,28 +2375,31 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
             : html `<span class="report-name" @click=${this._startEditingReportName}
                        title="Click to edit report name">${this._layout.name}</span>`}
         <span class="spacer"></span>
-        <button @click=${this._undo} ?disabled=${this._undoStack.length <= 1} title="Ctrl+Z">Undo</button>
-        <button @click=${this._redo} ?disabled=${this._redoStack.length === 0} title="Ctrl+Y">Redo</button>
-        <button @click=${() => this._addBand('groupHeader')}>+ Group</button>
-        <button @click=${() => this._addBand('detail')}>+ Detail</button>
+        <button @click=${this._undo} ?disabled=${this._undoStack.length <= 1} title="Undo (Ctrl+Z)">\u21A9 Undo</button>
+        <button @click=${this._redo} ?disabled=${this._redoStack.length === 0} title="Redo (Ctrl+Y)">\u21AA Redo</button>
+        <button @click=${this._openPageSetup} title="Page size, margins, orientation">\u2699 Page Setup</button>
+        <div class="band-menu-wrapper">
+          <button @click=${(e) => { e.stopPropagation(); this._showBandMenu = !this._showBandMenu; }}>+ Band \u25BE</button>
+          ${this._showBandMenu ? this._renderBandMenu() : nothing}
+        </div>
         <button @click=${() => {
             this.dispatchEvent(new CustomEvent('save', {
                 detail: { layout: structuredClone(this._layout) },
                 bubbles: true, composed: true,
             }));
-        }}>Save</button>
+        }}>\uD83D\uDCBE Save</button>
         <button @click=${() => {
             this.showPreview = !this.showPreview;
             this.dispatchEvent(new CustomEvent('toggle-preview', {
                 detail: { show: this.showPreview },
                 bubbles: true, composed: true,
             }));
-        }}>${this.showPreview ? 'Hide Preview' : 'Preview'}</button>
+        }}>\uD83D\uDC41 ${this.showPreview ? 'Hide Preview' : 'Preview'}</button>
 
         <!-- Zoom Controls -->
         <div class="zoom-controls">
-          <button class="zoom-btn" @click=${this._zoomOut} ?disabled=${this._zoom <= 0.5} title="Zoom Out">-</button>
-          <span class="zoom-label">${Math.round(this._zoom * 100)}%</span>
+          <button class="zoom-btn" @click=${this._zoomOut} ?disabled=${this._zoom <= 0.5} title="Zoom Out">\u2212</button>
+          <span class="zoom-label" style="cursor:pointer;" @click=${this._zoomFit} title="Click to reset to 100%">${Math.round(this._zoom * 100)}%</span>
           <button class="zoom-btn" @click=${this._zoomIn} ?disabled=${this._zoom >= 4} title="Zoom In">+</button>
           <button @click=${this._zoomFit} title="Reset zoom to 100%">100%</button>
           <button @click=${() => { this._zoom = 1.5; }} title="Zoom 150%">150%</button>
@@ -1433,7 +2482,12 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
             this._activePanel = 'properties';
             this.requestUpdate();
         }}>
+          ${band.elements.length === 0 ? html `<div class="band-empty-hint">Drag elements from Toolbox or drop fields from Data panel</div>` : nothing}
           ${band.elements.map(el => this._renderDesignElement(el, band.id))}
+          ${this._selectedBandId === band.id ? html `
+            ${this._guides.x.map(x => html `<div class="guide-line-v" style="left:${this._toPx(x)}px;"></div>`)}
+            ${this._guides.y.map(y => html `<div class="guide-line-h" style="top:${this._toPx(y)}px;"></div>`)}
+          ` : nothing}
         </div>
         <div class="band-resize-handle ${this._bandResize?.bandId === band.id ? 'active' : ''}"
              @mousedown=${(e) => this._onBandResizeMouseDown(e, band.id)}>
@@ -1585,87 +2639,121 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
     _renderPropertiesPanel() {
         const el = this._getSelectedElement();
         const unitLabel = this._unit;
-        // Multiple selection info
+        const collapsed = this._collapsedSections;
+        const sectionHeader = (key, title) => html `
+      <div class="prop-section-header" @click=${() => this._toggleSection(key)}>
+        <h4>${title}</h4>
+        <span class="collapse-icon ${collapsed.has(key) ? 'collapsed' : ''}">\u25BE</span>
+      </div>
+    `;
+        // ── Multiple selection ──
         if (this._selectedElementIds.size > 1) {
             return html `
         <div class="prop-section">
-          <h4>Multiple Selection</h4>
-          <p style="font-size:12px;color:var(--zrd-text-muted);">${this._selectedElementIds.size} elements selected</p>
-          <p style="font-size:11px;color:var(--zrd-text-muted);margin-top:4px;">Use Ctrl+C/V to copy/paste, Del to delete.</p>
+          <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
+            <span class="element-type-badge" style="background:#fff3e0;color:#e65100;">\u2750 ${this._selectedElementIds.size} selected</span>
+          </div>
+          <p style="font-size:11px;color:var(--zrd-text-muted);">Use Ctrl+C/V to copy/paste, Del to delete.</p>
         </div>
-        <div class="prop-section" style="margin-top:20px;">
+        <div class="prop-section">
           <button class="btn-danger" @click=${this._deleteSelectedElements}>Delete All Selected</button>
         </div>
       `;
         }
-        // Band properties (Section Expert — Crystal Reports style)
+        // ── Band properties ──
         if (!el && this._selectedBandId) {
             const band = this._layout.bands.find(b => b.id === this._selectedBandId);
             if (!band)
                 return html `<div style="padding:12px;color:var(--zrd-text-muted)">Select an element</div>`;
             return html `
         <div class="prop-section">
-          <h4>${BAND_ICONS[band.type]} ${BAND_LABELS[band.type]}</h4>
-          <div style="font-size:11px;color:var(--zrd-text-muted);margin-bottom:8px;">${band.elements.length} elements</div>
+          <div style="display:flex;align-items:center;gap:8px;">
+            <span style="font-size:16px;">${BAND_ICONS[band.type]}</span>
+            <div>
+              <div style="font-weight:600;font-size:13px;">${BAND_LABELS[band.type]}</div>
+              <div style="font-size:10px;color:var(--zrd-text-muted);">${band.elements.length} elements</div>
+            </div>
+          </div>
         </div>
 
-        <div class="prop-section">
-          <h4>Dimensions</h4>
-          <div class="prop-row">
-            <span class="prop-label">Height</span>
-            <input class="prop-input" type="number" step="0.5" .value=${String(band.height)}
-                   @change=${(e) => this._updateBandHeight(band.id, Number(e.target.value))} />
-            <span class="prop-unit">${unitLabel}</span>
-          </div>
-          <div class="prop-row">
-            <span class="prop-label">Background</span>
-            <input class="prop-input" type="color" .value=${band.backgroundColor || '#ffffff'}
-                   @change=${(e) => { band.backgroundColor = e.target.value; this._commitChange(); }} />
+        <div class="prop-section" data-section="position">
+          ${sectionHeader('band-dim', 'Dimensions')}
+          <div class="prop-section-body ${collapsed.has('band-dim') ? 'collapsed' : ''}">
+            <div class="prop-row">
+              <span class="prop-label">Height</span>
+              <div style="display:flex;align-items:center;gap:4px;">
+                <input class="prop-input" type="number" step="0.5" .value=${String(band.height)}
+                       @change=${(e) => this._updateBandHeight(band.id, Number(e.target.value))} />
+                <span class="prop-unit">${unitLabel}</span>
+              </div>
+            </div>
+            <div class="prop-row">
+              <span class="prop-label">Background</span>
+              <div class="prop-color-row">
+                <div class="prop-color-swatch" style="background:${band.backgroundColor || '#ffffff'}">
+                  <input type="color" .value=${band.backgroundColor || '#ffffff'}
+                         @change=${(e) => { band.backgroundColor = e.target.value; this._commitChange(); }} />
+                </div>
+                <input class="prop-color-hex" .value=${band.backgroundColor || '#ffffff'}
+                       @change=${(e) => { band.backgroundColor = e.target.value; this._commitChange(); }} />
+              </div>
+            </div>
           </div>
         </div>
 
         ${band.type === 'detail' || band.type === 'groupHeader' || band.type === 'groupFooter' ? html `
-          <div class="prop-section">
-            <h4>Data</h4>
-            <div class="prop-row">
-              <span class="prop-label">DataSource</span>
-              <select class="prop-input" .value=${band.dataSource || ''}
-                      @change=${(e) => { band.dataSource = e.target.value; this._commitChange(); }}>
-                <option value="">-- none --</option>
-                ${this._layout.dataSources.map(ds => html `<option value="${ds.id}">${ds.name}</option>`)}
-              </select>
-            </div>
-            ${band.type === 'groupHeader' || band.type === 'groupFooter' ? html `
+          <div class="prop-section" data-section="data">
+            ${sectionHeader('band-data', 'Data')}
+            <div class="prop-section-body ${collapsed.has('band-data') ? 'collapsed' : ''}">
               <div class="prop-row">
-                <span class="prop-label">Group By</span>
-                <input class="prop-input" .value=${band.groupField || ''}
-                       placeholder="field name"
-                       @change=${(e) => { band.groupField = e.target.value; this._commitChange(); }} />
+                <span class="prop-label">DataSource</span>
+                <select class="prop-input" .value=${band.dataSource || ''}
+                        @change=${(e) => { band.dataSource = e.target.value; this._commitChange(); }}>
+                  <option value="">-- none --</option>
+                  ${this._layout.dataSources.map(ds => html `<option value="${ds.id}">${ds.name}</option>`)}
+                </select>
               </div>
-            ` : nothing}
+              ${band.type === 'groupHeader' || band.type === 'groupFooter' ? html `
+                <div class="prop-row">
+                  <span class="prop-label">Group By</span>
+                  <input class="prop-input" .value=${band.groupField || ''}
+                         placeholder="field name"
+                         @change=${(e) => { band.groupField = e.target.value; this._commitChange(); }} />
+                </div>
+              ` : nothing}
+            </div>
           </div>
         ` : nothing}
 
-        <div class="prop-section">
-          <h4>Section Expert</h4>
-          <div class="prop-row">
-            <span class="prop-label">Visible</span>
-            <input type="checkbox" .checked=${band.visible !== false}
-                   @change=${(e) => { band.visible = e.target.checked; this._commitChange(); }} />
-          </div>
-          <div class="prop-row">
-            <span class="prop-label">Keep Together</span>
-            <input type="checkbox" .checked=${band.keepTogether === true}
-                   @change=${(e) => { band.keepTogether = e.target.checked; this._commitChange(); }} />
-          </div>
-          <div class="prop-row">
-            <span class="prop-label">Repeat Every Page</span>
-            <input type="checkbox" .checked=${band.repeatOnEveryPage === true}
-                   @change=${(e) => { band.repeatOnEveryPage = e.target.checked; this._commitChange(); }} />
+        <div class="prop-section" data-section="visibility">
+          ${sectionHeader('band-expert', 'Section Expert')}
+          <div class="prop-section-body ${collapsed.has('band-expert') ? 'collapsed' : ''}">
+            <div class="prop-row">
+              <span class="prop-label">Visible</span>
+              <div class="prop-toggle">
+                <div class="prop-switch ${band.visible !== false ? 'active' : ''}"
+                     @click=${() => { band.visible = !(band.visible !== false); this._commitChange(); }}></div>
+                <span style="font-size:11px;color:var(--zrd-text-muted);">${band.visible !== false ? 'On' : 'Off'}</span>
+              </div>
+            </div>
+            <div class="prop-row">
+              <span class="prop-label">Keep Together</span>
+              <div class="prop-toggle">
+                <div class="prop-switch ${band.keepTogether === true ? 'active' : ''}"
+                     @click=${() => { band.keepTogether = !band.keepTogether; this._commitChange(); }}></div>
+              </div>
+            </div>
+            <div class="prop-row">
+              <span class="prop-label">Repeat Page</span>
+              <div class="prop-toggle">
+                <div class="prop-switch ${band.repeatOnEveryPage === true ? 'active' : ''}"
+                     @click=${() => { band.repeatOnEveryPage = !band.repeatOnEveryPage; this._commitChange(); }}></div>
+              </div>
+            </div>
           </div>
         </div>
 
-        <div class="prop-section" style="margin-top:16px;">
+        <div class="prop-section">
           <button class="btn-danger" @click=${() => {
                 this._layout.bands = this._layout.bands.filter(b => b.id !== band.id);
                 this._selectedBandId = null;
@@ -1674,246 +2762,341 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
         </div>
       `;
         }
+        // ── Nothing selected — help card ──
         if (!el)
-            return html `<div style="padding:12px;color:var(--zrd-text-muted)">Select an element to edit its properties</div>`;
-        return html `
-      <div class="prop-section">
-        <h4>Position (${unitLabel})</h4>
-        <div class="prop-row">
-          <span class="prop-label">X</span>
-          <input class="prop-input" type="number" step="0.5" .value=${String(el.x)}
-                 @change=${(e) => this._updateElementProp('x', Number(e.target.value))} />
-          <span class="prop-unit">${unitLabel}</span>
-        </div>
-        <div class="prop-row">
-          <span class="prop-label">Y</span>
-          <input class="prop-input" type="number" step="0.5" .value=${String(el.y)}
-                 @change=${(e) => this._updateElementProp('y', Number(e.target.value))} />
-          <span class="prop-unit">${unitLabel}</span>
-        </div>
-        <div class="prop-row">
-          <span class="prop-label">Width</span>
-          <input class="prop-input" type="number" step="0.5" .value=${String(el.width)}
-                 @change=${(e) => this._updateElementProp('width', Number(e.target.value))} />
-          <span class="prop-unit">${unitLabel}</span>
-        </div>
-        <div class="prop-row">
-          <span class="prop-label">Height</span>
-          <input class="prop-input" type="number" step="0.5" .value=${String(el.height)}
-                 @change=${(e) => this._updateElementProp('height', Number(e.target.value))} />
-          <span class="prop-unit">${unitLabel}</span>
+            return html `
+      <div class="help-card">
+        <h4>\uD83C\uDFAF Quick Start</h4>
+        <div>1. Choose page size in the bar above</div>
+        <div>2. Drag elements from Toolbox (left panel)</div>
+        <div>3. Click any element to edit properties (here)</div>
+        <div>4. Use Preview button to see the final result</div>
+        <div class="help-card-section">
+          <h4>\u2328 Shortcuts</h4>
+          <div><kbd>Ctrl+Z</kbd> Undo &nbsp; <kbd>Ctrl+Y</kbd> Redo</div>
+          <div><kbd>Delete</kbd> Remove selected</div>
+          <div><kbd>Ctrl+C</kbd> / <kbd>Ctrl+V</kbd> Copy / Paste</div>
+          <div><kbd>Ctrl+Scroll</kbd> Zoom</div>
+          <div><kbd>Shift+Click</kbd> Multi-select</div>
         </div>
       </div>
+    `;
+        // ── Single element selected ──
+        const typeBadgeColors = {
+            text: 'background:#e3f2fd;color:#1565c0;',
+            field: 'background:#e8f5e9;color:#2e7d32;',
+            image: 'background:#f3e5f5;color:#7b1fa2;',
+            line: 'background:#eceff1;color:#546e7a;',
+            rect: 'background:#eceff1;color:#546e7a;',
+            barcode: 'background:#fff3e0;color:#e65100;',
+            pageNumber: 'background:#fce4ec;color:#c62828;',
+            currentDate: 'background:#fff8e1;color:#f57f17;',
+        };
+        const badgeStyle = typeBadgeColors[el.type] || 'background:#f5f5f5;color:#333;';
+        return html `
+      <!-- Element type badge -->
+      <div class="prop-section" style="display:flex;align-items:center;gap:8px;">
+        <span class="element-type-badge" style="${badgeStyle}">${ELEMENT_TYPE_ICONS[el.type] || '?'} ${el.type}</span>
+      </div>
 
-      <div class="prop-section">
-        <h4>Z-Order</h4>
-        <div class="z-order-buttons">
-          <button class="btn-small" @click=${() => this._changeZOrder(el.id, this._selectedBandId, 'front')} title="Bring to Front">\u2B06 Front</button>
-          <button class="btn-small" @click=${() => this._changeZOrder(el.id, this._selectedBandId, 'forward')} title="Bring Forward">\u2191 Fwd</button>
-          <button class="btn-small" @click=${() => this._changeZOrder(el.id, this._selectedBandId, 'backward')} title="Send Backward">\u2193 Bwd</button>
-          <button class="btn-small" @click=${() => this._changeZOrder(el.id, this._selectedBandId, 'back')} title="Send to Back">\u2B07 Back</button>
+      <!-- Position -->
+      <div class="prop-section" data-section="position">
+        ${sectionHeader('el-pos', 'Position')}
+        <div class="prop-section-body ${collapsed.has('el-pos') ? 'collapsed' : ''}">
+          <div class="prop-grid-2x2">
+            <div class="prop-grid-item">
+              <span class="prop-grid-label">X</span>
+              <input type="number" step="0.5" .value=${String(el.x)}
+                     @change=${(e) => this._updateElementProp('x', Number(e.target.value))} />
+              <span class="prop-unit">${unitLabel}</span>
+            </div>
+            <div class="prop-grid-item">
+              <span class="prop-grid-label">Y</span>
+              <input type="number" step="0.5" .value=${String(el.y)}
+                     @change=${(e) => this._updateElementProp('y', Number(e.target.value))} />
+              <span class="prop-unit">${unitLabel}</span>
+            </div>
+            <div class="prop-grid-item">
+              <span class="prop-grid-label">W</span>
+              <input type="number" step="0.5" .value=${String(el.width)}
+                     @change=${(e) => this._updateElementProp('width', Number(e.target.value))} />
+              <span class="prop-unit">${unitLabel}</span>
+            </div>
+            <div class="prop-grid-item">
+              <span class="prop-grid-label">H</span>
+              <input type="number" step="0.5" .value=${String(el.height)}
+                     @change=${(e) => this._updateElementProp('height', Number(e.target.value))} />
+              <span class="prop-unit">${unitLabel}</span>
+            </div>
+          </div>
         </div>
       </div>
 
-      <div class="prop-section">
-        <h4>Style</h4>
-        <div class="prop-row">
-          <span class="prop-label">Font Size</span>
-          <input class="prop-input" type="number" .value=${String(el.style?.fontSize || 10)}
-                 @change=${(e) => this._updateElementStyle('fontSize', Number(e.target.value))} />
-        </div>
-        <div class="prop-row">
-          <span class="prop-label">Font</span>
-          <select class="prop-input" .value=${el.style?.fontFamily || 'Arial'}
-                  @change=${(e) => this._updateElementStyle('fontFamily', e.target.value)}>
-            <option>Arial</option><option>Times New Roman</option><option>Courier New</option>
-            <option>Verdana</option><option>Georgia</option><option>Helvetica</option>
-          </select>
-        </div>
-        <div class="prop-row">
-          <span class="prop-label">Bold</span>
-          <input type="checkbox" .checked=${el.style?.fontWeight === 'bold'}
-                 @change=${(e) => this._updateElementStyle('fontWeight', e.target.checked ? 'bold' : 'normal')} />
-        </div>
-        <div class="prop-row">
-          <span class="prop-label">Align</span>
-          <select class="prop-input" .value=${el.style?.textAlign || 'left'}
-                  @change=${(e) => this._updateElementStyle('textAlign', e.target.value)}>
-            <option>left</option><option>center</option><option>right</option>
-          </select>
-        </div>
-        <div class="prop-row">
-          <span class="prop-label">Color</span>
-          <input class="prop-input" type="color" .value=${el.style?.color || '#333333'}
-                 @change=${(e) => this._updateElementStyle('color', e.target.value)} />
-        </div>
-        <div class="prop-row">
-          <span class="prop-label">Bg Color</span>
-          <input class="prop-input" type="color" .value=${el.style?.backgroundColor || '#ffffff'}
-                 @change=${(e) => this._updateElementStyle('backgroundColor', e.target.value)} />
-        </div>
-        <div class="prop-row">
-          <span class="prop-label">Italic</span>
-          <input type="checkbox" .checked=${el.style?.fontStyle === 'italic'}
-                 @change=${(e) => this._updateElementStyle('fontStyle', e.target.checked ? 'italic' : 'normal')} />
-        </div>
-        <div class="prop-row">
-          <span class="prop-label">Underline</span>
-          <input type="checkbox" .checked=${el.style?.textDecoration === 'underline'}
-                 @change=${(e) => this._updateElementStyle('textDecoration', e.target.checked ? 'underline' : 'none')} />
-        </div>
-        <div class="prop-row">
-          <span class="prop-label">V.Align</span>
-          <select class="prop-input" .value=${el.style?.verticalAlign || 'top'}
-                  @change=${(e) => this._updateElementStyle('verticalAlign', e.target.value)}>
-            <option>top</option><option>middle</option><option>bottom</option>
-          </select>
-        </div>
-        <div class="prop-row">
-          <span class="prop-label">Border</span>
-          <input class="prop-input" .value=${el.style?.borderBottom || ''}
-                 placeholder="1px solid #ccc"
-                 @change=${(e) => {
+      <!-- Style -->
+      <div class="prop-section" data-section="style">
+        ${sectionHeader('el-style', 'Style')}
+        <div class="prop-section-body ${collapsed.has('el-style') ? 'collapsed' : ''}">
+          <!-- Font family + size -->
+          <div class="prop-font-row">
+            <select class="prop-input" .value=${el.style?.fontFamily || 'Arial'}
+                    @change=${(e) => this._updateElementStyle('fontFamily', e.target.value)}>
+              <option>Arial</option><option>Times New Roman</option><option>Courier New</option>
+              <option>Verdana</option><option>Georgia</option><option>Helvetica</option>
+            </select>
+            <input class="prop-input" type="number" .value=${String(el.style?.fontSize || 10)}
+                   @change=${(e) => this._updateElementStyle('fontSize', Number(e.target.value))} />
+          </div>
+
+          <!-- Bold / Italic / Underline segmented -->
+          <div class="prop-row" style="grid-template-columns:68px 1fr;">
+            <span class="prop-label">Format</span>
+            <div class="prop-segmented">
+              <button class="prop-seg-btn ${el.style?.fontWeight === 'bold' ? 'active' : ''}" style="font-weight:bold;"
+                      @click=${() => this._updateElementStyle('fontWeight', el.style?.fontWeight === 'bold' ? 'normal' : 'bold')}>B</button>
+              <button class="prop-seg-btn ${el.style?.fontStyle === 'italic' ? 'active' : ''}" style="font-style:italic;"
+                      @click=${() => this._updateElementStyle('fontStyle', el.style?.fontStyle === 'italic' ? 'normal' : 'italic')}>I</button>
+              <button class="prop-seg-btn ${el.style?.textDecoration === 'underline' ? 'active' : ''}" style="text-decoration:underline;"
+                      @click=${() => this._updateElementStyle('textDecoration', el.style?.textDecoration === 'underline' ? 'none' : 'underline')}>U</button>
+            </div>
+          </div>
+
+          <!-- Horizontal alignment segmented -->
+          <div class="prop-row" style="grid-template-columns:68px 1fr;">
+            <span class="prop-label">Align</span>
+            <div class="prop-segmented">
+              <button class="prop-seg-btn ${(el.style?.textAlign || 'left') === 'left' ? 'active' : ''}"
+                      @click=${() => this._updateElementStyle('textAlign', 'left')}>\u2190</button>
+              <button class="prop-seg-btn ${el.style?.textAlign === 'center' ? 'active' : ''}"
+                      @click=${() => this._updateElementStyle('textAlign', 'center')}>\u2194</button>
+              <button class="prop-seg-btn ${el.style?.textAlign === 'right' ? 'active' : ''}"
+                      @click=${() => this._updateElementStyle('textAlign', 'right')}>\u2192</button>
+            </div>
+          </div>
+
+          <!-- Vertical alignment segmented -->
+          <div class="prop-row" style="grid-template-columns:68px 1fr;">
+            <span class="prop-label">V.Align</span>
+            <div class="prop-segmented">
+              <button class="prop-seg-btn ${(el.style?.verticalAlign || 'top') === 'top' ? 'active' : ''}"
+                      @click=${() => this._updateElementStyle('verticalAlign', 'top')}>\u2191</button>
+              <button class="prop-seg-btn ${el.style?.verticalAlign === 'middle' ? 'active' : ''}"
+                      @click=${() => this._updateElementStyle('verticalAlign', 'middle')}>\u2195</button>
+              <button class="prop-seg-btn ${el.style?.verticalAlign === 'bottom' ? 'active' : ''}"
+                      @click=${() => this._updateElementStyle('verticalAlign', 'bottom')}>\u2193</button>
+            </div>
+          </div>
+
+          <!-- Text color -->
+          <div class="prop-row">
+            <span class="prop-label">Color</span>
+            <div class="prop-color-row">
+              <div class="prop-color-swatch" style="background:${el.style?.color || '#333333'}">
+                <input type="color" .value=${el.style?.color || '#333333'}
+                       @change=${(e) => this._updateElementStyle('color', e.target.value)} />
+              </div>
+              <input class="prop-color-hex" .value=${el.style?.color || '#333333'}
+                     @change=${(e) => this._updateElementStyle('color', e.target.value)} />
+            </div>
+          </div>
+
+          <!-- Background color -->
+          <div class="prop-row">
+            <span class="prop-label">Bg Color</span>
+            <div class="prop-color-row">
+              <div class="prop-color-swatch" style="background:${el.style?.backgroundColor || '#ffffff'}">
+                <input type="color" .value=${el.style?.backgroundColor || '#ffffff'}
+                       @change=${(e) => this._updateElementStyle('backgroundColor', e.target.value)} />
+              </div>
+              <input class="prop-color-hex" .value=${el.style?.backgroundColor || '#ffffff'}
+                     @change=${(e) => this._updateElementStyle('backgroundColor', e.target.value)} />
+            </div>
+          </div>
+
+          <!-- Border -->
+          <div class="prop-row">
+            <span class="prop-label">Border</span>
+            <input class="prop-input" .value=${el.style?.borderBottom || ''}
+                   placeholder="1px solid #ccc"
+                   @change=${(e) => {
             const v = e.target.value;
             this._updateElementStyle('borderTop', v);
             this._updateElementStyle('borderRight', v);
             this._updateElementStyle('borderBottom', v);
             this._updateElementStyle('borderLeft', v);
         }} />
-        </div>
-        <div class="prop-row">
-          <span class="prop-label">Padding</span>
-          <input class="prop-input" type="number" .value=${String(el.style?.padding || 0)}
-                 @change=${(e) => this._updateElementStyle('padding', Number(e.target.value))} />
-        </div>
-        <div class="prop-row">
-          <span class="prop-label">Word Wrap</span>
-          <input type="checkbox" .checked=${el.style?.wordWrap === true}
-                 @change=${(e) => this._updateElementStyle('wordWrap', e.target.checked)} />
+          </div>
+
+          <!-- Padding -->
+          <div class="prop-row">
+            <span class="prop-label">Padding</span>
+            <input class="prop-input" type="number" .value=${String(el.style?.padding || 0)}
+                   @change=${(e) => this._updateElementStyle('padding', Number(e.target.value))} />
+          </div>
+
+          <!-- Word wrap toggle -->
+          <div class="prop-row">
+            <span class="prop-label">Word Wrap</span>
+            <div class="prop-toggle">
+              <div class="prop-switch ${el.style?.wordWrap === true ? 'active' : ''}"
+                   @click=${() => this._updateElementStyle('wordWrap', !el.style?.wordWrap)}></div>
+              <span style="font-size:11px;color:var(--zrd-text-muted);">${el.style?.wordWrap ? 'On' : 'Off'}</span>
+            </div>
+          </div>
         </div>
       </div>
 
-      <div class="prop-section">
-        <h4>Visibility</h4>
-        <div class="prop-row">
-          <span class="prop-label">Visible</span>
-          <input type="checkbox" .checked=${el.visible !== false}
-                 @change=${(e) => this._updateElementProp('visible', e.target.checked)} />
-        </div>
-        <div class="prop-row">
-          <span class="prop-label">Print On</span>
-          <select class="prop-input" .value=${el.printOn || 'all'}
-                  @change=${(e) => this._updateElementProp('printOn', e.target.value)}>
-            <option value="all">All Pages</option>
-            <option value="first">First Page Only</option>
-            <option value="last">Last Page Only</option>
-            <option value="odd">Odd Pages</option>
-            <option value="even">Even Pages</option>
-          </select>
+      <!-- Visibility -->
+      <div class="prop-section" data-section="visibility">
+        ${sectionHeader('el-vis', 'Visibility')}
+        <div class="prop-section-body ${collapsed.has('el-vis') ? 'collapsed' : ''}">
+          <div class="prop-row">
+            <span class="prop-label">Visible</span>
+            <div class="prop-toggle">
+              <div class="prop-switch ${el.visible !== false ? 'active' : ''}"
+                   @click=${() => this._updateElementProp('visible', !(el.visible !== false))}></div>
+              <span style="font-size:11px;color:var(--zrd-text-muted);">${el.visible !== false ? 'On' : 'Off'}</span>
+            </div>
+          </div>
+          <div class="prop-row">
+            <span class="prop-label">Print On</span>
+            <select class="prop-input" .value=${el.printOn || 'all'}
+                    @change=${(e) => this._updateElementProp('printOn', e.target.value)}>
+              <option value="all">All Pages</option>
+              <option value="first">First Page Only</option>
+              <option value="last">Last Page Only</option>
+              <option value="odd">Odd Pages</option>
+              <option value="even">Even Pages</option>
+            </select>
+          </div>
         </div>
       </div>
 
+      <!-- Type-specific sections -->
       ${el.type === 'text' ? html `
-        <div class="prop-section">
-          <h4>Content</h4>
-          <div class="prop-row">
-            <textarea class="prop-input" style="min-height:60px;resize:vertical;" .value=${el.content}
+        <div class="prop-section" data-section="data">
+          ${sectionHeader('el-content', 'Content')}
+          <div class="prop-section-body ${collapsed.has('el-content') ? 'collapsed' : ''}">
+            <textarea class="prop-input" .value=${el.content}
                       @change=${(e) => this._updateElementProp('content', e.target.value)}></textarea>
           </div>
         </div>
       ` : nothing}
 
       ${el.type === 'field' ? html `
-        <div class="prop-section">
-          <h4>Field Binding</h4>
-          <div class="prop-row">
-            <span class="prop-label">Source</span>
-            <select class="prop-input" .value=${el.dataSource || ''}
-                    @change=${(e) => this._updateElementProp('dataSource', e.target.value)}>
-              <option value="">-- select --</option>
-              ${this._layout.dataSources.map(ds => html `<option value="${ds.id}">${ds.name}</option>`)}
-            </select>
-          </div>
-          <div class="prop-row">
-            <span class="prop-label">Field</span>
-            ${this._renderFieldSelect(el)}
-          </div>
-          <div class="prop-row">
-            <span class="prop-label">Format</span>
-            <input class="prop-input" .value=${el.format || ''}
-                   placeholder="$#,##0.00"
-                   @change=${(e) => this._updateElementProp('format', e.target.value)} />
-          </div>
-          <div class="prop-row">
-            <span class="prop-label">Aggregate</span>
-            <select class="prop-input" .value=${el.aggregate || ''}
-                    @change=${(e) => this._updateElementProp('aggregate', e.target.value || undefined)}>
-              <option value="">None</option>
-              <option>sum</option><option>avg</option><option>count</option><option>min</option><option>max</option>
-            </select>
+        <div class="prop-section" data-section="data">
+          ${sectionHeader('el-field', 'Field Binding')}
+          <div class="prop-section-body ${collapsed.has('el-field') ? 'collapsed' : ''}">
+            <div class="prop-row">
+              <span class="prop-label">Source</span>
+              <select class="prop-input" .value=${el.dataSource || ''}
+                      @change=${(e) => this._updateElementProp('dataSource', e.target.value)}>
+                <option value="">-- select --</option>
+                ${this._layout.dataSources.map(ds => html `<option value="${ds.id}">${ds.name}</option>`)}
+              </select>
+            </div>
+            <div class="prop-row">
+              <span class="prop-label">Field</span>
+              ${this._renderFieldSelect(el)}
+            </div>
+            <div class="prop-row">
+              <span class="prop-label">Format</span>
+              <input class="prop-input" .value=${el.format || ''}
+                     placeholder="$#,##0.00"
+                     @change=${(e) => this._updateElementProp('format', e.target.value)} />
+            </div>
+            <div class="prop-row">
+              <span class="prop-label">Aggregate</span>
+              <select class="prop-input" .value=${el.aggregate || ''}
+                      @change=${(e) => this._updateElementProp('aggregate', e.target.value || undefined)}>
+                <option value="">None</option>
+                <option>sum</option><option>avg</option><option>count</option><option>min</option><option>max</option>
+              </select>
+            </div>
           </div>
         </div>
       ` : nothing}
 
       ${el.type === 'image' ? html `
-        <div class="prop-section">
-          <h4>Image</h4>
-          <div class="prop-row">
-            <span class="prop-label">URL/Expr</span>
-            <input class="prop-input" .value=${el.src || ''}
-                   @change=${(e) => this._updateElementProp('src', e.target.value)} />
-          </div>
-          <div class="prop-row">
-            <span class="prop-label">Fit</span>
-            <select class="prop-input" .value=${el.fit || 'contain'}
-                    @change=${(e) => this._updateElementProp('fit', e.target.value)}>
-              <option>contain</option><option>cover</option><option>fill</option><option>none</option>
-            </select>
+        <div class="prop-section" data-section="data">
+          ${sectionHeader('el-image', 'Image')}
+          <div class="prop-section-body ${collapsed.has('el-image') ? 'collapsed' : ''}">
+            <div class="prop-row">
+              <span class="prop-label">URL/Expr</span>
+              <input class="prop-input" .value=${el.src || ''}
+                     @change=${(e) => this._updateElementProp('src', e.target.value)} />
+            </div>
+            <div class="prop-row">
+              <span class="prop-label">Fit</span>
+              <select class="prop-input" .value=${el.fit || 'contain'}
+                      @change=${(e) => this._updateElementProp('fit', e.target.value)}>
+                <option>contain</option><option>cover</option><option>fill</option><option>none</option>
+              </select>
+            </div>
           </div>
         </div>
       ` : nothing}
 
       ${el.type === 'barcode' ? html `
-        <div class="prop-section">
-          <h4>Barcode</h4>
-          <div class="prop-row">
-            <span class="prop-label">Type</span>
-            <select class="prop-input" .value=${el.barcodeType || 'qr'}
-                    @change=${(e) => this._updateElementProp('barcodeType', e.target.value)}>
-              <option>qr</option><option>code128</option><option>ean13</option><option>code39</option>
-            </select>
-          </div>
-          <div class="prop-row">
-            <span class="prop-label">Value</span>
-            <input class="prop-input" .value=${el.value || ''}
-                   @change=${(e) => this._updateElementProp('value', e.target.value)} />
+        <div class="prop-section" data-section="data">
+          ${sectionHeader('el-barcode', 'Barcode')}
+          <div class="prop-section-body ${collapsed.has('el-barcode') ? 'collapsed' : ''}">
+            <div class="prop-row">
+              <span class="prop-label">Type</span>
+              <select class="prop-input" .value=${el.barcodeType || 'qr'}
+                      @change=${(e) => this._updateElementProp('barcodeType', e.target.value)}>
+                <option>qr</option><option>code128</option><option>ean13</option><option>code39</option>
+              </select>
+            </div>
+            <div class="prop-row">
+              <span class="prop-label">Value</span>
+              <input class="prop-input" .value=${el.value || ''}
+                     @change=${(e) => this._updateElementProp('value', e.target.value)} />
+            </div>
           </div>
         </div>
       ` : nothing}
 
       ${el.type === 'pageNumber' ? html `
-        <div class="prop-section">
-          <h4>Page Number</h4>
-          <div class="prop-row">
-            <span class="prop-label">Format</span>
-            <input class="prop-input" .value=${el.format || 'Page {page} of {pages}'}
-                   @change=${(e) => this._updateElementProp('format', e.target.value)} />
+        <div class="prop-section" data-section="data">
+          ${sectionHeader('el-pagenum', 'Page Number')}
+          <div class="prop-section-body ${collapsed.has('el-pagenum') ? 'collapsed' : ''}">
+            <div class="prop-row">
+              <span class="prop-label">Format</span>
+              <input class="prop-input" .value=${el.format || 'Page {page} of {pages}'}
+                     @change=${(e) => this._updateElementProp('format', e.target.value)} />
+            </div>
           </div>
         </div>
       ` : nothing}
 
       ${el.type === 'currentDate' ? html `
-        <div class="prop-section">
-          <h4>Date Format</h4>
-          <div class="prop-row">
-            <span class="prop-label">Format</span>
-            <input class="prop-input" .value=${el.format || 'dd/MM/yyyy'}
-                   @change=${(e) => this._updateElementProp('format', e.target.value)} />
+        <div class="prop-section" data-section="data">
+          ${sectionHeader('el-date', 'Date Format')}
+          <div class="prop-section-body ${collapsed.has('el-date') ? 'collapsed' : ''}">
+            <div class="prop-row">
+              <span class="prop-label">Format</span>
+              <input class="prop-input" .value=${el.format || 'dd/MM/yyyy'}
+                     @change=${(e) => this._updateElementProp('format', e.target.value)} />
+            </div>
           </div>
         </div>
       ` : nothing}
 
-      <div class="prop-section" style="margin-top:20px;">
+      <!-- Z-Order -->
+      <div class="prop-section">
+        ${sectionHeader('el-zorder', 'Z-Order')}
+        <div class="prop-section-body ${collapsed.has('el-zorder') ? 'collapsed' : ''}">
+          <div class="z-order-buttons">
+            <button class="btn-small" @click=${() => this._changeZOrder(el.id, this._selectedBandId, 'front')} title="Bring to Front">\u2B06 Front</button>
+            <button class="btn-small" @click=${() => this._changeZOrder(el.id, this._selectedBandId, 'forward')} title="Bring Forward">\u2191 Fwd</button>
+            <button class="btn-small" @click=${() => this._changeZOrder(el.id, this._selectedBandId, 'backward')} title="Send Backward">\u2193 Bwd</button>
+            <button class="btn-small" @click=${() => this._changeZOrder(el.id, this._selectedBandId, 'back')} title="Send to Back">\u2B07 Back</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Delete -->
+      <div class="prop-section">
         <button class="btn-danger" @click=${this._deleteSelectedElement}>Delete Element</button>
       </div>
     `;
@@ -1996,6 +3179,27 @@ __decorate([
 __decorate([
     state()
 ], ZenttoReportDesigner.prototype, "_zoom", void 0);
+__decorate([
+    state()
+], ZenttoReportDesigner.prototype, "_showPageSetup", void 0);
+__decorate([
+    state()
+], ZenttoReportDesigner.prototype, "_showBandMenu", void 0);
+__decorate([
+    state()
+], ZenttoReportDesigner.prototype, "_mobileLeftOpen", void 0);
+__decorate([
+    state()
+], ZenttoReportDesigner.prototype, "_mobileRightOpen", void 0);
+__decorate([
+    state()
+], ZenttoReportDesigner.prototype, "_guides", void 0);
+__decorate([
+    state()
+], ZenttoReportDesigner.prototype, "_collapsedSections", void 0);
+__decorate([
+    state()
+], ZenttoReportDesigner.prototype, "_pageSetupDraft", void 0);
 ZenttoReportDesigner = __decorate([
     customElement('zentto-report-designer')
 ], ZenttoReportDesigner);