@open-press/cli 0.3.0

package/template/core/src/styles/openpress/workbench.css

@@ -0,0 +1,720 @@
+.openpress-workbench {
+  display: block;
+  min-height: 100vh;
+  background: #141414;
+  color: var(--openpress-text);
+}
+
+.openpress-workbench[data-panel-open="false"] {
+  grid-template-columns: 0 minmax(0, 1fr);
+}
+
+.openpress-public-shell {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100dvh;
+  min-height: 100dvh;
+  overflow: hidden;
+  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;
+  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%);
+  color: #f2f2f0;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1;
+  cursor: pointer;
+  backdrop-filter: blur(14px);
+  box-shadow: 0 10px 26px rgb(0 0 0 / 28%);
+}
+
+.openpress-panel-toggle:hover {
+  border-color: rgb(255 255 255 / 24%);
+  background: rgb(28 28 28 / 92%);
+}
+
+.openpress-panel-toggle span[aria-hidden="true"] {
+  width: 14px;
+  color: var(--openpress-accent);
+  font-size: 16px;
+  line-height: 0.8;
+  text-align: center;
+}
+
+.openpress-panel-scrim {
+  display: none;
+}
+
+.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[data-panel-open="false"] .openpress-workbench__sidebar {
+  transform: translateX(-100%);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.openpress-workbench__sidebar::-webkit-scrollbar {
+  width: 8px;
+}
+
+.openpress-workbench__sidebar::-webkit-scrollbar-track {
+  background: var(--openpress-scrollbar-track-sidebar);
+}
+
+.openpress-workbench__sidebar::-webkit-scrollbar-thumb {
+  border-color: var(--openpress-scrollbar-track-sidebar);
+}
+
+.openpress-workbench__brand {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 28px;
+}
+
+.openpress-workbench__brand span {
+  color: var(--openpress-accent);
+  font-size: 13px;
+}
+
+.openpress-workbench__brand strong {
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.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__meta p {
+  margin: 0;
+  color: #f4f4f2;
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.openpress-workbench__meta small {
+  display: block;
+  margin-top: 8px;
+  color: #8e949b;
+  font-size: 12px;
+}
+
+.openpress-source-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 18px;
+}
+
+.openpress-source-list__item {
+  display: grid;
+  grid-template-columns: 32px minmax(0, 1fr);
+  gap: 8px;
+  border: 1px solid transparent;
+  padding: 10px 8px;
+  color: inherit;
+  text-decoration: none;
+}
+
+.openpress-source-list__item:hover {
+  border-color: rgb(255 255 255 / 12%);
+  background: rgb(255 255 255 / 4%);
+}
+
+.openpress-source-list__item span {
+  color: #777d84;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.openpress-source-list__item strong {
+  overflow: hidden;
+  color: #d8dadd;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.45;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.openpress-source-list__item small {
+  grid-column: 2;
+  overflow: hidden;
+  color: #7f858c;
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.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-reader-app,
+.openpress-reader-app.is-closed-left,
+.openpress-reader-app.is-closed-right,
+.openpress-reader-app.is-closed-left.is-closed-right {
+  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";
+  overflow: hidden;
+  background: #141414;
+}
+
+.openpress-reader-app.is-closed-left {
+  grid-template-columns: 56px 0 minmax(0, 1fr) clamp(300px, 22vw, 360px);
+}
+
+.openpress-reader-app.is-closed-right {
+  grid-template-columns: 56px clamp(240px, 20vw, 320px) minmax(0, 1fr) 0;
+}
+
+.openpress-reader-app.is-closed-left.is-closed-right {
+  grid-template-columns: 56px 0 minmax(0, 1fr) 0;
+}
+
+.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);
+}
+
+.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;
+}
+
+.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-workspace-navbar__left,
+.openpress-workspace-navbar__right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.openpress-workspace-navbar__left {
+  justify-self: start;
+}
+
+.openpress-workspace-navbar__right {
+  justify-self: end;
+}
+
+.openpress-workspace-brand {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  min-width: 0;
+}
+
+.openpress-workspace-brand__logo {
+  flex: 0 0 auto;
+  color: var(--openpress-accent);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.openpress-workspace-brand strong {
+  overflow: hidden;
+  max-width: min(42vw, 520px);
+  color: #f2f2f0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.3;
+  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-icon-button svg {
+  width: 15px;
+  height: 15px;
+  color: var(--openpress-accent);
+}
+
+.openpress-navbar-button {
+  display: inline-flex;
+  height: 32px;
+  min-width: 74px;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 13px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.openpress-navbar-button svg {
+  width: 13px;
+  height: 13px;
+  color: currentColor;
+}
+
+.openpress-navbar-button--ghost {
+  color: #f0f1ee;
+  border-color: rgb(240 182 76 / 32%);
+  background: rgb(240 182 76 / 8%);
+}
+
+.openpress-navbar-button--ghost:hover {
+  border-color: rgb(240 182 76 / 52%);
+  background: rgb(240 182 76 / 13%);
+}
+
+.openpress-navbar-button:disabled {
+  cursor: progress;
+  color: #a7adb2;
+  border-color: rgb(240 182 76 / 24%);
+  background: rgb(240 182 76 / 6%);
+}
+
+.openpress-publication-control {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.openpress-publication-trigger {
+  display: inline-flex;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  border: 1px solid rgb(255 255 255 / 12%);
+  padding: 0 10px;
+  background: rgb(255 255 255 / 3%);
+  color: #e7e7e4;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  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-publication-trigger 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-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-publication-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 55;
+  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%);
+}
+
+.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-publication-menu__row strong {
+  color: #f2f2f0;
+  font-size: 12px;
+  font-weight: 500;
+  text-align: right;
+}
+
+.openpress-publication-menu__note {
+  margin: 0;
+  border-top: 1px solid rgb(255 255 255 / 8%);
+  padding-top: 10px;
+  color: #aeb3b8;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.openpress-publication-menu__actions {
+  display: grid;
+  gap: 6px;
+}
+
+.openpress-publication-menu__actions button {
+  display: inline-flex;
+  height: 32px;
+  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;
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  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-publication-menu__actions button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.openpress-publication-menu__actions svg {
+  width: 13px;
+  height: 13px;
+  flex: 0 0 auto;
+  color: var(--openpress-accent);
+}
+
+.openpress-page-count {
+  display: inline-flex;
+  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;
+}
+
+.openpress-page-count__label {
+  color: #6f7680;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.openpress-page-count .sep {
+  opacity: 0.45;
+}
+
+.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-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-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-editor-rail__button {
+  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;
+}
+
+.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-editor-rail__button svg {
+  width: 17px;
+  height: 17px;
+  color: var(--openpress-accent);
+}
+
+.openpress-editor-rail__button span {
+  overflow: hidden;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.openpress-editor-navigator {
+  grid-area: left;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: #171717;
+}
+
+.openpress-reader-app[data-active-workspace="document"] .openpress-editor-navigator {
+  display: none;
+}
+
+.openpress-reader-app.is-closed-left .openpress-editor-navigator {
+  pointer-events: none;
+}
+
+.openpress-reader-app.is-closed-left .openpress-editor-navigator > * {
+  opacity: 0;
+}
+
+.openpress-editor-canvas {
+  grid-area: main;
+}
+
+.openpress-editor-inspector {
+  grid-area: right;
+}
+
+.openpress-editor-inspector-section {
+  border-bottom: 1px solid rgb(255 255 255 / 8%);
+  padding: 18px 0;
+}
+
+.openpress-editor-inspector-card {
+  display: grid;
+  gap: 7px;
+  padding: 0 18px 0 30px;
+}
+
+.openpress-editor-inspector-card span {
+  color: #777d84;
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+.openpress-editor-inspector-card strong {
+  color: #f2f2f0;
+  font-size: 26px;
+  font-weight: 400;
+  line-height: 1;
+}
+
+.openpress-editor-inspector-card p {
+  margin: 0;
+  color: #9ba1a8;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.openpress-editor-stack {
+  display: grid;
+  gap: 8px;
+  padding: 0 18px 0 30px;
+}
+
+.openpress-editor-inspector-row {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+  border: 1px solid rgb(255 255 255 / 8%);
+  padding: 9px;
+  background: rgb(255 255 255 / 3%);
+}
+
+.openpress-editor-inspector-row strong,
+.openpress-editor-inspector-row small {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.openpress-editor-inspector-row strong {
+  color: #dfe1dd;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.openpress-editor-inspector-row small {
+  color: #757b82;
+  font-size: 11px;
+}
+
+.openpress-reader-app .reader-stage {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: auto;
+  background: transparent;
+  scrollbar-width: none;
+  scroll-behavior: smooth;
+}
+
+/* Mandatory snap only in paged mode — reading mode needs free scroll within
+   long flowed sections, not page-by-page snap-back. */
+.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 {
+  width: 0;
+  height: 0;
+  display: none;
+}

package/template/core/src/styles/openpress.css

@@ -0,0 +1,14 @@
+@import url("/openpress/fonts.css");
+@import url("/openpress/tokens.css");
+@import url("/openpress/content.css");
+@import url("/openpress/components.css");
+
+@import "./openpress/app-shell.css";
+@import "./openpress/workbench.css";
+@import "./openpress/workbench-panels.css";
+@import "./openpress/project-workspace.css";
+@import "./openpress/media-workspace.css";
+@import "./openpress/reader-runtime.css";
+@import "./openpress/public-viewer.css";
+@import "./openpress/responsive.css";
+@import "./openpress/print-route.css";