better-react-email-editor 0.1.0

package/dist/styles.css

@@ -0,0 +1,1634 @@
+/*
+ * better-react-email-editor
+ *
+ * Every class is prefixed with `bree-`. Theme the editor by overriding the
+ * custom properties below on `.bree` (or on your own class passed through
+ * `className`), and restyle any part through its class or `className` prop.
+ */
+
+.bree {
+  --bree-bg: #ffffff;
+  --bree-bg-subtle: #f8fafc;
+  --bree-border: #e5e7eb;
+  --bree-border-strong: #d1d5db;
+  --bree-text: #111827;
+  --bree-text-secondary: #334155;
+  --bree-muted: #6b7280;
+  --bree-accent: #2563eb;
+  --bree-accent-hover: #1d4ed8;
+  --bree-accent-soft: #eff6ff;
+  --bree-danger: #dc2626;
+  --bree-radius: 8px;
+  --bree-canvas-bg: #eef1f5;
+  --bree-topbar-height: 56px;
+  --bree-sidebar-width: 360px;
+  --bree-layers-width: 270px;
+  --bree-font: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  font-family: var(--bree-font);
+  color: var(--bree-text);
+  -webkit-font-smoothing: antialiased;
+}
+
+.bree-root {
+  height: 100%;
+  min-height: 0;
+}
+
+/* Zero-specificity resets: any class of the editor (or yours) wins over them. */
+:where(.bree),
+:where(.bree) *,
+:where(.bree) *::before,
+:where(.bree) *::after {
+  box-sizing: border-box;
+}
+
+:where(.bree) button {
+  font: inherit;
+  color: inherit;
+}
+
+/* ---------------------------------------------------------------------------
+ * App layout
+ * ------------------------------------------------------------------------- */
+
+/* Default layout of <BetterEmailEditor>. With <EditorRoot>, lay the parts out yourself. */
+.bree-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
+  grid-template-areas: 'canvas';
+  height: 100%;
+  overflow: hidden;
+}
+
+.bree-layout.bree-with-topbar {
+  grid-template-rows: var(--bree-topbar-height) minmax(0, 1fr);
+  grid-template-areas:
+    'top'
+    'canvas';
+}
+
+.bree-layout.bree-with-sidebar {
+  grid-template-columns: minmax(0, 1fr) var(--bree-sidebar-width);
+  grid-template-areas: 'canvas side';
+}
+
+.bree-layout.bree-with-topbar.bree-with-sidebar {
+  grid-template-areas:
+    'top top'
+    'canvas side';
+}
+
+.bree-layout.bree-with-layers {
+  grid-template-columns: var(--bree-layers-width) minmax(0, 1fr);
+  grid-template-areas: 'layers canvas';
+}
+
+.bree-layout.bree-with-topbar.bree-with-layers {
+  grid-template-areas:
+    'top top'
+    'layers canvas';
+}
+
+.bree-layout.bree-with-layers.bree-with-sidebar {
+  grid-template-columns: var(--bree-layers-width) minmax(0, 1fr) var(--bree-sidebar-width);
+  grid-template-areas: 'layers canvas side';
+}
+
+.bree-layout.bree-with-topbar.bree-with-layers.bree-with-sidebar {
+  grid-template-areas:
+    'top top top'
+    'layers canvas side';
+}
+
+.bree-layout > .bree-topbar {
+  grid-area: top;
+}
+
+.bree-layout > .bree-layers {
+  grid-area: layers;
+}
+
+.bree-layout > .bree-canvas {
+  grid-area: canvas;
+}
+
+.bree-layout > .bree-sidebar {
+  grid-area: side;
+}
+
+
+.bree-topbar {
+  display: flex;
+  height: var(--bree-topbar-height);
+  align-items: center;
+  gap: 16px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--bree-border);
+  background: var(--bree-bg);
+  z-index: 5;
+}
+
+.bree-topbar-start,
+.bree-topbar-actions {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.bree-topbar-actions {
+  justify-content: flex-end;
+}
+
+.bree-topbar-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+}
+
+.bree-btn-group {
+  display: flex;
+  gap: 2px;
+}
+
+.bree-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 14px;
+  border-radius: var(--bree-radius);
+  border: 1px solid var(--bree-border-strong);
+  background: var(--bree-bg);
+  font-size: 13px;
+  font-weight: 550;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.bree-btn:hover {
+  background: var(--bree-bg-subtle);
+}
+
+.bree-btn.bree-primary {
+  background: var(--bree-accent);
+  border-color: var(--bree-accent);
+  color: #fff;
+}
+
+.bree-btn.bree-primary:hover {
+  background: var(--bree-accent-hover);
+}
+
+.bree-btn.bree-ghost {
+  border-color: transparent;
+}
+
+.bree-icon-button {
+  display: inline-grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: var(--bree-radius);
+  background: transparent;
+  cursor: pointer;
+  color: var(--bree-muted);
+}
+
+.bree-icon-button:hover:not(:disabled) {
+  background: var(--bree-bg-subtle);
+  color: var(--bree-text);
+}
+
+.bree-icon-button:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+/* ---------------------------------------------------------------------------
+ * Canvas (the real editor)
+ * ------------------------------------------------------------------------- */
+
+.bree-canvas {
+  position: relative;
+  overflow: auto;
+  min-height: 0;
+  background: var(--bree-canvas-bg);
+}
+
+.bree-canvas-content {
+  min-height: 100%;
+}
+
+.bree-canvas-content > .tiptap {
+  min-height: 100%;
+  padding-bottom: 160px !important;
+}
+
+.bree-canvas .tiptap .node-container {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+  transition: width 0.2s ease, max-width 0.2s ease;
+  box-shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 8px 24px rgb(15 23 42 / 0.06);
+}
+
+.bree-canvas[data-device='mobile'] .tiptap .node-container {
+  width: 375px !important;
+  max-width: 375px !important;
+}
+
+.bree-canvas[data-device='mobile'] .tiptap .node-columns {
+  flex-direction: column;
+}
+
+.bree-canvas .tiptap .ProseMirror-selectednode {
+  outline: none;
+}
+
+.bree-canvas .tiptap img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+.bree-canvas .tiptap img[alignment='center'] {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.bree-canvas .tiptap img[alignment='right'] {
+  margin-left: auto;
+}
+
+.bree-canvas .tiptap .align-center {
+  text-align: center;
+}
+
+.bree-canvas .tiptap .align-right {
+  text-align: right;
+}
+
+.bree-canvas .tiptap a.node-button {
+  display: inline-block;
+  cursor: text;
+}
+
+.bree-canvas .tiptap .node-column {
+  position: relative;
+}
+
+.bree-canvas .tiptap .node-column[style*='width'] {
+  flex: none;
+}
+
+/* Empty drop zones, like Unlayer's "No content here". */
+.bree-canvas .tiptap .node-column:has(> p:only-child > br.ProseMirror-trailingBreak:only-child),
+.bree-canvas .tiptap .node-section:has(> p:only-child > br.ProseMirror-trailingBreak:only-child) {
+  min-height: 72px;
+  outline: 1px dashed #93c5fd;
+  outline-offset: -1px;
+  background: #f8fbff;
+  border-radius: 6px;
+}
+
+.bree-canvas .tiptap .node-column:has(> p:only-child > br.ProseMirror-trailingBreak:only-child)::after,
+.bree-canvas .tiptap .node-section:has(> p:only-child > br.ProseMirror-trailingBreak:only-child)::after {
+  content: var(--bree-empty-zone-label, 'Drag content here');
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: #60a5fa;
+  font: 500 12px/1.2 Inter, system-ui, sans-serif;
+  pointer-events: none;
+}
+
+.bree-canvas .tiptap .node-section {
+  position: relative;
+  display: block;
+}
+
+.bree-canvas .tiptap .node-spacer {
+  border-radius: 4px;
+}
+
+.bree-canvas .tiptap .node-spacer:hover,
+.bree-canvas .tiptap .node-spacer.ProseMirror-selectednode {
+  background-image: repeating-linear-gradient(-45deg, rgb(37 99 235 / 0.1) 0 6px, transparent 6px 12px);
+}
+
+.bree-canvas .tiptap .node-socialLinks {
+  padding: 8px 0;
+  line-height: 0;
+}
+
+.bree-canvas .tiptap .node-socialLinks img {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.bree-canvas .tiptap .node-socialLinks-item {
+  display: inline-block;
+}
+
+.bree-canvas .tiptap .node-htmlBlock {
+  cursor: default;
+}
+
+/* ---------------------------------------------------------------------------
+ * Canvas overlay: hover / selection frames, toolbar, drop indicator
+ * ------------------------------------------------------------------------- */
+
+.bree-ov-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  z-index: 20;
+  pointer-events: none;
+}
+
+.bree-ov-frame {
+  position: absolute;
+  pointer-events: none;
+  border-radius: 2px;
+}
+
+.bree-ov-hover {
+  box-shadow: 0 0 0 1px #60a5fa;
+}
+
+.bree-ov-selected {
+  box-shadow: 0 0 0 2px var(--bree-accent);
+}
+
+.bree-ov-ghost,
+.bree-ov-ghost * {
+  opacity: 0;
+  pointer-events: none !important;
+}
+
+.bree-ov-source {
+  background: repeating-linear-gradient(45deg, rgb(37 99 235 / 0.1) 0 6px, rgb(37 99 235 / 0.03) 6px 12px);
+  box-shadow: 0 0 0 1px #93c5fd;
+}
+
+.bree-ov-tag {
+  position: absolute;
+  top: -21px;
+  left: -2px;
+  height: 21px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 4px 4px 0 0;
+  background: #60a5fa;
+  color: #fff;
+  font: 600 11px/21px Inter, system-ui, sans-serif;
+  white-space: nowrap;
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+.bree-ov-tag-selected {
+  background: var(--bree-accent);
+  cursor: default;
+  left: -2px;
+}
+
+.bree-ov-handle {
+  position: absolute;
+  top: 50%;
+  left: -30px;
+  transform: translateY(-50%);
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 30px;
+  border-radius: 6px;
+  background: #fff;
+  border: 1px solid #bfdbfe;
+  color: var(--bree-accent);
+  box-shadow: 0 1px 3px rgb(15 23 42 / 0.12);
+  cursor: grab;
+  pointer-events: auto;
+}
+
+.bree-ov-toolbar {
+  position: absolute;
+  top: -2px;
+  left: calc(100% + 8px);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 8px;
+  background: var(--bree-accent);
+  box-shadow: 0 4px 12px rgb(37 99 235 / 0.25);
+  pointer-events: auto;
+}
+
+.bree-ov-tool {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #fff;
+  cursor: pointer;
+}
+
+.bree-ov-tool:hover {
+  background: rgb(255 255 255 / 0.2);
+}
+
+.bree-ov-tool.bree-ov-danger:hover {
+  background: var(--bree-danger);
+}
+
+.bree-ov-handle:hover {
+  background: var(--bree-accent-soft);
+}
+
+.bree-ov-handle:active {
+  cursor: grabbing;
+}
+
+.bree-ov-handle:focus {
+  outline: none;
+}
+
+.bree-ov-dropline {
+  position: absolute;
+  height: 0;
+  border-top: 3px solid var(--bree-accent);
+  margin-top: -1.5px;
+  border-radius: 3px;
+  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
+}
+
+.bree-ov-dropline-label {
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 3px 10px;
+  border-radius: 999px;
+  background: var(--bree-accent);
+  color: #fff;
+  font: 600 11px/1.3 Inter, system-ui, sans-serif;
+  white-space: nowrap;
+}
+
+.bree-ov-dropzone {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  border: 2px dashed var(--bree-accent);
+  border-radius: 6px;
+  background: #eff6ff;
+  color: var(--bree-accent);
+  font: 600 12px/1.3 Inter, system-ui, sans-serif;
+}
+
+.bree-ov-dropzone span {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* ---------------------------------------------------------------------------
+ * Sidebar
+ * ------------------------------------------------------------------------- */
+
+.bree-sidebar {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-left: 1px solid var(--bree-border);
+  background: var(--bree-bg);
+  outline: none;
+  font-size: 13px;
+}
+
+.bree-content-panel,
+.bree-properties {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+}
+
+.bree-panel-scroll {
+  flex: 1;
+  overflow: auto;
+  padding: 4px 16px 24px;
+}
+
+.bree-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--bree-border);
+  padding: 0 8px;
+}
+
+.bree-tabs button {
+  flex: 1;
+  height: 46px;
+  border: 0;
+  background: none;
+  color: var(--bree-muted);
+  font-weight: 600;
+  font-size: 13px;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+}
+
+.bree-tabs button.bree-active {
+  color: var(--bree-accent);
+  border-bottom-color: var(--bree-accent);
+}
+
+.bree-tabs.bree-compact {
+  border: 0;
+  padding: 0;
+  gap: 4px;
+}
+
+.bree-tabs.bree-compact button {
+  flex: none;
+  height: 34px;
+  padding: 0 12px;
+  border-radius: var(--bree-radius);
+  border: 0;
+}
+
+.bree-tabs.bree-compact button.bree-active {
+  background: var(--bree-accent-soft);
+}
+
+.bree-panel-title {
+  margin: 18px 0 10px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--bree-muted);
+}
+
+.bree-tiles {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+
+.bree-tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 84px;
+  border: 1px solid var(--bree-border);
+  border-radius: 10px;
+  background: var(--bree-bg);
+  cursor: grab;
+  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
+}
+
+.bree-tile:hover {
+  border-color: #93c5fd;
+  box-shadow: 0 4px 14px rgb(37 99 235 / 0.12);
+  transform: translateY(-1px);
+}
+
+.bree-tile:active {
+  cursor: grabbing;
+}
+
+.bree-tile-icon {
+  color: var(--bree-text-secondary);
+  display: grid;
+  place-items: center;
+}
+
+.bree-tile:hover .bree-tile-icon {
+  color: var(--bree-accent);
+}
+
+.bree-tile-label {
+  font-size: 12px;
+  font-weight: 550;
+  color: var(--bree-text-secondary);
+}
+
+.bree-hint {
+  margin: 14px 0 0;
+  color: var(--bree-muted);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.bree-block-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-top: 12px;
+}
+
+.bree-block-card {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 10px;
+  border: 1px solid var(--bree-border);
+  border-radius: 10px;
+  background: var(--bree-bg);
+  text-align: left;
+  cursor: grab;
+}
+
+.bree-block-card:hover {
+  border-color: #93c5fd;
+  box-shadow: 0 4px 14px rgb(37 99 235 / 0.12);
+}
+
+.bree-block-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.bree-block-text span {
+  color: var(--bree-muted);
+  font-size: 12px;
+}
+
+.bree-block-thumb {
+  flex: none;
+  width: 92px;
+  height: 58px;
+  border-radius: 6px;
+  background: #f1f5f9;
+  display: grid;
+  gap: 4px;
+  padding: 7px;
+}
+
+.bree-block-thumb i {
+  display: block;
+  border-radius: 3px;
+  background: #cbd5e1;
+}
+
+.bree-thumb-header {
+  grid-template-columns: 1fr 1.4fr;
+  grid-template-rows: 1fr;
+}
+
+.bree-thumb-header i:nth-child(1) {
+  background: #94a3b8;
+}
+
+.bree-thumb-header i:nth-child(3) {
+  display: none;
+}
+
+.bree-thumb-hero {
+  background: #e0e7ff;
+  grid-template-rows: 1.2fr 0.6fr 0.8fr;
+  justify-items: center;
+}
+
+.bree-thumb-hero i:nth-child(1) {
+  width: 80%;
+  background: #818cf8;
+}
+
+.bree-thumb-hero i:nth-child(2) {
+  width: 60%;
+}
+
+.bree-thumb-hero i:nth-child(3) {
+  width: 36%;
+  background: #4f46e5;
+}
+
+.bree-thumb-products,
+.bree-thumb-features {
+  grid-template-columns: 1fr 1fr;
+}
+
+.bree-thumb-products i:nth-child(3) {
+  display: none;
+}
+
+.bree-thumb-features {
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.bree-thumb-testimonial {
+  grid-template-rows: 1fr 0.4fr;
+}
+
+.bree-thumb-testimonial i:nth-child(1) {
+  border-left: 3px solid #94a3b8;
+  background: #e2e8f0;
+}
+
+.bree-thumb-testimonial i:nth-child(2) {
+  width: 50%;
+  justify-self: end;
+}
+
+.bree-thumb-testimonial i:nth-child(3) {
+  display: none;
+}
+
+.bree-thumb-footer {
+  grid-template-rows: 0.15fr 0.6fr 0.4fr;
+  justify-items: center;
+}
+
+.bree-thumb-footer i:nth-child(1) {
+  width: 100%;
+}
+
+.bree-thumb-footer i:nth-child(2) {
+  width: 50%;
+  background: #94a3b8;
+}
+
+.bree-thumb-footer i:nth-child(3) {
+  width: 70%;
+}
+
+/* Properties */
+
+.bree-properties-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 12px 10px 16px;
+  border-bottom: 1px solid var(--bree-border);
+}
+
+.bree-properties-header h2 {
+  margin: 2px 0 0;
+  font-size: 16px;
+}
+
+.bree-eyebrow {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--bree-accent);
+}
+
+.bree-breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--bree-border);
+  background: var(--bree-bg-subtle);
+  font-size: 12px;
+}
+
+.bree-crumb {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.bree-crumb button {
+  border: 0;
+  background: none;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: var(--bree-accent);
+  cursor: pointer;
+}
+
+.bree-crumb button:hover:not(:disabled) {
+  background: var(--bree-accent-soft);
+}
+
+.bree-crumb button:disabled {
+  color: var(--bree-text);
+  font-weight: 600;
+  cursor: default;
+}
+
+.bree-crumb-sep {
+  color: var(--bree-border-strong);
+}
+
+.bree-group {
+  border-bottom: 1px solid var(--bree-border);
+}
+
+.bree-group:last-child {
+  border-bottom: 0;
+}
+
+.bree-group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 14px 0;
+  border: 0;
+  background: none;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--bree-text-secondary);
+  cursor: pointer;
+}
+
+.bree-chevron {
+  font-size: 16px;
+  color: var(--bree-muted);
+  transition: transform 0.15s;
+}
+
+.bree-chevron.bree-open {
+  transform: rotate(90deg);
+}
+
+.bree-group-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-bottom: 16px;
+}
+
+.bree-field {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.bree-field.bree-stacked {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+}
+
+.bree-field-label {
+  color: var(--bree-text-secondary);
+  font-size: 12.5px;
+}
+
+.bree-field-control {
+  display: flex;
+  justify-content: flex-end;
+  min-width: 0;
+}
+
+.bree-field.bree-stacked .bree-field-control {
+  justify-content: stretch;
+}
+
+.bree-field.bree-stacked .bree-field-control > * {
+  flex: 1;
+}
+
+.bree-input {
+  width: 100%;
+  height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--bree-border-strong);
+  border-radius: 6px;
+  background: #fff;
+  font: inherit;
+  font-size: 13px;
+  outline: none;
+}
+
+.bree-input:focus {
+  border-color: var(--bree-accent);
+  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
+}
+
+.bree-textarea {
+  height: auto;
+  padding: 8px 10px;
+  font-family: ui-monospace, 'Cascadia Code', Menlo, monospace;
+  font-size: 12px;
+  resize: vertical;
+}
+
+.bree-select {
+  width: 150px;
+  padding-right: 4px;
+}
+
+.bree-number {
+  display: inline-flex;
+  align-items: center;
+  width: 110px;
+  border: 1px solid var(--bree-border-strong);
+  border-radius: 6px;
+  background: #fff;
+  overflow: hidden;
+}
+
+.bree-number:focus-within {
+  border-color: var(--bree-accent);
+  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
+}
+
+.bree-number .bree-input {
+  border: 0;
+  box-shadow: none !important;
+  height: 30px;
+}
+
+.bree-unit {
+  padding: 0 8px;
+  color: var(--bree-muted);
+  font-size: 12px;
+  border-left: 1px solid var(--bree-border);
+  background: var(--bree-bg-subtle);
+  line-height: 30px;
+}
+
+.bree-range {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 190px;
+}
+
+.bree-range input {
+  flex: 1;
+  accent-color: var(--bree-accent);
+}
+
+.bree-range-value {
+  min-width: 46px;
+  text-align: right;
+  color: var(--bree-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.bree-color-field {
+  display: flex;
+  gap: 6px;
+  width: 100%;
+}
+
+.bree-color-trigger {
+  flex: none;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--bree-border-strong);
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 2px #fff;
+  cursor: pointer;
+}
+
+.bree-color-trigger.bree-empty {
+  background: repeating-conic-gradient(#e2e8f0 0 25%, #fff 0 50%) 0 0 / 10px 10px;
+}
+
+.bree-color-trigger:hover,
+.bree-color-trigger[data-state='open'] {
+  border-color: var(--bree-accent);
+}
+
+.bree-color-popover {
+  z-index: 200;
+  width: 252px;
+  padding: 12px;
+  border: 1px solid var(--bree-border);
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 12px 32px rgb(15 23 42 / 0.18);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-size: 12px;
+  outline: none;
+}
+
+.bree-color-popover .react-colorful {
+  width: 100%;
+  height: 170px;
+}
+
+.bree-color-popover .react-colorful__saturation {
+  border-radius: 8px 8px 0 0;
+  border-bottom: 0;
+}
+
+.bree-color-popover .react-colorful__hue {
+  height: 14px;
+  border-radius: 0 0 8px 8px;
+}
+
+.bree-color-popover .react-colorful__pointer {
+  width: 18px;
+  height: 18px;
+  border-width: 3px;
+}
+
+.bree-color-popover-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.bree-color-preview {
+  flex: none;
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  border: 1px solid rgb(15 23 42 / 0.12);
+}
+
+.bree-hex-field {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: 30px;
+  padding: 0 8px;
+  border: 1px solid var(--bree-border-strong);
+  border-radius: 6px;
+  color: var(--bree-muted);
+  font-family: ui-monospace, 'Cascadia Code', Menlo, monospace;
+}
+
+.bree-hex-field:focus-within {
+  border-color: var(--bree-accent);
+  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
+}
+
+.bree-hex-field input {
+  width: 100%;
+  border: 0;
+  outline: none;
+  font: inherit;
+  color: var(--bree-text);
+  text-transform: uppercase;
+  background: transparent;
+}
+
+.bree-color-popover-title {
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--bree-muted);
+}
+
+.bree-swatches {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  gap: 5px;
+}
+
+.bree-swatch {
+  aspect-ratio: 1;
+  width: 100%;
+  border-radius: 6px;
+  border: 1px solid rgb(15 23 42 / 0.12);
+  cursor: pointer;
+  padding: 0;
+}
+
+.bree-swatch:hover {
+  transform: scale(1.12);
+}
+
+.bree-swatch.bree-active {
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bree-accent);
+}
+
+.bree-color-reset {
+  height: 30px;
+  border: 1px dashed var(--bree-border-strong);
+  border-radius: 6px;
+  background: var(--bree-bg-subtle);
+  color: var(--bree-text-secondary);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.bree-color-reset:hover {
+  border-color: var(--bree-accent);
+  color: var(--bree-accent);
+}
+
+.bree-segmented {
+  display: inline-flex;
+  padding: 2px;
+  border-radius: 8px;
+  background: #f1f5f9;
+  gap: 2px;
+}
+
+.bree-segmented button {
+  display: grid;
+  place-items: center;
+  min-width: 34px;
+  height: 28px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--bree-text-secondary);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.bree-segmented button.bree-active {
+  background: #fff;
+  color: var(--bree-accent);
+  box-shadow: 0 1px 2px rgb(15 23 42 / 0.12);
+}
+
+.bree-device-toggle button {
+  min-width: 38px;
+}
+
+.bree-padding {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.bree-padding-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.bree-padding-side {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 11.5px;
+  color: var(--bree-muted);
+}
+
+.bree-padding-side .bree-number {
+  width: 100%;
+}
+
+.bree-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--bree-muted);
+  cursor: pointer;
+}
+
+.bree-button-like {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  border: 1px dashed var(--bree-border-strong);
+  border-radius: 6px;
+  background: var(--bree-bg-subtle);
+  font-size: 12.5px;
+  font-weight: 550;
+  cursor: pointer;
+}
+
+.bree-button-like:hover {
+  border-color: var(--bree-accent);
+  color: var(--bree-accent);
+}
+
+.bree-image-preview {
+  display: grid;
+  place-items: center;
+  height: 120px;
+  border-radius: 8px;
+  background: repeating-conic-gradient(#f1f5f9 0 25%, #fff 0 50%) 0 0 / 16px 16px;
+  overflow: hidden;
+  border: 1px solid var(--bree-border);
+}
+
+.bree-image-preview img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.bree-social-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.bree-social-row {
+  display: grid;
+  grid-template-columns: 110px 1fr 28px;
+  gap: 6px;
+  align-items: center;
+}
+
+.bree-social-row .bree-select {
+  width: 100%;
+}
+
+.bree-social-row .bree-icon-button {
+  width: 28px;
+  height: 28px;
+}
+
+.bree-ratio-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+}
+
+.bree-ratio {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: stretch;
+  padding: 8px;
+  border: 1px solid var(--bree-border);
+  border-radius: 8px;
+  background: #fff;
+  font-size: 11.5px;
+  color: var(--bree-text-secondary);
+  cursor: pointer;
+}
+
+.bree-ratio:hover {
+  border-color: var(--bree-accent);
+  color: var(--bree-accent);
+}
+
+.bree-ratio-bars {
+  display: flex;
+  gap: 3px;
+  height: 14px;
+}
+
+.bree-ratio-bars i {
+  border-radius: 3px;
+  background: #cbd5e1;
+}
+
+.bree-ratio:hover .bree-ratio-bars i {
+  background: #93c5fd;
+}
+
+.bree-mark-row {
+  display: flex;
+  gap: 6px;
+}
+
+.bree-mark {
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 32px;
+  border: 1px solid var(--bree-border-strong);
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+}
+
+.bree-mark.bree-active {
+  background: var(--bree-accent-soft);
+  border-color: var(--bree-accent);
+  color: var(--bree-accent);
+}
+
+.bree-readonly {
+  color: var(--bree-muted);
+  word-break: break-all;
+}
+
+/* ---------------------------------------------------------------------------
+ * Preview modal
+ * ------------------------------------------------------------------------- */
+
+.bree-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: grid;
+  place-items: center;
+  padding: 32px;
+  background: rgb(15 23 42 / 0.45);
+}
+
+.bree-modal {
+  display: flex;
+  flex-direction: column;
+  width: min(1100px, 100%);
+  height: min(860px, 100%);
+  border-radius: 14px;
+  background: var(--bree-bg);
+  box-shadow: 0 24px 64px rgb(15 23 42 / 0.3);
+  overflow: hidden;
+}
+
+.bree-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px 10px 16px;
+  border-bottom: 1px solid var(--bree-border);
+}
+
+.bree-modal-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.bree-modal-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: #e2e8f0;
+}
+
+.bree-preview-frame {
+  height: 100%;
+  margin: 0 auto;
+  background: #fff;
+}
+
+.bree-preview-frame iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.bree-preview-mobile {
+  width: 390px;
+  height: calc(100% - 48px);
+  margin-top: 24px;
+  border-radius: 28px;
+  border: 10px solid #0f172a;
+  overflow: hidden;
+}
+
+.bree-code {
+  margin: 0;
+  min-height: 100%;
+  padding: 16px 20px;
+  background: #0f172a;
+  color: #e2e8f0;
+  font: 12px/1.6 ui-monospace, 'Cascadia Code', Menlo, monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.bree-loading,
+.bree-error {
+  padding: 24px;
+  text-align: center;
+  color: var(--bree-muted);
+}
+
+.bree-error {
+  color: var(--bree-danger);
+}
+
+/* Slash command / bubble menus come from the package theme; keep them above the overlay. */
+[data-re-bubble-menu],
+[data-re-slash-command] {
+  z-index: 50;
+}
+
+/* The package's bubble menus follow the selection even when the editor is
+ * blurred (selection resets to the doc start, often inside a link). Only show
+ * them while the canvas has focus. */
+.bree-canvas-content:not(:focus-within) > div[style*='position: absolute'] {
+  visibility: hidden !important;
+}
+
+/* Button & image links are edited from the properties panel; their bubble
+ * menus would collide with the block toolbar. */
+.bree-canvas-content > div:has([data-re-btn-bm-toolbar], [data-re-img-bm-toolbar]) {
+  display: none !important;
+}
+
+/* The text bubble menu is meant for text ranges, not for selected blocks. */
+.bree-canvas-content:has(.ProseMirror-selectednode) > [data-re-bubble-menu] {
+  display: none !important;
+}
+
+/* TrailingNode keeps an empty paragraph after non-text blocks so the caret can
+ * always land somewhere. The export drops it; collapse it in the canvas too
+ * until the caret actually enters it (Placeholder then flags it .is-empty). */
+.bree-canvas .tiptap :is(.node-container, .node-column, .node-section)
+  > p:last-child:not(:only-child):not(.is-empty):has(> br.ProseMirror-trailingBreak:only-child) {
+  height: 0;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+/* ---------------------------------------------------------------------------
+ * Layers panel (Elementor's navigator / Photoshop layers)
+ * ------------------------------------------------------------------------- */
+
+.bree-layers-toggle.bree-active {
+  background: var(--bree-accent-soft);
+  color: var(--bree-accent);
+}
+
+.bree-layers {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-right: 1px solid var(--bree-border);
+  background: var(--bree-bg);
+  font-size: 12.5px;
+  outline: none;
+}
+
+.bree-layers-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 47px;
+  padding: 0 8px 0 14px;
+  border-bottom: 1px solid var(--bree-border);
+}
+
+.bree-layers-header h2 {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.bree-layers-actions {
+  display: flex;
+  gap: 2px;
+}
+
+.bree-icon-button.bree-small {
+  width: 26px;
+  height: 26px;
+  font-size: 15px;
+}
+
+.bree-layers-list {
+  flex: 1;
+  overflow: auto;
+  padding: 6px 6px 40px;
+}
+
+.bree-layer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 30px;
+  padding-right: 8px;
+  border-radius: 6px;
+  color: var(--bree-text-secondary);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+}
+
+.bree-layer:hover,
+.bree-layer.bree-hovered {
+  background: #f1f5f9;
+}
+
+.bree-layer:focus-visible {
+  box-shadow: inset 0 0 0 2px #93c5fd;
+}
+
+.bree-layer.bree-selected {
+  background: var(--bree-accent-soft);
+  color: var(--bree-accent);
+}
+
+.bree-layer.bree-selected .bree-layer-label {
+  font-weight: 650;
+}
+
+.bree-layer[draggable='true']:active {
+  cursor: grabbing;
+}
+
+.bree-layer.bree-fixed .bree-layer-icon {
+  opacity: 0.7;
+}
+
+.bree-layer-caret,
+.bree-layer-caret-spacer {
+  flex: none;
+  width: 18px;
+  height: 18px;
+}
+
+.bree-layer-caret {
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--bree-muted);
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  transition: transform 0.12s;
+}
+
+.bree-layer-caret.bree-open {
+  transform: rotate(90deg);
+}
+
+.bree-layer-caret:hover {
+  background: rgb(15 23 42 / 0.06);
+}
+
+.bree-layer-icon {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 20px;
+  color: var(--bree-muted);
+}
+
+.bree-layer.bree-selected .bree-layer-icon {
+  color: var(--bree-accent);
+}
+
+.bree-layer-label {
+  flex: none;
+  white-space: nowrap;
+}
+
+.bree-layer-preview {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #94a3b8;
+}
+
+.bree-layer-preview::before {
+  content: '· ';
+}
+
+.bree-layer-empty {
+  height: 26px;
+  display: flex;
+  align-items: center;
+  color: #93c5fd;
+  font-size: 11.5px;
+  font-style: italic;
+}
+
+/* Drop indicators */
+.bree-layer.bree-drop-before::before,
+.bree-layer.bree-drop-after::after {
+  content: '';
+  position: absolute;
+  left: var(--bree-drop-indent, 0);
+  right: 4px;
+  height: 2px;
+  border-radius: 2px;
+  background: var(--bree-accent);
+  pointer-events: none;
+}
+
+.bree-layer.bree-drop-before::before {
+  top: -1px;
+}
+
+.bree-layer.bree-drop-after::after {
+  bottom: -1px;
+}
+
+.bree-layer.bree-drop-inside {
+  background: var(--bree-accent-soft);
+  box-shadow: inset 0 0 0 2px var(--bree-accent);
+}