@castlekit/castle 0.3.1 → 0.4.0

package/.next/standalone/src/components/search/search-dialog.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useRouter } from "next/navigation";
+import { Search, Clock, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { formatDateTime } from "@/lib/date-utils";
+import { useSearch } from "@/lib/hooks/use-search";
+import type {
+  SearchResult,
+  SearchResultType,
+  MessageSearchResult,
+} from "@/lib/types/search";
+
+// ============================================================================
+// Result renderers — one per content type (pluggable registry)
+// ============================================================================
+
+function MessageResultRow({ result }: { result: MessageSearchResult }) {
+  const timeStr = formatDateTime(result.timestamp);
+
+  return (
+    <div className="flex items-start gap-3 min-w-0">
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2 text-xs text-foreground-secondary mb-0.5">
+          <span className="px-1.5 py-0.5 rounded bg-accent/10 text-accent font-medium text-[11px]">
+            {result.title}
+          </span>
+          {result.archived && (
+            <span className="text-[11px] text-foreground-secondary/50 italic">archived</span>
+          )}
+          <span className="font-medium">{result.subtitle}</span>
+          <span className="text-foreground-secondary/60">{timeStr}</span>
+        </div>
+        <p className="text-sm text-foreground truncate">{result.snippet}</p>
+      </div>
+    </div>
+  );
+}
+
+// Registry: map each SearchResultType to its renderer
+const resultRenderers: Record<
+  SearchResultType,
+  ((result: SearchResult) => ReactNode) | null
+> = {
+  message: (r) => <MessageResultRow result={r as MessageSearchResult} />,
+  task: null,    // Future
+  note: null,    // Future
+  project: null, // Future
+};
+
+// ============================================================================
+// SearchDialog
+// ============================================================================
+
+interface SearchDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function SearchDialog({ open, onClose }: SearchDialogProps) {
+  const router = useRouter();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const { query, setQuery, results, isSearching, recentSearches, clearRecentSearches } =
+    useSearch();
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+
+  // Focus input on open
+  useEffect(() => {
+    if (open) {
+      // Small delay to ensure the DOM is ready
+      requestAnimationFrame(() => inputRef.current?.focus());
+      setSelectedIndex(-1);
+    }
+  }, [open]);
+
+  // Reset selection when results change
+  useEffect(() => {
+    setSelectedIndex(-1);
+  }, [results]);
+
+  // Determine what items are shown (results or recent searches)
+  const showRecent = !query.trim() && recentSearches.length > 0;
+  const itemCount = showRecent ? recentSearches.length : results.length;
+
+  // Keyboard navigation
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onClose();
+      return;
+    }
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setSelectedIndex((prev) => (prev < itemCount - 1 ? prev + 1 : 0));
+      return;
+    }
+
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : itemCount - 1));
+      return;
+    }
+
+    if (e.key === "Enter" && selectedIndex >= 0) {
+      e.preventDefault();
+      if (showRecent) {
+        // Fill input with the recent search
+        setQuery(recentSearches[selectedIndex]);
+      } else if (results[selectedIndex]) {
+        navigateToResult(results[selectedIndex]);
+      }
+      return;
+    }
+  };
+
+  // Scroll selected item into view
+  useEffect(() => {
+    if (selectedIndex < 0 || !listRef.current) return;
+    const items = listRef.current.querySelectorAll("[data-search-item]");
+    items[selectedIndex]?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+
+  const navigateToResult = (result: SearchResult) => {
+    router.push(result.href);
+    // Close after navigation is dispatched — ensures router.push isn't
+    // interrupted by the dialog unmounting
+    setTimeout(onClose, 0);
+  };
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-start justify-center pt-[15vh]"
+      onClick={onClose}
+    >
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
+
+      {/* Dialog */}
+      <div
+        className="relative w-full max-w-[560px] rounded-[var(--radius-md)] bg-surface border border-border shadow-2xl overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Search input */}
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-border">
+          <Search className="h-5 w-5 text-foreground-secondary shrink-0" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Search across all channels..."
+            className="flex-1 bg-transparent text-[15px] focus:outline-none placeholder:text-foreground-secondary/50"
+          />
+          <kbd className="hidden sm:inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[11px] font-medium text-foreground-secondary/60 bg-surface-hover rounded border border-border/50">
+            ESC
+          </kbd>
+        </div>
+
+        {/* Results / Recent searches */}
+        <div ref={listRef} className="max-h-[400px] overflow-y-auto">
+          {/* Recent searches (before typing) */}
+          {showRecent && (
+            <div>
+              <div className="flex items-center justify-between px-4 pt-3 pb-1.5">
+                <span className="text-xs font-medium text-foreground-secondary/60 uppercase tracking-wider">
+                  Recent searches
+                </span>
+                <button
+                  onClick={clearRecentSearches}
+                  className="text-xs text-foreground-secondary/60 hover:text-foreground-secondary transition-colors cursor-pointer"
+                >
+                  Clear
+                </button>
+              </div>
+              {recentSearches.map((recent, i) => (
+                <button
+                  key={recent}
+                  data-search-item
+                  onClick={() => setQuery(recent)}
+                  className={cn(
+                    "flex items-center gap-3 w-full px-4 py-2.5 text-sm text-left transition-colors cursor-pointer",
+                    selectedIndex === i
+                      ? "bg-accent/10 text-accent"
+                      : "text-foreground hover:bg-surface-hover"
+                  )}
+                >
+                  <Clock className="h-4 w-4 text-foreground-secondary/60 shrink-0" />
+                  <span className="truncate">{recent}</span>
+                </button>
+              ))}
+            </div>
+          )}
+
+          {/* Empty state — no query, no recent */}
+          {!query.trim() && recentSearches.length === 0 && (
+            <div className="px-4 py-8 text-center text-sm text-foreground-secondary/60">
+              Search across all channels
+            </div>
+          )}
+
+          {/* Loading skeleton */}
+          {query.trim() && isSearching && results.length === 0 && (
+            <div className="px-2">
+              {[1, 2, 3, 4, 5].map((i) => (
+                <div key={i} className="px-2 py-3 border-b border-border/20 last:border-b-0">
+                  <div className="flex items-center gap-2 mb-1.5">
+                    <div className="skeleton h-4 w-16 rounded" />
+                    <div className="skeleton h-3 w-12 rounded" />
+                    <div className="skeleton h-3 w-10 rounded" />
+                  </div>
+                  <div className="skeleton h-3.5 rounded" style={{ width: `${55 + i * 8}%` }} />
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Results */}
+          {query.trim() && !isSearching && results.length === 0 && (
+            <div className="px-4 py-8 text-center text-sm text-foreground-secondary">
+              No results found
+            </div>
+          )}
+
+          {query.trim() &&
+            results.map((result, i) => {
+              const renderer = resultRenderers[result.type];
+              if (!renderer) return null;
+              return (
+                <button
+                  key={result.id}
+                  data-search-item
+                  onClick={() => navigateToResult(result)}
+                  className={cn(
+                    "w-full px-4 py-3 text-left transition-colors cursor-pointer border-b border-border/20 last:border-b-0",
+                    selectedIndex === i
+                      ? "bg-accent/10"
+                      : "hover:bg-surface-hover"
+                  )}
+                >
+                  {renderer(result)}
+                </button>
+              );
+            })}
+        </div>
+
+        {/* Footer hint */}
+        {query.trim() && results.length > 0 && (
+          <div className="px-4 py-2 border-t border-border/50 text-[11px] text-foreground-secondary/50 flex items-center gap-3">
+            <span>
+              <kbd className="px-1 py-0.5 rounded bg-surface-hover border border-border/50 text-[10px]">↑↓</kbd> Navigate
+            </span>
+            <span>
+              <kbd className="px-1 py-0.5 rounded bg-surface-hover border border-border/50 text-[10px]">↵</kbd> Open
+            </span>
+            <span>
+              <kbd className="px-1 py-0.5 rounded bg-surface-hover border border-border/50 text-[10px]">esc</kbd> Close
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/.next/standalone/src/components/ui/alert.tsx

@@ -0,0 +1,72 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { AlertCircle, CheckCircle, Info, AlertTriangle, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: "info" | "success" | "warning" | "error";
+  dismissible?: boolean;
+  onDismiss?: () => void;
+}
+
+const variantStyles = {
+  info: {
+    container: "bg-info/10 border-info/20 text-info",
+    icon: Info,
+  },
+  success: {
+    container: "bg-success/10 border-success/20 text-success",
+    icon: CheckCircle,
+  },
+  warning: {
+    container: "bg-warning/10 border-warning/20 text-warning",
+    icon: AlertTriangle,
+  },
+  error: {
+    container: "bg-error/10 border-error/20 text-error",
+    icon: AlertCircle,
+  },
+};
+
+const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {
+      className,
+      variant = "info",
+      dismissible = false,
+      onDismiss,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { container, icon: Icon } = variantStyles[variant];
+
+    return (
+      <div
+        className={cn(
+          "flex items-start gap-3 rounded-[var(--radius-md)] border p-4",
+          container,
+          className
+        )}
+        ref={ref}
+        role="alert"
+        {...props}
+      >
+        <Icon className="h-5 w-5 shrink-0 mt-0.5" />
+        <div className="flex-1 text-sm">{children}</div>
+        {dismissible && onDismiss && (
+          <button
+            onClick={onDismiss}
+            className="shrink-0 p-1 rounded-[var(--radius-sm)] hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+Alert.displayName = "Alert";
+
+export { Alert };

package/.next/standalone/src/components/ui/avatar.tsx

@@ -0,0 +1,89 @@
+import { forwardRef, type HTMLAttributes } from "react";
+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, statusPulse, children, ...props }, ref) => {
+    return (
+      <div className="relative inline-block shrink-0">
+        <div
+          className={cn(
+            "relative flex shrink-0 overflow-hidden rounded-[4px] bg-surface border border-border",
+            {
+              "h-9 w-9": size === "sm",
+              "h-10 w-10": size === "md",
+              "h-12 w-12": size === "lg",
+            },
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+        {status && (
+          <span
+            className={cn(
+              "absolute block rounded-full ring-2 ring-background",
+              {
+                "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"
+            )}
+          />
+        )}
+      </div>
+    );
+  }
+);
+
+Avatar.displayName = "Avatar";
+
+const AvatarImage = forwardRef<
+  HTMLImageElement,
+  React.ImgHTMLAttributes<HTMLImageElement>
+>(({ className, alt, ...props }, ref) => {
+  return (
+    <img
+      className={cn("aspect-square h-full w-full object-cover", className)}
+      alt={alt}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+AvatarImage.displayName = "AvatarImage";
+
+const AvatarFallback = forwardRef<
+  HTMLSpanElement,
+  HTMLAttributes<HTMLSpanElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <span
+      className={cn(
+        "flex h-full w-full items-center justify-center bg-surface text-foreground-secondary font-medium text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+AvatarFallback.displayName = "AvatarFallback";
+
+export { Avatar, AvatarImage, AvatarFallback };

package/.next/standalone/src/components/ui/badge.tsx

@@ -0,0 +1,39 @@
+import { type HTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: "default" | "success" | "warning" | "error" | "info" | "outline";
+  size?: "sm" | "md";
+}
+
+function Badge({
+  className,
+  variant = "default",
+  size = "md",
+  ...props
+}: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center font-medium rounded-[var(--radius-full)] transition-colors",
+        {
+          "bg-surface text-foreground-secondary": variant === "default",
+          "bg-success/10 text-success": variant === "success",
+          "bg-warning/10 text-warning": variant === "warning",
+          "bg-error/10 text-error": variant === "error",
+          "bg-info/10 text-info": variant === "info",
+          "bg-transparent text-foreground-secondary border border-border":
+            variant === "outline",
+        },
+        {
+          "px-2 py-0.5 text-xs": size === "sm",
+          "px-2.5 py-0.5 text-sm": size === "md",
+        },
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Badge };

package/.next/standalone/src/components/ui/button.tsx

@@ -0,0 +1,43 @@
+import { forwardRef, type ButtonHTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "ghost" | "destructive" | "outline";
+  size?: "sm" | "md" | "lg" | "icon";
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "primary", size = "md", ...props }, ref) => {
+    return (
+      <button
+        className={cn(
+          "inline-flex items-center justify-center font-medium transition-colors rounded-[var(--radius-sm)] interactive disabled:pointer-events-none",
+          {
+            "bg-accent text-accent-foreground hover:bg-accent-hover":
+              variant === "primary",
+            "bg-surface text-foreground border border-border hover:bg-surface-hover hover:border-border-hover":
+              variant === "secondary",
+            "bg-transparent text-foreground hover:bg-surface":
+              variant === "ghost",
+            "bg-error text-white hover:bg-error/90": variant === "destructive",
+            "bg-transparent text-foreground border border-border hover:bg-surface hover:border-border-hover":
+              variant === "outline",
+          },
+          {
+            "h-8 px-3 text-sm": size === "sm",
+            "h-10 px-4 text-sm": size === "md",
+            "h-12 px-6 text-base": size === "lg",
+            "h-10 w-10 p-0": size === "icon",
+          },
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Button.displayName = "Button";
+
+export { Button };

package/.next/standalone/src/components/ui/card.tsx

@@ -0,0 +1,107 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: "default" | "bordered" | "elevated";
+}
+
+const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant = "default", ...props }, ref) => {
+    return (
+      <div
+        className={cn(
+          "rounded-[var(--radius-md)] bg-surface p-6",
+          {
+            "": variant === "default",
+            "border border-border": variant === "bordered",
+            "shadow-lg shadow-black/5 dark:shadow-black/20":
+              variant === "elevated",
+          },
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Card.displayName = "Card";
+
+const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        className={cn("flex flex-col space-y-1.5 pb-4", className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = forwardRef<
+  HTMLHeadingElement,
+  HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <h3
+      className={cn(
+        "text-lg font-semibold leading-none tracking-tight text-foreground",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <p
+      className={cn("text-sm text-foreground-secondary", className)}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+CardDescription.displayName = "CardDescription";
+
+const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return <div className={cn("", className)} ref={ref} {...props} />;
+  }
+);
+
+CardContent.displayName = "CardContent";
+
+const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        className={cn("flex items-center pt-4", className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+};

package/.next/standalone/src/components/ui/checkbox.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { forwardRef, type ButtonHTMLAttributes } from "react";
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface CheckboxProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  label?: string;
+}
+
+const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
+  ({ className, checked = false, onCheckedChange, label, ...props }, ref) => {
+    const checkbox = (
+      <button
+        type="button"
+        role="checkbox"
+        aria-checked={checked}
+        data-state={checked ? "checked" : "unchecked"}
+        onClick={() => onCheckedChange?.(!checked)}
+        className={cn(
+          "peer h-5 w-5 shrink-0 rounded-[var(--radius-sm)] border-2 transition-colors interactive",
+          checked
+            ? "bg-accent border-accent text-accent-foreground"
+            : "bg-[var(--input-background)] border-[var(--input-border)]",
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {checked && <Check className="h-4 w-4 mx-auto" strokeWidth={3} />}
+      </button>
+    );
+
+    if (label) {
+      return (
+        <div className="flex items-center gap-3">
+          {checkbox}
+          <span 
+            className="text-sm text-foreground select-none cursor-pointer"
+            onClick={() => onCheckedChange?.(!checked)}
+          >
+            {label}
+          </span>
+        </div>
+      );
+    }
+
+    return checkbox;
+  }
+);
+
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };