github-code 0.1.0

package/dist/github-code.js

@@ -0,0 +1,689 @@
+// src/parsers/file-parser.ts
+function parseFileAttribute(fileAttr) {
+  return fileAttr.split(",").map((url) => url.trim()).filter((url) => url.length > 0);
+}
+
+// src/parsers/url-parser.ts
+var GITHUB_BLOB_PATTERN = /^https:\/\/github\.com\/[^\/]+\/[^\/]+\/blob\/.+/;
+function isValidGitHubUrl(url) {
+  return GITHUB_BLOB_PATTERN.test(url);
+}
+function parseGitHubUrl(url) {
+  const match = /^https:\/\/github\.com\/([^\/]+)\/([^\/]+)\/blob\/([^\/]+)\/(.+)$/.exec(url);
+  if (!match) {
+    throw new Error("Failed to parse GitHub URL");
+  }
+  const owner = match[1];
+  const repo = match[2];
+  const commit = match[3];
+  const path = match[4];
+  if (!owner || !repo || !commit || !path) {
+    throw new Error("Failed to parse GitHub URL");
+  }
+  const rawUrl = `https://raw.githubusercontent.com/${owner}/${repo}/${commit}/${path}`;
+  const filename = path.split("/").pop() || "unknown";
+  return {
+    rawUrl,
+    filename
+  };
+}
+function extractFilenameFromUrl(url) {
+  try {
+    const match = /\/([^\/]+)$/.exec(url);
+    return match?.[1] ?? "unknown";
+  } catch {
+    return "unknown";
+  }
+}
+
+// src/fetching/code-fetcher.ts
+async function fetchCode(url) {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch code (HTTP ${response.status}). Please check if the URL is accessible.`);
+    }
+    return await response.text();
+  } catch (error) {
+    if (error instanceof TypeError && error.message.includes("fetch")) {
+      throw new Error(
+        `Failed to fetch code from ${url}. This is likely a CORS (Cross-Origin Resource Sharing) error. The server needs to allow requests from this origin. GitHub's raw.githubusercontent.com should work without CORS issues.`
+      );
+    }
+    throw error;
+  }
+}
+async function ensureFileLoaded(file, isRetry = false) {
+  if (file.loaded && !isRetry) {
+    return;
+  }
+  if (isRetry) {
+    file.loaded = false;
+    file.error = null;
+  }
+  try {
+    const code = await fetchCode(file.rawUrl);
+    file.code = code;
+    file.error = null;
+    file.loaded = true;
+  } catch (error) {
+    file.code = null;
+    file.error = error instanceof Error ? error.message : String(error);
+    file.loaded = true;
+  }
+}
+
+// src/fetching/highlightjs-loader.ts
+var highlightJSLoadingPromise = null;
+async function loadHighlightJS() {
+  if (window.hljs) {
+    return;
+  }
+  if (highlightJSLoadingPromise) {
+    return highlightJSLoadingPromise;
+  }
+  highlightJSLoadingPromise = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js";
+    script.integrity = "sha384-RH2xi4eIQ/gjtbs9fUXM68sLSi99C7ZWBRX1vDrVv6GQXRibxXLbwO2NGZB74MbU";
+    script.crossOrigin = "anonymous";
+    script.onload = () => {
+      highlightJSLoadingPromise = null;
+      resolve();
+    };
+    script.onerror = () => {
+      highlightJSLoadingPromise = null;
+      const errorMsg = "Failed to load highlight.js library. If you have a Content Security Policy (CSP), ensure it allows:\n  script-src https://cdnjs.cloudflare.com\n  style-src https://cdnjs.cloudflare.com";
+      reject(new Error(errorMsg));
+    };
+    document.head.appendChild(script);
+  });
+  return highlightJSLoadingPromise;
+}
+
+// src/styles/base-light.css
+var base_light_default = ":host {\n  --border-color: #d0d7de;\n  --header-background: #f6f8fa;\n  --header-text-color: #24292f;\n  --line-number-color: #57606a;\n  --tab-color: #57606a;\n  --tab-hover-border: #d0d7de;\n  --tabs-background: #f6f8fa;\n  --code-background: #ffffff;\n  --skeleton-base: #e0e0e0;\n  --skeleton-highlight: #f0f0f0;\n  --error-text-color: #cf222e;\n  --error-background: #ffebe9;\n  --error-border: #ff8182;\n  --button-background: #f6f8fa;\n  --button-text-color: #24292f;\n  --button-border: #d0d7de;\n  --button-hover-background: #f3f4f6;\n  --font-family-base:\n    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji',\n    'Segoe UI Emoji';\n  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;\n\n  display: block;\n  min-width: 0;\n  font-family: var(--font-family-base);\n}\n\narticle {\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  overflow: hidden;\n  background-color: var(--code-background);\n}\n\nheader {\n  background-color: var(--header-background);\n  padding: 8px 16px;\n  border-bottom: 1px solid var(--border-color);\n  color: var(--header-text-color);\n  font-weight: 600;\n  font-size: 14px;\n}\n\n.code-wrapper {\n  width: 100%;\n  margin: 0;\n  overflow-x: auto;\n  background-color: var(--code-background);\n}\n\n.code-table {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n}\n\n.code-row {\n  display: flex;\n}\n\n.line-number {\n  flex-shrink: 0;\n  text-align: right;\n  padding-right: 6px;\n  padding-left: 8px;\n  color: var(--line-number-color);\n  user-select: none;\n  border-right: 1px solid var(--border-color);\n  font-family: var(--font-family-mono);\n  font-size: 12px;\n  line-height: 20px;\n  min-width: 40px;\n}\n\n.code-cell {\n  flex: 1;\n  min-width: 0;\n  padding-left: 2px;\n  font-family: var(--font-family-mono);\n  font-size: 12px;\n  line-height: 20px;\n  white-space: pre;\n}\n\n.error {\n  padding: 16px;\n  color: var(--error-text-color);\n  background-color: var(--error-background);\n  border: 1px solid var(--error-border);\n  border-radius: 6px;\n  font-family: var(--font-family-mono);\n  font-size: 12px;\n  line-height: 1.5;\n  margin: 16px;\n}\n\n.retry-button {\n  margin-top: 12px;\n  padding: 8px 16px;\n  background: var(--button-background);\n  color: var(--button-text-color);\n  border: 1px solid var(--button-border);\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 14px;\n  font-family: var(--font-family-base);\n  font-weight: 500;\n  transition: background-color 0.2s ease;\n}\n\n.retry-button:hover {\n  background-color: var(--button-hover-background);\n}\n\n/* Skeleton loader styles */\n.skeleton-line {\n  height: 12px;\n  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);\n  background-size: 200% 100%;\n  animation: loading 1.5s ease-in-out infinite;\n  border-radius: 4px;\n  margin: 4px 0;\n}\n\n@keyframes loading {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n.skeleton-loading .line-number {\n  opacity: 0.3;\n}\n";
+
+// src/styles/base-dark.css
+var base_dark_default = ":host {\n  --border-color: #30363d;\n  --header-background: #161b22;\n  --header-text-color: #c9d1d9;\n  --line-number-color: #8b949e;\n  --tab-color: #8b949e;\n  --tab-hover-border: #30363d;\n  --tabs-background: #161b22;\n  --code-background: #0d1117;\n  --skeleton-base: #21262d;\n  --skeleton-highlight: #30363d;\n  --error-text-color: #ff7b72;\n  --error-background: #490202;\n  --error-border: #f85149;\n  --button-background: #21262d;\n  --button-text-color: #c9d1d9;\n  --button-border: #30363d;\n  --button-hover-background: #30363d;\n  --font-family-base:\n    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji',\n    'Segoe UI Emoji';\n  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;\n\n  display: block;\n  min-width: 0;\n  font-family: var(--font-family-base);\n}\n\narticle {\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  overflow: hidden;\n  background-color: var(--code-background);\n}\n\nheader {\n  background-color: var(--header-background);\n  padding: 8px 16px;\n  border-bottom: 1px solid var(--border-color);\n  color: var(--header-text-color);\n  font-weight: 600;\n  font-size: 14px;\n}\n\n.code-wrapper {\n  width: 100%;\n  margin: 0;\n  overflow-x: auto;\n  background-color: var(--code-background);\n}\n\n.code-table {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n}\n\n.code-row {\n  display: flex;\n}\n\n.line-number {\n  flex-shrink: 0;\n  text-align: right;\n  padding-right: 6px;\n  padding-left: 8px;\n  color: var(--line-number-color);\n  user-select: none;\n  border-right: 1px solid var(--border-color);\n  font-family: var(--font-family-mono);\n  font-size: 12px;\n  line-height: 20px;\n  min-width: 40px;\n}\n\n.code-cell {\n  flex: 1;\n  min-width: 0;\n  padding-left: 2px;\n  font-family: var(--font-family-mono);\n  font-size: 12px;\n  line-height: 20px;\n  white-space: pre;\n}\n\n.error {\n  padding: 16px;\n  color: var(--error-text-color);\n  background-color: var(--error-background);\n  border: 1px solid var(--error-border);\n  border-radius: 6px;\n  font-family: var(--font-family-mono);\n  font-size: 12px;\n  line-height: 1.5;\n  margin: 16px;\n}\n\n.retry-button {\n  margin-top: 12px;\n  padding: 8px 16px;\n  background: var(--button-background);\n  color: var(--button-text-color);\n  border: 1px solid var(--button-border);\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 14px;\n  font-family: var(--font-family-base);\n  font-weight: 500;\n  transition: background-color 0.2s ease;\n}\n\n.retry-button:hover {\n  background-color: var(--button-hover-background);\n}\n\n/* Skeleton loader styles */\n.skeleton-line {\n  height: 12px;\n  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);\n  background-size: 200% 100%;\n  animation: loading 1.5s ease-in-out infinite;\n  border-radius: 4px;\n  margin: 4px 0;\n}\n\n@keyframes loading {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n.skeleton-loading .line-number {\n  opacity: 0.3;\n}\n";
+
+// src/styles/tab.css
+var tab_default = "nav[role='tablist'] {\n  display: flex;\n  background-color: var(--tabs-background);\n  border-bottom: 1px solid var(--border-color);\n  overflow-x: auto;\n}\n\nnav > button {\n  padding: 8px 16px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  color: var(--tab-color);\n  font-size: 14px;\n  font-family: var(--font-family-base);\n  cursor: pointer;\n  white-space: nowrap;\n  transition:\n    color 0.1s ease,\n    border-color 0.1s ease;\n}\n\nnav > button:hover {\n  color: var(--header-text-color);\n  border-bottom-color: var(--tab-hover-border);\n}\n\nnav > button[aria-selected='true'] {\n  color: var(--header-text-color);\n  border-bottom-color: #fd8c73;\n  font-weight: 600;\n}\n\nsection[role='tabpanel'] {\n  display: block;\n}\n\nsection[role='tabpanel'][aria-hidden='true'] {\n  display: none;\n}\n";
+
+// src/styles/stylesheet-manager.ts
+var StylesheetManager = class {
+  static baseStylesLight = null;
+  static baseStylesDark = null;
+  static tabStyles = null;
+  /**
+   * Gets the base stylesheet for the specified theme (light or dark).
+   * Lazy-loads and caches the stylesheet on first access.
+   */
+  static getBaseStyleSheet(theme) {
+    if (theme === "dark") {
+      if (!this.baseStylesDark) {
+        this.baseStylesDark = new CSSStyleSheet();
+        this.baseStylesDark.replaceSync(base_dark_default);
+      }
+      return this.baseStylesDark;
+    } else {
+      if (!this.baseStylesLight) {
+        this.baseStylesLight = new CSSStyleSheet();
+        this.baseStylesLight.replaceSync(base_light_default);
+      }
+      return this.baseStylesLight;
+    }
+  }
+  /**
+   * Gets the tab stylesheet.
+   * Lazy-loads and caches the stylesheet on first access.
+   */
+  static getTabStyleSheet() {
+    if (!this.tabStyles) {
+      this.tabStyles = new CSSStyleSheet();
+      this.tabStyles.replaceSync(tab_default);
+    }
+    return this.tabStyles;
+  }
+  /**
+   * Gets the highlight.js theme URL for the specified theme.
+   */
+  static getHighlightJSThemeUrl(theme) {
+    const themeFile = theme === "dark" ? "github-dark.min.css" : "github.min.css";
+    return `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/${themeFile}`;
+  }
+};
+
+// src/rendering/html-generators.ts
+function escapeHtml(text) {
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML;
+}
+function getErrorContentHtml(errorMessage, showRetry = false) {
+  const retryButton = showRetry ? `<button class="retry-button">Retry</button>` : "";
+  return `<div class="error">${escapeHtml(errorMessage)}${retryButton}</div>`;
+}
+function getSkeletonContentHtml() {
+  const skeletonLines = Array.from({ length: 20 }, (_, i) => {
+    const width = 60 + Math.random() * 30;
+    return `
+                <div class="code-row">
+                    <div class="line-number">${i + 1}</div>
+                    <div class="skeleton-line" style="width: ${width}%"></div>
+                </div>
+            `;
+  }).join("");
+  return `
+            <div class="code-wrapper skeleton-loading">
+                <div class="code-table">
+                    ${skeletonLines}
+                </div>
+            </div>
+        `;
+}
+function getCodeContentHtml(code) {
+  if (!code) {
+    return getErrorContentHtml("No code content available");
+  }
+  const lines = code.split("\n");
+  if (lines.length > 0 && lines[lines.length - 1] === "") {
+    lines.pop();
+  }
+  return `
+        <div class="code-wrapper hljs">
+            <div class="code-table">
+                ${lines.map(
+    (line, index) => `
+                    <div class="code-row">
+                        <div class="line-number">${index + 1}</div>
+                        <div class="code-cell">${escapeHtml(line) || " "}</div>
+                    </div>
+                `
+  ).join("")}
+            </div>
+        </div>
+    `;
+}
+
+// src/rendering/template-generators.ts
+function generateSingleFileTemplate(filename, content, themeStylesheetUrl) {
+  return `<link rel="stylesheet" href="${themeStylesheetUrl}">
+<article>
+    <header>${escapeHtml(filename)}</header>
+    ${content}
+</article>`;
+}
+function generateArticleContent(filename, content) {
+  return `<header>${escapeHtml(filename)}</header>
+    ${content}`;
+}
+function generateTabbedTemplate(tabsHtml, activeIndex, panelContent, themeStylesheetUrl) {
+  return `<link rel="stylesheet" href="${themeStylesheetUrl}">
+<article>
+    <nav role="tablist" aria-label="Code files">${tabsHtml}</nav>
+    <section role="tabpanel"
+             id="panel-${activeIndex}"
+             aria-labelledby="tab-${activeIndex}"
+             data-index="${activeIndex}">
+        ${panelContent}
+    </section>
+</article>`;
+}
+
+// src/rendering/syntax-highlighter.ts
+function getHighlightedLines(code) {
+  if (!code) {
+    return [""];
+  }
+  const lines = code.split("\n");
+  if (lines.length > 0 && lines[lines.length - 1] === "") {
+    lines.pop();
+  }
+  const fullCode = lines.join("\n");
+  const result = window.hljs.highlightAuto(fullCode);
+  const highlightedLines = result.value.split("\n");
+  while (highlightedLines.length > lines.length) {
+    highlightedLines.pop();
+  }
+  return highlightedLines;
+}
+function applySyntaxHighlighting(container, code) {
+  const codeCells = container.querySelectorAll(".code-cell");
+  const applyHighlighting = () => {
+    const highlightedLines = getHighlightedLines(code);
+    codeCells.forEach((cell, index) => {
+      cell.innerHTML = highlightedLines[index] || " ";
+    });
+  };
+  if ("requestIdleCallback" in window) {
+    requestIdleCallback(applyHighlighting);
+  } else {
+    applyHighlighting();
+  }
+}
+
+// src/theme/theme-resolver.ts
+function resolveTheme(themeAttr) {
+  if (themeAttr === "dark") {
+    return "dark";
+  }
+  if (themeAttr === "light") {
+    return "light";
+  }
+  const prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  return prefersDark ? "dark" : "light";
+}
+function getThemeAttribute(element) {
+  const attr = element.getAttribute("theme");
+  if (attr === "dark" || attr === "light") {
+    return attr;
+  }
+  return "auto";
+}
+
+// src/tabs/tab-state.ts
+var TabState = class {
+  activeTabIndex = 0;
+  renderedTabs = /* @__PURE__ */ new Set();
+  tabsFullyRendered = false;
+  /**
+   * Gets the currently active tab index
+   */
+  getActiveTabIndex() {
+    return this.activeTabIndex;
+  }
+  /**
+   * Sets the active tab index
+   */
+  setActiveTabIndex(index) {
+    this.activeTabIndex = index;
+  }
+  /**
+   * Checks if tabs structure is fully rendered with event listeners
+   */
+  areTabsFullyRendered() {
+    return this.tabsFullyRendered;
+  }
+  /**
+   * Marks tabs as fully rendered
+   */
+  setTabsFullyRendered(value) {
+    this.tabsFullyRendered = value;
+  }
+  /**
+   * Checks if a tab has been rendered
+   */
+  isTabRendered(index) {
+    return this.renderedTabs.has(index);
+  }
+  /**
+   * Marks a tab as rendered
+   */
+  markTabAsRendered(index) {
+    this.renderedTabs.add(index);
+  }
+  /**
+   * Clears all rendered tabs
+   */
+  clearRenderedTabs() {
+    this.renderedTabs.clear();
+  }
+  /**
+   * Gets the total number of tabs
+   */
+  getTabCount(files) {
+    return files.length;
+  }
+  /**
+   * Resets tab state (useful when re-parsing files)
+   */
+  reset() {
+    this.renderedTabs.clear();
+    this.tabsFullyRendered = false;
+  }
+};
+
+// src/tabs/tab-controller.ts
+function generateTabsHtml(files, activeTabIndex) {
+  return files.map(
+    (file, index) => `
+        <button role="tab"
+                id="tab-${index}"
+                aria-selected="${index === activeTabIndex ? "true" : "false"}"
+                aria-controls="panel-${index}"
+                tabindex="${index === activeTabIndex ? "0" : "-1"}"
+                data-index="${index}">
+            ${escapeHtml(file.filename)}
+        </button>
+    `
+  ).join("");
+}
+function updateTabButtonStates(shadowRoot, newActiveIndex) {
+  const tabs = shadowRoot.querySelectorAll("nav > button");
+  tabs.forEach((tab) => {
+    const tabIndex = parseInt(tab.dataset.index || "0");
+    const isSelected = tabIndex === newActiveIndex;
+    tab.setAttribute("aria-selected", isSelected ? "true" : "false");
+    tab.setAttribute("tabindex", isSelected ? "0" : "-1");
+  });
+}
+function updateTabPanelStates(shadowRoot, activeIndex) {
+  const allPanels = shadowRoot.querySelectorAll('section[role="tabpanel"]');
+  allPanels.forEach((panel) => {
+    const panelIndex = parseInt(panel.dataset.index || "0");
+    panel.setAttribute("aria-hidden", panelIndex !== activeIndex ? "true" : "false");
+  });
+}
+function createTabPanel(index, skeletonHtml) {
+  const contentElement = document.createElement("section");
+  contentElement.setAttribute("role", "tabpanel");
+  contentElement.setAttribute("id", `panel-${index}`);
+  contentElement.setAttribute("aria-labelledby", `tab-${index}`);
+  contentElement.dataset.index = String(index);
+  contentElement.innerHTML = skeletonHtml;
+  return contentElement;
+}
+function handleTabKeyNavigation(key, currentIndex, maxIndex) {
+  switch (key) {
+    case "ArrowLeft":
+      return currentIndex > 0 ? currentIndex - 1 : maxIndex;
+    case "ArrowRight":
+      return currentIndex < maxIndex ? currentIndex + 1 : 0;
+    case "Home":
+      return 0;
+    case "End":
+      return maxIndex;
+    default:
+      return null;
+  }
+}
+
+// src/github-code.ts
+var GitHubCode = class extends HTMLElement {
+  // Private fields
+  #files = [];
+  #tabState = new TabState();
+  #resolvedTheme = null;
+  #themeMediaQuery = null;
+  #themeChangeHandler = null;
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  /**
+   * Safely gets a file by index, throwing if out of bounds.
+   * This provides type-safe array access with noUncheckedIndexedAccess.
+   */
+  #getFile(index) {
+    const file = this.#files[index];
+    if (!file) {
+      throw new Error(`File at index ${index} not found`);
+    }
+    return file;
+  }
+  static get observedAttributes() {
+    return ["file"];
+  }
+  connectedCallback() {
+    this.#setupThemeListener();
+    void this.#render();
+  }
+  disconnectedCallback() {
+    if (this.#themeMediaQuery && this.#themeChangeHandler) {
+      this.#themeMediaQuery.removeEventListener("change", this.#themeChangeHandler);
+    }
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "file" && oldValue !== null && oldValue !== newValue) {
+      const previousIndex = this.#tabState.getActiveTabIndex();
+      this.#tabState.reset();
+      void this.#render();
+      if (previousIndex < this.#files.length) {
+        this.#tabState.setActiveTabIndex(previousIndex);
+      } else {
+        this.#tabState.setActiveTabIndex(0);
+      }
+    }
+  }
+  // Private methods - theming
+  #setupThemeListener() {
+    if (window.matchMedia) {
+      this.#themeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      this.#themeChangeHandler = () => {
+        this.#resolvedTheme = null;
+        void this.#render();
+      };
+      this.#themeMediaQuery.addEventListener("change", this.#themeChangeHandler);
+    }
+  }
+  #getResolvedTheme() {
+    if (this.#resolvedTheme) {
+      return this.#resolvedTheme;
+    }
+    this.#resolvedTheme = resolveTheme(getThemeAttribute(this));
+    return this.#resolvedTheme;
+  }
+  // Apply constructable stylesheets to shadow root (CSP-compliant, no 'unsafe-inline' needed)
+  #applyStyleSheets(includeTabStyles = false) {
+    const theme = this.#getResolvedTheme();
+    const baseSheet = StylesheetManager.getBaseStyleSheet(theme);
+    if (includeTabStyles) {
+      const tabSheet = StylesheetManager.getTabStyleSheet();
+      this.shadowRoot.adoptedStyleSheets = [baseSheet, tabSheet];
+    } else {
+      this.shadowRoot.adoptedStyleSheets = [baseSheet];
+    }
+  }
+  // Private methods - rendering
+  async #render() {
+    const fileAttr = this.getAttribute("file");
+    if (!fileAttr) {
+      this.#showError('Error: "file" attribute is required. Please provide a GitHub file URL.');
+      return;
+    }
+    const fileUrls = parseFileAttribute(fileAttr);
+    if (fileUrls.length === 0) {
+      this.#showError('Error: "file" attribute is required. Please provide a GitHub file URL.');
+      return;
+    }
+    const invalidUrl = fileUrls.find((url) => !isValidGitHubUrl(url));
+    if (invalidUrl) {
+      const sanitizedUrl = escapeHtml(invalidUrl);
+      this.#showError(
+        `Error: Invalid GitHub URL format: ${sanitizedUrl}. Expected format: https://github.com/{owner}/{repo}/blob/{commit}/{path}`
+      );
+      return;
+    }
+    this.#files = fileUrls.map((url) => {
+      try {
+        const { rawUrl, filename } = parseGitHubUrl(url);
+        return {
+          filename,
+          rawUrl,
+          url,
+          code: null,
+          error: null,
+          loaded: false
+        };
+      } catch (error) {
+        const filename = extractFilenameFromUrl(url);
+        return {
+          filename,
+          rawUrl: url,
+          url,
+          code: null,
+          error: error instanceof Error ? error.message : String(error),
+          loaded: true
+          // Parse error - no point retrying
+        };
+      }
+    });
+    if (fileUrls.length === 1) {
+      const file = this.#getFile(0);
+      if (file.error) {
+        this.#showError(`Error loading code: ${file.error}`);
+        return;
+      }
+      this.shadowRoot.innerHTML = generateSingleFileTemplate(
+        file.filename,
+        getSkeletonContentHtml(),
+        StylesheetManager.getHighlightJSThemeUrl(this.#getResolvedTheme())
+      );
+      this.#applyStyleSheets(false);
+    } else {
+      this.#renderTabsSkeletonStructure();
+    }
+    try {
+      await loadHighlightJS();
+    } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : String(error);
+      this.#showError(`Error loading highlight.js: ${errorMsg}`);
+      return;
+    }
+    if (fileUrls.length === 1) {
+      await this.#displayCode(0);
+    } else {
+      await this.#displayWithTabs();
+    }
+  }
+  async #displayCode(index) {
+    const file = this.#getFile(index);
+    const themeUrl = StylesheetManager.getHighlightJSThemeUrl(this.#getResolvedTheme());
+    this.shadowRoot.innerHTML = generateSingleFileTemplate(file.filename, getSkeletonContentHtml(), themeUrl);
+    this.#applyStyleSheets(false);
+    await ensureFileLoaded(file, false);
+    const contentArea = this.shadowRoot.querySelector("article");
+    if (file.error) {
+      contentArea.innerHTML = generateArticleContent(file.filename, getErrorContentHtml(file.error, true));
+      const retryButton = contentArea.querySelector(".retry-button");
+      if (retryButton) {
+        retryButton.addEventListener("click", () => {
+          void (async () => {
+            contentArea.innerHTML = generateArticleContent(file.filename, getSkeletonContentHtml());
+            await ensureFileLoaded(file, true);
+            await this.#displayCode(index);
+          })();
+        });
+      }
+    } else {
+      contentArea.innerHTML = generateArticleContent(file.filename, getCodeContentHtml(file.code));
+      if (window.hljs) {
+        applySyntaxHighlighting(this.shadowRoot, file.code);
+      }
+    }
+  }
+  async #displayWithTabs() {
+    if (!this.#tabState.areTabsFullyRendered()) {
+      await this.#renderTabsStructure();
+      this.#tabState.setTabsFullyRendered(true);
+    } else {
+      this.#switchToTab(this.#tabState.getActiveTabIndex());
+    }
+  }
+  #renderTabsSkeletonStructure() {
+    const activeIndex = this.#tabState.getActiveTabIndex();
+    const tabsHtml = generateTabsHtml(this.#files, activeIndex);
+    const themeUrl = StylesheetManager.getHighlightJSThemeUrl(this.#getResolvedTheme());
+    this.shadowRoot.innerHTML = generateTabbedTemplate(tabsHtml, activeIndex, getSkeletonContentHtml(), themeUrl);
+    this.#applyStyleSheets(true);
+  }
+  async #renderTabsStructure() {
+    const activeIndex = this.#tabState.getActiveTabIndex();
+    const tabsHtml = generateTabsHtml(this.#files, activeIndex);
+    const themeUrl = StylesheetManager.getHighlightJSThemeUrl(this.#getResolvedTheme());
+    this.shadowRoot.innerHTML = generateTabbedTemplate(tabsHtml, activeIndex, getSkeletonContentHtml(), themeUrl);
+    this.#applyStyleSheets(true);
+    const nav = this.shadowRoot.querySelector('nav[role="tablist"]');
+    nav.addEventListener("click", (e) => {
+      const tab = e.target.closest('button[role="tab"]');
+      if (tab) {
+        const newIndex = parseInt(tab.dataset.index || "0");
+        if (newIndex !== this.#tabState.getActiveTabIndex()) {
+          this.#tabState.setActiveTabIndex(newIndex);
+          void this.#displayWithTabs();
+        }
+      }
+    });
+    nav.addEventListener("keydown", (e) => {
+      const keyboardEvent = e;
+      const tab = keyboardEvent.target.closest('button[role="tab"]');
+      if (!tab) {
+        return;
+      }
+      const currentIndex = this.#tabState.getActiveTabIndex();
+      const maxIndex = this.#files.length - 1;
+      const newIndex = handleTabKeyNavigation(keyboardEvent.key, currentIndex, maxIndex);
+      if (newIndex !== null) {
+        e.preventDefault();
+        this.#tabState.setActiveTabIndex(newIndex);
+        void this.#displayWithTabs().then(() => {
+          const newTab = this.shadowRoot.querySelector(`button[data-index="${newIndex}"]`);
+          if (newTab) {
+            newTab.focus();
+          }
+        });
+      }
+    });
+    this.#tabState.markTabAsRendered(activeIndex);
+    const contentElement = this.shadowRoot.querySelector('section[role="tabpanel"]');
+    await this.#loadAndRenderTabContent(activeIndex, contentElement).catch((error) => {
+      console.error("Failed to load tab content:", error);
+      contentElement.innerHTML = getErrorContentHtml(
+        `Failed to load content: ${error instanceof Error ? error.message : String(error)}`
+      );
+    });
+  }
+  #switchToTab(newIndex) {
+    updateTabButtonStates(this.shadowRoot, newIndex);
+    let contentElement = this.shadowRoot.querySelector(`section[role="tabpanel"][data-index="${newIndex}"]`);
+    if (!contentElement) {
+      contentElement = createTabPanel(newIndex, getSkeletonContentHtml());
+      this.shadowRoot.querySelector("article").appendChild(contentElement);
+      this.#tabState.markTabAsRendered(newIndex);
+      void this.#loadAndRenderTabContent(newIndex, contentElement).catch((error) => {
+        console.error("Failed to load tab content:", error);
+        contentElement.innerHTML = getErrorContentHtml(
+          `Failed to load content: ${error instanceof Error ? error.message : String(error)}`
+        );
+      });
+    }
+    updateTabPanelStates(this.shadowRoot, newIndex);
+  }
+  async #loadAndRenderTabContent(index, contentElement) {
+    const file = this.#getFile(index);
+    await ensureFileLoaded(file, false);
+    if (file.error || !file.code) {
+      const errorMsg = file.error || "Failed to load content: No content available";
+      contentElement.innerHTML = getErrorContentHtml(errorMsg, true);
+      const retryButton = contentElement.querySelector(".retry-button");
+      if (retryButton) {
+        retryButton.addEventListener("click", () => {
+          void (async () => {
+            contentElement.innerHTML = getSkeletonContentHtml();
+            await ensureFileLoaded(file, true);
+            await this.#loadAndRenderTabContent(index, contentElement);
+          })();
+        });
+      }
+    } else {
+      contentElement.innerHTML = getCodeContentHtml(file.code);
+      if (window.hljs) {
+        applySyntaxHighlighting(contentElement, file.code);
+      }
+    }
+  }
+  #showError(message) {
+    this.shadowRoot.innerHTML = `
+    <div class="error">${escapeHtml(message)}</div>
+    `;
+    this.#applyStyleSheets(false);
+  }
+};
+
+// src/index.ts
+customElements.define("github-code", GitHubCode);
+export {
+  GitHubCode
+};
+//# sourceMappingURL=github-code.js.map