@pathmx/player 0.5.0

package/navigation.ts

@@ -0,0 +1,97 @@
+import type { PlayIntensity, PlayMode, PlayThemeChoice } from "./controls.ts"
+
+type PlayLinkState = {
+  mode: PlayMode
+  intensity: PlayIntensity
+  theme: PlayThemeChoice
+  guide: boolean
+  notes: boolean
+}
+
+type BeatFragmentNavigation = (fragment: string) => boolean
+
+function decodedFragment(url: URL) {
+  if (!url.hash) return
+  try {
+    return decodeURIComponent(url.hash.slice(1)) || undefined
+  } catch {
+    return
+  }
+}
+
+function eligibleLink(event: MouseEvent) {
+  if (
+    event.defaultPrevented ||
+    event.button !== 0 ||
+    event.metaKey ||
+    event.ctrlKey ||
+    event.shiftKey ||
+    event.altKey
+  ) {
+    return
+  }
+  const target = event.target
+  if (!(target instanceof Element)) return
+  const link = target.closest<HTMLAnchorElement>("a[href]")
+  if (
+    !link ||
+    link.download ||
+    (link.target && link.target !== "_self") ||
+    link.relList.contains("external")
+  ) {
+    return
+  }
+  return link
+}
+
+/** Carry an active Play session across ordinary same-origin Source links. */
+export function installPlayLinkContinuation(
+  current: () => PlayLinkState | undefined,
+  navigateToBeat?: BeatFragmentNavigation,
+) {
+  document.addEventListener(
+    "click",
+    (event) => {
+      if (!(event instanceof MouseEvent)) return
+      const state = current()
+      const link = state && eligibleLink(event)
+      if (!link) return
+
+      const destination = new URL(link.href, location.href)
+      if (
+        destination.origin !== location.origin ||
+        destination.pathname.endsWith(".md") ||
+        destination.pathname.startsWith("/.pmx/") ||
+        destination.pathname.startsWith("/actions/")
+      ) {
+        return
+      }
+      if (
+        destination.pathname === location.pathname &&
+        destination.search === location.search
+      ) {
+        const fragment = decodedFragment(destination)
+        if (fragment && navigateToBeat?.(fragment)) event.preventDefault()
+        return
+      }
+
+      destination.searchParams.set("play", state.mode)
+      destination.searchParams.set("intensity", state.intensity)
+      if (state.theme === "source")
+        destination.searchParams.delete("play-theme")
+      else destination.searchParams.set("play-theme", state.theme)
+      if (state.guide) destination.searchParams.delete("play-guide")
+      else destination.searchParams.set("play-guide", "off")
+      if (state.notes) destination.searchParams.delete("play-notes")
+      else destination.searchParams.set("play-notes", "off")
+      const authoredHref = link.getAttribute("href")
+      link.href = destination.href
+      setTimeout(() => {
+        if (!link.isConnected) return
+        if (authoredHref === null) link.removeAttribute("href")
+        else link.setAttribute("href", authoredHref)
+      })
+    },
+    { capture: true },
+  )
+}

package/notes.css

@@ -0,0 +1,65 @@
+.pmx-play-note {
+  position: fixed;
+  z-index: 999;
+  right: max(1rem, env(safe-area-inset-right));
+  bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 3.25rem);
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: 0.7rem;
+  box-sizing: border-box;
+  width: min(25rem, calc(100vw - 2rem));
+  max-height: min(34vh, 18rem);
+  padding: 0.85rem 1rem;
+  overflow-y: auto;
+  border: 1px solid
+    color-mix(in oklab, var(--pmx-color-border, currentColor) 78%, transparent);
+  border-radius: 0.85rem;
+  color: var(--pmx-color-fg, CanvasText);
+  background: color-mix(
+    in oklab,
+    var(--pmx-color-surface, Canvas) 94%,
+    transparent
+  );
+  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 14%);
+  font: 520 0.875rem/1.45 var(--pmx-font-body, system-ui, sans-serif);
+  backdrop-filter: blur(14px);
+  animation: pmx-play-note-in 180ms ease-out;
+}
+
+.pmx-play-note > svg {
+  width: 1rem;
+  height: 1rem;
+  margin-block-start: 0.2rem;
+  color: var(--pmx-color-accent, #3897ff);
+}
+
+.pmx-play-note p {
+  margin: 0;
+}
+
+.pmx-play-note p + p {
+  margin-block-start: 0.65rem;
+}
+
+@keyframes pmx-play-note-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.35rem);
+  }
+}
+
+@media (max-width: 42rem), (pointer: coarse) {
+  .pmx-play-note {
+    right: max(0.75rem, env(safe-area-inset-right));
+    bottom: calc(max(0.75rem, env(safe-area-inset-bottom)) + 3.5rem);
+    width: min(24rem, calc(100vw - 1.5rem));
+    max-height: min(30vh, 14rem);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pmx-play-note {
+    animation: none;
+  }
+}

package/notes.ts

@@ -0,0 +1,10 @@
+const NOTE_PARAGRAPH = /<p>\s*\^\s+([\s\S]*?)<\/p>/gi
+
+/** Compile Deckset-style caret paragraphs into hidden Player note metadata. */
+export function rewritePlayNotes(html: string) {
+  if (!html.includes("^")) return html
+  return html.replace(
+    NOTE_PARAGRAPH,
+    "<aside data-pmx-play-note hidden>$1</aside>",
+  )
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@pathmx/player",
+  "description": "Focused reading and presentation experiences for PathMX.",
+  "version": "0.5.0",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pathmx/pathmx-beta.git",
+    "directory": "paths/player"
+  },
+  "homepage": "https://github.com/pathmx/pathmx-beta#readme",
+  "bugs": "https://github.com/pathmx/pathmx-beta/issues",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/",
+    "tag": "beta"
+  },
+  "type": "module",
+  "exports": "./index.ts",
+  "engines": {
+    "bun": ">=1.4.0"
+  },
+  "peerDependencies": {
+    "@pathmx/core": "^0.5.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
+  "dependencies": {
+    "@pathmx/react": "0.5.0",
+    "lucide-react": "^1.34.0"
+  }
+}