@standhigher/react-email-editor 0.1.0 → 0.3.0

package/dist/styles.css

@@ -61,6 +61,568 @@
 }
 
 
+/* ---------- 共享表单控件 ---------- */
+
+.ree-input {
+  width: 100%;
+  border: 1px solid var(--ree-border, #e3e3e5);
+  border-radius: var(--ree-radius, 8px);
+  --ree-control-padding-x: 12px;
+  --ree-control-padding-y: 8px;
+  --ree-control-padding-end: var(--ree-control-padding-x);
+  padding: var(--ree-control-padding-y) var(--ree-control-padding-end) var(--ree-control-padding-y) var(--ree-control-padding-x);
+  font-size: 14px;
+  line-height: 1.4;
+  font-family: inherit;
+  color: var(--ree-text, #202223);
+  background: var(--ree-panel, #ffffff);
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+}
+
+.ree-input:focus {
+  outline: none;
+  border: 2px solid #202223;
+  padding: max(0px, calc(var(--ree-control-padding-y) - 1px)) calc(var(--ree-control-padding-end) - 1px) max(0px, calc(var(--ree-control-padding-y) - 1px)) calc(var(--ree-control-padding-x) - 1px);
+  box-shadow: none;
+}
+
+.ree-select {
+  display: block;
+  min-width: 0;
+  width: 100%;
+  position: relative;
+}
+
+.ree-select .ree-input {
+  appearance: none;
+  -webkit-appearance: none;
+  --ree-control-padding-end: 40px;
+  cursor: pointer;
+  background-color: var(--ree-panel);
+}
+
+.ree-select-icon {
+  position: absolute;
+  top: 0;
+  right: 12px;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+  color: var(--ree-muted);
+}
+
+.ree-select.is-compact {
+  width: auto;
+  flex-shrink: 0;
+}
+
+.ree-select.is-compact .ree-input {
+  --ree-control-padding-x: 8px;
+  --ree-control-padding-y: 0px;
+  --ree-control-padding-end: 32px;
+  height: 28px;
+  font-size: 12px;
+  line-height: 1;
+  border-radius: 6px;
+}
+
+.ree-select.is-compact .ree-select-icon svg {
+  width: 12px;
+  height: 12px;
+}
+
+.ree-color-control {
+  display: inline-flex;
+  min-width: 0;
+}
+
+.ree-color-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  width: fit-content;
+  max-width: 100%;
+  justify-self: start;
+  cursor: pointer;
+  appearance: none;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  font: inherit;
+}
+
+.ree-color-swatch {
+  position: relative;
+  width: 36px;
+  height: 22px;
+  flex-shrink: 0;
+}
+
+.ree-color-swatch-face {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #d2d5d8;
+  border-radius: 999px;
+  background: #ffffff;
+}
+
+.ree-color-swatch-face.is-empty {
+  background:
+    linear-gradient(45deg, #e3e3e5 25%, transparent 25%),
+    linear-gradient(-45deg, #e3e3e5 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #e3e3e5 75%),
+    linear-gradient(-45deg, transparent 75%, #e3e3e5 75%);
+  background-size: 8px 8px;
+  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
+  background-color: #ffffff;
+}
+
+.ree-color-chip-label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--ree-text);
+  font-size: 13px;
+  line-height: 1.3;
+}
+
+.ree-checkbox-control {
+  display: inline-flex;
+  align-items: center;
+  justify-self: start;
+  gap: 8px;
+  width: fit-content;
+  max-width: 100%;
+  cursor: pointer;
+}
+
+.ree-checkbox-control input {
+  appearance: none;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  border: 1px solid #b5b5b5;
+  border-radius: 3px;
+  background: #ffffff;
+  cursor: pointer;
+}
+
+.ree-checkbox-control input:checked {
+  border-color: #202223;
+  background: #202223;
+}
+
+.ree-checkbox-control input:checked::before {
+  content: "";
+  width: 5px;
+  height: 9px;
+  margin-top: -2px;
+  border: solid #ffffff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.ree-checkbox-control input:focus-visible,
+.ree-color-chip:focus-visible .ree-color-swatch-face {
+  border: 2px solid #202223;
+}
+
+.ree-checkbox-control input:focus,
+.ree-color-chip:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.ree-checkbox-control:has(input:disabled) {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.ree-checkbox-control input:disabled,
+.ree-select .ree-input:disabled {
+  cursor: default;
+}
+
+.ree-switch-control {
+  width: 100%;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+  font-size: 13px;
+  color: var(--ree-muted, #6d7175);
+}
+
+.ree-switch-control input {
+  display: flex;
+  align-items: center;
+  width: 32px;
+  height: 20px;
+  padding: 2px;
+  border: 0;
+  border-radius: 999px;
+  background: #b5b5b5;
+}
+
+.ree-switch-control input::before,
+.ree-switch-control input:checked::before {
+  content: "";
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  border: 0;
+  border-radius: 50%;
+  background: #ffffff;
+  transform: none;
+}
+
+.ree-switch-control input:checked::before {
+  transform: translateX(12px);
+}
+
+.ree-switch-control input:focus-visible {
+  border: 2px solid #202223;
+  padding: 0;
+}
+
+.ree-range {
+  -webkit-appearance: none;
+  appearance: none;
+  display: block;
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  height: 20px;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.ree-range::-webkit-slider-container {
+  width: 100%;
+}
+
+.ree-range::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 4px;
+  border: 0;
+  border-radius: 999px;
+  background: linear-gradient(to right, #303030 0%, #303030 var(--ree-range-progress), #e3e3e5 var(--ree-range-progress), #e3e3e5 100%);
+}
+
+.ree-range::-webkit-slider-thumb {
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  margin-top: -5px;
+  border: 0;
+  border-radius: 50%;
+  background: #303030;
+}
+
+.ree-range::-moz-range-track {
+  height: 4px;
+  border: 0;
+  border-radius: 999px;
+  background: #e3e3e5;
+}
+
+.ree-range::-moz-range-progress {
+  height: 4px;
+  border: 0;
+  border-radius: 999px;
+  background: #303030;
+}
+
+.ree-range::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border: 0;
+  border-radius: 50%;
+  background: #303030;
+}
+
+/* ---------- 共享普通按钮 ---------- */
+
+.ree-btn {
+  appearance: none;
+  border: 1px solid #b5b5b5;
+  background: var(--ree-panel, #ffffff);
+  color: var(--ree-text, #202223);
+  border-radius: var(--ree-radius, 8px);
+  --ree-button-padding-y: 8px;
+  --ree-button-padding-x: 16px;
+  padding: var(--ree-button-padding-y) var(--ree-button-padding-x);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.12s ease, border-color 0.12s ease,
+    box-shadow 0.12s ease;
+}
+
+.ree-btn:hover {
+  background: var(--ree-panel-secondary);
+  border-color: var(--ree-border);
+}
+
+.ree-btn:active {
+  background: #f0f0f1;
+}
+
+.ree-btn-primary {
+  background: var(--ree-primary, #005bd3);
+  border-color: var(--ree-primary, #005bd3);
+  color: var(--ree-primary-fg, #ffffff);
+}
+
+.ree-btn-primary:hover {
+  background: var(--ree-primary-hover);
+  border-color: var(--ree-primary-hover);
+}
+
+.ree-btn-primary:active {
+  background: var(--ree-primary-hover);
+}
+
+
+.ree-btn:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.ree-btn-solid {
+  background: #202223;
+  border-color: #202223;
+  color: #ffffff;
+}
+
+.ree-btn-solid:hover,
+.ree-btn-solid:active {
+  background: #000000;
+  border-color: #000000;
+}
+
+.ree-btn:focus-visible {
+  outline: none;
+  box-shadow: none;
+  border-width: 2px;
+  border-color: #202223;
+  padding: calc(var(--ree-button-padding-y) - 1px) calc(var(--ree-button-padding-x) - 1px);
+}
+
+.ree-btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 30px;
+  height: 30px;
+  --ree-button-padding-y: 0px;
+  --ree-button-padding-x: 0px;
+  border-color: transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--ree-muted);
+}
+
+.ree-btn-icon:hover {
+  border-color: transparent;
+  color: var(--ree-text);
+}
+
+.ree-btn-icon:focus-visible {
+  padding: 0;
+}
+
+.ree-btn-has-tooltip {
+  position: relative;
+}
+
+.ree-block-tooltip,
+.ree-btn-tooltip {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 10;
+  display: none;
+  padding: 6px 9px;
+  border-radius: var(--ree-radius-sm);
+  background: var(--ree-text);
+  color: var(--ree-panel);
+  box-shadow: var(--ree-shadow-md);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+  cursor: default;
+}
+
+.ree-block-tooltip::before,
+.ree-btn-tooltip::before {
+  content: "";
+  position: absolute;
+  top: -8px;
+  left: 0;
+  width: 100%;
+  height: 8px;
+}
+
+.ree-btn-tooltip {
+  text-transform: none;
+  letter-spacing: normal;
+}
+
+.ree-block-btn:hover .ree-block-tooltip,
+.ree-block-btn:focus-visible .ree-block-tooltip,
+.ree-btn-has-tooltip:hover .ree-btn-tooltip,
+.ree-btn-has-tooltip:focus-visible .ree-btn-tooltip {
+  display: block;
+}
+
+.ree-reset {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--ree-muted);
+  cursor: pointer;
+}
+
+.ree-reset:hover {
+  background: var(--ree-panel-secondary);
+  color: var(--ree-text);
+}
+
+.ree-reset:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.ree-reset:disabled:hover {
+  background: transparent;
+  color: var(--ree-muted);
+}
+
+.ree-reset:focus-visible {
+  outline: 1px solid #202223;
+  outline-offset: -1px;
+}
+
+.ree-color-picker {
+  position: fixed;
+  inset: auto;
+  width: min(256px, calc(100vw - 16px));
+  max-height: calc(100dvh - 16px);
+  margin: 0;
+  padding: 12px;
+  overflow: auto;
+  border: 1px solid var(--ree-border, #e3e3e5);
+  border-radius: 10px;
+  background: var(--ree-panel, #ffffff);
+  box-shadow: var(--ree-shadow-lg, 0 6px 32px rgba(31, 33, 36, 0.16));
+  color: var(--ree-text, #202223);
+  font: 400 13px/1.4 var(--ree-font, Arial, sans-serif);
+}
+
+.ree-color-picker:popover-open {
+  display: grid;
+  gap: 12px;
+}
+
+.ree-color-saturation {
+  position: relative;
+  height: 144px;
+  border-radius: 6px;
+  background: linear-gradient(to top, #000000, transparent), linear-gradient(to right, #ffffff, transparent), var(--ree-color-hue);
+  cursor: crosshair;
+  touch-action: none;
+}
+
+.ree-color-saturation:focus-visible {
+  outline: 2px solid #202223;
+  outline-offset: 2px;
+}
+
+.ree-color-cursor {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.ree-color-hue .ree-range::-webkit-slider-runnable-track {
+  height: 10px;
+  background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
+}
+
+.ree-color-hue .ree-range::-moz-range-track {
+  height: 10px;
+  background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
+}
+
+.ree-color-hue .ree-range::-moz-range-progress {
+  background: transparent;
+}
+
+.ree-color-hue .ree-range::-webkit-slider-thumb {
+  margin-top: -2px;
+  border: 2px solid #ffffff;
+  box-shadow: 0 0 0 1px #6d7175;
+}
+
+.ree-color-hue .ree-range::-moz-range-thumb {
+  border: 2px solid #ffffff;
+  box-shadow: 0 0 0 1px #6d7175;
+}
+
+.ree-color-hex-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.ree-color-preview {
+  flex: 0 0 28px;
+  height: 28px;
+  border: 1px solid var(--ree-border);
+  border-radius: 6px;
+}
+
+.ree-color-hex-field {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.ree-color-hex-field .ree-input {
+  min-width: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.ree-color-error {
+  margin: 0;
+  color: var(--ree-danger, #d72c0d);
+  font-size: 12px;
+}
+
 /* ---------- 邮件主题 ---------- */
 
 .ree-subject-bar {
@@ -81,30 +643,28 @@
   color: var(--ree-text);
 }
 
-.ree-subject-input {
+.ree-subject-field {
+  position: relative;
   flex: 1 1 360px;
-  min-width: 240px;
-  border: 1px solid var(--ree-border);
-  border-radius: var(--ree-radius);
-  background: var(--ree-panel);
-  color: var(--ree-text);
-  font: inherit;
-  font-size: 14px;
-  line-height: 1.4;
-  padding: 8px 12px;
+  min-width: min(240px, 100%);
 }
 
-.ree-subject-input:focus {
-  outline: none;
-  border-color: var(--ree-primary);
-  box-shadow: 0 0 0 1px var(--ree-primary);
+.ree-subject-input {
+  --ree-control-padding-end: 76px;
 }
 
 .ree-subject-count {
-  flex-shrink: 0;
+  position: absolute;
+  top: 0;
+  right: 12px;
+  bottom: 0;
+  display: flex;
+  align-items: center;
   color: var(--ree-muted);
   font-size: 13px;
   font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  pointer-events: none;
 }
 
 .ree-personalization {
@@ -138,12 +698,6 @@
   min-width: 240px;
 }
 
-.ree-personalization-empty {
-  padding: 8px 10px;
-  color: var(--ree-muted);
-  font-size: 13px;
-}
-
 .ree-subject-hint {
   flex: 0 1 auto;
   margin: 0;
@@ -153,56 +707,6 @@
   white-space: nowrap;
 }
 
-.ree-subject-reset {
-  flex-shrink: 0;
-  margin-left: auto;
-}
-
-.ree-btn {
-  appearance: none;
-  border: 1px solid var(--ree-border, #e3e3e5);
-  background: var(--ree-panel, #ffffff);
-  color: var(--ree-text, #202223);
-  border-radius: var(--ree-radius, 8px);
-  padding: 8px 16px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.4;
-  cursor: pointer;
-  font-family: inherit;
-  transition: background 0.12s ease, border-color 0.12s ease,
-    box-shadow 0.12s ease;
-}
-
-.ree-btn:hover {
-  background: var(--ree-panel-secondary);
-  border-color: var(--ree-border);
-}
-
-.ree-btn:active {
-  background: #f0f0f1;
-}
-
-.ree-btn:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--ree-panel), 0 0 0 4px var(--ree-primary);
-}
-
-.ree-btn-primary {
-  background: var(--ree-primary, #005bd3);
-  border-color: var(--ree-primary, #005bd3);
-  color: var(--ree-primary-fg, #ffffff);
-}
-
-.ree-btn-primary:hover {
-  background: var(--ree-primary-hover);
-  border-color: var(--ree-primary-hover);
-}
-
-.ree-btn-primary:active {
-  background: var(--ree-primary-hover);
-}
-
 
 /* ---------- 三栏布局 ---------- */
 
@@ -223,8 +727,8 @@
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  min-height: 52px;
-  padding: 8px 16px;
+  height: 52px;
+  padding: 7px 16px;
   font-weight: 600;
   font-size: 12px;
   color: var(--ree-muted);
@@ -357,6 +861,47 @@
   flex-shrink: 0;
 }
 
+.ree-library-head {
+  justify-content: space-between;
+}
+
+.ree-col-left.is-collapsed {
+  width: 52px;
+}
+
+.ree-col-left.is-collapsed .ree-library-head {
+  justify-content: center;
+  padding-left: 7px;
+  padding-right: 7px;
+}
+
+.ree-col-left:not(.is-collapsed) .ree-library-expand,
+.ree-col-left.is-collapsed .ree-library-collapse,
+.ree-col-left.is-collapsed .ree-library-label {
+  display: none;
+}
+
+@media (width < 1375px) {
+  .ree-col-left:not(.is-expanded) {
+    width: 52px;
+  }
+
+  .ree-col-left:not(.is-expanded) .ree-library-head {
+    justify-content: center;
+    padding-left: 7px;
+    padding-right: 7px;
+  }
+
+  .ree-col-left:not(.is-expanded) .ree-library-label,
+  .ree-col-left:not(.is-expanded) .ree-library-collapse {
+    display: none;
+  }
+
+  .ree-col-left:not(.is-expanded) .ree-library-expand {
+    display: inline-flex;
+  }
+}
+
 .ree-col-center {
   flex: 1;
   min-width: 0;
@@ -428,6 +973,42 @@
   font-weight: 500;
 }
 
+.ree-col-left.is-collapsed .ree-lib {
+  grid-template-columns: 1fr;
+  gap: 8px;
+  padding: 12px 7px;
+}
+
+.ree-col-left.is-collapsed .ree-lib-item {
+  justify-content: center;
+  min-height: 38px;
+  gap: 0;
+  padding: 8px;
+}
+
+.ree-col-left.is-collapsed .ree-lib-title {
+  display: none;
+}
+
+@media (width < 1375px) {
+  .ree-col-left:not(.is-expanded) .ree-lib {
+    grid-template-columns: 1fr;
+    gap: 8px;
+    padding: 12px 7px;
+  }
+
+  .ree-col-left:not(.is-expanded) .ree-lib-item {
+    justify-content: center;
+    min-height: 38px;
+    gap: 0;
+    padding: 8px;
+  }
+
+  .ree-col-left:not(.is-expanded) .ree-lib-title {
+    display: none;
+  }
+}
+
 
 /* ---------- 画布 ---------- */
 
@@ -436,6 +1017,14 @@
   flex: 1;
   min-height: 0;
   min-width: 0;
+  background-color: var(--ree-panel);
+  background-image:
+    linear-gradient(45deg, rgba(0, 0, 0, 0.02) 25%, transparent 25%),
+    linear-gradient(-45deg, rgba(0, 0, 0, 0.02) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.02) 75%),
+    linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.02) 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
 }
 
 .ree-stage-view[hidden] {
@@ -444,14 +1033,13 @@
 
 .ree-canvas,
 .ree-preview-stage {
+  display: flex;
+  flex-direction: column;
   flex: 1;
   min-height: 0;
   min-width: 0;
   overflow: auto;
-}
-
-.ree-canvas {
-  padding: 64px 24px 40px;
+  padding: 64px 24px;
 }
 
 .ree-canvas.is-over {
@@ -462,7 +1050,6 @@
 .ree-email-surface {
   box-sizing: border-box;
   margin: 0 auto;
-  box-shadow: var(--ree-shadow-md);
 }
 
 .ree-root .ree-canvas-inner {
@@ -475,10 +1062,13 @@
   gap: var(--ree-block-gap, 0px);
 }
 
-.ree-preview-stage {
-  display: flex;
-  justify-content: center;
-  padding: 24px 16px;
+.ree-preview-frame {
+  display: block;
+  width: 100%;
+  height: 1px;
+  flex-shrink: 0;
+  border: none;
+  background: #ffffff;
 }
 
 .ree-inspector-scroll {
@@ -495,35 +1085,55 @@
 }
 
 
-.ree-email-viewport { box-sizing: border-box; }
+.ree-email-viewport {
+  box-sizing: border-box;
+  flex: 1 0 auto;
+}
+
+.ree-canvas .ree-email-viewport {
+  background: rgb(246, 246, 247);
+  box-shadow: var(--ree-shadow-md);
+}
 
 /* ---------- 区块 ---------- */
 
 .ree-block {
   position: relative;
   border: 0;
-  border-radius: var(--ree-radius-sm);
-  outline: 1px solid transparent;
-  outline-offset: -1px;
+  border-radius: 0;
   background: transparent;
   cursor: pointer;
-  transition: background 0.12s ease, outline-color 0.12s ease,
-    box-shadow 0.12s ease;
+  transition: background 0.12s ease;
   width: 100%;
   display: flow-root;
 }
 
-/* hover：区块背景 + 边框均为浅蓝（参照 unlayer） */
+/* hover 和选中共用外侧辅助框，内沿贴住区块，不覆盖真实边框或占用布局空间。 */
+.ree-block-highlight {
+  position: absolute;
+  inset: -1px;
+  z-index: 5;
+  border: 1px solid transparent;
+  pointer-events: none;
+  transition: border-color 0.12s ease;
+}
+
 .ree-block:hover {
+  z-index: 1;
   background: var(--ree-accent-bg);
-  outline-color: var(--ree-accent-border);
+}
+
+.ree-block:hover > .ree-block-highlight {
+  border-color: var(--ree-accent-border);
 }
 
 .ree-block.is-selected {
   z-index: 8;
   background: var(--ree-accent-bg-strong);
-  outline-color: var(--ree-primary);
-  box-shadow: 0 0 0 1px var(--ree-primary);
+}
+
+.ree-block.is-selected > .ree-block-highlight {
+  border-color: var(--ree-primary);
 }
 
 .ree-block.is-dragging {
@@ -627,7 +1237,7 @@
 .ree-block-toolbar {
   position: absolute;
   top: calc(100% + 4px);
-  left: 8px;
+  left: 0;
   z-index: 7;
   display: flex;
   gap: 2px;
@@ -636,9 +1246,11 @@
   border-radius: var(--ree-radius);
   padding: 3px;
   box-shadow: var(--ree-shadow-md);
+  font-family: var(--ree-font);
 }
 
 .ree-block-btn {
+  position: relative;
   appearance: none;
   border: none;
   background: transparent;
@@ -658,11 +1270,26 @@
   color: var(--ree-primary);
 }
 
+.ree-block-btn:active {
+  background: var(--ree-accent-bg-strong);
+  color: var(--ree-primary);
+}
+
+.ree-block-btn:focus-visible {
+  outline: 2px solid var(--ree-primary);
+  outline-offset: 1px;
+}
+
 .ree-block-btn.ree-danger:hover {
   background: var(--ree-danger-soft);
   color: var(--ree-danger);
 }
 
+.ree-block-btn.ree-danger:active {
+  background: var(--ree-danger-soft);
+  color: var(--ree-danger);
+}
+
 .ree-block-content {
   width: 100%;
   overflow: hidden;
@@ -738,6 +1365,10 @@
   pointer-events: none;
 }
 
+.ree-button-canvas-row {
+  width: 100%;
+  border: 0;
+}
 
 /* ---------- 富文本 ---------- */
 
@@ -755,8 +1386,9 @@
   left: 0;
   visibility: hidden;
   display: flex;
-  flex-direction: column;
-  gap: 2px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 0;
   width: auto;
   margin: 0;
   padding: 4px;
@@ -773,19 +1405,27 @@
   visibility: visible;
 }
 
-.ree-rte-row {
+.ree-rte-group {
   display: flex;
-  align-items: center;
+  flex: 0 0 auto;
   flex-wrap: wrap;
+  align-items: center;
   gap: 2px;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 0 4px;
+}
+
+.ree-rte-group + .ree-rte-group {
+  border-inline-start: 1px solid var(--ree-border);
+}
+
+.ree-rte-group.is-row-start {
+  border-inline-start-color: transparent;
 }
 
-.ree-rte-sep {
+.ree-rte-group > * {
   flex-shrink: 0;
-  align-self: stretch;
-  width: 1px;
-  margin: 4px 4px;
-  background: var(--ree-border);
 }
 
 .ree-tool-btn,
@@ -899,12 +1539,6 @@
   right: 0;
 }
 
-.ree-rte-menu.is-link {
-  min-width: 0;
-  padding: 0;
-  overflow: visible;
-}
-
 .ree-rte-pop.is-up .ree-rte-menu {
   top: auto;
   bottom: calc(100% + 6px);
@@ -933,46 +1567,6 @@
   font-weight: 600;
 }
 
-.ree-rte-swatches {
-  display: grid;
-  grid-template-columns: repeat(6, 22px);
-  gap: 6px;
-  padding: 4px;
-}
-
-.ree-rte-swatch {
-  width: 22px;
-  height: 22px;
-  padding: 0;
-  border: 1px solid rgba(32, 34, 35, 0.16);
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.ree-rte-swatch.is-active {
-  outline: 2px solid #202223;
-  outline-offset: 1px;
-}
-
-.ree-rte-color-actions {
-  display: flex;
-  gap: 6px;
-  padding: 4px;
-}
-
-.ree-rte-color-actions .ree-btn {
-  padding: 6px 10px;
-  font-size: 13px;
-}
-
-.ree-rte-color-input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  opacity: 0;
-  pointer-events: none;
-}
-
 .ree-rte-emoji-grid {
   display: grid;
   grid-template-columns: repeat(8, 28px);
@@ -988,29 +1582,11 @@
   background: transparent;
   cursor: pointer;
   font-size: 16px;
-  line-height: 1;
-}
-
-.ree-rte-emoji:hover {
-  background: var(--ree-panel-secondary);
-}
-
-.ree-rte-link {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  width: 280px;
-  padding: 6px;
-}
-
-.ree-rte-link-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
+  line-height: 1;
 }
 
-.ree-rte-link-actions .ree-btn {
-  padding: 6px 12px;
+.ree-rte-emoji:hover {
+  background: var(--ree-panel-secondary);
 }
 
 .ree-rte-variables {
@@ -1041,12 +1617,19 @@
 
 .ree-rte-metric-label {
   display: flex;
+  align-items: center;
   justify-content: space-between;
   gap: 8px;
   color: var(--ree-muted);
   font-size: 12px;
 }
 
+.ree-rte-metric-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
 .ree-rte-option:disabled {
   opacity: 0.35;
   cursor: default;
@@ -1080,6 +1663,10 @@
   font-size: 0.75em;
 }
 
+.ree-rte-button .ProseMirror p {
+  margin: 0;
+  text-align: center;
+}
 
 /* ---------- 变量 ---------- */
 
@@ -1151,6 +1738,12 @@
 
 /* ---------- 配置区 ---------- */
 
+.ree-col-right {
+  --ree-primary: #202223;
+  --ree-primary-hover: #303030;
+  --ree-primary-soft: #f6f6f7;
+}
+
 .ree-inspector {
   --ree-inspector-section-space: 16px;
   padding: 20px 16px;
@@ -1222,13 +1815,13 @@
   padding-bottom: var(--ree-inspector-section-space);
 }
 
-/* Global 没有标题区，容器顶部留白会叠到第一个类目上。 */
-.ree-inspector-global {
+/* Body 没有标题区，容器顶部留白会叠到第一个类目上。 */
+.ree-inspector-body {
   padding-top: 0;
   padding-bottom: 0;
 }
 
-.ree-inspector-global > .ree-inspector-section:first-child {
+.ree-inspector-body > .ree-inspector-section:first-child {
   border-top: 0;
 }
 
@@ -1259,47 +1852,40 @@
   margin-left: auto;
 }
 
-.ree-input {
-  width: 100%;
-  border: 1px solid var(--ree-border, #e3e3e5);
-  border-radius: var(--ree-radius, 8px);
-  padding: 8px 12px;
-  font-size: 14px;
-  line-height: 1.4;
-  font-family: inherit;
-  color: var(--ree-text, #202223);
-  background: var(--ree-panel, #ffffff);
-  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+.ree-inspector-advanced summary {
+  cursor: pointer;
+  color: var(--ree-muted);
+  font-size: 12px;
 }
 
-.ree-input:focus {
-  outline: none;
-  border-color: var(--ree-primary, #005bd3);
-  box-shadow: 0 0 0 1px var(--ree-primary, #005bd3);
+.ree-inspector-advanced[open] summary {
+  margin-bottom: 14px;
 }
 
-.ree-select {
+.ree-field-label:has(> .ree-var-wrap) {
   position: relative;
+  justify-content: flex-start;
 }
 
-.ree-select .ree-input {
-  appearance: none;
-  -webkit-appearance: none;
-  padding-right: 36px;
-  background-color: var(--ree-panel);
+.ree-field-label > .ree-var-wrap {
+  position: static;
 }
 
-.ree-select-icon {
-  position: absolute;
-  top: 0;
-  right: 10px;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  pointer-events: none;
-  color: var(--ree-muted);
+.ree-field-label .ree-var-menu {
+  left: 0;
+  width: min(280px, 100%);
+  min-width: 0;
+}
+
+.ree-field-label .ree-var-name,
+.ree-field-label .ree-var-label {
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
 }
 
+/* ---------- 配置控件 ---------- */
+
 .ree-textarea {
   resize: vertical;
   min-height: 60px;
@@ -1338,8 +1924,8 @@
 }
 
 .ree-color-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+  display: flex;
+  flex-wrap: wrap;
   gap: 12px 16px;
 }
 
@@ -1350,83 +1936,6 @@
   min-width: 0;
 }
 
-.ree-color-chip {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  cursor: pointer;
-}
-
-.ree-color-swatch {
-  position: relative;
-  width: 36px;
-  height: 22px;
-  flex-shrink: 0;
-}
-
-.ree-color-swatch-face {
-  display: block;
-  width: 100%;
-  height: 100%;
-  border: 1px solid #d2d5d8;
-  border-radius: 999px;
-  background: #ffffff;
-}
-
-.ree-color-swatch-face.is-empty {
-  background:
-    linear-gradient(45deg, #e3e3e5 25%, transparent 25%),
-    linear-gradient(-45deg, #e3e3e5 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #e3e3e5 75%),
-    linear-gradient(-45deg, transparent 75%, #e3e3e5 75%);
-  background-size: 8px 8px;
-  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
-  background-color: #ffffff;
-}
-
-.ree-color-native {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-  border: 0;
-  padding: 0;
-}
-
-.ree-color-chip-label {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--ree-text);
-  font-size: 13px;
-  line-height: 1.3;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ree-reset {
-  appearance: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  flex-shrink: 0;
-  padding: 0;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--ree-muted);
-  cursor: pointer;
-}
-
-.ree-reset:hover {
-  background: var(--ree-panel-secondary);
-  color: var(--ree-text);
-}
-
 .ree-field-value {
   font-size: 12px;
   color: var(--ree-muted);
@@ -1456,82 +1965,6 @@
   width: 100%;
 }
 
-.ree-range {
-  -webkit-appearance: none;
-  appearance: none;
-  display: block;
-  flex: 1 1 auto;
-  width: 100%;
-  min-width: 0;
-  height: 20px;
-  margin: 0;
-  background: transparent;
-  cursor: pointer;
-}
-
-.ree-range::-webkit-slider-container {
-  width: 100%;
-}
-
-.ree-range::-webkit-slider-runnable-track {
-  width: 100%;
-  height: 4px;
-  border: 0;
-  border-radius: 999px;
-  background: linear-gradient(to right, #303030 0%, #303030 var(--ree-range-progress), #e3e3e5 var(--ree-range-progress), #e3e3e5 100%);
-}
-
-.ree-range::-webkit-slider-thumb {
-  appearance: none;
-  width: 14px;
-  height: 14px;
-  margin-top: -5px;
-  border: 0;
-  border-radius: 50%;
-  background: #303030;
-}
-
-.ree-range::-moz-range-track {
-  height: 4px;
-  border: 0;
-  border-radius: 999px;
-  background: #e3e3e5;
-}
-
-.ree-range::-moz-range-progress {
-  height: 4px;
-  border: 0;
-  border-radius: 999px;
-  background: #303030;
-}
-
-.ree-range::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
-  border: 0;
-  border-radius: 50%;
-  background: #303030;
-}
-
-.ree-unit-select {
-  appearance: none;
-  flex-shrink: 0;
-  height: 28px;
-  border: 1px solid var(--ree-border);
-  border-radius: 6px;
-  background-color: var(--ree-panel);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.25 8 10.25 12 6.25' stroke='%236d7175' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 4px center;
-  background-size: 12px;
-  color: var(--ree-text);
-  font: inherit;
-  font-size: 12px;
-  line-height: 1;
-  padding: 0 20px 0 8px;
-  cursor: pointer;
-}
-
 .ree-align-row {
   display: flex;
   gap: 4px;
@@ -1555,45 +1988,73 @@
 }
 
 .ree-align-btn.is-active {
-  border-color: var(--ree-primary);
-  color: var(--ree-primary);
-  background: var(--ree-primary-soft);
+  border-color: var(--ree-text);
+  color: var(--ree-text);
+  background: var(--ree-panel-secondary);
 }
 
 
 .ree-spacing-control { display: grid; gap: 10px; }
-.ree-spacing-link { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ree-muted); }
-.ree-spacing-link input[type="checkbox"] {
-  appearance: none;
-  -webkit-appearance: none;
-  width: 16px;
-  height: 16px;
+.ree-spacing-link { gap: 6px; font-size: 12px; color: var(--ree-muted); }
+.ree-spacing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+
+/* 原生 modal dialog 进入 top layer，覆盖整个视口并隔离背景交互。 */
+.ree-rte-link {
+  position: fixed;
+  inset: 0;
+  width: min(440px, calc(100vw - 32px));
+  max-width: none;
+  max-height: calc(100dvh - 32px);
+  margin: auto;
+  padding: 0;
+  overflow: auto;
+  background: var(--ree-panel, #ffffff);
+  border: 1px solid var(--ree-border, #e3e3e5);
+  border-radius: 12px;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
+  color: var(--ree-text, #202223);
+  font: 400 14px/1.5 var(--ree-font, Arial, sans-serif);
+  visibility: visible;
+}
+
+.ree-rte-link::backdrop {
+  background: rgba(0, 0, 0, 0.6);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+}
+
+.ree-rte-link-title {
   margin: 0;
-  border: 1px solid #1a1a1a;
-  border-radius: 3px;
-  background: #ffffff;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--ree-border);
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.ree-rte-link-fields {
   display: grid;
-  place-content: center;
-  cursor: pointer;
-  flex-shrink: 0;
+  gap: 20px;
+  padding: 24px;
 }
-.ree-spacing-link input[type="checkbox"]:checked {
-  background: #1a1a1a;
-  border-color: #1a1a1a;
+
+.ree-rte-link-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 24px;
+  border-top: 1px solid var(--ree-border);
 }
-.ree-spacing-link input[type="checkbox"]:checked::after {
-  content: "";
-  width: 8px;
-  height: 4px;
-  border: solid #ffffff;
-  border-width: 0 0 1.5px 1.5px;
-  transform: rotate(-45deg) translateY(-1px);
+
+.ree-rte-link-actions .ree-btn {
+  min-width: 80px;
 }
-.ree-spacing-link input[type="checkbox"]:focus-visible {
-  outline: 2px solid #1a1a1a;
-  outline-offset: 2px;
+
+.ree-rte-link-error {
+  margin: -12px 0 0;
+  color: var(--ree-danger);
+  font-size: 12px;
 }
-.ree-spacing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
 
 /* ---------- 拖拽浮层 ---------- */
 
@@ -1609,11 +2070,14 @@
   font-weight: 500;
 }
 
-.ree-preview-frame {
-  height: 100%;
-  min-height: 520px;
-  flex-shrink: 0;
-  border: none;
-  background: #ffffff;
-  box-shadow: var(--ree-shadow-md);
-}
+.ree-plugin-field { min-width: 0; }
+.ree-plugin-error { margin: 8px 0; padding: 8px; color: #b42318; font-size: 13px; overflow-wrap: anywhere; }
+.ree-plugin-empty { margin: 6px 0; color: #737373; font-size: 12px; }
+.ree-plugin-list { min-width: 0; margin: 0; padding: 10px; border: 1px solid #e3e3e5; border-radius: 6px; }
+.ree-plugin-list-item { display: grid; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e3e3e5; }
+.ree-plugin-list-actions { display: flex; align-items: center; gap: 4px; }
+.ree-plugin-list-actions > span { margin-right: auto; }
+.ree-plugin-image { display: block; max-width: 100%; max-height: 120px; object-fit: contain; }
+.ree-plugin-richtext { min-height: 64px; padding: 8px; border: 1px solid #e3e3e5; border-radius: 4px; }
+.ree-plugin-richtext:focus-within { border-color: #000000; }
+.ree-plugin-richtext .ProseMirror { min-height: 48px; outline: none; }