Merge pull request #31 from ciphera-net/staging

chore: update CHANGELOG.md and DESIGN_SYSTEM.md

CHANGELOG.md

@@ -6,6 +6,21 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.7.0-alpha] - 2026-02-17
+
+### Changed
+
+- **ciphera-ui consolidation.** Migrated shared components and utilities to @ciphera-net/ui (v0.0.57): SwissFlagIcon, CodeBlock, Spinner, format utilities (formatNumber, formatDuration, formatDate, getDateRange, formatUpdatedAgo, formatRelativeTime), and auth error utilities (getAuthErrorMessage, authMessageFromStatus, authMessageFromErrorType). Removed 6 local duplicate files (LoadingOverlay, SwissFlagIcon, CodeBlock, authErrors.ts, format.ts).
+- **Form card border radius.** Login, signup, invite accept, verify, reset-password, forgot-password, and organization create cards now use rounded-2xl to match design system.
+- **Hardcoded brand colors.** Uptime page chart uses CSS variable var(--color-brand-orange) instead of #FD5E0F.
+- **Selection styling.** Removed redundant selection:bg-brand-orange/20 from page wrappers; relies on ciphera-ui base styles.
+- **Inline spinners.** Dashboard widgets (TopReferrers, Locations, TechSpecs, Campaigns, ContentStats), notifications page, and OrganizationSettings now use Spinner from ciphera-ui.
+- **Footer layout.** Authenticated footer container aligned to max-w-6xl (matches site dashboard and page-container-app).
+
+### Removed
+
+- **Dead components.** LoadingOverlay.tsx (unused; all usage already from ciphera-ui).
+
 ## [0.6.0-alpha] - 2026-02-13
 
 ### Added
@@ -67,7 +82,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ---
 
-[Unreleased]: https://github.com/ciphera-net/pulse/compare/v0.6.0-alpha...HEAD
+[Unreleased]: https://github.com/ciphera-net/pulse/compare/v0.7.0-alpha...HEAD
+[0.7.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.6.0-alpha...v0.7.0-alpha
 [0.6.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.5.1-alpha...v0.6.0-alpha
 [0.5.1-alpha]: https://github.com/ciphera-net/pulse/compare/v0.5.0-alpha...v0.5.1-alpha
 [0.5.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.4.0-alpha...v0.5.0-alpha

app/about/page.tsx

@@ -57,7 +57,7 @@ function ComparisonTable({ title, competitors }: { title: string, competitors: {
 
 export default function AboutPage() {
   return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
+    <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
         <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />

app/auth/callback/page.tsx

@@ -5,7 +5,7 @@ import { useRouter, useSearchParams } from 'next/navigation'
 import { useAuth } from '@/lib/auth/context'
 import { AUTH_URL, default as apiRequest } from '@/lib/api/client'
 import { exchangeAuthCode, setSessionAction } from '@/app/actions/auth'
-import { authMessageFromErrorType, type AuthErrorType } from '@/lib/utils/authErrors'
+import { authMessageFromErrorType, type AuthErrorType } from '@ciphera-net/ui'
 import { LoadingOverlay } from '@ciphera-net/ui'
 
 function AuthCallbackContent() {

app/features/page.tsx

@@ -106,7 +106,7 @@ const trustSignals = [
 
 export default function FeaturesPage() {
   return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
+    <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
         <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />

app/installation/page.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 
 export default function InstallationPage() {
   return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
+    <div className="relative min-h-screen flex flex-col overflow-hidden">
       
       {/* * --- 1. ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">

app/integrations/nextjs/page.tsx

@@ -5,7 +5,7 @@ import { ArrowLeftIcon } from '@ciphera-net/ui'
 
 export default function NextJsIntegrationPage() {
   return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
+    <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
         <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />

app/integrations/page.tsx

@@ -90,7 +90,7 @@ export default function IntegrationsPage() {
   }, [])
 
   return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
+    <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
         <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />

app/integrations/react/page.tsx

@@ -5,7 +5,7 @@ import { ArrowLeftIcon } from '@ciphera-net/ui'
 
 export default function ReactIntegrationPage() {
   return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
+    <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
         <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />

app/integrations/vue/page.tsx

@@ -5,7 +5,7 @@ import { ArrowLeftIcon } from '@ciphera-net/ui'
 
 export default function VueIntegrationPage() {
   return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
+    <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
         <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />

app/integrations/wordpress/page.tsx

@@ -5,7 +5,7 @@ import { ArrowLeftIcon } from '@ciphera-net/ui'
 
 export default function WordPressIntegrationPage() {
   return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
+    <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
         <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />

app/not-found.tsx

@@ -3,7 +3,7 @@ import { Button } from '@ciphera-net/ui'
 
 export default function NotFound() {
   return (
-    <div className="relative min-h-[80vh] flex flex-col items-center justify-center overflow-hidden selection:bg-brand-orange/20">
+    <div className="relative min-h-[80vh] flex flex-col items-center justify-center overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
         {/* * Center Orange Glow */}

app/notifications/page.tsx

@@ -13,9 +13,9 @@ import {
   markAllNotificationsRead,
   type Notification,
 } from '@/lib/api/notifications'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { formatTimeAgo, getTypeIcon } from '@/lib/utils/notifications'
-import { Button, ArrowLeftIcon } from '@ciphera-net/ui'
+import { Button, ArrowLeftIcon, Spinner } from '@ciphera-net/ui'
 import { toast } from '@ciphera-net/ui'
 
 const PAGE_SIZE = 50
@@ -129,7 +129,7 @@ export default function NotificationsPage() {
 
         {loading ? (
           <div className="flex justify-center py-12">
-            <div className="w-6 h-6 border-2 border-brand-orange/30 border-t-brand-orange rounded-full animate-spin" />
+            <Spinner />
           </div>
         ) : error ? (
           <div className="p-8 text-center text-red-500 bg-red-50 dark:bg-red-900/10 rounded-2xl border border-red-200 dark:border-red-800">

app/onboarding/page.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { createOrganization } from '@/lib/api/organization'
 import { useAuth } from '@/lib/auth/context'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { LoadingOverlay } from '@ciphera-net/ui'
 import { Button, Input } from '@ciphera-net/ui'
 

app/page.tsx

@@ -12,7 +12,7 @@ import SiteList from '@/components/sites/SiteList'
 import { Button } from '@ciphera-net/ui'
 import { BarChartIcon, LockIcon, ZapIcon, CheckCircleIcon, XIcon, GlobeIcon } from '@ciphera-net/ui'
 import { toast } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 
 function DashboardPreview() {
   return (
@@ -172,7 +172,7 @@ export default function HomePage() {
 
   if (!user) {
     return (
-      <div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
+      <div className="relative min-h-screen flex flex-col overflow-hidden">
         
         {/* * --- 1. ATMOSPHERE (Background) --- */}
         <div className="absolute inset-0 -z-10 pointer-events-none">

app/share/[id]/page.tsx

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useState } from 'react'
 import { useParams, useSearchParams, useRouter } from 'next/navigation'
 import { getPublicDashboard, getPublicStats, getPublicDailyStats, getPublicRealtime, getPublicPerformanceByPage, type DashboardData, type Stats, type DailyStat, type PerformanceByPageStat } from '@/lib/api/stats'
 import { toast } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { LoadingOverlay, Button } from '@ciphera-net/ui'
 import Chart from '@/components/dashboard/Chart'
 import TopPages from '@/components/dashboard/ContentStats'

app/sites/[id]/funnels/[funnelId]/page.tsx

@@ -16,7 +16,7 @@ import {
   ResponsiveContainer,
   Cell
 } from 'recharts'
-import { getDateRange } from '@/lib/utils/format'
+import { getDateRange } from '@ciphera-net/ui'
 
 const CHART_COLORS_LIGHT = {
   border: '#E5E5E5',

app/sites/[id]/page.tsx

@@ -6,9 +6,9 @@ import { useParams, useRouter } from 'next/navigation'
 import { motion } from 'framer-motion'
 import { getSite, type Site } from '@/lib/api/sites'
 import { getStats, getRealtime, getDailyStats, getTopPages, getTopReferrers, getCountries, getCities, getRegions, getBrowsers, getOS, getDevices, getScreenResolutions, getEntryPages, getExitPages, getDashboard, getCampaigns, getPerformanceByPage, type Stats, type DailyStat, type PerformanceByPageStat } from '@/lib/api/stats'
-import { formatNumber, formatDuration, getDateRange } from '@/lib/utils/format'
+import { formatNumber, formatDuration, getDateRange } from '@ciphera-net/ui'
 import { toast } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { LoadingOverlay, Button } from '@ciphera-net/ui'
 import { Select, DatePicker, DownloadIcon } from '@ciphera-net/ui'
 import ExportModal from '@/components/dashboard/ExportModal'

app/sites/[id]/realtime/page.tsx

@@ -5,7 +5,7 @@ import { useParams, useRouter } from 'next/navigation'
 import { getSite, type Site } from '@/lib/api/sites'
 import { getRealtimeVisitors, getSessionDetails, type Visitor, type SessionEvent } from '@/lib/api/realtime'
 import { toast } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { LoadingOverlay, UserIcon } from '@ciphera-net/ui'
 import { motion, AnimatePresence } from 'framer-motion'
 

app/sites/[id]/settings/page.tsx

@@ -5,7 +5,7 @@ import { useParams, useRouter } from 'next/navigation'
 import { getSite, updateSite, resetSiteData, deleteSite, type Site, type GeoDataLevel } from '@/lib/api/sites'
 import { listGoals, createGoal, updateGoal, deleteGoal, type Goal } from '@/lib/api/goals'
 import { toast } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { LoadingOverlay } from '@ciphera-net/ui'
 import VerificationModal from '@/components/sites/VerificationModal'
 import ScriptSetupBlock from '@/components/sites/ScriptSetupBlock'

app/sites/[id]/uptime/page.tsx

@@ -19,7 +19,7 @@ import {
 } from '@/lib/api/uptime'
 import { toast } from '@ciphera-net/ui'
 import { useTheme } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { LoadingOverlay, Button, Modal } from '@ciphera-net/ui'
 import {
   AreaChart,
@@ -313,7 +313,7 @@ function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
         }}
       >
         <div className="font-medium mb-0.5">{label}</div>
-        <div style={{ color: '#FD5E0F' }} className="font-semibold">
+        <div style={{ color: 'var(--color-brand-orange)' }} className="font-semibold">
           {payload[0].value}ms
         </div>
       </div>
@@ -330,8 +330,8 @@ function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
           <AreaChart data={data} margin={{ top: 5, right: 5, left: -20, bottom: 0 }}>
             <defs>
               <linearGradient id="responseTimeGradient" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="0%" stopColor="#FD5E0F" stopOpacity={0.3} />
+                <stop offset="0%" stopColor="var(--color-brand-orange)" stopOpacity={0.3} />
-                <stop offset="100%" stopColor="#FD5E0F" stopOpacity={0.02} />
+                <stop offset="100%" stopColor="var(--color-brand-orange)" stopOpacity={0.02} />
               </linearGradient>
             </defs>
             <CartesianGrid
@@ -357,11 +357,11 @@ function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
             <Area
               type="monotone"
               dataKey="ms"
-              stroke="#FD5E0F"
+              stroke="var(--color-brand-orange)"
               strokeWidth={2}
               fill="url(#responseTimeGradient)"
               dot={false}
-              activeDot={{ r: 4, fill: '#FD5E0F', strokeWidth: 0 }}
+              activeDot={{ r: 4, fill: 'var(--color-brand-orange)', strokeWidth: 0 }}
             />
           </AreaChart>
         </ResponsiveContainer>

app/sites/new/page.tsx

@@ -7,7 +7,7 @@ import { createSite, listSites, getSite, type Site } from '@/lib/api/sites'
 import { getSubscription } from '@/lib/api/billing'
 import { trackSiteCreatedFromDashboard, trackSiteCreatedScriptCopied } from '@/lib/welcomeAnalytics'
 import { toast } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { Button, Input } from '@ciphera-net/ui'
 import { CheckCircleIcon } from '@ciphera-net/ui'
 import ScriptSetupBlock from '@/components/sites/ScriptSetupBlock'

app/welcome/page.tsx

@@ -21,7 +21,7 @@ import { createSite, type Site } from '@/lib/api/sites'
 import { setSessionAction } from '@/app/actions/auth'
 import { useAuth } from '@/lib/auth/context'
 import apiRequest from '@/lib/api/client'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import {
   trackWelcomeStepView,
   trackWelcomeWorkspaceSelected,

components/CodeBlock.tsx

@@ -1,28 +0,0 @@
-/**
- * @file Reusable code block component for integration guide pages.
- *
- * Renders a VS-Code-style code block with a filename tab header.
- */
-
-interface CodeBlockProps {
-  /** Filename displayed in the tab header */
-  filename: string
-  /** The code string to render inside the block */
-  children: string
-}
-
-/**
- * Renders a dark-themed code snippet with a filename tab.
- */
-export function CodeBlock({ filename, children }: CodeBlockProps) {
-  return (
-    <div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
-      <div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
-        <span className="text-xs text-neutral-400 font-mono">{filename}</span>
-      </div>
-      <div className="p-4 overflow-x-auto">
-        <pre className="text-sm font-mono text-neutral-300">{children}</pre>
-      </div>
-    </div>
-  )
-}

components/Footer.tsx

@@ -2,8 +2,7 @@
 
 import Link from 'next/link'
 import Image from 'next/image'
-import { GithubIcon, TwitterIcon } from '@ciphera-net/ui'
+import { GithubIcon, TwitterIcon, SwissFlagIcon } from '@ciphera-net/ui'
-import SwissFlagIcon from './SwissFlagIcon'
 
 interface FooterProps {
   LinkComponent?: any
@@ -47,7 +46,7 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
   if (isAuthenticated) {
     return (
       <footer className="w-full py-8 mt-auto border-t border-neutral-100 dark:border-neutral-800 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex flex-col md:flex-row justify-between items-center gap-4">
             <div className="text-sm text-neutral-500 dark:text-neutral-400">
               © 2024-{year} Ciphera. All rights reserved.

components/IntegrationGuide.tsx

@@ -36,7 +36,7 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
     .slice(0, 4)
 
   return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
+    <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
         <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />

components/LoadingOverlay.tsx

@@ -1,42 +0,0 @@
-'use client'
-
-import React, { useEffect, useState } from 'react'
-import { createPortal } from 'react-dom'
-
-interface LoadingOverlayProps {
-  logoSrc?: string
-  title?: string
-}
-
-export default function LoadingOverlay({ 
-  logoSrc = "/ciphera_icon_no_margins.png", 
-  title = "Pulse" 
-}: LoadingOverlayProps) {
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    setMounted(true)
-    return () => setMounted(false)
-  }, [])
-
-  if (!mounted) return null
-
-  return createPortal(
-    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-white dark:bg-neutral-950 animate-in fade-in duration-200">
-      <div className="flex flex-col items-center gap-6">
-        <div className="flex items-center gap-3">
-          <img 
-            src={logoSrc} 
-            alt={typeof title === 'string' ? title : "Pulse"} 
-            className="h-12 w-auto object-contain"
-          />
-          <span className="text-3xl tracking-tight text-neutral-900 dark:text-white">
-            <span className="font-bold">Ciphera</span><span className="font-light">Pulse</span>
-          </span>
-        </div>
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-200 border-t-brand-orange dark:border-neutral-800 dark:border-t-brand-orange" />
-      </div>
-    </div>,
-    document.body
-  )
-}

components/SwissFlagIcon.tsx

@@ -1,24 +0,0 @@
-'use client'
-
-import type { SVGProps } from 'react'
-
-// * Swiss flag icon – official proportions (cross 1/6 height). Uses real Swiss federal red.
-const SWISS_RED = '#E41E26' // * Official Swiss flag red (federal identity)
-
-export default function SwissFlagIcon(props: SVGProps<SVGSVGElement>) {
-  const { className, ...rest } = props
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      aria-hidden
-      className={`shrink-0 ${className ?? ''}`.trim()}
-      {...rest}
-    >
-      <rect width="24" height="24" rx="3" fill={SWISS_RED} />
-      <rect x="10" y="0" width="4" height="24" fill="#FFF" />
-      <rect x="0" y="10" width="24" height="4" fill="#FFF" />
-    </svg>
-  )
-}

components/dashboard/Campaigns.tsx

@@ -2,8 +2,8 @@
 
 import { useState, useEffect, useMemo } from 'react'
 import Link from 'next/link'
-import { formatNumber } from '@/lib/utils/format'
+import { formatNumber } from '@ciphera-net/ui'
-import { Modal, ArrowRightIcon, Button } from '@ciphera-net/ui'
+import { Modal, ArrowRightIcon, Button, Spinner } from '@ciphera-net/ui'
 import { ChevronDownIcon, DownloadIcon } from '@ciphera-net/ui'
 import { getCampaigns, CampaignStat } from '@/lib/api/stats'
 import { getReferrerFavicon, getReferrerIcon, getReferrerDisplayName } from '@/lib/utils/icons'
@@ -293,7 +293,7 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
         <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
           {isLoadingFull ? (
             <div className="py-8 flex flex-col items-center gap-2">
-              <div className="animate-spin w-6 h-6 border-2 border-neutral-300 dark:border-neutral-700 border-t-brand-orange rounded-full" />
+              <Spinner />
               <p className="text-sm text-neutral-500 dark:text-neutral-400">Loading...</p>
             </div>
           ) : (

components/dashboard/Chart.tsx

@@ -13,7 +13,7 @@ import {
   ReferenceLine,
 } from 'recharts'
 import type { TooltipProps } from 'recharts'
-import { formatNumber, formatDuration, formatUpdatedAgo } from '@/lib/utils/format'
+import { formatNumber, formatDuration, formatUpdatedAgo } from '@ciphera-net/ui'
 import { ArrowUpRightIcon, ArrowDownRightIcon, BarChartIcon, Select, Button, DownloadIcon } from '@ciphera-net/ui'
 import { Checkbox } from '@ciphera-net/ui'
 

components/dashboard/ContentStats.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { formatNumber } from '@/lib/utils/format'
+import { formatNumber } from '@ciphera-net/ui'
 import { TopPage, getTopPages, getEntryPages, getExitPages } from '@/lib/api/stats'
-import { Modal, ArrowUpRightIcon, LayoutDashboardIcon } from '@ciphera-net/ui'
+import { Modal, ArrowUpRightIcon, LayoutDashboardIcon, Spinner } from '@ciphera-net/ui'
 
 interface ContentStatsProps {
   topPages: TopPage[]
@@ -174,7 +174,7 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
         <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
           {isLoadingFull ? (
             <div className="py-8 flex flex-col items-center gap-2">
-              <div className="animate-spin w-6 h-6 border-2 border-neutral-300 dark:border-neutral-700 border-t-brand-orange rounded-full" />
+              <Spinner />
               <p className="text-sm text-neutral-500 dark:text-neutral-400">Loading...</p>
             </div>
           ) : (

components/dashboard/Countries.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { formatNumber } from '@/lib/utils/format'
+import { formatNumber } from '@ciphera-net/ui'
 import * as Flags from 'country-flag-icons/react/3x2'
 import WorldMap from './WorldMap'
 import { GlobeIcon } from '@ciphera-net/ui'

components/dashboard/ExportModal.tsx

@@ -6,7 +6,7 @@ import * as XLSX from 'xlsx'
 import jsPDF from 'jspdf'
 import autoTable from 'jspdf-autotable'
 import type { DailyStat } from './Chart'
-import { formatNumber, formatDuration } from '@/lib/utils/format'
+import { formatNumber, formatDuration } from '@ciphera-net/ui'
 import { getReferrerDisplayName, mergeReferrersByDisplayName } from '@/lib/utils/icons'
 import type { TopPage, TopReferrer, CampaignStat } from '@/lib/api/stats'
 

components/dashboard/GoalStats.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import Link from 'next/link'
-import { formatNumber } from '@/lib/utils/format'
+import { formatNumber } from '@ciphera-net/ui'
 import { BookOpenIcon, ArrowRightIcon } from '@ciphera-net/ui'
 import type { GoalCountStat } from '@/lib/api/stats'
 

components/dashboard/Locations.tsx

@@ -1,12 +1,12 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { formatNumber } from '@/lib/utils/format'
+import { formatNumber } from '@ciphera-net/ui'
 import * as Flags from 'country-flag-icons/react/3x2'
 // @ts-ignore
 import iso3166 from 'iso-3166-2'
 import WorldMap from './WorldMap'
-import { Modal, GlobeIcon } from '@ciphera-net/ui'
+import { Modal, GlobeIcon, Spinner } from '@ciphera-net/ui'
 import { SiTorproject } from 'react-icons/si'
 import { FaUserSecret, FaSatellite } from 'react-icons/fa'
 import { getCountries, getCities, getRegions } from '@/lib/api/stats'
@@ -289,7 +289,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
         <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
           {isLoadingFull ? (
             <div className="py-8 flex flex-col items-center gap-2">
-              <div className="animate-spin w-6 h-6 border-2 border-neutral-300 dark:border-neutral-700 border-t-brand-orange rounded-full" />
+              <Spinner />
               <p className="text-sm text-neutral-500 dark:text-neutral-400">Loading...</p>
             </div>
           ) : (

components/dashboard/TechSpecs.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { formatNumber } from '@/lib/utils/format'
+import { formatNumber } from '@ciphera-net/ui'
 import { getBrowserIcon, getOSIcon, getDeviceIcon } from '@/lib/utils/icons'
 import { MdMonitor } from 'react-icons/md'
-import { Modal, GridIcon } from '@ciphera-net/ui'
+import { Modal, GridIcon, Spinner } from '@ciphera-net/ui'
 import { getBrowsers, getOS, getDevices, getScreenResolutions } from '@/lib/api/stats'
 
 interface TechSpecsProps {
@@ -190,7 +190,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
         <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
           {isLoadingFull ? (
             <div className="py-8 flex flex-col items-center gap-2">
-              <div className="animate-spin w-6 h-6 border-2 border-neutral-300 dark:border-neutral-700 border-t-brand-orange rounded-full" />
+              <Spinner />
               <p className="text-sm text-neutral-500 dark:text-neutral-400">Loading...</p>
             </div>
           ) : (

components/dashboard/TopPages.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { formatNumber } from '@/lib/utils/format'
+import { formatNumber } from '@ciphera-net/ui'
 import { LayoutDashboardIcon } from '@ciphera-net/ui'
 
 interface TopPagesProps {

components/dashboard/TopReferrers.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { formatNumber } from '@/lib/utils/format'
+import { formatNumber } from '@ciphera-net/ui'
 import { getReferrerDisplayName, getReferrerFavicon, getReferrerIcon, mergeReferrersByDisplayName } from '@/lib/utils/icons'
-import { Modal, GlobeIcon } from '@ciphera-net/ui'
+import { Modal, GlobeIcon, Spinner } from '@ciphera-net/ui'
 import { getTopReferrers, TopReferrer } from '@/lib/api/stats'
 
 interface TopReferrersProps {
@@ -135,7 +135,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
         <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
           {isLoadingFull ? (
             <div className="py-8 flex flex-col items-center gap-2">
-              <div className="animate-spin w-6 h-6 border-2 border-neutral-300 dark:border-neutral-700 border-t-brand-orange rounded-full" />
+              <Spinner />
               <p className="text-sm text-neutral-500 dark:text-neutral-400">Loading...</p>
             </div>
           ) : (

components/notifications/NotificationCenter.tsx

@@ -7,7 +7,7 @@
 import { useEffect, useState, useRef } from 'react'
 import Link from 'next/link'
 import { listNotifications, markNotificationRead, markAllNotificationsRead, type Notification } from '@/lib/api/notifications'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { formatTimeAgo, getTypeIcon } from '@/lib/utils/notifications'
 import { SettingsIcon } from '@ciphera-net/ui'
 

components/settings/OrganizationSettings.tsx

@@ -21,7 +21,7 @@ import { TRAFFIC_TIERS, PLAN_ID_SOLO, getTierIndexForLimit, getLimitForTierIndex
 import { getAuditLog, AuditLogEntry, GetAuditLogParams } from '@/lib/api/audit'
 import { getNotificationSettings, updateNotificationSettings } from '@/lib/api/notification-settings'
 import { toast } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { motion, AnimatePresence } from 'framer-motion'
 import {
   AlertTriangleIcon,
@@ -35,6 +35,7 @@ import {
   DownloadIcon,
   ExternalLinkIcon,
   LayoutDashboardIcon,
+  Spinner,
 } from '@ciphera-net/ui'
 
 // * Bell icon for notifications tab
@@ -699,7 +700,7 @@ export default function OrganizationSettings() {
                   <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
                     {isLoadingMembers ? (
                       <div className="flex items-center justify-center py-8">
-                        <div className="w-6 h-6 border-2 border-brand-orange/30 border-t-brand-orange rounded-full animate-spin" />
+                        <Spinner />
                       </div>
                     ) : members.length === 0 ? (
                       <div className="p-8 text-center text-neutral-500">No members found.</div>
@@ -780,7 +781,7 @@ export default function OrganizationSettings() {
 
                 {isLoadingSubscription ? (
                   <div className="flex items-center justify-center py-12">
-                    <div className="w-6 h-6 border-2 border-brand-orange/30 border-t-brand-orange rounded-full animate-spin" />
+                    <Spinner />
                   </div>
                 ) : !subscription ? (
                   <div className="p-8 text-center bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-200 dark:border-neutral-800">
@@ -926,7 +927,7 @@ export default function OrganizationSettings() {
                       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
                         {isLoadingInvoices ? (
                           <div className="flex items-center justify-center py-8">
-                            <div className="w-6 h-6 border-2 border-brand-orange/30 border-t-brand-orange rounded-full animate-spin" />
+                            <Spinner />
                           </div>
                         ) : invoices.length === 0 ? (
                           <div className="p-8 text-center text-neutral-500">No invoices found.</div>
@@ -990,7 +991,7 @@ export default function OrganizationSettings() {
 
                 {isLoadingNotificationSettings ? (
                   <div className="flex items-center justify-center py-12">
-                    <div className="w-6 h-6 border-2 border-brand-orange/30 border-t-brand-orange rounded-full animate-spin" />
+                    <Spinner />
                   </div>
                 ) : (
                   <div className="space-y-4">
@@ -1117,7 +1118,7 @@ export default function OrganizationSettings() {
                 <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden">
                   {isLoadingAudit ? (
                     <div className="flex items-center justify-center py-12">
-                      <div className="w-6 h-6 border-2 border-brand-orange/30 border-t-brand-orange rounded-full animate-spin" />
+                      <Spinner />
                     </div>
                   ) : (auditEntries ?? []).length === 0 ? (
                     <div className="p-8 text-center text-neutral-500">No audit events found.</div>

docs/DESIGN_SYSTEM.md

@@ -21,10 +21,15 @@ This document defines the visual language and design patterns for Pulse Analytic
 --brand-orange: #FD5E0F;
 --brand-orange-hover: #E54E00; /* Darker for hover states */
 
+/* Injected by @ciphera-net/ui preset — use in SVG, Recharts, rgba() */
+--color-brand-orange: #FD5E0F;
+--color-brand-orange-rgb: 253, 94, 15; /* Used by .glow-orange utility; also for custom rgba(var(--color-brand-orange-rgb), 0.5) */
+
 /* Usage */
 - Primary CTAs, links, focus rings
 - Accent elements, badges
 - Never use for large backgrounds (too vibrant)
+- var(--color-brand-orange) for SVG/Recharts where Tailwind classes don't apply
 ```
 
 ### Neutral Scale
@@ -285,7 +290,7 @@ Glass card effect with backdrop blur (premium feel):
 Orange gradient for emphasized text:
 ```css
 .gradient-text {
-  @apply bg-gradient-to-r from-brand-orange to-[#E54E00] bg-clip-text text-transparent;
+  @apply bg-gradient-to-r from-brand-orange to-brand-orange-hover bg-clip-text text-transparent;
 }
 ```
 

lib/api/client.ts

@@ -2,7 +2,7 @@
  * HTTP client wrapper for API calls
  */
 
-import { authMessageFromStatus, AUTH_ERROR_MESSAGES } from '@/lib/utils/authErrors'
+import { authMessageFromStatus, AUTH_ERROR_MESSAGES } from '@ciphera-net/ui'
 
 /** Request timeout in ms; network errors surface as user-facing "Network error, please try again." */
 const FETCH_TIMEOUT_MS = 30_000

lib/integration-guides.tsx

@@ -8,7 +8,7 @@
  */
 
 import { type ReactNode } from 'react'
-import { CodeBlock } from '@/components/CodeBlock'
+import { CodeBlock } from '@ciphera-net/ui'
 
 // * ─── Guide registry ─────────────────────────────────────────────────────────
 

lib/utils/authErrors.ts

@@ -1,63 +0,0 @@
-/**
- * Auth error message mapping for user-facing copy.
- * Maps status codes and error types to safe, actionable messages (no sensitive details).
- */
-
-export const AUTH_ERROR_MESSAGES = {
-  /** Shown when session/token is expired; prompts re-login. */
-  SESSION_EXPIRED: 'Session expired, please sign in again.',
-  /** Shown when credentials are invalid (e.g. wrong password, invalid token). */
-  INVALID_CREDENTIALS: 'Invalid credentials',
-  /** Shown on network failure or timeout; prompts retry. */
-  NETWORK: 'Network error, please try again.',
-  /** Generic fallback for server/unknown errors. */
-  GENERIC: 'Something went wrong, please try again.',
-} as const
-
-/**
- * Returns the user-facing message for a given HTTP status from an API/auth response.
- * Used when building ApiError messages and when mapping server-returned error types.
- */
-export function authMessageFromStatus(status: number): string {
-  if (status === 401) return AUTH_ERROR_MESSAGES.SESSION_EXPIRED
-  if (status === 403) return AUTH_ERROR_MESSAGES.INVALID_CREDENTIALS
-  if (status >= 500) return AUTH_ERROR_MESSAGES.GENERIC
-  return AUTH_ERROR_MESSAGES.GENERIC
-}
-
-/** Error type returned by auth server actions for mapping to user-facing copy. */
-export type AuthErrorType = 'network' | 'expired' | 'invalid' | 'server'
-
-/**
- * Maps server-action error type (e.g. from exchangeAuthCode) to user-facing message.
- * Used in auth callback so no sensitive details are shown.
- */
-export function authMessageFromErrorType(type: AuthErrorType): string {
-  switch (type) {
-    case 'expired':
-      return AUTH_ERROR_MESSAGES.SESSION_EXPIRED
-    case 'invalid':
-      return AUTH_ERROR_MESSAGES.INVALID_CREDENTIALS
-    case 'network':
-      return AUTH_ERROR_MESSAGES.NETWORK
-    case 'server':
-    default:
-      return AUTH_ERROR_MESSAGES.GENERIC
-  }
-}
-
-/**
- * Maps an error (e.g. ApiError, network/abort) to a safe user-facing message.
- * Use this when displaying API/auth errors in the UI so expired, invalid, and network
- * cases show the correct copy without exposing sensitive details.
- */
-export function getAuthErrorMessage(error: unknown): string {
-  if (!error) return AUTH_ERROR_MESSAGES.GENERIC
-  const err = error as { status?: number; name?: string; message?: string }
-  if (typeof err.status === 'number') return authMessageFromStatus(err.status)
-  if (err.name === 'AbortError') return AUTH_ERROR_MESSAGES.NETWORK
-  if (err instanceof Error && (err.name === 'TypeError' || /fetch|network|failed to fetch/i.test(err.message || ''))) {
-    return AUTH_ERROR_MESSAGES.NETWORK
-  }
-  return AUTH_ERROR_MESSAGES.GENERIC
-}

lib/utils/format.ts

@@ -1,70 +0,0 @@
-/**
- * Format numbers with commas
- */
-export function formatNumber(num: number): string {
-  return new Intl.NumberFormat('en-US').format(num)
-}
-
-/**
- * Format date to YYYY-MM-DD
- */
-export function formatDate(date: Date): string {
-  return date.toISOString().split('T')[0]
-}
-
-/**
- * Get date range for last N days
- */
-export function getDateRange(days: number): { start: string; end: string } {
-  const end = new Date()
-  const start = new Date()
-  start.setDate(start.getDate() - days)
-  return {
-    start: formatDate(start),
-    end: formatDate(end),
-  }
-}
-
-/**
- * Format "updated X ago" for polling indicators (e.g. "Just now", "12 seconds ago")
- */
-export function formatUpdatedAgo(timestamp: number): string {
-  const diff = Math.floor((Date.now() - timestamp) / 1000)
-  if (diff < 5) return 'Just now'
-  if (diff < 60) return `${diff} seconds ago`
-  if (diff < 120) return '1 minute ago'
-  const minutes = Math.floor(diff / 60)
-  return `${minutes} minutes ago`
-}
-
-/**
- * Format relative time (e.g., "2 hours ago")
- */
-export function formatRelativeTime(date: string | Date): string {
-  const d = typeof date === 'string' ? new Date(date) : date
-  const now = new Date()
-  const diff = now.getTime() - d.getTime()
-  const seconds = Math.floor(diff / 1000)
-  const minutes = Math.floor(seconds / 60)
-  const hours = Math.floor(minutes / 60)
-  const days = Math.floor(hours / 24)
-
-  if (days > 0) return `${days} day${days > 1 ? 's' : ''} ago`
-  if (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''} ago`
-  if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`
-  return 'Just now'
-}
-/**
- * Format duration in seconds to "1m 30s" or "30s"
- */
-export function formatDuration(seconds: number): string {
-  if (!seconds) return '0s'
-  
-  const m = Math.floor(seconds / 60)
-  const s = Math.floor(seconds % 60)
-  
-  if (m > 0) {
-    return `${m}m ${s}s`
-  }
-  return `${s}s`
-}

next.config.ts

@@ -21,6 +21,18 @@ const nextConfig: NextConfig = {
       },
     ]
   },
+  async rewrites() {
+    return [
+      {
+        source: '/docs',
+        destination: 'https://ciphera-e9ed055e.mintlify.dev/docs',
+      },
+      {
+        source: '/docs/:path*',
+        destination: 'https://ciphera-e9ed055e.mintlify.dev/docs/:path*',
+      },
+    ]
+  },
 }
 
 export default withPWA(nextConfig)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-frontend",
-  "version": "0.6.0-alpha",
+  "version": "0.7.0-alpha",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.0.50",
+    "@ciphera-net/ui": "^0.0.57",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@radix-ui/react-icons": "^1.3.0",
     "axios": "^1.13.2",

styles/globals.css

@@ -19,43 +19,8 @@
   }
 }
 
-@layer components {
-  /* * TODO: Move these shared utilities to @ciphera-net/ui to avoid duplication with website */
-  
-  /* * Glass Card Effect - Crucial for the "Premium" feel */
-  .card-glass {
-    @apply bg-white/80 dark:bg-neutral-900/80;
-    @apply backdrop-blur-xl;
-    @apply border border-neutral-200/50 dark:border-neutral-800/50;
-    @apply rounded-2xl;
-    @apply transition-all duration-300 ease-out;
-  }
-
-  /* * Gradient Text for Headlines */
-  .gradient-text {
-    @apply bg-gradient-to-r from-brand-orange to-[#E54E00] bg-clip-text text-transparent;
-  }
-
-  /* * The "Pulse" Badge */
-  .badge-primary {
-    @apply inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wider;
-    @apply bg-brand-orange/10 text-brand-orange border border-brand-orange/20;
-  }
-}
-
 @layer utilities {
-  /* * The Background Grid */
+  /* * 3D Transform Utilities - Pulse-specific */
-  .bg-grid-pattern {
-    background-image: radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0);
-    background-size: 32px 32px;
-  }
-
-  /* * Glow Effects */
-  .glow-orange {
-    box-shadow: 0 0 40px -10px rgba(253, 94, 15, 0.5);
-  }
-
-  /* * 3D Transform Utilities */
   .perspective-1000 {
     perspective: 1000px;
   }