payload-better-editor 1.0.0

package/dist/styles/blocks-tab.css

@@ -0,0 +1,163 @@
+/* Blocks tab — header (kicker / heading / path / Deselect),
+   action toolbar, dividers, Block Name input, empty-state CTA. */
+
+.better-editor-tab__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.better-editor-tab__kicker {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--theme-elevation-500);
+}
+
+.better-editor-tab__heading {
+  margin: 2px 0 4px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.better-editor-tab__path {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  color: var(--theme-elevation-500);
+}
+
+.better-editor-tab__clear {
+  flex-shrink: 0;
+  padding: 6px 10px;
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.better-editor-tab__clear:hover {
+  background: var(--theme-elevation-100);
+}
+
+/* Visual break between the block-tab header (kicker / heading / actions /
+   block-name) and the block's own field tabs (Content / Row Settings / …)
+   so the structural shift is obvious. Symmetric vertical margin — the
+   render-fields rule (in sidebar.css) has its own 16px margin-top, which
+   collapses into the divider's 20px so the gap looks the same on both sides. */
+.better-editor-tab__divider {
+  margin: 20px 0;
+  border: 0;
+  border-top: 1px solid var(--theme-elevation-150);
+}
+
+/* Block Name input */
+
+.better-editor-tab__block-name {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 12px;
+}
+
+.better-editor-tab__block-name-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--theme-elevation-500);
+}
+
+.better-editor-tab__block-name-input {
+  padding: 8px 10px;
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: 4px;
+  background: var(--theme-input-bg, transparent);
+  color: inherit;
+  font: inherit;
+}
+
+.better-editor-tab__block-name-input:focus {
+  outline: 2px solid var(--theme-text);
+  outline-offset: 1px;
+}
+
+/* Action toolbar (move / duplicate / add / delete) */
+
+.better-editor-tab__actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 12px;
+}
+
+.better-editor-tab__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.better-editor-tab__action:hover:not(:disabled) {
+  background: var(--theme-elevation-100);
+}
+
+.better-editor-tab__action:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.better-editor-tab__action--danger:hover:not(:disabled) {
+  background: var(--theme-error-100, #fee2e2);
+  color: var(--theme-error-700, #b91c1c);
+  border-color: var(--theme-error-500, #ef4444);
+}
+
+/* Empty-state with "Add Block" CTA */
+
+.better-editor-tab--empty {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 16px;
+}
+
+.better-editor-tab__empty-text {
+  margin: 0;
+  color: var(--theme-elevation-500);
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.better-editor-tab__add-block {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border: 1px dashed var(--theme-elevation-200);
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.better-editor-tab__add-block:hover {
+  background: var(--theme-elevation-100);
+  border-color: var(--theme-elevation-400);
+  border-style: solid;
+}

package/dist/styles/overlay.css

@@ -0,0 +1,133 @@
+/* Overlay shell — root, body grid, fullscreen, sidebar resize handle,
+   error boundary, history (undo/redo) buttons. */
+
+.better-editor {
+  position: absolute;
+  inset: 0;
+  z-index: var(--better-editor-z-overlay, 50);
+  background: var(--theme-bg, #fff);
+}
+
+/* While fullscreen the overlay covers the whole screen via the
+   Fullscreen API. Make sure the body fills it (sidebar is not rendered). */
+.better-editor--fullscreen,
+.better-editor--fullscreen .better-editor__body {
+  background: var(--theme-bg, #fff);
+}
+.better-editor--fullscreen .better-editor__body {
+  height: 100vh;
+}
+
+.better-editor__body {
+  display: grid;
+  /* grid-template-columns is set inline by LiveEditorOverlay (preview |
+     handle | sidebar) so the live drag-resize stays the source of truth. */
+  height: 100%;
+}
+
+/* Drag handle: sits between preview + sidebar, 6px wide. Subtle until
+   hover. No transition — transitions on bg cause a perceived flicker
+   when the cursor crosses the column boundary repeatedly. */
+.better-editor__resize-handle {
+  cursor: col-resize;
+  background: transparent;
+}
+
+.better-editor__resize-handle:hover,
+.better-editor--resizing .better-editor__resize-handle {
+  background: var(--theme-elevation-200);
+}
+
+/* While resizing, the cursor inevitably crosses over the iframe (when
+   making the sidebar bigger on the right, or smaller on the left). The
+   iframe would normally swallow mousemove events and the drag would
+   stall. Disabling pointer-events on it lets the parent window keep
+   receiving the events. */
+.better-editor--resizing .better-editor-frame {
+  pointer-events: none;
+}
+
+/* History buttons (undo / redo) in the preview toolbar -------------------- */
+
+.better-editor__history {
+  display: inline-flex;
+  gap: 2px;
+}
+
+.better-editor__history-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: 4px;
+  background: var(--theme-bg, #fff);
+  color: var(--theme-elevation-500);
+  cursor: pointer;
+}
+
+.better-editor__history-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+.better-editor__history-btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
+
+.better-editor__history-btn:hover:not(:disabled) {
+  color: var(--theme-text);
+  background: var(--theme-elevation-100);
+}
+
+.better-editor__history-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Error boundary ----------------------------------------------------------- */
+
+.better-editor--errored {
+  background: var(--theme-bg, #fff);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+}
+
+.better-editor__error {
+  max-width: 720px;
+  text-align: left;
+}
+
+.better-editor__error h3 {
+  margin: 0 0 8px;
+  font-size: 18px;
+}
+
+.better-editor__error pre {
+  max-height: 240px;
+  overflow: auto;
+  padding: 12px;
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: 4px;
+  background: var(--theme-elevation-50);
+  font-size: 12px;
+  white-space: pre-wrap;
+}
+
+.better-editor__error-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.better-editor__error-actions button {
+  padding: 8px 14px;
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.better-editor__error-actions button:hover {
+  background: var(--theme-elevation-100);
+}

package/dist/styles/preview.css

@@ -0,0 +1,211 @@
+/* Preview pane — toolbar header, iframe wrapper, viewport modes,
+   responsive drag handles, width chip, viewport toggle. */
+
+.better-editor__preview {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.better-editor__preview-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px;
+  border-bottom: 1px solid var(--theme-elevation-150);
+  background: var(--theme-elevation-50);
+  flex-shrink: 0;
+}
+
+.better-editor__preview-toolbar-right {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.better-editor__preview-stage {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
+.better-editor-frame {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: #fff;
+}
+
+/* Wrapper is always rendered (even at full width) so React doesn't remount
+   the iframe when the user switches viewports. The constrained modifier
+   applies the device-frame look. */
+.better-editor-frame__viewport {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.better-editor-frame__viewport--constrained {
+  padding: 16px;
+  background: var(--theme-elevation-100);
+  overflow: auto;
+  align-items: center;
+}
+
+.better-editor-frame__viewport--constrained > .better-editor-frame {
+  height: 100%;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+}
+
+/* Cap the iframe height in device modes only while the overlay is
+   fullscreen, where the available height is otherwise so tall that a
+   400px-wide mobile view stretches into a thin tower. In the normal
+   docked overlay the wrapper height is already constrained by the
+   admin shell, so the cap would just shrink the iframe unnecessarily. */
+.better-editor--fullscreen .better-editor-frame__viewport--tablet > .better-editor-frame {
+  max-height: 90%;
+}
+
+.better-editor--fullscreen .better-editor-frame__viewport--mobile > .better-editor-frame {
+  max-height: 80%;
+}
+
+/* Responsive mode: drag handles on each side. */
+.better-editor-frame__viewport--resizable {
+  position: relative;
+}
+
+.better-editor-frame__handle {
+  align-self: center;
+  width: 6px;
+  height: 64px;
+  margin: 0 6px;
+  border-radius: 3px;
+  background: var(--theme-elevation-300);
+  cursor: ew-resize;
+  flex-shrink: 0;
+}
+
+.better-editor-frame__handle:hover,
+.better-editor-frame__handle:active,
+.better-editor-frame__viewport--resizing .better-editor-frame__handle {
+  background: var(--theme-elevation-500);
+}
+
+/* Mirror of the sidebar fix: while dragging the responsive handles, the
+   cursor crosses over the iframe and would lose mousemove events. */
+.better-editor-frame__viewport--resizing .better-editor-frame {
+  pointer-events: none;
+}
+
+/* Loading skeleton — overlays the iframe while it boots. Subtle pulsing
+   bars + a content block, all neutral grays so it works on light/dark. */
+.better-editor-frame__skeleton {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 32px;
+  background: var(--theme-bg, #fff);
+  pointer-events: none;
+}
+
+.better-editor-frame__skeleton-bar,
+.better-editor-frame__skeleton-block {
+  background: var(--theme-elevation-100);
+  border-radius: 4px;
+  animation: better-editor-skeleton-pulse 1.4s ease-in-out infinite;
+}
+
+.better-editor-frame__skeleton-bar {
+  height: 14px;
+  width: 60%;
+}
+.better-editor-frame__skeleton-bar--lg {
+  height: 28px;
+  width: 40%;
+  margin-bottom: 4px;
+}
+.better-editor-frame__skeleton-bar--sm {
+  width: 30%;
+}
+.better-editor-frame__skeleton-block {
+  flex: 1;
+  margin-top: 8px;
+  min-height: 120px;
+}
+
+@keyframes better-editor-skeleton-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
+}
+
+/* Width chip in the preview toolbar (live iframe pixel width) */
+
+.better-editor__width-chip {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 3px;
+  padding: 4px 10px;
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: 999px;
+  background: var(--theme-bg, #fff);
+  color: var(--theme-text);
+  font-size: 12px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
+  user-select: none;
+  min-width: 60px;
+  justify-content: center;
+}
+
+.better-editor__width-chip-unit {
+  color: var(--theme-elevation-500);
+  font-size: 10px;
+  font-weight: 400;
+}
+
+/* Viewport toggle (desktop / tablet / mobile / responsive / fullscreen) */
+
+.better-editor-viewport {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: 6px;
+  background: var(--theme-bg, #fff);
+}
+
+.better-editor-viewport__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--theme-elevation-500);
+  cursor: pointer;
+}
+
+.better-editor-viewport__btn:hover {
+  color: var(--theme-text);
+  background: var(--theme-elevation-100);
+}
+
+.better-editor-viewport__btn--active,
+.better-editor-viewport__btn--active:hover {
+  color: var(--theme-text);
+  background: var(--theme-elevation-150);
+}
+

package/dist/styles/settings-banner.css

@@ -0,0 +1,73 @@
+.better-editor-banner {
+  margin-bottom: 24px;
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: 8px;
+  background: var(--theme-elevation-50);
+  overflow: hidden;
+}
+
+.better-editor-banner__header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--theme-elevation-150);
+}
+
+.better-editor-banner__heading {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.better-editor-banner__title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--theme-text);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.better-editor-banner__version {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--theme-elevation-500);
+  padding: 2px 6px;
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 4px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+
+.better-editor-banner__subtitle {
+  margin: 0;
+  font-size: 12px;
+  color: var(--theme-elevation-500);
+}
+
+.better-editor-banner__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 12px 18px;
+}
+
+.better-editor-banner__link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 6px;
+  background: var(--theme-input-bg, var(--theme-elevation-0));
+  color: var(--theme-text);
+  font-size: 13px;
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.better-editor-banner__star-badge {
+  height: 16px;
+  display: block;
+}

package/dist/styles/sidebar.css

@@ -0,0 +1,88 @@
+/* Sidebar shell — column wrapper, scrolling content area, tab nav,
+   force-full-width-fields override. */
+
+.better-editor__sidebar {
+  overflow: hidden;
+}
+
+.better-editor-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.better-editor-sidebar__content {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+}
+
+.better-editor-tab {
+  margin: 20px;
+}
+
+/* Force every field inside the sidebar to span the full row, regardless
+   of the `admin.width` set on the field config. Payload exposes that
+   width as an inline `--field-width` custom property; overriding it
+   here (with !important to beat the inline style) collapses
+   side-by-side fields like 4×25% selects into a vertical stack so they
+   stay readable in the narrow sidebar.
+   Toggleable via BetterEditorSettings → Layout → forceFullWidthFields.
+   NOTE: the `--field-width` variable is a Payload-internal CSS var; if
+   Payload renames it the sidebar silently reverts to honoring admin.width. */
+.better-editor-sidebar--force-full-width .better-editor-sidebar__content .field-type {
+  --field-width: 100% !important;
+}
+
+.better-editor-sidebar__content .render-fields {
+  margin-top: 16px;
+}
+
+/* Page / Blocks / Settings tab switcher */
+
+.better-editor-sidebar__tabs {
+  display: flex;
+  border-bottom: 1px solid var(--theme-elevation-150);
+}
+
+.better-editor-sidebar__tab {
+  flex: 1;
+  padding: 12px 16px;
+  border: 0;
+  background: transparent;
+  color: var(--theme-elevation-500);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+}
+
+.better-editor-sidebar__tab:hover:not(:disabled) {
+  color: var(--theme-text);
+}
+
+.better-editor-sidebar__tab:disabled {
+  color: var(--theme-elevation-300);
+  cursor: not-allowed;
+}
+
+.better-editor-sidebar__tab--active {
+  color: var(--theme-text);
+  border-bottom-color: var(--theme-text);
+}
+
+/* Visually hidden but available to assistive technology — used by the
+   selection live region. Standard SR-only recipe. */
+.better-editor-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/types.d.ts

@@ -0,0 +1,41 @@
+export type BetterEditorConfig = {
+    /** Skip plugin installation entirely (e.g. behind a feature flag). */
+    disabled?: boolean;
+    /**
+     * Collection slugs that should get the "Open Better Editor" toggle in
+     * their `beforeDocumentControls`. Each collection must have an
+     * `admin.livePreview.url` configured for the preview to render.
+     */
+    collections?: string[];
+    /**
+     * Global slugs that should get the "Open Better Editor" toggle in
+     * their `beforeDocumentControls`. Each global must have an
+     * `admin.livePreview.url` configured for the preview to render.
+     */
+    globals?: string[];
+    /**
+     * Name of the `blocks` field inside the configured collections/globals
+     * that the sidebar should target. Top-level only for now; nested paths
+     * (e.g. `content.layout`) are not supported. Defaults to `'layout'`.
+     */
+    blocksField?: string;
+    /**
+     * CSS selector for the Payload admin element the overlay portals into.
+     * Override only if the default selector breaks against a future Payload
+     * version. The plugin falls back to `<main>` and finally `<body>`.
+     */
+    adminPortalSelector?: string;
+    /**
+     * Prefix for all `localStorage` keys the editor writes (sidebar width,
+     * responsive viewport width, …). Set this if multiple Better Editor
+     * instances share the same origin and would otherwise collide.
+     * Defaults to `'better-editor'`.
+     */
+    storageNamespace?: string;
+    /**
+     * Show the plugin info banner (version, GitHub links, "Report a bug")
+     * at the top of the `BetterEditorSettings` global. Set to `false` to
+     * hide it for end users. Defaults to `true`.
+     */
+    showSettingsBanner?: boolean;
+};

package/dist/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map