@fayz-ai/saas 0.1.6

package/src/shell/components/layout/PrintChrome.tsx

@@ -0,0 +1,200 @@
+import * as React from 'react'
+import { useEffect } from 'react'
+import { useOrganizationStore } from '../../stores/organization.store'
+
+// ---------------------------------------------------------------------------
+// Runtime-injected print styles — bypasses Tailwind/PostCSS processing.
+// Uses #id selectors for maximum specificity over Tailwind utilities.
+// ---------------------------------------------------------------------------
+
+const PRINT_STYLE_ID = 'saas-print-styles'
+
+const PRINT_CSS = /* css */ `
+@media print {
+  /* ── Hide chrome ── */
+  [data-print="hide"],
+  .no-print {
+    display: none !important;
+    visibility: hidden !important;
+    width: 0 !important;
+    height: 0 !important;
+    overflow: hidden !important;
+  }
+
+  /* ── Show print-only elements ── */
+  .print-only {
+    display: flex !important;
+    visibility: visible !important;
+  }
+
+  /* ── Page setup ── */
+  @page { margin: 1cm 1cm 1.5cm 1cm; }
+
+  html, body {
+    height: auto !important;
+    overflow: visible !important;
+    background: #fff !important;
+    color: #000 !important;
+  }
+
+  /* ── Layout reset: keep flex but remove height/overflow constraints ── */
+  #saas-shell,
+  .print-root {
+    height: auto !important;
+    overflow: visible !important;
+    background: #fff !important;
+  }
+
+  #saas-shell *,
+  .print-root * {
+    overflow: visible !important;
+    max-height: none !important;
+  }
+
+  #saas-content-wrap,
+  #saas-content-inner,
+  #saas-main {
+    height: auto !important;
+    flex-shrink: 0 !important;
+    overflow: visible !important;
+    border-radius: 0 !important;
+  }
+
+  #saas-main {
+    padding: 0 !important;
+  }
+
+  /* ── Print header ── */
+  .print-header {
+    display: flex !important;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0 8px 0;
+    margin-bottom: 12px;
+    border-bottom: 1px solid #ccc;
+    font-size: 10px;
+    color: #666;
+  }
+  .print-header-logo {
+    font-size: 14px;
+    font-weight: 700;
+    color: #000;
+  }
+  .print-header-sub {
+    font-size: 10px;
+    color: #999;
+  }
+
+  /* ── Print footer (fixed to bottom of each page) ── */
+  .print-footer {
+    display: flex !important;
+    position: fixed !important;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 0 0 0;
+    border-top: 1px solid #ccc;
+    font-size: 8px;
+    color: #999;
+    bottom: 0;
+    left: 1cm;
+    right: 1cm;
+  }
+
+  /* ── Cards: don't break across pages ── */
+  .rounded-xl, .rounded-lg, [class*="border bg-card"] {
+    break-inside: avoid;
+  }
+  table { break-inside: auto; }
+  tr { break-inside: avoid; }
+
+  /* ── Kill animations — they start at opacity:0 and never run in print ── */
+  .saas-nav-forward,
+  .saas-nav-back,
+  .saas-page-enter,
+  .animate-in,
+  .animate-out,
+  [class*="saas-nav-"],
+  [class*="saas-page-"] {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+
+  /* ── Force visible text + backgrounds in print ── */
+  :root, html, body, .dark {
+    color-scheme: light !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+
+  /* Nuclear: force ALL text to be dark, all backgrounds white */
+  #saas-shell *, .print-root *, #saas-main * {
+    color: #1a1a1a !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+
+  /* Keep colored badges/pills visible */
+  [class*="bg-emerald"], [class*="bg-blue"], [class*="bg-red"],
+  [class*="bg-amber"], [class*="bg-violet"], [class*="bg-yellow"],
+  [class*="bg-primary"] {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+    color: inherit !important;
+  }
+
+  /* Muted text slightly lighter */
+  .text-muted-foreground { color: #666 !important; }
+  [class*="text-muted"] { color: #666 !important; }
+  [class*="text-xs"][class*="text-muted"] { color: #888 !important; }
+
+  /* Backgrounds */
+  .bg-card, .bg-content, .bg-background, .bg-muted { background: #fff !important; }
+  .bg-card { border: 1px solid #ddd !important; }
+}
+`
+
+function injectPrintStyles() {
+  if (typeof document === 'undefined') return
+  if (document.getElementById(PRINT_STYLE_ID)) return
+  const style = document.createElement('style')
+  style.id = PRINT_STYLE_ID
+  style.textContent = PRINT_CSS
+  document.head.appendChild(style)
+}
+
+/**
+ * Print header — hidden on screen, visible only in print.
+ */
+export function PrintHeader() {
+  const orgName = useOrganizationStore((s) => s.currentOrg?.name) ?? ''
+  const orgDesc = useOrganizationStore((s) => (s.currentOrg as any)?.description) ?? ''
+
+  useEffect(() => { injectPrintStyles() }, [])
+
+  return (
+    <div className="print-only print-header hidden">
+      <div>
+        <span className="print-header-logo">{orgName}</span>
+        {orgDesc && <span className="print-header-sub"> — {orgDesc}</span>}
+      </div>
+      <span>{new Date().toLocaleDateString(undefined, { day: '2-digit', month: 'long', year: 'numeric' })}</span>
+    </div>
+  )
+}
+
+/**
+ * Print footer — hidden on screen, fixed to bottom of each printed page.
+ */
+export function PrintFooter() {
+  const orgName = useOrganizationStore((s) => s.currentOrg?.name) ?? ''
+  const now = new Date()
+  const dateTime = `${now.toLocaleDateString()} ${now.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })}`
+
+  return (
+    <div className="print-only print-footer hidden">
+      <span>{orgName}</span>
+      <span>{dateTime}</span>
+    </div>
+  )
+}

package/src/shell/components/layout/index.ts

@@ -0,0 +1,5 @@
+export { BottomNav } from './BottomNav'
+export { CommandPalette } from './CommandPalette'
+export { LocationSwitchOverlay } from './LocationSwitchOverlay'
+export { MockModeBanner } from './MockModeBanner'
+export { PrintHeader, PrintFooter } from './PrintChrome'

package/src/shell/components/notifications/ChangelogFeed.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react'
+import { Sparkles, Wrench, Bug } from 'lucide-react'
+import { cn } from '../../lib/cn'
+import type { ChangelogEntry } from '../../types/notifications'
+
+interface ChangelogFeedProps {
+  changelogUrl?: string
+  className?: string
+}
+
+const TYPE_ICONS: Record<string, React.ElementType> = {
+  feature: Sparkles,
+  improvement: Wrench,
+  fix: Bug,
+}
+
+const TYPE_COLORS: Record<string, string> = {
+  feature: 'text-primary',
+  improvement: 'text-info',
+  fix: 'text-success',
+}
+
+export function ChangelogFeed({ changelogUrl, className }: ChangelogFeedProps) {
+  const [entries, setEntries] = React.useState<ChangelogEntry[]>([])
+  const [loading, setLoading] = React.useState(false)
+
+  React.useEffect(() => {
+    if (!changelogUrl) return
+
+    setLoading(true)
+    fetch(changelogUrl)
+      .then((r) => r.json())
+      .then((data: ChangelogEntry[]) => setEntries(data))
+      .catch(() => setEntries([]))
+      .finally(() => setLoading(false))
+  }, [changelogUrl])
+
+  if (loading) {
+    return (
+      <div className={cn('flex items-center justify-center py-12', className)}>
+        <p className="text-sm text-muted-foreground">Loading...</p>
+      </div>
+    )
+  }
+
+  if (!changelogUrl || entries.length === 0) {
+    return (
+      <div className={cn('flex flex-col items-center justify-center py-12 text-center', className)}>
+        <Sparkles className="h-8 w-8 text-muted-foreground/50 mb-2" />
+        <p className="text-sm text-muted-foreground">No updates yet</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('max-h-96 overflow-y-auto', className)}>
+      {entries.map((entry) => {
+        const Icon = TYPE_ICONS[entry.type] ?? Sparkles
+        const colorClass = TYPE_COLORS[entry.type] ?? TYPE_COLORS.feature
+
+        return (
+          <div key={entry.id} className="border-b px-4 py-3 last:border-0">
+            <div className="flex items-start gap-3">
+              <div className={cn('mt-0.5 shrink-0', colorClass)}>
+                <Icon className="h-4 w-4" />
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <p className="text-sm font-medium">{entry.title}</p>
+                  {entry.version && (
+                    <span className="rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+                      {entry.version}
+                    </span>
+                  )}
+                </div>
+                <p className="mt-0.5 text-xs text-muted-foreground">{entry.body}</p>
+                <p className="mt-1 text-[10px] text-muted-foreground/70">{entry.date}</p>
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/shell/components/notifications/NotificationBell.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+import { Bell } from 'lucide-react'
+import { cn } from '../../lib/cn'
+import { Button } from '@fayz-ai/ui'
+
+interface NotificationBellProps {
+  unreadCount: number
+  onClick?: () => void
+  className?: string
+}
+
+export function NotificationBell({
+  unreadCount,
+  onClick,
+  className,
+}: NotificationBellProps) {
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className={cn('relative', className)}
+      onClick={onClick}
+      aria-label={
+        unreadCount > 0
+          ? `${unreadCount} unread notifications`
+          : 'Notifications'
+      }
+    >
+      <Bell className="h-5 w-5" />
+      {unreadCount > 0 && (
+        <span
+          className={cn(
+            'absolute -right-0.5 -top-0.5 flex items-center justify-center rounded-full bg-destructive text-destructive-foreground',
+            unreadCount > 9
+              ? 'h-5 min-w-5 px-1 text-[10px]'
+              : 'h-4 w-4 text-[10px]'
+          )}
+        >
+          {unreadCount > 99 ? '99+' : unreadCount}
+        </span>
+      )}
+    </Button>
+  )
+}

package/src/shell/components/notifications/NotificationInbox.tsx

@@ -0,0 +1,175 @@
+import * as React from 'react'
+import { CheckCheck, Info, AlertTriangle, AlertCircle, CheckCircle2 } from 'lucide-react'
+import { cn } from '../../lib/cn'
+import { Button } from '@fayz-ai/ui'
+import { ChangelogFeed } from './ChangelogFeed'
+import type { Notification } from '../../types'
+
+interface NotificationInboxProps {
+  notifications: Notification[]
+  onMarkRead: (id: string) => void
+  onMarkAllRead: () => void
+  onNotificationClick?: (notification: Notification) => void
+  changelogUrl?: string
+  className?: string
+}
+
+const TYPE_ICONS: Record<string, React.ElementType> = {
+  info: Info,
+  success: CheckCircle2,
+  warning: AlertTriangle,
+  error: AlertCircle,
+}
+
+const TYPE_COLORS: Record<string, string> = {
+  info: 'text-info',
+  success: 'text-success',
+  warning: 'text-warning',
+  error: 'text-destructive',
+}
+
+function timeAgo(dateString: string): string {
+  const now = Date.now()
+  const then = new Date(dateString).getTime()
+  const diff = Math.floor((now - then) / 1000)
+
+  if (diff < 60) return 'just now'
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
+  if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`
+  return new Date(dateString).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+  })
+}
+
+export function NotificationInbox({
+  notifications,
+  onMarkRead,
+  onMarkAllRead,
+  onNotificationClick,
+  changelogUrl,
+  className,
+}: NotificationInboxProps) {
+  const [activeTab, setActiveTab] = React.useState<'inbox' | 'whats-new'>('inbox')
+  const unreadCount = notifications.filter((n) => !n.read).length
+  const inboxNotifications = notifications.filter((n) => n.category !== 'changelog')
+
+  return (
+    <div className={cn('flex w-80 flex-col', className)}>
+      {/* Tabs */}
+      <div className="flex border-b">
+        <button
+          onClick={() => setActiveTab('inbox')}
+          className={cn(
+            'flex-1 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors',
+            activeTab === 'inbox'
+              ? 'border-primary text-primary'
+              : 'border-transparent text-muted-foreground hover:text-foreground'
+          )}
+        >
+          Inbox
+          {unreadCount > 0 && (
+            <span className="ml-1.5 rounded-full bg-primary px-1.5 py-0.5 text-[10px] text-primary-foreground">
+              {unreadCount}
+            </span>
+          )}
+        </button>
+        <button
+          onClick={() => setActiveTab('whats-new')}
+          className={cn(
+            'flex-1 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors',
+            activeTab === 'whats-new'
+              ? 'border-primary text-primary'
+              : 'border-transparent text-muted-foreground hover:text-foreground'
+          )}
+        >
+          What's New
+        </button>
+      </div>
+
+      {/* Tab Content */}
+      {activeTab === 'inbox' ? (
+        <>
+          {unreadCount > 0 && (
+            <div className="flex items-center justify-end px-4 py-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-auto px-2 py-1 text-xs"
+                onClick={onMarkAllRead}
+              >
+                <CheckCheck className="mr-1 h-3 w-3" />
+                Mark all read
+              </Button>
+            </div>
+          )}
+
+          <div className="max-h-96 overflow-y-auto">
+            {inboxNotifications.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-12 text-center">
+                <p className="text-sm text-muted-foreground">No notifications</p>
+              </div>
+            ) : (
+              inboxNotifications.map((notification) => {
+                const Icon = TYPE_ICONS[notification.type] ?? Info
+                const colorClass = TYPE_COLORS[notification.type] ?? TYPE_COLORS.info
+
+                return (
+                  <div
+                    key={notification.id}
+                    role="button"
+                    tabIndex={0}
+                    className={cn(
+                      'flex cursor-pointer gap-3 border-b px-4 py-3 transition-colors hover:bg-muted/50',
+                      !notification.read && 'bg-muted/30'
+                    )}
+                    onClick={() => {
+                      if (!notification.read) onMarkRead(notification.id)
+                      onNotificationClick?.(notification)
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault()
+                        if (!notification.read) onMarkRead(notification.id)
+                        onNotificationClick?.(notification)
+                      }
+                    }}
+                  >
+                    <div className={cn('mt-0.5 shrink-0', colorClass)}>
+                      <Icon className="h-4 w-4" />
+                    </div>
+
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-start justify-between gap-2">
+                        <p
+                          className={cn(
+                            'truncate text-sm',
+                            !notification.read && 'font-medium'
+                          )}
+                        >
+                          {notification.title}
+                        </p>
+                        {!notification.read && (
+                          <span className="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-primary" />
+                        )}
+                      </div>
+                      <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">
+                        {notification.body}
+                      </p>
+                      <p className="mt-1 text-xs text-muted-foreground/70">
+                        {timeAgo(notification.createdAt)}
+                      </p>
+                    </div>
+                  </div>
+                )
+              })
+            )}
+          </div>
+        </>
+      ) : (
+        <ChangelogFeed changelogUrl={changelogUrl} />
+      )}
+    </div>
+  )
+}

package/src/shell/components/notifications/ToastProvider.tsx

@@ -0,0 +1,2 @@
+// Unified toasts → @fayz-ai/ui (sonner-backed). Native CRUD + shell share one toaster.
+export { ToastProvider, toast } from '@fayz-ai/ui'

package/src/shell/components/notifications/index.ts

@@ -0,0 +1,4 @@
+export { NotificationBell } from './NotificationBell'
+export { NotificationInbox } from './NotificationInbox'
+export { ChangelogFeed } from './ChangelogFeed'
+export { ToastProvider, toast } from './ToastProvider'

package/src/shell/components/organization/ImpersonationBanner.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { Eye, X } from 'lucide-react'
+import { usePermissionsStore } from '../../stores/permissions.store'
+import { useTranslation } from '../../hooks/useTranslation'
+
+export function ImpersonationBanner() {
+  const isImpersonating = usePermissionsStore((s) => s.isImpersonating)
+  const impersonatedProfile = usePermissionsStore((s) => s.impersonatedProfile)
+  const stopImpersonation = usePermissionsStore((s) => s.stopImpersonation)
+  const { t } = useTranslation()
+
+  if (!isImpersonating || !impersonatedProfile) return null
+
+  return (
+    <div className="fixed top-0 left-0 right-0 z-[90] flex items-center justify-center gap-3 bg-warning px-4 py-1.5 text-sm font-medium text-amber-950 shadow-sm">
+      <Eye className="h-3.5 w-3.5" />
+      <span>
+        {t('organization.permissions.previewingAs')}: <strong>{impersonatedProfile.name}</strong>
+      </span>
+      <button
+        onClick={stopImpersonation}
+        className="ml-2 inline-flex items-center gap-1 rounded-md bg-warning/30 px-2 py-0.5 text-xs font-semibold hover:bg-warning/50 transition-colors"
+      >
+        <X className="h-3 w-3" />
+        {t('organization.permissions.exitPreview')}
+      </button>
+    </div>
+  )
+}