@pathmx/core 0.5.0

package/plugins/theme/prose.css

@@ -0,0 +1,284 @@
+@scope (.pmx-prose) to ([data-pmx-prose="off"]) {
+  :where(:scope) {
+    color: var(--pmx-color-fg);
+    line-height: var(--pmx-prose-leading);
+
+    > :where(:first-child) {
+      margin-block-start: 0;
+    }
+
+    > :where(:last-child) {
+      margin-block-end: 0;
+    }
+
+    > :where(h1, h2, h3, h4, h5, h6),
+    > :where(.pmx-heading) {
+      margin-block: calc(var(--pmx-prose-flow) * 1.8)
+        calc(var(--pmx-prose-flow) * 0.75);
+    }
+
+    > :where(h1, h2, h3, h4, h5, h6),
+    > :where(.pmx-heading) > :where(h1, h2, h3, h4, h5, h6) {
+      color: var(--pmx-color-fg);
+      font-family: var(--pmx-font-heading);
+      font-weight: 700;
+      line-height: 1.18;
+      text-wrap: balance;
+      scroll-margin-block-start: 0;
+    }
+
+    > :where(.pmx-heading) {
+      position: relative;
+    }
+
+    > :where(.pmx-heading) > :where(h1, h2, h3, h4, h5, h6) {
+      min-inline-size: 0;
+      margin: 0;
+      cursor: pointer;
+      transition: color 120ms ease-out;
+    }
+
+    :where(h1, h2, h3, h4, h5, h6) > a[href] {
+      &,
+      &:hover {
+        color: inherit;
+        font-weight: inherit;
+        text-decoration: none;
+      }
+    }
+
+    > :where(h1),
+    > :where(.pmx-heading.level-h1) > h1 {
+      font-size: 2.25em;
+    }
+    > :where(h2),
+    > :where(.pmx-heading.level-h2) > h2 {
+      font-size: 1.75em;
+    }
+    > :where(h3),
+    > :where(.pmx-heading.level-h3) > h3 {
+      font-size: 1.35em;
+    }
+    > :where(h4),
+    > :where(.pmx-heading.level-h4) > h4 {
+      font-size: 1.15em;
+    }
+    > :where(h5, h6),
+    > :where(.pmx-heading.level-h5) > h5,
+    > :where(.pmx-heading.level-h6) > h6 {
+      font-size: 1em;
+    }
+
+    .pmx-heading-anchor {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      margin: -1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+
+    :where(.pmx-heading:hover, .pmx-heading:focus-within)
+      > :where(h1, h2, h3, h4, h5, h6) {
+      color: var(--pmx-color-link);
+    }
+
+    .pmx-heading:has(> .pmx-heading-anchor:focus-visible)
+      > :where(h1, h2, h3, h4, h5, h6) {
+      outline: 2px solid var(--pmx-color-focus);
+      outline-offset: 2px;
+      border-radius: var(--pmx-radius-sm);
+    }
+
+    > :where(p, ul, ol, blockquote, pre, table, figure, hr, .pmx-code-block) {
+      margin-block: var(--pmx-prose-flow);
+    }
+
+    :where(ul, ol) {
+      padding-inline-start: 1.5em;
+    }
+
+    :where(ul) {
+      list-style-type: disc;
+
+      :where(ul) {
+        list-style-type: circle;
+
+        :where(ul) {
+          list-style-type: square;
+        }
+      }
+    }
+
+    :where(ol) {
+      list-style-type: decimal;
+    }
+
+    > :where(ul, ol) :where(ul, ol) {
+      margin-block: 0.35em;
+    }
+
+    :where(li) {
+      margin-block: 0.3em;
+
+      &::marker {
+        color: var(--pmx-color-muted);
+      }
+    }
+
+    > :where(ul:has(> li.task-list-item), ol:has(> li.task-list-item)) {
+      padding-inline-start: 0;
+    }
+
+    :where(li.task-list-item) {
+      position: relative;
+      margin-block: 0.4em;
+      padding-inline-start: 1.6em;
+      list-style: none;
+
+      &::marker {
+        content: "";
+      }
+    }
+
+    :where(li.task-list-item > .task-list-item-checkbox:first-child) {
+      position: absolute;
+      inset-inline-start: 0;
+      inset-block-start: 0.27em;
+      inline-size: 1.05em;
+      block-size: 1.05em;
+      margin: 0;
+      accent-color: var(--pmx-color-accent);
+      opacity: 1;
+    }
+
+    :where(li.task-list-item > p) {
+      margin-block: 0.45em;
+    }
+
+    :where(li.task-list-item > p:first-of-type) {
+      margin-block-start: 0;
+    }
+
+    :where(li.task-list-item > p:last-of-type) {
+      margin-block-end: 0;
+    }
+
+    > :where(blockquote) {
+      border-inline-start: 0.25em solid var(--pmx-color-border);
+      color: var(--pmx-color-muted);
+      padding-inline-start: 1em;
+    }
+
+    :where(table) {
+      display: block;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      overflow-x: auto;
+      overscroll-behavior-inline: contain;
+      -webkit-overflow-scrolling: touch;
+      border-collapse: collapse;
+    }
+
+    :where(th, td) {
+      padding: 0.55em 0.7em;
+      border-bottom: 1px solid var(--pmx-color-border);
+      vertical-align: top;
+    }
+
+    :where(th) {
+      font-weight: 650;
+      text-align: start;
+      white-space: nowrap;
+    }
+
+    :where(tr > :first-child) {
+      position: sticky;
+      inset-inline-start: 0;
+      z-index: 1;
+      background: var(--pmx-color-bg);
+      border-inline-end: 1px solid var(--pmx-color-border);
+    }
+
+    :where(thead tr > :first-child) {
+      z-index: 2;
+    }
+
+    @media (max-width: 40rem) {
+      :where(tr > :first-child) {
+        min-inline-size: 8rem;
+      }
+
+      :where(tr > :not(:first-child)) {
+        min-inline-size: 12rem;
+      }
+    }
+
+    > :where(hr) {
+      border: 0;
+      border-block-start: 1px solid var(--pmx-color-border);
+    }
+
+    :where(a) {
+      color: var(--pmx-color-link);
+      text-decoration-line: underline;
+      text-decoration-color: color-mix(
+        in srgb,
+        var(--pmx-color-link) 45%,
+        transparent
+      );
+      text-decoration-thickness: 0.08em;
+      text-underline-offset: 0.16em;
+
+      &:hover {
+        text-decoration-color: currentColor;
+      }
+    }
+
+    :where(mark) {
+      background: color-mix(in oklch, var(--pmx-color-accent) 88%, transparent);
+      color: inherit;
+    }
+
+    :where(figcaption) {
+      color: var(--pmx-color-muted);
+      font-size: 0.92em;
+    }
+
+    :where(img) {
+      max-inline-size: 100%;
+      height: auto;
+      border-radius: var(--pmx-radius);
+    }
+
+    :where(.pmx-mermaid) {
+      overflow-x: auto;
+    }
+
+    :where(.pmx-mermaid svg) {
+      display: block;
+      max-inline-size: 100%;
+      block-size: auto;
+      margin-inline: auto;
+    }
+
+    :where(code) {
+      font-family: var(--pmx-font-mono);
+      font-size: 0.92em;
+      background: var(--pmx-code-bg);
+      color: var(--pmx-code-fg);
+      border: 1px solid var(--pmx-color-border);
+      border-radius: calc(var(--pmx-radius) * 0.65);
+      padding: 0.08em 0.3em;
+    }
+
+    :where(pre, .pmx-code-block) :where(code) {
+      font-size: 0.9em;
+      background: transparent;
+      border: 0;
+      border-radius: 0;
+      padding: 0;
+    }
+  }
+}

package/plugins/theme/scheme.js

@@ -0,0 +1,63 @@
+import "./toggle.css"
+
+const SCHEME_COOKIE = "pathmx-scheme"
+const TOGGLE = ".pmx-scheme-toggle"
+
+const labels = {
+  light: "Using light color scheme. Activate for dark.",
+  dark: "Using dark color scheme. Activate for light.",
+}
+
+function themeColors() {
+  return [...document.querySelectorAll('meta[name="theme-color"]')].map(
+    (meta) => ({
+      meta,
+      content: meta.getAttribute("content") || "",
+      media: meta.getAttribute("media") || "",
+    }),
+  )
+}
+
+function applyThemeColors(scheme) {
+  const colors = themeColors()
+  const light = colors.find((item) => item.media.includes("light"))
+  const dark = colors.find((item) => item.media.includes("dark"))
+  const active = scheme === "dark" ? dark?.content : light?.content
+  for (const item of colors) {
+    item.meta.setAttribute("content", active ?? item.content)
+  }
+}
+
+function resolvedScheme() {
+  const forced = document.documentElement.getAttribute("data-pmx-scheme")
+  if (forced === "light" || forced === "dark") return forced
+  return matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+}
+
+function syncToggles(scheme) {
+  const label = labels[scheme]
+  for (const button of document.querySelectorAll(TOGGLE)) {
+    button.setAttribute("aria-label", label)
+    button.title = label
+  }
+}
+
+function applyScheme(scheme) {
+  const root = document.documentElement
+  root.setAttribute("data-pmx-scheme", scheme)
+  root.style.colorScheme = scheme
+  document.cookie =
+    SCHEME_COOKIE + "=" + scheme + "; Path=/; Max-Age=31536000; SameSite=Lax"
+  applyThemeColors(scheme)
+  syncToggles(scheme)
+}
+
+document.addEventListener("click", (event) => {
+  const button =
+    event.target instanceof Element ? event.target.closest(TOGGLE) : null
+  if (!button) return
+  applyScheme(resolvedScheme() === "dark" ? "light" : "dark")
+})
+document.addEventListener("pmx:render", () => syncToggles(resolvedScheme()))
+
+syncToggles(resolvedScheme())

package/plugins/theme/toggle.css

@@ -0,0 +1,44 @@
+.pmx-scheme-toggle {
+  display: inline-grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 1px solid var(--pmx-color-border);
+  border-radius: var(--pmx-radius-full);
+  background: var(--pmx-color-bg);
+  color: inherit;
+  cursor: pointer;
+}
+
+.pmx-scheme-toggle:focus-visible {
+  outline: 2px solid var(--pmx-color-focus);
+  outline-offset: 2px;
+}
+
+.pmx-scheme-toggle [data-pmx-scheme-icon] {
+  display: none;
+}
+
+:root[data-pmx-scheme="light"]
+  .pmx-scheme-toggle
+  [data-pmx-scheme-icon="light"],
+:root[data-pmx-scheme="dark"] .pmx-scheme-toggle [data-pmx-scheme-icon="dark"] {
+  display: block;
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not([data-pmx-scheme])
+    .pmx-scheme-toggle
+    [data-pmx-scheme-icon="light"] {
+    display: block;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-pmx-scheme])
+    .pmx-scheme-toggle
+    [data-pmx-scheme-icon="dark"] {
+    display: block;
+  }
+}

package/plugins/theme/view-transition.css

@@ -0,0 +1,68 @@
+:root {
+  --pmx-view-transition-duration: 220ms;
+  --pmx-view-transition-easing: ease;
+  --pmx-view-transition-distance: 1.25rem;
+}
+
+@keyframes pmx-view-out-forward {
+  to {
+    opacity: 0;
+    transform: translateX(calc(-1 * var(--pmx-view-transition-distance)));
+  }
+}
+
+@keyframes pmx-view-in-forward {
+  from {
+    opacity: 0;
+    transform: translateX(var(--pmx-view-transition-distance));
+  }
+}
+
+@keyframes pmx-view-out-back {
+  to {
+    opacity: 0;
+    transform: translateX(var(--pmx-view-transition-distance));
+  }
+}
+
+@keyframes pmx-view-in-back {
+  from {
+    opacity: 0;
+    transform: translateX(calc(-1 * var(--pmx-view-transition-distance)));
+  }
+}
+
+html:active-view-transition-type(pmx-forward) ::view-transition-old(root),
+html:active-view-transition-type(pmx-forward) ::view-transition-new(root),
+html:active-view-transition-type(pmx-back) ::view-transition-old(root),
+html:active-view-transition-type(pmx-back) ::view-transition-new(root) {
+  mix-blend-mode: normal;
+}
+
+html:active-view-transition-type(pmx-forward) ::view-transition-old(root) {
+  animation: var(--pmx-view-transition-duration)
+    var(--pmx-view-transition-easing) both pmx-view-out-forward;
+}
+
+html:active-view-transition-type(pmx-forward) ::view-transition-new(root) {
+  animation: var(--pmx-view-transition-duration)
+    var(--pmx-view-transition-easing) both pmx-view-in-forward;
+}
+
+html:active-view-transition-type(pmx-back) ::view-transition-old(root) {
+  animation: var(--pmx-view-transition-duration)
+    var(--pmx-view-transition-easing) both pmx-view-out-back;
+}
+
+html:active-view-transition-type(pmx-back) ::view-transition-new(root) {
+  animation: var(--pmx-view-transition-duration)
+    var(--pmx-view-transition-easing) both pmx-view-in-back;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}

package/plugins/toc/client.ts

@@ -0,0 +1,146 @@
+import "./theme.css"
+
+type ScrollSpyState = {
+  links: HTMLAnchorElement[]
+  targets: HTMLElement[]
+  offsets: number[]
+  activeLine: number
+}
+
+type TocState = {
+  toc: HTMLElement
+  spy?: ScrollSpyState
+}
+
+const supportsNativeScrollSpy =
+  CSS.supports("scroll-target-group: auto") &&
+  CSS.supports("selector(a:target-current)") &&
+  CSS.supports("selector(a:target-before)")
+const states = new Map<HTMLElement, TocState>()
+
+function targetFor(link: HTMLAnchorElement) {
+  const hash = new URL(link.href).hash.slice(1)
+  if (!hash) return
+  try {
+    return document.getElementById(decodeURIComponent(hash)) ?? undefined
+  } catch {
+    return
+  }
+}
+
+function updateScrollSpy(spy: ScrollSpyState) {
+  const atEnd =
+    scrollY > 0 &&
+    scrollY + innerHeight >= document.documentElement.scrollHeight - 1
+  const position = scrollY + spy.activeLine
+  let low = 0
+  let high = spy.offsets.length
+  while (low < high) {
+    const middle = (low + high) >>> 1
+    if (spy.offsets[middle]! <= position) low = middle + 1
+    else high = middle
+  }
+  const active = atEnd ? spy.links.length - 1 : Math.max(0, low - 1)
+
+  for (const [index, link] of spy.links.entries()) {
+    const value =
+      index < active ? "passed" : index === active ? "active" : "upcoming"
+    link.dataset.pmxTocState = value
+    if (value === "active") link.setAttribute("aria-current", "location")
+    else link.removeAttribute("aria-current")
+  }
+}
+
+function measure(state: TocState) {
+  const rootStyle = getComputedStyle(document.documentElement)
+  const blockEnd = Number.parseFloat(rootStyle.scrollPaddingBlockEnd) || 0
+  const available = Math.max(
+    0,
+    innerHeight - Math.max(0, state.toc.getBoundingClientRect().top) - blockEnd,
+  )
+  state.toc.style.setProperty(
+    "--pmx-toc-available-block-size",
+    `${available}px`,
+  )
+
+  if (!state.spy) return
+  const scrollOffset = Number.parseFloat(rootStyle.scrollPaddingBlockStart)
+  state.spy.activeLine = Math.max(
+    Number.isFinite(scrollOffset) ? scrollOffset : 0,
+    Math.min(160, Math.max(64, innerHeight * 0.2)),
+  )
+  state.spy.offsets = state.spy.targets.map(
+    (target) => target.getBoundingClientRect().top + scrollY,
+  )
+  updateScrollSpy(state.spy)
+}
+
+function initialize(toc: HTMLElement) {
+  if (states.has(toc)) return
+  let spy: ScrollSpyState | undefined
+  if (!supportsNativeScrollSpy) {
+    const pairs = [...toc.querySelectorAll<HTMLAnchorElement>(".pmx-toc-link")]
+      .map((link) => ({ link, target: targetFor(link) }))
+      .filter(
+        (pair): pair is { link: HTMLAnchorElement; target: HTMLElement } =>
+          pair.target != null,
+      )
+    if (pairs.length) {
+      spy = {
+        links: pairs.map(({ link }) => link),
+        targets: pairs.map(({ target }) => target),
+        offsets: [],
+        activeLine: 0,
+      }
+    }
+  }
+  const state = { toc, spy }
+  states.set(toc, state)
+  measure(state)
+}
+
+function reconcile() {
+  for (const toc of states.keys()) {
+    if (!toc.isConnected) states.delete(toc)
+  }
+  for (const toc of document.querySelectorAll<HTMLElement>("[data-pmx-toc]")) {
+    initialize(toc)
+  }
+}
+
+let measureFrame = 0
+function scheduleMeasure() {
+  if (measureFrame) return
+  measureFrame = requestAnimationFrame(() => {
+    measureFrame = 0
+    for (const state of states.values()) measure(state)
+  })
+}
+
+if (!supportsNativeScrollSpy) {
+  let scrollFrame = 0
+  addEventListener(
+    "scroll",
+    () => {
+      if (scrollFrame) return
+      scrollFrame = requestAnimationFrame(() => {
+        scrollFrame = 0
+        for (const { spy } of states.values()) {
+          if (spy) updateScrollSpy(spy)
+        }
+      })
+    },
+    { passive: true },
+  )
+}
+
+const layoutObserver = new ResizeObserver(scheduleMeasure)
+layoutObserver.observe(document.body)
+addEventListener("resize", scheduleMeasure)
+document.addEventListener("pmx:render", () =>
+  requestAnimationFrame(() => {
+    states.clear()
+    reconcile()
+  }),
+)
+reconcile()