@writedocs/generator 0.4.7 → 0.4.8

package/src/components/Tree.astro

@@ -0,0 +1,213 @@
+---
+// Mintlify's <Tree> (alias <FileTree>) - a file/folder tree built from
+// <Tree.Folder> and <Tree.File> (TreeFolder.astro / TreeFile.astro,
+// attached as properties in components/compound.ts), or from a Markdown
+// list, which remarkMintlifyTreeLists (lib/mdx-mintlify.js) rewrites into
+// those same elements at build time.
+//
+// Rendered as an ARIA tree. The script below adds Mintlify's documented
+// keyboard navigation: Up/Down between visible items, Right to open a
+// folder (or step into it), Left to close it (or step out to its parent),
+// Home/End, Enter/Space to toggle, * to open every sibling folder, and
+// type-ahead to jump to an item by its first letters.
+//
+// The highlight color is the `--tree-highlight` custom property, which a
+// page can set on the tree itself: <Tree style={{ "--tree-highlight": "..." }}>.
+interface Props {
+  style?: string | Record<string, string>;
+  class?: string;
+  className?: string;
+}
+const { style, class: className, className: mintlifyClassName } = Astro.props as Props;
+---
+<ul class:list={['wd-tree', className, mintlifyClassName]} role="tree" style={style}><slot /></ul>
+<script>
+  function initTrees(root: ParentNode) {
+    root.querySelectorAll<HTMLElement>('.wd-tree').forEach((tree) => {
+      if (tree.dataset.wdInit) return;
+      tree.dataset.wdInit = 'true';
+      const items = () => Array.from(tree.querySelectorAll<HTMLElement>('.wd-tree-item'));
+      const isFolder = (el: HTMLElement) => el.classList.contains('wd-tree-folder');
+      const isOpen = (el: HTMLElement) => el.getAttribute('aria-expanded') === 'true';
+      // Visible = not inside a closed folder.
+      const visible = () =>
+        items().filter((el) => {
+          let parent = el.parentElement?.closest<HTMLElement>('.wd-tree-folder');
+          while (parent && tree.contains(parent)) {
+            if (!isOpen(parent)) return false;
+            parent = parent.parentElement?.closest<HTMLElement>('.wd-tree-folder');
+          }
+          return true;
+        });
+      const setOpen = (el: HTMLElement, open: boolean) => {
+        if (!isFolder(el) || el.classList.contains('wd-tree-static')) return;
+        el.setAttribute('aria-expanded', String(open));
+      };
+      const focus = (el: HTMLElement | undefined) => {
+        if (!el) return;
+        items().forEach((i) => (i.tabIndex = -1));
+        el.tabIndex = 0;
+        el.focus();
+      };
+      const first = items()[0];
+      if (first) first.tabIndex = 0;
+
+      tree.addEventListener('click', (e) => {
+        const row = (e.target as HTMLElement).closest('.wd-tree-row');
+        const item = row?.parentElement as HTMLElement | null;
+        if (!item || !tree.contains(item)) return;
+        if (isFolder(item)) setOpen(item, !isOpen(item));
+        focus(item);
+      });
+
+      let typed = '';
+      let typedAt = 0;
+      tree.addEventListener('keydown', (e) => {
+        const current = (e.target as HTMLElement).closest<HTMLElement>('.wd-tree-item');
+        if (!current) return;
+        const list = visible();
+        const i = list.indexOf(current);
+        const parentFolder = current.parentElement?.closest<HTMLElement>('.wd-tree-folder');
+        switch (e.key) {
+          case 'ArrowDown':
+            focus(list[i + 1]);
+            break;
+          case 'ArrowUp':
+            focus(list[i - 1]);
+            break;
+          case 'ArrowRight':
+            if (isFolder(current) && !isOpen(current) && !current.classList.contains('wd-tree-static')) setOpen(current, true);
+            else if (isFolder(current) && isOpen(current)) focus(current.querySelector<HTMLElement>('.wd-tree-item') ?? undefined);
+            break;
+          case 'ArrowLeft':
+            if (isFolder(current) && isOpen(current) && !current.classList.contains('wd-tree-static')) setOpen(current, false);
+            else if (parentFolder && tree.contains(parentFolder)) focus(parentFolder);
+            break;
+          case 'Home':
+            focus(list[0]);
+            break;
+          case 'End':
+            focus(list[list.length - 1]);
+            break;
+          case 'Enter':
+          case ' ':
+            if (isFolder(current)) setOpen(current, !isOpen(current));
+            break;
+          case '*':
+            Array.from(current.parentElement?.children ?? [])
+              .filter((el): el is HTMLElement => el instanceof HTMLElement && isFolder(el))
+              .forEach((el) => setOpen(el, true));
+            break;
+          default:
+            if (e.key.length === 1 && /\S/.test(e.key) && !e.ctrlKey && !e.metaKey && !e.altKey) {
+              const now = Date.now();
+              typed = now - typedAt > 700 ? e.key.toLowerCase() : typed + e.key.toLowerCase();
+              typedAt = now;
+              const nameOf = (el: HTMLElement) =>
+                el.querySelector(':scope > .wd-tree-row .wd-tree-name')?.textContent?.toLowerCase() ?? '';
+              // A single letter looks past the current item; a longer
+              // prefix (typed quickly) keeps matching from it, so "pa"
+              // after "p" landed on page.tsx stays there.
+              const startAt = typed.length > 1 ? i : i + 1;
+              const ordered = [...list.slice(startAt), ...list.slice(0, startAt)];
+              const match = ordered.find((el) => nameOf(el).startsWith(typed));
+              if (match) focus(match);
+              break;
+            }
+            return;
+        }
+        e.preventDefault();
+      });
+    });
+  }
+  initTrees(document);
+  document.addEventListener('astro:page-load', () => initTrees(document));
+</script>
+<style is:global>
+  .wd-tree {
+    --wd-tree-accent: var(--tree-highlight, var(--wd-primary));
+    margin: 1.25rem 0;
+    padding: 0.6rem;
+    list-style: none;
+    border: 1px solid var(--wd-border);
+    border-radius: 0.6rem;
+    font-family: monospace;
+    font-size: 0.875rem;
+  }
+  .wd-tree .wd-tree-group {
+    margin: 0;
+    padding-left: 1.1rem;
+    list-style: none;
+  }
+  .wd-tree .wd-tree-item {
+    margin: 0;
+    padding: 0;
+    outline: none;
+  }
+  .wd-tree-folder[aria-expanded='false'] > .wd-tree-group {
+    display: none;
+  }
+  .wd-tree-row {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.2rem 0.4rem;
+    border-radius: 0.35rem;
+    color: var(--wd-text);
+    cursor: default;
+    user-select: none;
+  }
+  .wd-tree-folder:not(.wd-tree-static) > .wd-tree-row {
+    cursor: pointer;
+  }
+  .wd-tree-row:hover,
+  .wd-tree-item:focus-visible > .wd-tree-row {
+    background: var(--wd-surface);
+  }
+  .wd-tree-item:focus-visible > .wd-tree-row {
+    box-shadow: inset 0 0 0 1px var(--wd-tree-accent);
+  }
+  .wd-tree-chevron {
+    width: 0.8rem;
+    flex-shrink: 0;
+    display: inline-flex;
+    justify-content: center;
+  }
+  .wd-tree-folder > .wd-tree-row > .wd-tree-chevron::before {
+    content: '';
+    width: 0.35rem;
+    height: 0.35rem;
+    border-right: 1.5px solid var(--wd-text-muted);
+    border-bottom: 1.5px solid var(--wd-text-muted);
+    transform: rotate(-45deg);
+    transition: transform 0.12s ease;
+  }
+  .wd-tree-folder[aria-expanded='true'] > .wd-tree-row > .wd-tree-chevron::before {
+    transform: rotate(45deg);
+  }
+  .wd-tree-static > .wd-tree-row > .wd-tree-chevron::before {
+    opacity: 0.35;
+  }
+  svg.wd-tree-icon {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    color: var(--wd-text-muted);
+  }
+  .wd-tree-folder[aria-expanded='true'] > .wd-tree-row > .wd-tree-icon-closed,
+  .wd-tree-folder[aria-expanded='false'] > .wd-tree-row > .wd-tree-icon-open {
+    display: none;
+  }
+  /* The highlighted item gets a tinted row; a highlighted folder also
+     tints the text of everything inside it, so the active path reads. */
+  .wd-tree-highlight > .wd-tree-row {
+    background: color-mix(in srgb, var(--wd-tree-accent) 14%, transparent);
+    color: var(--wd-tree-accent);
+    font-weight: 600;
+  }
+  .wd-tree-highlight > .wd-tree-row .wd-tree-icon,
+  .wd-tree-folder.wd-tree-highlight .wd-tree-row,
+  .wd-tree-folder.wd-tree-highlight .wd-tree-icon {
+    color: var(--wd-tree-accent);
+  }
+</style>

package/src/components/TreeFile.astro

@@ -0,0 +1,17 @@
+---
+// Mintlify's <Tree.File name="..."> - see Tree.astro. `highlight` marks it
+// as the active item.
+import AppIcon from './AppIcon.astro';
+interface Props {
+  name: string;
+  highlight?: boolean;
+}
+const { name, highlight = false } = Astro.props as Props;
+---
+<li class:list={['wd-tree-item', 'wd-tree-file', { 'wd-tree-highlight': highlight }]} role="treeitem" tabindex="-1">
+  <span class="wd-tree-row">
+    <span class="wd-tree-chevron wd-tree-chevron-spacer" aria-hidden="true"></span>
+    <AppIcon icon="lucide:file" class="wd-tree-icon" />
+    <span class="wd-tree-name">{name}</span>
+  </span>
+</li>

package/src/components/TreeFolder.astro

@@ -0,0 +1,28 @@
+---
+// Mintlify's <Tree.Folder name="..."> - see Tree.astro. `defaultOpen`
+// starts it expanded; `openable={false}` makes it a fixed, non-toggling
+// folder (shown open or closed per `defaultOpen`); `highlight` marks it as
+// the active item and tints everything inside it.
+import AppIcon from './AppIcon.astro';
+interface Props {
+  name: string;
+  defaultOpen?: boolean;
+  openable?: boolean;
+  highlight?: boolean;
+}
+const { name, defaultOpen = false, openable = true, highlight = false } = Astro.props as Props;
+---
+<li
+  class:list={['wd-tree-item', 'wd-tree-folder', { 'wd-tree-highlight': highlight, 'wd-tree-static': !openable }]}
+  role="treeitem"
+  aria-expanded={defaultOpen ? 'true' : 'false'}
+  tabindex="-1"
+>
+  <span class="wd-tree-row">
+    <span class="wd-tree-chevron" aria-hidden="true"></span>
+    <AppIcon icon="lucide:folder" class="wd-tree-icon wd-tree-icon-closed" />
+    <AppIcon icon="lucide:folder-open" class="wd-tree-icon wd-tree-icon-open" />
+    <span class="wd-tree-name">{name}</span>
+  </span>
+  <ul class="wd-tree-group" role="group"><slot /></ul>
+</li>

package/src/components/Update.astro

@@ -0,0 +1,171 @@
+---
+// Mintlify's <Update> - one changelog entry: `label` (usually a date or
+// version) in a left column that sticks while its content scrolls, with
+// `description` and `tags` under it. The label is a linkable anchor, deduped
+// against every other anchor on the page by remarkTitleAnchorIds, same as a
+// Callout/Accordion title. Stacks into one column on narrow screens.
+//
+// When any Update on the page has `tags`, a row of tag filters appears
+// above the first one (the script below) - Mintlify shows the same filters
+// in its right-hand panel. `rss` is accepted but unused: writedocs doesn't
+// generate an RSS feed from updates.
+interface Props {
+  label: string;
+  description?: string;
+  tags?: string[];
+  rss?: { title?: string; description?: string };
+  _titleId?: string;
+}
+const { label, description, tags = [], _titleId } = Astro.props as Props;
+function slugify(value: string): string {
+  return value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}
+const id = _titleId ?? slugify(label);
+---
+<section class="wd-update" data-update-tags={JSON.stringify(tags)}>
+  <div class="wd-update-meta">
+    <div class="wd-update-label" id={id}>
+      <a href={`#${id}`}>{label}</a>
+    </div>
+    {description && <div class="wd-update-description">{description}</div>}
+    {tags.length > 0 && (
+      <div class="wd-update-tags">
+        {tags.map((tag) => <span class="wd-update-tag">{tag}</span>)}
+      </div>
+    )}
+  </div>
+  <div class="wd-update-body"><slot /></div>
+</section>
+<script>
+  // Builds one tag-filter bar per page, before the first Update, from every
+  // Update's tags. Clicking a tag shows only the updates that have it;
+  // clicking it again (or "All") shows everything.
+  function initUpdateFilters(root: ParentNode) {
+    const updates = Array.from(root.querySelectorAll<HTMLElement>('.wd-update'));
+    if (updates.length === 0 || updates[0].dataset.wdInit) return;
+    updates.forEach((u) => (u.dataset.wdInit = 'true'));
+    const tagsOf = (u: HTMLElement): string[] => {
+      try {
+        return JSON.parse(u.dataset.updateTags ?? '[]');
+      } catch {
+        return [];
+      }
+    };
+    const allTags = [...new Set(updates.flatMap(tagsOf))];
+    if (allTags.length === 0) return;
+
+    const bar = document.createElement('div');
+    bar.className = 'wd-update-filters';
+    bar.setAttribute('role', 'toolbar');
+    bar.setAttribute('aria-label', 'Filter updates by tag');
+    let active: string | null = null;
+    const buttons: HTMLButtonElement[] = [];
+    const apply = () => {
+      updates.forEach((u) => (u.hidden = active !== null && !tagsOf(u).includes(active)));
+      buttons.forEach((b) => b.setAttribute('aria-pressed', String((b.dataset.tag ?? null) === active)));
+    };
+    for (const tag of [null, ...allTags]) {
+      const b = document.createElement('button');
+      b.type = 'button';
+      b.className = 'wd-update-filter';
+      b.textContent = tag ?? 'All';
+      if (tag !== null) b.dataset.tag = tag;
+      b.addEventListener('click', () => {
+        active = tag === null || active === tag ? null : tag;
+        apply();
+      });
+      buttons.push(b);
+      bar.appendChild(b);
+    }
+    updates[0].before(bar);
+    apply();
+  }
+  initUpdateFilters(document);
+  document.addEventListener('astro:page-load', () => initUpdateFilters(document));
+</script>
+<style>
+  .wd-update {
+    display: grid;
+    grid-template-columns: 11rem minmax(0, 1fr);
+    gap: 2rem;
+    padding: 2rem 0;
+    border-top: 1px solid var(--wd-border);
+  }
+  .wd-update:first-of-type {
+    border-top: 0;
+  }
+  .wd-update[hidden] {
+    display: none;
+  }
+  .wd-update-meta {
+    position: sticky;
+    top: calc(var(--wd-topbar-offset, 5rem) + 1rem);
+    align-self: start;
+  }
+  .wd-update-label {
+    scroll-margin-top: calc(var(--wd-topbar-offset, 5rem) + 1rem);
+  }
+  .wd-update-label a {
+    display: inline-block;
+    padding: 0.2rem 0.6rem;
+    border-radius: 999px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    text-decoration: none;
+    color: var(--wd-primary);
+    background: color-mix(in srgb, var(--wd-primary) 12%, transparent);
+  }
+  .wd-update-description {
+    margin-top: 0.5rem;
+    font-size: 0.85rem;
+    color: var(--wd-text-muted);
+  }
+  .wd-update-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.3rem;
+    margin-top: 0.5rem;
+  }
+  .wd-update-tag {
+    padding: 0.05rem 0.45rem;
+    border: 1px solid var(--wd-border);
+    border-radius: 999px;
+    font-size: 0.72rem;
+    color: var(--wd-text-muted);
+  }
+  .wd-update-body > :global(:first-child) {
+    margin-top: 0;
+  }
+  @media (max-width: 720px) {
+    .wd-update {
+      grid-template-columns: minmax(0, 1fr);
+      gap: 0.75rem;
+    }
+    .wd-update-meta {
+      position: static;
+    }
+  }
+  :global(.wd-update-filters) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    margin: 1rem 0 0.5rem;
+  }
+  :global(.wd-update-filter) {
+    padding: 0.2rem 0.7rem;
+    border: 1px solid var(--wd-border);
+    border-radius: 999px;
+    background: none;
+    color: var(--wd-text-muted);
+    font-size: 0.8rem;
+    cursor: pointer;
+  }
+  :global(.wd-update-filter[aria-pressed='true']) {
+    border-color: var(--wd-primary);
+    color: var(--wd-primary);
+    background: color-mix(in srgb, var(--wd-primary) 10%, transparent);
+  }
+</style>

package/src/components/View.astro

@@ -0,0 +1,214 @@
+---
+// Mintlify's <View title="..." icon="..."> - content for one of several
+// alternatives (a language, a framework) on the same page. Every distinct
+// `title` on the page becomes an option in one switcher, placed under the
+// page title (or before the first View on a page without one); only the
+// selected title's Views show. As on Mintlify, the table of contents only
+// lists the headings in the visible Views.
+//
+// The choice is remembered (localStorage) across pages, so a reader who
+// picks "Python" keeps seeing Python wherever the same title exists. A
+// link to an anchor inside a hidden View switches to that View first.
+import AppIcon from './AppIcon.astro';
+interface Props {
+  title: string;
+  icon?: string;
+}
+const { title, icon } = Astro.props as Props;
+---
+<div class="wd-view" data-view-title={title}>
+  {icon && <span class="wd-view-icon-src" hidden><AppIcon icon={icon} class="wd-view-icon" /></span>}
+  <slot />
+</div>
+<script>
+  const STORAGE_KEY = 'wd-view';
+
+  function initViews(root: Document) {
+    const views = Array.from(root.querySelectorAll<HTMLElement>('.wd-view[data-view-title]'));
+    if (views.length === 0 || root.querySelector('.wd-view-switcher')) return;
+
+    const titles = [...new Set(views.map((v) => v.dataset.viewTitle!))];
+    const iconFor = (title: string) =>
+      views.find((v) => v.dataset.viewTitle === title)?.querySelector<HTMLElement>('.wd-view-icon-src > *') ?? null;
+
+    let stored: string | null = null;
+    try {
+      stored = localStorage.getItem(STORAGE_KEY);
+    } catch {}
+    const hashTarget = location.hash ? document.getElementById(decodeURIComponent(location.hash.slice(1))) : null;
+    const hashView = hashTarget?.closest<HTMLElement>('.wd-view')?.dataset.viewTitle;
+    let current = hashView ?? (stored && titles.includes(stored) ? stored : titles[0]);
+
+    // The switcher: a button showing the current option, and a menu of all.
+    const switcher = document.createElement('div');
+    switcher.className = 'wd-view-switcher';
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'wd-view-button';
+    button.setAttribute('aria-haspopup', 'listbox');
+    button.setAttribute('aria-expanded', 'false');
+    const menu = document.createElement('ul');
+    menu.className = 'wd-view-menu';
+    menu.setAttribute('role', 'listbox');
+    menu.hidden = true;
+
+    const label = (title: string) => {
+      const frag = document.createDocumentFragment();
+      const icon = iconFor(title);
+      if (icon) frag.appendChild(icon.cloneNode(true));
+      frag.appendChild(document.createTextNode(title));
+      return frag;
+    };
+    const options = titles.map((title) => {
+      const li = document.createElement('li');
+      li.setAttribute('role', 'option');
+      li.tabIndex = -1;
+      li.dataset.viewTitle = title;
+      li.appendChild(label(title));
+      li.addEventListener('click', () => {
+        select(title, true);
+        close();
+        button.focus();
+      });
+      li.addEventListener('keydown', (e) => {
+        const i = options.indexOf(li);
+        if (e.key === 'ArrowDown') options[Math.min(i + 1, options.length - 1)].focus();
+        else if (e.key === 'ArrowUp') options[Math.max(i - 1, 0)].focus();
+        else if (e.key === 'Enter' || e.key === ' ') li.click();
+        else if (e.key === 'Escape') {
+          close();
+          button.focus();
+        } else return;
+        e.preventDefault();
+      });
+      menu.appendChild(li);
+      return li;
+    });
+
+    const open = () => {
+      menu.hidden = false;
+      button.setAttribute('aria-expanded', 'true');
+      (options.find((o) => o.dataset.viewTitle === current) ?? options[0]).focus();
+    };
+    const close = () => {
+      menu.hidden = true;
+      button.setAttribute('aria-expanded', 'false');
+    };
+    button.addEventListener('click', () => (menu.hidden ? open() : close()));
+    document.addEventListener('click', (e) => {
+      if (!switcher.contains(e.target as Node)) close();
+    });
+
+    function select(title: string, remember: boolean) {
+      current = title;
+      views.forEach((v) => (v.hidden = v.dataset.viewTitle !== title));
+      button.replaceChildren(label(title));
+      const chevron = document.createElement('span');
+      chevron.className = 'wd-view-chevron';
+      chevron.setAttribute('aria-hidden', 'true');
+      button.appendChild(chevron);
+      options.forEach((o) => o.setAttribute('aria-selected', String(o.dataset.viewTitle === title)));
+      // Table of contents: only headings the reader can currently see.
+      document.querySelectorAll<HTMLAnchorElement>('.wd-toc a[data-toc-slug]').forEach((a) => {
+        const heading = document.getElementById(a.dataset.tocSlug ?? '');
+        const li = a.closest('li');
+        if (li) li.hidden = Boolean(heading?.closest('.wd-view[hidden]'));
+      });
+      if (remember) {
+        try {
+          localStorage.setItem(STORAGE_KEY, title);
+        } catch {}
+      }
+    }
+
+    switcher.append(button, menu);
+    const header = document.querySelector('.wd-article-header');
+    if (header) header.after(switcher);
+    else views[0].before(switcher);
+    select(current, false);
+    if (hashTarget && hashView) hashTarget.scrollIntoView();
+
+    // Same for an in-page link to an anchor inside a hidden View.
+    window.addEventListener('hashchange', () => {
+      if (!switcher.isConnected) return;
+      const el = location.hash ? document.getElementById(decodeURIComponent(location.hash.slice(1))) : null;
+      const title = el?.closest<HTMLElement>('.wd-view[hidden]')?.dataset.viewTitle;
+      if (!title) return;
+      select(title, false);
+      el!.scrollIntoView();
+    });
+  }
+  initViews(document);
+  document.addEventListener('astro:page-load', () => initViews(document));
+</script>
+<style>
+  .wd-view[hidden] {
+    display: none;
+  }
+  :global(.wd-view-switcher) {
+    position: relative;
+    display: inline-block;
+    margin: 0 0 1rem;
+  }
+  :global(.wd-view-button) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    padding: 0.35rem 0.75rem;
+    border: 1px solid var(--wd-border);
+    border-radius: 0.5rem;
+    background: var(--wd-background);
+    color: var(--wd-text);
+    font-size: 0.875rem;
+    cursor: pointer;
+  }
+  :global(.wd-view-button:hover) {
+    border-color: var(--wd-primary);
+  }
+  :global(.wd-view-chevron) {
+    width: 0.4rem;
+    height: 0.4rem;
+    margin-left: 0.2rem;
+    border-right: 1.5px solid currentColor;
+    border-bottom: 1.5px solid currentColor;
+    transform: translateY(-2px) rotate(45deg);
+  }
+  :global(.wd-view-menu) {
+    position: absolute;
+    top: calc(100% + 0.3rem);
+    left: 0;
+    z-index: 20;
+    min-width: 100%;
+    margin: 0;
+    padding: 0.3rem;
+    list-style: none;
+    border: 1px solid var(--wd-border);
+    border-radius: 0.5rem;
+    background: var(--wd-background);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+  }
+  :global(.wd-view-menu li) {
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+    margin: 0;
+    padding: 0.35rem 0.6rem;
+    border-radius: 0.35rem;
+    font-size: 0.875rem;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+  :global(.wd-view-menu li:hover),
+  :global(.wd-view-menu li:focus),
+  :global(.wd-view-menu li[aria-selected='true']) {
+    outline: none;
+    background: color-mix(in srgb, var(--wd-primary) 10%, transparent);
+    color: var(--wd-primary);
+  }
+  :global(svg.wd-view-icon),
+  :global(span.wd-view-icon) {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+  }
+</style>

package/src/components/Visibility.astro

@@ -0,0 +1,11 @@
+---
+// Mintlify's <Visibility for="humans|agents">. On the rendered site,
+// `humans` content shows and `agents` content doesn't; the per-page `.md`
+// route and llms-full.txt do the opposite (see lib/visibility.js). A
+// <Visibility> with no `for` counts as `humans`.
+interface Props {
+  for?: 'humans' | 'agents';
+}
+const { for: audience = 'humans' } = Astro.props as Props;
+---
+{audience !== 'agents' && <slot />}

package/src/components/compound.ts

@@ -0,0 +1,21 @@
+// Mintlify's dotted component names - <Tree.Folder>, <Color.Item>,
+// <GitHub.Repo>, ... MDX compiles <Tree.Folder> to a property lookup on
+// whatever `Tree` resolves to, so the parts are attached as properties of
+// their parent here, once, and everything that hands components to MDX (the
+// src/components/index.ts barrel and [...slug].astro's `components` map)
+// takes these three from this module rather than importing the .astro files
+// directly. `FileTree` is Mintlify's other name for `Tree`.
+import TreeRoot from './Tree.astro';
+import TreeFolder from './TreeFolder.astro';
+import TreeFile from './TreeFile.astro';
+import ColorRoot from './Color.astro';
+import ColorRow from './ColorRow.astro';
+import ColorItem from './ColorItem.astro';
+import GitHubRepo from './GitHubRepo.astro';
+
+export const Tree = Object.assign(TreeRoot, { Folder: TreeFolder, File: TreeFile });
+export const FileTree = Tree;
+export const Color = Object.assign(ColorRoot, { Row: ColorRow, Item: ColorItem });
+// Mintlify has no bare <GitHub> - only <GitHub.Repo> - so this is just a
+// namespace object, not a component.
+export const GitHub = { Repo: GitHubRepo };

package/src/components/index.ts

@@ -51,3 +51,10 @@ export { default as ParamField } from './ParamField.astro';
 export { default as ResponseField } from './ResponseField.astro';
 export { default as Columns } from './Columns.astro';
 export { default as Tooltip } from './Tooltip.astro';
+export { default as Update } from './Update.astro';
+export { default as Tile } from './Tile.astro';
+export { default as Panel } from './Panel.astro';
+export { default as Prompt } from './Prompt.astro';
+export { default as View } from './View.astro';
+export { default as Visibility } from './Visibility.astro';
+export { Tree, FileTree, Color, GitHub } from './compound';