code-file.js

/*!

 * <code-file> Web Component
 * A QPell Labs project
 * Part of the QPell ecosystem
 * https://qpell.com
 *©2025 QPell Labs
 * Repository: https://github.com/3me3/code-file
 *
 * Licensed under MIT
 */
class CodeBlock extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });

    /* Extract code text with artifact fidelity
       - remove only the leading HTML newline
       - preserve all authored whitespace */
    const raw = this.textContent.replace(/^\n/, "");
    this.codeText = raw;

    /* Infer file extension */
    const lang = (this.getAttribute("lang") || "").toLowerCase();
    const extensions = {
      python: "py", py: "py",
      javascript: "js", js: "js",
      html: "html",
      css: "css",
      json: "json",
      txt: "txt"
    };
    this.ext = extensions[lang] || "txt";

    /* Determine filename */
    this.filename =
      this.getAttribute("filename") ||
      `code.${this.ext}`;

    /* Shadow DOM template */
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin: 32px 0;
          font-family: system-ui, sans-serif;
        }

        /* Filename header */
        .header {
          background: hsl(0 0% 94%);
          border: 1px solid hsl(0 0% 85%);
          border-bottom: none;
          padding: 6px 12px;
          font-size: 14px;
          color: hsl(0 0% 30%);
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
          user-select: none;
        }

        /* Code block */
        pre {
          white-space: pre-wrap;
          overflow-y: auto;
          overflow-x: hidden;
          max-height: 256px;

          border-left: 4px solid hsl(220 50% 50%);
          border-right: 1px solid hsl(0 0% 85%);
          border-bottom: 1px solid hsl(0 0% 85%);
          border-top: none;

          background: hsl(0 0% 98%);
          padding: 16px;
          margin: 0;

          font-family: monospace;
          font-size: 14px;
          line-height: 20px;

          border-bottom-left-radius: 4px;
          border-bottom-right-radius: 4px;
        }

        pre code {
          display: block;
          white-space: inherit;
        }

        /* Actions (no flex) */
        .actions {
          margin-top: 8px;
          padding-left: 4px;
          font-size: 14px;
          color: hsl(220 20% 30%);
        }

        .actions > * {
          background: none;
          border: none;
          padding: 0;
          margin: 0;
          cursor: pointer;
          font: inherit;
          color: inherit;
          text-decoration: none;
          vertical-align: middle;
        }

        .actions > * + * {
          margin-left: 16px;
        }

        svg {
          display: inline-block;
          width: 18px;
          height: 18px;
          vertical-align: -3px;
          margin-right: 6px;
          fill: currentColor;
        }
      </style>

      <div class="header">${this.filename}</div>

      <pre><code></code></pre>

      <div class="actions">
        <button class="copy-btn" title="Copy code">
          <svg viewBox="0 0 24 24">
            <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8
                     c-1.1 0-2 .9-2 2v14c0
                     1.1.9 2 2 2h11
                     c1.1 0 2-.9 2-2V7
                     c0-1.1-.9-2-2-2zm0
                     16H8V7h11v14z"/>
          </svg>
          Copy
        </button>

        <button class="download-btn" title="Download file">
          <svg viewBox="0 0 24 24">
            <path d="M5 20h14v-2H5v2zm7-18l-5 5h3v6h4V7h3l-5-5z"/>
          </svg>
          Download
        </button>
      </div>
    `;

    this.shadowRoot.querySelector("code").textContent = this.codeText;
  }

  connectedCallback() {
    /* Copy */
    this.shadowRoot.querySelector(".copy-btn")
      .addEventListener("click", () => {
        navigator.clipboard.writeText(this.codeText);
      });

    /* Download */
    this.shadowRoot.querySelector(".download-btn")
      .addEventListener("click", () => {
        const blob = new Blob([this.codeText], { type: "text/plain" });
        const url = URL.createObjectURL(blob);

        const a = document.createElement("a");
        a.href = url;
        a.download = this.filename;
        a.click();

        URL.revokeObjectURL(url);
      });
  }
}

customElements.define("code-file", CodeBlock);