@pathmx/mermaid 0.5.0

package/LICENSE

@@ -0,0 +1,43 @@
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS
+ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THE
+SOFTWARE.

package/LICENSE.md

@@ -0,0 +1,172 @@
+# PathMX Proprietary Beta License
+
+Version 0.1 — July 21, 2026
+
+Copyright © 2026 DUO Interactive, LLC.
+All rights reserved.
+
+This license governs the first-party PathMX software distributed in the npm
+package `@pathmx/core`, including its command-line interface, bundled
+library surfaces, runtime and Player components, and accompanying
+documentation (the “Software”). DUO Interactive, LLC is the “Licensor.” This
+license does not cover the private PathMX source-code repository or separately
+identified third-party materials.
+
+“Project” means Paths, Sources, responses, data, and other content authored or
+processed with the Software.
+
+“Application” means software or a service created by you in which the Software
+supports product-specific functionality but is not itself offered as a
+general-purpose PathMX product.
+
+“Redistributable Components” means runtime, Player, or library portions of the
+Software incorporated into a Project, Application, or generated output through
+ordinary use of the Software or ordinary compilation and bundling tools.
+
+“Authorized Users” means your employees and individual contractors who use the
+Software on your behalf, and your hosting, continuous-integration, and other
+service providers that possess or run necessary copies solely to provide
+services to you.
+
+## 1. Agreement
+
+By installing, accessing, or using the Software, you agree to this license. If
+you use the Software on behalf of an organization, you represent that you have
+authority to accept this license for that organization. If you do not agree,
+do not install or use the Software.
+
+## 2. License grant
+
+Subject to this license, the Licensor grants you a non-exclusive, worldwide,
+royalty-free, non-transferable, and non-sublicensable license, perpetual for
+the version of the Software to which it applies unless terminated under
+Section 10, to:
+
+- install, execute, and use the Software for personal, educational,
+  internal-business, or commercial purposes;
+- use the Software to author, integrate, build, test, serve, play, host, and
+  operate Projects and Applications;
+- import, compile, bundle, configure, and integrate the Software through its
+  documented library and command-line interfaces;
+- create and distribute independent Projects, Applications, plugins, and
+  integrations that use those interfaces without modifying the Software
+  itself; and
+- make copies reasonably necessary for local development, testing, continuous
+  integration, backup, and hosted production environments.
+
+Your Authorized Users may exercise those rights solely on your behalf. You are
+responsible for their compliance with this license.
+
+You may reproduce and distribute Redistributable Components only as
+incorporated into your Project, Application, or generated output, and only when
+you preserve applicable license and proprietary notices. You may host and
+commercially provide access to that Project, Application, or output. You may
+not distribute Redistributable Components as a standalone package or as a
+general-purpose substitute for the Software.
+
+Each lawful recipient of a Redistributable Component may execute and use that
+component, display its output, and make technically necessary transitory copies
+solely as incorporated into the Project, Application, or output in which they
+received it. This limited recipient permission does not include a right to
+extract, modify, or redistribute the component separately.
+
+## 3. Restrictions
+
+Except where applicable law does not allow the restriction, you may not:
+
+- modify, adapt, translate, or create derivative works of the Software, except
+  for the compilation, bundling, configuration, and integration expressly
+  permitted in Section 2;
+- redistribute, sublicense, sell, lease, or otherwise provide the Software to
+  another person as a standalone package, product, or service except to an
+  Authorized User or as a Redistributable Component under Section 2;
+- resell, rebrand, or provide the Software as a hosted or managed service that
+  gives third parties general-purpose access to substantial PathMX authoring,
+  building, serving, Player-administration, or library functionality for their
+  own unrelated projects;
+- reverse engineer, decompile, disassemble, or otherwise attempt to derive the
+  source code of the Software; or
+- remove or alter copyright, license, trademark, or other proprietary notices.
+
+For clarity, the managed-service restriction does not prohibit a hosted
+Project or Application in which PathMX supports the licensee's own
+product-specific experience and is not itself the general-purpose product
+offered to customers.
+
+## 4. Your content
+
+As between you and the Licensor, you retain ownership of the Paths, Sources,
+responses, data, independent application code, and other content that you
+author or provide while using the Software. You are responsible for that
+content and for having the rights needed to use it.
+
+Generated output may contain Redistributable Components or third-party
+materials. Your ownership of your content does not change the ownership or
+license terms of those components and materials.
+
+## 5. Ownership and trademarks
+
+The Software is licensed, not sold. The Licensor and its suppliers retain all
+rights in the Software not expressly granted by this license. This license
+does not grant permission to use the PathMX name, logos, or other marks except
+as reasonably necessary to identify the Software accurately.
+
+## 6. Beta status and changes
+
+The Software is a proprietary beta release. Its APIs, behavior, file formats,
+and features may change or be removed without notice. The Licensor has no
+obligation to provide support, maintenance, updates, continued availability,
+or backward compatibility. A later version may be offered under different
+license terms, including an open-source license. Different terms for a later
+version do not change the license previously granted for an earlier version.
+
+## 7. Third-party materials
+
+The Software and Redistributable Components may include or depend on
+third-party materials governed by their own license terms. Those terms control
+for the applicable third-party materials. You must preserve third-party notices
+when the applicable third-party terms require it.
+
+## 8. Disclaimer of warranties
+
+TO THE MAXIMUM EXTENT PERMITTED BY LAW, THE SOFTWARE IS PROVIDED “AS IS” AND
+“AS AVAILABLE,” WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EXPRESS,
+IMPLIED, OR STATUTORY, INCLUDING WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE, TITLE, NON-INFRINGEMENT, OR THAT THE SOFTWARE WILL BE
+SECURE, ERROR-FREE, OR UNINTERRUPTED.
+
+## 9. Limitation of liability
+
+TO THE MAXIMUM EXTENT PERMITTED BY LAW, THE LICENSOR AND ITS CONTRIBUTORS,
+SUPPLIERS, AND AFFILIATES WILL NOT BE LIABLE FOR ANY INDIRECT, INCIDENTAL,
+SPECIAL, CONSEQUENTIAL, EXEMPLARY, OR PUNITIVE DAMAGES, OR FOR LOSS OF DATA,
+PROFITS, REVENUE, GOODWILL, OR BUSINESS OPPORTUNITY, ARISING FROM OR RELATED TO
+THE SOFTWARE OR THIS LICENSE, EVEN IF ADVISED OF THE POSSIBILITY OF THOSE
+DAMAGES.
+
+TO THE MAXIMUM EXTENT PERMITTED BY LAW, THEIR TOTAL LIABILITY FOR ALL CLAIMS
+ARISING FROM OR RELATED TO THE SOFTWARE OR THIS LICENSE WILL NOT EXCEED THE
+GREATER OF THE AMOUNT YOU PAID FOR THE SOFTWARE DURING THE TWELVE MONTHS BEFORE
+THE EVENT GIVING RISE TO THE CLAIM OR US$100.
+
+## 10. Termination
+
+This license terminates if you materially breach it and do not cure the breach
+within thirty days after receiving written notice from the Licensor. On
+termination, you and your Authorized Users must stop using and delete your
+copies of the Software. Sections 4, 5, 8, 9, 10, and 11 survive termination.
+Termination does not withdraw the limited permission already granted by
+Section 2 to lawful recipients of Redistributable Components distributed
+before termination.
+
+## 11. General
+
+If a provision of this license is unenforceable, it will be modified only to
+the minimum extent necessary to make it enforceable, and the remaining
+provisions will continue in effect. Failure to enforce a provision is not a
+waiver. You may not assign or transfer this license without the Licensor's
+written consent. The Licensor may assign this license together with ownership
+of the Software to a successor owner. This license binds and benefits the
+permitted successors and assigns of you and the Licensor. This license is the
+entire agreement concerning the Software unless you and the Licensor have
+signed a separate agreement that expressly replaces it.

package/README.md

@@ -0,0 +1,23 @@
+# @pathmx/mermaid
+
+Opt-in Mermaid diagram rendering for PathMX. The base package accepts any
+renderer; the `beautiful` subpath supplies the pinned Beautiful Mermaid
+adapter and loads it only when a Mermaid fence is compiled.
+
+```ts
+import { BeautifulMermaidPlugin } from "@pathmx/mermaid/beautiful"
+import { PathMX } from "@pathmx/core/bun"
+import { defaultPlugins } from "@pathmx/core/plugins"
+
+const app = await PathMX({
+  plugins: [BeautifulMermaidPlugin, ...defaultPlugins],
+})
+```
+
+Use a custom renderer through the base entrypoint:
+
+```ts
+import { MermaidPlugin } from "@pathmx/mermaid"
+
+const plugin = () => MermaidPlugin(async (code) => renderDiagram(code))
+```

package/beautiful.ts

@@ -0,0 +1,26 @@
+import type { RenderOptions } from "beautiful-mermaid"
+import { MermaidPlugin, type MermaidRenderer } from "./index.ts"
+
+const options: RenderOptions = {
+  bg: "var(--pmx-color-bg)",
+  fg: "var(--pmx-color-fg)",
+  accent: "var(--pmx-color-accent)",
+  muted: "var(--pmx-color-muted)",
+  surface: "var(--pmx-color-surface)",
+  border: "var(--pmx-color-border)",
+  font: "var(--pmx-font-body)",
+  transparent: true,
+}
+
+let module: Promise<typeof import("beautiful-mermaid")> | undefined
+
+export const beautifulMermaidRenderer: MermaidRenderer = async (code) => {
+  module ??= import("beautiful-mermaid")
+  const { renderMermaidSVG } = await module
+  return renderMermaidSVG(code, options)
+}
+
+/** Ready-to-use Mermaid Plugin backed by the lazy-loaded Beautiful Mermaid renderer. */
+export function BeautifulMermaidPlugin() {
+  return MermaidPlugin(beautifulMermaidRenderer)
+}

package/client.ts

@@ -0,0 +1,81 @@
+import "./theme.css"
+import { xIconSvg } from "./icons.ts"
+
+const readyClass = "pmx-mermaid-lightbox-ready"
+const openClass = "pmx-mermaid-lightbox-open"
+
+declare global {
+  interface Window {
+    __pathmxMermaidLightboxInstalled?: boolean
+  }
+}
+
+let dialog: HTMLDialogElement | undefined
+let content: HTMLElement | undefined
+let opener: HTMLElement | undefined
+
+function ensureDialog() {
+  if (dialog?.isConnected && content) return dialog
+
+  dialog = document.createElement("dialog")
+  dialog.className = "pmx-mermaid-lightbox"
+  dialog.dataset.pmxMermaidLightbox = ""
+  dialog.setAttribute("aria-label", "Expanded Mermaid diagram")
+  dialog.innerHTML = `<div class="pmx-mermaid-lightbox-panel"><button class="pmx-mermaid-lightbox-close" type="button" aria-label="Close expanded diagram" title="Close" autofocus>${xIconSvg}</button><div class="pmx-mermaid-lightbox-content" data-pmx-mermaid-lightbox-content></div></div>`
+  content = dialog.querySelector<HTMLElement>(
+    "[data-pmx-mermaid-lightbox-content]",
+  )!
+
+  dialog.addEventListener("click", (event) => {
+    if (event.target === dialog) dialog?.close()
+  })
+  dialog.addEventListener("close", () => {
+    document.documentElement.classList.remove(openClass)
+    content?.replaceChildren()
+    const returnTo = opener
+    opener = undefined
+    if (returnTo?.isConnected) returnTo.focus()
+  })
+  document.body.append(dialog)
+  return dialog
+}
+
+function openDiagram(button: Element) {
+  const figure = button.closest("[data-pmx-mermaid]")
+  const svg = figure?.querySelector(":scope > svg")
+  if (!(svg instanceof SVGElement)) return
+
+  const modal = ensureDialog()
+  const clone = svg.cloneNode(true) as SVGElement
+  clone.setAttribute("aria-hidden", "true")
+  content?.replaceChildren(clone)
+  opener = button instanceof HTMLElement ? button : undefined
+  document.documentElement.classList.add(openClass)
+  if (!modal.open) modal.showModal()
+}
+
+if (!window.__pathmxMermaidLightboxInstalled) {
+  window.__pathmxMermaidLightboxInstalled = true
+  document.documentElement.classList.add(readyClass)
+  document.addEventListener("click", (event) => {
+    const target = event.target
+    if (!(target instanceof Element)) return
+
+    const close = target.closest(".pmx-mermaid-lightbox-close")
+    if (close) {
+      dialog?.close()
+      return
+    }
+
+    const expand = target.closest(".pmx-mermaid-expand")
+    if (expand) openDiagram(expand)
+  })
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape" || !dialog?.open) return
+    event.preventDefault()
+    dialog.close()
+  })
+  document.addEventListener("pmx:render", () => {
+    if (dialog?.open) dialog.close()
+  })
+}

package/icons.ts

@@ -0,0 +1,6 @@
+/** Generated by scripts/generate-lucide-icons.ts from @lucide/icons v1.34.0. */
+export const expandIconSvg =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-expand" aria-hidden="true" focusable="false"><path d="m15 15 6 6"></path><path d="m15 9 6-6"></path><path d="M21 16v5h-5"></path><path d="M21 8V3h-5"></path><path d="M3 16v5h5"></path><path d="m3 21 6-6"></path><path d="M3 8V3h5"></path><path d="M9 9 3 3"></path></svg>'
+
+export const xIconSvg =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true" focusable="false"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>'

package/index.ts

@@ -0,0 +1,99 @@
+import {
+  isFenceClose,
+  matchFenceOpen,
+  type AppContext,
+  type Plugin,
+} from "@pathmx/core"
+import { expandIconSvg } from "./icons.ts"
+
+type Awaitable<T> = T | Promise<T>
+type CompileContext = Parameters<NonNullable<Plugin["precompile"]>>[1]
+
+export type MermaidRenderer = (code: string) => Awaitable<string>
+
+const SLOT = /<div data-pmx-mermaid-slot="(\d+)"><\/div>/g
+const clientEntry = new URL("./client.ts", import.meta.url)
+
+function renderError(error: unknown) {
+  return error instanceof Error ? error.message : String(error)
+}
+
+async function stashMermaid(
+  markdown: string,
+  ctx: CompileContext,
+  app: AppContext,
+  render: MermaidRenderer,
+) {
+  if (!/mermaid/i.test(markdown)) return markdown
+
+  const lines = markdown.split(/\r?\n/)
+  const output: string[] = []
+
+  for (let index = 0; index < lines.length; index++) {
+    const line = lines[index] ?? ""
+    const fence = matchFenceOpen(line)
+    if (!fence) {
+      output.push(line)
+      continue
+    }
+
+    let close = index + 1
+    while (close < lines.length && !isFenceClose(lines[close]!, fence.marker))
+      close++
+    if (close === lines.length) {
+      output.push(...lines.slice(index))
+      break
+    }
+
+    const fenced = lines.slice(index, close + 1)
+    const language = fence.info.split(/\s+/, 1)[0]?.toLowerCase()
+    if (language !== "mermaid") {
+      output.push(...fenced)
+      index = close
+      continue
+    }
+
+    const code = lines.slice(index + 1, close).join("\n")
+    try {
+      const svg = await render(code)
+      const slot =
+        ctx.slots.push(
+          `<figure class="pmx-mermaid" data-pmx-mermaid><button class="pmx-mermaid-expand" type="button" aria-label="View diagram larger" aria-haspopup="dialog" title="View diagram larger">${expandIconSvg}</button>${svg}</figure>`,
+        ) - 1
+      output.push(`${fence.indent}<div data-pmx-mermaid-slot="${slot}"></div>`)
+    } catch (error) {
+      app.log.warn("render", {
+        source: ctx.source.id,
+        block: ctx.block?.id,
+        error: renderError(error),
+      })
+      output.push(...fenced)
+    }
+    index = close
+  }
+
+  return output.join("\n")
+}
+
+export function MermaidPlugin(render: MermaidRenderer): Plugin {
+  return {
+    id: "mermaid",
+    precompile(markdown, ctx, app) {
+      return stashMermaid(markdown, ctx, app, render)
+    },
+
+    postcompile(html, ctx) {
+      if (!html.includes("data-pmx-mermaid-slot")) return html
+      return html.replace(
+        SLOT,
+        (match, index: string) => ctx.slots[Number(index)] ?? match,
+      )
+    },
+
+    async page(html, ctx) {
+      if (!html.includes("data-pmx-mermaid")) return html
+      await ctx.addBrowserBundle(clientEntry, "mermaid-lightbox")
+      return html
+    },
+  }
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@pathmx/mermaid",
+  "description": "Mermaid diagram plugins and renderers 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": "pathmx/mermaid"
+  },
+  "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",
+    "./beautiful": "./beautiful.ts"
+  },
+  "engines": {
+    "bun": ">=1.4.0"
+  },
+  "peerDependencies": {
+    "@pathmx/core": "^0.5.0"
+  },
+  "dependencies": {
+    "beautiful-mermaid": "1.1.3"
+  }
+}

package/theme.css

@@ -0,0 +1,120 @@
+.pmx-mermaid {
+  position: relative;
+}
+
+.pmx-mermaid-expand {
+  position: absolute;
+  z-index: 1;
+  inset-block-start: 0.5rem;
+  inset-inline-end: 0.5rem;
+  display: none;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  margin-block-end: -1.75rem;
+  padding: 0;
+  place-items: center;
+  border: 1px solid var(--pmx-color-border);
+  border-radius: calc(var(--pmx-radius) * 0.75);
+  background: color-mix(in oklch, var(--pmx-color-bg) 90%, transparent);
+  color: var(--pmx-color-muted);
+  box-shadow: 0 1px 4px
+    color-mix(in oklch, var(--pmx-color-fg) 12%, transparent);
+  cursor: zoom-in;
+}
+
+.pmx-mermaid-lightbox-ready .pmx-mermaid-expand {
+  display: grid;
+}
+
+.pmx-mermaid-expand:hover,
+.pmx-mermaid-expand:focus-visible {
+  color: var(--pmx-color-fg);
+  border-color: var(--pmx-color-accent);
+}
+
+.pmx-mermaid-expand:focus-visible,
+.pmx-mermaid-lightbox-close:focus-visible {
+  outline: 2px solid var(--pmx-color-focus);
+  outline-offset: 2px;
+}
+
+.pmx-mermaid-lightbox {
+  inline-size: min(96vw, 100rem);
+  max-inline-size: none;
+  block-size: min(92vh, 72rem);
+  max-block-size: none;
+  margin: auto;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--pmx-color-border);
+  border-radius: calc(var(--pmx-radius) * 1.5);
+  background: var(--pmx-color-bg);
+  color: var(--pmx-color-fg);
+  box-shadow: 0 1.5rem 5rem color-mix(in oklch, black 35%, transparent);
+}
+
+.pmx-mermaid-lightbox::backdrop {
+  background: color-mix(in oklch, black 70%, transparent);
+  backdrop-filter: blur(4px);
+}
+
+.pmx-mermaid-lightbox-panel {
+  position: relative;
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+.pmx-mermaid-lightbox-content {
+  display: flex;
+  box-sizing: border-box;
+  min-inline-size: 100%;
+  min-block-size: 100%;
+  padding: clamp(2.5rem, 5vw, 5rem);
+  align-items: safe center;
+  justify-content: safe center;
+}
+
+.pmx-mermaid-lightbox-content svg {
+  display: block;
+  flex: none;
+  inline-size: min(86rem, 86vw);
+  max-inline-size: none;
+  block-size: auto;
+}
+
+.pmx-mermaid-lightbox-close {
+  position: sticky;
+  z-index: 2;
+  top: 0.75rem;
+  left: calc(100% - 3rem);
+  display: grid;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  margin-block-end: -3rem;
+  padding: 0;
+  place-items: center;
+  border: 1px solid var(--pmx-color-border);
+  border-radius: 50%;
+  background: var(--pmx-color-surface);
+  color: var(--pmx-color-fg);
+  cursor: pointer;
+}
+
+.pmx-mermaid-lightbox-open {
+  overflow: hidden;
+}
+
+@media (max-width: 40rem) {
+  .pmx-mermaid-lightbox {
+    inline-size: 100vw;
+    block-size: 100dvh;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .pmx-mermaid-lightbox-content {
+    padding: 3rem 1rem;
+  }
+}