modmore · muzzwood · Mar 21, 2026 · Mar 19, 2026 · Mar 19, 2026 · Mar 20, 2026
diff --git a/_bootstrap/index.php b/_bootstrap/index.php
@@ -111,6 +111,13 @@
     ), array('pluginid','event'), false)) {
         echo "Error creating modPluginEvent.\n";
     }
+    if (!createObject('modPluginEvent', array(
+        'pluginid' => $vcPlugin->get('id'),
+        'event' => 'OnManagerPageBeforeRender',
+        'priority' => 0,
+    ), array('pluginid','event'), false)) {
+        echo "Error creating modPluginEvent.\n";
+    }
 }
 
 

diff --git a/_build/data/settings.php b/_build/data/settings.php
@@ -21,4 +21,24 @@
         'area' => 'Preview',
         'value' => ''
     ],
+    'preview_mode' => [
+        'area' => 'Preview',
+        'value' => 'New Window',
+        'xtype' => 'magicpreview-combo-preview-mode',
+    ],
+    'panel_layout' => [
+        'area' => 'Preview',
+        'value' => 'Overlay',
+        'xtype' => 'magicpreview-combo-panel-layout',
+    ],
+    'panel_extended' => [
+        'area' => 'Preview',
+        'value' => false,
+        'xtype' => 'combo-boolean',
+    ],
+    'auto_refresh_interval' => [
+        'area' => 'Preview',
+        'value' => '5',
+        'xtype' => 'numberfield',
+    ],
 ];
diff --git a/_build/events/events.magicpreview.php b/_build/events/events.magicpreview.php
@@ -5,6 +5,7 @@
 $e = array(
     'OnDocFormRender',
     'OnLoadWebDocument',
+    'OnManagerPageBeforeRender',
 );
 
 foreach ($e as $ev) {

diff --git a/assets/components/magicpreview/css/mgr.css b/assets/components/magicpreview/css/mgr.css
@@ -1,3 +1,11 @@
+/* ==========================================================================
+   MagicPreview - Manager Styles
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   Button styling: merge Preview + View buttons
+   -------------------------------------------------------------------------- */
+
 .magicpreview_modx2 #modx-abtn-real-preview {
     padding-right: 25px;
 }
@@ -7,7 +15,7 @@
     border-top-left-radius: 0 !important;
     border-bottom-left-radius: 0 !important;
 }
-    
+
 #modx-abtn-preview:before {
     content: "↗";
 }
@@ -16,3 +24,302 @@
     text-indent: -1000px;
     overflow: auto;
 }
+
+/* --------------------------------------------------------------------------
+   Preview Panel: shared styles
+
+   The panel is always fixed to the right edge of the viewport.
+   -------------------------------------------------------------------------- */
+
+.mmmp-panel {
+    display: flex;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 40%;
+    min-width: 320px;
+    max-width: 80%;
+    flex-direction: column;
+    background: #f5f5f5;
+}
+
+/* --------------------------------------------------------------------------
+   Preview Panel: overlay layout
+   Panel slides in from the right and floats over the editor content.
+   -------------------------------------------------------------------------- */
+
+.mmmp-panel--overlay {
+    z-index: 12000;
+    transition: transform 300ms ease;
+    transform: translateX(100%);
+    pointer-events: none;
+}
+
+.mmmp-panel--overlay.mmmp-panel--open {
+    transform: translateX(0);
+    pointer-events: auto;
+    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
+}
+
+/* --------------------------------------------------------------------------
+   Preview Panel: onpage layout
+   Panel sits as a permanent column alongside the editor. The ExtJS
+   Viewport's size calculation is overridden in JS so the border layout
+   recalculates within the narrower space. The action buttons bar offset
+   is also managed dynamically by JS (syncActionButtonsOffset).
+   -------------------------------------------------------------------------- */
+
+.mmmp-panel--onpage {
+    transform: translateX(100%);
+    pointer-events: none;
+}
+
+.mmmp-panel--onpage.mmmp-panel--open {
+    transform: none;
+    pointer-events: auto;
+    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+}
+
+/* --------------------------------------------------------------------------
+   Preview Panel: resize handle
+   A thin invisible strip along the left edge of the panel that the user
+   can click and drag to resize the panel horizontally.
+   -------------------------------------------------------------------------- */
+
+.mmmp-panel__resize-handle {
+    position: absolute;
+    top: 0;
+    left: -4px;
+    width: 8px;
+    bottom: 0;
+    cursor: col-resize;
+    z-index: 1;
+}
+
+.mmmp-panel__resize-handle:hover,
+.mmmp-panel__resize-handle:active {
+    background: hsla(213, 66%, 55%, 0.3);
+}
+
+/* --------------------------------------------------------------------------
+   Preview Panel: toolbar
+   -------------------------------------------------------------------------- */
+
+.mmmp-panel__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #123764;
+    color: #fff;
+    padding: 0.5rem 0.75rem;
+    flex-shrink: 0;
+}
+
+.mmmp-panel__breakpoints {
+    display: flex;
+}
+
+.mmmp-panel__bp-btn {
+    display: block;
+    padding: 0.45rem 0.75rem;
+    background: hsla(213, 66%, 35%, 1);
+    color: hsla(213, 66%, 85%, 1);
+    border: none;
+    cursor: pointer;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    margin-right: -1px;
+    position: relative;
+    box-shadow: inset 0 2px 2px hsla(0, 0%, 0%, 0.1), inset 0 -2px 0 hsla(0, 0%, 100%, 0.15);
+}
+
+.mmmp-panel__bp-btn:first-child {
+    border-radius: 4px 0 0 4px;
+}
+
+.mmmp-panel__bp-btn:last-child {
+    border-radius: 0 4px 4px 0;
+}
+
+.mmmp-panel__bp-btn:hover,
+.mmmp-panel__bp-btn:focus {
+    background: hsla(213, 66%, 45%, 1);
+    color: hsla(213, 66%, 95%, 1);
+}
+
+.mmmp-panel__bp-btn--active {
+    background: hsla(213, 66%, 55%, 1);
+    color: hsla(213, 66%, 95%, 1);
+}
+
+.mmmp-panel__close {
+    background: none;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    padding: 0.4rem;
+    display: flex;
+    align-items: center;
+}
+
+.mmmp-panel__close svg {
+    width: 18px;
+    height: 18px;
+    color: #fff;
+}
+
+.mmmp-panel__close:hover,
+.mmmp-panel__close:focus {
+    background: #4185d8;
+}
+
+.mmmp-panel__actions {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.mmmp-panel__reload {
+    background: none;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    padding: 0.4rem;
+    display: flex;
+    align-items: center;
+}
+
+.mmmp-panel__reload svg {
+    width: 18px;
+    height: 18px;
+    color: #fff;
+}
+
+.mmmp-panel__reload:hover,
+.mmmp-panel__reload:focus {
+    background: #4185d8;
+}
+
+/* --------------------------------------------------------------------------
+   Preview Panel: content area (iframe + loading)
+   -------------------------------------------------------------------------- */
+
+.mmmp-panel__content {
+    flex: 1;
+    overflow: auto;
+    position: relative;
+    background: #e8e8e8;
+}
+
+.mmmp-panel__frame-wrapper {
+    width: 100%;
+    height: 100%;
+    transition: width 400ms ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.mmmp-panel__iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    display: block;
+    background: #fff;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.mmmp-panel__iframe--staging {
+    visibility: hidden;
+}
+
+.mmmp-panel__loading {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem 1rem;
+    text-align: center;
+    color: #666;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #f5f5f5;
+}
+
+.mmmp-panel__idle {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem 1rem;
+    text-align: center;
+    color: #999;
+    font-size: 0.875rem;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #f5f5f5;
+}
+
+/* Reuse the loading animation from preview.css */
+.mmmp-panel__loading .mmmp-c-animation {
+    display: inline-block;
+    position: relative;
+    width: 64px;
+    height: 64px;
+}
+
+.mmmp-panel__loading .mmmp-c-animation div {
+    position: absolute;
+    top: 21px;
+    width: 11px;
+    height: 11px;
+    border-radius: 50%;
+    background: #123764;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.mmmp-panel__loading .mmmp-c-animation div:nth-child(1) {
+    left: 6px;
+    animation: ellipsis1 0.6s infinite;
+}
+
+.mmmp-panel__loading .mmmp-c-animation div:nth-child(2) {
+    left: 6px;
+    animation: ellipsis2 0.6s infinite;
+}
+
+.mmmp-panel__loading .mmmp-c-animation div:nth-child(3) {
+    left: 26px;
+    animation: ellipsis2 0.6s infinite;
+}
+
+.mmmp-panel__loading .mmmp-c-animation div:nth-child(4) {
+    left: 45px;
+    animation: ellipsis3 0.6s infinite;
+}
+
+@keyframes ellipsis1 {
+    0% { transform: scale(0); }
+    100% { transform: scale(1); }
+}
+
+@keyframes ellipsis2 {
+    0% { transform: translate(0, 0); }
+    100% { transform: translate(19px, 0); }
+}
+
+@keyframes ellipsis3 {
+    0% { transform: scale(1); }
+    100% { transform: scale(0); }
+}