@beforesemicolon/builder 1.8.1 → 1.8.13

package/dist/cjs/docs/templates/fading-citrus/assets/logo.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 60" role="img" aria-label="Fading Citrus">
+  <g fill="none" fill-rule="evenodd">
+    <circle cx="30" cy="30" r="23" fill="#f97316" />
+    <path d="M30 7a23 23 0 0 1 23 23H30z" fill="#22d3ee" opacity=".9" />
+    <path d="M30 7a23 23 0 0 0 0 46 23 23 0 0 1 0-46z" fill="#fff7ed" opacity=".35" />
+    <text x="68" y="37" fill="#f8fafc" font-family="Inter, Arial, sans-serif" font-size="22" font-weight="700">Docs</text>
+  </g>
+</svg>

package/dist/cjs/docs/templates/fading-citrus/layouts/_code-snippet.js

@@ -44,6 +44,59 @@ export const highlightLine = (line) => {
     return tokens.join('')
 }
 
+export const renderCodeCopyScript = () => `
+<script type="application/javascript">
+    (() => {
+        if (window.__fadingCitrusCodeCopyReady) return
+        window.__fadingCitrusCodeCopyReady = true
+
+        const showCopyButton = (snippet) => {
+            const copyBtn = snippet.querySelector('.code-copy-btn')
+            const hasCode = snippet.dataset.code || snippet.querySelector('code') || snippet.querySelector('.content')
+            if (copyBtn && hasCode) copyBtn.style.visibility = 'visible'
+        }
+
+        document.querySelectorAll('.code-snippet').forEach(showCopyButton)
+
+        document.addEventListener('click', (event) => {
+            const copyBtn = event.target.closest('.code-copy-btn')
+            if (!copyBtn) return
+
+            const snippet = copyBtn.closest('.code-snippet')
+            if (!snippet) return
+
+            let code = snippet.dataset.code ?? ''
+
+            if (!code) {
+                const codeEl = snippet.querySelector('code')
+                if (codeEl) {
+                    const clone = codeEl.cloneNode(true)
+                    clone.querySelectorAll('.line-number').forEach((el) => el.remove())
+                    code = clone.textContent ?? ''
+                }
+            }
+
+            if (!code) {
+                code = snippet.querySelector('.content')?.textContent ?? ''
+            }
+
+            if (!code.trim().length) return
+
+            clearTimeout(copyBtn._timer)
+            navigator.clipboard.writeText(code.trim())
+            copyBtn.textContent = 'copied'
+            copyBtn.setAttribute('aria-label', 'Code copied')
+            copyBtn.classList.add('copied')
+            copyBtn._timer = setTimeout(() => {
+                copyBtn.textContent = 'copy'
+                copyBtn.setAttribute('aria-label', 'Copy code')
+                copyBtn.classList.remove('copied')
+            }, 1000)
+        })
+    })()
+</script>
+`
+
 export const renderCodeBlock = (filename, code, lang = 'javascript') => {
     const lines = code
         .replace(/\n$/, '')

package/dist/cjs/docs/templates/fading-citrus/layouts/_footer.js

@@ -1,5 +1,3 @@
-import logo from './_logo.js'
-
 const social = [
     {
         link: 'https://medium.com/before-semicolon',
@@ -33,11 +31,15 @@ const social = [
     },
 ]
 
-export default () => `
+export default (props = {}) => {
+    const siteName =
+        props.projectMeta?.name || props.name || props.title || 'Documentation'
+
+    return `
 <footer class="site-footer">
     <div class="footer-inner wrapper">
         <div class="footer-brand">
-            ${logo({ fill: 'currentColor', width: '100px' })}
+            <img class="site-logo" src="/assets/logo.svg" alt="${siteName} logo" width="100" height="30" />
             <p>A reactive HTML templating system for building dynamic UIs with pure JavaScript. No build step. No virtual DOM.</p>
         </div>
         <ul class="footer-links">
@@ -70,3 +72,4 @@ export default () => `
     </div>
 </footer>
 `
+}

package/dist/cjs/docs/templates/fading-citrus/layouts/_header.js

@@ -1,14 +1,14 @@
-import logo from './_logo.js'
-
 export default (props = {}) => {
     const isDocs = props.path?.startsWith('/documentation')
+    const siteName =
+        props.projectMeta?.name || props.name || props.title || 'Documentation'
 
     return `
 <header class="site-header">
     <div class="header-inner wrapper">
         <h1>
-            <a href="/" aria-label="Markup home">
-                ${logo({ fill: 'currentColor', width: '90px' })}
+            <a href="/" aria-label="${siteName} home">
+                <img class="site-logo" src="/assets/logo.svg" alt="${siteName} logo" width="90" height="27" />
             </a>
         </h1>
         ${

package/dist/cjs/docs/templates/fading-citrus/layouts/_layout-utils.js

@@ -0,0 +1,89 @@
+export const escapeHTML = (value = '') =>
+    String(value)
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;')
+
+export const partByName = (parts, name) =>
+    parts.find((part) => part.name === name)
+
+export const option = (value, fallback = '') =>
+    value === undefined || value === true ? fallback : String(value)
+
+export const optionText = (value, fallback = '') =>
+    option(value, fallback).replace(/&quot;/g, '"')
+
+export const codeFromPart = (part = {}) => {
+    const match = String(part.body || '').match(
+        /(?:```|~~~)([^\n]*)\n([\s\S]*?)\n(?:```|~~~)/
+    )
+
+    if (!match) return ''
+
+    return match[2]
+}
+
+export const withFirstParagraphClass = (html = '', className = '') =>
+    html.replace(/<p>/, `<p class="${className}">`)
+
+export const statContent = (html = '') => {
+    const value = html.match(/<h2[^>]*>([\s\S]*?)<\/h2>/)?.[1] || ''
+    const label = html.match(/<p[^>]*>([\s\S]*?)<\/p>/)?.[1] || ''
+
+    return `
+        <span class="stat-value text-gradient-primary">${value}</span>
+        <span class="stat-label">${label}</span>
+    `
+}
+
+export const stripHeadingLinks = (html = '') =>
+    html.replace(
+        /<h([1-6])([^>]*)><a href="[^"]*">([\s\S]*?)<\/a><\/h\1>/g,
+        '<h$1$2>$3</h$1>'
+    )
+
+export const sectionHeader = (html = '') =>
+    stripHeadingLinks(html).replace(
+        /<p><code>([\s\S]*?)<\/code><\/p>/,
+        '<span class="section-tag font-mono">$1</span>'
+    )
+
+export const groupedSectionHeader = (html = '') => {
+    const normalized = sectionHeader(html)
+    const match = normalized.match(
+        /^(\s*<span class="section-tag font-mono">[\s\S]*?<\/span>)(\s*<h2[^>]*>[\s\S]*?<\/h2>)([\s\S]*)$/
+    )
+
+    if (!match) return normalized
+
+    return `<div>${match[1]}${match[2]}</div>${match[3]}`
+}
+
+export const icon = (name) => {
+    const icons = {
+        arrowRight:
+            '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>',
+        arrowUpRight:
+            '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7"/><path d="M7 7h10v10"/></svg>',
+        book: '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>',
+        terminal:
+            '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>',
+        sparkles:
+            '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sparkles-icon"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275Z"/><path d="m5 3 1 2.5L8.5 6 6 7 5 9.5 4 7 1.5 6 4 5Z"/><path d="m19 17 1 2.5 2.5.5-2.5 1-1 2.5-1-2.5-2.5-1 2.5-1Z"/></svg>',
+        webComponents:
+            '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5.5 8.5 9 12l-3.5 3.5L2 12l3.5-3.5Z"/><path d="m12 2 3.5 3.5L12 9 8.5 5.5 12 2Z"/><path d="M18.5 8.5 22 12l-3.5 3.5L15 12l3.5-3.5Z"/><path d="m12 15 3.5 3.5-3.5 3.5-3.5-3.5 3.5-3.5Z"/></svg>',
+        router: '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="19" r="3"/><circle cx="18" cy="5" r="3"/><path d="M9 19h8.5a3.5 3.5 0 0 0 3.5-3.5V8.5a3.5 3.5 0 0 0-3.5-3.5H9"/></svg>',
+        reactive:
+            '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>',
+        tiny: '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"/><line x1="16" y1="8" x2="2" y2="22"/><line x1="17.5" y1="15" x2="9" y2="15"/></svg>',
+        standards:
+            '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.3 10a3.5 3.5 0 0 1 0-7h7.4a3.5 3.5 0 0 1 0 7H8.3Z"/><path d="M12 14a3 3 0 0 1 3-3h3.5a3 3 0 0 1 3 3v3.5a3 3 0 0 1-3 3H15a3 3 0 0 1-3-3V14Z"/><path d="M2 14.5a3.5 3.5 0 0 1 7 0v2.8a3.5 3.5 0 0 1-7 0v-2.8Z"/></svg>',
+        plug: '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8H6v5a4 4 0 0 0 4 4h4a4 4 0 0 0 4-4Z"/></svg>',
+        surgical:
+            '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg>',
+    }
+
+    return icons[name] || icons.reactive
+}

package/dist/cjs/docs/templates/fading-citrus/layouts/document.js

@@ -1,7 +1,6 @@
 import meta from './_head-meta.js'
 import header from './_header.js'
 import footer from './_footer.js'
-import copyCode from './_copy-code.js'
 
 const githubDocsPath =
     'https://github.com/beforesemicolon/markup/tree/main/docs'
@@ -47,6 +46,11 @@ export default (props) => {
     <head>
         ${meta(props)}
         <link rel="stylesheet" href="/stylesheets/documentation.css?v=20260621exact">
+        ${
+            props.themeStylesheet
+                ? `<link rel="stylesheet" href="${props.themeStylesheet}">`
+                : ''
+        }
     </head>
     <body>
         ${header(props)}
@@ -82,9 +86,8 @@ export default (props) => {
             </aside>
         </main>
         
-        ${footer()}
-        
-        ${copyCode()}
+        ${footer(props)}
+        ${props.scripts?.join('') || ''}
         
     </body>
 </html>

package/dist/cjs/docs/templates/fading-citrus/layouts/landing-cta.js

@@ -0,0 +1,30 @@
+import { icon, partByName } from './_layout-utils.js'
+
+export default ({ parts, options }) => {
+    const copy = partByName(parts, 'copy') || parts[0]
+    const title = options.title || ''
+    const title2 = options.title2 || ''
+
+    return `
+        <section class="cta-section wrapper">
+            <div class="cta-card">
+                <div class="cta-glow"></div>
+                <h2>
+                    <span class="text-gradient">${title}</span>
+                    <span class="text-gradient-primary">${title2}</span>
+                </h2>
+                ${copy?.html || ''}
+                <div class="cta-buttons">
+                    <a href="/documentation/get-started" class="btn-primary">
+                        <span>Get Started</span>
+                        ${icon('arrowRight')}
+                    </a>
+                    <a href="/documentation/index.html?v=20260621exact" class="btn-outline">
+                        ${icon('book')}
+                        <span>Read the Docs</span>
+                    </a>
+                </div>
+            </div>
+        </section>
+    `
+}

package/dist/cjs/docs/templates/fading-citrus/layouts/landing-ecosystem.js

@@ -0,0 +1,43 @@
+import {
+    groupedSectionHeader,
+    icon,
+    option,
+    partByName,
+} from './_layout-utils.js'
+
+export default ({ parts }) => {
+    const header = partByName(parts, 'header') || parts[0]
+    const cards = parts.filter((part) => part.name === 'product')
+
+    return `
+        <section class="products-section wrapper">
+            <div class="section-header">${groupedSectionHeader(header?.html || '')}</div>
+            <div class="products-grid">
+                ${cards
+                    .map(
+                        (card) => `
+                            <div class="product-card card-${option(card.options.color, 'orange')}">
+                                <div class="product-glow"></div>
+                                <a href="${option(card.options.href, '#')}" target="_blank" rel="noreferrer" class="product-head">
+                                    <div class="product-title-row">
+                                        <div class="icon-container">${icon(option(card.options.icon, 'webComponents'))}</div>
+                                        <div>
+                                            <h3>${option(card.options.title, card.name || '')}</h3>
+                                            <span class="package-name font-mono">${option(card.options.package, '')}</span>
+                                        </div>
+                                    </div>
+                                    <span class="product-arrow">${icon('arrowUpRight')}</span>
+                                </a>
+                                ${card.html}
+                                <a href="${option(card.options.href, '#')}" target="_blank" rel="noreferrer" class="product-link">
+                                    <span>Read the docs</span>
+                                    ${icon('arrowUpRight')}
+                                </a>
+                            </div>
+                        `
+                    )
+                    .join('')}
+            </div>
+        </section>
+    `
+}

package/dist/cjs/docs/templates/fading-citrus/layouts/landing-features.js

@@ -0,0 +1,25 @@
+import { icon, option, partByName, sectionHeader } from './_layout-utils.js'
+
+export default ({ parts }) => {
+    const header = partByName(parts, 'header') || parts[0]
+    const features = parts.filter((part) => part.name === 'feature')
+
+    return `
+        <section id="features" class="features-section wrapper">
+            <div class="section-header">${sectionHeader(header?.html || '')}</div>
+            <div class="features-grid">
+                ${features
+                    .map(
+                        (feature) => `
+                            <div class="feature-card">
+                                <div class="feature-border"></div>
+                                <div class="icon-box">${icon(option(feature.options.icon, 'reactive'))}</div>
+                                ${feature.html}
+                            </div>
+                        `
+                    )
+                    .join('')}
+            </div>
+        </section>
+    `
+}

package/dist/cjs/docs/templates/fading-citrus/layouts/landing-hero.js

@@ -0,0 +1,81 @@
+import { renderCodeBlock } from './_code-snippet.js'
+import {
+    codeFromPart,
+    icon,
+    option,
+    partByName,
+    statContent,
+    withFirstParagraphClass,
+} from './_layout-utils.js'
+
+export default ({ parts, options }) => {
+    const copy = partByName(parts, 'copy') || parts[0]
+    const code = partByName(parts, 'code') || parts[1]
+    const stats = parts.filter((part) => part.name === 'stat')
+    const version = option(options.version)
+    const title = option(options.title, '')
+    const title2 = option(options.title2, '')
+    const primaryHref = option(
+        options.primaryHref,
+        '/documentation/get-started'
+    )
+    const primaryLabel = option(options.primaryLabel, 'Get Started')
+    const secondaryLabel = option(
+        options.secondaryLabel,
+        'npm i @beforesemicolon/markup'
+    )
+
+    return `
+        <section class="hero-section relative overflow-hidden">
+            <div class="absolute inset-0 bg-grid pointer-events-none"></div>
+            <div class="absolute inset-0 hero-glow pointer-events-none animate-pulse-glow"></div>
+            <div class="wrapper hero-container animate-float-up">
+                <div class="hero-content">
+                    ${
+                        version
+                            ? `<a href="https://github.com/beforesemicolon/markup" target="_blank" rel="noopener" class="version-badge">
+                                ${icon('sparkles')}
+                                <span>${version}</span>
+                                ${icon('arrowRight')}
+                            </a>`
+                            : ''
+                    }
+                    <h1 class="hero-title">
+                        <span class="text-gradient">${title}</span><br/>
+                        <span class="text-gradient-primary">${title2}</span>
+                    </h1>
+                    ${withFirstParagraphClass(copy?.html || '', 'hero-subtitle')}
+                    <div class="hero-actions">
+                        <a href="${primaryHref}" class="btn-primary">
+                            <span>${primaryLabel}</span>
+                            ${icon('arrowRight')}
+                        </a>
+                        <a href="#install" class="btn-secondary font-mono">${secondaryLabel}</a>
+                    </div>
+                    ${
+                        stats.length
+                            ? `<div class="hero-stats">${stats
+                                  .map(
+                                      (stat, index) => `
+                                        ${index ? '<div class="stat-divider"></div>' : ''}
+                                        <div class="stat-item">${statContent(stat.html)}</div>
+                                    `
+                                  )
+                                  .join('')}</div>`
+                            : ''
+                    }
+                </div>
+                ${
+                    code
+                        ? `<div class="hero-code-panel">
+                            <div class="glow-container">
+                                <div class="absolute inset-0 bg-gradient-to-br from-primary/20 to-accent/20 blur-3xl rounded-full"></div>
+                            </div>
+                            ${renderCodeBlock(option(code.options.filename, ''), codeFromPart(code), option(code.options.lang, 'javascript'))}
+                        </div>`
+                        : ''
+                }
+            </div>
+        </section>
+    `
+}

package/dist/cjs/docs/templates/fading-citrus/layouts/landing-install.js

@@ -0,0 +1,116 @@
+import {
+    escapeHTML,
+    icon,
+    option,
+    optionText,
+    partByName,
+    sectionHeader,
+} from './_layout-utils.js'
+
+export const renderInstallScript = () => `
+<script type="application/javascript">
+    (() => {
+        if (window.__fadingCitrusInstallReady) return
+        window.__fadingCitrusInstallReady = true
+
+        document.querySelectorAll('[data-fading-citrus-install]').forEach((install) => {
+            const tabTriggers = install.querySelectorAll('.tab-trigger')
+            const tabContents = install.querySelectorAll('.tab-content')
+            const copyButtons = install.querySelectorAll('.install-copy-btn')
+
+            tabTriggers.forEach((trigger) => {
+                trigger.addEventListener('click', () => {
+                    const targetTab = trigger.getAttribute('data-tab')
+
+                    tabTriggers.forEach((tab) => {
+                        tab.classList.remove('active')
+                        tab.setAttribute('aria-selected', 'false')
+                    })
+                    tabContents.forEach((content) => content.classList.remove('active'))
+
+                    trigger.classList.add('active')
+                    trigger.setAttribute('aria-selected', 'true')
+
+                    const activeContent = install.querySelector('#tab-' + targetTab)
+                    if (activeContent) activeContent.classList.add('active')
+                })
+            })
+
+            copyButtons.forEach((button) => {
+                const originalLabel = button.getAttribute('aria-label') || ''
+
+                button.addEventListener('click', async () => {
+                    const row = button.closest('.install-code-row')
+                    const value = row ? row.getAttribute('data-code') : ''
+
+                    try {
+                        await navigator.clipboard.writeText(value)
+                        button.classList.add('copied')
+                        button.querySelector('span').textContent = 'Copied'
+                        button.setAttribute('aria-label', 'Command copied')
+                        setTimeout(() => {
+                            button.classList.remove('copied')
+                            button.querySelector('span').textContent = 'Copy'
+                            button.setAttribute('aria-label', originalLabel)
+                        }, 1500)
+                    } catch {}
+                })
+            })
+        })
+    })()
+</script>
+`
+
+export default ({ parts }) => {
+    const header = partByName(parts, 'header') || parts[0]
+    const tabs = parts.filter((part) => part.name === 'tab')
+
+    return `
+        <section id="install" class="install-section wrapper" data-fading-citrus-install>
+            <div class="install-container">
+                <div class="section-header center">${sectionHeader(header?.html || '')}</div>
+                <div class="tabs-container">
+                    <div class="tabs-list" role="tablist" aria-label="Installation package manager">
+                        ${tabs
+                            .map(
+                                (tab, index) => `
+                                    <button class="tab-trigger${index === 1 ? ' active' : ''}" role="tab" aria-selected="${index === 1}" aria-controls="tab-${option(tab.options.key, tab.options.label)}" id="tab-trigger-${option(tab.options.key, tab.options.label)}" data-tab="${option(tab.options.key, tab.options.label)}">${option(tab.options.label, tab.options.key)}</button>
+                                `
+                            )
+                            .join('')}
+                    </div>
+                    <div class="tabs-content-wrapper">
+                        ${tabs
+                            .map((tab, index) => {
+                                const key = option(
+                                    tab.options.key,
+                                    tab.options.label
+                                )
+                                const command = optionText(
+                                    tab.options.command,
+                                    tab.html.replace(/<[^>]+>/g, '').trim()
+                                )
+
+                                return `
+                                    <div class="tab-content${index === 1 ? ' active' : ''}" id="tab-${key}" role="tabpanel" tabindex="0" aria-labelledby="tab-trigger-${key}">
+                                        <div class="install-code-row" data-code="${escapeHTML(command)}">
+                                            <div class="install-command">
+                                                ${icon('terminal')}
+                                                <code class="font-mono">${escapeHTML(command)}</code>
+                                            </div>
+                                            <button class="install-copy-btn" aria-label="Copy ${option(tab.options.label, key)} install command">
+                                                <svg aria-hidden="true" class="copy-icon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+                                                <svg aria-hidden="true" class="check-icon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+                                                <span>Copy</span>
+                                            </button>
+                                        </div>
+                                    </div>
+                                `
+                            })
+                            .join('')}
+                    </div>
+                </div>
+            </div>
+        </section>
+    `
+}