@open-press/core 0.7.0 → 0.8.0

package/src/styles/openpress/workbench.css

@@ -5,10 +5,6 @@
   color: var(--openpress-text);
 }
 
-.openpress-workbench[data-panel-open="false"] {
-  grid-template-columns: 0 minmax(0, 1fr);
-}
-
 .openpress-public-shell {
   position: fixed;
   inset: 0;
@@ -19,671 +15,1217 @@
   overscroll-behavior: none;
 }
 
-.openpress-panel-toggle {
-  position: fixed;
-  top: max(14px, env(safe-area-inset-top));
-  left: max(14px, env(safe-area-inset-left));
-  z-index: 35;
-  display: inline-flex;
+.openpress-workbench__stage {
+  grid-area: main;
+  min-width: 0;
+  container-type: inline-size;
+  padding: 0;
+  overflow: hidden;
+  background: #141414;
+  scrollbar-width: none;
+}
+
+.openpress-workbench__stage::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+.openpress-public-viewer.openpress-workbench-shell.openpress-reader-app,
+.openpress-public-viewer.openpress-workbench-shell.openpress-reader-app.is-closed-left,
+.openpress-public-viewer.openpress-workbench-shell.openpress-reader-app.is-closed-right,
+.openpress-public-viewer.openpress-workbench-shell.openpress-reader-app.is-closed-left.is-closed-right {
+  --openpress-workbench-toolbar-height: 44px;
+  --openpress-workbench-left-width: clamp(260px, 18vw, 330px);
+  --openpress-workbench-right-width: clamp(304px, 22vw, 390px);
+  display: grid;
+  grid-template-rows: var(--openpress-workbench-toolbar-height) minmax(0, 1fr);
+  grid-template-columns: var(--openpress-workbench-left-width) minmax(0, 1fr) var(--openpress-workbench-right-width);
+  grid-template-areas:
+    "toolbar toolbar toolbar"
+    "left main right";
+}
+
+.openpress-public-viewer.openpress-workbench-shell.openpress-reader-app.is-closed-right {
+  grid-template-columns: var(--openpress-workbench-left-width) minmax(0, 1fr) 0;
+}
+
+.openpress-public-viewer.openpress-workbench-shell.openpress-reader-app.is-closed-left {
+  grid-template-columns: 0 minmax(0, 1fr) var(--openpress-workbench-right-width);
+}
+
+.openpress-public-viewer.openpress-workbench-shell.openpress-reader-app.is-closed-left.is-closed-right {
+  grid-template-columns: 0 minmax(0, 1fr) 0;
+}
+
+.openpress-workbench-toolbar {
+  z-index: 30;
+  display: flex;
+  min-width: 0;
+  height: var(--openpress-workbench-toolbar-height, 44px);
+  min-height: 0;
+  grid-area: toolbar;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border-bottom: 1px solid rgb(255 255 255 / 9%);
+  padding: 0 12px;
+  background: rgb(18 18 18 / 96%);
+  backdrop-filter: blur(18px);
+}
+
+.openpress-workbench-toolbar__content {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.openpress-workbench-toolbar__group {
+  display: flex;
+  min-width: 0;
   align-items: center;
   gap: 8px;
-  border: 1px solid rgb(255 255 255 / 14%);
-  border-radius: 999px;
-  padding: 9px 12px;
-  background: rgb(20 20 20 / 86%);
+}
+
+.openpress-workbench-toolbar__group--right {
+  justify-content: flex-end;
+}
+
+.openpress-workbench-toolbar__group--page {
+  flex: 1 1 auto;
+  justify-content: center;
+}
+
+.openpress-workbench-toolbar-panel-toggle {
+  display: inline-flex;
+  width: 30px;
+  height: 30px;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 0;
+  background: transparent;
+  color: #8e949b;
+  cursor: pointer;
+  transition:
+    color 160ms ease,
+    transform 160ms ease;
+}
+
+.openpress-workbench-toolbar-panel-toggle:hover {
   color: #f2f2f0;
+}
+
+.openpress-workbench-toolbar-panel-toggle:active {
+  transform: translateY(1px);
+}
+
+.openpress-workbench-toolbar-panel-toggle svg {
+  width: 14px;
+  height: 14px;
+}
+
+.openpress-workbench-page-geometry,
+.openpress-workbench-zoom-control {
+  display: inline-flex;
+  overflow: hidden;
+  height: 30px;
+  max-width: min(34vw, 280px);
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 0 8px;
+  background: transparent;
+  color: #aeb3b8;
   font: inherit;
-  font-size: 13px;
   line-height: 1;
+  white-space: nowrap;
   cursor: pointer;
-  backdrop-filter: blur(14px);
-  box-shadow: 0 10px 26px rgb(0 0 0 / 28%);
+  transition:
+    border-color 160ms ease,
+    background 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
 }
 
-.openpress-panel-toggle:hover {
-  border-color: rgb(255 255 255 / 24%);
-  background: rgb(28 28 28 / 92%);
+.openpress-workbench-page-geometry:hover,
+.openpress-workbench-zoom-control:hover {
+  color: #f2f2f0;
 }
 
-.openpress-panel-toggle span[aria-hidden="true"] {
-  width: 14px;
-  color: var(--openpress-accent);
-  font-size: 16px;
-  line-height: 0.8;
-  text-align: center;
+.openpress-workbench-page-geometry:active,
+.openpress-workbench-zoom-control:active {
+  transform: translateY(1px);
 }
 
-.openpress-panel-scrim {
-  display: none;
+.openpress-workbench-page-geometry svg,
+.openpress-workbench-zoom-control svg {
+  width: 13px;
+  height: 13px;
+  flex: 0 0 auto;
+  color: currentColor;
 }
 
-.openpress-workbench__sidebar {
-  position: sticky;
-  top: 0;
-  z-index: 25;
-  height: 100vh;
-  border-right: 1px solid rgb(255 255 255 / 10%);
-  padding: 72px 18px 24px;
-  overflow: auto;
-  background: #171717;
-  color: #d8dadd;
-  scrollbar-color: var(--openpress-scrollbar-thumb) var(--openpress-scrollbar-track-sidebar);
-  scrollbar-gutter: stable;
-  scrollbar-width: thin;
-  transition: opacity 160ms ease, transform 160ms ease;
+.openpress-workbench-page-geometry__label,
+.openpress-workbench-page-geometry__dimensions {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.openpress-workbench[data-panel-open="false"] .openpress-workbench__sidebar {
-  transform: translateX(-100%);
-  opacity: 0;
-  pointer-events: none;
+.openpress-workbench-page-geometry__label {
+  color: #d8dadd;
+  font-size: 11px;
+  font-weight: 560;
 }
 
-.openpress-workbench__sidebar::-webkit-scrollbar {
-  width: 8px;
+.openpress-workbench-page-geometry__dimensions {
+  color: #7f858c;
+  font-family: var(--openpress-font-mono);
+  font-size: 10px;
+  font-weight: 500;
 }
 
-.openpress-workbench__sidebar::-webkit-scrollbar-track {
-  background: var(--openpress-scrollbar-track-sidebar);
+.openpress-workbench-zoom-control {
+  max-width: min(20vw, 92px);
+  color: #9fa5ab;
+  font-family: var(--openpress-font-mono);
+  font-size: 10px;
+  font-weight: 650;
 }
 
-.openpress-workbench__sidebar::-webkit-scrollbar-thumb {
-  border-color: var(--openpress-scrollbar-track-sidebar);
+.openpress-workbench-zoom-control-wrap {
+  position: relative;
+  display: inline-flex;
 }
 
-.openpress-workbench__brand {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 28px;
+.openpress-workbench-zoom-control__chevron {
+  width: 12px !important;
+  height: 12px !important;
+  opacity: 0.7;
 }
 
-.openpress-workbench__brand span {
-  color: var(--openpress-accent);
-  font-size: 13px;
+.openpress-workbench-zoom-control[aria-expanded="true"],
+.openpress-workbench-zoom-control[data-openpress-toolbar-active="true"] {
+  border-color: rgb(242 242 240 / 16%);
+  background: rgb(242 242 240 / 7%);
+  color: #f2f2f0;
 }
 
-.openpress-workbench__brand strong {
-  font-size: 20px;
-  font-weight: 500;
+.openpress-workbench-zoom-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 50%;
+  z-index: 80;
+  display: grid;
+  width: 188px;
+  gap: 6px;
+  border: 1px solid rgb(255 255 255 / 16%);
+  border-radius: 10px;
+  padding: 8px;
+  background: rgb(46 47 46 / 96%);
+  box-shadow: 0 18px 42px rgb(0 0 0 / 34%);
+  color: rgb(245 245 242 / 88%);
+  transform: translateX(-50%);
+  backdrop-filter: blur(18px);
 }
 
-.openpress-workbench__meta {
-  border-top: 1px solid rgb(255 255 255 / 10%);
-  border-bottom: 1px solid rgb(255 255 255 / 10%);
-  padding: 16px 0;
+.openpress-workbench-zoom-menu__section {
+  display: grid;
+  gap: 2px;
 }
 
-.openpress-workbench__meta p {
-  margin: 0;
-  color: #f4f4f2;
-  font-size: 15px;
-  line-height: 1.5;
+.openpress-workbench-zoom-menu__divider {
+  height: 1px;
+  margin: 4px 6px;
+  background: rgb(255 255 255 / 14%);
 }
 
-.openpress-workbench__meta small {
-  display: block;
-  margin-top: 8px;
-  color: #8e949b;
+.openpress-workbench-zoom-menu__item {
+  display: grid;
+  grid-template-columns: 18px 18px minmax(0, 1fr);
+  min-height: 30px;
+  align-items: center;
+  gap: 9px;
+  border: 0;
+  border-radius: 6px;
+  padding: 0 8px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
   font-size: 12px;
+  font-weight: 650;
+  line-height: 1;
+  text-align: left;
+  cursor: pointer;
 }
 
-.openpress-source-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 18px;
+.openpress-workbench-zoom-menu__item:hover,
+.openpress-workbench-zoom-menu__item:focus-visible {
+  background: rgb(255 255 255 / 9%);
+  outline: 0;
 }
 
-.openpress-source-list__item {
+.openpress-workbench-zoom-menu__item[aria-checked="true"] {
+  color: #ffffff;
+}
+
+.openpress-workbench-zoom-menu__item svg {
+  width: 15px;
+  height: 15px;
+}
+
+.openpress-workbench-zoom-menu__check {
   display: grid;
-  grid-template-columns: 32px minmax(0, 1fr);
-  gap: 8px;
+  width: 18px;
+  height: 18px;
+  place-items: center;
+}
+
+.openpress-workbench-zoom-menu__spacer {
+  width: 18px;
+  height: 1px;
+}
+
+.openpress-workbench-toolbar-action {
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+  height: 30px;
+  width: 30px;
+  min-width: 30px;
+  max-width: 30px;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
   border: 1px solid transparent;
-  padding: 10px 8px;
-  color: inherit;
+  border-radius: 4px;
+  padding: 0;
+  background: transparent;
+  color: #aeb3b8;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
   text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    border-color 160ms ease,
+    background 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
 }
 
-.openpress-source-list__item:hover {
-  border-color: rgb(255 255 255 / 12%);
-  background: rgb(255 255 255 / 4%);
+.openpress-workbench-toolbar-action:hover:not(:disabled) {
+  color: #f2f2f0;
 }
 
-.openpress-source-list__item span {
-  color: #777d84;
-  font-size: 12px;
-  line-height: 1.5;
+.openpress-workbench-toolbar-action:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.openpress-workbench-toolbar-action:disabled {
+  cursor: progress;
+  color: #a7adb2;
+  opacity: 0.62;
+}
+
+.openpress-workbench-toolbar-action[data-openpress-toolbar-expanded="true"] {
+  width: auto;
+  min-width: 30px;
+  max-width: min(34vw, 300px);
+  gap: 7px;
+  padding: 0 10px;
+}
+
+.openpress-workbench-toolbar-action[data-openpress-toolbar-active="true"] {
+  border-color: rgb(240 182 76 / 34%);
+  background: rgb(240 182 76 / 8%);
+  color: rgb(240 182 76 / 92%);
+}
+
+.openpress-workbench-toolbar-action[data-openpress-deploy-status="online"] {
+  color: rgb(110 231 160 / 88%);
+}
+
+.openpress-workbench-toolbar-action[data-openpress-deploy-status="dirty"],
+.openpress-workbench-toolbar-action[data-openpress-deploy-status="deploying"] {
+  color: rgb(240 182 76 / 92%);
+}
+
+.openpress-workbench-toolbar-action[data-openpress-deploy-status="failed"] {
+  color: rgb(248 113 113 / 90%);
+}
+
+.openpress-workbench-toolbar-action[data-deploy-status="deploying"]::after {
+  position: absolute;
+  inset: 3px;
+  border: 1px solid rgb(240 182 76 / 36%);
+  border-top-color: rgb(240 182 76 / 96%);
+  border-radius: 999px;
+  animation: openpress-toolbar-deploy-spin 0.9s linear infinite;
+  content: "";
+}
+
+.openpress-workbench-toolbar-action[data-deploy-status="deploying"] svg {
+  animation: openpress-toolbar-deploy-pulse 0.9s ease-in-out infinite alternate;
+}
+
+.openpress-workbench-toolbar-action svg {
+  width: 13px;
+  height: 13px;
+  flex: 0 0 auto;
+  color: currentColor;
 }
 
-.openpress-source-list__item strong {
+.openpress-workbench-toolbar-action__label,
+.openpress-workbench-toolbar-action .openpress-dev-pdf-status,
+.openpress-workbench-toolbar-action .openpress-dev-deploy-status,
+.openpress-workbench-toolbar-action .openpress-dev-edit-status,
+.openpress-workbench-toolbar-action .openpress-dev-inspector-status {
+  display: none;
   overflow: hidden;
-  color: #d8dadd;
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 1.45;
+  min-width: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.openpress-source-list__item small {
-  grid-column: 2;
+.openpress-workbench-toolbar-action[data-openpress-toolbar-expanded="true"] .openpress-workbench-toolbar-action__label,
+.openpress-workbench-toolbar-action[data-openpress-toolbar-expanded="true"] .openpress-dev-pdf-status,
+.openpress-workbench-toolbar-action[data-openpress-toolbar-expanded="true"] .openpress-dev-deploy-status,
+.openpress-workbench-toolbar-action[data-openpress-toolbar-expanded="true"] .openpress-dev-edit-status,
+.openpress-workbench-toolbar-action[data-openpress-toolbar-expanded="true"] .openpress-dev-inspector-status {
+  display: inline-flex;
+}
+
+.openpress-workbench-toolbar-action .openpress-dev-pdf-status,
+.openpress-workbench-toolbar-action .openpress-dev-deploy-status,
+.openpress-workbench-toolbar-action .openpress-dev-edit-status,
+.openpress-workbench-toolbar-action .openpress-dev-inspector-status {
+  max-width: 150px;
+  font-size: 10px;
+}
+
+.openpress-dev-edit-status {
+  align-items: center;
+  gap: 5px;
+}
+
+.openpress-dev-edit-status--toolbar {
+  display: inline-flex;
+  max-width: 132px;
+  min-height: 24px;
+  align-items: center;
+  gap: 6px;
   overflow: hidden;
-  color: #7f858c;
-  font-size: 11px;
+  border: 1px solid rgb(240 182 76 / 18%);
+  border-radius: 4px;
+  padding: 0 8px;
+  background: rgb(240 182 76 / 7%);
+  color: rgb(240 182 76 / 88%);
+  font-size: 10px;
+  line-height: 1;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.openpress-workbench__stage {
-  grid-area: main;
+.openpress-dev-edit-status[data-openpress-edit-status="failed"] {
+  color: rgb(248 113 113 / 92%);
+}
+
+.openpress-dev-edit-status__spinner {
+  width: 9px;
+  height: 9px;
+  flex: 0 0 auto;
+  border: 1px solid rgb(240 182 76 / 32%);
+  border-top-color: rgb(240 182 76 / 96%);
+  border-radius: 999px;
+  animation: openpress-toolbar-deploy-spin 0.8s linear infinite;
+}
+
+.openpress-workbench-toolbar > .openpress-dev-inspector-status {
+  max-width: 180px;
+  flex: 0 1 auto;
+  color: rgb(198 204 210 / 70%);
+  font-size: 10px;
+}
+
+.openpress-dev-deploy-status--toolbar {
+  max-width: 86px;
+  overflow: hidden;
+  color: rgb(240 182 76 / 86%);
+  text-overflow: ellipsis;
+}
+
+.openpress-inline-source-editor-layer {
+  position: fixed;
+  inset: 0;
+  z-index: 980;
+  pointer-events: none;
+}
+
+.openpress-inline-source-editor {
+  position: fixed;
+  display: grid;
+  gap: 10px;
+  max-width: calc(100vw - 28px);
+  border: 1px solid rgb(255 255 255 / 12%);
+  border-radius: 6px;
+  padding: 12px;
+  background: #151716;
+  color: rgb(242 242 238 / 94%);
+  box-shadow: 0 18px 46px rgb(0 0 0 / 34%);
+  pointer-events: auto;
+}
+
+.openpress-inline-source-editor__header,
+.openpress-inline-source-editor__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
   min-width: 0;
-  container-type: inline-size;
-  padding: 0;
+}
+
+.openpress-inline-source-editor__header > div {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.openpress-inline-source-editor__header strong {
   overflow: hidden;
-  background: #141414;
-  scrollbar-width: none;
+  font-size: 12px;
+  font-weight: 650;
+  line-height: 1.1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.openpress-workbench__stage::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  display: none;
+.openpress-inline-source-editor__eyebrow {
+  color: rgb(174 179 184 / 58%);
+  font-family: var(--openpress-font-mono);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+.openpress-inline-source-editor__header button,
+.openpress-inline-source-editor__footer button {
+  min-height: 28px;
+  border: 1px solid rgb(255 255 255 / 12%);
+  border-radius: 4px;
+  background: transparent;
+  color: rgb(242 242 238 / 82%);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.openpress-inline-source-editor__header button {
+  width: 28px;
+  padding: 0;
+  font-size: 15px;
+}
+
+.openpress-inline-source-editor__footer button {
+  padding: 0 10px;
+}
+
+.openpress-inline-source-editor__footer button:last-child {
+  border-color: rgb(240 182 76 / 28%);
+  background: rgb(240 182 76 / 9%);
+  color: rgb(240 182 76 / 92%);
+}
+
+.openpress-inline-source-editor__footer button:disabled {
+  cursor: progress;
+  opacity: 0.54;
 }
 
-.openpress-reader-app,
-.openpress-reader-app.is-closed-left,
-.openpress-reader-app.is-closed-right,
-.openpress-reader-app.is-closed-left.is-closed-right {
+.openpress-inline-source-editor textarea {
   width: 100%;
-  height: 100vh;
-  min-height: 100vh;
-  grid-template-rows: 58px minmax(0, 1fr);
-  grid-template-columns: 56px clamp(240px, 20vw, 320px) minmax(0, 1fr) clamp(300px, 22vw, 360px);
-  grid-template-areas:
-    "nav nav nav nav"
-    "rail left main right";
+  min-height: 126px;
+  resize: vertical;
+  border: 1px solid rgb(255 255 255 / 12%);
+  border-radius: 4px;
+  padding: 10px;
+  background: rgb(0 0 0 / 24%);
+  color: rgb(242 242 238 / 92%);
+  font-family: var(--openpress-font-mono);
+  font-size: 11px;
+  line-height: 1.55;
+  outline: none;
+}
+
+.openpress-inline-source-editor textarea:focus {
+  border-color: rgb(240 182 76 / 42%);
+  box-shadow: 0 0 0 1px rgb(240 182 76 / 16%);
+}
+
+.openpress-inline-source-editor__footer > span {
+  min-width: 0;
   overflow: hidden;
-  background: #141414;
+  color: rgb(174 179 184 / 70%);
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.openpress-reader-app.is-closed-left {
-  grid-template-columns: 56px 0 minmax(0, 1fr) clamp(300px, 22vw, 360px);
+.openpress-inline-source-editor__footer > span[data-openpress-source-editor-status="saving"] {
+  color: rgb(240 182 76 / 88%);
 }
 
-.openpress-reader-app.is-closed-right {
-  grid-template-columns: 56px clamp(240px, 20vw, 320px) minmax(0, 1fr) 0;
+.openpress-inline-source-editor__footer > span[data-openpress-source-editor-status="failed"] {
+  color: rgb(248 113 113 / 90%);
+}
+
+.openpress-inline-source-editor__footer > div {
+  display: inline-flex;
+  gap: 6px;
+  flex: 0 0 auto;
+}
+
+.openpress-workbench-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  place-items: start center;
+  overflow: auto;
+  padding: calc(var(--openpress-workbench-toolbar-height, 44px) + 28px) 28px 28px;
+  background: rgb(0 0 0 / 54%);
 }
 
-.openpress-reader-app.is-closed-left.is-closed-right {
-  grid-template-columns: 56px 0 minmax(0, 1fr) 0;
+.openpress-workbench-dialog {
+  position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  width: min(560px, calc(100vw - 56px));
+  max-height: calc(100vh - var(--openpress-workbench-toolbar-height, 44px) - 56px);
+  overflow: hidden;
+  border: 1px solid rgb(255 255 255 / 12%);
+  border-radius: 6px;
+  background: #151716;
+  color: rgb(242 242 238 / 94%);
+  box-shadow: 0 24px 68px rgb(0 0 0 / 42%);
 }
 
-.openpress-reader-app[data-active-workspace="document"],
-.openpress-reader-app.is-closed-left[data-active-workspace="document"] {
-  grid-template-columns: 56px 0 minmax(0, 1fr) clamp(300px, 22vw, 360px);
+/* The project preview surface needs more room for media thumbnails and
+   rendered component previews than the deploy/search default. */
+.openpress-workbench-dialog.openpress-project-preview-dialog {
+  width: min(860px, calc(100vw - 56px));
 }
 
-.openpress-reader-app.is-closed-right[data-active-workspace="document"],
-.openpress-reader-app.is-closed-left.is-closed-right[data-active-workspace="document"] {
-  grid-template-columns: 56px 0 minmax(0, 1fr) 0;
+/* The project preview footer holds stacked action forms + a comment
+   composer instead of a row of buttons. Override the default
+   flex-row footer layout for this dialog only. */
+.openpress-workbench-dialog.openpress-project-preview-dialog .openpress-workbench-dialog__footer {
+  display: grid;
+  gap: 12px;
+  justify-content: stretch;
+  align-items: stretch;
 }
 
-.openpress-workspace-navbar {
-  z-index: 30;
-  min-width: 0;
-  grid-template-columns: minmax(0, 1fr) auto;
-  border-bottom: 1px solid rgb(255 255 255 / 9%);
-  background: rgb(20 20 20 / 92%);
-  backdrop-filter: blur(18px);
+.openpress-workbench-dialog::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 2px;
+  background: rgb(240 182 76 / 82%);
+  content: "";
 }
 
-.openpress-workspace-navbar__left,
-.openpress-workspace-navbar__right {
+.openpress-workbench-dialog__header,
+.openpress-workbench-dialog__footer {
   display: flex;
   align-items: center;
-  gap: 8px;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.openpress-workbench-dialog__header {
+  align-items: flex-start;
+  padding: 18px 48px 14px 24px;
+}
+
+.openpress-workbench-dialog__footer {
+  padding: 14px 24px 18px;
+}
+
+.openpress-workbench-dialog__heading {
+  display: grid;
   min-width: 0;
+  gap: 5px;
 }
 
-.openpress-workspace-navbar__left {
-  justify-self: start;
+.openpress-workbench-dialog__eyebrow {
+  display: block;
+  color: rgb(160 166 173 / 62%);
+  font-family: var(--openpress-font-mono);
+  font-size: 10px;
+  font-weight: 650;
+  line-height: 1;
+  letter-spacing: 0;
+  text-transform: uppercase;
 }
 
-.openpress-workspace-navbar__right {
-  justify-self: end;
+.openpress-workbench-dialog__title-row {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  column-gap: 8px;
+  min-height: 20px;
+}
+
+.openpress-workbench-dialog h2 {
+  margin: 0;
+  color: rgb(242 242 240 / 94%);
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 20px;
 }
 
-.openpress-workspace-brand {
+.openpress-workbench-dialog h2::before,
+.openpress-workbench-dialog h3::before {
+  display: none;
+  content: none;
+}
+
+.openpress-workbench-dialog__title-meta {
   display: flex;
-  align-items: baseline;
+  min-width: 0;
+  min-height: 20px;
+  align-items: center;
+}
+
+.openpress-workbench-dialog__close {
+  position: absolute;
+  top: 9px;
+  right: 9px;
+  display: inline-flex;
+  width: 30px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 0;
+  background: transparent;
+  color: #aeb3b8;
+  cursor: pointer;
+}
+
+.openpress-workbench-dialog__close:hover {
+  color: #f2f2f0;
+}
+
+.openpress-workbench-dialog__close svg {
+  width: 14px;
+  height: 14px;
+}
+
+.openpress-deploy-dialog {
+  width: min(420px, calc(100vw - 56px));
   gap: 12px;
+  padding: 16px;
+}
+
+.openpress-deploy-dialog__source {
+  display: inline-flex;
+  min-height: 19px;
+  align-items: center;
+  max-width: 100%;
+  overflow: hidden;
+  border: 1px solid rgb(110 231 160 / 18%);
+  border-radius: 999px;
+  padding: 0 7px;
+  background: rgb(110 231 160 / 7%);
+  color: rgb(144 238 177 / 88%);
+  font-size: 10px;
+  font-weight: 620;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.openpress-deploy-dialog dl {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  border-top: 1px solid rgb(255 255 255 / 8%);
+  border-bottom: 1px solid rgb(255 255 255 / 8%);
+  padding: 12px 0;
+}
+
+.openpress-deploy-dialog dl div {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: 78px minmax(0, 1fr);
+  gap: 12px;
+  align-items: center;
+}
+
+.openpress-deploy-dialog dt,
+.openpress-deploy-dialog dd {
+  margin: 0;
   min-width: 0;
+  font-size: 11px;
+  line-height: 1.35;
 }
 
-.openpress-workspace-brand__logo {
-  flex: 0 0 auto;
-  color: var(--openpress-accent);
-  font-size: 13px;
-  font-weight: 500;
+.openpress-deploy-dialog dt {
+  color: rgb(150 156 163 / 68%);
 }
 
-.openpress-workspace-brand strong {
+.openpress-deploy-dialog dd {
   overflow: hidden;
-  max-width: min(42vw, 520px);
-  color: #f2f2f0;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.3;
+  color: rgb(226 229 230 / 86%);
+  text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.openpress-icon-button,
-.openpress-navbar-button {
-  border: 1px solid rgb(255 255 255 / 12%);
-  background: rgb(255 255 255 / 3%);
-  color: #e7e7e4;
-  font: inherit;
-  cursor: pointer;
-  transition:
-    border-color 160ms ease,
-    background 160ms ease,
-    color 160ms ease,
-    transform 160ms ease;
-}
-
-.openpress-icon-button {
-  display: inline-flex;
-  width: 32px;
-  height: 32px;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  color: #b7babd;
-}
-
-.openpress-icon-button:hover,
-.openpress-navbar-button:hover {
-  border-color: rgb(255 255 255 / 22%);
-  background: rgb(255 255 255 / 8%);
-  color: #fff;
-}
-
-.openpress-icon-button:active,
-.openpress-navbar-button:active {
-  transform: translateY(1px);
+.openpress-deploy-dialog dd a {
+  color: rgb(214 218 222 / 92%);
+  text-decoration: none;
 }
 
-.openpress-icon-button svg {
-  width: 15px;
-  height: 15px;
-  color: var(--openpress-accent);
+.openpress-deploy-dialog dd a:hover {
+  color: rgb(240 182 76 / 94%);
+  text-decoration: underline;
+  text-underline-offset: 3px;
 }
 
-.openpress-navbar-button {
+.openpress-deploy-dialog__status {
   display: inline-flex;
-  height: 32px;
-  min-width: 74px;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   gap: 6px;
-  padding: 0 13px;
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 1;
-  white-space: nowrap;
+  color: rgb(198 204 210 / 78%);
 }
 
-.openpress-navbar-button svg {
-  width: 13px;
-  height: 13px;
-  color: currentColor;
+.openpress-deploy-dialog__status::before {
+  width: 6px;
+  height: 6px;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: currentColor;
+  content: "";
 }
 
-.openpress-navbar-button--ghost {
-  color: #f0f1ee;
-  border-color: rgb(240 182 76 / 32%);
-  background: rgb(240 182 76 / 8%);
+.openpress-deploy-dialog__status[data-openpress-deploy-status="online"] {
+  color: rgb(110 231 160 / 90%);
 }
 
-.openpress-navbar-button--ghost:hover {
-  border-color: rgb(240 182 76 / 52%);
-  background: rgb(240 182 76 / 13%);
+.openpress-deploy-dialog__status[data-openpress-deploy-status="dirty"],
+.openpress-deploy-dialog__status[data-openpress-deploy-status="deploying"] {
+  color: rgb(240 182 76 / 92%);
 }
 
-.openpress-navbar-button:disabled {
-  cursor: progress;
-  color: #a7adb2;
-  border-color: rgb(240 182 76 / 24%);
-  background: rgb(240 182 76 / 6%);
+.openpress-deploy-dialog__status[data-openpress-deploy-status="failed"] {
+  color: rgb(248 113 113 / 90%);
 }
 
-.openpress-publication-control {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
+.openpress-deploy-dialog__message {
+  margin: 0;
+  border-left: 2px solid rgb(248 113 113 / 76%);
+  padding: 6px 0 6px 10px;
+  color: rgb(248 113 113 / 88%);
+  font-size: 12px;
+  line-height: 1.45;
 }
 
-.openpress-publication-trigger {
+.openpress-deploy-dialog .openpress-workbench-dialog__footer button {
   display: inline-flex;
-  height: 32px;
+  height: 30px;
   align-items: center;
   justify-content: center;
   gap: 7px;
   border: 1px solid rgb(255 255 255 / 12%);
+  border-radius: 4px;
   padding: 0 10px;
-  background: rgb(255 255 255 / 3%);
-  color: #e7e7e4;
+  background: transparent;
+  color: rgb(226 229 230 / 86%);
   font: inherit;
   font-size: 11px;
-  font-weight: 500;
-  line-height: 1;
-  white-space: nowrap;
+  font-weight: 560;
   cursor: pointer;
-  transition:
-    border-color 160ms ease,
-    background 160ms ease,
-    color 160ms ease;
 }
 
-.openpress-publication-trigger:hover,
-.openpress-publication-trigger[aria-expanded="true"] {
-  border-color: rgb(255 255 255 / 22%);
-  background: rgb(255 255 255 / 8%);
-  color: #fff;
+.openpress-deploy-dialog .openpress-workbench-dialog__footer button:hover:not(:disabled) {
+  border-color: rgb(240 182 76 / 34%);
+  color: rgb(240 182 76 / 92%);
+}
+
+.openpress-deploy-dialog .openpress-workbench-dialog__footer button:disabled {
+  cursor: not-allowed;
+  opacity: 0.46;
 }
 
-.openpress-publication-trigger svg {
+.openpress-deploy-dialog .openpress-workbench-dialog__footer svg {
   width: 13px;
   height: 13px;
-  color: #8f969d;
 }
 
-.openpress-publication-dot {
-  width: 7px;
-  height: 7px;
-  flex: 0 0 auto;
-  border-radius: 999px;
-  background: #697078;
-  box-shadow: 0 0 0 1px rgb(255 255 255 / 12%);
+.openpress-search-dialog-backdrop {
+  z-index: 1001;
+  padding: calc(var(--openpress-workbench-toolbar-height, 44px) + 24px) 24px 24px;
+  background: rgb(0 0 0 / 46%);
 }
 
-.openpress-publication-control[data-publication-online="true"] .openpress-publication-dot {
-  background: #6ee7a0;
-  box-shadow: 0 0 0 1px rgb(110 231 160 / 30%), 0 0 14px rgb(110 231 160 / 24%);
+.openpress-search-dialog {
+  width: min(640px, calc(100vw - 48px));
+  max-height: min(72vh, 760px);
+  grid-template-rows: auto auto minmax(0, 1fr);
+  box-shadow: 0 24px 72px rgb(0 0 0 / 44%);
 }
 
-.openpress-publication-menu {
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
-  z-index: 55;
+.openpress-search-dialog__header {
+  gap: 16px;
+  padding: 16px 48px 10px 16px;
+}
+
+.openpress-search-dialog__form {
   display: grid;
-  width: min(320px, calc(100vw - 32px));
   gap: 10px;
-  border: 1px solid rgb(255 255 255 / 12%);
-  padding: 12px;
-  background: rgb(22 22 22 / 98%);
-  box-shadow: 0 18px 48px rgb(0 0 0 / 42%);
+  border-top: 1px solid rgb(255 255 255 / 8%);
+  border-bottom: 1px solid rgb(255 255 255 / 8%);
+  padding: 12px 16px;
 }
 
-.openpress-publication-menu__row {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 16px;
-  color: #8f969d;
-  font-size: 11px;
-  line-height: 1.4;
+.openpress-search-dialog__input-row {
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+  min-height: 34px;
+  border: 1px solid rgb(255 255 255 / 12%);
+  border-radius: 5px;
+  padding: 0 7px 0 10px;
+  background: rgb(255 255 255 / 4%);
 }
 
-.openpress-publication-menu__row strong {
-  color: #f2f2f0;
-  font-size: 12px;
-  font-weight: 500;
-  text-align: right;
+.openpress-search-dialog__input-row > svg {
+  width: 13px;
+  height: 13px;
+  color: rgb(160 166 173 / 70%);
 }
 
-.openpress-publication-menu__note {
-  margin: 0;
-  border-top: 1px solid rgb(255 255 255 / 8%);
-  padding-top: 10px;
-  color: #aeb3b8;
+.openpress-search-dialog__input-row input {
+  min-width: 0;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: rgb(242 242 238 / 94%);
+  font: inherit;
   font-size: 12px;
-  line-height: 1.5;
+  outline: 0;
 }
 
-.openpress-publication-menu__actions {
-  display: grid;
-  gap: 6px;
+.openpress-search-dialog__input-row input::placeholder {
+  color: rgb(160 166 173 / 54%);
 }
 
-.openpress-publication-menu__actions button {
+.openpress-search-dialog__input-row button,
+.openpress-search-dialog__scope button {
   display: inline-flex;
-  height: 32px;
+  height: 26px;
   align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-  border: 1px solid rgb(255 255 255 / 10%);
-  padding: 0 10px;
-  background: rgb(255 255 255 / 4%);
-  color: #f0f1ee;
+  justify-content: center;
+  gap: 6px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 0 9px;
+  background: transparent;
+  color: rgb(214 218 222 / 82%);
   font: inherit;
-  font-size: 12px;
-  line-height: 1;
+  font-size: 11px;
+  font-weight: 560;
   cursor: pointer;
-  transition:
-    border-color 160ms ease,
-    background 160ms ease,
-    color 160ms ease;
 }
 
-.openpress-publication-menu__actions button:hover:not(:disabled) {
-  border-color: rgb(240 182 76 / 36%);
-  background: rgb(240 182 76 / 10%);
-  color: #fff;
+.openpress-search-dialog__input-row button:hover:not(:disabled),
+.openpress-search-dialog__scope button:hover {
+  color: rgb(240 182 76 / 92%);
 }
 
-.openpress-publication-menu__actions button:disabled {
-  cursor: not-allowed;
-  opacity: 0.45;
+.openpress-search-dialog__input-row button:disabled {
+  cursor: progress;
+  opacity: 0.62;
 }
 
-.openpress-publication-menu__actions svg {
-  width: 13px;
-  height: 13px;
-  flex: 0 0 auto;
-  color: var(--openpress-accent);
+.openpress-search-dialog__input-row button svg {
+  width: 12px;
+  height: 12px;
+}
+
+.openpress-search-dialog__input-row button:disabled svg,
+.openpress-search-dialog__empty svg {
+  animation: openpress-search-spin 0.9s linear infinite;
 }
 
-.openpress-page-count {
+.openpress-search-dialog__scope {
   display: inline-flex;
+  width: fit-content;
   align-items: center;
-  gap: 5px;
-  color: #9da3aa;
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-  letter-spacing: 0.04em;
-  min-width: 74px;
-  justify-content: center;
+  gap: 2px;
+  border: 1px solid rgb(255 255 255 / 10%);
+  border-radius: 5px;
+  padding: 2px;
+  background: rgb(255 255 255 / 3%);
 }
 
-.openpress-page-count__label {
-  color: #6f7680;
-  font-size: 10px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+.openpress-search-dialog__scope button[data-openpress-search-scope-active="true"] {
+  border-color: rgb(240 182 76 / 26%);
+  background: rgb(240 182 76 / 9%);
+  color: rgb(240 182 76 / 92%);
+}
+
+.openpress-search-dialog__empty,
+.openpress-search-dialog__error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  padding: 18px 16px;
+  color: rgb(160 166 173 / 72%);
+  font-size: 12px;
+  line-height: 1.5;
 }
 
-.openpress-page-count .sep {
-  opacity: 0.45;
+.openpress-search-dialog__empty svg {
+  width: 13px;
+  height: 13px;
 }
 
-.openpress-workspace-progress {
-  position: absolute;
-  right: 24px;
-  bottom: 0;
-  left: 24px;
-  width: auto;
-  height: 2px;
-  overflow: visible;
-  background: rgb(255 255 255 / 10%);
-  cursor: pointer;
+.openpress-search-dialog__error {
+  color: rgb(248 113 113 / 88%);
 }
 
-.openpress-workspace-progress__bar {
-  position: static;
-  display: block;
-  width: var(--progress, 0%);
-  height: 2px;
-  background: rgb(255 255 255 / 62%);
-  transition: width 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
+.openpress-search-dialog__results {
+  min-height: 0;
+  overflow: auto;
+  padding: 12px 16px 16px;
 }
 
-.openpress-editor-rail {
-  grid-area: rail;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 8px;
-  border-right: 1px solid rgb(255 255 255 / 9%);
-  padding: 12px 8px;
-  background: #101010;
-  color: #dfe1dd;
+.openpress-search-dialog__summary {
+  margin: 0 0 10px;
+  color: rgb(160 166 173 / 70%);
+  font-size: 11px;
+  line-height: 1.35;
 }
 
-.openpress-editor-rail__button {
+.openpress-search-dialog__file {
   display: grid;
-  justify-items: center;
-  gap: 5px;
-  min-width: 0;
-  border: 1px solid transparent;
-  padding: 9px 4px;
-  background: transparent;
-  color: #858b92;
-  font: inherit;
-  font-size: 10px;
-  line-height: 1.1;
-  cursor: pointer;
-  transition:
-    border-color 160ms ease,
-    background 160ms ease,
-    color 160ms ease;
+  gap: 7px;
+  margin: 0 0 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgb(255 255 255 / 8%);
 }
 
-.openpress-editor-rail__button:hover,
-.openpress-editor-rail__button.is-active {
-  border-color: rgb(223 75 33 / 42%);
-  background: rgb(223 75 33 / 10%);
-  color: #f2f2f0;
+.openpress-search-dialog__file:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+
+.openpress-search-dialog__file h3 {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: 14px minmax(0, 1fr) auto;
+  gap: 7px;
+  align-items: center;
+  margin: 0;
+  color: rgb(226 229 230 / 90%);
+  font-size: 12px;
+  font-weight: 650;
+  line-height: 1.25;
 }
 
-.openpress-editor-rail__button svg {
-  width: 17px;
-  height: 17px;
-  color: var(--openpress-accent);
+.openpress-search-dialog__file h3 svg {
+  width: 12px;
+  height: 12px;
+  color: rgb(240 182 76 / 82%);
 }
 
-.openpress-editor-rail__button span {
+.openpress-search-dialog__file h3 span {
   overflow: hidden;
-  max-width: 100%;
+  min-width: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.openpress-editor-navigator {
-  grid-area: left;
+.openpress-search-dialog__file h3 small {
+  display: inline-flex;
+  min-width: 20px;
+  height: 18px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgb(255 255 255 / 10%);
+  border-radius: 999px;
+  color: rgb(160 166 173 / 78%);
+  font-size: 10px;
+  font-weight: 650;
+}
+
+.openpress-search-dialog__file ol {
+  display: grid;
+  gap: 5px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.openpress-search-dialog__file li {
+  display: block;
   min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-  background: #171717;
 }
 
-.openpress-reader-app[data-active-workspace="document"] .openpress-editor-navigator {
-  display: none;
+.openpress-search-dialog__result {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  grid-template-columns: 44px minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: baseline;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  padding: 6px 7px;
+  background: rgb(255 255 255 / 3%);
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
 }
 
-.openpress-reader-app.is-closed-left .openpress-editor-navigator {
-  pointer-events: none;
+.openpress-search-dialog__result:hover:not(:disabled) {
+  border-color: rgb(240 182 76 / 18%);
+  background: rgb(240 182 76 / 7%);
 }
 
-.openpress-reader-app.is-closed-left .openpress-editor-navigator > * {
-  opacity: 0;
+.openpress-search-dialog__result:disabled {
+  cursor: default;
+  opacity: 0.68;
 }
 
-.openpress-editor-canvas {
-  grid-area: main;
+.openpress-search-dialog__line {
+  color: rgb(160 166 173 / 74%);
+  font-family: var(--openpress-font-mono);
+  font-size: 10px;
+  line-height: 1.35;
 }
 
-.openpress-editor-inspector {
-  grid-area: right;
+.openpress-search-dialog__preview {
+  overflow: hidden;
+  min-width: 0;
+  color: rgb(226 229 230 / 84%);
+  font-family: var(--openpress-font-mono);
+  font-size: 11px;
+  line-height: 1.45;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.openpress-editor-inspector-section {
-  border-bottom: 1px solid rgb(255 255 255 / 8%);
-  padding: 18px 0;
+.openpress-search-dialog__page {
+  color: rgb(240 182 76 / 82%);
+  font-family: var(--openpress-font-mono);
+  font-size: 10px;
+  font-weight: 650;
+  line-height: 1.35;
 }
 
-.openpress-editor-inspector-card {
-  display: grid;
-  gap: 7px;
-  padding: 0 18px 0 30px;
+.openpress-search-dialog__result:disabled .openpress-search-dialog__page {
+  color: rgb(160 166 173 / 58%);
 }
 
-.openpress-editor-inspector-card span {
-  color: #777d84;
-  font-size: 11px;
-  text-transform: uppercase;
+@keyframes openpress-toolbar-deploy-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
-.openpress-editor-inspector-card strong {
-  color: #f2f2f0;
-  font-size: 26px;
-  font-weight: 400;
-  line-height: 1;
+@keyframes openpress-search-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes openpress-toolbar-deploy-pulse {
+  from {
+    opacity: 0.58;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
-.openpress-editor-inspector-card p {
+.openpress-workbench-left-panel,
+.openpress-workbench-right-panel {
+  min-width: 0;
+  min-height: 0;
+  height: auto;
+  max-height: none;
   margin: 0;
-  color: #9ba1a8;
-  font-size: 12px;
-  line-height: 1.45;
+  align-self: stretch;
+  background: #171717;
 }
 
-.openpress-editor-stack {
+.openpress-public-viewer.openpress-workbench-shell .openpress-workbench-left-panel {
+  grid-area: left;
   display: grid;
-  gap: 8px;
-  padding: 0 18px 0 30px;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  height: auto;
+  max-height: none;
+  align-self: stretch;
+  border-right: 1px solid rgb(255 255 255 / 8%);
 }
 
-.openpress-editor-inspector-row {
+.openpress-public-viewer.openpress-workbench-shell .openpress-workbench-right-panel {
+  position: relative;
+  grid-area: right;
   display: grid;
-  gap: 3px;
-  min-width: 0;
-  border: 1px solid rgb(255 255 255 / 8%);
-  padding: 9px;
-  background: rgb(255 255 255 / 3%);
+  grid-template-rows: minmax(0, 1fr);
+  height: auto;
+  max-height: none;
+  align-self: stretch;
+  border-left: 1px solid rgb(255 255 255 / 8%);
+  overflow: hidden;
 }
 
-.openpress-editor-inspector-row strong,
-.openpress-editor-inspector-row small {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.openpress-workbench-right-panel .openpress-public-drawer-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 3;
+  display: none;
 }
 
-.openpress-editor-inspector-row strong {
-  color: #dfe1dd;
-  font-size: 12px;
-  font-weight: 500;
+.openpress-reader-app.is-closed-right .openpress-workbench-right-panel {
+  pointer-events: none;
 }
 
-.openpress-editor-inspector-row small {
-  color: #757b82;
-  font-size: 11px;
+.openpress-reader-app.is-closed-right .openpress-workbench-right-panel > * {
+  opacity: 0;
+}
+
+.openpress-reader-app.is-closed-left .openpress-workbench-left-panel {
+  pointer-events: none;
+}
+
+.openpress-reader-app.is-closed-left .openpress-workbench-left-panel > * {
+  opacity: 0;
 }
 
 .openpress-reader-app .reader-stage {
@@ -698,19 +1240,12 @@
   scroll-behavior: smooth;
 }
 
-/* Mandatory snap only in paged mode — reading mode needs free scroll within
-   long flowed sections, not page-by-page snap-back. */
+/* Page Scale Model keeps document pages fixed-size, so page-by-page snap is the default. */
 .openpress-reader-app[data-openpress-view-mode="paged"] .reader-stage,
 .openpress-reader-app:not([data-openpress-view-mode]) .reader-stage {
   scroll-snap-type: y mandatory;
 }
 
-.openpress-workbench__stage[data-workspace-view="project"] .reader-stage {
-  display: block;
-  align-items: initial;
-  justify-content: initial;
-}
-
 .openpress-reader-app .reader-stage::-webkit-scrollbar,
 .openpress-workspace-panel::-webkit-scrollbar,
 .openpress-reader-app .reader-bookmarks::-webkit-scrollbar {