@gsa-tts/graymatter-ui 0.3.11 → 0.3.13

package/README.md

@@ -47,7 +47,21 @@ The UI package can be used in two ways:
 </DesktopSideNav>
 ```
 
-### 2. Web Components (for any framework or vanilla JS)
+### 2. Utility Functions
+
+For utility functions like navigation control, use the dedicated `/utils` import path:
+
+```javascript
+// ✅ Recommended for Svelte-only projects
+import { toggleNavigation } from '@gsa-tts/graymatter-ui/utils';
+
+// ❌ Avoid this in Svelte-only projects (may cause build issues)
+import { toggleNavigation } from '@gsa-tts/graymatter-ui';
+```
+
+**Note:** The `/utils` path only exports TypeScript files and doesn't pull in Astro components, making it safe for Svelte-only projects that don't have Astro configured in their build system.
+
+### 3. Web Components (for any framework or vanilla JS)
 
 ```html
 <graymatter-desktop-side-nav show-app-icons="true" ssr-selected-item="api">
@@ -186,6 +200,16 @@ import {
 - **UsaBanner** - Government banner component
 - **UsaSkipNav** - Skip navigation link for accessibility
 
+### Utility Functions
+Available via the `/utils` import path:
+
+```javascript
+import { toggleNavigation } from '@gsa-tts/graymatter-ui/utils';
+```
+
+- **toggleNavigation()** - Toggle desktop navigation visibility
+- **controlDesktopNavigation()** - Advanced navigation control
+
 ## Key Features
 
 ### Event-Driven Architecture
@@ -221,6 +245,25 @@ These files are also included with the package in your `node_modules/@gsa-tts/gr
 - **React/Vue/Angular** - Via web components
 - **Vanilla JavaScript** - Via web components
 
+## Troubleshooting
+
+### Build Issues with Astro Files
+
+If you're getting build errors related to Astro files in a Svelte-only project, use the dedicated import paths:
+
+```javascript
+// ✅ For Svelte-only projects using web components
+import { toggleNavigation } from '@gsa-tts/graymatter-ui/utils';
+// Use web components in HTML: <graymatter-button>, <graymatter-logo>, etc.
+
+// ❌ Avoid in Svelte-only projects
+import { toggleNavigation } from '@gsa-tts/graymatter-ui';
+```
+
+**Common Error:** `Unexpected token '{'. Expected '.' or '('` when importing from the main package in Svelte-only projects.
+
+**Solution:** Use the `/utils` path for utility functions. For UI components, use web components instead of importing Svelte components directly.
+
 ## Browser Support
 
 - **Modern Browsers** - Chrome, Firefox, Safari, Edge (latest 2 versions)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -55,8 +55,8 @@
     "typescript": "5.7.3",
     "vite": "^6.3.5",
     "vitest": "^3.0.7",
-    "@gsa-tts/graymatter-eslint": "0.0.2",
     "@gsa-tts/graymatter-typescript-config": "0.0.2",
+    "@gsa-tts/graymatter-eslint": "0.0.2",
     "@gsa-tts/graymatter-vitest-config": "0.0.1"
   },
   "dependencies": {

package/src/components/Head.astro

@@ -10,6 +10,9 @@ 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;
@@ -18,13 +21,13 @@ const canonicalUrl = new URL(Astro.url.pathname, siteUrl).href;
 ---
 
 <meta name="viewport" content="width=device-width" />
-<title>{title}</title>
+<title>{pageTitle}</title>
 <script is:inline>
   if ('performance' in window) {
     performance.mark('usai:documenthead:start');
   }
 </script>
-{gtmID && <GoogleTagManager {gtmID} />}
+{gtmIDValue && <GoogleTagManager gtmID={gtmIDValue} />}
 <script is:inline src=`${getUrlFromBase('uswds/js/uswds-init.min.js')}`
 ></script>
 <Font cssVariable="--ai-font-family-sans" preload />

package/src/helpers/index.ts

@@ -1,3 +1,2 @@
-export * from './meta.js';
 export * from './url.js';
 export * from './string-formatters.js';

package/src/layouts/BaseLayout.astro

@@ -2,11 +2,7 @@
 import '../styles/base/global.css';
 import Head from '../components/Head.astro';
 import UsaSkipNav from '../components/UsaSkipNav.svelte';
-import { getPageTitle } from '../helpers/meta';
-import GoogleTagManager from '../components/GoogleTagManager.astro';
-const { description, openGraphImage, gtmID } = Astro.props;
-
-const title = getPageTitle(Astro);
+const { title, description, openGraphImage, gtmID } = Astro.props;
 ---
 
 <!doctype html>

package/src/layouts/GlobalAppLayout.astro

@@ -1,7 +1,6 @@
 ---
 import BaseLayout from '@gsa-tts/graymatter-ui/layouts/BaseLayout.astro';
 import '../styles/base/global.css';
-import { getPageTitle } from '@gsa-tts/graymatter-ui/helpers';
 import DesktopSideNav from '../components/DesktopSideNav.svelte';
 import DesktopHeader from '../components/DesktopHeader.svelte';
 import MobileTopNav from '../components/MobileTopNav.svelte';

package/src/helpers/meta.ts

@@ -1,5 +0,0 @@
-import type { AstroGlobal } from 'astro';
-
-export const getPageTitle = (astro: Pick<AstroGlobal, 'props'>): string => {
-  return astro.props?.title ? `${astro.props?.title} | USAi` : 'USAi';
-};