@saasmakers/ui 1.4.38 → 1.4.40

package/app/types/global.d.ts

@@ -121,4 +121,4 @@ declare module 'vue' {
   }
 }
 
-export * from './bases'
+export {}

package/nuxt.config.ts

@@ -4,6 +4,7 @@ import { defineNuxtConfig } from 'nuxt/config'
 import uno from './uno.config.js'
 
 const currentDir = path.dirname(fileURLToPath(import.meta.url))
+const nuxtSeoPatchesDir = path.join(currentDir, 'server/patches/nuxt-seo')
 
 export default defineNuxtConfig({
   modules: [
@@ -117,4 +118,17 @@ export default defineNuxtConfig({
     shortcuts: uno.shortcuts,
     theme: uno.theme,
   },
+
+  // h3 v2 (Nuxt 4.4+) compatibility shims for @nuxtjs/robots and @nuxtjs/sitemap
+  nitro: {
+    alias: {
+      '@nuxtjs/robots/dist/runtime/server/middleware/injectContext.js': path.join(nuxtSeoPatchesDir, 'robots-injectContext.js'),
+      '@nuxtjs/sitemap/dist/runtime/server/routes/sitemap.xsl.js': path.join(nuxtSeoPatchesDir, 'routes/sitemap.xsl.js'),
+      '@nuxtjs/sitemap/dist/runtime/server/sitemap/builder/sitemap-index.js': path.join(nuxtSeoPatchesDir, 'sitemap/builder/sitemap-index.js'),
+      '@nuxtjs/sitemap/dist/runtime/server/sitemap/builder/sitemap.js': path.join(nuxtSeoPatchesDir, 'sitemap/builder/sitemap.js'),
+      '@nuxtjs/sitemap/dist/runtime/server/sitemap/event-handlers.js': path.join(nuxtSeoPatchesDir, 'sitemap/event-handlers.js'),
+      '@nuxtjs/sitemap/dist/runtime/server/sitemap/nitro.js': path.join(nuxtSeoPatchesDir, 'sitemap/nitro.js'),
+      '@nuxtjs/sitemap/dist/runtime/server/utils/h3-compat.js': path.join(nuxtSeoPatchesDir, 'utils/h3-compat.js'),
+    },
+  },
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "1.4.38",
+  "version": "1.4.40",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -8,56 +8,62 @@
   "sideEffects": false,
   "type": "module",
   "exports": {
-    ".": "./nuxt.config.ts"
+    ".": {
+      "types": "./app/types/global.d.ts",
+      "default": "./nuxt.config.ts"
+    }
   },
   "main": "nuxt.config.ts",
   "types": "app/types/global.d.ts",
   "files": [
     "app",
     "public",
+    "server",
     "uno.config.ts"
   ],
+  "scripts": {
+    "lint": "eslint . --max-warnings=0",
+    "prepare": "nuxi prepare",
+    "typecheck": "nuxi typecheck"
+  },
   "dependencies": {
-    "@capacitor/preferences": "8.0.1",
-    "@nuxt/icon": "2.2.3",
-    "@nuxt/scripts": "0.13.2",
-    "@nuxtjs/color-mode": "3.5.2",
-    "@nuxtjs/i18n": "10.4.0",
-    "@nuxtjs/plausible": "2.0.1",
-    "@nuxtjs/robots": "5.6.7",
-    "@nuxtjs/sitemap": "7.5.0",
-    "@pinia/nuxt": "0.11.3",
-    "@unhead/vue": "2.0.19",
-    "@unocss/nuxt": "66.7.0",
-    "@unocss/reset": "66.7.0",
-    "@vuelidate/core": "2.0.3",
-    "@vuelidate/validators": "2.0.4",
-    "@vueuse/components": "14.3.0",
-    "@vueuse/core": "14.3.0",
-    "@vueuse/nuxt": "14.3.0",
-    "chartist": "1.5.0",
-    "floating-vue": "5.2.2",
-    "motion-v": "1.7.4",
-    "numbro": "2.5.0",
-    "snarkdown": "2.0.0",
-    "unocss": "66.7.0",
-    "vue": "3.5.35",
-    "vue-router": "4.6.4"
+    "@capacitor/preferences": "catalog:",
+    "@nuxt/icon": "catalog:",
+    "@nuxt/scripts": "catalog:",
+    "@nuxtjs/color-mode": "catalog:",
+    "@nuxtjs/i18n": "catalog:",
+    "@nuxtjs/plausible": "catalog:",
+    "@nuxtjs/robots": "catalog:",
+    "@nuxtjs/sitemap": "catalog:",
+    "@pinia/nuxt": "catalog:",
+    "@unhead/vue": "catalog:",
+    "@unocss/nuxt": "catalog:",
+    "@unocss/reset": "catalog:",
+    "@vuelidate/core": "catalog:",
+    "@vuelidate/validators": "catalog:",
+    "@vueuse/components": "catalog:",
+    "@vueuse/core": "catalog:",
+    "@vueuse/nuxt": "catalog:",
+    "chartist": "catalog:",
+    "floating-vue": "catalog:",
+    "motion-v": "catalog:",
+    "numbro": "catalog:",
+    "pinia": "catalog:",
+    "snarkdown": "catalog:",
+    "unocss": "catalog:",
+    "vue": "catalog:",
+    "vue-router": "catalog:"
   },
   "devDependencies": {
-    "nuxt": "4.2.2",
-    "typescript": "5.9.3",
-    "@saasmakers/shared": "0.2.5"
+    "@saasmakers/shared": "workspace:*",
+    "nuxt": "catalog:",
+    "typescript": "catalog:"
   },
   "peerDependencies": {
     "@saasmakers/shared": "^0.2.0",
-    "nuxt": "4.2.2"
+    "nuxt": "^4.4.0"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "scripts": {
-    "lint": "eslint . --max-warnings=0",
-    "typecheck": "nuxi typecheck"
   }
-}
+}

package/server/patches/nuxt-seo/robots-injectContext.js

@@ -0,0 +1,35 @@
+import { defineEventHandler, getQuery, setHeader } from "h3";
+import { parseQuery } from "ufo";
+import { getPathRobotConfig } from "../composables/getPathRobotConfig.js";
+import { useRuntimeConfigNuxtRobots } from "../composables/useRuntimeConfigNuxtRobots.js";
+
+function safeGetQuery(event) {
+  try {
+    return getQuery(event);
+  }
+  catch {
+    const path = event.path || event.node?.req?.url || "/";
+    const searchIndex = path.indexOf("?");
+    const search = searchIndex === -1 ? "" : path.slice(searchIndex);
+    return parseQuery(search);
+  }
+}
+
+export default defineEventHandler(async (e) => {
+  if (e.path === "/robots.txt" || e.path.startsWith("/__") || e.path.startsWith("/api") || e.path.startsWith("/_nuxt"))
+    return;
+  const nuxtRobotsConfig = useRuntimeConfigNuxtRobots(e);
+  if (nuxtRobotsConfig) {
+    const { header } = nuxtRobotsConfig;
+    const robotConfig = getPathRobotConfig(e, { skipSiteIndexable: Boolean(safeGetQuery(e)?.mockProductionEnv) });
+    if (header) {
+      setHeader(e, "X-Robots-Tag", robotConfig.rule);
+    }
+    e.context.robots = robotConfig;
+    if (import.meta.dev) {
+      const productionRobotConfig = getPathRobotConfig(e, { skipSiteIndexable: true });
+      setHeader(e, "X-Robots-Production", productionRobotConfig.rule);
+      e.context.robotsProduction = productionRobotConfig;
+    }
+  }
+});

package/server/patches/nuxt-seo/routes/sitemap.xsl.js

@@ -0,0 +1,452 @@
+import { defineEventHandler } from "h3";
+import { safeGetHeader, safeGetQuery, safeSetHeader } from "../utils/h3-compat.js";
+import { getQuery, parseURL, withQuery } from "ufo";
+import { getSiteConfig } from "#site-config/server/composables";
+import { createSitePathResolver } from "#site-config/server/composables/utils";
+import { useSitemapRuntimeConfig, xmlEscape } from "../utils.js";
+export default defineEventHandler(async (e) => {
+  const fixPath = createSitePathResolver(e, { absolute: false, withBase: true });
+  const { sitemapName: fallbackSitemapName, cacheMaxAgeSeconds, version, xslColumns, xslTips } = useSitemapRuntimeConfig();
+  safeSetHeader(e, "Content-Type", "application/xslt+xml");
+  if (cacheMaxAgeSeconds)
+    safeSetHeader(e, "Cache-Control", `public, max-age=${cacheMaxAgeSeconds}, must-revalidate`);
+  else
+    safeSetHeader(e, "Cache-Control", `no-cache, no-store`);
+  const { name: siteName, url: siteUrl } = getSiteConfig(e);
+  const referrer = safeGetHeader(e, "Referer") || "/";
+  const referrerPath = parseURL(referrer).pathname;
+  const isNotIndexButHasIndex = referrerPath !== "/sitemap.xml" && referrerPath !== "/sitemap_index.xml" && referrerPath.endsWith(".xml");
+  const sitemapName = parseURL(referrer).pathname.split("/").pop()?.split("-sitemap")[0] || fallbackSitemapName;
+  const title = `${siteName}${sitemapName !== "sitemap.xml" ? ` - ${sitemapName === "sitemap_index.xml" ? "index" : sitemapName}` : ""}`.replace(/&/g, "&");
+  const isIndexPage = referrerPath === "/sitemap.xml" || referrerPath === "/sitemap_index.xml";
+  const canonicalQuery = getQuery(referrer).canonical;
+  const isShowingCanonical = typeof canonicalQuery !== "undefined" && canonicalQuery !== "false";
+  const debugUrl = xmlEscape(withQuery("/__sitemap__/debug.json", { sitemap: sitemapName }));
+  const devUrl = xmlEscape(referrerPath);
+  const prodUrl = xmlEscape(withQuery(referrerPath, { canonical: "" }));
+  const fetchErrors = [];
+  const xslQuery = safeGetQuery(e);
+  if (xslQuery.error_messages) {
+    const errorMessages = xslQuery.error_messages;
+    const errorUrls = xslQuery.error_urls;
+    if (errorMessages) {
+      const messages = Array.isArray(errorMessages) ? errorMessages : [errorMessages];
+      const urls = Array.isArray(errorUrls) ? errorUrls : errorUrls ? [errorUrls] : [];
+      messages.forEach((msg, i) => {
+        const errorParts = [xmlEscape(msg)];
+        if (urls[i])
+          errorParts.push(xmlEscape(urls[i]));
+        fetchErrors.push(`<span class="error-item">${errorParts.join(" \u2014 ")}</span>`);
+      });
+    }
+  }
+  const hasRuntimeErrors = fetchErrors.length > 0;
+  const showDevTools = import.meta.dev && xslTips !== false;
+  const hints = [
+    `This is an XSL sitemap (CSS for XML). Disable with <code>xsl: false</code>`,
+    `View the raw XML by adding <code>?canonical</code> to the URL`,
+    `Check <code>/__sitemap__/debug.json</code> for full sitemap diagnostics`
+  ];
+  const hint = hints[Math.floor(Math.random() * hints.length)];
+  let columns = [...xslColumns];
+  if (!columns.length) {
+    columns = [
+      { label: "URL", width: "50%" },
+      { label: "Images", width: "25%", select: "count(image:image)" },
+      { label: "Last Updated", width: "25%", select: "concat(substring(sitemap:lastmod,0,11),concat(' ', substring(sitemap:lastmod,12,5)),concat(' ', substring(sitemap:lastmod,20,6)))" }
+    ];
+  }
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet version="2.0"
+                xmlns:html="http://www.w3.org/TR/REC-html40"
+                xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
+                xmlns:sitemap="http://www.sitemaps.org/schemas/sitemap/0.9"
+                xmlns:xhtml="http://www.w3.org/1999/xhtml"
+                xmlns:news="http://www.google.com/schemas/sitemap-news/0.9"
+                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
+  <xsl:template match="/">
+    <html xmlns="http://www.w3.org/1999/xhtml">
+      <head>
+        <title>XML Sitemap</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <style type="text/css">
+          :root {
+            --accent: #00dc82;
+            --accent-hover: #00b86b;
+            --bg: #0a0a0a;
+            --bg-elevated: #141414;
+            --bg-subtle: #1a1a1a;
+            --border: #262626;
+            --border-subtle: #1f1f1f;
+            --text: #e5e5e5;
+            --text-muted: #737373;
+            --text-faint: #525252;
+            --error: #ef4444;
+            --error-bg: rgba(239,68,68,0.1);
+            --warning: #f59e0b;
+          }
+          * { box-sizing: border-box; }
+          body {
+            font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+            font-size: 13px;
+            color: var(--text);
+            background: var(--bg);
+            margin: 0;
+            padding: 0;
+            line-height: 1.6;
+            -webkit-font-smoothing: antialiased;
+          }
+          a { color: inherit; transition: color 0.15s; }
+          a:hover { color: var(--accent); }
+
+          /* Debug bar (dev only) */
+          .debug-bar {
+            position: fixed;
+            bottom: 0.75rem;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 80%;
+            background: var(--bg-elevated);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            padding: 0 1rem;
+            height: 2.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            z-index: 100;
+            font-size: 11px;
+          }
+          .debug-bar-brand {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: var(--text-muted);
+            text-decoration: none;
+          }
+          .debug-bar-brand:hover { color: var(--text); }
+          .debug-bar-brand svg { flex-shrink: 0; }
+          .debug-bar-hint {
+            color: var(--text-faint);
+            margin-right: auto;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          .debug-bar-hint code {
+            background: var(--bg-subtle);
+            padding: 0.1rem 0.3rem;
+            border-radius: 3px;
+            font-size: 10px;
+          }
+          .mode-badge {
+            font-size: 9px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+            padding: 0.2rem 0.4rem;
+            border-radius: 3px;
+          }
+          .mode-dev { background: rgba(245,158,11,0.15); color: var(--warning); }
+          .mode-prod { background: rgba(0,220,130,0.12); color: var(--accent); }
+          .mode-toggle {
+            display: inline-flex;
+            border-radius: 4px;
+            overflow: hidden;
+            background: var(--bg-subtle);
+            padding: 2px;
+            gap: 1px;
+          }
+          .mode-toggle a {
+            padding: 0.2rem 0.4rem;
+            font-size: 9px;
+            font-weight: 500;
+            text-decoration: none;
+            color: var(--text-muted);
+            border-radius: 2px;
+            transition: all 0.15s;
+          }
+          .mode-toggle a:hover { color: var(--text); }
+          .mode-toggle a.active {
+            background: var(--accent);
+            color: #0a0a0a;
+          }
+          .btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.25rem;
+            padding: 0.25rem 0.5rem;
+            border-radius: 4px;
+            text-decoration: none;
+            font-size: 10px;
+            font-weight: 500;
+            transition: all 0.15s;
+          }
+          .btn-primary {
+            background: var(--accent);
+            color: #0a0a0a;
+          }
+          .btn-primary:hover { background: var(--accent-hover); color: #0a0a0a; }
+          .btn svg { width: 12px; height: 12px; }
+
+          /* Error banner */
+          .error-banner {
+            background: var(--error-bg);
+            border-bottom: 1px solid rgba(239,68,68,0.2);
+            padding: 0.75rem 1.5rem;
+            color: #fca5a5;
+            font-size: 12px;
+          }
+          .error-banner strong { color: var(--error); }
+          .error-item { display: block; margin-top: 0.375rem; color: #fca5a5; }
+          .error-debug-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.25rem;
+            margin-top: 0.625rem;
+            padding: 0.25rem 0.5rem;
+            background: var(--error);
+            color: #fff;
+            border-radius: 4px;
+            font-size: 11px;
+            font-weight: 500;
+            text-decoration: none;
+            transition: background 0.15s;
+          }
+          .error-debug-link:hover { background: #dc2626; color: #fff; }
+
+          /* Main content */
+          .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 1.5rem;
+          }
+          .header {
+            margin-bottom: 1.25rem;
+          }
+          .header h1 {
+            font-size: 1rem;
+            font-weight: 600;
+            margin: 0 0 0.25rem 0;
+            color: var(--text);
+          }
+          .header-meta {
+            color: var(--text-muted);
+            font-size: 12px;
+          }
+          .header-meta a {
+            color: var(--text-muted);
+            text-decoration: underline;
+            text-decoration-color: var(--border);
+            text-underline-offset: 2px;
+          }
+          .header-meta a:hover { color: var(--accent); text-decoration-color: var(--accent); }
+
+          /* Table */
+          .table-wrap {
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            overflow: hidden;
+            background: var(--bg-elevated);
+          }
+          table {
+            width: 100%;
+            border-collapse: collapse;
+          }
+          th {
+            text-align: left;
+            padding: 0.625rem 1rem;
+            font-size: 10px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--text-muted);
+            background: var(--bg-subtle);
+            border-bottom: 1px solid var(--border);
+          }
+          td {
+            padding: 0.5rem 1rem;
+            border-bottom: 1px solid var(--border-subtle);
+            font-size: 12px;
+            color: var(--text);
+          }
+          tr:last-child td { border-bottom: none; }
+          tr:hover td { background: rgba(255,255,255,0.02); }
+          td a {
+            text-decoration: none;
+            word-break: break-all;
+            color: var(--text);
+          }
+          td a:hover { color: var(--accent); }
+          .inline-warning {
+            font-size: 11px;
+            color: var(--warning);
+            margin-top: 0.25rem;
+            line-height: 1.4;
+          }
+          .inline-warning::before {
+            content: "\u26A0 ";
+          }
+          .count {
+            display: inline-block;
+            min-width: 1.25rem;
+            padding: 0.125rem 0.375rem;
+            background: var(--bg-subtle);
+            border-radius: 4px;
+            text-align: center;
+            font-size: 11px;
+            color: var(--text-muted);
+            font-variant-numeric: tabular-nums;
+          }
+          .count:empty::before { content: "0"; }
+
+          /* Light mode */
+          @media (prefers-color-scheme: light) {
+            :root {
+              --accent: #00a963;
+              --accent-hover: #008f54;
+              --bg: #ffffff;
+              --bg-elevated: #f5f5f5;
+              --bg-subtle: #ebebeb;
+              --border: #d4d4d4;
+              --border-subtle: #e5e5e5;
+              --text: #171717;
+              --text-muted: #525252;
+              --text-faint: #737373;
+              --error: #dc2626;
+              --error-bg: rgba(220,38,38,0.08);
+              --warning: #b45309;
+            }
+            tr:hover td { background: rgba(0,0,0,0.02); }
+            .btn-primary { color: #fff; }
+            .btn-primary:hover { color: #fff; }
+            .mode-toggle a.active { color: #fff; }
+            .error-banner { color: #991b1b; }
+            .error-item { color: #b91c1c; }
+            .error-debug-link { color: #fff; }
+            .error-debug-link:hover { color: #fff; }
+          }
+
+          .debug-bar-version {
+            color: var(--text-faint);
+            font-size: 10px;
+          }
+
+          /* Responsive */
+          @media (max-width: 640px) {
+            .debug-bar { padding: 0 0.75rem; gap: 0.5rem; width: 95%; }
+            .debug-bar-brand span { display: none; }
+            .debug-bar-hint { display: none; }
+            .debug-bar-version { display: none; }
+            .mode-badge { display: none; }
+            .container { padding: 1rem; }
+            th, td { padding: 0.5rem 0.75rem; }
+          }
+          ${showDevTools ? "body { padding-bottom: 3.5rem; }" : ""}
+        </style>
+      </head>
+      <body>
+        ${hasRuntimeErrors ? `<div class="error-banner">
+            <strong>Sitemap Generation Errors</strong>
+            ${fetchErrors.join("")}
+            <a href="${debugUrl}" target="_blank" class="error-debug-link">View Debug Info \u2192</a>
+          </div>` : ""}
+        <div class="container">
+          <div class="header">
+            <h1>${xmlEscape(title)}</h1>
+            <div class="header-meta">
+              ${isNotIndexButHasIndex ? `Part of <a href="${xmlEscape(fixPath("/sitemap_index.xml"))}">${xmlEscape(fixPath("/sitemap_index.xml"))}</a> \xB7 ` : ""}
+              <xsl:if test="count(sitemap:sitemapindex/sitemap:sitemap) &gt; 0">
+                <xsl:value-of select="count(sitemap:sitemapindex/sitemap:sitemap)"/> sitemaps
+              </xsl:if>
+              <xsl:if test="count(sitemap:sitemapindex/sitemap:sitemap) &lt; 1">
+                <xsl:value-of select="count(sitemap:urlset/sitemap:url)"/> URLs
+              </xsl:if>
+            </div>
+          </div>
+          <xsl:if test="count(sitemap:sitemapindex/sitemap:sitemap) &gt; 0">
+            <div class="table-wrap">
+              <table>
+                <thead>
+                  <tr>
+                    <th style="width:70%">Sitemap</th>
+                    <th style="width:30%">Last Modified</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <xsl:for-each select="sitemap:sitemapindex/sitemap:sitemap">
+                    <xsl:variable name="sitemapURL">
+                      <xsl:value-of select="sitemap:loc"/>
+                    </xsl:variable>
+                    <tr>
+                      <td>
+                        <a href="{$sitemapURL}">
+                          <xsl:value-of select="sitemap:loc"/>
+                        </a>
+                      </td>
+                      <td>
+                        <xsl:value-of
+                          select="concat(substring(sitemap:lastmod,0,11),concat(' ', substring(sitemap:lastmod,12,5)),concat(' ', substring(sitemap:lastmod,20,6)))"/>
+                      </td>
+                    </tr>
+                  </xsl:for-each>
+                </tbody>
+              </table>
+            </div>
+          </xsl:if>
+          <xsl:if test="count(sitemap:sitemapindex/sitemap:sitemap) &lt; 1">
+            <div class="table-wrap">
+              <table>
+                <thead>
+                  <tr>
+                    ${columns.map((c) => `<th style="width:${c.width}">${c.label}</th>`).join("\n")}
+                  </tr>
+                </thead>
+                <tbody>
+                  <xsl:for-each select="sitemap:urlset/sitemap:url">
+                    <tr>
+                      <td>
+                        <xsl:variable name="itemURL">
+                          <xsl:value-of select="sitemap:loc"/>
+                        </xsl:variable>
+                        <a href="{$itemURL}">
+                          <xsl:value-of select="sitemap:loc"/>
+                        </a>
+                        ${showDevTools ? `<xsl:for-each select="comment()[starts-with(normalize-space(.), 'WARN:')]">
+                          <div class="inline-warning">
+                            <xsl:value-of select="substring-after(normalize-space(.), 'WARN:')"/>
+                          </div>
+                        </xsl:for-each>` : ""}
+                      </td>
+                      ${columns.filter((c) => c.label !== "URL").map((c) => `<td><span class="count"><xsl:value-of select="${c.select}"/></span></td>`).join("\n")}
+                    </tr>
+                  </xsl:for-each>
+                </tbody>
+              </table>
+            </div>
+          </xsl:if>
+        </div>
+        ${showDevTools ? `<div class="debug-bar">
+            <a href="${xmlEscape(fixPath("/sitemap_index.xml"))}" class="debug-bar-brand">
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32"><path fill="#00dc82" d="M4 26h4v4H4zm10 0h4v4h-4zm10 0h4v4h-4zm1-10h-8v-2h-2v2H7a2 2 0 0 0-2 2v6h2v-6h8v6h2v-6h8v6h2v-6a2 2 0 0 0-2-2zM9 2v10h14V2zm2 2h2v6h-2zm10 6h-6V4h6z"/></svg>
+              <span>Sitemap Debug Bar</span>
+            </a>
+            <span class="debug-bar-version">v${version} \xB7 ${xmlEscape(siteUrl)}</span>
+            <span class="debug-bar-hint">Hint: ${hint}</span>
+            ${isIndexPage ? `<span class="mode-badge ${isShowingCanonical ? "mode-prod" : "mode-dev"}">${isShowingCanonical ? "Prod" : "Dev"}</span>
+              <div class="mode-toggle">
+                <a href="${isShowingCanonical ? devUrl : "#"}" class="${!isShowingCanonical ? "active" : ""}">Dev</a>
+                <a href="${!isShowingCanonical ? prodUrl : "#"}" class="${isShowingCanonical ? "active" : ""}">Prod</a>
+              </div>` : ""}
+            <a href="${debugUrl}" target="_blank" class="btn btn-primary">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
+              Debug
+            </a>
+          </div>` : ""}
+      </body>
+    </html>
+  </xsl:template>
+</xsl:stylesheet>
+`;
+});