@zentto/studio 0.6.0 → 0.6.1

package/dist/designer/zs-page-designer.js

@@ -101,493 +101,493 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
         this.apiCompany = '';
         this.apiBranch = '';
     }
-    static { this.styles = css `
-    :host {
-      display: block; height: 100%;
-      --zrd-bg: ${unsafeCSS(BG)};
-      --zrd-panel-bg: ${unsafeCSS(PANEL_BG)};
-      --zrd-border: ${unsafeCSS(BORDER)};
-      --zrd-accent: ${unsafeCSS(ACCENT)};
-      --zrd-accent-light: ${unsafeCSS(ACCENT_LIGHT)};
-      --zrd-text: ${unsafeCSS(TEXT)};
-      --zrd-text-muted: ${unsafeCSS(TEXT_MUTED)};
-      --zrd-danger: ${unsafeCSS(DANGER)};
-      font-family: 'Segoe UI', Roboto, Arial, sans-serif;
-    }
-
-    /* ─── Layout ──────────────────────────────── */
-    .designer {
-      display: grid;
-      grid-template-rows: auto 1fr;
-      grid-template-columns: 200px 4px 1fr 4px 240px;
-      height: 100%; background: var(--zrd-bg);
-      overflow: hidden;
-    }
-
-    /* ─── Toolbar ─────────────────────────────── */
-    .toolbar {
-      grid-column: 1 / -1;
-      display: flex; align-items: center; gap: 8px;
-      padding: 6px 12px; min-height: 36px;
-      background: var(--zrd-panel-bg);
-      border-bottom: 1px solid var(--zrd-border);
-      flex-wrap: wrap;
-    }
-    .toolbar-sep { width: 1px; height: 20px; background: var(--zrd-border); margin: 0 2px; }
-    .tb-btn {
-      background: none; border: 1px solid var(--zrd-border);
-      border-radius: 4px; padding: 4px 10px;
-      cursor: pointer; font-size: 12px; color: var(--zrd-text);
-      font-family: inherit; transition: background 0.15s;
-      white-space: nowrap; display: flex; align-items: center; gap: 4px;
-    }
-    .tb-btn:hover { background: var(--zrd-accent-light); }
-    .tb-btn:disabled { opacity: 0.4; cursor: default; }
-    .tb-btn--active { background: var(--zrd-accent); color: white; border-color: var(--zrd-accent); }
-    .tb-btn--danger:hover { background: #ffebee; color: var(--zrd-danger); border-color: var(--zrd-danger); }
-    .report-name {
-      font-weight: 600; font-size: 14px; cursor: pointer;
-      padding: 2px 6px; border-radius: 3px; border: 1px solid transparent;
-      color: var(--zrd-text);
-    }
-    .report-name:hover { border-color: var(--zrd-border); background: var(--zrd-accent-light); }
-    .report-name-input {
-      font-weight: 600; font-size: 14px; border: 1px solid var(--zrd-accent);
-      border-radius: 3px; padding: 2px 6px; outline: none;
-      background: white; color: var(--zrd-text); font-family: inherit;
-    }
-    .tb-spacer { flex: 1; }
-    .zoom-controls {
-      display: flex; align-items: center; gap: 4px;
-      padding-left: 8px; border-left: 1px solid var(--zrd-border);
-    }
-    .zoom-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 3px; font-size: 14px; font-weight: bold; }
-    .zoom-label { font-size: 11px; min-width: 36px; text-align: center; color: var(--zrd-text-muted); cursor: pointer; }
-
-    /* ─── Resize Handle ───────────────────────── */
-    .panel-resize {
-      width: 4px; cursor: col-resize; background: transparent;
-      transition: background 0.15s; flex-shrink: 0;
-    }
-    .panel-resize:hover { background: var(--zrd-accent); }
-
-    /* ─── Left Panel (Toolbox) ────────────────── */
-    .left-panel {
-      background: var(--zrd-panel-bg);
-      border-right: 1px solid var(--zrd-border);
-      display: flex; flex-direction: column; overflow: hidden;
-    }
-    .panel-tabs {
-      display: flex; border-bottom: 1px solid var(--zrd-border);
-    }
-    .panel-tab {
-      flex: 1; padding: 8px 4px; text-align: center; cursor: pointer;
-      font-size: 11px; border-bottom: 2px solid transparent;
-      color: var(--zrd-text-muted); transition: all 0.15s;
-      background: none; border-top: none; border-left: none; border-right: none;
-      font-family: inherit;
-    }
-    .panel-tab:hover { color: var(--zrd-text); }
-    .panel-tab--active { border-bottom-color: var(--zrd-accent); color: var(--zrd-accent); font-weight: 600; }
-    .panel-content { padding: 4px; overflow-y: auto; flex: 1; }
-    .panel-content::-webkit-scrollbar { width: 6px; }
-    .panel-content::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
-
-    /* Toolbox grid (3 columns like report-designer) */
-    .toolbox-section {
-      font-size: 9px; font-weight: 700; text-transform: uppercase;
-      letter-spacing: 0.8px; color: #aaa;
-      padding: 10px 8px 5px; margin-top: 2px;
-    }
-    .toolbox-section:first-child { margin-top: 0; padding-top: 6px; }
-    .toolbox-grid {
-      display: grid; grid-template-columns: repeat(3, 1fr);
-      gap: 3px; padding: 0 4px;
-    }
-    .toolbox-item {
-      display: flex; flex-direction: column; align-items: center;
-      gap: 3px; padding: 7px 2px 5px;
-      border: 1px solid transparent; border-radius: 5px;
-      cursor: grab; user-select: none; text-align: center;
-      transition: all 0.15s; background: transparent;
-    }
-    .toolbox-item:hover {
-      background: var(--zrd-accent-light); border-color: #c5dcf0;
-      box-shadow: 0 1px 4px rgba(25,118,210,0.1);
-    }
-    .toolbox-item:active { cursor: grabbing; opacity: 0.6; transform: scale(0.95); }
-    .toolbox-icon {
-      width: 28px; height: 28px; display: flex; align-items: center;
-      justify-content: center; border-radius: 6px;
-      font-size: 15px; flex-shrink: 0;
-      background: #f0f4f8; color: #1976d2;
-      border: 1px solid #e3e8ee;
-      transition: all 0.15s;
-    }
-    .toolbox-item:hover .toolbox-icon {
-      background: #1976d2; color: white; border-color: #1976d2;
-      box-shadow: 0 2px 6px rgba(25,118,210,0.3);
-    }
-    .toolbox-label {
-      font-size: 9px; font-weight: 500; line-height: 1.1;
-      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-      max-width: 100%; color: #777;
-    }
-    .toolbox-item:hover .toolbox-label { color: #1976d2; }
-
-    /* ─── Canvas ──────────────────────────────── */
-    .canvas-area {
-      overflow: auto; padding: 30px; position: relative;
-      background: #d0d0d0; display: flex; justify-content: center;
-    }
-    .canvas {
-      background: white; position: relative; margin: 0 auto; border-radius: 2px;
-      box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.08);
-      min-width: 600px; min-height: 400px; padding: 24px;
-      transform-origin: top center;
-    }
-    .canvas-section { margin-bottom: 20px; }
-    .canvas-section-header {
-      font-size: 13px; font-weight: 600; color: var(--zrd-text);
-      padding: 6px 8px; margin-bottom: 8px;
-      background: #f0f0f0; border-radius: 4px; border-left: 3px solid var(--zrd-accent);
-      display: flex; align-items: center; gap: 8px; cursor: pointer;
-    }
-    .canvas-section-header:hover { background: var(--zrd-accent-light); }
-    .canvas-grid {
-      display: grid; gap: 8px; padding: 4px;
-      background: repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(0,0,0,0.03) 19px, rgba(0,0,0,0.03) 20px),
-                  repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(0,0,0,0.03) 19px, rgba(0,0,0,0.03) 20px);
-    }
-
-    /* Field on canvas */
-    .canvas-field {
-      position: relative; border: 1px solid transparent;
-      border-radius: 4px; cursor: pointer; user-select: none;
-      transition: border-color 0.15s, box-shadow 0.15s;
-      padding: 4px;
-    }
-    .canvas-field:hover { border-color: rgba(25,118,210,0.5); }
-    .canvas-field--selected {
-      border-color: var(--zrd-accent);
-      box-shadow: 0 0 0 1px var(--zrd-accent);
-    }
-
-    /* Type badge (above field) */
-    .field-type-badge {
-      position: absolute; top: -14px; left: 0;
-      font-size: 9px; border-radius: 3px 3px 0 0;
-      padding: 1px 6px; line-height: 13px;
-      pointer-events: none; z-index: 6; display: none;
-      white-space: nowrap;
-    }
-    .canvas-field:hover .field-type-badge,
-    .canvas-field--selected .field-type-badge { display: block; }
-
-    /* Resize handles (8-point like report-designer) */
-    .rh { position: absolute; width: 6px; height: 6px; background: var(--zrd-accent); border: 1px solid white; z-index: 5; display: none; border-radius: 1px; }
-    .rh:hover { background: #0d47a1; }
-    .canvas-field--selected .rh { display: block; }
-    .rh-nw { top: -3px; left: -3px; cursor: nw-resize; }
-    .rh-n { top: -3px; left: calc(50% - 3px); cursor: n-resize; }
-    .rh-ne { top: -3px; right: -3px; cursor: ne-resize; }
-    .rh-e { top: calc(50% - 3px); right: -3px; cursor: e-resize; }
-    .rh-se { bottom: -3px; right: -3px; cursor: se-resize; }
-    .rh-s { bottom: -3px; left: calc(50% - 3px); cursor: s-resize; }
-    .rh-sw { bottom: -3px; left: -3px; cursor: sw-resize; }
-    .rh-w { top: calc(50% - 3px); left: -3px; cursor: w-resize; }
-
-    /* Action buttons on field */
-    .field-actions {
-      position: absolute; top: -14px; right: 4px;
-      display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; z-index: 7;
-    }
-    .canvas-field:hover .field-actions { opacity: 1; }
-    .fa-btn {
-      width: 18px; height: 14px; border-radius: 3px 3px 0 0;
-      border: none; cursor: pointer; font-size: 9px;
-      display: flex; align-items: center; justify-content: center;
-    }
-    .fa-btn--move { background: var(--zrd-accent); color: white; }
-    .fa-btn--delete { background: var(--zrd-danger); color: white; }
-    .fa-btn--copy { background: #7c3aed; color: white; }
-
-    /* Field preview content */
-    .field-preview {
-      pointer-events: none;
-    }
-    .field-preview-label {
-      font-size: 11px; font-weight: 500; color: var(--zrd-text-muted);
-      margin-bottom: 3px;
-    }
-    .field-preview-input {
-      height: 30px; border: 1px solid #e0e0e0; border-radius: 4px;
-      background: #fafafa; display: flex; align-items: center;
-      padding: 0 8px; font-size: 12px; color: #999;
-    }
-    .field-preview-input--textarea { height: 60px; align-items: flex-start; padding-top: 6px; }
-    .field-preview-input--switch { height: auto; border: none; background: none; padding: 0; }
-    .field-preview-input--separator { height: 1px; border: none; background: #ddd; padding: 0; }
-    .field-preview-input--heading { height: auto; border: none; background: none; padding: 0; font-size: 16px; font-weight: 600; color: var(--zrd-text); }
-    .field-preview-input--datagrid { height: 120px; border: 2px dashed var(--zrd-accent); background: var(--zrd-accent-light); justify-content: center; font-weight: 500; color: var(--zrd-accent); }
-    .field-preview-input--report { height: 120px; border: 2px dashed #e65100; background: #fff3e0; justify-content: center; font-weight: 500; color: #e65100; }
-    .field-preview-input--chart { height: 120px; border: 2px dashed #6a1b9a; background: #f3e5f5; justify-content: center; font-weight: 500; color: #6a1b9a; }
-
-    /* Drop zone */
-    .drop-zone {
-      border: 2px dashed var(--zrd-border); border-radius: 6px;
-      padding: 16px; text-align: center; margin: 4px 0;
-      color: var(--zrd-text-muted); font-size: 12px; transition: all 0.15s;
-    }
-    .drop-zone--active { border-color: var(--zrd-accent); background: var(--zrd-accent-light); color: var(--zrd-accent); }
-
-    /* ─── Right Panel (Properties — Figma-quality) ──── */
-    .right-panel {
-      background: var(--zrd-panel-bg);
-      border-left: 1px solid var(--zrd-border);
-      overflow-y: auto; font-size: 11px;
-    }
-    .right-panel::-webkit-scrollbar { width: 5px; }
-    .right-panel::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 3px; }
-    .right-panel::-webkit-scrollbar-thumb:hover { background: #bbb; }
-
-    /* ─ Prop Section ─ */
-    .prop-section { border-bottom: 1px solid #eee; padding: 8px 10px 10px; }
-    .prop-section:last-child { border-bottom: none; }
-    .prop-section-header {
-      display: flex; align-items: center; gap: 6px;
-      cursor: pointer; user-select: none; margin-bottom: 6px; padding: 2px 0;
-    }
-    .prop-section-header h4 {
-      font-size: 10px; font-weight: 700; text-transform: uppercase;
-      letter-spacing: 0.6px; margin: 0; flex: 1;
-    }
-    .prop-section-header[data-section="general"] h4 { color: #1976d2; }
-    .prop-section-header[data-section="layout"] h4 { color: #7c3aed; }
-    .prop-section-header[data-section="behavior"] h4 { color: #0d9488; }
-    .prop-section-header[data-section="rules"] h4 { color: #ea580c; }
-    .prop-section-header[data-section="style"] h4 { color: #c2185b; }
-    .prop-section-header[data-section="form"] h4 { color: #1976d2; }
-    .collapse-icon {
-      font-size: 8px; color: #bbb; transition: transform 0.15s;
-      width: 14px; height: 14px; display: flex; align-items: center;
-      justify-content: center; border-radius: 3px;
-    }
-    .collapse-icon:hover { background: #f0f0f0; color: #666; }
-    .collapse-icon--collapsed { transform: rotate(-90deg); }
-
-    /* ─ Prop Rows ─ */
-    .prop-row {
-      display: grid; grid-template-columns: 62px 1fr;
-      align-items: center; gap: 4px; min-height: 26px; margin-bottom: 1px;
-    }
-    .prop-row-full { grid-template-columns: 1fr; margin-bottom: 3px; }
-    .prop-label {
-      font-size: 11px; color: #999; font-weight: 400;
-      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-      padding-left: 1px; line-height: 1;
-    }
-
-    /* ─ Figma-style input ─ */
-    .prop-input {
-      width: 100%; border: 1px solid transparent; border-radius: 4px;
-      padding: 5px 7px; font-size: 11px; background: #f5f5f5;
-      color: var(--zrd-text); outline: none; min-width: 0;
-      font-family: inherit; box-sizing: border-box;
-      transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
-    }
-    .prop-input:hover { background: #efefef; border-color: #ddd; }
-    .prop-input:focus { border-color: #1976d2; background: white; box-shadow: 0 0 0 2px rgba(25,118,210,0.08); }
-    select.prop-input {
-      padding: 4px 20px 4px 7px; cursor: pointer; appearance: none;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23999'/%3E%3C/svg%3E");
-      background-repeat: no-repeat; background-position: right 6px center;
-    }
-    textarea.prop-input {
-      min-height: 44px; resize: vertical; font-family: 'SF Mono','Consolas','Monaco',monospace;
-      font-size: 10px; line-height: 1.5; padding: 6px 7px;
-    }
-
-    /* ─ Numeric stepper (Figma-style) ─ */
-    .prop-stepper {
-      display: flex; align-items: center; background: #f5f5f5;
-      border: 1px solid transparent; border-radius: 4px; overflow: hidden;
-      transition: border-color 0.12s;
-    }
-    .prop-stepper:hover { border-color: #ddd; }
-    .prop-stepper:focus-within { border-color: #1976d2; background: white; }
-    .prop-stepper input {
-      border: none; background: transparent; width: 100%;
-      font-size: 11px; color: var(--zrd-text); outline: none;
-      padding: 4px 2px 4px 7px; min-width: 0; font-family: inherit;
-      -moz-appearance: textfield;
-    }
-    .prop-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
-    .prop-stepper-btns {
-      display: flex; flex-direction: column; border-left: 1px solid #eee;
-    }
-    .prop-stepper-btn {
-      border: none; background: none; cursor: pointer; padding: 0;
-      width: 18px; height: 12px; display: flex; align-items: center;
-      justify-content: center; font-size: 7px; color: #999;
-      transition: all 0.1s;
-    }
-    .prop-stepper-btn:hover { background: #e8e8e8; color: #333; }
-
-    /* ─ Position grid (4-cell Figma layout) ─ */
-    .prop-pos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
-    .prop-pos-cell {
-      display: flex; align-items: center; background: #f5f5f5;
-      border: 1px solid transparent; border-radius: 4px; padding: 0 6px;
-      height: 26px; gap: 3px; transition: border-color 0.12s;
-    }
-    .prop-pos-cell:hover { border-color: #ddd; }
-    .prop-pos-cell:focus-within { border-color: #1976d2; background: white; }
-    .prop-pos-label {
-      font-size: 9px; font-weight: 700; width: 10px; text-align: center;
-      flex-shrink: 0; user-select: none;
-    }
-    .prop-pos-label--x { color: #ef4444; }
-    .prop-pos-label--y { color: #3b82f6; }
-    .prop-pos-label--w { color: #8b5cf6; }
-    .prop-pos-label--h { color: #10b981; }
-    .prop-pos-cell input {
-      border: none; background: transparent; width: 100%;
-      font-size: 11px; color: var(--zrd-text); outline: none;
-      padding: 0; min-width: 0; font-family: inherit;
-    }
-
-    /* ─ Toggle switches (Figma compact) ─ */
-    .prop-toggle {
-      display: flex; align-items: center; gap: 8px;
-      min-height: 24px; padding: 1px 0;
-    }
-    .prop-switch {
-      position: relative; width: 28px; height: 16px; border-radius: 8px;
-      background: #d4d4d4; cursor: pointer; transition: background 0.2s;
-      flex-shrink: 0; border: none; padding: 0;
-    }
-    .prop-switch--active { background: #1976d2; }
-    .prop-switch::after {
-      content: ''; position: absolute; top: 2px; left: 2px;
-      width: 12px; height: 12px; border-radius: 50%;
-      background: white; box-shadow: 0 1px 2px rgba(0,0,0,0.15);
-      transition: transform 0.2s;
-    }
-    .prop-switch--active::after { transform: translateX(12px); }
-    .prop-toggle-label { font-size: 11px; color: #888; }
-    .prop-toggle:hover .prop-toggle-label { color: #555; }
-
-    /* ─ Segmented control (alignment, format) ─ */
-    .prop-segmented {
-      display: flex; border: 1px solid #e0e0e0; border-radius: 5px;
-      overflow: hidden; background: #f5f5f5;
-    }
-    .prop-seg-btn {
-      flex: 1; padding: 4px 0; background: transparent; border: none;
-      border-right: 1px solid #e0e0e0; cursor: pointer;
-      font-size: 11px; color: #999; transition: all 0.12s; text-align: center;
-      font-family: inherit;
-    }
-    .prop-seg-btn:last-child { border-right: none; }
-    .prop-seg-btn:hover { background: #eee; color: #555; }
-    .prop-seg-btn--active { background: #1976d2; color: white; }
-
-    /* ─ Color picker (swatch + hex inline) ─ */
-    .prop-color-row { display: flex; align-items: center; gap: 6px; }
-    .prop-color-swatch {
-      width: 22px; height: 22px; border-radius: 5px;
-      border: 1px solid #ddd; 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 6px; font-size: 10px;
-      font-family: 'SF Mono','Consolas',monospace;
-      background: #f5f5f5; color: var(--zrd-text); width: 70px; outline: none;
-      box-sizing: border-box;
-    }
-    .prop-color-hex:hover { border-color: #ddd; }
-    .prop-color-hex:focus { border-color: #1976d2; background: white; }
-
-    /* ─ Info badge ─ */
-    .prop-info {
-      display: flex; align-items: center; gap: 4px;
-      padding: 5px 8px; border-radius: 4px; background: #f0f7ff;
-      font-size: 10px; color: #1976d2; margin-bottom: 4px;
-    }
-
-    /* ─ Divider line ─ */
-    .prop-divider { height: 1px; background: #f0f0f0; margin: 4px 0; }
-
-    /* ─ Empty state ─ */
-    .props-empty {
-      text-align: center; padding: 32px 16px; color: #ccc;
-    }
-    .props-empty-icon { font-size: 28px; margin-bottom: 6px; opacity: 0.4; }
-    .props-empty-text { font-size: 11px; line-height: 1.5; }
-
-    /* ─ Type badge ─ */
-    .props-type-badge {
-      display: inline-flex; align-items: center; gap: 4px;
-      padding: 3px 8px; border-radius: 4px;
-      font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
-      text-transform: uppercase;
-    }
-    .props-field-id {
-      font-size: 10px; color: #bbb; font-family: 'SF Mono','Consolas',monospace;
-      margin-top: 2px;
-    }
-
-    /* ─ JSON view ─ */
-    .json-panel {
-      font-family: 'SF Mono','Consolas','Monaco',monospace; font-size: 11px;
-      line-height: 1.5; background: #1e1e2d; color: #a2a3b7;
-      padding: 16px; border-radius: 4px; overflow: auto;
-      white-space: pre; tab-size: 2;
-    }
-
-    /* ─── InteractJS Drag & Drop ─────────────────── */
-    .dragging { opacity: 0.4; cursor: grabbing !important; }
-    .drag-clone {
-      position: fixed; pointer-events: none; z-index: 9999;
-      opacity: 0.85; border: 2px solid var(--zrd-accent);
-      border-radius: 6px; background: white;
-      box-shadow: 0 8px 24px rgba(25,118,210,0.25);
-      padding: 8px 12px; font-size: 12px; font-weight: 500;
-      color: var(--zrd-accent); max-width: 200px;
-      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-    }
-    .drop-active { border: 2px dashed var(--zrd-accent) !important; background: rgba(25,118,210,0.04) !important; }
-    .drop-target { background: rgba(25,118,210,0.1) !important; border-color: var(--zrd-accent) !important; }
-    .resize-active { outline: 2px dashed var(--zrd-accent); outline-offset: 2px; }
-    .drag-insert-line {
-      position: absolute; left: 4px; right: 4px; height: 2px;
-      background: var(--zrd-accent); border-radius: 1px; z-index: 10;
-      pointer-events: none;
-    }
-    .drag-insert-line::before, .drag-insert-line::after {
-      content: ''; position: absolute; top: -3px;
-      width: 8px; height: 8px; border-radius: 50%;
-      background: var(--zrd-accent);
-    }
-    .drag-insert-line::before { left: -4px; }
-    .drag-insert-line::after { right: -4px; }
-    .canvas-field.can-drop { box-shadow: 0 0 0 2px rgba(25,118,210,0.3); }
-    .section-drop-zone {
-      min-height: 8px; transition: all 0.15s; border-radius: 4px;
-      margin: 2px 4px;
-    }
-    .section-drop-zone.drop-active {
-      min-height: 32px; border: 2px dashed var(--zrd-accent);
-      background: rgba(25,118,210,0.06);
-      display: flex; align-items: center; justify-content: center;
-      font-size: 11px; color: var(--zrd-accent);
-    }
+    static { this.styles = css `
+    :host {
+      display: block; height: 100%;
+      --zrd-bg: ${unsafeCSS(BG)};
+      --zrd-panel-bg: ${unsafeCSS(PANEL_BG)};
+      --zrd-border: ${unsafeCSS(BORDER)};
+      --zrd-accent: ${unsafeCSS(ACCENT)};
+      --zrd-accent-light: ${unsafeCSS(ACCENT_LIGHT)};
+      --zrd-text: ${unsafeCSS(TEXT)};
+      --zrd-text-muted: ${unsafeCSS(TEXT_MUTED)};
+      --zrd-danger: ${unsafeCSS(DANGER)};
+      font-family: 'Segoe UI', Roboto, Arial, sans-serif;
+    }
+
+    /* ─── Layout ──────────────────────────────── */
+    .designer {
+      display: grid;
+      grid-template-rows: auto 1fr;
+      grid-template-columns: 200px 4px 1fr 4px 240px;
+      height: 100%; background: var(--zrd-bg);
+      overflow: hidden;
+    }
+
+    /* ─── Toolbar ─────────────────────────────── */
+    .toolbar {
+      grid-column: 1 / -1;
+      display: flex; align-items: center; gap: 8px;
+      padding: 6px 12px; min-height: 36px;
+      background: var(--zrd-panel-bg);
+      border-bottom: 1px solid var(--zrd-border);
+      flex-wrap: wrap;
+    }
+    .toolbar-sep { width: 1px; height: 20px; background: var(--zrd-border); margin: 0 2px; }
+    .tb-btn {
+      background: none; border: 1px solid var(--zrd-border);
+      border-radius: 4px; padding: 4px 10px;
+      cursor: pointer; font-size: 12px; color: var(--zrd-text);
+      font-family: inherit; transition: background 0.15s;
+      white-space: nowrap; display: flex; align-items: center; gap: 4px;
+    }
+    .tb-btn:hover { background: var(--zrd-accent-light); }
+    .tb-btn:disabled { opacity: 0.4; cursor: default; }
+    .tb-btn--active { background: var(--zrd-accent); color: white; border-color: var(--zrd-accent); }
+    .tb-btn--danger:hover { background: #ffebee; color: var(--zrd-danger); border-color: var(--zrd-danger); }
+    .report-name {
+      font-weight: 600; font-size: 14px; cursor: pointer;
+      padding: 2px 6px; border-radius: 3px; border: 1px solid transparent;
+      color: var(--zrd-text);
+    }
+    .report-name:hover { border-color: var(--zrd-border); background: var(--zrd-accent-light); }
+    .report-name-input {
+      font-weight: 600; font-size: 14px; border: 1px solid var(--zrd-accent);
+      border-radius: 3px; padding: 2px 6px; outline: none;
+      background: white; color: var(--zrd-text); font-family: inherit;
+    }
+    .tb-spacer { flex: 1; }
+    .zoom-controls {
+      display: flex; align-items: center; gap: 4px;
+      padding-left: 8px; border-left: 1px solid var(--zrd-border);
+    }
+    .zoom-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 3px; font-size: 14px; font-weight: bold; }
+    .zoom-label { font-size: 11px; min-width: 36px; text-align: center; color: var(--zrd-text-muted); cursor: pointer; }
+
+    /* ─── Resize Handle ───────────────────────── */
+    .panel-resize {
+      width: 4px; cursor: col-resize; background: transparent;
+      transition: background 0.15s; flex-shrink: 0;
+    }
+    .panel-resize:hover { background: var(--zrd-accent); }
+
+    /* ─── Left Panel (Toolbox) ────────────────── */
+    .left-panel {
+      background: var(--zrd-panel-bg);
+      border-right: 1px solid var(--zrd-border);
+      display: flex; flex-direction: column; overflow: hidden;
+    }
+    .panel-tabs {
+      display: flex; border-bottom: 1px solid var(--zrd-border);
+    }
+    .panel-tab {
+      flex: 1; padding: 8px 4px; text-align: center; cursor: pointer;
+      font-size: 11px; border-bottom: 2px solid transparent;
+      color: var(--zrd-text-muted); transition: all 0.15s;
+      background: none; border-top: none; border-left: none; border-right: none;
+      font-family: inherit;
+    }
+    .panel-tab:hover { color: var(--zrd-text); }
+    .panel-tab--active { border-bottom-color: var(--zrd-accent); color: var(--zrd-accent); font-weight: 600; }
+    .panel-content { padding: 4px; overflow-y: auto; flex: 1; }
+    .panel-content::-webkit-scrollbar { width: 6px; }
+    .panel-content::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
+
+    /* Toolbox grid (3 columns like report-designer) */
+    .toolbox-section {
+      font-size: 9px; font-weight: 700; text-transform: uppercase;
+      letter-spacing: 0.8px; color: #aaa;
+      padding: 10px 8px 5px; margin-top: 2px;
+    }
+    .toolbox-section:first-child { margin-top: 0; padding-top: 6px; }
+    .toolbox-grid {
+      display: grid; grid-template-columns: repeat(3, 1fr);
+      gap: 3px; padding: 0 4px;
+    }
+    .toolbox-item {
+      display: flex; flex-direction: column; align-items: center;
+      gap: 3px; padding: 7px 2px 5px;
+      border: 1px solid transparent; border-radius: 5px;
+      cursor: grab; user-select: none; text-align: center;
+      transition: all 0.15s; background: transparent;
+    }
+    .toolbox-item:hover {
+      background: var(--zrd-accent-light); border-color: #c5dcf0;
+      box-shadow: 0 1px 4px rgba(25,118,210,0.1);
+    }
+    .toolbox-item:active { cursor: grabbing; opacity: 0.6; transform: scale(0.95); }
+    .toolbox-icon {
+      width: 28px; height: 28px; display: flex; align-items: center;
+      justify-content: center; border-radius: 6px;
+      font-size: 15px; flex-shrink: 0;
+      background: #f0f4f8; color: #1976d2;
+      border: 1px solid #e3e8ee;
+      transition: all 0.15s;
+    }
+    .toolbox-item:hover .toolbox-icon {
+      background: #1976d2; color: white; border-color: #1976d2;
+      box-shadow: 0 2px 6px rgba(25,118,210,0.3);
+    }
+    .toolbox-label {
+      font-size: 9px; font-weight: 500; line-height: 1.1;
+      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+      max-width: 100%; color: #777;
+    }
+    .toolbox-item:hover .toolbox-label { color: #1976d2; }
+
+    /* ─── Canvas ──────────────────────────────── */
+    .canvas-area {
+      overflow: auto; padding: 30px; position: relative;
+      background: #d0d0d0; display: flex; justify-content: center;
+    }
+    .canvas {
+      background: white; position: relative; margin: 0 auto; border-radius: 2px;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.08);
+      min-width: 600px; min-height: 400px; padding: 24px;
+      transform-origin: top center;
+    }
+    .canvas-section { margin-bottom: 20px; }
+    .canvas-section-header {
+      font-size: 13px; font-weight: 600; color: var(--zrd-text);
+      padding: 6px 8px; margin-bottom: 8px;
+      background: #f0f0f0; border-radius: 4px; border-left: 3px solid var(--zrd-accent);
+      display: flex; align-items: center; gap: 8px; cursor: pointer;
+    }
+    .canvas-section-header:hover { background: var(--zrd-accent-light); }
+    .canvas-grid {
+      display: grid; gap: 8px; padding: 4px;
+      background: repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(0,0,0,0.03) 19px, rgba(0,0,0,0.03) 20px),
+                  repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(0,0,0,0.03) 19px, rgba(0,0,0,0.03) 20px);
+    }
+
+    /* Field on canvas */
+    .canvas-field {
+      position: relative; border: 1px solid transparent;
+      border-radius: 4px; cursor: pointer; user-select: none;
+      transition: border-color 0.15s, box-shadow 0.15s;
+      padding: 4px;
+    }
+    .canvas-field:hover { border-color: rgba(25,118,210,0.5); }
+    .canvas-field--selected {
+      border-color: var(--zrd-accent);
+      box-shadow: 0 0 0 1px var(--zrd-accent);
+    }
+
+    /* Type badge (above field) */
+    .field-type-badge {
+      position: absolute; top: -14px; left: 0;
+      font-size: 9px; border-radius: 3px 3px 0 0;
+      padding: 1px 6px; line-height: 13px;
+      pointer-events: none; z-index: 6; display: none;
+      white-space: nowrap;
+    }
+    .canvas-field:hover .field-type-badge,
+    .canvas-field--selected .field-type-badge { display: block; }
+
+    /* Resize handles (8-point like report-designer) */
+    .rh { position: absolute; width: 6px; height: 6px; background: var(--zrd-accent); border: 1px solid white; z-index: 5; display: none; border-radius: 1px; }
+    .rh:hover { background: #0d47a1; }
+    .canvas-field--selected .rh { display: block; }
+    .rh-nw { top: -3px; left: -3px; cursor: nw-resize; }
+    .rh-n { top: -3px; left: calc(50% - 3px); cursor: n-resize; }
+    .rh-ne { top: -3px; right: -3px; cursor: ne-resize; }
+    .rh-e { top: calc(50% - 3px); right: -3px; cursor: e-resize; }
+    .rh-se { bottom: -3px; right: -3px; cursor: se-resize; }
+    .rh-s { bottom: -3px; left: calc(50% - 3px); cursor: s-resize; }
+    .rh-sw { bottom: -3px; left: -3px; cursor: sw-resize; }
+    .rh-w { top: calc(50% - 3px); left: -3px; cursor: w-resize; }
+
+    /* Action buttons on field */
+    .field-actions {
+      position: absolute; top: -14px; right: 4px;
+      display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; z-index: 7;
+    }
+    .canvas-field:hover .field-actions { opacity: 1; }
+    .fa-btn {
+      width: 18px; height: 14px; border-radius: 3px 3px 0 0;
+      border: none; cursor: pointer; font-size: 9px;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .fa-btn--move { background: var(--zrd-accent); color: white; }
+    .fa-btn--delete { background: var(--zrd-danger); color: white; }
+    .fa-btn--copy { background: #7c3aed; color: white; }
+
+    /* Field preview content */
+    .field-preview {
+      pointer-events: none;
+    }
+    .field-preview-label {
+      font-size: 11px; font-weight: 500; color: var(--zrd-text-muted);
+      margin-bottom: 3px;
+    }
+    .field-preview-input {
+      height: 30px; border: 1px solid #e0e0e0; border-radius: 4px;
+      background: #fafafa; display: flex; align-items: center;
+      padding: 0 8px; font-size: 12px; color: #999;
+    }
+    .field-preview-input--textarea { height: 60px; align-items: flex-start; padding-top: 6px; }
+    .field-preview-input--switch { height: auto; border: none; background: none; padding: 0; }
+    .field-preview-input--separator { height: 1px; border: none; background: #ddd; padding: 0; }
+    .field-preview-input--heading { height: auto; border: none; background: none; padding: 0; font-size: 16px; font-weight: 600; color: var(--zrd-text); }
+    .field-preview-input--datagrid { height: 120px; border: 2px dashed var(--zrd-accent); background: var(--zrd-accent-light); justify-content: center; font-weight: 500; color: var(--zrd-accent); }
+    .field-preview-input--report { height: 120px; border: 2px dashed #e65100; background: #fff3e0; justify-content: center; font-weight: 500; color: #e65100; }
+    .field-preview-input--chart { height: 120px; border: 2px dashed #6a1b9a; background: #f3e5f5; justify-content: center; font-weight: 500; color: #6a1b9a; }
+
+    /* Drop zone */
+    .drop-zone {
+      border: 2px dashed var(--zrd-border); border-radius: 6px;
+      padding: 16px; text-align: center; margin: 4px 0;
+      color: var(--zrd-text-muted); font-size: 12px; transition: all 0.15s;
+    }
+    .drop-zone--active { border-color: var(--zrd-accent); background: var(--zrd-accent-light); color: var(--zrd-accent); }
+
+    /* ─── Right Panel (Properties — Figma-quality) ──── */
+    .right-panel {
+      background: var(--zrd-panel-bg);
+      border-left: 1px solid var(--zrd-border);
+      overflow-y: auto; font-size: 11px;
+    }
+    .right-panel::-webkit-scrollbar { width: 5px; }
+    .right-panel::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 3px; }
+    .right-panel::-webkit-scrollbar-thumb:hover { background: #bbb; }
+
+    /* ─ Prop Section ─ */
+    .prop-section { border-bottom: 1px solid #eee; padding: 8px 10px 10px; }
+    .prop-section:last-child { border-bottom: none; }
+    .prop-section-header {
+      display: flex; align-items: center; gap: 6px;
+      cursor: pointer; user-select: none; margin-bottom: 6px; padding: 2px 0;
+    }
+    .prop-section-header h4 {
+      font-size: 10px; font-weight: 700; text-transform: uppercase;
+      letter-spacing: 0.6px; margin: 0; flex: 1;
+    }
+    .prop-section-header[data-section="general"] h4 { color: #1976d2; }
+    .prop-section-header[data-section="layout"] h4 { color: #7c3aed; }
+    .prop-section-header[data-section="behavior"] h4 { color: #0d9488; }
+    .prop-section-header[data-section="rules"] h4 { color: #ea580c; }
+    .prop-section-header[data-section="style"] h4 { color: #c2185b; }
+    .prop-section-header[data-section="form"] h4 { color: #1976d2; }
+    .collapse-icon {
+      font-size: 8px; color: #bbb; transition: transform 0.15s;
+      width: 14px; height: 14px; display: flex; align-items: center;
+      justify-content: center; border-radius: 3px;
+    }
+    .collapse-icon:hover { background: #f0f0f0; color: #666; }
+    .collapse-icon--collapsed { transform: rotate(-90deg); }
+
+    /* ─ Prop Rows ─ */
+    .prop-row {
+      display: grid; grid-template-columns: 62px 1fr;
+      align-items: center; gap: 4px; min-height: 26px; margin-bottom: 1px;
+    }
+    .prop-row-full { grid-template-columns: 1fr; margin-bottom: 3px; }
+    .prop-label {
+      font-size: 11px; color: #999; font-weight: 400;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+      padding-left: 1px; line-height: 1;
+    }
+
+    /* ─ Figma-style input ─ */
+    .prop-input {
+      width: 100%; border: 1px solid transparent; border-radius: 4px;
+      padding: 5px 7px; font-size: 11px; background: #f5f5f5;
+      color: var(--zrd-text); outline: none; min-width: 0;
+      font-family: inherit; box-sizing: border-box;
+      transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
+    }
+    .prop-input:hover { background: #efefef; border-color: #ddd; }
+    .prop-input:focus { border-color: #1976d2; background: white; box-shadow: 0 0 0 2px rgba(25,118,210,0.08); }
+    select.prop-input {
+      padding: 4px 20px 4px 7px; cursor: pointer; appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23999'/%3E%3C/svg%3E");
+      background-repeat: no-repeat; background-position: right 6px center;
+    }
+    textarea.prop-input {
+      min-height: 44px; resize: vertical; font-family: 'SF Mono','Consolas','Monaco',monospace;
+      font-size: 10px; line-height: 1.5; padding: 6px 7px;
+    }
+
+    /* ─ Numeric stepper (Figma-style) ─ */
+    .prop-stepper {
+      display: flex; align-items: center; background: #f5f5f5;
+      border: 1px solid transparent; border-radius: 4px; overflow: hidden;
+      transition: border-color 0.12s;
+    }
+    .prop-stepper:hover { border-color: #ddd; }
+    .prop-stepper:focus-within { border-color: #1976d2; background: white; }
+    .prop-stepper input {
+      border: none; background: transparent; width: 100%;
+      font-size: 11px; color: var(--zrd-text); outline: none;
+      padding: 4px 2px 4px 7px; min-width: 0; font-family: inherit;
+      -moz-appearance: textfield;
+    }
+    .prop-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
+    .prop-stepper-btns {
+      display: flex; flex-direction: column; border-left: 1px solid #eee;
+    }
+    .prop-stepper-btn {
+      border: none; background: none; cursor: pointer; padding: 0;
+      width: 18px; height: 12px; display: flex; align-items: center;
+      justify-content: center; font-size: 7px; color: #999;
+      transition: all 0.1s;
+    }
+    .prop-stepper-btn:hover { background: #e8e8e8; color: #333; }
+
+    /* ─ Position grid (4-cell Figma layout) ─ */
+    .prop-pos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
+    .prop-pos-cell {
+      display: flex; align-items: center; background: #f5f5f5;
+      border: 1px solid transparent; border-radius: 4px; padding: 0 6px;
+      height: 26px; gap: 3px; transition: border-color 0.12s;
+    }
+    .prop-pos-cell:hover { border-color: #ddd; }
+    .prop-pos-cell:focus-within { border-color: #1976d2; background: white; }
+    .prop-pos-label {
+      font-size: 9px; font-weight: 700; width: 10px; text-align: center;
+      flex-shrink: 0; user-select: none;
+    }
+    .prop-pos-label--x { color: #ef4444; }
+    .prop-pos-label--y { color: #3b82f6; }
+    .prop-pos-label--w { color: #8b5cf6; }
+    .prop-pos-label--h { color: #10b981; }
+    .prop-pos-cell input {
+      border: none; background: transparent; width: 100%;
+      font-size: 11px; color: var(--zrd-text); outline: none;
+      padding: 0; min-width: 0; font-family: inherit;
+    }
+
+    /* ─ Toggle switches (Figma compact) ─ */
+    .prop-toggle {
+      display: flex; align-items: center; gap: 8px;
+      min-height: 24px; padding: 1px 0;
+    }
+    .prop-switch {
+      position: relative; width: 28px; height: 16px; border-radius: 8px;
+      background: #d4d4d4; cursor: pointer; transition: background 0.2s;
+      flex-shrink: 0; border: none; padding: 0;
+    }
+    .prop-switch--active { background: #1976d2; }
+    .prop-switch::after {
+      content: ''; position: absolute; top: 2px; left: 2px;
+      width: 12px; height: 12px; border-radius: 50%;
+      background: white; box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+      transition: transform 0.2s;
+    }
+    .prop-switch--active::after { transform: translateX(12px); }
+    .prop-toggle-label { font-size: 11px; color: #888; }
+    .prop-toggle:hover .prop-toggle-label { color: #555; }
+
+    /* ─ Segmented control (alignment, format) ─ */
+    .prop-segmented {
+      display: flex; border: 1px solid #e0e0e0; border-radius: 5px;
+      overflow: hidden; background: #f5f5f5;
+    }
+    .prop-seg-btn {
+      flex: 1; padding: 4px 0; background: transparent; border: none;
+      border-right: 1px solid #e0e0e0; cursor: pointer;
+      font-size: 11px; color: #999; transition: all 0.12s; text-align: center;
+      font-family: inherit;
+    }
+    .prop-seg-btn:last-child { border-right: none; }
+    .prop-seg-btn:hover { background: #eee; color: #555; }
+    .prop-seg-btn--active { background: #1976d2; color: white; }
+
+    /* ─ Color picker (swatch + hex inline) ─ */
+    .prop-color-row { display: flex; align-items: center; gap: 6px; }
+    .prop-color-swatch {
+      width: 22px; height: 22px; border-radius: 5px;
+      border: 1px solid #ddd; 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 6px; font-size: 10px;
+      font-family: 'SF Mono','Consolas',monospace;
+      background: #f5f5f5; color: var(--zrd-text); width: 70px; outline: none;
+      box-sizing: border-box;
+    }
+    .prop-color-hex:hover { border-color: #ddd; }
+    .prop-color-hex:focus { border-color: #1976d2; background: white; }
+
+    /* ─ Info badge ─ */
+    .prop-info {
+      display: flex; align-items: center; gap: 4px;
+      padding: 5px 8px; border-radius: 4px; background: #f0f7ff;
+      font-size: 10px; color: #1976d2; margin-bottom: 4px;
+    }
+
+    /* ─ Divider line ─ */
+    .prop-divider { height: 1px; background: #f0f0f0; margin: 4px 0; }
+
+    /* ─ Empty state ─ */
+    .props-empty {
+      text-align: center; padding: 32px 16px; color: #ccc;
+    }
+    .props-empty-icon { font-size: 28px; margin-bottom: 6px; opacity: 0.4; }
+    .props-empty-text { font-size: 11px; line-height: 1.5; }
+
+    /* ─ Type badge ─ */
+    .props-type-badge {
+      display: inline-flex; align-items: center; gap: 4px;
+      padding: 3px 8px; border-radius: 4px;
+      font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
+      text-transform: uppercase;
+    }
+    .props-field-id {
+      font-size: 10px; color: #bbb; font-family: 'SF Mono','Consolas',monospace;
+      margin-top: 2px;
+    }
+
+    /* ─ JSON view ─ */
+    .json-panel {
+      font-family: 'SF Mono','Consolas','Monaco',monospace; font-size: 11px;
+      line-height: 1.5; background: #1e1e2d; color: #a2a3b7;
+      padding: 16px; border-radius: 4px; overflow: auto;
+      white-space: pre; tab-size: 2;
+    }
+
+    /* ─── InteractJS Drag & Drop ─────────────────── */
+    .dragging { opacity: 0.4; cursor: grabbing !important; }
+    .drag-clone {
+      position: fixed; pointer-events: none; z-index: 9999;
+      opacity: 0.85; border: 2px solid var(--zrd-accent);
+      border-radius: 6px; background: white;
+      box-shadow: 0 8px 24px rgba(25,118,210,0.25);
+      padding: 8px 12px; font-size: 12px; font-weight: 500;
+      color: var(--zrd-accent); max-width: 200px;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    }
+    .drop-active { border: 2px dashed var(--zrd-accent) !important; background: rgba(25,118,210,0.04) !important; }
+    .drop-target { background: rgba(25,118,210,0.1) !important; border-color: var(--zrd-accent) !important; }
+    .resize-active { outline: 2px dashed var(--zrd-accent); outline-offset: 2px; }
+    .drag-insert-line {
+      position: absolute; left: 4px; right: 4px; height: 2px;
+      background: var(--zrd-accent); border-radius: 1px; z-index: 10;
+      pointer-events: none;
+    }
+    .drag-insert-line::before, .drag-insert-line::after {
+      content: ''; position: absolute; top: -3px;
+      width: 8px; height: 8px; border-radius: 50%;
+      background: var(--zrd-accent);
+    }
+    .drag-insert-line::before { left: -4px; }
+    .drag-insert-line::after { right: -4px; }
+    .canvas-field.can-drop { box-shadow: 0 0 0 2px rgba(25,118,210,0.3); }
+    .section-drop-zone {
+      min-height: 8px; transition: all 0.15s; border-radius: 4px;
+      margin: 2px 4px;
+    }
+    .section-drop-zone.drop-active {
+      min-height: 32px; border: 2px dashed var(--zrd-accent);
+      background: rgba(25,118,210,0.06);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 11px; color: var(--zrd-accent);
+    }
   `; }
     // ─── Lifecycle ────────────────────────────────────
     updated(changed) {
@@ -1015,6 +1015,84 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
         this.selectedFieldId = id;
         this.commitChange();
     }
+    /** Handle drop from toolbox OR API fields — unified */
+    handleCanvasDrop(e, sectionIndex) {
+        e.preventDefault();
+        const fieldName = e.dataTransfer?.getData('field-name');
+        const dsId = e.dataTransfer?.getData('ds-id');
+        if (fieldName && dsId) {
+            // Drop from API tab — create field with smart type + binding
+            this.addApiField(fieldName, dsId, sectionIndex);
+        }
+        else if (this.dragType) {
+            // Drop from toolbox
+            this.addField(this.dragType, sectionIndex);
+        }
+        this.dragType = null;
+    }
+    /** Add a field from an API data source with smart type detection */
+    addApiField(fieldName, dsId, sectionIndex = 0) {
+        if (!this.schema) {
+            this.schema = {
+                id: 'new-form', version: '1.0', title: 'Nuevo Formulario',
+                layout: { type: 'grid', columns: 2 },
+                sections: [{ id: 'main', title: 'Datos', fields: [] }],
+            };
+            this.undoStack = [JSON.stringify(this.schema)];
+        }
+        if (sectionIndex >= this.schema.sections.length)
+            sectionIndex = 0;
+        const type = this.inferFieldType(fieldName);
+        const id = `${fieldName.toLowerCase().replace(/[^a-z0-9]/g, '_')}_${Date.now()}`;
+        const label = this.humanizeFieldName(fieldName);
+        const meta = getAllFields().find(f => f.type === type);
+        this.schema.sections[sectionIndex].fields.push({
+            id,
+            type,
+            field: fieldName,
+            label,
+            props: { ...meta?.defaultProps, dataSourceId: dsId },
+        });
+        this.selectedFieldId = id;
+        this.commitChange();
+    }
+    /** Infer field type from column/field name */
+    inferFieldType(name) {
+        const lower = name.toLowerCase();
+        if (lower.includes('email') || lower.includes('correo'))
+            return 'email';
+        if (lower.includes('phone') || lower.includes('telefono') || lower.includes('celular'))
+            return 'phone';
+        if (lower.includes('fecha') || lower.includes('date') || lower.includes('nacimiento') || lower.includes('ingreso') || lower.includes('vencimiento'))
+            return 'date';
+        if (lower.includes('precio') || lower.includes('price') || lower.includes('costo') || lower.includes('monto') || lower.includes('total') || lower.includes('saldo') || lower.includes('salario') || lower.includes('limite'))
+            return 'currency';
+        if (lower.includes('cantidad') || lower.includes('qty') || lower.includes('stock') || lower.includes('edad'))
+            return 'number';
+        if (lower.includes('activ') || lower.includes('active') || lower.includes('enabled') || lower.includes('visible'))
+            return 'switch';
+        if (lower.includes('descripcion') || lower.includes('description') || lower.includes('notas') || lower.includes('notes') || lower.includes('observ'))
+            return 'textarea';
+        if (lower.includes('password') || lower.includes('clave'))
+            return 'password';
+        if (lower.includes('url') || lower.includes('website') || lower.includes('link'))
+            return 'url';
+        if (lower.includes('imagen') || lower.includes('image') || lower.includes('foto') || lower.includes('avatar'))
+            return 'image';
+        if (lower.includes('pais') || lower.includes('country') || lower.includes('estado') || lower.includes('tipo') || lower.includes('status') || lower.includes('genero') || lower.includes('categoria'))
+            return 'select';
+        if (lower.includes('direccion') || lower.includes('address'))
+            return 'address';
+        return 'text';
+    }
+    /** Convert FIELD_NAME to "Field Name" */
+    humanizeFieldName(name) {
+        return name
+            .replace(/([A-Z])/g, ' $1')
+            .replace(/[_-]/g, ' ')
+            .replace(/\b\w/g, c => c.toUpperCase())
+            .trim();
+    }
     removeField(si, fi) {
         if (!this.schema)
             return;
@@ -1047,77 +1125,77 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
     }
     // ─── Render ───────────────────────────────────────
     render() {
-        return html `
-      <div class="designer">
-        ${this.renderToolbar()}
-        ${this.renderLeftPanel()}
-        <div class="panel-resize"></div>
-        ${this.renderCanvas()}
-        <div class="panel-resize"></div>
-        ${this.renderRightPanel()}
-      </div>
+        return html `
+      <div class="designer">
+        ${this.renderToolbar()}
+        ${this.renderLeftPanel()}
+        <div class="panel-resize"></div>
+        ${this.renderCanvas()}
+        <div class="panel-resize"></div>
+        ${this.renderRightPanel()}
+      </div>
     `;
     }
     // ─── Toolbar ──────────────────────────────────────
     renderToolbar() {
-        return html `
-      <div class="toolbar">
+        return html `
+      <div class="toolbar">
         ${this.editingTitle
-            ? html `<input class="report-name-input" .value="${this.schema?.title ?? ''}"
+            ? html `<input class="report-name-input" .value="${this.schema?.title ?? ''}"
               @blur="${(e) => { if (this.schema)
-                this.schema.title = e.target.value; this.editingTitle = false; this.commitChange(); }}"
+                this.schema.title = e.target.value; this.editingTitle = false; this.commitChange(); }}"
               @keydown="${(e) => { if (e.key === 'Enter')
-                e.target.blur(); }}"
+                e.target.blur(); }}"
             />`
-            : html `<span class="report-name" @click="${() => { this.editingTitle = true; }}">${this.schema?.title || 'Sin titulo'}</span>`}
-
-        <div class="toolbar-sep"></div>
-
-        <button class="tb-btn" ?disabled="${this.undoStack.length <= 1}" @click="${this.undo}" title="Deshacer (Ctrl+Z)">↩ Deshacer</button>
-        <button class="tb-btn" ?disabled="${this.redoStack.length === 0}" @click="${this.redo}" title="Rehacer (Ctrl+Y)">↪ Rehacer</button>
-
-        <div class="toolbar-sep"></div>
-
+            : html `<span class="report-name" @click="${() => { this.editingTitle = true; }}">${this.schema?.title || 'Sin titulo'}</span>`}
+
+        <div class="toolbar-sep"></div>
+
+        <button class="tb-btn" ?disabled="${this.undoStack.length <= 1}" @click="${this.undo}" title="Deshacer (Ctrl+Z)">↩ Deshacer</button>
+        <button class="tb-btn" ?disabled="${this.redoStack.length === 0}" @click="${this.redo}" title="Rehacer (Ctrl+Y)">↪ Rehacer</button>
+
+        <div class="toolbar-sep"></div>
+
         <button class="tb-btn" @click="${() => {
             if (!this.schema)
                 return;
             this.schema.sections.push({ id: `section_${Date.now()}`, title: 'Nueva Seccion', fields: [] });
             this.commitChange();
-        }}">+ Seccion</button>
-
-        <div style="position:relative;display:inline-block;">
-          <button class="tb-btn" @click="${() => { this.showTemplateMenu = !this.showTemplateMenu; }}">📋 Plantillas ▾</button>
-          ${this.showTemplateMenu ? this.renderTemplateMenu() : nothing}
-        </div>
-
+        }}">+ Seccion</button>
+
+        <div style="position:relative;display:inline-block;">
+          <button class="tb-btn" @click="${() => { this.showTemplateMenu = !this.showTemplateMenu; }}">📋 Plantillas ▾</button>
+          ${this.showTemplateMenu ? this.renderTemplateMenu() : nothing}
+        </div>
+
         <button class="tb-btn tb-btn--danger" @click="${() => {
             this.schema = { id: 'new-form', version: '1.0', title: 'Nuevo Formulario', layout: { type: 'grid', columns: 2 }, sections: [{ id: 'main', title: 'Datos', fields: [] }] };
             this.undoStack = [JSON.stringify(this.schema)];
             this.redoStack = [];
             this.selectedFieldId = null;
             this.commitChange();
-        }}">🗑 Nuevo</button>
-
-        <div class="toolbar-sep"></div>
-
-        <button class="tb-btn ${this.viewMode === 'design' ? 'tb-btn--active' : ''}" @click="${() => { this.viewMode = 'design'; }}">✏️ Diseño</button>
-        <button class="tb-btn ${this.viewMode === 'preview' ? 'tb-btn--active' : ''}" @click="${() => { this.viewMode = 'preview'; }}">👁 Preview</button>
-        <button class="tb-btn ${this.viewMode === 'json' ? 'tb-btn--active' : ''}" @click="${() => { this.viewMode = 'json'; }}">&lt;/&gt; JSON</button>
-
-        <span class="tb-spacer"></span>
-
+        }}">🗑 Nuevo</button>
+
+        <div class="toolbar-sep"></div>
+
+        <button class="tb-btn ${this.viewMode === 'design' ? 'tb-btn--active' : ''}" @click="${() => { this.viewMode = 'design'; }}">✏️ Diseño</button>
+        <button class="tb-btn ${this.viewMode === 'preview' ? 'tb-btn--active' : ''}" @click="${() => { this.viewMode = 'preview'; }}">👁 Preview</button>
+        <button class="tb-btn ${this.viewMode === 'json' ? 'tb-btn--active' : ''}" @click="${() => { this.viewMode = 'json'; }}">&lt;/&gt; JSON</button>
+
+        <span class="tb-spacer"></span>
+
         <button class="tb-btn" @click="${() => {
             if (this.schema) {
                 navigator.clipboard.writeText(JSON.stringify(this.schema, null, 2));
             }
-        }}">📋 Copiar</button>
-
-        <div class="zoom-controls">
-          <button class="tb-btn zoom-btn" @click="${() => { this.zoom = Math.max(0.5, this.zoom - 0.1); }}">−</button>
-          <span class="zoom-label" @click="${() => { this.zoom = 1; }}">${Math.round(this.zoom * 100)}%</span>
-          <button class="tb-btn zoom-btn" @click="${() => { this.zoom = Math.min(2, this.zoom + 0.1); }}">+</button>
-        </div>
-      </div>
+        }}">📋 Copiar</button>
+
+        <div class="zoom-controls">
+          <button class="tb-btn zoom-btn" @click="${() => { this.zoom = Math.max(0.5, this.zoom - 0.1); }}">−</button>
+          <span class="zoom-label" @click="${() => { this.zoom = 1; }}">${Math.round(this.zoom * 100)}%</span>
+          <button class="tb-btn zoom-btn" @click="${() => { this.zoom = Math.min(2, this.zoom + 0.1); }}">+</button>
+        </div>
+      </div>
     `;
     }
     // ─── Left Panel ───────────────────────────────────
@@ -1129,107 +1207,103 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
             { key: 'media', label: 'Media' },
             { key: 'layout', label: 'Layout' },
         ];
-        return html `
-      <div class="left-panel">
-        <div class="panel-tabs">
-          <button class="panel-tab ${this.leftTab === 'fields' ? 'panel-tab--active' : ''}" @click="${() => { this.leftTab = 'fields'; }}">Campos</button>
-          <button class="panel-tab ${this.leftTab === 'sections' ? 'panel-tab--active' : ''}" @click="${() => { this.leftTab = 'sections'; }}">Secciones</button>
-          <button class="panel-tab ${this.leftTab === 'api' ? 'panel-tab--active' : ''}" @click="${() => { this.leftTab = 'api'; }}" style="${this.leftTab === 'api' ? 'color:#ea580c;border-bottom-color:#ea580c;' : ''}">API</button>
-        </div>
-        <div class="panel-content">
-          ${this.leftTab === 'fields' ? html `
+        return html `
+      <div class="left-panel">
+        <div class="panel-tabs">
+          <button class="panel-tab ${this.leftTab === 'fields' ? 'panel-tab--active' : ''}" @click="${() => { this.leftTab = 'fields'; }}">Campos</button>
+          <button class="panel-tab ${this.leftTab === 'sections' ? 'panel-tab--active' : ''}" @click="${() => { this.leftTab = 'sections'; }}">Secciones</button>
+          <button class="panel-tab ${this.leftTab === 'api' ? 'panel-tab--active' : ''}" @click="${() => { this.leftTab = 'api'; }}" style="${this.leftTab === 'api' ? 'color:#ea580c;border-bottom-color:#ea580c;' : ''}">API</button>
+        </div>
+        <div class="panel-content">
+          ${this.leftTab === 'fields' ? html `
             ${categories.map(cat => {
             const items = getFieldsByCategory(cat.key);
             if (items.length === 0)
                 return nothing;
-            return html `
-                <div class="toolbox-section">${cat.label}</div>
-                <div class="toolbox-grid">
-                  ${items.map(f => html `
-                    <div class="toolbox-item"
-                      draggable="true"
-                      data-field-type="${f.type}"
-                      @dragstart="${(e) => { this.dragType = f.type; e.dataTransfer?.setData('text/plain', f.type); }}"
-                      @dragend="${() => { this.dragType = null; }}"
-                      @dblclick="${() => this.addField(f.type)}"
-                      title="${f.label}"
-                    >
-                      <span class="toolbox-icon">${unsafeHTML(resolveIcon(f.icon, this.provider))}</span>
-                      <span class="toolbox-label">${f.label}</span>
-                    </div>
-                  `)}
-                </div>
+            return html `
+                <div class="toolbox-section">${cat.label}</div>
+                <div class="toolbox-grid">
+                  ${items.map(f => html `
+                    <div class="toolbox-item"
+                      draggable="true"
+                      data-field-type="${f.type}"
+                      @dragstart="${(e) => { this.dragType = f.type; e.dataTransfer?.setData('text/plain', f.type); }}"
+                      @dragend="${() => { this.dragType = null; }}"
+                      @dblclick="${() => this.addField(f.type)}"
+                      title="${f.label}"
+                    >
+                      <span class="toolbox-icon">${unsafeHTML(resolveIcon(f.icon, this.provider))}</span>
+                      <span class="toolbox-label">${f.label}</span>
+                    </div>
+                  `)}
+                </div>
               `;
-        })}
-          ` : this.leftTab === 'sections' ? html `
-            ${this.schema?.sections.map((s, i) => html `
-              <div style="padding:8px 10px;margin:2px 4px;background:${i % 2 === 0 ? '#f8f9fa' : 'white'};border-radius:6px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:8px;border:1px solid #eee;transition:all 0.15s;"
-                @click="${() => { }}"
-              >
-                <span style="background:#e3f2fd;color:#1976d2;font-weight:700;font-size:10px;padding:2px 6px;border-radius:4px;">§${i + 1}</span>
-                <span style="flex:1;font-weight:500;">${s.title ?? 'Sin titulo'}</span>
-                <span style="color:#aaa;font-size:10px;">${s.fields.length}</span>
-              </div>
-            `) ?? nothing}
-            <button style="margin:8px 4px;padding:8px;width:calc(100% - 8px);border:1px dashed #ccc;border-radius:6px;background:none;cursor:pointer;font-size:11px;color:#888;font-family:inherit;transition:all 0.15s;"
+        })}
+          ` : this.leftTab === 'sections' ? html `
+            ${this.schema?.sections.map((s, i) => html `
+              <div style="padding:8px 10px;margin:2px 4px;background:${i % 2 === 0 ? '#f8f9fa' : 'white'};border-radius:6px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:8px;border:1px solid #eee;transition:all 0.15s;"
+                @click="${() => { }}"
+              >
+                <span style="background:#e3f2fd;color:#1976d2;font-weight:700;font-size:10px;padding:2px 6px;border-radius:4px;">§${i + 1}</span>
+                <span style="flex:1;font-weight:500;">${s.title ?? 'Sin titulo'}</span>
+                <span style="color:#aaa;font-size:10px;">${s.fields.length}</span>
+              </div>
+            `) ?? nothing}
+            <button style="margin:8px 4px;padding:8px;width:calc(100% - 8px);border:1px dashed #ccc;border-radius:6px;background:none;cursor:pointer;font-size:11px;color:#888;font-family:inherit;transition:all 0.15s;"
               @click="${() => { if (this.schema) {
             this.schema.sections.push({ id: 'section_' + Date.now(), title: 'Nueva Seccion', fields: [] });
             this.commitChange();
-        } }}"
-            >+ Agregar Seccion</button>
-          ` : this.renderApiPanel()}
-        </div>
-      </div>
+        } }}"
+            >+ Agregar Seccion</button>
+          ` : this.renderApiPanel()}
+        </div>
+      </div>
     `;
     }
     // ─── Canvas ───────────────────────────────────────
     renderCanvas() {
-        return html `
-      <div class="canvas-area">
+        return html `
+      <div class="canvas-area">
         ${this.viewMode === 'json'
             ? html `<div class="json-panel" style="width:100%;max-width:800px;">${JSON.stringify(this.schema, null, 2)}</div>`
             : this.viewMode === 'preview'
                 ? html `<div class="canvas" style="transform:scale(${this.zoom});"><zentto-studio-renderer .schema="${this.schema}" .data="${this.data}"></zentto-studio-renderer></div>`
-                : this.renderDesignCanvas()}
-      </div>
+                : this.renderDesignCanvas()}
+      </div>
     `;
     }
     renderDesignCanvas() {
         if (!this.schema) {
-            return html `<div class="drop-zone ${this.dragType ? 'drop-zone--active' : ''}" data-section-index="0" style="width:500px;height:200px;display:flex;align-items:center;justify-content:center;"
-        @dragover="${(e) => e.preventDefault()}"
-        @drop="${(e) => { e.preventDefault(); if (this.dragType) {
-                this.addField(this.dragType);
-                this.dragType = null;
-            } }}"
-      >Arrastra un campo aqui para empezar</div>`;
+            return html `<div class="drop-zone drop-zone--active" data-section-index="0" style="width:500px;height:200px;display:flex;align-items:center;justify-content:center;"
+        @dragover="${(e) => e.preventDefault()}"
+        @drop="${(e) => this.handleCanvasDrop(e, 0)}"
+      >Arrastra campos del toolbox o de la API aqui</div>`;
         }
         const cols = this.schema.layout.columns ?? 1;
-        return html `
-      <div class="canvas" style="transform:scale(${this.zoom});" @click="${() => { this.selectedFieldId = null; }}">
-        ${this.schema.sections.map((section, si) => html `
-          <div class="canvas-section">
-            <div class="canvas-section-header" @click="${(e) => e.stopPropagation()}">
-              <span style="font-size:10px;color:var(--zrd-accent);">§${si + 1}</span>
-              ${section.title ?? 'Seccion'}
-              <span style="flex:1;"></span>
-              <span style="font-size:10px;color:var(--zrd-text-muted);">${section.fields.length} campos</span>
-            </div>
-            <div class="section-drop-zone" data-section-index="${si}" data-position="top"></div>
-            <div class="canvas-grid" data-section-index="${si}" style="grid-template-columns:repeat(${section.columns ?? cols}, 1fr);">
-              ${section.fields.map((field, fi) => this.renderCanvasField(field, si, fi, section.columns ?? cols))}
-            </div>
-            <div class="drop-zone ${this.dragType ? 'drop-zone--active' : ''}"
-              data-section-index="${si}"
-              @dragover="${(e) => e.preventDefault()}"
-              @drop="${(e) => { e.preventDefault(); if (this.dragType) {
-            this.addField(this.dragType, si);
-            this.dragType = null;
-        } }}"
-            >${this.dragType ? '↓ Soltar aqui' : '+ Arrastra campos'}</div>
-          </div>
-        `)}
-      </div>
+        return html `
+      <div class="canvas" style="transform:scale(${this.zoom});" @click="${() => { this.selectedFieldId = null; }}">
+        ${this.schema.sections.map((section, si) => html `
+          <div class="canvas-section">
+            <div class="canvas-section-header" @click="${(e) => e.stopPropagation()}">
+              <span style="font-size:10px;color:var(--zrd-accent);">§${si + 1}</span>
+              ${section.title ?? 'Seccion'}
+              <span style="flex:1;"></span>
+              <span style="font-size:10px;color:var(--zrd-text-muted);">${section.fields.length} campos</span>
+            </div>
+            <div class="section-drop-zone" data-section-index="${si}" data-position="top"></div>
+            <div class="canvas-grid" data-section-index="${si}" style="grid-template-columns:repeat(${section.columns ?? cols}, 1fr);">
+              ${section.fields.map((field, fi) => this.renderCanvasField(field, si, fi, section.columns ?? cols))}
+            </div>
+            <div class="drop-zone ${this.dragType ? 'drop-zone--active' : ''}"
+              data-section-index="${si}"
+              @dragover="${(e) => { e.preventDefault(); e.currentTarget.classList.add('drop-zone--active'); }}"
+              @dragleave="${(e) => { if (!this.dragType)
+            e.currentTarget.classList.remove('drop-zone--active'); }}"
+              @drop="${(e) => this.handleCanvasDrop(e, si)}"
+            >${this.dragType ? '↓ Soltar aqui' : '+ Arrastra campos o campos de API'}</div>
+          </div>
+        `)}
+      </div>
     `;
     }
     renderCanvasField(field, si, fi, maxCols) {
@@ -1238,39 +1312,39 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
         const fullWidth = ['separator', 'heading', 'html', 'datagrid', 'report', 'chart'].includes(field.type);
         const gridCol = fullWidth ? '1 / -1' : span > 1 ? `span ${span}` : '';
         const typeColor = FIELD_TYPE_COLORS[field.type] ?? 'background:#eceff1;color:#546e7a;';
-        return html `
-      <div class="canvas-field ${isSelected ? 'canvas-field--selected' : ''}"
-        style="${gridCol ? `grid-column:${gridCol};` : ''}"
-        data-field-id="${field.id}"
-        data-section-index="${si}"
-        @click="${(e) => { e.stopPropagation(); this.selectedFieldId = field.id; }}"
-      >
-        <!-- Type badge -->
-        <span class="field-type-badge" style="${typeColor}">${field.type}</span>
-
-        <!-- Action buttons -->
-        <div class="field-actions">
-          ${fi > 0 ? html `<button class="fa-btn fa-btn--move" @click="${(e) => { e.stopPropagation(); this.moveField(si, fi, -1); }}" title="Subir">↑</button>` : ''}
-          ${fi < (this.schema?.sections[si].fields.length ?? 0) - 1 ? html `<button class="fa-btn fa-btn--move" @click="${(e) => { e.stopPropagation(); this.moveField(si, fi, 1); }}" title="Bajar">↓</button>` : ''}
-          <button class="fa-btn fa-btn--copy" @click="${(e) => { e.stopPropagation(); this.duplicateField(si, fi); }}" title="Duplicar">⎘</button>
-          <button class="fa-btn fa-btn--delete" @click="${(e) => { e.stopPropagation(); this.removeField(si, fi); }}" title="Eliminar">✕</button>
-        </div>
-
-        <!-- Resize handles -->
-        ${isSelected ? html `
-          <div class="rh rh-nw"></div><div class="rh rh-n"></div><div class="rh rh-ne"></div>
-          <div class="rh rh-e"></div><div class="rh rh-se"></div><div class="rh rh-s"></div>
-          <div class="rh rh-sw"></div><div class="rh rh-w"></div>
-        ` : ''}
-
-        <!-- Field preview -->
-        <div class="field-preview">
-          <div class="field-preview-label">${field.label ?? field.id}${field.required ? ' *' : ''}</div>
-          <div class="field-preview-input ${this.getPreviewClass(field.type)}">
-            ${this.getPreviewContent(field)}
-          </div>
-        </div>
-      </div>
+        return html `
+      <div class="canvas-field ${isSelected ? 'canvas-field--selected' : ''}"
+        style="${gridCol ? `grid-column:${gridCol};` : ''}"
+        data-field-id="${field.id}"
+        data-section-index="${si}"
+        @click="${(e) => { e.stopPropagation(); this.selectedFieldId = field.id; }}"
+      >
+        <!-- Type badge -->
+        <span class="field-type-badge" style="${typeColor}">${field.type}</span>
+
+        <!-- Action buttons -->
+        <div class="field-actions">
+          ${fi > 0 ? html `<button class="fa-btn fa-btn--move" @click="${(e) => { e.stopPropagation(); this.moveField(si, fi, -1); }}" title="Subir">↑</button>` : ''}
+          ${fi < (this.schema?.sections[si].fields.length ?? 0) - 1 ? html `<button class="fa-btn fa-btn--move" @click="${(e) => { e.stopPropagation(); this.moveField(si, fi, 1); }}" title="Bajar">↓</button>` : ''}
+          <button class="fa-btn fa-btn--copy" @click="${(e) => { e.stopPropagation(); this.duplicateField(si, fi); }}" title="Duplicar">⎘</button>
+          <button class="fa-btn fa-btn--delete" @click="${(e) => { e.stopPropagation(); this.removeField(si, fi); }}" title="Eliminar">✕</button>
+        </div>
+
+        <!-- Resize handles -->
+        ${isSelected ? html `
+          <div class="rh rh-nw"></div><div class="rh rh-n"></div><div class="rh rh-ne"></div>
+          <div class="rh rh-e"></div><div class="rh rh-se"></div><div class="rh rh-s"></div>
+          <div class="rh rh-sw"></div><div class="rh rh-w"></div>
+        ` : ''}
+
+        <!-- Field preview -->
+        <div class="field-preview">
+          <div class="field-preview-label">${field.label ?? field.id}${field.required ? ' *' : ''}</div>
+          <div class="field-preview-input ${this.getPreviewClass(field.type)}">
+            ${this.getPreviewContent(field)}
+          </div>
+        </div>
+      </div>
     `;
     }
     getPreviewClass(type) {
@@ -1323,227 +1397,215 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
     renderRightPanel() {
         const field = this.selectedField;
         if (!field) {
-            return html `
-        <div class="right-panel">
-          <div class="props-empty">
-            <div class="props-empty-icon">⬚</div>
-            <div class="props-empty-text">Selecciona un campo<br/>para editar propiedades</div>
-          </div>
-          ${this.schema ? this.renderFormProperties() : ''}
-        </div>
+            return html `
+        <div class="right-panel">
+          <div class="props-empty">
+            <div class="props-empty-icon">⬚</div>
+            <div class="props-empty-text">Selecciona un campo<br/>para editar propiedades</div>
+          </div>
+          ${this.schema ? this.renderFormProperties() : ''}
+        </div>
       `;
         }
         const typeColor = FIELD_TYPE_COLORS[field.type] ?? 'background:#eceff1;color:#546e7a;';
-        return html `
-      <div class="right-panel">
-        <!-- Header with type badge -->
-        <div style="padding:8px 10px;border-bottom:1px solid #eee;">
-          <span class="props-type-badge" style="${typeColor}">${field.type.toUpperCase()}</span>
-          <div class="props-field-id">#${field.id}</div>
-        </div>
-
-        <!-- General -->
-        <div class="prop-section">
-          <div class="prop-section-header" data-section="general" @click="${() => this.toggleSection('general')}">
-            <span class="collapse-icon ${this.collapsedSections.has('general') ? 'collapse-icon--collapsed' : ''}">▾</span>
-            <h4>General</h4>
-          </div>
-          ${!this.collapsedSections.has('general') ? html `
-            <div class="prop-row"><span class="prop-label">Label</span><input class="prop-input" .value="${field.label ?? ''}" @input="${(e) => { field.label = e.target.value; this.emitChange(); }}" /></div>
-            <div class="prop-row"><span class="prop-label">Field</span><input class="prop-input" style="font-family:'SF Mono','Consolas',monospace;font-size:10px;" .value="${field.field}" @change="${(e) => { field.field = e.target.value; this.commitChange(); }}" /></div>
-            <div class="prop-row"><span class="prop-label">Placeholder</span><input class="prop-input" .value="${field.placeholder ?? ''}" @input="${(e) => { field.placeholder = e.target.value; this.emitChange(); }}" /></div>
-            <div class="prop-row"><span class="prop-label">Ayuda</span><input class="prop-input" .value="${field.helpText ?? ''}" @input="${(e) => { field.helpText = e.target.value; this.emitChange(); }}" /></div>
-          ` : ''}
-        </div>
-
-        <!-- Layout (Figma position grid) -->
-        <div class="prop-section">
-          <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('layout')}">
-            <span class="collapse-icon ${this.collapsedSections.has('layout') ? 'collapse-icon--collapsed' : ''}">▾</span>
-            <h4>Layout</h4>
-          </div>
-          ${!this.collapsedSections.has('layout') ? html `
-            <div class="prop-pos-grid">
-              <div class="prop-pos-cell">
-                <span class="prop-pos-label prop-pos-label--w">W</span>
-                <input type="number" min="1" max="6" .value="${String(field.colSpan ?? 1)}" @change="${(e) => { field.colSpan = parseInt(e.target.value) || 1; this.commitChange(); }}" />
-              </div>
-              <div class="prop-pos-cell">
-                <span class="prop-pos-label prop-pos-label--h">T</span>
-                <select .value="${field.type}" @change="${(e) => { field.type = e.target.value; this.commitChange(); }}" style="border:none;background:transparent;font-size:11px;width:100%;outline:none;color:var(--zrd-text);font-family:inherit;">
-                  ${getAllFields().map(f => html `<option value="${f.type}" ?selected="${f.type === field.type}">${f.label}</option>`)}
-                </select>
-              </div>
-            </div>
-            <div class="prop-divider"></div>
-            <div class="prop-row"><span class="prop-label">CSS Class</span><input class="prop-input" .value="${field.cssClass ?? ''}" placeholder="mi-clase" @input="${(e) => { field.cssClass = e.target.value; this.emitChange(); }}" /></div>
-          ` : ''}
-        </div>
-
-        <!-- Style -->
-        <div class="prop-section">
-          <div class="prop-section-header" data-section="style" @click="${() => this.toggleSection('style')}">
-            <span class="collapse-icon ${this.collapsedSections.has('style') ? 'collapse-icon--collapsed' : ''}">▾</span>
-            <h4>Estilo</h4>
-          </div>
-          ${!this.collapsedSections.has('style') ? html `
-            <div class="prop-row">
-              <span class="prop-label">Ancho</span>
-              <div class="prop-segmented">
-                ${['auto', '100%', '50%'].map(w => html `
-                  <button class="prop-seg-btn ${(field.width ?? 'auto') === w ? 'prop-seg-btn--active' : ''}"
-                    @click="${() => { field.width = w === 'auto' ? undefined : w; this.commitChange(); }}"
-                  >${w}</button>
-                `)}
-              </div>
-            </div>
-          ` : ''}
-        </div>
-
-        <!-- Behavior (toggles) -->
-        <div class="prop-section">
-          <div class="prop-section-header" data-section="behavior" @click="${() => this.toggleSection('behavior')}">
-            <span class="collapse-icon ${this.collapsedSections.has('behavior') ? 'collapse-icon--collapsed' : ''}">▾</span>
-            <h4>Comportamiento</h4>
-          </div>
-          ${!this.collapsedSections.has('behavior') ? html `
-            ${this.renderToggle('Requerido', field.required ?? false, (v) => { field.required = v; this.commitChange(); })}
-            ${this.renderToggle('Solo lectura', field.readOnly ?? false, (v) => { field.readOnly = v; this.commitChange(); })}
-            ${this.renderToggle('Deshabilitado', field.disabled ?? false, (v) => { field.disabled = v; this.commitChange(); })}
-            ${this.renderToggle('Oculto', field.hidden ?? false, (v) => { field.hidden = v; this.commitChange(); })}
-          ` : ''}
-        </div>
-
-        <!-- Rules (expressions) -->
-        <div class="prop-section">
-          <div class="prop-section-header" data-section="rules" @click="${() => this.toggleSection('rules')}">
-            <span class="collapse-icon ${this.collapsedSections.has('rules') ? 'collapse-icon--collapsed' : ''}">▾</span>
-            <h4>Reglas</h4>
-          </div>
-          ${!this.collapsedSections.has('rules') ? html `
-            <div class="prop-info">💡 Usa {campo} para referencias y expresiones</div>
-            <div class="prop-row prop-row-full"><span class="prop-label" style="margin-bottom:2px;">Condicion de visibilidad</span></div>
-            <div class="prop-row prop-row-full"><textarea class="prop-input" rows="2" .value="${field.visibilityRule ?? ''}" placeholder='{tipo} == "empresa" AND {activo} == true' @change="${(e) => { field.visibilityRule = e.target.value || undefined; this.commitChange(); }}"></textarea></div>
-            <div class="prop-row prop-row-full"><span class="prop-label" style="margin-bottom:2px;">Valor computado</span></div>
-            <div class="prop-row prop-row-full"><textarea class="prop-input" rows="2" .value="${field.computedValue ?? ''}" placeholder='{precio} * {cantidad} * (1 + {iva}/100)' @change="${(e) => { field.computedValue = e.target.value || undefined; this.commitChange(); }}"></textarea></div>
-            <div class="prop-divider"></div>
-            <div class="prop-row"><span class="prop-label">Default</span><input class="prop-input" .value="${String(field.defaultValue ?? '')}" @change="${(e) => { field.defaultValue = e.target.value || undefined; this.commitChange(); }}" /></div>
-          ` : ''}
-        </div>
-
-        <!-- Data Source (API connection like report-designer) -->
-        <div class="prop-section">
-          <div class="prop-section-header" data-section="datasource" @click="${() => this.toggleSection('datasource')}">
-            <span class="collapse-icon ${this.collapsedSections.has('datasource') ? 'collapse-icon--collapsed' : ''}">▾</span>
-            <h4>Origen de Datos</h4>
-          </div>
-          ${!this.collapsedSections.has('datasource') ? html `
-            <div class="prop-info">🔌 Conecta campos a APIs y endpoints</div>
+        return html `
+      <div class="right-panel">
+        <!-- Header with type badge -->
+        <div style="padding:8px 10px;border-bottom:1px solid #eee;">
+          <span class="props-type-badge" style="${typeColor}">${field.type.toUpperCase()}</span>
+          <div class="props-field-id">#${field.id}</div>
+        </div>
+
+        <!-- General -->
+        <div class="prop-section">
+          <div class="prop-section-header" data-section="general" @click="${() => this.toggleSection('general')}">
+            <span class="collapse-icon ${this.collapsedSections.has('general') ? 'collapse-icon--collapsed' : ''}">▾</span>
+            <h4>General</h4>
+          </div>
+          ${!this.collapsedSections.has('general') ? html `
+            <div class="prop-row"><span class="prop-label">Label</span><input class="prop-input" .value="${field.label ?? ''}" @input="${(e) => { field.label = e.target.value; this.emitChange(); }}" /></div>
+            <div class="prop-row"><span class="prop-label">Field</span><input class="prop-input" style="font-family:'SF Mono','Consolas',monospace;font-size:10px;" .value="${field.field}" @change="${(e) => { field.field = e.target.value; this.commitChange(); }}" /></div>
+            <div class="prop-row"><span class="prop-label">Placeholder</span><input class="prop-input" .value="${field.placeholder ?? ''}" @input="${(e) => { field.placeholder = e.target.value; this.emitChange(); }}" /></div>
+            <div class="prop-row"><span class="prop-label">Ayuda</span><input class="prop-input" .value="${field.helpText ?? ''}" @input="${(e) => { field.helpText = e.target.value; this.emitChange(); }}" /></div>
+          ` : ''}
+        </div>
+
+        <!-- Layout (Figma position grid) -->
+        <div class="prop-section">
+          <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('layout')}">
+            <span class="collapse-icon ${this.collapsedSections.has('layout') ? 'collapse-icon--collapsed' : ''}">▾</span>
+            <h4>Layout</h4>
+          </div>
+          ${!this.collapsedSections.has('layout') ? html `
+            <div class="prop-pos-grid">
+              <div class="prop-pos-cell">
+                <span class="prop-pos-label prop-pos-label--w">W</span>
+                <input type="number" min="1" max="6" .value="${String(field.colSpan ?? 1)}" @change="${(e) => { field.colSpan = parseInt(e.target.value) || 1; this.commitChange(); }}" />
+              </div>
+              <div class="prop-pos-cell">
+                <span class="prop-pos-label prop-pos-label--h">T</span>
+                <select .value="${field.type}" @change="${(e) => { field.type = e.target.value; this.commitChange(); }}" style="border:none;background:transparent;font-size:11px;width:100%;outline:none;color:var(--zrd-text);font-family:inherit;">
+                  ${getAllFields().map(f => html `<option value="${f.type}" ?selected="${f.type === field.type}">${f.label}</option>`)}
+                </select>
+              </div>
+            </div>
+            <div class="prop-divider"></div>
+            <div class="prop-row"><span class="prop-label">CSS Class</span><input class="prop-input" .value="${field.cssClass ?? ''}" placeholder="mi-clase" @input="${(e) => { field.cssClass = e.target.value; this.emitChange(); }}" /></div>
+          ` : ''}
+        </div>
+
+        <!-- Style -->
+        <div class="prop-section">
+          <div class="prop-section-header" data-section="style" @click="${() => this.toggleSection('style')}">
+            <span class="collapse-icon ${this.collapsedSections.has('style') ? 'collapse-icon--collapsed' : ''}">▾</span>
+            <h4>Estilo</h4>
+          </div>
+          ${!this.collapsedSections.has('style') ? html `
+            <div class="prop-row">
+              <span class="prop-label">Ancho</span>
+              <div class="prop-segmented">
+                ${['auto', '100%', '50%'].map(w => html `
+                  <button class="prop-seg-btn ${(field.width ?? 'auto') === w ? 'prop-seg-btn--active' : ''}"
+                    @click="${() => { field.width = w === 'auto' ? undefined : w; this.commitChange(); }}"
+                  >${w}</button>
+                `)}
+              </div>
+            </div>
+          ` : ''}
+        </div>
+
+        <!-- Behavior (toggles) -->
+        <div class="prop-section">
+          <div class="prop-section-header" data-section="behavior" @click="${() => this.toggleSection('behavior')}">
+            <span class="collapse-icon ${this.collapsedSections.has('behavior') ? 'collapse-icon--collapsed' : ''}">▾</span>
+            <h4>Comportamiento</h4>
+          </div>
+          ${!this.collapsedSections.has('behavior') ? html `
+            ${this.renderToggle('Requerido', field.required ?? false, (v) => { field.required = v; this.commitChange(); })}
+            ${this.renderToggle('Solo lectura', field.readOnly ?? false, (v) => { field.readOnly = v; this.commitChange(); })}
+            ${this.renderToggle('Deshabilitado', field.disabled ?? false, (v) => { field.disabled = v; this.commitChange(); })}
+            ${this.renderToggle('Oculto', field.hidden ?? false, (v) => { field.hidden = v; this.commitChange(); })}
+          ` : ''}
+        </div>
+
+        <!-- Rules (expressions) -->
+        <div class="prop-section">
+          <div class="prop-section-header" data-section="rules" @click="${() => this.toggleSection('rules')}">
+            <span class="collapse-icon ${this.collapsedSections.has('rules') ? 'collapse-icon--collapsed' : ''}">▾</span>
+            <h4>Reglas</h4>
+          </div>
+          ${!this.collapsedSections.has('rules') ? html `
+            <div class="prop-info">💡 Usa {campo} para referencias y expresiones</div>
+            <div class="prop-row prop-row-full"><span class="prop-label" style="margin-bottom:2px;">Condicion de visibilidad</span></div>
+            <div class="prop-row prop-row-full"><textarea class="prop-input" rows="2" .value="${field.visibilityRule ?? ''}" placeholder='{tipo} == "empresa" AND {activo} == true' @change="${(e) => { field.visibilityRule = e.target.value || undefined; this.commitChange(); }}"></textarea></div>
+            <div class="prop-row prop-row-full"><span class="prop-label" style="margin-bottom:2px;">Valor computado</span></div>
+            <div class="prop-row prop-row-full"><textarea class="prop-input" rows="2" .value="${field.computedValue ?? ''}" placeholder='{precio} * {cantidad} * (1 + {iva}/100)' @change="${(e) => { field.computedValue = e.target.value || undefined; this.commitChange(); }}"></textarea></div>
+            <div class="prop-divider"></div>
+            <div class="prop-row"><span class="prop-label">Default</span><input class="prop-input" .value="${String(field.defaultValue ?? '')}" @change="${(e) => { field.defaultValue = e.target.value || undefined; this.commitChange(); }}" /></div>
+          ` : ''}
+        </div>
+
+        <!-- Data Source (API connection like report-designer) -->
+        <div class="prop-section">
+          <div class="prop-section-header" data-section="datasource" @click="${() => this.toggleSection('datasource')}">
+            <span class="collapse-icon ${this.collapsedSections.has('datasource') ? 'collapse-icon--collapsed' : ''}">▾</span>
+            <h4>Origen de Datos</h4>
+          </div>
+          ${!this.collapsedSections.has('datasource') ? html `
+            <div class="prop-info">🔌 Conecta campos a APIs y endpoints</div>
             <div class="prop-row"><span class="prop-label">Endpoint</span><input class="prop-input" style="font-family:'SF Mono','Consolas',monospace;font-size:10px;" .value="${field.props?.endpoint ?? ''}" placeholder="/v1/clientes" @change="${(e) => { if (!field.props)
-            field.props = {}; field.props.endpoint = e.target.value || undefined; this.commitChange(); }}" /></div>
+            field.props = {}; field.props.endpoint = e.target.value || undefined; this.commitChange(); }}" /></div>
             <div class="prop-row"><span class="prop-label">Campo valor</span><input class="prop-input" .value="${field.props?.valueField ?? ''}" placeholder="id" @change="${(e) => { if (!field.props)
-            field.props = {}; field.props.valueField = e.target.value || undefined; this.commitChange(); }}" /></div>
+            field.props = {}; field.props.valueField = e.target.value || undefined; this.commitChange(); }}" /></div>
             <div class="prop-row"><span class="prop-label">Campo label</span><input class="prop-input" .value="${field.props?.displayField ?? ''}" placeholder="nombre" @change="${(e) => { if (!field.props)
-            field.props = {}; field.props.displayField = e.target.value || undefined; this.commitChange(); }}" /></div>
-            ${field.type === 'datagrid' || field.type === 'select' || field.type === 'lookup' ? html `
-              <div class="prop-divider"></div>
+            field.props = {}; field.props.displayField = e.target.value || undefined; this.commitChange(); }}" /></div>
+            ${field.type === 'datagrid' || field.type === 'select' || field.type === 'lookup' ? html `
+              <div class="prop-divider"></div>
               <div class="prop-row"><span class="prop-label">Data Source</span><input class="prop-input" .value="${field.props?.dataSourceId ?? ''}" placeholder="clientesList" @change="${(e) => { if (!field.props)
-            field.props = {}; field.props.dataSourceId = e.target.value || undefined; this.commitChange(); }}" /></div>
-            ` : ''}
-          ` : ''}
-        </div>
-      </div>
+            field.props = {}; field.props.dataSourceId = e.target.value || undefined; this.commitChange(); }}" /></div>
+            ` : ''}
+          ` : ''}
+        </div>
+      </div>
     `;
     }
     renderFormProperties() {
         if (!this.schema)
             return nothing;
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="form">
-          <span class="collapse-icon">▾</span>
-          <h4>Formulario</h4>
-        </div>
-        <div class="prop-row"><span class="prop-label">Titulo</span><input class="prop-input" .value="${this.schema.title}" @input="${(e) => { this.schema.title = e.target.value; this.emitChange(); }}" /></div>
-        <div class="prop-divider"></div>
-        <div class="prop-pos-grid">
-          <div class="prop-pos-cell">
-            <span class="prop-pos-label prop-pos-label--w">C</span>
-            <input type="number" min="1" max="6" .value="${String(this.schema.layout.columns ?? 1)}" @change="${(e) => { this.schema.layout.columns = parseInt(e.target.value) || 1; this.commitChange(); }}" />
-          </div>
-          <div class="prop-pos-cell">
-            <span class="prop-pos-label prop-pos-label--y">G</span>
-            <input type="number" min="0" .value="${String(this.schema.layout.gap ?? 16)}" @change="${(e) => { this.schema.layout.gap = parseInt(e.target.value) || 16; this.commitChange(); }}" />
-          </div>
-        </div>
-        <div style="font-size:9px;color:#bbb;margin-top:4px;display:flex;gap:12px;">
-          <span>C = Columnas</span><span>G = Gap (px)</span>
-        </div>
-      </div>
+        return html `
+      <div class="prop-section">
+        <div class="prop-section-header" data-section="form">
+          <span class="collapse-icon">▾</span>
+          <h4>Formulario</h4>
+        </div>
+        <div class="prop-row"><span class="prop-label">Titulo</span><input class="prop-input" .value="${this.schema.title}" @input="${(e) => { this.schema.title = e.target.value; this.emitChange(); }}" /></div>
+        <div class="prop-divider"></div>
+        <div class="prop-pos-grid">
+          <div class="prop-pos-cell">
+            <span class="prop-pos-label prop-pos-label--w">C</span>
+            <input type="number" min="1" max="6" .value="${String(this.schema.layout.columns ?? 1)}" @change="${(e) => { this.schema.layout.columns = parseInt(e.target.value) || 1; this.commitChange(); }}" />
+          </div>
+          <div class="prop-pos-cell">
+            <span class="prop-pos-label prop-pos-label--y">G</span>
+            <input type="number" min="0" .value="${String(this.schema.layout.gap ?? 16)}" @change="${(e) => { this.schema.layout.gap = parseInt(e.target.value) || 16; this.commitChange(); }}" />
+          </div>
+        </div>
+        <div style="font-size:9px;color:#bbb;margin-top:4px;display:flex;gap:12px;">
+          <span>C = Columnas</span><span>G = Gap (px)</span>
+        </div>
+      </div>
     `;
     }
     renderApiPanel() {
-        return html `
-      <div style="padding:4px;">
-        <!-- Auth Section -->
-        ${this.renderApiAuth()}
-
-        <!-- Quick connect (only when logged in or no auth needed) -->
-        <div style="padding:4px 8px;margin-top:4px;">
-          <div style="font-size:9px;font-weight:600;color:#aaa;text-transform:uppercase;margin-bottom:4px;">Conectar Endpoint</div>
-          <div style="display:flex;gap:4px;margin-bottom:6px;">
-            <select id="api-method" style="width:70px;padding:4px 6px;border:1px solid #ddd;border-radius:4px;font-size:10px;background:white;font-family:inherit;">
-              <option>GET</option><option>POST</option><option>PUT</option><option>DELETE</option>
-            </select>
-            <input id="api-url" style="flex:1;padding:4px 8px;border:1px solid #ddd;border-radius:4px;font-size:10px;font-family:'SF Mono','Consolas',monospace;background:#fafafa;" placeholder="/v1/clientes" />
-          </div>
-          <button style="width:100%;padding:6px;border:1px solid #ea580c;border-radius:5px;background:#fff7ed;color:#ea580c;cursor:pointer;font-size:11px;font-weight:600;font-family:inherit;transition:all 0.15s;"
-            @click="${this.fetchApiFields}"
-          >${this.apiLoading ? 'Cargando...' : '🔌 Probar Conexion'}</button>
-        </div>
-
-        <!-- Fetched sources -->
-        ${this.apiSources.length > 0 ? html `
-          <div style="margin-top:8px;">
-            ${this.apiSources.map(src => html `
-              <div style="margin:4px;border:1px solid #eee;border-radius:6px;overflow:hidden;">
-                <div style="padding:6px 8px;background:#f8f9fa;display:flex;align-items:center;gap:6px;border-bottom:1px solid #eee;">
-                  <span style="background:#ea580c;color:white;font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;">${src.method}</span>
-                  <span style="font-size:10px;font-weight:600;color:#333;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${src.name}</span>
-                  <span style="font-size:9px;color:#aaa;">${src.fields.length} campos</span>
-                </div>
-                <div style="padding:2px 4px;max-height:150px;overflow-y:auto;">
-                  ${src.fields.map(field => html `
-                    <div style="display:flex;align-items:center;gap:6px;padding:4px 6px;font-size:11px;cursor:grab;border-radius:3px;transition:background 0.1s;"
-                      draggable="true"
-                      @dragstart="${(e) => { this.dragType = 'text'; e.dataTransfer?.setData('text/plain', 'text'); e.dataTransfer?.setData('field-name', field); e.dataTransfer?.setData('ds-id', src.id); }}"
-                      @dblclick="${() => {
-            // Auto-create a field bound to this API field
-            this.addField('text');
-            const lastField = this.schema?.sections[0]?.fields[this.schema.sections[0].fields.length - 1];
-            if (lastField) {
-                lastField.field = field;
-                lastField.label = field.charAt(0).toUpperCase() + field.slice(1).replace(/([A-Z])/g, ' $1');
-                if (!lastField.props)
-                    lastField.props = {};
-                lastField.props.dataSourceId = src.id;
-                this.commitChange();
-            }
-        }}"
-                    >
-                      <span style="color:#1976d2;font-size:10px;">⬡</span>
-                      <span style="color:#555;">${field}</span>
-                    </div>
-                  `)}
-                </div>
-              </div>
-            `)}
-          </div>
-        ` : ''}
-
-        <!-- Zentto API shortcuts -->
-        <div style="margin-top:12px;padding:4px 8px;">
-          <div style="font-size:9px;font-weight:600;color:#aaa;text-transform:uppercase;margin-bottom:6px;">Accesos Rapidos Zentto</div>
+        return html `
+      <div style="padding:4px;">
+        <!-- Auth Section -->
+        ${this.renderApiAuth()}
+
+        <!-- Quick connect (only when logged in or no auth needed) -->
+        <div style="padding:4px 8px;margin-top:4px;">
+          <div style="font-size:9px;font-weight:600;color:#aaa;text-transform:uppercase;margin-bottom:4px;">Conectar Endpoint</div>
+          <div style="display:flex;gap:4px;margin-bottom:6px;">
+            <select id="api-method" style="width:70px;padding:4px 6px;border:1px solid #ddd;border-radius:4px;font-size:10px;background:white;font-family:inherit;">
+              <option>GET</option><option>POST</option><option>PUT</option><option>DELETE</option>
+            </select>
+            <input id="api-url" style="flex:1;padding:4px 8px;border:1px solid #ddd;border-radius:4px;font-size:10px;font-family:'SF Mono','Consolas',monospace;background:#fafafa;" placeholder="/v1/clientes" />
+          </div>
+          <button style="width:100%;padding:6px;border:1px solid #ea580c;border-radius:5px;background:#fff7ed;color:#ea580c;cursor:pointer;font-size:11px;font-weight:600;font-family:inherit;transition:all 0.15s;"
+            @click="${this.fetchApiFields}"
+          >${this.apiLoading ? 'Cargando...' : '🔌 Probar Conexion'}</button>
+        </div>
+
+        <!-- Fetched sources -->
+        ${this.apiSources.length > 0 ? html `
+          <div style="margin-top:8px;">
+            ${this.apiSources.map(src => html `
+              <div style="margin:4px;border:1px solid #eee;border-radius:6px;overflow:hidden;">
+                <div style="padding:6px 8px;background:#f8f9fa;display:flex;align-items:center;gap:6px;border-bottom:1px solid #eee;">
+                  <span style="background:#ea580c;color:white;font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;">${src.method}</span>
+                  <span style="font-size:10px;font-weight:600;color:#333;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${src.name}</span>
+                  <span style="font-size:9px;color:#aaa;">${src.fields.length} campos</span>
+                </div>
+                <div style="padding:2px 4px;max-height:150px;overflow-y:auto;">
+                  ${src.fields.map(field => html `
+                    <div style="display:flex;align-items:center;gap:6px;padding:4px 6px;font-size:11px;cursor:grab;border-radius:3px;transition:background 0.1s;"
+                      draggable="true"
+                      @dragstart="${(e) => { this.dragType = 'text'; e.dataTransfer?.setData('text/plain', 'text'); e.dataTransfer?.setData('field-name', field); e.dataTransfer?.setData('ds-id', src.id); }}"
+                      @dblclick="${() => this.addApiField(field, src.id)}"
+                    >
+                      <span style="color:#1976d2;font-size:10px;">⬡</span>
+                      <span style="color:#555;">${field}</span>
+                    </div>
+                  `)}
+                </div>
+              </div>
+            `)}
+          </div>
+        ` : ''}
+
+        <!-- Zentto API shortcuts -->
+        <div style="margin-top:12px;padding:4px 8px;">
+          <div style="font-size:9px;font-weight:600;color:#aaa;text-transform:uppercase;margin-bottom:6px;">Accesos Rapidos Zentto</div>
           ${[
             { label: 'Clientes', endpoint: '/v1/clientes', icon: '👥' },
             { label: 'Articulos', endpoint: '/v1/articulos', icon: '📦' },
@@ -1553,34 +1615,34 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
             { label: 'Proveedores', endpoint: '/v1/proveedores', icon: '🏭' },
             { label: 'Bancos', endpoint: '/v1/bancos', icon: '🏦' },
             { label: 'Paises', endpoint: '/v1/config/countries', icon: '🌍' },
-        ].map(api => html `
-            <div style="display:flex;align-items:center;gap:8px;padding:6px 8px;margin:2px 0;border-radius:5px;cursor:pointer;font-size:11px;transition:all 0.15s;border:1px solid transparent;"
+        ].map(api => html `
+            <div style="display:flex;align-items:center;gap:8px;padding:6px 8px;margin:2px 0;border-radius:5px;cursor:pointer;font-size:11px;transition:all 0.15s;border:1px solid transparent;"
               @click="${() => {
             const urlInput = this.shadowRoot?.querySelector('#api-url');
             if (urlInput)
                 urlInput.value = api.endpoint;
-        }}"
-              @mouseenter="${(e) => { e.target.style.background = '#fff7ed'; e.target.style.borderColor = '#fed7aa'; }}"
-              @mouseleave="${(e) => { e.target.style.background = ''; e.target.style.borderColor = 'transparent'; }}"
-            >
-              <span style="font-size:14px;">${api.icon}</span>
-              <span style="flex:1;color:#555;">${api.label}</span>
-              <span style="font-size:9px;color:#bbb;font-family:'SF Mono','Consolas',monospace;">${api.endpoint}</span>
-            </div>
-          `)}
-        </div>
-
-        <!-- Manual data source -->
-        <div style="margin-top:8px;padding:4px 8px;">
-          <div style="font-size:9px;font-weight:600;color:#aaa;text-transform:uppercase;margin-bottom:4px;">Datos Estaticos</div>
-          <button style="width:100%;padding:6px;border:1px dashed #ccc;border-radius:5px;background:none;cursor:pointer;font-size:11px;color:#888;font-family:inherit;"
+        }}"
+              @mouseenter="${(e) => { e.target.style.background = '#fff7ed'; e.target.style.borderColor = '#fed7aa'; }}"
+              @mouseleave="${(e) => { e.target.style.background = ''; e.target.style.borderColor = 'transparent'; }}"
+            >
+              <span style="font-size:14px;">${api.icon}</span>
+              <span style="flex:1;color:#555;">${api.label}</span>
+              <span style="font-size:9px;color:#bbb;font-family:'SF Mono','Consolas',monospace;">${api.endpoint}</span>
+            </div>
+          `)}
+        </div>
+
+        <!-- Manual data source -->
+        <div style="margin-top:8px;padding:4px 8px;">
+          <div style="font-size:9px;font-weight:600;color:#aaa;text-transform:uppercase;margin-bottom:4px;">Datos Estaticos</div>
+          <button style="width:100%;padding:6px;border:1px dashed #ccc;border-radius:5px;background:none;cursor:pointer;font-size:11px;color:#888;font-family:inherit;"
             @click="${() => {
             const src = { id: 'static_' + Date.now(), name: 'Datos Manuales', endpoint: '', method: 'STATIC', fields: ['campo1', 'campo2', 'campo3'] };
             this.apiSources = [...this.apiSources, src];
-        }}"
-          >+ Agregar Datos Estaticos</button>
-        </div>
-      </div>
+        }}"
+          >+ Agregar Datos Estaticos</button>
+        </div>
+      </div>
     `;
     }
     // ─── Template Menu ─────────────────────────────────
@@ -1691,13 +1753,13 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
                     ], actions: [{ id: 'send', type: 'submit', label: 'Enviar Encuesta', variant: 'primary' }] },
             },
         ];
-        return html `
-      <div style="position:absolute;top:100%;left:0;z-index:100;background:white;border:1px solid #ddd;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,0.15);width:320px;max-height:400px;overflow-y:auto;margin-top:4px;">
-        <div style="padding:10px 12px;border-bottom:1px solid #eee;font-size:11px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:0.5px;">
-          Cargar Plantilla
-        </div>
-        ${templates.map(t => html `
-          <div style="display:flex;align-items:flex-start;gap:10px;padding:10px 14px;cursor:pointer;transition:background 0.1s;border-bottom:1px solid #f5f5f5;"
+        return html `
+      <div style="position:absolute;top:100%;left:0;z-index:100;background:white;border:1px solid #ddd;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,0.15);width:320px;max-height:400px;overflow-y:auto;margin-top:4px;">
+        <div style="padding:10px 12px;border-bottom:1px solid #eee;font-size:11px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:0.5px;">
+          Cargar Plantilla
+        </div>
+        ${templates.map(t => html `
+          <div style="display:flex;align-items:flex-start;gap:10px;padding:10px 14px;cursor:pointer;transition:background 0.1s;border-bottom:1px solid #f5f5f5;"
             @click="${() => {
             this.schema = structuredClone(t.schema);
             this.undoStack = [JSON.stringify(this.schema)];
@@ -1705,116 +1767,116 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
             this.selectedFieldId = null;
             this.showTemplateMenu = false;
             this.commitChange();
-        }}"
-            @mouseenter="${(e) => { e.currentTarget.style.background = '#f0f7ff'; }}"
-            @mouseleave="${(e) => { e.currentTarget.style.background = ''; }}"
-          >
-            <span style="font-size:22px;margin-top:1px;">${t.icon}</span>
-            <div>
-              <div style="font-size:13px;font-weight:600;color:#333;">${t.title}</div>
-              <div style="font-size:11px;color:#999;margin-top:1px;">${t.desc}</div>
-            </div>
-          </div>
-        `)}
-        <div style="padding:8px 14px;border-top:1px solid #eee;">
-          <div style="font-size:10px;color:#bbb;text-align:center;">Clic en una plantilla para cargarla</div>
-        </div>
-      </div>
+        }}"
+            @mouseenter="${(e) => { e.currentTarget.style.background = '#f0f7ff'; }}"
+            @mouseleave="${(e) => { e.currentTarget.style.background = ''; }}"
+          >
+            <span style="font-size:22px;margin-top:1px;">${t.icon}</span>
+            <div>
+              <div style="font-size:13px;font-weight:600;color:#333;">${t.title}</div>
+              <div style="font-size:11px;color:#999;margin-top:1px;">${t.desc}</div>
+            </div>
+          </div>
+        `)}
+        <div style="padding:8px 14px;border-top:1px solid #eee;">
+          <div style="font-size:10px;color:#bbb;text-align:center;">Clic en una plantilla para cargarla</div>
+        </div>
+      </div>
     `;
     }
     renderApiAuth() {
         if (this.apiLoggedIn) {
-            return html `
-        <div style="margin:4px;padding:10px;background:linear-gradient(135deg,#e8f5e9,#f1f8e9);border:1px solid #c8e6c9;border-radius:8px;">
-          <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
-            <span style="width:28px;height:28px;border-radius:50%;background:#27ae60;color:white;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;">✓</span>
-            <div style="flex:1;">
-              <div style="font-size:11px;font-weight:600;color:#2e7d32;">Conectado</div>
-              <div style="font-size:10px;color:#66bb6a;">${this.apiUser}${this.apiCompany ? ` — ${this.apiCompany}` : ''}</div>
-            </div>
-            <button style="border:none;background:none;cursor:pointer;font-size:14px;color:#999;padding:2px;" title="Cerrar sesion"
-              @click="${() => { this.apiLoggedIn = false; this.apiToken = ''; this.apiUser = ''; this.apiCompany = ''; this.apiBranch = ''; }}"
-            >✕</button>
-          </div>
-          <div style="font-size:9px;color:#81c784;font-family:'SF Mono','Consolas',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${this.apiBaseUrl}">
-            🔗 ${this.apiBaseUrl}
-          </div>
-        </div>
+            return html `
+        <div style="margin:4px;padding:10px;background:linear-gradient(135deg,#e8f5e9,#f1f8e9);border:1px solid #c8e6c9;border-radius:8px;">
+          <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
+            <span style="width:28px;height:28px;border-radius:50%;background:#27ae60;color:white;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;">✓</span>
+            <div style="flex:1;">
+              <div style="font-size:11px;font-weight:600;color:#2e7d32;">Conectado</div>
+              <div style="font-size:10px;color:#66bb6a;">${this.apiUser}${this.apiCompany ? ` — ${this.apiCompany}` : ''}</div>
+            </div>
+            <button style="border:none;background:none;cursor:pointer;font-size:14px;color:#999;padding:2px;" title="Cerrar sesion"
+              @click="${() => { this.apiLoggedIn = false; this.apiToken = ''; this.apiUser = ''; this.apiCompany = ''; this.apiBranch = ''; }}"
+            >✕</button>
+          </div>
+          <div style="font-size:9px;color:#81c784;font-family:'SF Mono','Consolas',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${this.apiBaseUrl}">
+            🔗 ${this.apiBaseUrl}
+          </div>
+        </div>
       `;
         }
-        return html `
-      <div style="margin:4px;padding:10px;background:#fafafa;border:1px solid #eee;border-radius:8px;">
-        <div style="display:flex;align-items:center;gap:6px;margin-bottom:10px;">
-          <span style="font-size:14px;">🔐</span>
-          <span style="font-size:11px;font-weight:600;color:#333;">Iniciar Sesion</span>
-        </div>
-
-        ${this.apiLoginError ? html `
-          <div style="padding:6px 8px;background:#fde8e8;border:1px solid #f5c6cb;border-radius:5px;margin-bottom:8px;font-size:10px;color:#c62828;">
-            ⚠ ${this.apiLoginError}
-          </div>
-        ` : ''}
-
-        <div style="margin-bottom:6px;">
-          <label style="font-size:9px;font-weight:600;color:#999;display:block;margin-bottom:2px;">URL Base</label>
-          <input id="api-base-url" style="width:100%;padding:5px 8px;border:1px solid #ddd;border-radius:5px;font-size:10px;font-family:'SF Mono','Consolas',monospace;background:white;box-sizing:border-box;outline:none;transition:border-color 0.15s;"
-            .value="${this.apiBaseUrl}" placeholder="Vacio = proxy local (recomendado)"
-            @input="${(e) => { this.apiBaseUrl = e.target.value; }}"
-            @focus="${(e) => { e.target.style.borderColor = '#1976d2'; }}"
-            @blur="${(e) => { e.target.style.borderColor = '#ddd'; }}"
-          />
-        </div>
-
-        <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:6px;">
-          <div>
-            <label style="font-size:9px;font-weight:600;color:#999;display:block;margin-bottom:2px;">Usuario</label>
-            <input id="api-login-user" style="width:100%;padding:5px 8px;border:1px solid #ddd;border-radius:5px;font-size:11px;background:white;box-sizing:border-box;outline:none;font-family:inherit;"
-              placeholder="SUP"
-              @focus="${(e) => { e.target.style.borderColor = '#1976d2'; }}"
-              @blur="${(e) => { e.target.style.borderColor = '#ddd'; }}"
-            />
-          </div>
-          <div>
-            <label style="font-size:9px;font-weight:600;color:#999;display:block;margin-bottom:2px;">Clave</label>
-            <input id="api-login-pass" type="password" style="width:100%;padding:5px 8px;border:1px solid #ddd;border-radius:5px;font-size:11px;background:white;box-sizing:border-box;outline:none;font-family:inherit;"
-              placeholder="••••"
-              @focus="${(e) => { e.target.style.borderColor = '#1976d2'; }}"
-              @blur="${(e) => { e.target.style.borderColor = '#ddd'; }}"
+        return html `
+      <div style="margin:4px;padding:10px;background:#fafafa;border:1px solid #eee;border-radius:8px;">
+        <div style="display:flex;align-items:center;gap:6px;margin-bottom:10px;">
+          <span style="font-size:14px;">🔐</span>
+          <span style="font-size:11px;font-weight:600;color:#333;">Iniciar Sesion</span>
+        </div>
+
+        ${this.apiLoginError ? html `
+          <div style="padding:6px 8px;background:#fde8e8;border:1px solid #f5c6cb;border-radius:5px;margin-bottom:8px;font-size:10px;color:#c62828;">
+            ⚠ ${this.apiLoginError}
+          </div>
+        ` : ''}
+
+        <div style="margin-bottom:6px;">
+          <label style="font-size:9px;font-weight:600;color:#999;display:block;margin-bottom:2px;">URL Base</label>
+          <input id="api-base-url" style="width:100%;padding:5px 8px;border:1px solid #ddd;border-radius:5px;font-size:10px;font-family:'SF Mono','Consolas',monospace;background:white;box-sizing:border-box;outline:none;transition:border-color 0.15s;"
+            .value="${this.apiBaseUrl}" placeholder="Vacio = proxy local (recomendado)"
+            @input="${(e) => { this.apiBaseUrl = e.target.value; }}"
+            @focus="${(e) => { e.target.style.borderColor = '#1976d2'; }}"
+            @blur="${(e) => { e.target.style.borderColor = '#ddd'; }}"
+          />
+        </div>
+
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:6px;">
+          <div>
+            <label style="font-size:9px;font-weight:600;color:#999;display:block;margin-bottom:2px;">Usuario</label>
+            <input id="api-login-user" style="width:100%;padding:5px 8px;border:1px solid #ddd;border-radius:5px;font-size:11px;background:white;box-sizing:border-box;outline:none;font-family:inherit;"
+              placeholder="SUP"
+              @focus="${(e) => { e.target.style.borderColor = '#1976d2'; }}"
+              @blur="${(e) => { e.target.style.borderColor = '#ddd'; }}"
+            />
+          </div>
+          <div>
+            <label style="font-size:9px;font-weight:600;color:#999;display:block;margin-bottom:2px;">Clave</label>
+            <input id="api-login-pass" type="password" style="width:100%;padding:5px 8px;border:1px solid #ddd;border-radius:5px;font-size:11px;background:white;box-sizing:border-box;outline:none;font-family:inherit;"
+              placeholder="••••"
+              @focus="${(e) => { e.target.style.borderColor = '#1976d2'; }}"
+              @blur="${(e) => { e.target.style.borderColor = '#ddd'; }}"
               @keydown="${(e) => { if (e.key === 'Enter')
-            this.doApiLogin(); }}"
-            />
-          </div>
-        </div>
-
-        <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:8px;">
-          <div>
-            <label style="font-size:9px;font-weight:600;color:#999;display:block;margin-bottom:2px;">Empresa (cod)</label>
-            <input id="api-login-company" style="width:100%;padding:5px 8px;border:1px solid #ddd;border-radius:5px;font-size:11px;background:white;box-sizing:border-box;outline:none;font-family:inherit;"
-              placeholder="01" value="01"
-              @focus="${(e) => { e.target.style.borderColor = '#1976d2'; }}"
-              @blur="${(e) => { e.target.style.borderColor = '#ddd'; }}"
-            />
-          </div>
-          <div>
-            <label style="font-size:9px;font-weight:600;color:#999;display:block;margin-bottom:2px;">Sucursal</label>
-            <input id="api-login-branch" style="width:100%;padding:5px 8px;border:1px solid #ddd;border-radius:5px;font-size:11px;background:white;box-sizing:border-box;outline:none;font-family:inherit;"
-              placeholder="01" value="01"
-              @focus="${(e) => { e.target.style.borderColor = '#1976d2'; }}"
-              @blur="${(e) => { e.target.style.borderColor = '#ddd'; }}"
-            />
-          </div>
-        </div>
-
-        <button style="width:100%;padding:8px;border:none;border-radius:6px;background:#1976d2;color:white;cursor:pointer;font-size:12px;font-weight:600;font-family:inherit;transition:all 0.15s;${this.apiLoginLoading ? 'opacity:0.7;pointer-events:none;' : ''}"
-          @click="${this.doApiLogin}"
-          @mouseenter="${(e) => { e.target.style.background = '#1565c0'; }}"
-          @mouseleave="${(e) => { e.target.style.background = '#1976d2'; }}"
-        >${this.apiLoginLoading ? '⏳ Conectando...' : '🔑 Iniciar Sesion'}</button>
-
-        <div style="margin-top:6px;font-size:9px;color:#bbb;text-align:center;">
-          Usa las mismas credenciales de Zentto ERP
-        </div>
-      </div>
+            this.doApiLogin(); }}"
+            />
+          </div>
+        </div>
+
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:8px;">
+          <div>
+            <label style="font-size:9px;font-weight:600;color:#999;display:block;margin-bottom:2px;">Empresa (cod)</label>
+            <input id="api-login-company" style="width:100%;padding:5px 8px;border:1px solid #ddd;border-radius:5px;font-size:11px;background:white;box-sizing:border-box;outline:none;font-family:inherit;"
+              placeholder="01" value="01"
+              @focus="${(e) => { e.target.style.borderColor = '#1976d2'; }}"
+              @blur="${(e) => { e.target.style.borderColor = '#ddd'; }}"
+            />
+          </div>
+          <div>
+            <label style="font-size:9px;font-weight:600;color:#999;display:block;margin-bottom:2px;">Sucursal</label>
+            <input id="api-login-branch" style="width:100%;padding:5px 8px;border:1px solid #ddd;border-radius:5px;font-size:11px;background:white;box-sizing:border-box;outline:none;font-family:inherit;"
+              placeholder="01" value="01"
+              @focus="${(e) => { e.target.style.borderColor = '#1976d2'; }}"
+              @blur="${(e) => { e.target.style.borderColor = '#ddd'; }}"
+            />
+          </div>
+        </div>
+
+        <button style="width:100%;padding:8px;border:none;border-radius:6px;background:#1976d2;color:white;cursor:pointer;font-size:12px;font-weight:600;font-family:inherit;transition:all 0.15s;${this.apiLoginLoading ? 'opacity:0.7;pointer-events:none;' : ''}"
+          @click="${this.doApiLogin}"
+          @mouseenter="${(e) => { e.target.style.background = '#1565c0'; }}"
+          @mouseleave="${(e) => { e.target.style.background = '#1976d2'; }}"
+        >${this.apiLoginLoading ? '⏳ Conectando...' : '🔑 Iniciar Sesion'}</button>
+
+        <div style="margin-top:6px;font-size:9px;color:#bbb;text-align:center;">
+          Usa las mismas credenciales de Zentto ERP
+        </div>
+      </div>
     `;
     }
     async doApiLogin() {
@@ -1944,13 +2006,13 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
         return Object.keys(sample).filter(k => !k.startsWith('_'));
     }
     renderToggle(label, value, onChange) {
-        return html `
-      <div class="prop-toggle">
-        <button class="prop-switch ${value ? 'prop-switch--active' : ''}"
-          @click="${() => onChange(!value)}"
-        ></button>
-        <span class="prop-toggle-label">${label}</span>
-      </div>
+        return html `
+      <div class="prop-toggle">
+        <button class="prop-switch ${value ? 'prop-switch--active' : ''}"
+          @click="${() => onChange(!value)}"
+        ></button>
+        <span class="prop-toggle-label">${label}</span>
+      </div>
     `;
     }
     toggleSection(id) {