@lincyaw/web 0.0.0-stage → 1.0.0-rc.0

package/src/client/preview.ts

@@ -0,0 +1,71 @@
+import { componentErrors, presmiumReport } from '@lincyaw/host'
+import type { NavigationPosition } from '@lincyaw/host'
+import { irBlocks, PREVIEW_REVISION, startPreviewAgent, stepKeys, stepTrail } from '@lincyaw/kernel'
+import type { PreviewAgent } from '@lincyaw/kernel'
+import type { FollowAnchor, Viewer } from '@lincyaw/viewer'
+import type { Ref } from 'vue'
+import { nextTick, watch } from 'vue'
+import { createViewerNavigation } from './host.ts'
+
+export interface WebPreviewOptions {
+  origins: string[]
+  document: string
+}
+
+export interface WebPreviewPage {
+  viewer: Viewer
+  dark: Ref<boolean>
+}
+
+export function startWebPreview(page: WebPreviewPage, options: WebPreviewOptions): void {
+  const { viewer, dark } = page
+  const navigation = createViewerNavigation(viewer)
+  const revision = () => {
+    const value = viewer.doc.value.meta[PREVIEW_REVISION]
+    return typeof value === 'string' ? value : undefined
+  }
+  const blockStep = (section: string, block: string) => {
+    const found = viewer.section(section)
+    return found ? [...irBlocks(found.blocks)].find(b => b.id === block)?.at : undefined
+  }
+  const agent: PreviewAgent | undefined = startPreviewAgent({
+    renderer: 'web',
+    document: options.document,
+    origins: options.origins,
+    revision,
+    position() {
+      const { section, step, trail, view } = navigation.position.value as NavigationPosition & FollowAnchor
+      return section === undefined ? undefined : { section, step, trail: trail ?? [], ...view ? { view } : {} }
+    },
+    go: ({ section, step, trail, view }) => navigation.go({ slide: 0, step: step ?? 0, section, ...trail ? { trail } : {}, ...view ? { view } : {} }),
+    reveal: ({ section, block }) => viewer.show({ section, step: (block && blockStep(section, block)) || 0 }),
+    setDark(value) {
+      dark.value = value
+    },
+    stepOf({ section, block }) {
+      const step = blockStep(section, block)
+      const found = viewer.section(section)
+      return step === undefined || !found ? undefined : { step, trail: stepTrail(stepKeys(found), step) }
+    },
+  })
+  if (!agent) return
+  watch(() => navigation.position.value, () => agent.moved())
+  watch(revision, () => void nextTick(() => requestAnimationFrame(() => agent.updated())))
+  watchProblems(agent)
+}
+
+function watchProblems(agent: PreviewAgent): void {
+  const told = new Set<string>()
+  watch(() => [presmiumReport()?.plugins ?? [], componentErrors()] as const, ([plugins, errors]) => {
+    const problems = [
+      ...plugins.filter(p => p.status === 'failed' || p.status === 'disabled').map(p => ({ level: p.status === 'failed' ? 'error' as const : 'warning' as const, plugin: p.id, message: p.reason ?? p.status })),
+      ...errors.map(e => ({ level: 'error' as const, plugin: e.component, message: e.message })),
+    ]
+    for (const problem of problems) {
+      const key = JSON.stringify(problem)
+      if (told.has(key)) continue
+      told.add(key)
+      agent.report(problem)
+    }
+  }, { immediate: true })
+}

package/src/client/style.css

@@ -0,0 +1,427 @@
+:root {
+  --vp-font-family-base: var(--pm-font-sans);
+  --vp-font-family-mono: var(--pm-font-mono);
+
+  --vp-c-bg: var(--pm-color-bg);
+  --vp-c-bg-alt: var(--pm-color-sunk);
+  --vp-c-bg-elv: var(--pm-color-surface);
+  --vp-c-bg-soft: var(--pm-color-sunk);
+  --vp-c-text-1: var(--pm-color-ink);
+  --vp-c-text-2: var(--pm-color-muted);
+  --vp-c-text-3: var(--pm-color-muted);
+  --vp-c-border: var(--pm-color-line-strong);
+  --vp-c-divider: var(--pm-color-line);
+  --vp-c-gutter: var(--pm-color-line);
+
+  --vp-c-brand-1: var(--pm-color-accent);
+  --vp-c-brand-2: color-mix(in srgb, var(--pm-color-accent) 88%, var(--pm-color-ink));
+  --vp-c-brand-3: var(--pm-color-accent);
+  --vp-c-brand-soft: var(--pm-color-accent-soft);
+  --vp-c-tip-1: var(--pm-color-accent);
+  --vp-c-tip-soft: var(--pm-color-accent-soft);
+  --vp-c-success-1: var(--pm-color-ok);
+  --vp-c-success-soft: var(--pm-color-ok-soft);
+  --vp-c-warning-1: var(--pm-color-warn);
+  --vp-c-warning-soft: var(--pm-color-warn-soft);
+  --vp-c-danger-1: var(--pm-color-danger);
+  --vp-c-danger-soft: var(--pm-color-danger-soft);
+  --vp-c-default-soft: var(--pm-color-sunk);
+
+  --vp-code-color: var(--pm-color-ink);
+  --vp-code-bg: var(--pm-color-sunk);
+  --vp-code-block-bg: var(--pm-color-code);
+  --vp-code-copy-code-bg: var(--pm-color-surface);
+  --vp-code-line-highlight-color: var(--pm-color-selected);
+
+  --vp-nav-bg-color: var(--pm-color-bg);
+  --vp-sidebar-bg-color: var(--pm-color-bg);
+  --vp-local-search-bg: var(--pm-color-bg);
+  --vp-local-search-result-bg: var(--pm-color-surface);
+  --vp-local-search-highlight-bg: var(--pm-color-accent);
+  --vp-local-search-highlight-text: var(--pm-color-on-accent);
+}
+
+html {
+  font-size: 100%;
+}
+
+body {
+  font-size: 1rem;
+}
+
+.vp-doc .pm-block--markdown,
+.vp-doc .pm-section__title,
+.vp-doc .pm-section :is(h1, h2, h3, h4) {
+  font-family: var(--pm-font-serif);
+}
+
+.vp-doc .pm-block--markdown {
+  font-size: var(--pm-text-reading);
+  line-height: var(--pm-leading-reading);
+}
+
+.vp-doc .pm-block--markdown :is(code, pre, kbd) {
+  font-family: var(--pm-font-mono);
+}
+
+.vp-doc .pm-section :is(h1, h2, h3, h4) {
+  font-weight: 600;
+  letter-spacing: normal;
+  line-height: var(--pm-leading-tight);
+}
+
+.vp-doc a {
+  text-underline-offset: 2px;
+}
+
+.vp-doc .pm-section h1 {
+  font-size: 2rem;
+}
+
+.vp-doc .pm-section h2 {
+  font-size: 1.5rem;
+}
+
+.vp-doc .pm-section h3 {
+  font-size: 1.25rem;
+}
+
+.vp-doc .pm-section :is(h4, h5, h6) {
+  font-size: 1.0625rem;
+}
+
+.vp-doc :is(strong, b, th),
+.pm-present :is(strong, b),
+.pm-presenter :is(strong, b) {
+  font-synthesis: weight style;
+}
+
+.pm-view-menu:focus-visible,
+.pm-block :is(button, input, select, textarea, summary, [tabindex]):focus-visible,
+.pm-present :is(button, input, select, textarea, summary):focus-visible,
+.pm-presenter :is(button, input, select, textarea, summary):focus-visible,
+.pm-toolbar :is(button, input, select, textarea, a):focus-visible {
+  outline: 2px solid var(--vp-c-brand-1);
+  outline-offset: 2px;
+}
+
+.VPNavBar .container > .title {
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.VPNavBarTitle,
+.VPNavBarTitle a.title {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.VPNavBarTitle a.title > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.VPNavBarTitle a.title {
+  font-family: var(--pm-font-serif);
+  font-weight: 600;
+}
+
+.VPSidebarItem.level-1 > .item .text {
+  font-weight: 600;
+}
+
+.pm-section {
+  scroll-margin-top: calc(var(--vp-nav-height) + 1rem);
+}
+
+.vp-doc .pm-section__title {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: none;
+}
+
+.vp-doc .pm-section + .pm-section {
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.vp-doc .pm-block div[class*='language-'] {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.vp-doc .pm-open-slides {
+  display: inline-flex;
+  gap: 0.25em;
+  align-items: center;
+  margin-left: 0.5em;
+  padding: 0 0.5em;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 999px;
+  color: var(--vp-c-text-2);
+  font-family: var(--pm-font-sans);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.75;
+  text-decoration: none;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.vp-doc .pm-open-slides::after {
+  content: attr(data-label);
+}
+
+.vp-doc .pm-open-slides:hover {
+  border-color: var(--vp-c-brand-1);
+  color: var(--vp-c-brand-1);
+}
+
+.pm-view-menu {
+  margin-left: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--pm-color-line-strong);
+  border-radius: var(--pm-radius-control);
+  background: var(--pm-color-surface);
+  color: var(--pm-color-ink);
+  font-family: var(--pm-font-sans);
+  font-size: var(--pm-text-sm);
+  cursor: pointer;
+}
+
+@supports (appearance: base-select) {
+  .pm-view-menu,
+  .pm-view-menu::picker(select) {
+    appearance: base-select;
+  }
+
+  .pm-view-menu {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding-inline: 0.625rem 0.5rem;
+  }
+
+  .pm-view-menu:hover {
+    background: var(--pm-color-sunk);
+  }
+
+  .pm-view-menu::picker-icon {
+    content: '';
+    width: 0.875rem;
+    height: 0.875rem;
+    background: currentColor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
+    transition: rotate 0.15s;
+  }
+
+  .pm-view-menu:open::picker-icon {
+    rotate: 180deg;
+  }
+
+  .pm-view-menu::picker(select) {
+    margin-block: 6px;
+    padding: var(--pm-space-1);
+    border: 1px solid var(--pm-color-line);
+    border-radius: var(--pm-radius-control);
+    background: var(--pm-color-surface);
+    color: var(--pm-color-ink);
+    box-shadow: var(--pm-shadow-float);
+  }
+
+  .pm-view-menu option {
+    gap: var(--pm-space-2);
+    padding: 0.375rem 0.625rem;
+    border-radius: var(--pm-radius-small);
+    font-family: var(--pm-font-sans);
+    font-size: var(--pm-text-sm);
+    cursor: pointer;
+  }
+
+  .pm-view-menu option:hover,
+  .pm-view-menu option:focus-visible {
+    background: var(--pm-color-sunk);
+    outline: none;
+  }
+
+  .pm-view-menu option:checked {
+    color: var(--pm-color-accent);
+    font-weight: 600;
+  }
+}
+
+.pm-view-menu--screen,
+.pm-toolbar--screen {
+  margin: 1rem 0 0;
+}
+
+.pm-toolbar--screen {
+  flex-wrap: wrap;
+}
+
+.pm-toolbar--bar {
+  margin-inline-start: 0.75rem;
+}
+
+@media (max-width: 767px) {
+  .pm-view-menu--bar,
+  .pm-toolbar--bar {
+    display: none !important;
+  }
+}
+
+@media (min-width: 768px) {
+  .pm-view-menu--screen,
+  .pm-toolbar--screen {
+    display: none !important;
+  }
+}
+
+.pm-present,
+.pm-presenter {
+  z-index: calc(var(--vp-z-index-local-nav, 32) + 100);
+}
+
+html.pm-presenting {
+  --pm-cue-z: calc(var(--vp-z-index-local-nav, 32) + 101);
+}
+
+.pm-site-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pm-space-1);
+  margin-left: 0.75rem;
+  padding: 0.25rem 0.625rem;
+  border: 1px solid var(--pm-color-line);
+  border-radius: var(--pm-radius-control);
+  color: var(--pm-color-ink);
+  font-family: var(--pm-font-sans);
+  font-size: var(--pm-text-sm);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.pm-site-link:hover {
+  border-color: var(--pm-color-accent);
+  color: var(--pm-color-accent);
+}
+
+.pm-site-home {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pm-space-8);
+  margin: 0 auto;
+  max-width: 69rem;
+  padding: var(--pm-space-8) 0 var(--pm-space-10);
+}
+
+.pm-site-home__title {
+  margin: 0;
+  font-family: var(--pm-font-serif);
+  font-size: var(--pm-text-display);
+  font-weight: 600;
+  line-height: var(--pm-leading-tight);
+}
+
+.pm-site-home__section {
+  display: grid;
+  gap: var(--pm-space-4);
+}
+
+.pm-site-home__filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--pm-space-3);
+}
+
+.pm-site-home__filters > .pm-ui-heading {
+  margin-right: auto;
+}
+
+.pm-site-home__search-box {
+  flex: 1 1 15rem;
+  max-width: 24rem;
+}
+
+.pm-site-home__tags {
+  flex-wrap: wrap;
+}
+
+.pm-site-home__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
+  gap: var(--pm-space-4);
+}
+
+.pm-site-home__documents {
+  display: contents;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.pm-site-home__empty {
+  grid-column: 1 / -1;
+}
+
+.pm-site-home__document {
+  gap: var(--pm-space-3);
+  margin: 0;
+}
+
+.pm-site-home__link {
+  color: var(--pm-color-ink);
+  font-family: var(--pm-font-serif);
+  font-size: var(--pm-text-title);
+  font-weight: 600;
+  line-height: 1.3;
+  text-decoration: none;
+}
+
+.pm-site-home__link::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+
+.pm-site-home__link:hover {
+  color: var(--pm-color-accent);
+}
+
+.pm-site-home__link:focus-visible {
+  outline: none;
+}
+
+.pm-site-home__description {
+  margin: 0;
+  color: var(--pm-color-muted);
+}
+
+.pm-site-footer {
+  margin-top: 2rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--vp-c-gutter);
+  text-align: center;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--vp-c-text-2);
+}
+
+.pm-site-footer p {
+  margin: 0;
+}
+
+.pm-site-footer a {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: color 0.25s;
+}
+
+.pm-site-footer a:hover {
+  color: var(--vp-c-text-1);
+}