@open-press/core 1.2.0 → 1.2.1

package/src/styles/openpress/slide-presenter.css

@@ -0,0 +1,150 @@
+.openpress-slide-presenter {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  width: 100%;
+  height: 100dvh;
+  min-height: 100dvh;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 50% 0, var(--openpress-workbench-border-muted), transparent 42%),
+    #070707;
+  color: rgb(245 245 242 / 92%);
+  overscroll-behavior: none;
+}
+
+.openpress-slide-presenter__stage {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.openpress-reader-app.openpress-slide-presenter .reader-stage {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: transparent;
+  overscroll-behavior: contain;
+  scroll-snap-type: none;
+  scrollbar-width: none;
+}
+
+.openpress-reader-app.openpress-slide-presenter .reader-stage::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+.openpress-reader-app.openpress-slide-presenter .reader-pages {
+  --openpress-page-gap: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  align-content: center;
+  padding: 0;
+  align-items: center;
+  justify-items: center;
+}
+
+.openpress-reader-app.openpress-slide-presenter .openpress-html-page {
+  min-height: 0;
+  scroll-margin-top: 0;
+  scroll-snap-align: center;
+}
+
+.openpress-reader-app.openpress-slide-presenter .openpress-html-page__html {
+  box-shadow:
+    0 28px 80px rgb(0 0 0 / 34%),
+    0 0 0 1px rgb(255 255 255 / 10%);
+}
+
+.openpress-slide-presenter__hud {
+  position: fixed;
+  right: 18px;
+  bottom: 18px;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--openpress-workbench-glass-border);
+  border-radius: var(--openpress-workbench-radius-pill);
+  padding: 6px;
+  background: var(--openpress-workbench-glass-bg);
+  box-shadow: var(--openpress-workbench-glass-shadow);
+  backdrop-filter: var(--openpress-workbench-glass-blur);
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease;
+}
+
+.openpress-slide-presenter[data-openpress-present-ui="immersive"] {
+  cursor: none;
+}
+
+.openpress-slide-presenter[data-openpress-present-ui="immersive"] .openpress-slide-presenter__stage {
+  cursor: none;
+}
+
+.openpress-slide-presenter[data-openpress-present-ui="immersive"] .openpress-slide-presenter__hud {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(8px);
+}
+
+.openpress-slide-presenter__title {
+  max-width: 240px;
+  padding: 0 12px;
+  overflow: hidden;
+  color: rgb(245 245 242 / 56%);
+  font-family: var(--openpress-font-sans, system-ui, sans-serif);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 30px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-right: 1px solid rgb(255 255 255 / 10%);
+}
+
+.openpress-slide-presenter__progress {
+  min-width: 64px;
+  padding: 0 10px;
+  color: rgb(245 245 242 / 72%);
+  font-family: var(--openpress-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  line-height: 30px;
+  text-align: center;
+}
+
+.openpress-slide-presenter__button {
+  display: inline-flex;
+  width: 30px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--openpress-workbench-radius-pill);
+  padding: 0;
+  background: transparent;
+  color: rgb(245 245 242 / 68%);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.openpress-slide-presenter__button:hover,
+.openpress-slide-presenter__button:focus-visible {
+  background: rgb(255 255 255 / 10%);
+  color: rgb(245 245 242 / 96%);
+}
+
+.openpress-slide-presenter__button svg {
+  width: 15px;
+  height: 15px;
+}

package/src/styles/openpress/slide-public-viewer.css

@@ -0,0 +1,222 @@
+/* ─── Slide Public Viewer ──────────────────────────────────────────────────── */
+/* Always dark — both chrome and immersive modes use the same dark palette.
+   The only difference is whether the toolbar + thumb panel are visible. */
+
+.openpress-slide-public {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100dvh;
+  background: #0d0d0d;
+  color: rgb(245 245 242 / 90%);
+  overflow: hidden;
+  overscroll-behavior: none;
+}
+
+/* Toolbar — dark-themed override of workbench-toolbar base styles */
+.openpress-slide-public__toolbar.openpress-workbench-toolbar {
+  flex-shrink: 0;
+  z-index: 10;
+  background: rgb(18 18 18 / 92%);
+  border-bottom: 1px solid var(--openpress-workbench-border-muted);
+  backdrop-filter: blur(12px);
+}
+
+/* Override the light-mode workbench toolbar button colours */
+.openpress-slide-public__toolbar .openpress-workbench-toolbar-panel-toggle,
+.openpress-slide-public__toolbar .openpress-workbench-toolbar-action {
+  color: rgb(245 245 242 / 60%);
+}
+
+.openpress-slide-public__toolbar .openpress-workbench-toolbar-panel-toggle:hover,
+.openpress-slide-public__toolbar .openpress-workbench-toolbar-panel-toggle:focus-visible,
+.openpress-slide-public__toolbar .openpress-workbench-toolbar-action:hover,
+.openpress-slide-public__toolbar .openpress-workbench-toolbar-action:focus-visible {
+  background: var(--openpress-workbench-border-muted);
+  color: rgb(245 245 242 / 92%);
+}
+
+.openpress-slide-public__toolbar .openpress-workbench-toolbar-action[disabled] {
+  color: rgb(245 245 242 / 24%);
+  pointer-events: none;
+}
+
+.openpress-slide-public__nav {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.openpress-slide-public__nav-btn {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+}
+
+.openpress-slide-public__counter {
+  min-width: 56px;
+  padding: 0 6px;
+  font-family: var(--openpress-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-align: center;
+  color: rgb(245 245 242 / 48%);
+}
+
+/* Body: thumb panel + stage side by side */
+.openpress-slide-public__body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Thumbnail panel */
+.openpress-slide-public__thumbs {
+  width: 220px;
+  flex-shrink: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-right: 1px solid rgb(255 255 255 / 7%);
+  background: #0a0a0a;
+  padding: 8px 8px 24px;
+  scrollbar-width: thin;
+  scrollbar-color: rgb(255 255 255 / 14%) transparent;
+}
+
+.openpress-slide-public__thumbs.is-closed {
+  display: none;
+}
+
+/* Thumbnail dark-mode overrides */
+.openpress-slide-public .openpress-thumb-card {
+  border-color: var(--openpress-workbench-border-muted);
+  color: rgb(245 245 242 / 56%);
+}
+
+.openpress-slide-public .openpress-thumb-card:hover {
+  border-color: rgb(255 255 255 / 22%);
+  background: rgb(255 255 255 / 4%);
+}
+
+.openpress-slide-public .openpress-thumb-card.is-active {
+  border-color: rgb(255 255 255 / 50%);
+}
+
+.openpress-slide-public .openpress-thumb-card__index {
+  color: rgb(245 245 242 / 32%);
+}
+
+.openpress-slide-public .openpress-thumb-card.is-active .openpress-thumb-card__index {
+  color: rgb(245 245 242 / 72%);
+}
+
+.openpress-slide-public .openpress-thumb-card__title {
+  color: rgb(245 245 242 / 56%);
+}
+
+/* Main slide stage */
+.openpress-slide-public__stage {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  position: relative;
+  overflow: hidden;
+  background: #0d0d0d;
+}
+
+.openpress-reader-app.openpress-slide-public .reader-pages {
+  --openpress-page-gap: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  align-content: center;
+  align-items: center;
+  justify-items: center;
+}
+
+/* Mini HUD — only visible in immersive (fullscreen) mode */
+.openpress-slide-public__mini-hud {
+  position: fixed;
+  right: 18px;
+  bottom: 18px;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid var(--openpress-workbench-glass-border);
+  border-radius: var(--openpress-workbench-radius-pill);
+  padding: 6px;
+  background: var(--openpress-workbench-glass-bg);
+  box-shadow: var(--openpress-workbench-glass-shadow);
+  backdrop-filter: var(--openpress-workbench-glass-blur);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(8px);
+  transition: opacity 160ms ease, transform 160ms ease;
+}
+
+.openpress-slide-public__mini-counter {
+  min-width: 56px;
+  padding: 0 8px;
+  color: rgb(245 245 242 / 72%);
+  font-family: var(--openpress-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  line-height: 30px;
+  text-align: center;
+}
+
+.openpress-slide-public__mini-btn {
+  display: inline-flex;
+  width: 30px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--openpress-workbench-radius-pill);
+  padding: 0;
+  background: transparent;
+  color: rgb(245 245 242 / 68%);
+  cursor: pointer;
+}
+
+.openpress-slide-public__mini-btn:hover,
+.openpress-slide-public__mini-btn:focus-visible {
+  background: rgb(255 255 255 / 10%);
+  color: rgb(245 245 242 / 96%);
+}
+
+.openpress-slide-public__mini-btn svg {
+  width: 15px;
+  height: 15px;
+}
+
+/* Immersive (fullscreen): hide toolbar + thumbs, reveal mini HUD */
+.openpress-slide-public[data-openpress-present-ui="immersive"] {
+  cursor: none;
+}
+
+.openpress-slide-public[data-openpress-present-ui="immersive"] .openpress-slide-public__toolbar {
+  display: none;
+}
+
+.openpress-slide-public[data-openpress-present-ui="immersive"] .openpress-slide-public__thumbs {
+  display: none;
+}
+
+.openpress-slide-public[data-openpress-present-ui="immersive"] .openpress-slide-public__stage {
+  cursor: none;
+}
+
+.openpress-slide-public[data-openpress-present-ui="immersive"] .openpress-slide-public__mini-hud {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+/* ─── End Slide Public Viewer ──────────────────────────────────────────────── */

package/src/styles/openpress/workbench-dialog.css

@@ -0,0 +1,267 @@
+.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-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 var(--openpress-workbench-border);
+  border-radius: var(--openpress-workbench-radius-md);
+  background: var(--openpress-workbench-dialog-bg);
+  color: var(--openpress-workbench-text);
+  box-shadow: 0 24px 68px rgb(0 0 0 / 42%);
+}
+
+.openpress-workbench-dialog::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 2px;
+  background: rgb(240 182 76 / 82%);
+  content: "";
+}
+
+.openpress-workbench-dialog__header,
+.openpress-workbench-dialog__footer {
+  display: flex;
+  align-items: center;
+  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-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-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-workbench-dialog h2::before,
+.openpress-workbench-dialog h3::before {
+  display: none;
+  content: none;
+}
+
+.openpress-workbench-dialog__title-meta {
+  display: flex;
+  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: var(--openpress-workbench-radius-sm);
+  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: var(--openpress-workbench-radius-pill);
+  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 var(--openpress-workbench-border-muted);
+  border-bottom: 1px solid var(--openpress-workbench-border-muted);
+  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-deploy-dialog dt {
+  color: rgb(150 156 163 / 68%);
+}
+
+.openpress-deploy-dialog dd {
+  overflow: hidden;
+  color: var(--openpress-workbench-text-soft);
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.openpress-deploy-dialog dd a {
+  color: rgb(214 218 222 / 92%);
+  text-decoration: none;
+}
+
+.openpress-deploy-dialog dd a:hover {
+  color: rgb(240 182 76 / 94%);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.openpress-deploy-dialog__status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 6px;
+  color: rgb(198 204 210 / 78%);
+}
+
+.openpress-deploy-dialog__status::before {
+  width: 6px;
+  height: 6px;
+  flex: 0 0 auto;
+  border-radius: var(--openpress-workbench-radius-pill);
+  background: currentColor;
+  content: "";
+}
+
+.openpress-deploy-dialog__status[data-openpress-deploy-status="online"] {
+  color: var(--openpress-workbench-success);
+}
+
+.openpress-deploy-dialog__status[data-openpress-deploy-status="dirty"],
+.openpress-deploy-dialog__status[data-openpress-deploy-status="deploying"] {
+  color: var(--openpress-workbench-accent);
+}
+
+.openpress-deploy-dialog__status[data-openpress-deploy-status="failed"] {
+  color: var(--openpress-workbench-danger);
+}
+
+.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-deploy-dialog .openpress-workbench-dialog__footer button {
+  display: inline-flex;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  border: 1px solid var(--openpress-workbench-border);
+  border-radius: var(--openpress-workbench-radius-sm);
+  padding: 0 10px;
+  background: transparent;
+  color: var(--openpress-workbench-text-soft);
+  font: inherit;
+  font-size: 11px;
+  font-weight: 560;
+  cursor: pointer;
+}
+
+.openpress-deploy-dialog .openpress-workbench-dialog__footer button:hover:not(:disabled) {
+  border-color: rgb(240 182 76 / 34%);
+  color: var(--openpress-workbench-accent);
+}
+
+.openpress-deploy-dialog .openpress-workbench-dialog__footer button:disabled {
+  cursor: not-allowed;
+  opacity: 0.46;
+}
+
+.openpress-deploy-dialog .openpress-workbench-dialog__footer svg {
+  width: 13px;
+  height: 13px;
+}