@lincyaw/viewer 1.0.0-rc.0 → 1.0.0-rc.2

package/src/{style.css → client/style.css}

@@ -1,21 +1,23 @@
+@import './views/controls.css';
+
 :root {
-  --pm-c-bg: var(--vp-c-bg, #fff);
-  --pm-c-bg-soft: var(--vp-c-bg-soft, #f6f6f7);
-  --pm-c-text: var(--vp-c-text-1, #213547);
-  --pm-c-text-2: var(--vp-c-text-2, #476582);
-  --pm-c-border: var(--vp-c-divider, #e2e2e3);
-  --pm-c-brand: var(--vp-c-brand-1, #3451b2);
-  --pm-c-danger: var(--vp-c-danger-1, #b8272c);
-  --pm-c-warning: var(--vp-c-warning-1, #915930);
-  --pm-code-bg: var(--vp-code-block-bg, #f6f6f7);
-  --pm-line-highlight: var(--vp-code-line-highlight-color, rgba(142, 150, 170, 0.14));
+  --pm-c-bg: var(--pm-color-bg);
+  --pm-c-bg-soft: var(--pm-color-sunk);
+  --pm-c-text: var(--pm-color-ink);
+  --pm-c-text-2: var(--pm-color-muted);
+  --pm-c-border: var(--pm-color-line);
+  --pm-c-brand: var(--pm-color-accent);
+  --pm-c-danger: var(--pm-color-danger);
+  --pm-c-warning: var(--pm-color-warn);
+  --pm-code-bg: var(--pm-color-code);
+  --pm-line-highlight: var(--pm-color-selected);
   --pm-board-bg: color-mix(in srgb, var(--pm-c-brand) 4%, var(--pm-c-bg));
   --pm-board-border: var(--pm-c-border);
-  --pm-scroll-shadow: rgba(0, 0, 0, 0.18);
+  --pm-scroll-shadow: color-mix(in srgb, var(--pm-color-shadow) 18%, transparent);
 }
 
 .dark {
-  --pm-scroll-shadow: rgba(255, 255, 255, 0.16);
+  --pm-scroll-shadow: color-mix(in srgb, var(--pm-color-sheen) 16%, transparent);
 }
 
 .pm-hidden,
@@ -27,7 +29,7 @@
 .pm-block,
 .pm-block li,
 [data-pm-click] {
-  transition: opacity 0.3s;
+  transition: opacity var(--pm-duration-slow) var(--pm-ease);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -88,7 +90,7 @@
 .pm-diagnostics {
   margin: 0.5rem 0;
   padding: 0.5rem 0.75rem 0.5rem 1.75rem;
-  border: 1px solid var(--pm-c-danger);
+  border: var(--pm-size-hairline) solid var(--pm-c-danger);
   border-radius: 0.25rem;
   color: var(--pm-c-danger);
   font-size: 0.875em;
@@ -97,8 +99,8 @@
 .pm-board {
   margin: 1.25rem 0;
   padding: 0.75rem 1.25rem;
-  border: 1px solid var(--pm-board-border);
-  border-left: 4px solid var(--pm-c-brand);
+  border: var(--pm-size-hairline) solid var(--pm-board-border);
+  border-left: calc(var(--pm-size-stroke) * 2) solid var(--pm-c-brand);
   border-radius: 0.5rem;
   background: var(--pm-board-bg);
 }
@@ -133,7 +135,7 @@
 
 .pm-section--scrolly > .pm-stage {
   position: sticky;
-  top: calc(var(--vp-nav-height, 0px) + 1rem);
+  top: calc(var(--pm-sticky-top, 0rem) + 1rem);
   margin: 0;
   padding: 0.75rem;
   container-type: inline-size;
@@ -146,7 +148,7 @@
 .pm-step {
   min-height: 45vh;
   padding-left: 0.75rem;
-  border-left: 2px solid var(--pm-c-border);
+  border-left: var(--pm-size-stroke) solid var(--pm-c-border);
 }
 
 .pm-step--current {
@@ -168,7 +170,7 @@
   }
 
   .pm-section--scrolly > .pm-stage {
-    top: var(--vp-nav-height, 0px);
+    top: var(--pm-sticky-top, 0rem);
     z-index: 1;
     max-height: 50vh;
     overflow-y: auto;
@@ -191,7 +193,7 @@
 .pm-code-origin__file,
 .pm-code-origin__commit,
 .pm-code-origin__variant {
-  font-family: var(--vp-font-family-mono, monospace);
+  font-family: var(--pm-font-mono);
   overflow-wrap: anywhere;
 }
 
@@ -203,7 +205,7 @@
 .pm-code-origin__badge {
   padding: 0 0.4em;
   border-radius: 0.25rem;
-  border: 1px solid currentColor;
+  border: var(--pm-size-hairline) solid currentColor;
   color: var(--pm-c-warning);
 }
 
@@ -213,20 +215,8 @@
 
 .pm-code-block__run {
   display: flex;
-  gap: 0.5rem;
+  gap: var(--pm-space-1);
   align-items: center;
-  font-size: 0.85em;
-}
-
-.pm-code-block__run button {
-  padding: 0.125rem 0.75rem;
-  border: 1px solid var(--pm-c-brand);
-  border-radius: 0.25rem;
-  color: var(--pm-c-brand);
-}
-
-.pm-code-block__run button:disabled {
-  opacity: 0.6;
 }
 
 .pm-code-block__hint {
@@ -257,7 +247,7 @@
 
 .pm-stage .pm-code pre {
   --pm-code-pad: 0.75rem;
-  font-size: clamp(0.65rem, (100cqi - 2 * var(--pm-code-pad) - 2px) / (var(--pm-code-columns, 40) * 0.62), 0.875rem);
+  font-size: clamp(0.65rem, (100cqi - 2 * var(--pm-code-pad) - var(--pm-size-stroke)) / (var(--pm-code-columns, 40) * 0.62), 0.875rem);
 }
 
 .pm-view table {
@@ -283,7 +273,7 @@
 }
 
 .pm-code code {
-  font-family: var(--vp-font-family-mono, monospace);
+  font-family: var(--pm-font-mono);
 }
 
 .pm-code .shiki span {
@@ -314,7 +304,7 @@
   margin: 0.25rem 0;
   padding: 0.5rem 0.75rem;
   overflow-x: auto;
-  border-left: 3px solid var(--pm-c-border);
+  border-left: var(--pm-size-rule) solid var(--pm-c-border);
   background: var(--pm-c-bg-soft);
   font-size: 0.8125em;
 }
@@ -368,7 +358,7 @@
 .pm-admonition {
   margin: 1rem 0;
   padding: 0.25rem 1rem;
-  border-left: 4px solid var(--pm-c-brand);
+  border-left: calc(var(--pm-size-stroke) * 2) solid var(--pm-c-brand);
   border-radius: 0.25rem;
   background: var(--pm-c-bg-soft);
 }
@@ -386,11 +376,11 @@
 
 .pm-block kbd {
   padding: 0.05em 0.35em;
-  border: 1px solid var(--pm-c-border);
-  border-bottom-width: 2px;
+  border: var(--pm-size-hairline) solid var(--pm-c-border);
+  border-bottom-width: var(--pm-size-stroke);
   border-radius: 0.25rem;
   background: var(--pm-c-bg-soft);
-  font-family: var(--vp-font-family-mono, monospace);
+  font-family: var(--pm-font-mono);
   font-size: 0.875em;
 }
 
@@ -405,7 +395,7 @@
 .pm-block details {
   margin: 1rem 0;
   padding: 0.25rem 1rem;
-  border: 1px solid var(--pm-c-border);
+  border: var(--pm-size-hairline) solid var(--pm-c-border);
   border-radius: 0.25rem;
 }
 
@@ -467,7 +457,7 @@
   display: flex;
   flex-direction: column;
   margin: 1rem 0;
-  border: 1px solid var(--pm-c-border);
+  border: var(--pm-size-hairline) solid var(--pm-c-border);
   border-radius: 0.5rem;
   background: var(--pm-c-bg);
   overflow: hidden;
@@ -488,12 +478,12 @@
 }
 
 .pm-card__header {
-  border-bottom: 1px solid var(--pm-c-border);
+  border-bottom: var(--pm-size-hairline) solid var(--pm-c-border);
 }
 
 .pm-card__footer {
   margin-top: auto;
-  border-top: 1px solid var(--pm-c-border);
+  border-top: var(--pm-size-hairline) solid var(--pm-c-border);
 }
 
 .pm-card > .pm-card__title {
@@ -536,8 +526,8 @@
 .pm-block .pm-button {
   display: inline-block;
   padding: 0.3em 1em;
-  border: 1px solid var(--pm-c-brand);
-  border-radius: 999px;
+  border: var(--pm-size-hairline) solid var(--pm-c-brand);
+  border-radius: var(--pm-radius-pill);
   color: var(--pm-c-brand);
   font-weight: 600;
   text-decoration: none;
@@ -556,13 +546,13 @@
   display: flex;
   flex-wrap: wrap;
   gap: 0.25rem;
-  border-bottom: 1px solid var(--pm-c-border);
+  border-bottom: var(--pm-size-hairline) solid var(--pm-c-border);
 }
 
 .pm-tabs__tab {
   margin-bottom: -1px;
   padding: 0.4rem 0.9rem;
-  border-bottom: 2px solid transparent;
+  border-bottom: var(--pm-size-stroke) solid transparent;
   color: var(--pm-c-text-2);
   cursor: pointer;
 }
@@ -596,7 +586,7 @@
 
 .pm-component-missing {
   padding: 0.5rem 0.75rem;
-  border: 1px dashed var(--pm-c-border);
+  border: var(--pm-size-hairline) dashed var(--pm-c-border);
   border-radius: 0.25rem;
   color: var(--pm-c-text-2);
   font-size: 0.875em;
@@ -604,7 +594,7 @@
 
 .pm-boundary-error {
   padding: 0.5rem 0.75rem;
-  border: 1px dashed var(--pm-c-danger);
+  border: var(--pm-size-hairline) dashed var(--pm-c-danger);
   border-radius: 0.25rem;
   color: var(--pm-c-danger);
   font-size: 0.85em;
@@ -618,7 +608,7 @@ html.pm-presenting {
 .pm-presenter {
   position: fixed;
   inset: 0;
-  z-index: 1000;
+  z-index: var(--pm-z-overlay-view);
   display: flex;
   flex-direction: column;
   background: var(--pm-c-bg);
@@ -646,33 +636,264 @@ html.pm-presenting {
 .pm-present__slide {
   position: relative;
   flex: 1;
+  min-height: 0;
+  padding: 2vh 2vw;
+}
+
+/* A slide: its canvas, scaled as a whole to its box, and the Book layout on it. */
+
+.pm-slide-fit {
+  position: relative;
   width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.pm-slide-fit__canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
+  box-shadow: var(--pm-shadow-page);
+}
+
+.pm-slide {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  padding: 1.9em 3.1em 2.6em;
+  overflow: hidden;
+  background: var(--pm-color-surface);
+  color: var(--pm-color-ink);
+  font-family: var(--pm-font-sans);
+  font-size: var(--pm-slide-text);
+  line-height: 1.6;
+}
+
+.pm-slide :is(ul, ol) {
+  margin: 0.67em 0;
+  padding-inline-start: 1.3em;
+}
+
+.pm-slide li::marker {
+  color: var(--pm-color-accent);
+}
+
+.pm-slide :is(table, th, td) {
+  font-size: 0.95em;
+}
+
+.pm-slide :is(th, td) {
+  padding: 0.3em 0.6em;
+}
+
+.pm-slide__chapter {
+  display: flex;
+  align-items: center;
+  gap: 0.67em;
+  margin: 0 0 0.55em;
+  color: var(--pm-color-accent);
+  font-size: 0.67em;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  line-height: 1.4;
+}
+
+.pm-slide__chapter::after {
+  content: '';
+  flex: 1;
+  height: var(--pm-size-hairline);
+  background: var(--pm-color-line);
+}
+
+.pm-slide__body {
+  flex: 1;
   min-height: 0;
-  max-width: min(92vw, 120rem);
-  margin: 0 auto;
-  padding: 5vh 4vw;
   overflow: hidden;
-  font-size: clamp(1rem, min(2vw, 3.6vh), 1.75rem);
 }
 
-.pm-present__content {
+.pm-slide__content {
   transform-origin: top left;
 }
 
-.pm-present .pm-present__slide :is(table, th, td) {
-  font-size: 1em;
+.pm-slide__content > .pm-block--markdown :is(p, ul, ol, blockquote) {
+  font-family: var(--pm-font-serif);
 }
 
-.pm-present .pm-present__slide :is(th, td) {
-  padding: 0.3em 0.6em;
+/* Over the reading styles of the document's headings (`.pm-document h2`). */
+.pm-slide .pm-slide__title {
+  margin: 0 0 0.45em;
+  padding: 0;
+  border: 0;
+  font-family: var(--pm-font-serif);
+  font-size: 2.2em;
+  font-weight: 600;
+  line-height: 1.15;
+  letter-spacing: -0.005em;
 }
 
-.pm-present .pm-present__slide ul {
-  padding-inline-start: 1.5em;
+.pm-slide--cover {
+  justify-content: flex-end;
+  padding-bottom: 5.3em;
 }
 
-.pm-present .pm-present__slide ol {
-  padding-inline-start: 2em;
+.pm-slide--cover .pm-slide__title {
+  max-width: 85%;
+  font-size: 2.67em;
+  line-height: 1.12;
+}
+
+.pm-slide--cover .pm-slide__title::before {
+  content: '';
+  display: block;
+  width: 1em;
+  height: 0.07em;
+  margin-bottom: 0.45em;
+  border-radius: var(--pm-radius-chip);
+  background: var(--pm-color-accent);
+}
+
+.pm-slide--cover .pm-slide__content > .pm-block :is(p, ul, ol) {
+  max-width: 80%;
+  color: var(--pm-color-muted);
+  font-size: 1.1em;
+}
+
+.pm-slide--center .pm-slide__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  text-align: center;
+}
+
+.pm-slide--full {
+  padding: 0;
+}
+
+/* A full slide is all content (a scene, a picture); its title stays for assistive technology only. */
+.pm-slide--full .pm-slide__title {
+  position: absolute;
+  width: var(--pm-size-hairline);
+  height: var(--pm-size-hairline);
+  margin: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.pm-slide__footer {
+  position: absolute;
+  right: 3.1em;
+  bottom: 0.9em;
+  left: 3.1em;
+  display: flex;
+  align-items: center;
+  gap: 0.67em;
+  color: var(--pm-color-muted);
+  font-size: 0.61em;
+  line-height: 1.2;
+}
+
+.pm-slide__deck {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pm-slide__steps {
+  display: flex;
+  flex: none;
+  gap: 0.45em;
+  width: min(calc(var(--pm-slide-steps, 1) * 2em - 0.45em), 40%);
+  margin-left: auto;
+}
+
+.pm-slide__steps > span {
+  flex: 1;
+  min-width: 0.2em;
+  height: 0.27em;
+  border-radius: 0.2em;
+  background: var(--pm-color-line-strong);
+}
+
+.pm-slide__steps > span[data-done] {
+  background: var(--pm-color-accent);
+}
+
+.pm-slide__page {
+  margin-left: auto;
+  font-family: var(--pm-font-mono);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.pm-slide__steps + .pm-slide__page {
+  margin-left: 0;
+}
+
+/* A runnable code block's code, edited before it runs (CodeMirror). */
+.pm-code-editor {
+  margin: 0.5em 0;
+  border: var(--pm-size-hairline) solid var(--pm-color-line-strong);
+  border-radius: var(--pm-radius-control);
+  background: var(--pm-color-code);
+  font-size: 0.875em;
+}
+
+.pm-code-editor .cm-editor {
+  border-radius: inherit;
+}
+
+.pm-code-editor .cm-editor.cm-focused {
+  outline: var(--pm-size-stroke) solid var(--pm-color-accent);
+  outline-offset: var(--pm-space-px);
+}
+
+.pm-code-editor .cm-scroller {
+  padding: 0.5em 0;
+  font-family: var(--pm-font-mono);
+  line-height: 1.6;
+}
+
+.pm-code-editor .cm-content {
+  caret-color: var(--pm-color-ink);
+  color: var(--pm-color-ink);
+}
+
+.pm-code-editor .cm-cursor {
+  border-left-color: var(--pm-color-ink);
+}
+
+/* Plugins' layers on a slide (drawings): over its content, on the canvas's coordinates; a layer takes the pointer itself. */
+.pm-slide__layers {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+/* Every slide one after the other at the canvas's size, for printing. */
+
+.pm-slides-print__page {
+  position: relative;
+  overflow: hidden;
+  break-after: page;
+}
+
+@media print {
+  @page {
+    margin: 0;
+  }
+
+  html,
+  body {
+    margin: 0;
+  }
 }
 
 .pm-overview {
@@ -685,7 +906,8 @@ html.pm-presenting {
   font-size: 1rem;
 }
 
-.pm-overview__grid {
+/* The overview is chrome inside a document: its own list rules outrank the document's list styling. */
+.pm-overview .pm-overview__grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
   gap: 0.75rem;
@@ -701,7 +923,7 @@ html.pm-presenting {
   width: 100%;
   min-height: 4.5rem;
   padding: 0.75rem;
-  border: 1px solid var(--pm-c-border);
+  border: var(--pm-size-hairline) solid var(--pm-c-border);
   border-radius: 0.375rem;
   background: var(--pm-c-bg-soft);
   color: var(--pm-c-text);
@@ -711,12 +933,12 @@ html.pm-presenting {
 
 .pm-overview__item[aria-current='true'] {
   border-color: var(--pm-c-brand);
-  box-shadow: inset 0 0 0 1px var(--pm-c-brand);
+  box-shadow: inset 0 0 0 var(--pm-size-hairline) var(--pm-c-brand);
 }
 
 .pm-overview__item:focus-visible {
-  outline: 2px solid var(--pm-c-brand);
-  outline-offset: 2px;
+  outline: var(--pm-size-stroke) solid var(--pm-c-brand);
+  outline-offset: var(--pm-size-stroke);
 }
 
 .pm-overview__index {
@@ -739,7 +961,7 @@ html.pm-presenting {
   gap: 0.5rem;
   align-items: center;
   padding: 0.5rem 1rem;
-  border-top: 1px solid var(--pm-c-border);
+  border-top: var(--pm-size-hairline) solid var(--pm-c-border);
   font-size: 0.875rem;
   color: var(--pm-c-text-2);
 }
@@ -750,7 +972,7 @@ html.pm-presenting {
 
 .pm-present__button {
   padding: 0.25rem 0.75rem;
-  border: 1px solid var(--pm-c-border);
+  border: var(--pm-size-hairline) solid var(--pm-c-border);
   border-radius: 0.25rem;
   background: var(--pm-c-bg-soft);
   color: var(--pm-c-text);
@@ -759,7 +981,7 @@ html.pm-presenting {
 
 .pm-presenter__bar {
   border-top: none;
-  border-bottom: 1px solid var(--pm-c-border);
+  border-bottom: var(--pm-size-hairline) solid var(--pm-c-border);
 }
 
 .pm-presenter__title {
@@ -768,7 +990,7 @@ html.pm-presenting {
 
 .pm-presenter__timer {
   margin-left: auto;
-  font-family: var(--vp-font-family-mono, monospace);
+  font-family: var(--pm-font-mono);
   font-size: 1.25rem;
   color: var(--pm-c-text);
 }
@@ -789,9 +1011,12 @@ html.pm-presenting {
 }
 
 .pm-presenter__slide {
-  padding: 1rem;
-  border: 1px solid var(--pm-c-border);
-  border-radius: 0.5rem;
+  min-height: 0;
+}
+
+.pm-presenter__upcoming {
+  aspect-ratio: 16 / 9;
+  margin-bottom: 0.5rem;
 }
 
 .pm-presenter .pm-presenter__label {
@@ -802,7 +1027,7 @@ html.pm-presenting {
 
 .pm-presenter__note {
   padding: 0 0.5rem;
-  border-left: 3px solid transparent;
+  border-left: var(--pm-size-rule) solid transparent;
   opacity: 0.5;
 }
 
@@ -824,10 +1049,10 @@ html.pm-presenting {
 .pm-role-mark {
   margin: 0 0.15em;
   padding: 0 0.2em;
-  border-radius: 3px;
+  border-radius: var(--pm-radius-chip);
   font-size: 0.85em;
-  color: var(--vp-c-text-2, #666);
-  background: var(--vp-c-default-soft, rgba(128, 128, 128, 0.15));
+  color: var(--pm-color-muted);
+  background: var(--pm-color-sunk);
 }
 
 .pm-step-range.pm-hidden { display: none !important; }

package/src/client/viewer-messages.ts

@@ -0,0 +1,7 @@
+import { currentLocale } from '@lincyaw/host'
+import { VIEWER_MESSAGES } from '../domain/index.ts'
+import type { Messages } from '../domain/index.ts'
+
+export function viewerMessages(): Messages {
+  return VIEWER_MESSAGES[currentLocale()]
+}

package/src/{plugins.ts → client/viewer-plugins.ts}

@@ -2,7 +2,7 @@ import { errorMessage } from '@lincyaw/kernel'
 import { BlockView } from './block.ts'
 import { registerAction, registerComponent, registerLayer, registerNodeRenderer, registerView } from './registry.ts'
 import { SectionView } from './section.ts'
-import { useViewer } from './viewer.ts'
+import { useViewer } from './viewer-state.ts'
 
 export interface ViewerPluginContext {
   registerView: typeof registerView
@@ -19,7 +19,8 @@ export type ViewerPlugin = (context: ViewerPluginContext) => void
 
 const context: ViewerPluginContext = { registerView, registerNodeRenderer, registerComponent, registerAction, registerLayer, useViewer, SectionView, BlockView }
 
-export function installViewerPlugin(plugin: unknown, name = 'viewer plugin'): string | undefined {
+/** Installs a viewer plugin; returns why it could not be installed, or undefined when it was. */
+export function tryInstallViewerPlugin(plugin: unknown, name = 'viewer plugin'): string | undefined {
   if (typeof plugin !== 'function') {
     console.error(`[presmium] ${name}: the default export is not a function`)
     return 'the default export is not a function'