@zentto/report-designer 1.0.0 → 1.2.0

package/dist/zentto-report-designer.js

@@ -105,7 +105,10 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
         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;
@@ -131,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) {
@@ -177,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;
@@ -288,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;
@@ -384,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); }
@@ -391,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;
@@ -505,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: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 h4 {
+    .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 ─── */
@@ -607,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;
@@ -695,6 +944,7 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
       border-bottom: 1px solid var(--zrd-border);
       font-size: 12px;
       flex-wrap: wrap;
+      min-height: 32px;
     }
     .page-setup-group {
       display: flex;
@@ -778,6 +1028,160 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
       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() {
@@ -1375,7 +1779,11 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
         ${this._renderTopToolbar()}
         ${this._renderPageSetupBar()}
 
-        <div class="left-panel">
+        ${this._mobileLeftOpen || this._mobileRightOpen ? html `
+          <div class="mobile-overlay" @click=${() => { this._mobileLeftOpen = false; this._mobileRightOpen = false; }}></div>
+        ` : nothing}
+
+        <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>
@@ -1398,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)}
@@ -1415,7 +1833,7 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
           </div>
         </div>
 
-        <div class="right-panel">
+        <div class="right-panel ${this._mobileRightOpen ? 'mobile-open' : ''}">
           ${this._renderPropertiesPanel()}
         </div>
       </div>
@@ -2221,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;
@@ -2310,6 +2762,7 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
         </div>
       `;
         }
+        // ── Nothing selected — help card ──
         if (!el)
             return html `
       <div class="help-card">
@@ -2328,244 +2781,322 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
         </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 `
-      <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>
-        </div>
+      <!-- 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>
     `;
@@ -2654,9 +3185,18 @@ __decorate([
 __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);