@glamcor/dna-shared-nav 1.0.0

package/README.md

@@ -0,0 +1,210 @@
+# DNA Shared Navigation
+
+Universal navigation component for all DNA microsites. Provides a consistent two-row navigation header across Dashboard, SPOT, Water, Pulse, Hydrogen, and Oxygen apps.
+
+## Architecture
+
+The navigation consists of two rows (80px total height):
+
+```
+Row 1 - Header (44px): [DNA Logo] [Inter-app Nav: Dashboard | SPOT | Water | Pulse | Hydrogen | Oxygen] [Avatar]
+Row 2 - App Subnav (36px): [App Name] [App-specific pages] ......................... [Pinned Jobs →]
+```
+
+- **Header**: Logo links to Dashboard, inter-app navigation for switching between DNA apps, avatar menu with user info and logout
+- **App Subnav**: Current app name, app-specific page links, pinned jobs carousel (right-aligned)
+
+## Installation
+
+In a DNA monorepo workspace, add to your app's `package.json`:
+
+```json
+{
+  "dependencies": {
+    "dna-shared-nav": "*"
+  }
+}
+```
+
+Then run `npm install` from the monorepo root.
+
+## Usage
+
+### Basic Setup
+
+```tsx
+import { DNANavigation } from 'dna-shared-nav';
+import 'dna-shared-nav/dist/styles.css';
+
+export function Layout({ children }) {
+  const user = {
+    id: '1',
+    email: 'user@example.com',
+    name: 'John Doe',
+    role: 'admin',
+  };
+
+  return (
+    <>
+      <DNANavigation
+        user={user}
+        currentApp="Water"
+        appName="Water"
+        subnavItems={[
+          { name: 'Dashboard', href: '/water', isActive: true },
+          { name: 'Customers', href: '/water/customers' },
+          { name: 'Jobs', href: '/water/jobs' },
+          { name: 'Analytics', href: '/water/analytics' },
+        ]}
+        onLogout={() => signOut()}
+      />
+      <main>{children}</main>
+    </>
+  );
+}
+```
+
+### With Pinned Jobs
+
+Pinned jobs appear on the right side of the app subnav. They show progress rings and support a carousel when there are more than 2 jobs.
+
+```tsx
+<DNANavigation
+  user={user}
+  currentApp="Water"
+  appName="Water"
+  subnavItems={subnavItems}
+  pinnedJobs={[
+    {
+      id: '1',
+      appName: 'Water',
+      appColor: '#38bdf8',
+      jobName: 'Q4 Data Enrichment',
+      progress: 59,
+    },
+    {
+      id: '2',
+      appName: 'SPOT',
+      appColor: '#a78bfa',
+      jobName: 'Lead Scoring Batch',
+      progress: 23,
+    },
+  ]}
+  onUnpinJob={(jobId) => handleUnpin(jobId)}
+  onLogout={() => signOut()}
+/>
+```
+
+## Props
+
+### DNANavigationProps
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `user` | `DNAUser \| null` | Yes | Current user object, or null if not logged in |
+| `currentApp` | `string` | No | Name of active app in header nav (e.g., "Water", "SPOT") |
+| `appName` | `string` | Yes | Display name shown in app subnav |
+| `headerItems` | `DNANavItem[]` | No | Override default inter-app navigation items |
+| `subnavItems` | `AppSubnavItem[]` | Yes | App-specific page links |
+| `pinnedJobs` | `PinnedJob[]` | No | Jobs to show in pinned carousel |
+| `logoSrc` | `string` | No | Custom logo image URL (defaults to "DNA" text) |
+| `onLogout` | `() => void` | No | Callback when user clicks logout |
+| `onUnpinJob` | `(jobId: string) => void` | No | Callback when user unpins a job |
+
+### DNAUser
+
+```typescript
+interface DNAUser {
+  id: string;
+  email: string;
+  name: string;
+  role?: 'superadmin' | 'admin' | 'editor' | 'viewer';
+  avatar?: string;
+}
+```
+
+### AppSubnavItem
+
+```typescript
+interface AppSubnavItem {
+  name: string;      // Display text
+  href: string;      // Link URL
+  isActive?: boolean; // Highlight as current page
+}
+```
+
+### PinnedJob
+
+```typescript
+interface PinnedJob {
+  id: string;
+  appName: string;    // Short name (e.g., "Water", "SPOT")
+  appColor?: string;  // Hex color for progress ring (e.g., '#38bdf8')
+  jobName: string;    // Job display name
+  progress: number;   // 0-100 percentage
+  meta?: string;      // Optional metadata (e.g., "142 / 240 records")
+}
+```
+
+## Environment Variables
+
+The default inter-app navigation uses these environment variables for URLs:
+
+```env
+NEXT_PUBLIC_DNA_DASHBOARD_URL=https://dashboard.dna.example.com
+NEXT_PUBLIC_SPOT_URL=https://spot.dna.example.com
+NEXT_PUBLIC_DNA_WATER_URL=https://water.dna.example.com
+NEXT_PUBLIC_DNA_PULSE_URL=https://pulse.dna.example.com
+NEXT_PUBLIC_DNA_HYDROGEN_URL=https://hydrogen.dna.example.com
+NEXT_PUBLIC_DNA_OXYGEN_URL=https://oxygen.dna.example.com
+```
+
+If not set, links fall back to relative paths (`/`, `/spot`, `/water`, etc.).
+
+## App Colors
+
+Recommended colors for each app's pinned jobs:
+
+| App | Color | Hex |
+|-----|-------|-----|
+| Water | Sky Blue | `#38bdf8` |
+| SPOT | Purple | `#a78bfa` |
+| Pulse | Rose | `#fb7185` |
+| Hydrogen | Emerald | `#34d399` |
+| Oxygen | Amber | `#fbbf24` |
+
+## Individual Components
+
+For advanced use cases, you can import components individually:
+
+```tsx
+import { DNAHeader, AppSubnav, PinnedJobs, AvatarMenu } from 'dna-shared-nav';
+```
+
+## Styling
+
+The navigation uses CSS classes prefixed with `dna-`, `app-subnav-`, and `pinned-`. Styles require these fonts:
+
+- **DM Sans** - Primary text
+- **JetBrains Mono** - Logo, progress values
+
+Add to your app's `<head>`:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet">
+```
+
+## Role-Based Navigation
+
+Navigation items can be restricted by role. The role hierarchy is:
+
+`viewer` < `editor` < `admin` < `superadmin`
+
+```tsx
+const headerItems = [
+  { name: 'Dashboard', href: '/' },
+  { name: 'Admin', href: '/admin', requiredRole: 'admin' }, // Only admin+ see this
+];
+
+<DNANavigation headerItems={headerItems} ... />
+```

package/dist/AppSubnav.d.ts

@@ -0,0 +1,2 @@
+import type { AppSubnavProps } from './types';
+export declare function AppSubnav({ appName, items, pinnedJobs, onUnpinJob, }: AppSubnavProps): import("react/jsx-runtime").JSX.Element;

package/dist/AppSubnav.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PinnedJobs } from './PinnedJobs';
+export function AppSubnav({ appName, items, pinnedJobs = [], onUnpinJob, }) {
+    return (_jsxs("nav", { className: "app-subnav", children: [_jsxs("div", { className: "app-subnav-left", children: [_jsx("span", { className: "app-subnav-name", children: appName }), _jsx("div", { className: "app-subnav-links", children: items.map((item) => (_jsx("a", { href: item.href, className: `app-subnav-item ${item.isActive ? 'active' : ''}`, children: item.name }, item.name))) })] }), _jsx(PinnedJobs, { jobs: pinnedJobs, onUnpin: onUnpinJob })] }));
+}

package/dist/AvatarMenu.d.ts

@@ -0,0 +1,2 @@
+import type { AvatarMenuProps } from './types';
+export declare function AvatarMenu({ userName, userEmail, initials, onLogout }: AvatarMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/AvatarMenu.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+export function AvatarMenu({ userName, userEmail, initials, onLogout }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const menuRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('click', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, [isOpen]);
+    const handleLogout = () => {
+        setIsOpen(false);
+        if (onLogout) {
+            onLogout();
+        }
+        else {
+            window.location.href = '/api/auth/logout';
+        }
+    };
+    return (_jsxs("div", { className: "dna-avatar-menu", ref: menuRef, children: [_jsx("div", { className: "dna-avatar-button", onClick: (e) => {
+                    e.stopPropagation();
+                    setIsOpen(!isOpen);
+                }, children: initials }), _jsxs("div", { className: `dna-dropdown-menu ${isOpen ? 'active' : ''}`, children: [_jsxs("div", { className: "dna-dropdown-header", children: [_jsx("div", { className: "dna-dropdown-user-name", children: userName }), _jsx("div", { className: "dna-dropdown-user-email", children: userEmail })] }), _jsx("a", { href: "/profile", className: "dna-dropdown-item", children: "Profile" }), _jsx("a", { href: "/settings", className: "dna-dropdown-item", children: "Settings" }), _jsx("a", { href: "/team", className: "dna-dropdown-item", children: "Team" }), _jsx("div", { className: "dna-dropdown-divider" }), _jsx("a", { href: "/docs", className: "dna-dropdown-item", children: "Documentation" }), _jsx("a", { href: "/support", className: "dna-dropdown-item", children: "Support" }), _jsx("div", { className: "dna-dropdown-divider" }), _jsx("button", { onClick: handleLogout, className: "dna-dropdown-item danger", children: "Sign Out" })] })] }));
+}

package/dist/DNAHeader.d.ts

@@ -0,0 +1,2 @@
+import type { DNAHeaderProps } from './types';
+export declare function DNAHeader({ user, currentApp, items, logoSrc, onLogout, }: DNAHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/DNAHeader.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AvatarMenu } from './AvatarMenu';
+const DEFAULT_NAV_ITEMS = [
+    { name: 'Dashboard', href: process.env.NEXT_PUBLIC_DNA_DASHBOARD_URL || '/' },
+    { name: 'SPOT', href: process.env.NEXT_PUBLIC_SPOT_URL || '/spot' },
+    { name: 'Water', href: process.env.NEXT_PUBLIC_DNA_WATER_URL || '/water' },
+    { name: 'Pulse', href: process.env.NEXT_PUBLIC_DNA_PULSE_URL || '/pulse' },
+    { name: 'Hydrogen', href: process.env.NEXT_PUBLIC_DNA_HYDROGEN_URL || '/hydrogen' },
+    { name: 'Oxygen', href: process.env.NEXT_PUBLIC_DNA_OXYGEN_URL || '/oxygen' },
+];
+const ROLE_HIERARCHY = ['viewer', 'editor', 'admin', 'superadmin'];
+function hasPermission(userRole, requiredRole) {
+    if (!userRole)
+        return false;
+    const userRoleIndex = ROLE_HIERARCHY.indexOf(userRole);
+    const requiredRoleIndex = ROLE_HIERARCHY.indexOf(requiredRole);
+    return userRoleIndex >= requiredRoleIndex;
+}
+function getUserInitials(name) {
+    return name
+        .split(' ')
+        .map((part) => part[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2);
+}
+export function DNAHeader({ user, currentApp = 'Dashboard', items = DEFAULT_NAV_ITEMS, logoSrc = '/DNA_LOGO.png', onLogout, }) {
+    const visibleItems = items.filter((item) => {
+        if (!item.requiredRole)
+            return true;
+        if (!user)
+            return false;
+        return hasPermission(user.role, item.requiredRole);
+    });
+    return (_jsxs("header", { className: "dna-header", children: [_jsx("a", { href: process.env.NEXT_PUBLIC_DNA_DASHBOARD_URL || '/', className: "dna-logo-container", children: _jsx("img", { src: logoSrc, alt: "DNA", className: "dna-logo-img" }) }), _jsx("nav", { className: "dna-nav-links", children: visibleItems.map((item) => {
+                    const isActive = item.name === currentApp;
+                    return (_jsxs("a", { href: item.href, className: `dna-nav-item ${isActive ? 'active' : ''}`, children: [item.hasNotification && _jsx("span", { className: "dna-notification-dot" }), item.name] }, item.name));
+                }) }), _jsx("div", { className: "dna-header-right", children: user ? (_jsx(AvatarMenu, { userName: user.name, userEmail: user.email, initials: getUserInitials(user.name), onLogout: onLogout })) : (_jsx("a", { href: "/login", className: "dna-login-btn", children: "Sign In" })) })] }));
+}

package/dist/DNANavigation.d.ts

@@ -0,0 +1,28 @@
+import type { DNANavigationProps } from './types';
+/**
+ * DNANavigation - Complete navigation component for DNA microsites
+ *
+ * Renders:
+ * 1. Header bar: Logo | Inter-app navigation | Avatar
+ * 2. App subnav: App name | App-specific pages | Pinned jobs (right)
+ *
+ * @example
+ * ```tsx
+ * <DNANavigation
+ *   user={user}
+ *   currentApp="Water"
+ *   appName="Water"
+ *   subnavItems={[
+ *     { name: 'Dashboard', href: '/admin', isActive: true },
+ *     { name: 'Customers', href: '/admin/customers' },
+ *     { name: 'Jobs', href: '/admin/jobs' },
+ *   ]}
+ *   pinnedJobs={[
+ *     { id: '1', appName: 'Water', jobName: 'Q4 Enrichment', progress: 59, appColor: '#38bdf8' },
+ *   ]}
+ *   onUnpinJob={(id) => console.log('Unpin:', id)}
+ *   onLogout={() => signOut()}
+ * />
+ * ```
+ */
+export declare function DNANavigation({ user, currentApp, appName, headerItems, subnavItems, pinnedJobs, logoSrc, onLogout, onUnpinJob, }: DNANavigationProps): import("react/jsx-runtime").JSX.Element;

package/dist/DNANavigation.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DNAHeader } from './DNAHeader';
+import { AppSubnav } from './AppSubnav';
+/**
+ * DNANavigation - Complete navigation component for DNA microsites
+ *
+ * Renders:
+ * 1. Header bar: Logo | Inter-app navigation | Avatar
+ * 2. App subnav: App name | App-specific pages | Pinned jobs (right)
+ *
+ * @example
+ * ```tsx
+ * <DNANavigation
+ *   user={user}
+ *   currentApp="Water"
+ *   appName="Water"
+ *   subnavItems={[
+ *     { name: 'Dashboard', href: '/admin', isActive: true },
+ *     { name: 'Customers', href: '/admin/customers' },
+ *     { name: 'Jobs', href: '/admin/jobs' },
+ *   ]}
+ *   pinnedJobs={[
+ *     { id: '1', appName: 'Water', jobName: 'Q4 Enrichment', progress: 59, appColor: '#38bdf8' },
+ *   ]}
+ *   onUnpinJob={(id) => console.log('Unpin:', id)}
+ *   onLogout={() => signOut()}
+ * />
+ * ```
+ */
+export function DNANavigation({ user, currentApp, appName, headerItems, subnavItems, pinnedJobs = [], logoSrc, onLogout, onUnpinJob, }) {
+    return (_jsxs("div", { className: "dna-navigation", children: [_jsx(DNAHeader, { user: user, currentApp: currentApp, items: headerItems, logoSrc: logoSrc, onLogout: onLogout }), _jsx(AppSubnav, { appName: appName, items: subnavItems, pinnedJobs: pinnedJobs, onUnpinJob: onUnpinJob })] }));
+}

package/dist/PinnedJobs.d.ts

@@ -0,0 +1,2 @@
+import type { PinnedJobsProps } from './types';
+export declare function PinnedJobs({ jobs, onUnpin }: PinnedJobsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/PinnedJobs.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+// Progress ring component
+function ProgressRing({ progress, color = '#facc15' }) {
+    const radius = 9;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - (progress / 100) * circumference;
+    return (_jsxs("div", { className: "pinned-progress-ring", children: [_jsxs("svg", { viewBox: "0 0 24 24", children: [_jsx("circle", { className: "pinned-ring-bg", cx: "12", cy: "12", r: radius }), _jsx("circle", { className: "pinned-ring-progress", cx: "12", cy: "12", r: radius, style: {
+                            strokeDasharray: circumference,
+                            strokeDashoffset: offset,
+                            stroke: color,
+                        } })] }), _jsxs("span", { className: "pinned-progress-value", children: [progress, "%"] })] }));
+}
+// Single pinned job pill
+function PinnedJobPill({ job, onUnpin, }) {
+    const handleUnpin = (e) => {
+        e.stopPropagation();
+        onUnpin?.(job.id);
+    };
+    return (_jsxs("div", { className: "pinned-job", children: [_jsx(ProgressRing, { progress: job.progress, color: job.appColor }), _jsxs("div", { className: "pinned-job-info", children: [_jsx("span", { className: "pinned-job-app", style: { color: job.appColor }, children: job.appName }), _jsx("span", { className: "pinned-job-name", children: job.jobName })] }), _jsx("button", { className: "pinned-unpin-btn", onClick: handleUnpin, title: "Unpin", "aria-label": `Unpin ${job.jobName}`, children: _jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }) })] }));
+}
+export function PinnedJobs({ jobs, onUnpin }) {
+    const [scrollIndex, setScrollIndex] = useState(0);
+    const [showArrows, setShowArrows] = useState(false);
+    const containerRef = useRef(null);
+    // Check if we need carousel arrows
+    useEffect(() => {
+        setShowArrows(jobs.length > 2);
+        // Reset scroll if jobs are removed
+        if (scrollIndex > 0 && scrollIndex >= jobs.length - 1) {
+            setScrollIndex(Math.max(0, jobs.length - 2));
+        }
+    }, [jobs.length, scrollIndex]);
+    const maxIndex = Math.max(0, jobs.length - 2);
+    const scrollPrev = () => {
+        setScrollIndex((prev) => Math.max(0, prev - 1));
+    };
+    const scrollNext = () => {
+        setScrollIndex((prev) => Math.min(maxIndex, prev + 1));
+    };
+    if (jobs.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: "pinned-jobs", children: [showArrows && scrollIndex > 0 && (_jsx("button", { className: "pinned-nav-btn", onClick: scrollPrev, "aria-label": "Previous pinned jobs", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M15 18l-6-6 6-6" }) }) })), _jsx("div", { className: "pinned-jobs-container", ref: containerRef, style: {
+                    transform: `translateX(-${scrollIndex * 200}px)`,
+                }, children: jobs.map((job) => (_jsx(PinnedJobPill, { job: job, onUnpin: onUnpin }, job.id))) }), showArrows && scrollIndex < maxIndex && (_jsx("button", { className: "pinned-nav-btn", onClick: scrollNext, "aria-label": "Next pinned jobs", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M9 18l6-6-6-6" }) }) }))] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { DNANavigation } from './DNANavigation';
+export { DNAHeader } from './DNAHeader';
+export { AppSubnav } from './AppSubnav';
+export { PinnedJobs } from './PinnedJobs';
+export { AvatarMenu } from './AvatarMenu';
+export * from './types';

package/dist/index.js

@@ -0,0 +1,9 @@
+// Main combined component
+export { DNANavigation } from './DNANavigation';
+// Individual components (for advanced usage)
+export { DNAHeader } from './DNAHeader';
+export { AppSubnav } from './AppSubnav';
+export { PinnedJobs } from './PinnedJobs';
+export { AvatarMenu } from './AvatarMenu';
+// Types
+export * from './types';

package/dist/styles.css

@@ -0,0 +1,425 @@
+/* DNA Shared Navigation Styles */
+/* Two-row navigation: Header + App Subnav */
+
+/* ============================================
+   NAVIGATION WRAPPER
+   ============================================ */
+.dna-navigation {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+/* ============================================
+   HEADER (Logo + Inter-app Nav + Avatar)
+   ============================================ */
+.dna-header {
+  background: rgba(23, 23, 23, 0.8);
+  border-bottom: 1px solid #1a1a1a;
+  padding: 0 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  backdrop-filter: blur(12px);
+  height: 44px;
+}
+
+.dna-logo-container {
+  height: 28px;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+.dna-logo-img {
+  height: 24px;
+  width: auto;
+}
+
+.dna-logo-text {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  color: #facc15;
+  text-transform: uppercase;
+  text-shadow: 0 0 20px rgba(250, 204, 21, 0.3);
+}
+
+/* Inter-app navigation links (centered) */
+.dna-nav-links {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.dna-nav-item {
+  padding: 0.25rem 0.75rem;
+  border-radius: 5px;
+  background: transparent;
+  border: 1px solid transparent;
+  color: #737373;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.dna-nav-item:hover {
+  color: #a3a3a3;
+  background: #1f1f1f;
+}
+
+.dna-nav-item.active {
+  color: #facc15;
+  background: rgba(250, 204, 21, 0.08);
+  border-color: rgba(250, 204, 21, 0.2);
+}
+
+.dna-header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.dna-login-btn {
+  padding: 0.375rem 0.875rem;
+  border-radius: 5px;
+  background: transparent;
+  border: 1px solid #262626;
+  color: #a3a3a3;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  text-decoration: none;
+}
+
+.dna-login-btn:hover {
+  color: #fafafa;
+  border-color: #404040;
+}
+
+.dna-notification-dot {
+  width: 6px;
+  height: 6px;
+  background: #facc15;
+  border-radius: 50%;
+  animation: dna-pulse 2s infinite;
+  box-shadow: 0 0 8px rgba(250, 204, 21, 0.6);
+}
+
+@keyframes dna-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.1);
+  }
+}
+
+/* ============================================
+   APP SUBNAV (App name + pages + pinned jobs)
+   ============================================ */
+.app-subnav {
+  background: rgba(14, 14, 14, 0.95);
+  border-bottom: 1px solid #1a1a1a;
+  padding: 0 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 36px;
+}
+
+.app-subnav-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.app-subnav-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #fafafa;
+  margin-right: 1rem;
+  padding-right: 1rem;
+  border-right: 1px solid #262626;
+}
+
+.app-subnav-links {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.app-subnav-item {
+  padding: 0.375rem 0.75rem;
+  color: #525252;
+  font-size: 11px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 0.15s ease;
+  border-radius: 5px;
+}
+
+.app-subnav-item:hover {
+  color: #a3a3a3;
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.app-subnav-item.active {
+  color: #fafafa;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+/* ============================================
+   PINNED JOBS (right side of app subnav)
+   ============================================ */
+.pinned-jobs {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  overflow: hidden;
+}
+
+.pinned-jobs-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: transform 0.3s ease;
+}
+
+.pinned-job {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid #1f1f1f;
+  border-radius: 6px;
+  transition: all 0.15s ease;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.pinned-job:hover {
+  border-color: #2a2a2a;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.pinned-progress-ring {
+  width: 24px;
+  height: 24px;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.pinned-progress-ring svg {
+  transform: rotate(-90deg);
+  width: 24px;
+  height: 24px;
+}
+
+.pinned-ring-bg {
+  fill: none;
+  stroke: #262626;
+  stroke-width: 2.5;
+}
+
+.pinned-ring-progress {
+  fill: none;
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  filter: drop-shadow(0 0 3px rgba(250, 204, 21, 0.4));
+  transition: stroke-dashoffset 0.3s ease;
+}
+
+.pinned-progress-value {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 7px;
+  font-weight: 600;
+  font-family: 'JetBrains Mono', monospace;
+  color: #fafafa;
+}
+
+.pinned-job-info {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.pinned-job-app {
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.pinned-job-name {
+  font-size: 11px;
+  font-weight: 500;
+  color: #a3a3a3;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pinned-unpin-btn {
+  background: none;
+  border: none;
+  color: #404040;
+  cursor: pointer;
+  padding: 2px;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+  margin-left: 0.25rem;
+}
+
+.pinned-unpin-btn:hover {
+  color: #f87171;
+  background: rgba(248, 113, 113, 0.1);
+}
+
+/* Carousel arrows */
+.pinned-nav-btn {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid #262626;
+  color: #525252;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+
+.pinned-nav-btn:hover {
+  color: #fafafa;
+  border-color: #404040;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+/* ============================================
+   AVATAR MENU
+   ============================================ */
+.dna-avatar-menu {
+  position: relative;
+}
+
+.dna-avatar-button {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #fde047 0%, #facc15 100%);
+  border: 2px solid #0a0a0a;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    0 0 0 1px #262626;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 10px;
+  color: #0a0a0a;
+  text-transform: uppercase;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.dna-avatar-button:hover {
+  transform: translateY(-1px);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.3),
+    0 0 0 1px rgba(250, 204, 21, 0.3),
+    0 0 12px rgba(250, 204, 21, 0.2);
+}
+
+/* Dropdown Menu */
+.dna-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  right: 0;
+  min-width: 180px;
+  background: linear-gradient(135deg, #171717 0%, #141414 100%);
+  border: 1px solid #262626;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-8px);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1000;
+  overflow: hidden;
+}
+
+.dna-dropdown-menu.active {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.dna-dropdown-header {
+  padding: 0.625rem 0.875rem;
+  border-bottom: 1px solid #1a1a1a;
+}
+
+.dna-dropdown-user-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: #fafafa;
+}
+
+.dna-dropdown-user-email {
+  font-size: 10px;
+  color: #737373;
+}
+
+.dna-dropdown-divider {
+  height: 1px;
+  background: #1a1a1a;
+}
+
+.dna-dropdown-item {
+  padding: 0.5rem 0.875rem;
+  color: #a3a3a3;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  display: block;
+  text-decoration: none;
+  background: none;
+  border: none;
+  width: 100%;
+  text-align: left;
+}
+
+.dna-dropdown-item:hover {
+  background: #1f1f1f;
+  color: #fafafa;
+}
+
+.dna-dropdown-item.danger {
+  color: #f87171;
+}
+
+.dna-dropdown-item.danger:hover {
+  background: rgba(248, 113, 113, 0.1);
+}

package/dist/types.d.ts

@@ -0,0 +1,60 @@
+export interface DNAUser {
+    id: string;
+    email: string;
+    name: string;
+    role?: 'superadmin' | 'admin' | 'editor' | 'viewer';
+    avatar?: string;
+}
+export interface DNANavItem {
+    name: string;
+    href: string;
+    requiredRole?: 'viewer' | 'editor' | 'admin' | 'superadmin';
+    hasNotification?: boolean;
+}
+export interface AppSubnavItem {
+    name: string;
+    href: string;
+    isActive?: boolean;
+}
+export interface PinnedJob {
+    id: string;
+    appName: string;
+    appColor?: string;
+    jobName: string;
+    progress: number;
+    meta?: string;
+}
+export interface DNAHeaderProps {
+    user: DNAUser | null;
+    currentApp?: string;
+    items?: DNANavItem[];
+    logoSrc?: string;
+    onLogout?: () => void;
+}
+export interface AppSubnavProps {
+    appName: string;
+    items: AppSubnavItem[];
+    pinnedJobs?: PinnedJob[];
+    onUnpinJob?: (jobId: string) => void;
+}
+export interface DNANavigationProps {
+    user: DNAUser | null;
+    currentApp?: string;
+    appName: string;
+    headerItems?: DNANavItem[];
+    subnavItems: AppSubnavItem[];
+    pinnedJobs?: PinnedJob[];
+    logoSrc?: string;
+    onLogout?: () => void;
+    onUnpinJob?: (jobId: string) => void;
+}
+export interface AvatarMenuProps {
+    userName: string;
+    userEmail: string;
+    initials: string;
+    onLogout?: () => void;
+}
+export interface PinnedJobsProps {
+    jobs: PinnedJob[];
+    onUnpin?: (jobId: string) => void;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@glamcor/dna-shared-nav",
+  "version": "1.0.0",
+  "description": "Shared navigation component for DNA microsites",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./dist/styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc && cp src/styles.css dist/styles.css",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/glamcor/dna-shared-nav.git"
+  },
+  "keywords": [
+    "dna",
+    "navigation",
+    "react",
+    "component"
+  ],
+  "author": "GlamCor",
+  "license": "UNLICENSED",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "typescript": "^5.0.0"
+  },
+  "publishConfig": {
+    "access": "restricted"
+  }
+}