@open-press/core 0.7.1 → 0.8.0

package/src/styles/openpress/{project-workspace.css → project-preview-panel.css}

@@ -1,4 +1,4 @@
-.openpress-project-workspace {
+.openpress-project-preview-panel {
   width: 100%;
   min-width: 0;
   min-height: 100%;
@@ -8,7 +8,8 @@
 }
 
 .openpress-project-panel {
-  display: block;
+  display: grid;
+  gap: 18px;
   min-height: 0;
   padding: 4px 18px 18px 22px;
   overflow: auto;
@@ -25,13 +26,8 @@
   display: grid;
   gap: 10px;
   min-width: 0;
-  border-top: 1px solid rgb(255 255 255 / 8%);
-  padding: 14px 0;
-}
-
-.openpress-project-tool-block:first-child {
   border-top: 0;
-  padding-top: 0;
+  padding: 0;
 }
 
 .openpress-project-tool-header {
@@ -51,70 +47,6 @@
   text-transform: uppercase;
 }
 
-.openpress-project-upload-zone {
-  display: grid;
-  grid-template-columns: 26px minmax(0, 1fr);
-  gap: 4px 10px;
-  align-items: center;
-  min-width: 0;
-  border: 1px dashed rgb(255 255 255 / 14%);
-  padding: 10px;
-  color: rgb(170 176 183 / 72%);
-  cursor: pointer;
-  transition:
-    border-color 160ms ease,
-    background 160ms ease,
-    color 160ms ease;
-}
-
-.openpress-project-upload-zone[data-drag-active="true"],
-.openpress-project-upload-zone:hover {
-  border-color: rgb(223 106 47 / 62%);
-  background: rgb(223 106 47 / 8%);
-  color: rgb(244 241 235 / 92%);
-}
-
-.openpress-project-upload-zone input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.openpress-project-upload-zone svg {
-  grid-row: span 2;
-  width: 16px;
-  height: 16px;
-  color: rgb(223 106 47 / 82%);
-  stroke-width: 1.8;
-}
-
-.openpress-project-upload-zone span {
-  min-width: 0;
-  color: rgb(238 238 234 / 88%);
-  font-size: 12px;
-  font-weight: 560;
-  line-height: 1.2;
-}
-
-.openpress-project-upload-zone small,
-.openpress-project-tool-empty {
-  margin: 0;
-  color: rgb(150 156 163 / 58%);
-  font-size: 10px;
-  line-height: 1.35;
-  overflow-wrap: anywhere;
-}
-
-.openpress-project-upload-zone[data-upload-status="failed"] small {
-  color: #ff9c80;
-}
-
-.openpress-project-upload-zone[data-upload-status="done"] small {
-  color: #9de7b0;
-}
-
 .openpress-project-asset-list,
 .openpress-project-component-mention-list {
   display: grid;
@@ -168,23 +100,13 @@
   min-width: 0;
 }
 
-.openpress-project-asset-body strong {
-  min-width: 0;
-  overflow: hidden;
-  color: rgb(214 218 220 / 82%);
-  font-size: 12px;
-  font-weight: 520;
-  line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
+.openpress-project-asset-body strong,
 .openpress-project-component-mention-list strong {
   min-width: 0;
   overflow: hidden;
-  color: rgb(214 218 220 / 86%);
-  font-size: 13.5px;
-  font-weight: 560;
+  color: rgb(214 218 220 / 84%);
+  font-size: 12.5px;
+  font-weight: 540;
   line-height: 1.25;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -203,120 +125,16 @@
   stroke-width: 1.7;
 }
 
-.openpress-project-style-strip {
-  display: flex;
-  gap: 8px;
-  min-width: 0;
-}
-
-.openpress-project-style-strip span {
-  width: 22px;
-  height: 22px;
-  border: 1px solid rgb(255 255 255 / 14%);
-  background: var(--openpress-project-swatch);
-}
-
-.openpress-project-preview-dialog {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: grid;
-  place-items: center;
-  padding: 28px;
-  background: rgb(0 0 0 / 58%);
-}
-
-.openpress-project-preview-dialog__panel {
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr) auto;
-  width: min(860px, calc(100vw - 56px));
-  max-height: min(760px, calc(100vh - 56px));
-  overflow: hidden;
-  border: 1px solid rgb(255 255 255 / 12%);
-  background: #151716;
-  box-shadow: 0 28px 70px rgb(0 0 0 / 42%);
-  color: rgb(242 242 238 / 94%);
-}
-
-.openpress-project-preview-dialog__panel header {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto 34px;
-  gap: 16px;
-  align-items: center;
-  border-bottom: 1px solid rgb(255 255 255 / 9%);
-  padding: 14px 16px;
-}
-
-.openpress-project-preview-dialog .openpress-project-preview-dialog__panel h2 {
-  min-width: 0;
-  margin: 0;
-  overflow: hidden;
-  color: rgb(242 242 238 / 94%);
-  font-family: var(--openpress-font-body);
-  font-size: 14px;
-  font-weight: 560;
-  line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.openpress-project-preview-dialog__actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.openpress-project-preview-dialog__actions button {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  min-height: 30px;
-  border: 1px solid rgb(255 255 255 / 12%);
-  border-radius: 999px;
-  padding: 0 10px;
-  background: rgb(255 255 255 / 3%);
-  color: rgb(242 242 238 / 78%);
-  cursor: pointer;
-  font-size: 11px;
-  font-weight: 560;
-  line-height: 1;
-}
-
-.openpress-project-preview-dialog__actions button:hover {
-  border-color: rgb(223 106 47 / 58%);
-  color: rgb(255 255 255 / 92%);
-}
-
-.openpress-project-preview-dialog__actions svg {
-  width: 13px;
-  height: 13px;
-  stroke-width: 1.8;
-}
-
-.openpress-project-preview-dialog__close {
-  display: grid;
-  width: 30px;
-  height: 30px;
-  place-items: center;
-  border: 1px solid rgb(255 255 255 / 12%);
-  border-radius: 999px;
-  background: transparent;
-  color: rgb(242 242 238 / 82%);
-  cursor: pointer;
-  font-size: 20px;
-  line-height: 1;
-}
-
-.openpress-project-preview-dialog__close:hover {
-  border-color: rgb(255 255 255 / 24%);
-  color: white;
-}
+/* Backdrop / panel / header / close styles now come from the shared
+   .openpress-workbench-dialog* class family. Only project-preview-specific
+   pieces (rename/delete pill actions, body preview surface, footer forms +
+   comment composer) live in this file. */
 
 .openpress-project-preview-dialog__body {
   min-width: 0;
   min-height: 0;
   overflow: auto;
-  padding: 18px;
+  padding: 12px 24px 24px;
 }
 
 .openpress-project-preview-dialog__body[data-preview-kind="media"] {
@@ -347,218 +165,6 @@
   min-width: min-content;
 }
 
-.openpress-project-preview-dialog__footer {
-  display: grid;
-  gap: 12px;
-  border-top: 1px solid rgb(255 255 255 / 9%);
-  padding: 14px 16px 16px;
-  background: #151716;
-}
-
-.openpress-project-asset-action-form {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 10px;
-  align-items: end;
-}
-
-.openpress-project-asset-action-form label {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-}
-
-.openpress-project-asset-action-form label span,
-.openpress-project-preview-comment__shortcuts,
-.openpress-project-preview-comment__bottom {
-  color: rgb(170 176 183 / 70%);
-  font-size: 11px;
-  line-height: 1.2;
-}
-
-.openpress-project-asset-action-form input,
-.openpress-project-preview-comment textarea,
-.openpress-project-preview-comment select {
-  width: 100%;
-  min-width: 0;
-  border: 1px solid rgb(255 255 255 / 12%);
-  border-radius: 0;
-  background: rgb(255 255 255 / 5%);
-  color: rgb(244 244 240 / 92%);
-  font: inherit;
-}
-
-.openpress-project-asset-action-form input {
-  height: 34px;
-  padding: 0 10px;
-  font-size: 12px;
-}
-
-.openpress-project-asset-action-form > div,
-.openpress-project-preview-comment__bottom {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-}
-
-.openpress-project-asset-action-form button,
-.openpress-project-preview-comment button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  min-height: 32px;
-  border: 1px solid rgb(255 255 255 / 12%);
-  border-radius: 999px;
-  padding: 0 12px;
-  background: transparent;
-  color: rgb(242 242 238 / 82%);
-  cursor: pointer;
-  font-size: 11px;
-  font-weight: 560;
-  line-height: 1;
-}
-
-.openpress-project-asset-action-form button:hover:not(:disabled),
-.openpress-project-preview-comment button:hover:not(:disabled) {
-  border-color: rgb(223 106 47 / 58%);
-  color: rgb(255 255 255 / 94%);
-}
-
-.openpress-project-asset-action-form button:disabled,
-.openpress-project-preview-comment button:disabled {
-  cursor: default;
-  opacity: 0.48;
-}
-
-.openpress-project-asset-action-form svg {
-  width: 13px;
-  height: 13px;
-}
-
-.openpress-project-asset-action-form--delete {
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-}
-
-.openpress-project-asset-action-form--delete p,
-.openpress-project-asset-action-message {
-  margin: 0;
-  color: rgb(190 196 202 / 72%);
-  font-size: 11px;
-  line-height: 1.45;
-}
-
-.openpress-project-asset-action-message[data-status="done"] {
-  color: #9de7b0;
-}
-
-.openpress-project-asset-action-message[data-status="failed"] {
-  color: #ff9c80;
-}
-
-.openpress-project-preview-comment {
-  display: grid;
-  gap: 9px;
-  border-top: 1px solid rgb(255 255 255 / 7%);
-  padding-top: 12px;
-}
-
-.openpress-project-preview-comment__shortcuts {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.openpress-project-preview-comment__shortcuts button {
-  min-height: 28px;
-  padding: 0 10px;
-}
-
-.openpress-project-preview-comment__composer {
-  display: grid;
-  gap: 8px;
-  min-width: 0;
-}
-
-.openpress-project-preview-comment textarea {
-  min-height: 74px;
-  max-height: 160px;
-  resize: vertical;
-  padding: 10px;
-  font-size: 12px;
-  line-height: 1.45;
-}
-
-.openpress-project-preview-comment textarea::placeholder {
-  color: rgb(170 176 183 / 42%);
-}
-
-.openpress-project-preview-comment__suggestions {
-  display: grid;
-  gap: 4px;
-  overflow: hidden;
-  border: 1px solid rgb(223 106 47 / 32%);
-  border-radius: 12px;
-  padding: 6px;
-  background: rgb(36 36 34 / 96%);
-}
-
-.openpress-project-preview-comment__suggestions button {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 12px;
-  min-width: 0;
-  min-height: 0;
-  border: 0;
-  border-radius: 8px;
-  padding: 8px 10px;
-  background: transparent;
-  color: rgb(244 241 235 / 90%);
-  text-align: left;
-}
-
-.openpress-project-preview-comment__suggestions button:hover,
-.openpress-project-preview-comment__suggestions button:focus-visible,
-.openpress-project-preview-comment__suggestions button[data-highlighted="true"] {
-  background: rgb(223 106 47 / 18%);
-  outline: 0;
-}
-
-.openpress-project-preview-comment__suggestions span {
-  min-width: 0;
-  overflow: hidden;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.openpress-project-preview-comment__suggestions small {
-  flex: 0 0 auto;
-  color: rgb(218 161 123 / 78%);
-  font-size: 10px;
-  line-height: 1.2;
-}
-
-.openpress-project-preview-comment select {
-  width: auto;
-  height: 30px;
-  padding: 0 28px 0 9px;
-  color: rgb(190 196 202 / 82%);
-  font-size: 11px;
-}
-
-.openpress-project-preview-comment__bottom span[data-status="done"] {
-  color: #9de7b0;
-}
-
-.openpress-project-preview-comment__bottom span[data-status="failed"] {
-  color: #ff9c80;
-}
 
 .openpress-project-markdown-header dt {
   color: rgb(175 181 188 / 64%);