@otfdashkit/ui 0.1.0

package/src/app-shell/UserMenu.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+import React, { useEffect, useRef, useState } from 'react'
+import { LogOut, Settings, User } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { useSidebar } from './Sidebar'
+
+export interface AppShellUserMenuProps {
+  name: string
+  email: string
+  avatar?: string
+  onSignOut: () => void
+  onProfile?: () => void
+  onSettings?: () => void
+  className?: string
+}
+
+function getInitials(name: string): string {
+  return name
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((w) => w[0])
+    .join('')
+    .toUpperCase()
+}
+
+export function AppShellUserMenu({ name, email, avatar, onSignOut, onProfile, onSettings, className }: AppShellUserMenuProps) {
+  const { collapsed } = useSidebar()
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    function handleClickOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [open])
+
+  return (
+    <div ref={ref} data-slot="user-menu" className={cn('relative', className)}>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        className={cn(
+          'flex items-center gap-2.5 w-full rounded-md px-2 py-1.5',
+          'text-sm transition-colors',
+          'hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          collapsed ? 'justify-center' : ''
+        )}
+      >
+        {/* Avatar */}
+        {avatar ? (
+          <img
+            src={avatar}
+            alt={name}
+            className="h-7 w-7 shrink-0 rounded-full object-cover"
+          />
+        ) : (
+          <span
+            className={cn(
+              'flex h-7 w-7 shrink-0 items-center justify-center rounded-full',
+              'bg-primary/15 text-primary text-xs font-semibold leading-none'
+            )}
+          >
+            {getInitials(name)}
+          </span>
+        )}
+        {!collapsed && (
+          <span className="flex flex-col items-start min-w-0 flex-1">
+            <span className="truncate text-sm font-medium text-foreground leading-tight">{name}</span>
+            <span className="truncate text-xs text-muted-foreground leading-tight">{email}</span>
+          </span>
+        )}
+      </button>
+
+      {open && (
+        <div
+          role="menu"
+          aria-label="User menu"
+          className={cn(
+            'absolute z-50 w-52 rounded-md border border-border bg-popover shadow-md',
+            collapsed ? 'left-full ml-2 bottom-0' : 'left-0 bottom-full mb-1'
+          )}
+        >
+          {/* User info header */}
+          <div className="px-3 py-2 border-b border-border">
+            <p className="text-sm font-medium text-foreground truncate">{name}</p>
+            <p className="text-xs text-muted-foreground truncate">{email}</p>
+          </div>
+          <div className="py-1">
+            {onProfile && (
+              <button
+                role="menuitem"
+                type="button"
+                onClick={() => { onProfile?.(); setOpen(false) }}
+                className="flex items-center gap-2.5 w-full px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+              >
+                <User className="h-4 w-4 shrink-0" />
+                Profile
+              </button>
+            )}
+            {onSettings && (
+              <button
+                role="menuitem"
+                type="button"
+                onClick={() => { onSettings?.(); setOpen(false) }}
+                className="flex items-center gap-2.5 w-full px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+              >
+                <Settings className="h-4 w-4 shrink-0" />
+                Settings
+              </button>
+            )}
+          </div>
+          <div className="border-t border-border py-1">
+            <button
+              role="menuitem"
+              type="button"
+              onClick={() => { onSignOut(); setOpen(false) }}
+              className="flex items-center gap-2.5 w-full px-3 py-1.5 text-sm text-muted-foreground hover:bg-destructive/10 hover:text-destructive transition-colors"
+            >
+              <LogOut className="h-4 w-4 shrink-0" />
+              Sign out
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/app-shell/WorkspacesMenu.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+import React, { useEffect, useRef, useState } from 'react'
+import { ChevronDown, Check } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { useSidebar } from './Sidebar'
+
+export interface Workspace {
+  id: string
+  name: string
+  logo?: React.ReactNode
+}
+
+export interface WorkspacesMenuProps {
+  workspaces: Workspace[]
+  current: string
+  onSelect: (id: string) => void
+  className?: string
+}
+
+function getInitials(name: string): string {
+  return name
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((w) => w[0])
+    .join('')
+    .toUpperCase()
+}
+
+export function WorkspacesMenu({ workspaces, current, onSelect, className }: WorkspacesMenuProps) {
+  const { collapsed } = useSidebar()
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  const currentWorkspace = workspaces.find((w) => w.id === current)
+
+  useEffect(() => {
+    if (!open) return
+    function handleClickOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [open])
+
+  return (
+    <div ref={ref} data-slot="workspaces-menu" className={cn('relative', className)}>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        className={cn(
+          'flex items-center gap-2 w-full rounded-md px-2 py-1.5',
+          'text-sm font-medium transition-colors',
+          'hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          collapsed ? 'justify-center' : 'justify-between'
+        )}
+      >
+        <span className="flex items-center gap-2 min-w-0">
+          {/* Logo / initials avatar */}
+          <span
+            className={cn(
+              'flex h-6 w-6 shrink-0 items-center justify-center rounded',
+              'bg-primary/10 text-primary text-[10px] font-bold leading-none overflow-hidden'
+            )}
+          >
+            {currentWorkspace?.logo ?? getInitials(currentWorkspace?.name ?? '?')}
+          </span>
+          {!collapsed && (
+            <span className="truncate text-foreground">{currentWorkspace?.name ?? 'Select workspace'}</span>
+          )}
+        </span>
+        {!collapsed && <ChevronDown className={cn('h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform', open && 'rotate-180')} />}
+      </button>
+
+      {open && (
+        <div
+          role="listbox"
+          aria-label="Workspaces"
+          className={cn(
+            'absolute z-50 mt-1 w-52 rounded-md border border-border bg-popover shadow-md',
+            collapsed ? 'left-full ml-2 top-0' : 'left-0'
+          )}
+        >
+          <div className="py-1">
+            {workspaces.map((ws) => (
+              <button
+                key={ws.id}
+                role="option"
+                aria-selected={ws.id === current}
+                type="button"
+                onClick={() => { onSelect(ws.id); setOpen(false) }}
+                className={cn(
+                  'flex items-center gap-2 w-full px-3 py-1.5 text-sm',
+                  'hover:bg-accent transition-colors',
+                  ws.id === current ? 'text-foreground font-medium' : 'text-muted-foreground'
+                )}
+              >
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary/10 text-primary text-[9px] font-bold overflow-hidden">
+                  {ws.logo ?? getInitials(ws.name)}
+                </span>
+                <span className="flex-1 truncate text-left">{ws.name}</span>
+                {ws.id === current && <Check className="h-3.5 w-3.5 shrink-0 text-primary" />}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/app-shell/index.ts

@@ -0,0 +1,18 @@
+// AppShell — renamed to Shell/ShellProps to avoid collision with layouts/AppShell
+export { AppShell as Shell, type AppShellProps as ShellProps } from './AppShell'
+// Sidebar compound — renamed AppSidebar to avoid collision with layouts/Sidebar
+export {
+  Sidebar as AppSidebar,
+  useSidebar,
+  type SidebarItemProps as AppSidebarItemProps,
+} from './Sidebar'
+// Sidebar resize handle
+export * from './SidebarResizer'
+// WorkspacesMenu — no conflicts
+export * from './WorkspacesMenu'
+// UserMenu — renamed AppShellUserMenu to avoid collision with blocks/UserMenu
+export { AppShellUserMenu, type AppShellUserMenuProps } from './UserMenu'
+// BillingStatus widget
+export * from './BillingStatus'
+// SortableNav — drag-to-reorder nav items
+export * from './SortableNav'

package/src/backgrounds/AnimatedGradient.tsx

@@ -0,0 +1,151 @@
+'use client'
+
+import React, { useEffect, useRef } from 'react'
+import { cn } from '../utils/cn'
+
+export interface AnimatedGradientProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Gradient color stops — at least 2 required */
+  colors?: string[]
+  /** Speed multiplier (default 1) */
+  speed?: number
+  /** Animation style */
+  variant?: 'mesh' | 'shift' | 'pulse'
+  /** Whether to blur the gradient blobs (mesh only) */
+  blur?: boolean
+}
+
+const DEFAULT_COLORS = [
+  'hsl(239 84% 67% / 0.35)',
+  'hsl(280 100% 70% / 0.25)',
+  'hsl(217 33% 17% / 0.4)',
+]
+
+/**
+ * AnimatedGradient — CSS-animation-based ambient background.
+ * Three variants:
+ *  - mesh: 3 drifting radial blobs (most visual impact)
+ *  - shift: linear-gradient that shifts position
+ *  - pulse: radial that breathes in/out
+ *
+ * No JS animation loop — all CSS, zero RAF overhead.
+ */
+export const AnimatedGradient = React.forwardRef<HTMLDivElement, AnimatedGradientProps>(
+  (
+    {
+      colors = DEFAULT_COLORS,
+      speed = 1,
+      variant = 'mesh',
+      blur = true,
+      className,
+      children,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const idRef = useRef(`ag-${Math.random().toString(36).slice(2, 7)}`)
+    const id = idRef.current
+
+    const [c0 = DEFAULT_COLORS[0], c1 = DEFAULT_COLORS[1], c2 = DEFAULT_COLORS[2]] = colors
+
+    const duration0 = (12 / speed).toFixed(1)
+    const duration1 = (18 / speed).toFixed(1)
+    const duration2 = (24 / speed).toFixed(1)
+
+    if (variant === 'shift') {
+      return (
+        <div
+          ref={ref}
+          data-slot="animated-gradient"
+          className={cn('absolute inset-0 overflow-hidden pointer-events-none', className)}
+          style={{
+            background: `linear-gradient(135deg, ${colors.join(', ')})`,
+            backgroundSize: '300% 300%',
+            animation: `gradient-shift ${(8 / speed).toFixed(1)}s ease infinite`,
+            ...style,
+          }}
+          aria-hidden="true"
+          {...props}
+        >
+          {children}
+        </div>
+      )
+    }
+
+    if (variant === 'pulse') {
+      return (
+        <div
+          ref={ref}
+          data-slot="animated-gradient"
+          className={cn('absolute inset-0 overflow-hidden pointer-events-none', className)}
+          style={{
+            background: `radial-gradient(ellipse 70% 50% at 50% 50%, ${c0} 0%, transparent 70%)`,
+            animation: `gradient-pulse ${(6 / speed).toFixed(1)}s ease-in-out infinite`,
+            ...style,
+          }}
+          aria-hidden="true"
+          {...props}
+        >
+          {children}
+        </div>
+      )
+    }
+
+    // variant === 'mesh'
+    return (
+      <div
+        ref={ref}
+        data-slot="animated-gradient"
+        className={cn('absolute inset-0 overflow-hidden pointer-events-none', className)}
+        style={style}
+        aria-hidden="true"
+        {...props}
+      >
+        {/* Blob 0 */}
+        <div
+          style={{
+            position: 'absolute',
+            width: '60%',
+            height: '60%',
+            top: '-10%',
+            left: '20%',
+            borderRadius: '50%',
+            background: `radial-gradient(circle, ${c0} 0%, transparent 70%)`,
+            filter: blur ? 'blur(40px)' : 'none',
+            animation: `blob-float-0 ${duration0}s ease-in-out infinite`,
+          }}
+        />
+        {/* Blob 1 */}
+        <div
+          style={{
+            position: 'absolute',
+            width: '50%',
+            height: '50%',
+            bottom: '-5%',
+            right: '-5%',
+            borderRadius: '50%',
+            background: `radial-gradient(circle, ${c1} 0%, transparent 70%)`,
+            filter: blur ? 'blur(50px)' : 'none',
+            animation: `blob-float-1 ${duration1}s ease-in-out infinite`,
+          }}
+        />
+        {/* Blob 2 */}
+        <div
+          style={{
+            position: 'absolute',
+            width: '40%',
+            height: '40%',
+            bottom: '10%',
+            left: '-5%',
+            borderRadius: '50%',
+            background: `radial-gradient(circle, ${c2} 0%, transparent 70%)`,
+            filter: blur ? 'blur(40px)' : 'none',
+            animation: `blob-float-2 ${duration2}s ease-in-out infinite`,
+          }}
+        />
+        {children}
+      </div>
+    )
+  }
+)
+AnimatedGradient.displayName = 'AnimatedGradient'

package/src/backgrounds/DottedBackground.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+export interface DottedBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Dot color (default uses --border token) */
+  color?: string
+  /** Dot size in px (default 1) */
+  dotSize?: number
+  /** Gap between dots in px (default 24) */
+  gap?: number
+  /** Vignette fade at edges */
+  vignette?: boolean
+  fixed?: boolean
+}
+
+export const DottedBackground = React.forwardRef<HTMLDivElement, DottedBackgroundProps>(
+  (
+    {
+      color,
+      dotSize = 1,
+      gap = 24,
+      vignette = true,
+      fixed = false,
+      className,
+      children,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const dotColor = color ?? 'hsl(var(--border))'
+
+    return (
+      <div
+        ref={ref}
+        data-slot="dotted-background"
+        className={cn(
+          fixed ? 'fixed inset-0 z-0' : 'absolute inset-0',
+          'pointer-events-none overflow-hidden',
+          className
+        )}
+        style={{
+          backgroundImage: `radial-gradient(circle, ${dotColor} ${dotSize}px, transparent ${dotSize}px)`,
+          backgroundSize: `${gap}px ${gap}px`,
+          ...style,
+        }}
+        aria-hidden="true"
+        {...props}
+      >
+        {vignette && (
+          <div
+            className="absolute inset-0"
+            style={{
+              background:
+                'radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, hsl(var(--background)) 100%)',
+            }}
+          />
+        )}
+        {children}
+      </div>
+    )
+  }
+)
+DottedBackground.displayName = 'DottedBackground'

package/src/backgrounds/GradientBackground.tsx

@@ -0,0 +1,113 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+export type GradientBackgroundPreset =
+  | 'slate'    // deep indigo mesh
+  | 'warm'     // warm purple/pink
+  | 'cosmic'   // deep violet/magenta
+  | 'terminal' // near-black mono
+  | 'aurora'   // cyan/indigo/violet
+  | 'subtle'   // barely-there tint for light mode
+  | 'custom'
+
+export interface GradientBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Full-screen fixed backdrop */
+  fixed?: boolean
+  preset?: GradientBackgroundPreset
+  /** Custom gradient CSS string e.g. "radial-gradient(...)" — only when preset='custom' */
+  gradient?: string
+  /** Additional noise/texture overlay (subtle grain) */
+  noise?: boolean
+  /** Radial spot blend on top */
+  radial?: boolean
+}
+
+const presetStyles: Record<GradientBackgroundPreset, React.CSSProperties> = {
+  slate: {
+    background:
+      'radial-gradient(ellipse 80% 60% at 50% -10%, hsl(239 84% 67% / 0.2) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 80%, hsl(217 33% 17% / 0.6) 0%, transparent 60%), hsl(222 47% 7%)',
+  },
+  warm: {
+    background:
+      'radial-gradient(ellipse 80% 60% at 50% -10%, hsl(262 83% 68% / 0.25) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 80% 80%, hsl(20 14% 14% / 0.8) 0%, transparent 60%), hsl(20 14% 7%)',
+  },
+  cosmic: {
+    background:
+      'radial-gradient(ellipse 70% 50% at 50% -10%, hsl(280 100% 70% / 0.3) 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 80% 80%, hsl(260 60% 12% / 0.9) 0%, transparent 60%), hsl(270 50% 4%)',
+  },
+  terminal: {
+    background:
+      'radial-gradient(ellipse 80% 50% at 50% -20%, hsl(0 0% 15% / 0.8) 0%, transparent 60%), hsl(0 0% 4%)',
+  },
+  aurora: {
+    background:
+      'radial-gradient(ellipse 60% 40% at 20% 20%, hsl(193 100% 50% / 0.15) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 80%, hsl(265 89% 66% / 0.2) 0%, transparent 50%), radial-gradient(ellipse 80% 60% at 50% 50%, hsl(226 71% 40% / 0.1) 0%, transparent 70%), hsl(222 47% 5%)',
+  },
+  subtle: {
+    background:
+      'radial-gradient(ellipse 80% 50% at 50% 0%, hsl(var(--primary) / 0.06) 0%, transparent 60%), hsl(var(--background))',
+  },
+  custom: {},
+}
+
+export const GradientBackground = React.forwardRef<HTMLDivElement, GradientBackgroundProps>(
+  (
+    {
+      fixed = false,
+      preset = 'slate',
+      gradient,
+      noise = false,
+      radial = false,
+      className,
+      children,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const bgStyle: React.CSSProperties =
+      preset === 'custom' && gradient
+        ? { background: gradient }
+        : presetStyles[preset]
+
+    return (
+      <div
+        ref={ref}
+        data-slot="gradient-background"
+        className={cn(
+          fixed ? 'fixed inset-0 z-0' : 'absolute inset-0',
+          'pointer-events-none overflow-hidden',
+          className
+        )}
+        style={{ ...bgStyle, ...style }}
+        aria-hidden="true"
+        {...props}
+      >
+        {/* Noise texture overlay */}
+        {noise && (
+          <div
+            className="absolute inset-0 opacity-[0.03]"
+            style={{
+              backgroundImage:
+                'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 256 256\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cfilter id=\'noise\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'0.9\' numOctaves=\'4\' stitchTiles=\'stitch\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23noise)\'/%3E%3C/svg%3E")',
+              backgroundRepeat: 'repeat',
+              backgroundSize: '200px 200px',
+            }}
+          />
+        )}
+        {/* Radial center glow */}
+        {radial && (
+          <div
+            className="absolute inset-0"
+            style={{
+              background:
+                'radial-gradient(ellipse 50% 30% at 50% 0%, hsl(var(--primary) / 0.12) 0%, transparent 70%)',
+            }}
+          />
+        )}
+        {children}
+      </div>
+    )
+  }
+)
+GradientBackground.displayName = 'GradientBackground'