@castlekit/castle 0.1.6 → 0.3.1

package/src/components/ui/avatar.tsx

@@ -4,17 +4,18 @@ import { cn } from "@/lib/utils";
 export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
   size?: "sm" | "md" | "lg";
   status?: "online" | "offline" | "busy" | "away";
+  statusPulse?: boolean;
 }
 
 const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
-  ({ className, size = "md", status, children, ...props }, ref) => {
+  ({ className, size = "md", status, statusPulse, children, ...props }, ref) => {
     return (
-      <div className="relative inline-block">
+      <div className="relative inline-block shrink-0">
         <div
           className={cn(
-            "relative flex shrink-0 overflow-hidden rounded-[var(--radius-full)] bg-surface border border-border",
+            "relative flex shrink-0 overflow-hidden rounded-[4px] bg-surface border border-border",
             {
-              "h-8 w-8": size === "sm",
+              "h-9 w-9": size === "sm",
               "h-10 w-10": size === "md",
               "h-12 w-12": size === "lg",
             },
@@ -28,18 +29,19 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
         {status && (
           <span
             className={cn(
-              "absolute bottom-0 right-0 block rounded-[var(--radius-full)] ring-2 ring-background",
+              "absolute block rounded-full ring-2 ring-background",
               {
-                "h-2.5 w-2.5": size === "sm",
-                "h-3 w-3": size === "md",
-                "h-3.5 w-3.5": size === "lg",
+                "h-2.5 w-2.5 -bottom-0.5 -right-0.5": size === "sm",
+                "h-3 w-3 -bottom-0.5 -right-0.5": size === "md",
+                "h-3.5 w-3.5 -bottom-0.5 -right-0.5": size === "lg",
               },
               {
                 "bg-success": status === "online",
                 "bg-foreground-muted": status === "offline",
                 "bg-error": status === "busy",
                 "bg-warning": status === "away",
-              }
+              },
+              statusPulse && "animate-pulse"
             )}
           />
         )}

package/src/components/ui/dialog.tsx

@@ -7,17 +7,23 @@ import { cn } from "@/lib/utils";
 export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
   open?: boolean;
   onClose?: () => void;
+  onOpenChange?: (open: boolean) => void;
 }
 
 const Dialog = forwardRef<HTMLDivElement, DialogProps>(
-  ({ className, open = false, onClose, children, ...props }, ref) => {
+  ({ className, open = false, onClose, onOpenChange, children, ...props }, ref) => {
     if (!open) return null;
 
+    const handleClose = () => {
+      onClose?.();
+      onOpenChange?.(false);
+    };
+
     return (
       <div className="fixed inset-0 z-50 flex items-center justify-center">
         <div
           className="fixed inset-0 bg-black/50 backdrop-blur-sm"
-          onClick={onClose}
+          onClick={handleClose}
         />
         <div
           className={cn(
@@ -27,9 +33,9 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(
           ref={ref}
           {...props}
         >
-          {onClose && (
+          {(onClose || onOpenChange) && (
             <button
-              onClick={onClose}
+              onClick={handleClose}
               className="absolute right-4 top-4 p-1 rounded-[var(--radius-sm)] text-foreground-muted hover:text-foreground hover:bg-surface-hover transition-colors"
             >
               <X className="h-4 w-4" />

package/src/components/ui/tooltip.tsx

@@ -9,16 +9,20 @@ export interface TooltipProps {
   content: string;
   side?: "top" | "right" | "bottom" | "left";
   className?: string;
+  /** Delay in ms before showing the tooltip (default 0) */
+  delay?: number;
 }
 
 function Tooltip({ 
   children, 
   content, 
   side = "right",
-  className 
+  className,
+  delay = 0,
 }: TooltipProps) {
   const [isHovered, setIsHovered] = useState(false);
   const [mounted, setMounted] = useState(false);
+  const delayRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const [isPositioned, setIsPositioned] = useState(false);
   const triggerRef = useRef<HTMLDivElement>(null);
@@ -26,6 +30,10 @@ function Tooltip({
 
   useEffect(() => {
     setMounted(true);
+    return () => {
+      // Clean up delay timer on unmount to prevent setState on unmounted component
+      if (delayRef.current) clearTimeout(delayRef.current);
+    };
   }, []);
 
   const updatePosition = useCallback(() => {
@@ -83,8 +91,17 @@ function Tooltip({
     <>
       <div
         ref={triggerRef}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
+        onMouseEnter={() => {
+          if (delay > 0) {
+            delayRef.current = setTimeout(() => setIsHovered(true), delay);
+          } else {
+            setIsHovered(true);
+          }
+        }}
+        onMouseLeave={() => {
+          if (delayRef.current) { clearTimeout(delayRef.current); delayRef.current = null; }
+          setIsHovered(false);
+        }}
         className={className}
       >
         {children}
@@ -110,26 +127,26 @@ function Tooltip({
                   side === "bottom" && (isPositioned ? "translate-y-0" : "-translate-y-2")
                 )}
               >
-                <div className="relative bg-foreground text-background text-sm font-medium px-3 py-1.5 rounded-[4px] whitespace-nowrap shadow-xl shadow-black/25">
+                <div className="relative bg-[#1a1a1a] text-white text-sm font-medium px-3 py-1.5 rounded-[4px] whitespace-nowrap shadow-xl shadow-black/25">
                   {content}
                   {side === "right" && (
                     <div className="absolute -left-[7px] top-1/2 -translate-y-1/2">
-                      <div className="w-0 h-0 border-t-[8px] border-t-transparent border-b-[8px] border-b-transparent border-r-[8px] border-r-foreground" />
+                      <div className="w-0 h-0 border-t-[8px] border-t-transparent border-b-[8px] border-b-transparent border-r-[8px] border-r-[#1a1a1a]" />
                     </div>
                   )}
                   {side === "left" && (
                     <div className="absolute -right-[7px] top-1/2 -translate-y-1/2">
-                      <div className="w-0 h-0 border-t-[8px] border-t-transparent border-b-[8px] border-b-transparent border-l-[8px] border-l-foreground" />
+                      <div className="w-0 h-0 border-t-[8px] border-t-transparent border-b-[8px] border-b-transparent border-l-[8px] border-l-[#1a1a1a]" />
                     </div>
                   )}
                   {side === "top" && (
                     <div className="absolute -bottom-[7px] left-1/2 -translate-x-1/2">
-                      <div className="w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] border-t-foreground" />
+                      <div className="w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] border-t-[#1a1a1a]" />
                     </div>
                   )}
                   {side === "bottom" && (
                     <div className="absolute -top-[7px] left-1/2 -translate-x-1/2">
-                      <div className="w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-b-[8px] border-b-foreground" />
+                      <div className="w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-b-[8px] border-b-[#1a1a1a]" />
                     </div>
                   )}
                 </div>

package/src/components/ui/twemoji-text.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useRef, useEffect, memo } from "react";
+import twemoji from "@twemoji/api";
+
+interface TwemojiTextProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * Wraps children and replaces native Unicode emojis with Twemoji SVG images.
+ * Uses twemoji.parse() on the rendered DOM node after mount/update.
+ */
+export const TwemojiText = memo(function TwemojiText({
+  children,
+  className,
+}: TwemojiTextProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      twemoji.parse(ref.current, {
+        folder: "svg",
+        ext: ".svg",
+        // Use jsDelivr CDN for the SVG assets
+        base: "https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/",
+      });
+    }
+  });
+
+  return (
+    <span ref={ref} className={className}>
+      {children}
+    </span>
+  );
+});

package/src/lib/api-security.ts

@@ -1,5 +1,130 @@
 import { NextRequest, NextResponse } from "next/server";
 
+// ============================================================================
+// Localhost guard — reject requests from non-local IPs
+// ============================================================================
+
+const LOCALHOST_IPS = new Set([
+  "127.0.0.1",
+  "::1",
+  "::ffff:127.0.0.1",
+  "localhost",
+]);
+
+/**
+ * Reject requests that don't originate from localhost.
+ * Uses x-forwarded-for (if behind a proxy) or falls back to the host header.
+ * Returns a 403 response if the request is from a non-local IP, or null if OK.
+ */
+export function checkLocalhost(request: NextRequest): NextResponse | null {
+  // If running in development, skip the check
+  if (process.env.NODE_ENV === "development") return null;
+
+  const forwarded = request.headers.get("x-forwarded-for");
+  const host = request.headers.get("host") || "";
+
+  // Check x-forwarded-for first (proxy scenario)
+  if (forwarded) {
+    const clientIp = forwarded.split(",")[0].trim();
+    if (!LOCALHOST_IPS.has(clientIp)) {
+      return NextResponse.json(
+        { error: "Forbidden — Castle is only accessible from localhost" },
+        { status: 403 }
+      );
+    }
+  }
+
+  // Check host header — reject if it's not a localhost variant
+  const hostname = host.split(":")[0];
+  if (hostname && !LOCALHOST_IPS.has(hostname)) {
+    return NextResponse.json(
+      { error: "Forbidden — Castle is only accessible from localhost" },
+      { status: 403 }
+    );
+  }
+
+  return null;
+}
+
+// ============================================================================
+// Rate limiting — in-memory sliding window
+// ============================================================================
+
+interface RateLimitEntry {
+  timestamps: number[];
+}
+
+const rateLimitStore = new Map<string, RateLimitEntry>();
+
+// Clean up stale entries every 5 minutes
+let cleanupTimer: ReturnType<typeof setInterval> | null = null;
+function ensureCleanup() {
+  if (cleanupTimer) return;
+  cleanupTimer = setInterval(() => {
+    const now = Date.now();
+    for (const [key, entry] of rateLimitStore.entries()) {
+      entry.timestamps = entry.timestamps.filter((t) => now - t < 60_000);
+      if (entry.timestamps.length === 0) rateLimitStore.delete(key);
+    }
+  }, 5 * 60_000);
+  // Don't prevent process exit
+  if (typeof cleanupTimer === "object" && "unref" in cleanupTimer) {
+    cleanupTimer.unref();
+  }
+}
+
+/**
+ * Simple in-memory rate limiter using a sliding window.
+ *
+ * @param key    — Unique key for the rate limit bucket (e.g. "chat:send" or IP-based)
+ * @param limit  — Max requests allowed within the window
+ * @param windowMs — Window duration in milliseconds (default: 60 seconds)
+ * @returns 429 response if rate limit exceeded, or null if OK
+ */
+export function checkRateLimit(
+  key: string,
+  limit: number,
+  windowMs = 60_000
+): NextResponse | null {
+  ensureCleanup();
+
+  const now = Date.now();
+  let entry = rateLimitStore.get(key);
+
+  if (!entry) {
+    entry = { timestamps: [] };
+    rateLimitStore.set(key, entry);
+  }
+
+  // Drop timestamps outside the window
+  entry.timestamps = entry.timestamps.filter((t) => now - t < windowMs);
+
+  if (entry.timestamps.length >= limit) {
+    return NextResponse.json(
+      { error: "Too many requests — please slow down" },
+      { status: 429 }
+    );
+  }
+
+  entry.timestamps.push(now);
+  return null;
+}
+
+/**
+ * Helper to build a rate-limit key from the request IP + route.
+ */
+export function rateLimitKey(request: NextRequest, route: string): string {
+  const ip =
+    request.headers.get("x-forwarded-for")?.split(",")[0].trim() ||
+    request.headers.get("x-real-ip") ||
+    "local";
+  return `${ip}:${route}`;
+}
+
+// ============================================================================
+// CSRF protection
+// ============================================================================
+
 /**
  * Verify that a mutating API request originated from the Castle UI itself,
  * not from a cross-origin attacker (CSRF protection).

package/src/lib/date-utils.ts

@@ -0,0 +1,79 @@
+// ============================================================================
+// Shared date formatting — consistent across the app
+// ============================================================================
+//
+// Formats:
+//   formatDate(ts)        → "9 February 2026"
+//   formatDateTime(ts)    → "9 February 2026 at 2:24 am"
+//   formatTime(ts)        → "2:24 am"
+//   formatTimeAgo(ts)     → "3 hours ago", "2 days ago", etc.
+//   formatDateShort(ts)   → "9 Feb" (for compact UI like search results)
+
+/**
+ * "9 February 2026"
+ */
+export function formatDate(timestamp: number): string {
+  return new Date(timestamp).toLocaleDateString("en-GB", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+}
+
+/**
+ * "9 February 2026 at 2:24 am"
+ */
+export function formatDateTime(timestamp: number): string {
+  const date = new Date(timestamp);
+  const datePart = date.toLocaleDateString("en-GB", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+  const timePart = date.toLocaleTimeString("en-GB", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+  });
+  return `${datePart} at ${timePart}`;
+}
+
+/**
+ * "2:24 am"
+ */
+export function formatTime(timestamp: number): string {
+  return new Date(timestamp).toLocaleTimeString("en-GB", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+  });
+}
+
+/**
+ * "3 hours ago", "2 days ago", "just now", etc.
+ */
+export function formatTimeAgo(timestamp: number): string {
+  const now = Date.now();
+  const diff = now - timestamp;
+
+  const seconds = Math.floor(diff / 1000);
+  if (seconds < 60) return "just now";
+
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d ago`;
+
+  const weeks = Math.floor(days / 7);
+  if (weeks < 5) return `${weeks}w ago`;
+
+  const months = Math.floor(days / 30);
+  if (months < 12) return `${months}mo ago`;
+
+  const years = Math.floor(days / 365);
+  return `${years}y ago`;
+}