npm - @writedocs/generator - Versions diffs - 0.1.0 - Mend

@writedocs/generator 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (95) hide show

package/LICENSE +15 -0
package/README.md +17 -0
package/astro.config.mjs +419 -0
package/bin/writedocs.js +73 -0
package/package.json +79 -0
package/src/assets/wd_watermark.png +0 -0
package/src/assets/wd_watermark_dark.png +0 -0
package/src/cli/build-auth.js +53 -0
package/src/cli/build.js +40 -0
package/src/cli/dev.js +12 -0
package/src/cli/generate-api-pages.js +359 -0
package/src/cli/init.js +81 -0
package/src/cli/preflight.js +40 -0
package/src/cli/run-astro.js +57 -0
package/src/cli/run-pagefind.js +66 -0
package/src/cli/write-redirects-file.js +80 -0
package/src/components/Accordion.astro +164 -0
package/src/components/AccordionGroup.astro +40 -0
package/src/components/ApiLangSelect.astro +168 -0
package/src/components/ApiPlayground.astro +281 -0
package/src/components/ApiReferencePanel.astro +1754 -0
package/src/components/ApiSchemaField.astro +54 -0
package/src/components/AppIcon.astro +32 -0
package/src/components/Badge.astro +128 -0
package/src/components/Callout.astro +168 -0
package/src/components/Card.astro +136 -0
package/src/components/CardGroup.astro +20 -0
package/src/components/CodeGroup.astro +184 -0
package/src/components/CopyPageMenu.astro +246 -0
package/src/components/Danger.astro +12 -0
package/src/components/Expandable.astro +126 -0
package/src/components/Frame.astro +102 -0
package/src/components/Hint.astro +99 -0
package/src/components/Icon.astro +70 -0
package/src/components/Image.astro +147 -0
package/src/components/Info.astro +12 -0
package/src/components/Note.astro +12 -0
package/src/components/Parameter.astro +119 -0
package/src/components/RequestExample.astro +33 -0
package/src/components/ResponseExample.astro +19 -0
package/src/components/Searchbar.astro +117 -0
package/src/components/Step.astro +10 -0
package/src/components/Steps.astro +32 -0
package/src/components/Tab.astro +9 -0
package/src/components/Tabs.astro +52 -0
package/src/components/Tip.astro +12 -0
package/src/components/Video.astro +135 -0
package/src/components/Warning.astro +12 -0
package/src/components/index.ts +48 -0
package/src/content.config.ts +223 -0
package/src/layout/BaseLayout.astro +750 -0
package/src/layout/components/AnalyticsScripts.astro +77 -0
package/src/layout/components/AskAiWidget.astro +37 -0
package/src/layout/components/Breadcrumbs.astro +97 -0
package/src/layout/components/ImageZoom.astro +19 -0
package/src/layout/components/MobileMenu.astro +200 -0
package/src/layout/components/NavTree.astro +351 -0
package/src/layout/components/SearchModal.astro +42 -0
package/src/layout/components/Sidebar.astro +122 -0
package/src/layout/components/SiteFooter.astro +85 -0
package/src/layout/components/TableOfContents.astro +117 -0
package/src/layout/components/TopBar.astro +311 -0
package/src/layout/styles/banner.css +44 -0
package/src/layout/styles/base.css +234 -0
package/src/layout/styles/dropdown.css +133 -0
package/src/layout/styles/footer.css +108 -0
package/src/layout/styles/image-zoom.css +50 -0
package/src/layout/styles/mobile-menu.css +258 -0
package/src/layout/styles/search-modal.css +122 -0
package/src/layout/styles/topbar.css +437 -0
package/src/lib/config.ts +2131 -0
package/src/lib/mdx-auto-hydrate.js +70 -0
package/src/lib/mdx-inject-builtins.js +87 -0
package/src/lib/mdx-substitute-variables.js +66 -0
package/src/lib/mdx-title-anchor-ids.js +84 -0
package/src/lib/mermaid-rehype.js +72 -0
package/src/lib/openapi-render.ts +479 -0
package/src/lib/shiki-code-block.js +102 -0
package/src/lib/shiki-copy-button.js +45 -0
package/src/lib/styles-asset-integration.js +210 -0
package/src/lib/writedocs-temp-dir.js +93 -0
package/src/pages/404.astro +62 -0
package/src/pages/[...slug].astro +1270 -0
package/src/pages/[...slug].md.ts +78 -0
package/src/pages/llms-full.txt.ts +71 -0
package/src/pages/llms.txt.ts +141 -0
package/src/scripts/banner.ts +20 -0
package/src/scripts/dropdowns.ts +61 -0
package/src/scripts/image-zoom.ts +66 -0
package/src/scripts/mobile-menu.ts +55 -0
package/src/scripts/search.ts +155 -0
package/src/scripts/sidebar-scroll.ts +65 -0
package/src/scripts/theme-toggle.ts +35 -0
package/src/scripts/topbar-offset.ts +141 -0
package/src/styles/global.css +18 -0

package/src/layout/components/AnalyticsScripts.astro ADDED Viewed

@@ -0,0 +1,77 @@
+---
+// writedocs.json's `integrations` (integrationsSchema in lib/config.ts) - the
+// six analytics providers. Each provider's inline-JS half (the ones that
+// need one; Fathom/Plausible/Umami are pure <script src> tags with data-*
+// attributes, rendered directly in the template below with no inline half
+// to build here) is assembled as a plain string, interpolating the site's
+// own config values via JSON.stringify (not raw string interpolation) so
+// a value containing a quote or backslash can never break out of the
+// generated script.
+//
+// Rendered by BaseLayout.astro in <head>, right after the meta tags and
+// before even the theme-detection script - the usual placement every one
+// of these providers' own install instructions ask for, so pageview
+// timing is captured as close to actual page load as it can be. Every
+// snippet below was sourced from that provider's own current official
+// docs (fetched directly, not recalled from training data) while building
+// this feature - see docs/dev/docs/integrations.mdx for links and dates.
+// Every provider field is optional and independent - a site can turn on
+// any subset (including all of them at once, for a migration period) or
+// none.
+//
+// AskAiWidget.astro is the seventh integration (DocsBot) - kept as its
+// own separate component rather than folded in here, since it renders at
+// the *end* of <body>, not in <head> (it's a UI widget, not a pageview
+// beacon - see that component's own comment).
+//
+// Split out of BaseLayout.astro, which had grown to ~2200 lines covering
+// several unrelated concerns in one file - see that component's own
+// comment for the fuller rationale.
+import type { DocsConfig } from '../../lib/config';
+interface Props {
+  config: DocsConfig;
+}
+const { config } = Astro.props as Props;
+// Google Tag Manager's snippet is copied verbatim from Google's own
+// long-stable install snippet (unchanged in substance for years) - the
+// self-invoking function that pushes the initial 'gtm.js' event and
+// injects the real gtm.js loader script.
+const gtmScript = config.integrations.googleTagManager
+  ? `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer',${JSON.stringify(config.integrations.googleTagManager.containerId)});`
+  : null;
+// GA4's own gtag.js config call - paired with the separate `<script
+// async src="...gtag/js?id=...">` loader tag rendered directly below,
+// both gated on the same config.integrations.ga4 check.
+const ga4ConfigScript = config.integrations.ga4
+  ? `window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config',${JSON.stringify(config.integrations.ga4.measurementId)});`
+  : null;
+// PostHog's own "array.js" bootstrap loader - copied verbatim from
+// posthog.com/docs/libraries/js (fetched directly while building this
+// feature, not recalled from training data - PostHog revises this
+// snippet's minified body occasionally, so re-fetch and diff before
+// assuming it's still current if this ever needs touching again). The
+// `defaults` date is PostHog's own versioned configuration-snapshot pin
+// (their docs describe it as "a date... for a configuration snapshot used
+// as defaults") - current as of the fetch above; bump it if PostHog's own
+// docs have moved on to a newer one.
+const posthogScript = config.integrations.posthog
+  ? `!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagResult isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);posthog.init(${JSON.stringify(config.integrations.posthog.apiKey)},{api_host:${JSON.stringify(config.integrations.posthog.apiHost)},defaults:'2026-05-30'});`
+  : null;
+---
+{config.integrations.ga4 && (
+  <script is:inline async src={`https://www.googletagmanager.com/gtag/js?id=${config.integrations.ga4.measurementId}`}></script>
+)}
+{ga4ConfigScript && <script is:inline set:html={ga4ConfigScript} />}
+{gtmScript && <script is:inline set:html={gtmScript} />}
+{config.integrations.plausible && (
+  <script is:inline defer data-domain={config.integrations.plausible.domain} src={config.integrations.plausible.src}></script>
+)}
+{config.integrations.fathom && (
+  <script is:inline src="https://cdn.usefathom.com/script.js" data-site={config.integrations.fathom.siteId} defer></script>
+)}
+{posthogScript && <script is:inline set:html={posthogScript} />}
+{config.integrations.umami && (
+  <script is:inline defer src={config.integrations.umami.src} data-website-id={config.integrations.umami.websiteId}></script>
+)}

package/src/layout/components/AskAiWidget.astro ADDED Viewed

@@ -0,0 +1,37 @@
+---
+// writedocs.json's `integrations.askAi` (askAiIntegrationSchema in
+// lib/config.ts) - DocsBot's own embeddable-chat-widget loader, copied
+// verbatim from docsbot.ai/documentation/developer/embeddable-chat-widget
+// (fetched directly while building this feature, not recalled from
+// training data). Unlike AnalyticsScripts.astro's six providers, this
+// isn't rendered in <head> - it's a UI widget (a floating chat bubble),
+// not a pageview beacon, so there's no reason to load it before everything
+// else the way the analytics scripts need to for accurate timing;
+// BaseLayout.astro renders this at the very end of <body> instead, after
+// even the site's own `scripts.body`/root-JS. The loader itself never
+// changes per-site (it's DocsBot's fixed bootstrap, not something a
+// config value gets interpolated into), so it's a plain constant rather
+// than a template string - only the second, actual init call needs the
+// site's own bot id.
+//
+// Split out of BaseLayout.astro, which had grown to ~2200 lines covering
+// several unrelated concerns in one file - see that component's own
+// comment for the fuller rationale.
+import type { DocsConfig } from '../../lib/config';
+interface Props {
+  config: DocsConfig;
+}
+const { config } = Astro.props as Props;
+const askAiLoaderScript = `window.DocsBotAI=window.DocsBotAI||{},DocsBotAI.init=function(e){return new Promise((t,r)=>{var n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://widget.docsbot.ai/chat.js";let o=document.getElementsByTagName("script")[0];o.parentNode.insertBefore(n,o),n.addEventListener("load",()=>{let n;Promise.all([new Promise((t,r)=>{window.DocsBotAI.mount(Object.assign({}, e)).then(t).catch(r)}),(n=function e(t){return new Promise(e=>{if(document.querySelector(t))return e(document.querySelector(t));let r=new MutationObserver(n=>{if(document.querySelector(t))return e(document.querySelector(t)),r.disconnect()});r.observe(document.body,{childList:!0,subtree:!0})})})("#docsbotai-root"),]).then(()=>t()).catch(r)}),n.addEventListener("error",e=>{r(e.message)})})};`;
+const askAiInitScript = config.integrations.askAi
+  ? `DocsBotAI.init(${JSON.stringify({ id: config.integrations.askAi.id })});`
+  : null;
+---
+{config.integrations.askAi && (
+  <>
+    <script is:inline set:html={askAiLoaderScript} />
+    {askAiInitScript && <script is:inline set:html={askAiInitScript} />}
+  </>
+)}

package/src/layout/components/Breadcrumbs.astro ADDED Viewed

@@ -0,0 +1,97 @@
+---
+// The ancestor-group trail above the auto-rendered <h1> ("Learn the
+// Basics > Authentication Flows") - `items` is ancestorGroupsForSlug()'s
+// output (lib/config.ts): the chain of group labels (root first) the
+// current page is nested under within its active Section's sidebar tree,
+// each linking to that group's own attached page when it has one
+// (`href`), or rendered as plain unlinked text when it doesn't.
+// Deliberately does NOT include the current page itself as a trailing
+// crumb - that's already the <h1> right below this, and repeating it
+// here would just be noise. [...slug].astro only renders this component
+// at all when `items` is non-empty (a page with no enclosing group has
+// no ancestor trail to show, and a home-icon-only bar isn't worth
+// rendering on its own).
+//
+// The home icon is always the first crumb, on every page this component
+// renders on, regardless of `items` - a fixed entry point back to `/`,
+// not itself part of the ancestor chain. Rendered via astro-icon (same
+// system every other writedocs.json `icon` field/AppIcon.astro uses - a real
+// build-time <svg>, no client JS/React needed) - fa6-solid:house is the
+// Iconify id for the exact same Font Awesome 6 glyph as react-icons'
+// `FaHouse`, without pulling React into an otherwise-static nav element.
+import { Icon } from 'astro-icon/components';
+export interface BreadcrumbItem {
+  label: string;
+  href: string | null;
+}
+interface Props {
+  items: BreadcrumbItem[];
+}
+const { items } = Astro.props as Props;
+---
+<nav class="wd-breadcrumbs" aria-label="Breadcrumb" data-pagefind-ignore>
+  <ol class="wd-breadcrumb-list">
+    <li class="wd-breadcrumb-item">
+      <a href="/" class="wd-breadcrumb-home" aria-label="Home">
+        <Icon name="fa6-solid:house" class="wd-breadcrumb-home-icon" />
+      </a>
+      <svg class="wd-breadcrumb-sep" width="10" height="10" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+        <path d="M6.5 2.75L12.75 9L6.5 15.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    </li>
+    {items.map((item, i) => (
+      <li class="wd-breadcrumb-item">
+        {item.href ? <a href={item.href}>{item.label}</a> : <span>{item.label}</span>}
+        {i < items.length - 1 && (
+          <svg class="wd-breadcrumb-sep" width="10" height="10" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+            <path d="M6.5 2.75L12.75 9L6.5 15.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        )}
+      </li>
+    ))}
+  </ol>
+</nav>
+<style>
+  .wd-breadcrumbs {
+    margin-bottom: 0.6rem;
+  }
+  .wd-breadcrumb-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.35rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: 0.85rem;
+    color: var(--wd-text-muted);
+  }
+  .wd-breadcrumb-item {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+  }
+  .wd-breadcrumb-item a {
+    display: flex;
+    align-items: center;
+    color: inherit;
+    text-decoration: none;
+  }
+  .wd-breadcrumb-item a:hover {
+    color: var(--wd-text);
+  }
+  .wd-breadcrumb-home-icon {
+    width: 0.85em;
+    height: 0.85em;
+    flex-shrink: 0;
+  }
+  .wd-breadcrumb-sep {
+    flex-shrink: 0;
+    color: var(--wd-text-muted);
+    opacity: 0.6;
+  }
+</style>

package/src/layout/components/ImageZoom.astro ADDED Viewed

@@ -0,0 +1,19 @@
+---
+// The fullscreen lightbox overlay opened by clicking any zoomable content
+// image (src/scripts/image-zoom.ts). Mounted once in BaseLayout.astro
+// alongside SearchModal, same reasoning as that component's own comment:
+// self-contained, no writedocs.json-derived props, and needs to exist in the
+// DOM regardless of page `mode` since its own script queries the whole
+// document for zoomable images rather than being scoped to a slot.
+import '../styles/image-zoom.css';
+---
+<div class="wd-zoom-overlay" id="wd-zoom-overlay" hidden>
+  <button type="button" class="wd-zoom-close" aria-label="Close">&times;</button>
+  <img class="wd-zoom-image" id="wd-zoom-image" alt="" />
+</div>
+<script>
+  import { initImageZoom } from '../../scripts/image-zoom';
+  initImageZoom(document);
+  document.addEventListener('astro:page-load', () => initImageZoom(document));
+</script>

package/src/layout/components/MobileMenu.astro ADDED Viewed

@@ -0,0 +1,200 @@
+---
+// The <= 860px overlay drawer that TopBar.astro's own hamburger button
+// opens - everything that's a side-by-side control on desktop (the
+// brand-row switchers, the tabs bar, the always-visible global dropdowns)
+// plus the sidebar itself collapses into this one panel below 860px.
+// Reuses the exact same `selectors`/`globalDropdowns` props TopBar.astro
+// renders its own desktop switchers/tabs from (see its own
+// switcherSelectors/tabSelectors) rather than a filtered subset - unlike
+// TopBar's switcherSelectors (which deliberately *drops* a dropdown
+// selector nested directly under a tab, since desktop folds it into that
+// tab's own dropdown-trigger button), this renders every entry of
+// `selectors` in root-to-leaf order as its own accordion row. That's what
+// makes "a tab with its own dropdowns gets a second selector right below
+// it" fall out for free: when the active page is under such a tab,
+// `selectors` already contains that nested dropdown as its own array
+// entry immediately following the tab's entry (see buildSelectors() in
+// lib/config.ts, which walks the active PathSegment[] in that exact
+// order) - no tab-specific branching needed here at all.
+//
+// The sidebar itself is the `sidebar` slot, forwarded straight through
+// from whatever BaseLayout.astro received - rendered a second time
+// (Astro renders the same passed-in slot content at every place it's
+// referenced, not just once); the first copy is in BaseLayout's own
+// `.wd-sidebar-col`, for desktop. Both copies exist in the DOM on every
+// load; only one is ever visible at a time (mobile-menu.css hides this
+// whole panel above 860px, base.css hides .wd-sidebar-col at/below it),
+// so there's no duplicate-content flash either way.
+//
+// Split out of BaseLayout.astro, which had grown to ~2200 lines covering
+// several unrelated concerns in one file - see that component's own
+// comment for the fuller rationale.
+import { isExternalHref, type DocsConfig, type Selector, type GlobalDropdownView } from '../../lib/config';
+import AppIcon from '../../components/AppIcon.astro';
+import '../styles/dropdown.css';
+import '../styles/topbar.css';
+import '../styles/mobile-menu.css';
+interface Props {
+  config: DocsConfig;
+  selectors: Selector[];
+  globalDropdowns: GlobalDropdownView[];
+  // Whether this page would show a sidebar at all (mode === 'default' or
+  // 'wide') - this whole component renders nothing otherwise, same
+  // condition TopBar.astro gates its own hamburger toggle on.
+  showSidebarCol: boolean;
+  logoLight?: string;
+  logoDark?: string;
+  brandLabel?: string;
+}
+const { config, selectors, globalDropdowns, showSidebarCol, logoLight, logoDark, brandLabel } = Astro.props as Props;
+---
+{showSidebarCol && (
+  <div class="wd-mobile-menu" id="wd-mobile-menu" inert>
+    <div class="wd-mobile-menu-backdrop" data-mobile-menu-backdrop></div>
+    <div class="wd-mobile-menu-panel" role="dialog" aria-modal="true" aria-label="Navigation">
+      {/* The panel reaches all the way to the top of the viewport (see
+          mobile-menu.css) rather than stopping below the real topbar -
+          the real topbar's own height varies (one row, or two once
+          tabs/global dropdowns/a wrapped search box are involved), which
+          made lining this panel up under it a fragile approximation.
+          Instead this header replicates the topbar's own brand/close/
+          theme row *inside* the panel, at a fixed height the panel fully
+          controls, so it reads as "the same navbar" occupying the same
+          spot rather than a separate floating piece underneath one of
+          variable size. The real topbar is still there underneath, just
+          no longer relied on for anything while the menu is open - it's
+          covered by this panel's own opaque background (or dimmed by the
+          backdrop, past the panel's own width). */}
+      <div class="wd-mobile-menu-header">
+        <button
+          type="button"
+          class="wd-mobile-menu-close"
+          aria-label="Close menu"
+          data-mobile-menu-close
+        >
+          <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true">
+            <path d="M4 4L14 14M14 4L4 14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          </svg>
+        </button>
+        <a class="wd-topbar-brand" href="/">
+          {logoLight && <img src={logoLight} alt={config.name} height="24" class="wd-logo-light" />}
+          {logoDark && <img src={logoDark} alt={config.name} height="24" class="wd-logo-dark" />}
+          {brandLabel && <span>{brandLabel}</span>}
+        </a>
+        {/* Same class as the real topbar's own theme button -
+            initThemeToggle() (src/scripts/theme-toggle.ts, wired below)
+            wires up every `.wd-theme-toggle` it finds (not just the
+            first), and both stay in sync for free since [data-theme] on
+            <html> - not per-button JS state - is what actually drives
+            which icon shows. */}
+        <button type="button" class="wd-theme-toggle" aria-label="Toggle color theme">
+          <AppIcon icon="sun" class="wd-theme-icon wd-theme-icon-sun" />
+          <AppIcon icon="moon" class="wd-theme-icon wd-theme-icon-moon" />
+        </button>
+      </div>
+      <div class="wd-mobile-menu-scroll">
+        {(selectors.length > 0 || globalDropdowns.length > 0) && (
+          <div class="wd-mobile-menu-selectors">
+            {selectors.map((sel) => {
+              const current = sel.options.find((o) => o.active) ?? sel.options[0];
+              return (
+                <details class="wd-mobile-accordion" name="wd-mobile-accordion">
+                  <summary class="wd-mobile-accordion-trigger">
+                    <AppIcon icon={current.icon} class="wd-tab-icon" />
+                    <span class="wd-mobile-accordion-label">{current.label}</span>
+                    {current.tag && <span class="wd-selector-tag">{current.tag}</span>}
+                    <svg class="wd-mobile-accordion-caret" width="12" height="12" viewBox="0 0 10 10" aria-hidden="true">
+                      <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+                    </svg>
+                  </summary>
+                  <div class="wd-mobile-accordion-options">
+                    <div class="wd-mobile-accordion-options-panel">
+                      {sel.options.map((opt) => (
+                        <a
+                          href={opt.href}
+                          class={opt.active ? 'active' : ''}
+                          target={isExternalHref(opt.href) ? '_blank' : undefined}
+                          rel={isExternalHref(opt.href) ? 'noopener noreferrer' : undefined}
+                        >
+                          <AppIcon icon={opt.icon} class="wd-tab-icon" />
+                          <span class="wd-mobile-accordion-option-label">{opt.label}</span>
+                          {opt.tag && <span class="wd-selector-tag">{opt.tag}</span>}
+                          {opt.active && (
+                            <svg class="wd-mobile-accordion-check" width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
+                              <path d="M3 7.5L6 10.5L11 4.5" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                          )}
+                        </a>
+                      ))}
+                    </div>
+                  </div>
+                </details>
+              );
+            })}
+            {globalDropdowns.map((d) =>
+              d.href !== null ? (
+                <a
+                  href={d.href}
+                  class="wd-mobile-menu-link"
+                  target={isExternalHref(d.href) ? '_blank' : undefined}
+                  rel={isExternalHref(d.href) ? 'noopener noreferrer' : undefined}
+                >
+                  <AppIcon icon={d.icon} class="wd-tab-icon" />
+                  <span class="wd-mobile-accordion-option-label">{d.label}</span>
+                </a>
+              ) : (
+                <details class="wd-mobile-accordion" name="wd-mobile-accordion">
+                  <summary class="wd-mobile-accordion-trigger">
+                    <AppIcon icon={d.icon} class="wd-tab-icon" />
+                    <span class="wd-mobile-accordion-label">{d.label}</span>
+                    <svg class="wd-mobile-accordion-caret" width="12" height="12" viewBox="0 0 10 10" aria-hidden="true">
+                      <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+                    </svg>
+                  </summary>
+                  <div class="wd-mobile-accordion-options">
+                    <div class="wd-mobile-accordion-options-panel">
+                      {d.items.map((item) => (
+                        <a href={item.href} class={item.active ? 'active' : ''}>
+                          <span class="wd-mobile-accordion-option-label">{item.label}</span>
+                          {item.active && (
+                            <svg class="wd-mobile-accordion-check" width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
+                              <path d="M3 7.5L6 10.5L11 4.5" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                          )}
+                        </a>
+                      ))}
+                    </div>
+                  </div>
+                </details>
+              )
+            )}
+          </div>
+        )}
+        <div class="wd-mobile-menu-sidebar">
+          <slot name="sidebar" />
+        </div>
+      </div>
+    </div>
+  </div>
+)}
+<script>
+  import { initMobileMenu } from '../../scripts/mobile-menu';
+  import { initThemeToggle } from '../../scripts/theme-toggle';
+  // Not required by any markup this component currently renders (its own
+  // accordion rows are plain <details>, not .wd-dropdown), but imported
+  // and called anyway so both this file and TopBar.astro consistently own
+  // wiring up whatever interactive primitives their own markup might use
+  // - safe/idempotent regardless of how many components call it, see
+  // src/scripts/dropdowns.ts's own comment.
+  import { initDropdowns } from '../../scripts/dropdowns';
+  initMobileMenu(document);
+  initThemeToggle(document);
+  initDropdowns(document);
+  document.addEventListener('astro:page-load', () => {
+    initMobileMenu(document);
+    initThemeToggle(document);
+    initDropdowns(document);
+  });
+</script>