@gsa-tts/graymatter-ui 1.3.0 → 2.0.0

package/src/layouts/GlobalAppLayout.astro

@@ -1,536 +0,0 @@
----
-import BaseLayout from '@gsa-tts/graymatter-ui/layouts/BaseLayout.astro';
-import '../styles/base/global.css';
-import DesktopSideNav from '../components/DesktopSideNav.svelte';
-import DesktopHeader from '../components/DesktopHeader.svelte';
-import MobileTopNav from '../components/MobileTopNav.svelte';
-import MobileBottomNav from '../components/MobileBottomNav.svelte';
-import MobileSideMenu from '../components/MobileSideMenu.svelte';
-import Logo from '../components/Logo.svelte';
-import { siteName } from '../constants';
-
-const {
-  componentOptions = {},
-  ssrSelectedItem,
-  gtmID,
-  showAppIcons = true,
-  profileMenuData = undefined,
-  supplementalMenuData = undefined,
-  logoLinkUrl,
-  logoLinkLabel,
-  title: pageTitle,
-  description,
-  openGraphImage,
-  hideDiscover = true,
-  className = '',
-} = Astro.props;
-
-// Read at build time for static output; prefer PUBLIC_* for safe exposure
-const chatUrl =
-  import.meta.env.PUBLIC_CHAT_URL || process.env.PUBLIC_CHAT_URL || undefined;
-const consoleUrl =
-  import.meta.env.PUBLIC_CONSOLE_URL ||
-  process.env.PUBLIC_CONSOLE_URL ||
-  undefined;
-const apiDocsUrl =
-  import.meta.env.PUBLIC_API_DOCS_URL ||
-  process.env.PUBLIC_API_DOCS_URL ||
-  undefined;
-const discoverUrl =
-  import.meta.env.PUBLIC_DISCOVER_URL ||
-  process.env.PUBLIC_DISCOVER_URL ||
-  undefined;
-
-const chat = chatUrl || '#';
-const consoleApp = consoleUrl || '#';
-const api = apiDocsUrl || '#';
-const discover = discoverUrl || '#';
----
-
-<BaseLayout title={pageTitle} {gtmID} {description} {openGraphImage}>
-  <div class={`app ${className}`}>
-    <!-- Desktop Navigation -->
-    <div class="layout-container">
-      <nav aria-label="Main navigation">
-        <DesktopSideNav
-          client:load
-          ssrSelectedItem={ssrSelectedItem}
-          showAppIcons={showAppIcons}
-          hideDiscover={hideDiscover}
-          profileMenuData={profileMenuData}
-          apiUrl={api}
-          chatUrl={chat}
-          consoleUrl={consoleApp}
-          discoverUrl={discover}
-          {supplementalMenuData}
-        >
-          <slot name="sub-nav" />
-        </DesktopSideNav>
-      </nav>
-      <div class="main-container">
-        <header aria-label="Main site header">
-          <DesktopHeader client:load />
-        </header>
-        <main id="main-content" tabindex="0">
-          <slot />
-        </main>
-      </div>
-    </div>
-
-    <!-- Mobile Navigation -->
-    <nav aria-label="Mobile navigation">
-      <MobileTopNav
-        client:load
-        profileMenuData={profileMenuData}
-        logoLinkUrl={logoLinkUrl}
-        logoLinkLabel={logoLinkLabel}
-        {supplementalMenuData}
-      />
-      <MobileSideMenu client:load {logoLinkUrl} {logoLinkLabel}>
-        <slot name="sub-nav" />
-      </MobileSideMenu>
-      <MobileBottomNav
-        client:load
-        showAppIcons={showAppIcons}
-        hideDiscover={hideDiscover}
-        apiUrl={api}
-        chatUrl={chat}
-        consoleUrl={consoleApp}
-        discoverUrl={discover}
-      />
-    </nav>
-
-    <!-- Fixed Logo (Desktop only) -->
-    <nav aria-label="Site logo">
-      <div class="logo-fixed-container display-none tablet:display-flex">
-        {
-          logoLinkUrl ? (
-            <a
-              class="display-flex"
-              href={logoLinkUrl}
-              aria-label={logoLinkLabel}
-            >
-              <Logo width={75} height={22} />
-            </a>
-          ) : (
-            <Logo width={75} height={22} />
-          )
-        }
-      </div>
-    </nav>
-
-    <!-- Mobile Main Content -->
-    <main id="main-content-mobile" class="main-content-mobile">
-      <slot />
-    </main>
-  </div>
-</BaseLayout>
-
-<script is:inline>
-  if (typeof window !== 'undefined') {
-    // Handle URL hash scrolling immediately to prevent initial render at top
-    if (window.location.hash) {
-      const anchor = window.location.hash.substring(1);
-
-      // Set a flag to prevent SubNavMenu from also scrolling
-      sessionStorage.setItem('globalLayoutScrolling', 'true');
-
-      // Use requestAnimationFrame to scroll as early as possible
-      requestAnimationFrame(() => {
-        if (window.innerWidth <= 640) {
-          // Mobile: scroll in mobile content container
-          const mobileContent = document.getElementById('main-content-mobile');
-          if (mobileContent) {
-            const mobileAnchor = mobileContent.querySelector(
-              `[id="${anchor}"]`
-            );
-            if (mobileAnchor) {
-              const rect = mobileAnchor.getBoundingClientRect();
-              const mobileRect = mobileContent.getBoundingClientRect();
-              const scrollTop =
-                mobileContent.scrollTop + rect.top - mobileRect.top;
-              mobileContent.scrollTo({ top: scrollTop, behavior: 'auto' });
-
-              setTimeout(() => {
-                let topLevelTitle = null;
-                if (typeof window !== 'undefined') {
-                  topLevelTitle = sessionStorage.getItem(
-                    'subNav-topLevelTitle'
-                  );
-                  if (topLevelTitle) {
-                    try {
-                      topLevelTitle = JSON.parse(topLevelTitle);
-                    } catch {}
-                  }
-                }
-                window.dispatchEvent(
-                  new CustomEvent('sectionVisible', {
-                    detail: {
-                      title: topLevelTitle || mobileAnchor.textContent?.trim(),
-                      id: mobileAnchor.id,
-                    },
-                  })
-                );
-                sessionStorage.removeItem('globalLayoutScrolling');
-              }, 100);
-            }
-          }
-        } else {
-          // Desktop: scroll in desktop content container
-          const mainContent = document.getElementById('main-content');
-          if (mainContent) {
-            const desktopAnchor = mainContent.querySelector(`[id="${anchor}"]`);
-            if (desktopAnchor) {
-              try {
-                // Add temporary scroll margin to account for header
-                const originalScrollMargin =
-                  desktopAnchor.style.scrollMarginTop;
-                desktopAnchor.style.scrollMarginTop = '56px';
-
-                desktopAnchor.scrollIntoView({
-                  behavior: 'auto',
-                  block: 'start',
-                  inline: 'nearest',
-                });
-
-                // Restore original scroll margin after a delay
-                setTimeout(() => {
-                  desktopAnchor.style.scrollMarginTop = originalScrollMargin;
-                }, 1000);
-              } catch (e) {
-                // Fallback to manual calculation
-                const headerHeight = 56;
-                const rect = desktopAnchor.getBoundingClientRect();
-                const scrollTop = window.scrollY + rect.top - headerHeight;
-                const finalScrollTop = Math.max(0, scrollTop);
-                window.scrollTo({ top: finalScrollTop, behavior: 'auto' });
-              }
-
-              setTimeout(() => {
-                let topLevelTitle = null;
-                if (typeof window !== 'undefined') {
-                  topLevelTitle = sessionStorage.getItem(
-                    'subNav-topLevelTitle'
-                  );
-                  if (topLevelTitle) {
-                    try {
-                      topLevelTitle = JSON.parse(topLevelTitle);
-                    } catch {}
-                  }
-                }
-                window.dispatchEvent(
-                  new CustomEvent('sectionVisible', {
-                    detail: {
-                      title: topLevelTitle || desktopAnchor.textContent?.trim(),
-                      id: desktopAnchor.id,
-                    },
-                  })
-                );
-                sessionStorage.removeItem('globalLayoutScrolling');
-              }, 100);
-            }
-          }
-        }
-      });
-    }
-
-    window.addEventListener('DOMContentLoaded', () => {
-      // Check navigation flag first, before any components mount
-      const isMainNavNavigation =
-        sessionStorage.getItem('navigatingToMainNav') === 'true';
-
-      if (isMainNavNavigation) {
-        // Clear the flag immediately
-        sessionStorage.removeItem('navigatingToMainNav');
-        // Don't clear header state here - let navigation components handle it
-      }
-
-      // Handle URL hash scrolling (fallback for cases where immediate scroll didn't work)
-      if (window.location.hash) {
-        const anchor = window.location.hash.substring(1);
-
-        // Only proceed if we haven't already scrolled
-        if (sessionStorage.getItem('globalLayoutScrolling') !== 'true') {
-          sessionStorage.setItem('globalLayoutScrolling', 'true');
-
-          if (window.innerWidth <= 640) {
-            // Mobile: scroll in mobile content container
-            const mobileContent = document.getElementById(
-              'main-content-mobile'
-            );
-            if (mobileContent) {
-              const mobileAnchor = mobileContent.querySelector(
-                `[id="${anchor}"]`
-              );
-              if (mobileAnchor) {
-                setTimeout(() => {
-                  const rect = mobileAnchor.getBoundingClientRect();
-                  const mobileRect = mobileContent.getBoundingClientRect();
-                  const scrollTop =
-                    mobileContent.scrollTop + rect.top - mobileRect.top;
-                  mobileContent.scrollTo({ top: scrollTop, behavior: 'auto' });
-
-                  setTimeout(() => {
-                    let topLevelTitle = null;
-                    if (typeof window !== 'undefined') {
-                      topLevelTitle = sessionStorage.getItem(
-                        'subNav-topLevelTitle'
-                      );
-                      if (topLevelTitle) {
-                        try {
-                          topLevelTitle = JSON.parse(topLevelTitle);
-                        } catch {}
-                      }
-                    }
-                    window.dispatchEvent(
-                      new CustomEvent('sectionVisible', {
-                        detail: {
-                          title:
-                            topLevelTitle || mobileAnchor.textContent?.trim(),
-                          id: mobileAnchor.id,
-                        },
-                      })
-                    );
-                    // Clear the flag after scrolling
-                    if (typeof window !== 'undefined') {
-                      sessionStorage.removeItem('globalLayoutScrolling');
-                    }
-                  }, 100);
-                }, 100);
-              }
-            }
-          } else {
-            // Desktop: scroll in desktop content container
-            const mainContent = document.getElementById('main-content');
-            if (mainContent) {
-              const desktopAnchor = mainContent.querySelector(
-                `[id="${anchor}"]`
-              );
-              if (desktopAnchor) {
-                setTimeout(() => {
-                  // Try scrollIntoView first with a temporary offset
-                  try {
-                    // Add temporary scroll margin to account for header
-                    const originalScrollMargin =
-                      desktopAnchor.style.scrollMarginTop;
-                    desktopAnchor.style.scrollMarginTop = '56px';
-
-                    desktopAnchor.scrollIntoView({
-                      behavior: 'auto',
-                      block: 'start',
-                      inline: 'nearest',
-                    });
-
-                    // Restore original scroll margin after a delay
-                    setTimeout(() => {
-                      desktopAnchor.style.scrollMarginTop =
-                        originalScrollMargin;
-                    }, 1000);
-                  } catch (e) {
-                    // Fallback to manual calculation
-                    const headerHeight = 56;
-                    const rect = desktopAnchor.getBoundingClientRect();
-                    const scrollTop = window.scrollY + rect.top - headerHeight;
-                    // Ensure scrollTop is not negative
-                    const finalScrollTop = Math.max(0, scrollTop);
-
-                    window.scrollTo({ top: finalScrollTop, behavior: 'auto' });
-                  }
-
-                  setTimeout(() => {
-                    let topLevelTitle = null;
-                    if (typeof window !== 'undefined') {
-                      topLevelTitle = sessionStorage.getItem(
-                        'subNav-topLevelTitle'
-                      );
-                      if (topLevelTitle) {
-                        try {
-                          topLevelTitle = JSON.parse(topLevelTitle);
-                        } catch {}
-                      }
-                    }
-                    window.dispatchEvent(
-                      new CustomEvent('sectionVisible', {
-                        detail: {
-                          title:
-                            topLevelTitle || desktopAnchor.textContent?.trim(),
-                          id: desktopAnchor.id,
-                        },
-                      })
-                    );
-                    // Clear the flag after scrolling
-                    if (typeof window !== 'undefined') {
-                      sessionStorage.removeItem('globalLayoutScrolling');
-                    }
-                  }, 100);
-                }, 100);
-              } else {
-                // Log all available anchors for debugging
-                const allAnchors = mainContent.querySelectorAll('[id]');
-                // Clear the flag if anchor not found
-                if (typeof window !== 'undefined') {
-                  sessionStorage.removeItem('globalLayoutScrolling');
-                }
-              }
-            } else {
-              // Clear the flag if container not found
-              if (typeof window !== 'undefined') {
-                sessionStorage.removeItem('globalLayoutScrolling');
-              }
-            }
-          }
-        }
-      }
-    });
-  }
-
-  // Handle layout changes (mobile ↔ desktop)
-  if (typeof window !== 'undefined') {
-    let lastWidth = window.innerWidth;
-    let resizeTimeout = null;
-
-    window.addEventListener('resize', () => {
-      // Debounce resize events
-      if (resizeTimeout) {
-        clearTimeout(resizeTimeout);
-      }
-
-      resizeTimeout = setTimeout(() => {
-        const currentWidth = window.innerWidth;
-        const wasMobile = lastWidth <= 640;
-        const isMobile = currentWidth <= 640;
-
-        if (wasMobile !== isMobile) {
-          // Handle anchor scrolling for layout changes
-          if (window.location.hash) {
-            const anchor = window.location.hash.substring(1);
-
-            // Wait for navigation state to update, then scroll
-            setTimeout(() => {
-              if (isMobile) {
-                // Mobile: scroll in mobile content container
-                const mobileContent = document.getElementById(
-                  'main-content-mobile'
-                );
-                if (mobileContent) {
-                  const mobileAnchor = mobileContent.querySelector(
-                    `[id="${anchor}"]`
-                  );
-                  if (mobileAnchor) {
-                    const rect = mobileAnchor.getBoundingClientRect();
-                    const mobileRect = mobileContent.getBoundingClientRect();
-                    const scrollTop =
-                      mobileContent.scrollTop + rect.top - mobileRect.top;
-                    mobileContent.scrollTo({
-                      top: scrollTop,
-                      behavior: 'auto',
-                    });
-
-                    setTimeout(() => {
-                      let topLevelTitle = null;
-                      if (typeof window !== 'undefined') {
-                        topLevelTitle = sessionStorage.getItem(
-                          'subNav-topLevelTitle'
-                        );
-                        if (topLevelTitle) {
-                          try {
-                            topLevelTitle = JSON.parse(topLevelTitle);
-                          } catch {}
-                        }
-                      }
-                      window.dispatchEvent(
-                        new CustomEvent('sectionVisible', {
-                          detail: {
-                            title:
-                              topLevelTitle || mobileAnchor.textContent?.trim(),
-                            id: mobileAnchor.id,
-                          },
-                        })
-                      );
-                    }, 500);
-                  }
-                }
-              } else {
-                // Desktop: scroll in desktop content container
-                const mainContent = document.getElementById('main-content');
-                if (mainContent) {
-                  const desktopAnchor = mainContent.querySelector(
-                    `[id="${anchor}"]`
-                  );
-                  if (desktopAnchor) {
-                    // Try scrollIntoView first with a temporary offset
-                    try {
-                      // Add temporary scroll margin to account for header
-                      const originalScrollMargin =
-                        desktopAnchor.style.scrollMarginTop;
-                      desktopAnchor.style.scrollMarginTop = '56px';
-
-                      desktopAnchor.scrollIntoView({
-                        behavior: 'auto',
-                        block: 'start',
-                        inline: 'nearest',
-                      });
-
-                      // Restore original scroll margin after a delay
-                      setTimeout(() => {
-                        desktopAnchor.style.scrollMarginTop =
-                          originalScrollMargin;
-                      }, 1000);
-                    } catch (e) {
-                      // Fallback to manual calculation
-                      const headerHeight = 56;
-                      const rect = desktopAnchor.getBoundingClientRect();
-                      const scrollTop =
-                        window.scrollY + rect.top - headerHeight;
-
-                      // Ensure scrollTop is not negative
-                      const finalScrollTop = Math.max(0, scrollTop);
-
-                      window.scrollTo({
-                        top: finalScrollTop,
-                        behavior: 'auto',
-                      });
-                    }
-
-                    setTimeout(() => {
-                      let topLevelTitle = null;
-                      if (typeof window !== 'undefined') {
-                        topLevelTitle = sessionStorage.getItem(
-                          'subNav-topLevelTitle'
-                        );
-                        if (topLevelTitle) {
-                          try {
-                            topLevelTitle = JSON.parse(topLevelTitle);
-                          } catch {}
-                        }
-                      }
-                      window.dispatchEvent(
-                        new CustomEvent('sectionVisible', {
-                          detail: {
-                            title:
-                              topLevelTitle ||
-                              desktopAnchor.textContent?.trim(),
-                            id: desktopAnchor.id,
-                          },
-                        })
-                      );
-                    }, 500);
-                  }
-                }
-              }
-            }, 350); // Wait for navigation state to settle
-          }
-
-          // Dispatch custom event for layout transition
-          window.dispatchEvent(
-            new CustomEvent('layoutTransition', {
-              detail: { isMobile },
-            })
-          );
-        }
-
-        lastWidth = currentWidth;
-      }, 250); // Debounce delay
-    });
-  }
-</script>

package/src/layouts/GoogleTagManager.astro

@@ -1,17 +0,0 @@
----
-let gtmCode = '';
-if (Astro.props.gtmID) {
-  // Adds Google Tag Manager and DAP analytics for GSA/TTS (required for federal sites)
-  gtmCode = `<!-- Google tag (gtag.js) -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=${Astro.props.gtmID}"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-    gtag('js', new Date());
-    gtag('config', '${Astro.props.gtmID}');
-  </script>
-  <script id="_fed_an_ua_tag" async src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=GSA&subagency=TTS"></script>`;
-}
----
-
-<Fragment set:html={gtmCode} />

package/src/layouts/Head.astro

@@ -1,101 +0,0 @@
----
-import { siteName } from '../constants';
-const { title, description, openGraphImage, gtmID } = Astro.props;
-import { getUrlFromBase } from '@gsa-tts/graymatter-ui/helpers';
-import GoogleTagManager from './GoogleTagManager.astro';
-import { fontPreloads } from './fonts';
-
-// Default values for Open Graph
-const defaultDescription =
-  'Accelerating trusted AI adoption across government. Three powerful AI tools. Industry-leading models. One integrated platform.';
-const defaultOgImage = getUrlFromBase('/common/assets/images/og-preview.webp');
-
-// Use computed variables instead of direct props to avoid Vite 7 import analysis issues
-const pageTitle = title ? `${title} | USAi` : 'USAi';
-const gtmIDValue = gtmID;
-const ogTitle = title || siteName;
-const ogDescription = description || defaultDescription;
-const ogImage = openGraphImage || defaultOgImage;
-const siteUrl = Astro.site || Astro.url.origin;
-const canonicalUrl = new URL(Astro.url.pathname, siteUrl).href;
----
-
-<meta name="viewport" content="width=device-width" />
-<title>{pageTitle}</title>
-<script is:inline>
-  if ('performance' in window) {
-    performance.mark('usai:documenthead:start');
-  }
-</script>
-{gtmIDValue && <GoogleTagManager gtmID={gtmIDValue} />}
-<script is:inline src={`${getUrlFromBase('uswds/js/uswds-init.min.js')}`}
-></script>
-
-{
-  fontPreloads.map(href => (
-    <link rel="preload" href={href} as="font" type="font/woff2" crossorigin />
-  ))
-}
-
-<style is:global>
-  :root {
-    --ai-font-family-sans: 'Archivo', sans-serif;
-    --ai-font-family-monospace: 'Space Mono', monospace;
-  }
-
-  body {
-    font-family: var(--ai-font-family-sans);
-  }
-</style>
-<script>
-  import '../../static/uswds/js/uswds.js';
-</script>
-
-<!-- Open Graph -->
-<meta property="og:type" content="website" />
-<meta property="og:url" content={canonicalUrl} />
-<meta property="og:title" content={ogTitle} />
-<meta property="og:description" content={ogDescription} />
-<meta property="og:image" content={ogImage} />
-<meta property="og:site_name" content={ogTitle} />
-
-<meta property="twitter:card" content="summary_large_image" />
-<meta property="twitter:url" content={canonicalUrl} />
-<meta property="twitter:title" content={ogTitle} />
-<meta property="twitter:description" content={ogDescription} />
-<meta property="twitter:image" content={ogImage} />
-
-<!-- Additional meta tags -->
-<meta name="description" content={ogDescription} />
-<link rel="canonical" href={canonicalUrl} />
-
-<link
-  rel="icon"
-  sizes="any"
-  href=`${getUrlFromBase('/common/assets/images/favicon.ico')}`
-  media="(prefers-color-scheme: light)"
-/>
-<link
-  rel="icon"
-  type="image/svg+xml"
-  href=`${getUrlFromBase('/common/assets/images/favicon-light.svg')}`
-  media="(prefers-color-scheme: light)"
-/>
-<link
-  rel="icon"
-  sizes="any"
-  href=`${getUrlFromBase('/common/assets/images/favicon-dark.ico')}`
-  media="(prefers-color-scheme: dark)"
-/>
-<link
-  rel="icon"
-  type="image/svg+xml"
-  href=`${getUrlFromBase('/common/assets/images/favicon-dark.svg')}`
-  media="(prefers-color-scheme: dark)"
-/>
-<!-- This belongs at the very bottom of the head -->
-<script is:inline>
-  if ('performance' in window) {
-    performance.mark('usai:documenthead:end');
-  }
-</script>

package/src/layouts/fonts.ts

@@ -1,17 +0,0 @@
-// Centralized font imports and preload URLs.
-import '@fontsource/archivo/400.css';
-import '@fontsource/archivo/500.css';
-import '@fontsource/archivo/600.css';
-import '@fontsource/space-mono/400.css';
-
-import archivo400Url from '@fontsource/archivo/files/archivo-latin-400-normal.woff2?url';
-import archivo500Url from '@fontsource/archivo/files/archivo-latin-500-normal.woff2?url';
-import archivo600Url from '@fontsource/archivo/files/archivo-latin-600-normal.woff2?url';
-import spaceMono400Url from '@fontsource/space-mono/files/space-mono-latin-400-normal.woff2?url';
-
-export const fontPreloads = [
-  archivo400Url,
-  archivo500Url,
-  archivo600Url,
-  spaceMono400Url,
-];