<!--
TEXT RENDERING & PARAMETER NOTES

VIEWER PARAMETERS

viewer.html supports URL parameters to control rendering.

Base usage:
viewer.html?page=path/to/file

Available parameters:

1. page (required)
   - Path to .txt file (without .txt extension)
   - Example: page=docs/README

2. label
   - Sets header label (top-right text)
   - Example: label=Support

3. pageTitle
   - Sets browser tab title AND page title text
   - Example: pageTitle=FAQ%20%26%20Troubleshooting

4. contentWidth
   - Max width of content area (in px)
   - Example: contentWidth=900

5. headerWidth
   - Max width of header container (in px)
   - Example: headerWidth=940

--------------------------------------------------

DEFAULTS (Text File Metadata)

Text files may optionally define defaults using:

{{meta
label="Support"
pageTitle="FAQ & Troubleshooting"
contentWidth="900"
headerWidth="940"
}}

Behavior:
- Metadata provides default values
- URL parameters override metadata
- If neither is provided, viewer uses built-in defaults

URL Override Example:
https://yt-mate.com/viewer.html?page=docs/version_history&headerWidth=1040&contentWidth=1000&pageTitle=Version%20History&label=Changelog

--------------------------------------------------

PRIORITY ORDER

1. URL parameters (highest priority)
2. Text file {{meta}} block
3. Viewer defaults (fallback)

--------------------------------------------------

NOTES

- URL values should be URL-encoded
- Width values must be numeric (no "px")
- page is the only required parameter
- Metadata block must appear at top of text file

TEXT RENDERING NOTES

Supported patterns:

1. Markdown links
   [label](https://example.com)
   [label](#section-id)
   - Renders clickable link
   - External links open in new tab and show ↗
   - Fragment links (#...) scroll to in-page anchors

2. Plain URLs
   https://example.com
   - Auto-linkified
   - Same external detection + ↗

3. Anchor blocks
   {{anchor id="section-id"}}Section Title{{/anchor}}
   - Renders as a heading with id for fragment navigation

4. Version token
   {{VERSION}}
   - Replaced with value from /software/ytmate-version.js

5. Copy block
   {{copy text="text to copy"}}visible text{{/copy}}
   - Displays: visible text
   - Appends copy icon
   - Copies value from text="..."

6. Image block
   Examples:
   {{image src="/images/hero.jpg"}}
   {{image src="/images/hero.jpg" caption="Paste a YouTube URL to begin."}}
   {{image src="/images/hero.jpg" width="600" height="400" align="right" badge="View"}}
   {{image src="/images/hero.jpg" caption="Paste a YouTube URL to begin." badge="View" width="600" height="400" align="right"}}
   {{image src="/images/hero.jpg" showBadge="false"}}
   {{image src="/images/hero.jpg" badgeAlign="left"}}
   {{image src="/images/hero.jpg" paddingTop="20" paddingBottom="30"}}
   {{image src="/images/hero.jpg" badgeAlign="right-top"}}
   {{image src="/images/hero.jpg" badgeAlign="right-middle"}}
   {{image src="/images/hero.jpg" badgeAlign="right-bottom"}}
   {{image src="/images/hero.jpg" badgeAlign="left-top"}}
   {{image src="/images/hero.jpg" badgeAlign="left-middle"}}
   {{image src="/images/hero.jpg" badgeAlign="left-bottom"}}
   {{image src="/images/example.jpg" badge="View"}}
   {{image src="/images/example.jpg" badgeAlign="left"}}
   {{image src="/images/example.jpg" badgeAlign="right-top"}}
   {{image src="/images/example.jpg" badgeAlign="center" badgeOffsetY="-10"}}   // move up slightly from default position
   {{image src="/images/example.jpg" badgeAlign="center" badgeOffsetX="5" badgeOffsetY="5"}}   // move down/right from default position
   {{image src="/images/example.jpg" badgeAlign="right" badgeOffsetX="0" badgeOffsetY="0"}}   // default position (no additional offset)
   {{image src="/images/example.jpg" badgeAlign="right" badgeOffsetX="-9" badgeOffsetY="-9"}}   // move further up/left from default position
   {{image src="/images/example.jpg" badgeAlign="right" badgeOffsetX="12" badgeOffsetY="-6"}}   // move right and slightly up from default position

   Parameters:
   - src (optional): fallback image path (used if no responsive sources provided)
   - small (optional): small image source (~480px)
   - medium (optional): medium image source (~1024px)
   - large (optional): large image source (~1920px)
   - caption (optional): lightbox text below image (default: empty)
   - badge (optional): overlay text on inline image (default: "View")
   - showBadge (optional): true | false (default: true)
   - badgeAlign (optional): 
     left | center | right 
     left-top | left-middle | left-bottom 
     right-top | right-middle | right-bottom (default: right; controls badge position)
   - badgeOffsetX (optional): horizontal offset in px relative to default (positive = right, negative = left)
   - badgeOffsetY (optional): vertical offset in px relative to default (positive = down, negative = up)
   - width (optional): pixel width (number only)
   - height (optional): pixel height (number only, default: 100)
   - align (optional): left | center | right (default: left)
   - paddingTop (optional): top spacing in px (default: 5)
   - paddingBottom (optional): bottom spacing in px (default: 0)

   Behavior:
   - Renders an inline image
   - Clicking opens the lightbox viewer
   - Specifying only width or height preserves aspect ratio

7. Divider block
   {{divider}}
   {{divider width="600" thickness="2" color="#D8D2C8" paddingTop="20" paddingBottom="20" align="center"}}

   Parameters:
   - width (optional): px or % (default: 500px)
   - thickness (optional): px (default: 2)
   - color (optional): border color (default: #D8D2C8)
   - paddingTop (optional): top spacing in px (default: 2)
   - paddingBottom (optional): bottom spacing in px (default: 5)
   - align (optional): left | center | right (default: left)

   Behavior:
   - Renders a horizontal divider
   - Numeric width values are treated as px
   - Percentage width values are supported

8. Divider block
   {{divider}}
   {{divider width="600" thickness="2" color="#D8D2C8" paddingTop="20" paddingBottom="20" align="center"}}

   Parameters:
   - width (optional): px or % (default: 100%)
   - thickness (optional): px (default: 1)
   - color (optional): border color (default: #D8D2C8)
   - paddingTop (optional): top spacing in px
   - paddingBottom (optional): bottom spacing in px
   - align (optional): left | center | right (default: center)

   Behavior:
   - Renders a horizontal divider
   - Numeric width values are treated as px
   - Percentage width values are supported

9. Text style block
   {{text style="main-title"}}THE MAIN PROMPT{{/text}}
   {{text style="section-title"}}First Launch{{/text}}
   {{text style="subsection-title"}}On first run, you will see:{{/text}}
   {{text style="body-text"}}Updates{{/text}}

   Parameters:
   - style (required): main-title | section-title | subsection-title | body-text

   Behavior:
   - Renders text using the matching preset font, size, and color

10. Code block
   {{code}}npm install{{/code}}
   {{code}}ytmate --download "https://youtube.com/watch?v=..."{{/code}}
   {{code}}C:\YTMate\ytmate.exe --help{{/code}}

   Parameters:
   - none

   Behavior:
   - Renders inline code/command text in a CLI-style monospace format

11. Prompt block
   {{prompt}}[Interactive] Paste YouTube URL:{{/prompt}}
   {{prompt}}> ytmate -m{{/prompt}}

   Parameters:
   - none

   Behavior:
   - Renders CLI prompt/output text
   - Uses classic terminal font (Consolas/Courier New)
   - Includes subtle prompt prefix for terminal feel

Notes:
- {{VERSION}} replaced before all parsing
- Copy blocks processed before links
- Link detection ignores www and case
- Content rendered via DOM nodes
working
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="YTMate is a clean, no-ads YouTube downloader for Windows. Fast, local downloads with no tracking, no popups, and a simple workflow from link to file.">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Open Graph tags -->
  <meta property="og:title" content="YTMate YouTube Downloader">
  <meta property="og:description" content="Fast, local YouTube downloader. No ads. No tracking. No popups. No surprises.">
  <meta property="og:image" content="https://yt-mate.com/images/og-image.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="512">
  <meta property="og:image:height" content="512">
  <meta property="og:site_name" content="YTMate">
  <meta property="og:url" content="https://yt-mate.com/viewer.html">
  <meta property="og:type" content="website">
    <!-- sidebar color -->
  <meta name="theme-color" content="#ffe8d8">
    <!-- summary (icon) / summary_large_image (web) -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="YTMate — YouTube Downloader">
  <meta name="twitter:description" content="Fast, local YouTube downloader. No ads. No tracking. No popups. No surprises.">
  <meta name="twitter:image" content="https://yt-mate.com/images/og-image.png">
  <meta property="og:site_name" content="YTMate">
  <meta name="twitter:image:alt" content="YTMate app preview">
<link rel="icon" href="/favicon.ico">
<title>Viewer</title>

<link rel="stylesheet" href="/css/ytmate.css">
<link rel="stylesheet" href="/css/styles.css">

<style>
.wrapper {
  max-width: 900px;
  margin: 10px auto 60px;
  padding: 0 20px;
}
.card {
  background: #fff7f1;
  border: 2px solid #f0d2be;
  border-radius: 32px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(118,57,27,0.08);
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.title {
  margin: 0 20px;
  font-size: 1.75rem;
  font-weight: 900;
  color: #ae2b2f;
}
.back {
  margin: 5px 20px 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: #5a55df;
}
.content {
  background: #ffffff;
  border: 2px solid #e9cbb7;
  margin: 15px;
  border-radius: 24px;
  padding: 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
  line-height: 1.4;
  white-space: pre-wrap;
  color: #334155;
}
.home-icon {
  display: inline-block;
  width: 64px;
  height: 64px;
  background-image: url("/images/application-icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.header-container {
  max-width: 940px;
}

body.is-loading {
  visibility: hidden;
}

body {
  min-height: 100vh;
  background-attachment: scroll;
  background-size: 100% 200%;
}

.wrapper {
  min-height: calc(100vh - 120px);
}

.content a {
  color: #7a5c52;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
}

.content a:visited {
  color: #7a5c52;
  font-weight: 700;
}

.content a:hover {
  color: #c0392b;
  text-decoration: underline;
  font-weight: 700;
}

.doc-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 1000;
}

.doc-lightbox-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.doc-lightbox-card {
  position: relative;
  background: #ffffff;
  border-radius: 10px;
  padding: 12px 12px 15px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  max-width: min(920px, 96vw);
  width: auto;
  text-align: center;
}

.doc-lightbox-image {
  display: block;
  max-width: min(920px, 92vw);
  max-height: 70vh;
  width: auto;
  height: auto;
  border-radius: 8px;
}

.doc-lightbox-caption {
  margin-top: 12px;
  font-size: 14px;
  color: #444;
}

.doc-lightbox-caption:empty {
  display: none;
}

.doc-lightbox-close {
  position: absolute;
  top: -10px;
  right: -10px;
  border: 0;
  background: rgba(0,0,0,0.6);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.doc-inline-image-wrap {
  position: relative;
  display: block;
  max-width: 100%;
}

.doc-inline-image-wrap.align-left {
  text-align: left;
}

.doc-inline-image-wrap.align-center {
  text-align: center;
}

.doc-inline-image-wrap.align-right {
  text-align: right;
}

.doc-inline-image-badge {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 16px;
  background: rgba(55, 65, 81, 0.92);
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);
  z-index: 2;
}

.doc-inline-image-badge.align-left {
  left: 16px;
  transform: none;
}

.doc-inline-image-badge.align-right {
  left: auto;
  right: 16px;
  transform: none;
}

.doc-inline-image-badge::before {
  content: "↖";
  font-size: 1.1rem;
  line-height: 1;
}

.doc-text-style {
  display: inline;
}

.doc-text-style-main-title {
  font-family: "Inter", "Poppins", sans-serif, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 21px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.25px;
  margin-bottom: 0;
  color: #3F5E8C;
}

.doc-text-style-section-title {
  font-family: "Inter", "Poppins", sans-serif, system-ui;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 600;
  color: #2F2F2F;
  margin-top: 20px;
}

.doc-text-style-subsection-title {
  font-family: font-family: "Inter", "Poppins", sans-serif, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  color: #111827;

}
.doc-text-style-body-text {
  font-family: font-family: "Inter", "Poppins", sans-serif, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;
  color: #374151;

}

.doc-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Liberation Mono", Consolas, "Courier New", monospace;
  font-size: 0.95em;
  background: #e4e4e7;
  color: #1f2937;
  padding: 2px 6px;
  border-radius: 6px;
}


.doc-code-prompt {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.95em;
  background: #0c0c0c;
  color: #fefefe;
  padding: 2px 6px;
  border-radius: 6px;
}

</style>
</head>

<body class="is-loading">

<div class="mx-auto w-full px-6 py-6 lg:px-10 header-container">
  <header class="rounded-[28px] border border-[#f0d2be] bg-[#ffe8d8] shadow-[0_20px_60px_rgba(118,57,27,0.08)]">
    <div class="flex items-center justify-between px-6 py-5">
      
      <div class="flex items-center gap-4">
        <a href="/" class="home-icon" aria-label="Home"></a>
        <div>
          <div class="text-3xl font-black tracking-tight text-[#ae2b2f]">YTMate™</div>
          <div class="text-sm text-slate-600">Interactive YouTube downloader for Windows</div>
        </div>
      </div>

      <div id="header-label" class="text-sm font-semibold tracking-[0.14em] text-slate-500">
        Documentation
      </div>

    </div>
  </header>
</div>

<div class="wrapper">
  <div class="card">
    <div class="header">
      <div id="title" class="title">Loading...</div>
      <a href="/" class="back" id="back-link">Back</a>
    </div>

    <div id="content" class="content">Loading...</div>
  </div>
</div>


<div class="doc-lightbox-overlay" id="doc-lightbox" aria-hidden="true">
  <div class="doc-lightbox-card">
    <button type="button" class="doc-lightbox-close" id="doc-lightbox-close" aria-label="Close">&times;</button>
    <img class="doc-lightbox-image" id="doc-lightbox-image" alt="">
    <div class="doc-lightbox-caption" id="doc-lightbox-caption"></div>
  </div>
</div>

<script src="/software/ytmate-version.js"></script>
<script>
const params = new URLSearchParams(window.location.search);

const page = params.get('page');
const label = params.get('label');
const pageTitle = params.get('pageTitle');
const contentWidth = params.get('contentWidth');
const headerWidth = params.get('headerWidth');

const headerEl = document.querySelector('.header-container');
const wrapperEl = document.querySelector('.wrapper');
const titleEl = document.getElementById('title');
const contentEl = document.getElementById('content');
const headerLabelEl = document.getElementById('header-label');

const lightboxEl = document.getElementById('doc-lightbox');
const lightboxImageEl = document.getElementById('doc-lightbox-image');
const lightboxCaptionEl = document.getElementById('doc-lightbox-caption');
const lightboxCloseEl = document.getElementById('doc-lightbox-close');

const escapeHtml = (value) =>
  value
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');

const normalizeHost = (value) => {
  const parsed = new URL(value, location.origin);
  return parsed.hostname.replace(/^www\./, '').toLowerCase();
};

const parseTagAttributes = (text) => {
  const attrs = {};
  text.replace(/(\w+)="([^"]*)"/g, (_, key, val) => {
    attrs[key] = val;
  });
  return attrs;
};

const getImageSourceSet = (attrs) => {
  const small = attrs.small;
  const medium = attrs.medium;
  const large = attrs.large;
  const base = attrs.src || '';

  return {
    small,
    medium,
    large,
    base,
    inlineSrc: small || base || medium || large || '',
    lightboxSmall: small || base || medium || large || '',
    lightboxMedium: medium || small || base || large || '',
    lightboxLarge: large || medium || small || base || '',
    lightboxFallback: base || small || medium || large || ''
  };
};

const applyInlineImageStyles = (img, attrs) => {
  img.alt = attrs.caption || '';
  img.style.cursor = 'pointer';
  img.style.maxWidth = '100%';
  img.style.borderRadius = '12px';
  img.style.display = 'block';

  if (attrs.width) img.style.width = attrs.width + 'px';
  if (attrs.height) {
    img.style.height = attrs.height + 'px';
  } else {
    img.style.height = '100px';
  }

  img.setAttribute('data-caption', attrs.caption || '');
};

const setLightboxImageAttributes = (img, sources) => {
  img.src = sources.inlineSrc;
  img.setAttribute('data-lightbox-small', sources.lightboxSmall);
  img.setAttribute('data-lightbox-medium', sources.lightboxMedium);
  img.setAttribute('data-lightbox-large', sources.lightboxLarge);
  img.setAttribute('data-lightbox-fallback', sources.lightboxFallback);
};

const renderContent = (text) => {
  const fragment = document.createDocumentFragment();
  const patterns = [
    {
      regex: /\{\{image\s+([^}]+)\}\}/g,
      build: (match) => {
        const attrs = parseTagAttributes(match[1]);

        const wrap = document.createElement('span');
        wrap.className = 'doc-inline-image-wrap doc-image-block';

        const align = attrs.align || 'left';
        wrap.classList.add('align-' + align);

        wrap.style.marginTop = (attrs.paddingTop ?? '5') + 'px';
        wrap.style.marginBottom = (attrs.paddingBottom ?? '0') + 'px';

        const frame = document.createElement('span');
        frame.style.position = 'relative';
        frame.style.display = 'inline-block';
        frame.style.maxWidth = '100%';

        const img = document.createElement('img');
        const imageSources = getImageSourceSet(attrs);

        setLightboxImageAttributes(img, imageSources);
        applyInlineImageStyles(img, attrs);

        const showBadge = attrs.showBadge !== 'false';

        if (showBadge) {
          const badge = document.createElement('span');
          badge.className = 'doc-inline-image-badge';

          const badgeAlign = attrs.badgeAlign || 'right';
          const [horizontal, rawVertical] = badgeAlign.split('-');
          const vertical = rawVertical === 'middle' ? 'center' : (rawVertical || 'bottom');
          const explicitBottom = rawVertical === 'bottom';

          if (horizontal !== 'center') {
            badge.classList.add('align-' + horizontal);
          }

          badge.style.top = 'auto';
          badge.style.bottom = 'auto';
          badge.style.left = '';
          badge.style.right = '';
          badge.style.transform = 'none';

          const baseOffset = 10;

          if (horizontal === 'center') {
            badge.style.left = '50%';
          } else if (horizontal === 'left') {
            badge.style.left = explicitBottom ? (-baseOffset + 'px') : (vertical === 'bottom' ? (baseOffset + 'px') : (-baseOffset + 'px'));
          } else if (horizontal === 'right') {
            badge.style.right = explicitBottom ? (-baseOffset + 'px') : (vertical === 'bottom' ? (baseOffset + 'px') : (-baseOffset + 'px'));
          }

          if (vertical === 'top') {
            badge.style.top = (-baseOffset + 'px');
          } else if (vertical === 'center') {
            badge.style.top = '50%';
          } else {
            badge.style.bottom = (-baseOffset + 'px');
          }

          const userOffsetX = parseInt(attrs.badgeOffsetX ?? '0', 10);
          const userOffsetY = parseInt(attrs.badgeOffsetY ?? '0', 10);

          const offsetX = isNaN(userOffsetX) ? 0 : userOffsetX;
          const offsetY = isNaN(userOffsetY) ? 0 : userOffsetY;

          // apply offsets directly to positioning (edge-based system)
          if (horizontal === 'center') {
            badge.style.transform = 'translateX(-50%)';
          } else {
            badge.style.transform = 'none';
          }

          if (horizontal === 'left') {
            badge.style.left = (parseInt(badge.style.left || baseOffset) + offsetX) + 'px';
          } else if (horizontal === 'right') {
            badge.style.right = (parseInt(badge.style.right || baseOffset) + offsetX) + 'px';
          }

          if (vertical === 'top') {
            badge.style.top = (parseInt(badge.style.top || baseOffset) + offsetY) + 'px';
          } else if (vertical === 'center') {
            badge.style.top = '50%';

            // preserve horizontal transform while adding vertical centering
            const existingTransform = badge.style.transform || '';
            if (existingTransform.includes('translateX')) {
              badge.style.transform = existingTransform + ' translateY(-50%)';
            } else {
              badge.style.transform = 'translateY(-50%)';
            }
          } else {
            badge.style.bottom = (parseInt(badge.style.bottom || baseOffset) + offsetY) + 'px';
          }

          badge.textContent = attrs.badge || 'View';
          frame.append(img, badge);
        } else {
          frame.append(img);
        }

        wrap.append(frame);
        return wrap;
      }
    },
    {
      regex: /\{\{copy\s+text="([^"]+)"\}\}([\s\S]*?)\{\{\/copy\}\}/g,
      build: (match) => {
        const node = document.createDocumentFragment();
        node.append(document.createTextNode(match[2]));
        node.append(document.createTextNode(' '));

        const img = document.createElement('img');
        img.className = 'copy-cmd';
        img.setAttribute('data-cmd', match[1]);
        img.alt = 'Copy';
        img.title = 'Copy';
        img.style.display = 'inline-block';
        img.style.verticalAlign = 'middle';
        img.style.cursor = 'pointer';
        img.style.width = '14px';
        img.style.height = '14px';
        img.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNCcgaGVpZ2h0PScxNCcgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyBzdHJva2U9JyM2NDc0OGInIHN0cm9rZS13aWR0aD0nMic+PHJlY3QgeD0nOScgeT0nOScgd2lkdGg9JzEzJyBoZWlnaHQ9JzEzJyByeD0nMicvPjxyZWN0IHg9JzInIHk9JzInIHdpZHRoPScxMycgaGVpZ2h0PScxMycgcng9JzInLz48L3N2Zz4=';
        node.append(img);

        return node;
      }
    },
    {
      regex: /\{\{text\s+style="([^"]+)"\}\}([\s\S]*?)\{\{\/text\}\}/g,
      build: (match) => {
        const span = document.createElement('span');
        span.className = 'doc-text-style doc-text-style-' + match[1];
        span.textContent = match[2];
        return span;
      }
    },
    {
      regex: /\{\{code\}\}([\s\S]*?)\{\{\/code\}\}/g,
      build: (match) => {
        const span = document.createElement('span');
        span.className = 'doc-code';
        span.textContent = match[1];
        return span;
      }
    },
    {
      regex: /\{\{prompt\}\}([\s\S]*?)\{\{\/prompt\}\}/g,
      build: (match) => {
        const span = document.createElement('span');
        span.className = 'doc-code-prompt';
        span.textContent = match[1];
        return span;
      }
    },
    {
      regex: /\[([^\]]+)\]\(((?:https?:\/\/|#)[^\s)]+)\)/g,
      build: (match) => {
        const url = match[2];
        const isFragment = url.startsWith('#');
        const isExternal = !isFragment && normalizeHost(url) !== normalizeHost(location.origin);

        const link = document.createElement('a');
        link.href = url;
        if (!isFragment && isExternal) {
          link.target = '_blank';
          link.rel = 'noopener';
        }
        link.style.textDecoration = 'none';
        link.addEventListener('mouseenter', () => {
          link.style.textDecoration = 'underline';
        });
        link.addEventListener('mouseleave', () => {
          link.style.textDecoration = 'none';
        });
        link.textContent = match[1] + ((!isFragment && isExternal) ? ' ↗' : '');

        return link;
      }
    },
    {
      regex: /\{\{divider(?:\s+([^}]+))?\}\}/g,
      build: (match) => {
        const attrs = parseTagAttributes(match[1] || '');

        const el = document.createElement('span');
        el.className = 'doc-divider';
        el.style.display = 'block';

        const width = attrs.width || '500';
        const thickness = (attrs.thickness || '2') + 'px';
        const color = attrs.color || '#D8D2C8';

        el.style.borderTop = thickness + ' solid ' + color;
        el.style.width = /^\d+$/.test(width) ? width + 'px' : width;

        const align = attrs.align || 'left';
        if (align === 'center') el.style.marginLeft = el.style.marginRight = 'auto';
        if (align === 'right') el.style.marginLeft = 'auto';

        el.style.marginTop = (attrs.paddingTop || '2') + 'px';
        el.style.marginBottom = (attrs.paddingBottom || '5') + 'px';

        return el;
      }
    },
    {
      regex: /\{\{anchor\s+id="([^"]+)"\}\}([\s\S]*?)\{\{\/anchor\}\}/g,
      build: (match) => {
        const span = document.createElement('span');
        span.id = match[1];
        span.textContent = match[2];
        return span;
      }
    },
    {
      regex: /(^|[\s(>])(https?:\/\/[^\s<",!?]+)/g,
      build: (match) => {
        const node = document.createDocumentFragment();
        if (match[1]) {
          node.append(document.createTextNode(match[1]));
        }

        const url = match[2];
        const isExternal = normalizeHost(url) !== normalizeHost(location.origin);

        const link = document.createElement('a');
        link.href = url;
        if (isExternal) {
          link.target = '_blank';
          link.rel = 'noopener';
        }
        link.style.textDecoration = 'underline';
        link.textContent = url + (isExternal ? ' ↗' : '');
        node.append(link);

        return node;
      }
    }
  ];

  let index = 0;

  while (index < text.length) {
    let matched = false;

    for (const pattern of patterns) {
      pattern.regex.lastIndex = index;
      const match = pattern.regex.exec(text);

      if (!match || match.index !== index) continue;

      fragment.append(pattern.build(match));
      index = pattern.regex.lastIndex;
      matched = true;
      break;
    }

    if (matched) continue;

    let nextIndex = text.length;
    for (const pattern of patterns) {
      pattern.regex.lastIndex = index;
      const match = pattern.regex.exec(text);
      if (match && match.index < nextIndex) {
        nextIndex = match.index;
      }
    }

    fragment.append(document.createTextNode(text.slice(index, nextIndex)));
    index = nextIndex;
  }

  contentEl.replaceChildren(fragment);

  contentEl.querySelectorAll('.doc-divider, .doc-image-block, [id]').forEach((el) => {
    const prev = el.previousSibling;
    const next = el.nextSibling;

    if (prev && prev.nodeType === Node.TEXT_NODE && /^[\r\n\s]+$/.test(prev.textContent)) {
      prev.remove();
    }

    if (next && next.nodeType === Node.TEXT_NODE) {
      next.textContent = next.textContent.replace(/^[\r\n]+/, '');
      if (/^[\r\n\s]*$/.test(next.textContent)) {
        next.remove();
      }
    }
  });
};

const finishLoading = () => {
  document.body.classList.remove('is-loading');
};

const scrollToHash = () => {
  if (!location.hash) return;
  const target = document.getElementById(location.hash.slice(1));
  if (target) {
    target.scrollIntoView();
  }
};

const openLightbox = ({ small, medium, large, fallback, alt, caption }) => {
  if (!lightboxEl || !lightboxImageEl) return;

  const resolvedSmall = small || fallback || medium || large || '';
  const resolvedMedium = medium || resolvedSmall || large || fallback || '';
  const resolvedLarge = large || resolvedMedium || resolvedSmall || fallback || '';
  const resolvedFallback = fallback || resolvedSmall || resolvedMedium || resolvedLarge || '';

  const preloadImg = new Image();

  preloadImg.src = resolvedFallback;
  preloadImg.srcset = [
    resolvedSmall ? `${resolvedSmall} 480w` : '',
    resolvedMedium ? `${resolvedMedium} 1024w` : '',
    resolvedLarge ? `${resolvedLarge} 1920w` : ''
  ].filter(Boolean).join(', ');
  preloadImg.sizes = '92vw';

  preloadImg.onload = () => {
    lightboxImageEl.src = preloadImg.currentSrc || resolvedFallback;
    lightboxImageEl.srcset = preloadImg.srcset;
    lightboxImageEl.sizes = preloadImg.sizes;
    lightboxImageEl.alt = alt || '';

    if (lightboxCaptionEl) {
      lightboxCaptionEl.textContent = caption || '';
    }

    lightboxEl.classList.add('active');
    lightboxEl.setAttribute('aria-hidden', 'false');
  };
};

const closeLightbox = () => {
  if (!lightboxEl) return;
  lightboxEl.classList.remove('active');
  lightboxEl.setAttribute('aria-hidden', 'true');
};

if (label && headerLabelEl) {
  headerLabelEl.textContent = label;
}

if (pageTitle) {
  document.title = pageTitle;
}

if (headerWidth && headerEl) {
  headerEl.style.maxWidth = headerWidth + 'px';
}

if (!headerWidth && contentWidth && headerEl) {
  headerEl.style.maxWidth = (parseInt(contentWidth) + 40) + 'px';
}

if (contentWidth && wrapperEl) {
  wrapperEl.style.maxWidth = contentWidth + 'px';
}

if (!page) {
  titleEl.textContent = "Error";
  contentEl.textContent = "No page specified.";
  finishLoading();
} else {
  const filePath = '/' + page + '.txt';

  fetch(filePath, { cache: 'no-store' })
    .then(r => {
      if (!r.ok) throw new Error();
      return r.text();
    })
    .then(text => {

      // extract {{meta ...}} block
      const metaMatch = text.match(/\{\{meta([\s\S]*?)\}\}/);
      let meta = {};

      if (metaMatch) {
        const metaText = metaMatch[1];

        metaText.replace(/(\w+)="([^"]+)"/g, (m, key, value) => {
          meta[key] = value;
        });

        text = text.replace(/\r?\n?\{\{meta[\s\S]*?\}\}\r?\n?/, '');
      }

      // VERSION replacement
      if (window.APP_VERSION) {
        text = text.replace(/\{\{VERSION\}\}/g, window.APP_VERSION);
      }

      // apply metadata defaults (URL overrides)
      if (!label && meta.label && headerLabelEl) {
        headerLabelEl.textContent = meta.label;
      }

      if (!pageTitle && meta.pageTitle) {
        document.title = meta.pageTitle;
        titleEl.textContent = meta.pageTitle;
      }

      if (!contentWidth && meta.contentWidth && wrapperEl) {
        wrapperEl.style.maxWidth = meta.contentWidth + 'px';
      }

      if (!headerWidth && meta.headerWidth && headerEl) {
        headerEl.style.maxWidth = meta.headerWidth + 'px';
      }

      renderContent(text);

      if (pageTitle) {
        titleEl.textContent = pageTitle;
      } else if (meta.pageTitle) {
        titleEl.textContent = meta.pageTitle;
      } else {
        const name = page.split('/').pop().replace(/[_-]/g, ' ');
        titleEl.textContent = name.replace(/\b\w/g, c => c.toUpperCase());
      }

      finishLoading();
      scrollToHash();
    })
    .catch(() => {
      titleEl.textContent = "Error";
      contentEl.textContent = "Unable to load content.";
      finishLoading();
    });
document.addEventListener('click', async (e) => {

  const cmdIcon = e.target.closest('.copy-cmd');
  if (cmdIcon) {
    const cmd = cmdIcon.getAttribute('data-cmd');
    await navigator.clipboard.writeText(cmd);

    const original = cmdIcon.getAttribute('src');

    cmdIcon.setAttribute(
      'src',
      "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNCcgaGVpZ2h0PScxNCcgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyBzdHJva2U9JyM2NDc0OGInIHN0cm9rZS13aWR0aD0nMic+PHBvbHlsaW5lIHBvaW50cz0nMjAgNiA5IDE3IDQgMTInLz48L3N2Zz4="
    );

    setTimeout(() => {
      cmdIcon.setAttribute('src', original);
    }, 1200);
    return;
  }

});
}

if (lightboxCloseEl) {
  lightboxCloseEl.addEventListener('click', closeLightbox);
}

if (lightboxEl) {
  lightboxEl.addEventListener('click', (e) => {
    if (e.target === lightboxEl) {
      closeLightbox();
    }
  });
}

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeLightbox();
  }
});

contentEl.addEventListener('click', (e) => {
  const badge = e.target.closest('.doc-inline-image-badge');
  let img = null;

  if (badge) {
    img = badge.parentElement ? badge.parentElement.querySelector('img') : null;
  } else {
    img = e.target.closest('img');
  }

  if (!img || img.classList.contains('copy-cmd')) return;

  openLightbox({
    small: img.getAttribute('data-lightbox-small') || img.currentSrc || img.src,
    medium: img.getAttribute('data-lightbox-medium') || img.getAttribute('data-lightbox-small') || img.currentSrc || img.src,
    large: img.getAttribute('data-lightbox-large') || img.getAttribute('data-lightbox-medium') || img.getAttribute('data-lightbox-small') || img.currentSrc || img.src,
    fallback: img.getAttribute('data-lightbox-fallback') || img.currentSrc || img.src,
    alt: img.alt,
    caption: img.getAttribute('data-caption') || img.alt || ''
  });
});

window.addEventListener('hashchange', scrollToHash);
const backLink = document.getElementById('back-link');
if (backLink) {
  backLink.addEventListener('click', (e) => {
    if (document.referrer) {
      try {
        const ref = new URL(document.referrer);
        const current = new URL(location.href);

        const normalize = (h) => h.hostname.replace(/^www\./, '').toLowerCase();

        if (normalize(ref) === normalize(current)) {
          history.back();
          e.preventDefault();
          return;
        }
      } catch {}
    }
    // fallback: default "/" behavior
  });
}

</script>
</body>
</html>