@castlekit/castle 0.3.2 → 0.4.1

package/.next/standalone/src/components/dashboard/agent-status.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+type AgentStatusType = "online" | "busy" | "idle" | "offline";
+
+interface DisplayAgent {
+  id: string;
+  name: string;
+  role: string;
+  status: AgentStatusType;
+  avatar?: string;
+}
+
+export interface AgentStatusWidgetProps {
+  variant?: "solid" | "glass";
+  agents?: DisplayAgent[];
+  className?: string;
+}
+
+const statusColors: Record<AgentStatusType, string> = {
+  online: "bg-success",
+  busy: "bg-warning",
+  idle: "bg-info",
+  offline: "bg-foreground-muted",
+};
+
+const statusLabels: Record<AgentStatusType, string> = {
+  online: "Active",
+  busy: "Working",
+  idle: "Idle",
+  offline: "Offline",
+};
+
+const defaultAgents: DisplayAgent[] = [
+  { id: "1", name: "Atlas", role: "Executive Assistant", status: "online" },
+  { id: "2", name: "Mason", role: "Full-Stack Developer", status: "busy" },
+  { id: "3", name: "Sage", role: "Research Analyst", status: "online" },
+  { id: "4", name: "Max", role: "Data Engineer", status: "idle" },
+  { id: "5", name: "Merlin", role: "Creative Director", status: "offline" },
+];
+
+function AgentStatusWidget({
+  variant = "solid",
+  agents = defaultAgents,
+  className,
+}: AgentStatusWidgetProps) {
+  const onlineCount = agents.filter(
+    (a) => a.status === "online" || a.status === "busy"
+  ).length;
+
+  return (
+    <div className={cn(
+      "rounded-[var(--radius-lg)] p-6",
+      variant === "glass" ? "glass" : "bg-surface border border-border",
+      className
+    )}>
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-foreground">Agents</h3>
+        <span className="text-xs text-foreground-secondary">
+          {onlineCount} active
+        </span>
+      </div>
+      <div className="space-y-3">
+        {agents.map((agent) => (
+          <div key={agent.id} className="flex items-center gap-3">
+            <div className="relative">
+              <div className="h-8 w-8 rounded-[var(--radius-full)] bg-surface flex items-center justify-center text-sm font-medium text-foreground-secondary border border-border">
+                {agent.name[0]}
+              </div>
+              <span
+                className={cn(
+                  "absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-[var(--radius-full)] ring-2 ring-background",
+                  statusColors[agent.status]
+                )}
+              />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-foreground truncate">
+                {agent.name}
+              </p>
+              <p className="text-xs text-foreground-muted truncate">
+                {agent.role}
+              </p>
+            </div>
+            <span
+              className={cn(
+                "text-xs px-2 py-0.5 rounded-[var(--radius-full)]",
+                {
+                  "bg-success/10 text-success": agent.status === "online",
+                  "bg-warning/10 text-warning": agent.status === "busy",
+                  "bg-info/10 text-info": agent.status === "idle",
+                  "bg-foreground-muted/10 text-foreground-muted":
+                    agent.status === "offline",
+                }
+              )}
+            >
+              {statusLabels[agent.status]}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export { AgentStatusWidget };

package/.next/standalone/src/components/dashboard/glass-card.tsx

@@ -0,0 +1,28 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+export interface GlassCardProps extends HTMLAttributes<HTMLDivElement> {
+  intensity?: "subtle" | "medium" | "strong";
+}
+
+const GlassCard = forwardRef<HTMLDivElement, GlassCardProps>(
+  ({ className, intensity = "subtle", children, ...props }, ref) => {
+    return (
+      <div
+        className={cn(
+          "glass rounded-[var(--radius-lg)] p-6 transition-all",
+          className
+        )}
+        data-intensity={intensity}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+GlassCard.displayName = "GlassCard";
+
+export { GlassCard };

package/.next/standalone/src/components/dashboard/goal-widget.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+export interface GoalWidgetProps {
+  title: string;
+  value: number;
+  max?: number;
+  unit?: string;
+  status?: string;
+  statusColor?: string;
+  description?: string;
+  highlight?: string;
+  icon?: React.ReactNode;
+  size?: "sm" | "md" | "lg";
+  variant?: "solid" | "glass";
+  className?: string;
+}
+
+const sizeConfig = {
+  sm: {
+    containerSize: 140,
+    padding: "p-2",
+    gaugeSize: 86,
+    strokeWidth: 5,
+    titleSize: "text-xs",
+    valueSize: "text-base",
+    statusSize: "text-[10px]",
+    descSize: "text-[10px]",
+    iconContainer: "w-5 h-5",
+    iconSize: "w-3 h-3",
+  },
+  md: {
+    containerSize: 180,
+    padding: "p-3",
+    gaugeSize: 100,
+    strokeWidth: 6,
+    titleSize: "text-xs",
+    valueSize: "text-xl",
+    statusSize: "text-xs",
+    descSize: "text-[10px]",
+    iconContainer: "w-5 h-5",
+    iconSize: "w-3 h-3",
+  },
+  lg: {
+    containerSize: 220,
+    padding: "p-3",
+    gaugeSize: 130,
+    strokeWidth: 7,
+    titleSize: "text-sm",
+    valueSize: "text-2xl",
+    statusSize: "text-xs",
+    descSize: "text-xs",
+    iconContainer: "w-6 h-6",
+    iconSize: "w-3.5 h-3.5",
+  },
+};
+
+function GoalWidget({
+  title,
+  value,
+  max = 100,
+  unit,
+  status,
+  statusColor = "#f97316",
+  description,
+  highlight,
+  icon,
+  size = "md",
+  variant = "solid",
+  className,
+}: GoalWidgetProps) {
+  const config = sizeConfig[size];
+  const percentage = Math.min((value / max) * 100, 100);
+  
+  const gaugeSize = config.gaugeSize;
+  const strokeWidth = config.strokeWidth;
+  const radius = (gaugeSize - strokeWidth) / 2;
+  const circumference = radius * Math.PI * 1.5;
+  const offset = circumference - (percentage / 100) * circumference;
+  
+  return (
+    <div 
+      className={cn(
+        config.padding, 
+        "space-y-1 flex flex-col rounded-[var(--radius-lg)]",
+        variant === "glass" ? "glass" : "bg-surface border border-border",
+        className
+      )}
+      style={{ width: config.containerSize, height: config.containerSize }}
+    >
+      <div className="flex items-start justify-between">
+        <div className={cn(config.titleSize, "font-semibold text-foreground")}>{title}</div>
+        {icon && (
+          <div 
+            className={cn(config.iconContainer, "rounded-full flex items-center justify-center")}
+            style={{ backgroundColor: statusColor }}
+          >
+            <div className={config.iconSize}>
+              {icon}
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="flex-1 flex items-center justify-center">
+        <div className="relative" style={{ width: gaugeSize, height: gaugeSize }}>
+          <svg
+            width={gaugeSize}
+            height={gaugeSize}
+            className="transform -rotate-[225deg]"
+            style={{ overflow: 'visible' }}
+          >
+            <circle
+              cx={gaugeSize / 2}
+              cy={gaugeSize / 2}
+              r={radius}
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={strokeWidth}
+              strokeLinecap="round"
+              strokeDasharray={circumference}
+              strokeDashoffset={0}
+              className="text-foreground/10"
+            />
+            <circle
+              cx={gaugeSize / 2}
+              cy={gaugeSize / 2}
+              r={radius}
+              fill="none"
+              stroke={statusColor}
+              strokeWidth={strokeWidth}
+              strokeLinecap="round"
+              strokeDasharray={circumference}
+              strokeDashoffset={offset}
+            />
+          </svg>
+          
+          <div className="absolute inset-0 flex flex-col items-center justify-center">
+            <span className={cn(config.valueSize, "font-bold text-foreground")}>
+              {value}{unit}
+            </span>
+            {status && (
+              <span 
+                className={cn(config.statusSize, "font-medium")}
+                style={{ color: statusColor }}
+              >
+                {status}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {description && (
+        <p className={cn(config.descSize, "text-foreground/60 text-center")}>
+          {highlight ? (
+            <>
+              {description.split(highlight)[0]}
+              <span style={{ color: statusColor }} className="font-medium">
+                {highlight}
+              </span>
+              {description.split(highlight)[1]}
+            </>
+          ) : (
+            description
+          )}
+        </p>
+      )}
+    </div>
+  );
+}
+
+export { GoalWidget };

package/.next/standalone/src/components/dashboard/greeting-widget.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+function getGreeting(): string {
+  const hour = new Date().getHours();
+  if (hour < 12) return "Good morning";
+  if (hour < 17) return "Good afternoon";
+  return "Good evening";
+}
+
+function formatDate(): string {
+  return new Date().toLocaleDateString("en-US", {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+export interface GreetingWidgetProps {
+  name?: string;
+  variant?: "solid" | "glass";
+  className?: string;
+}
+
+function GreetingWidget({ name = "Brian", variant = "solid", className }: GreetingWidgetProps) {
+  const { theme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const [greeting, setGreeting] = useState("");
+  const [date, setDate] = useState("");
+
+  useEffect(() => {
+    setMounted(true);
+    setGreeting(getGreeting());
+    setDate(formatDate());
+  }, []);
+
+  const isDark = mounted && theme === "dark";
+  const textColor = variant === "solid" ? undefined : (isDark ? 'white' : 'black');
+
+  if (!mounted) {
+    return (
+      <div className={cn(
+        "py-6 flex flex-col justify-center h-full",
+        variant === "solid" && "bg-surface rounded-[var(--radius-lg)] px-6 border border-border",
+        className
+      )}>
+        <p className={cn("text-sm mb-1", variant === "solid" && "text-foreground-secondary")}>&nbsp;</p>
+        <h1 className={cn("text-4xl font-semibold", variant === "solid" && "text-foreground")}>&nbsp;</h1>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn(
+      "py-6 flex flex-col justify-center h-full",
+      variant === "solid" && "bg-surface rounded-[var(--radius-lg)] px-6 border border-border",
+      className
+    )}>
+      <p 
+        className={cn("text-sm mb-1", variant === "solid" && "text-foreground-secondary")} 
+        style={textColor ? { color: textColor } : undefined}
+      >
+        {date}
+      </p>
+      <h1 
+        className={cn("text-4xl font-semibold", variant === "solid" && "text-foreground")} 
+        style={textColor ? { color: textColor } : undefined}
+      >
+        {greeting}, {name}
+      </h1>
+    </div>
+  );
+}
+
+export { GreetingWidget };

package/.next/standalone/src/components/dashboard/index.ts

@@ -0,0 +1,7 @@
+export { GlassCard, type GlassCardProps } from "./glass-card";
+export { GreetingWidget, type GreetingWidgetProps } from "./greeting-widget";
+export { WeatherWidget, type WeatherWidgetProps } from "./weather-widget";
+export { AgentStatusWidget, type AgentStatusWidgetProps } from "./agent-status";
+export { StatWidget, type StatWidgetProps } from "./stat-widget";
+export { StockWidget, type StockWidgetProps } from "./stock-widget";
+export { GoalWidget, type GoalWidgetProps } from "./goal-widget";

package/.next/standalone/src/components/dashboard/stat-widget.tsx

@@ -0,0 +1,61 @@
+import { type LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { GlassCard } from "./glass-card";
+import { Card } from "@/components/ui/card";
+
+export interface StatWidgetProps {
+  label: string;
+  value: string | number;
+  change?: string;
+  changeType?: "positive" | "negative" | "neutral";
+  icon?: LucideIcon;
+  className?: string;
+  variant?: "solid" | "glass";
+}
+
+function StatWidget({
+  label,
+  value,
+  change,
+  changeType = "neutral",
+  icon: Icon,
+  className,
+  variant = "solid",
+}: StatWidgetProps) {
+  const content = (
+    <div className="flex items-start justify-between">
+      <div>
+        <p className="text-sm text-foreground-muted mb-1">{label}</p>
+        <p className="text-3xl font-semibold text-foreground">{value}</p>
+        {change && (
+          <p
+            className={cn("text-xs mt-2", {
+              "text-success": changeType === "positive",
+              "text-error": changeType === "negative",
+              "text-foreground-muted": changeType === "neutral",
+            })}
+          >
+            {change}
+          </p>
+        )}
+      </div>
+      {Icon && (
+        <div className="p-2 rounded-[var(--radius-md)] bg-accent/10">
+          <Icon className="h-5 w-5 text-accent" />
+        </div>
+      )}
+    </div>
+  );
+
+  if (variant === "solid") {
+    return (
+      <Card variant="bordered" className={cn("p-6", className)}>
+        {content}
+      </Card>
+    );
+  }
+
+  return <GlassCard className={className}>{content}</GlassCard>;
+}
+
+export { StatWidget };

package/.next/standalone/src/components/dashboard/stock-widget.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { TrendingUp, TrendingDown } from "lucide-react";
+import {
+  ResponsiveContainer,
+  AreaChart,
+  Area,
+  ReferenceLine,
+  YAxis,
+} from "recharts";
+
+export interface StockWidgetProps {
+  ticker: string;
+  companyName: string;
+  price: number;
+  change: number;
+  changePercent: number;
+  currency?: string;
+  updatedAt?: string;
+  logo?: React.ReactNode;
+  chartData?: number[];
+  variant?: "solid" | "glass";
+  className?: string;
+}
+
+function BitcoinLogo() {
+  return (
+    <svg viewBox="0 0 32 32" className="w-full h-full block" aria-hidden="true">
+      <circle cx="16" cy="16" r="16" fill="#F7931A" />
+      <path
+        fill="white"
+        d="M22.5 14.1c.3-2-1.2-3.1-3.3-3.8l.7-2.7-1.7-.4-.7 2.6c-.4-.1-.9-.2-1.4-.3l.7-2.7-1.7-.4-.7 2.7c-.4-.1-.7-.2-1-.2l-2.3-.6-.4 1.8s1.2.3 1.2.3c.7.2.8.6.8 1l-.8 3.2c0 0 .1 0 .2.1h-.2l-1.1 4.5c-.1.2-.3.5-.8.4 0 0-1.2-.3-1.2-.3l-.8 1.9 2.2.5c.4.1.8.2 1.2.3l-.7 2.8 1.7.4.7-2.7c.5.1.9.2 1.4.3l-.7 2.7 1.7.4.7-2.8c2.8.5 4.9.3 5.8-2.2.7-2-.1-3.2-1.5-3.9 1.1-.3 1.9-1 2.1-2.5zm-3.8 5.3c-.5 2-3.9.9-5 .7l.9-3.6c1.1.3 4.6.8 4.1 2.9zm.5-5.4c-.5 1.8-3.3.9-4.2.7l.8-3.2c.9.2 3.9.6 3.4 2.5z"
+      />
+    </svg>
+  );
+}
+
+function StockWidget({
+  ticker,
+  companyName,
+  price,
+  change,
+  changePercent,
+  currency = "£",
+  updatedAt = "2m ago",
+  logo,
+  chartData = [],
+  variant = "solid",
+  className,
+}: StockWidgetProps) {
+  const isPositive = change >= 0;
+  const trendColor = isPositive ? "#22c55e" : "#ef4444";
+  const normalizedTicker = ticker.trim().toUpperCase();
+  const effectiveLogo =
+    logo ?? (normalizedTicker === "BTC" || normalizedTicker === "XBT" ? <BitcoinLogo /> : null);
+
+  const formattedPrice = price.toLocaleString("de-DE", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+
+  const formattedChange = Math.abs(change).toLocaleString("en-GB", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+
+  const formattedPercent = Math.abs(changePercent).toFixed(2);
+
+  const data = chartData.map((value, index) => ({
+    index,
+    value,
+  }));
+
+  const referenceValue = chartData.length > 0 
+    ? chartData.reduce((sum, val) => sum + val, 0) / chartData.length 
+    : price;
+
+  return (
+    <div className={cn(
+      "p-3 space-y-2 rounded-[var(--radius-lg)]",
+      variant === "glass" ? "glass" : "bg-surface border border-border",
+      className
+    )}>
+      <div className="flex items-start justify-between">
+        <div className="flex items-center gap-2">
+          {effectiveLogo && (
+            <div className="w-6 h-6 flex items-center justify-center">
+              {effectiveLogo}
+            </div>
+          )}
+          <div>
+            <div className="text-xs font-semibold text-foreground">{ticker}</div>
+            <div className="text-xs text-foreground/60">{companyName}</div>
+          </div>
+        </div>
+        <div className="text-right">
+          <div className="text-[10px] text-foreground/40">updated</div>
+          <div className="text-xs text-foreground/60">{updatedAt}</div>
+        </div>
+      </div>
+
+      <div className="flex items-baseline gap-2">
+        <span className="text-2xl font-bold text-foreground tracking-tight">
+          {currency}{formattedPrice}
+        </span>
+        <div className="flex items-center gap-2">
+          <span
+            className="text-xs font-medium"
+            style={{ color: trendColor }}
+          >
+            {isPositive ? "+" : "-"}{currency}{formattedChange}
+          </span>
+          <span
+            className="text-[10px] font-semibold px-1.5 py-0.5 rounded flex items-center gap-0.5"
+            style={{ backgroundColor: trendColor, color: "white" }}
+          >
+            {isPositive ? (
+              <TrendingUp className="w-2.5 h-2.5" />
+            ) : (
+              <TrendingDown className="w-2.5 h-2.5" />
+            )}
+            {formattedPercent}%
+          </span>
+        </div>
+      </div>
+
+      {chartData.length >= 2 && (
+        <div className="h-10 -mx-1">
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart
+              data={data}
+              margin={{ top: 2, right: 0, left: 0, bottom: 0 }}
+            >
+              <defs>
+                <linearGradient id={`gradient-${ticker}`} x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stopColor={trendColor} stopOpacity={0.3} />
+                  <stop offset="100%" stopColor={trendColor} stopOpacity={0} />
+                </linearGradient>
+              </defs>
+              <YAxis domain={["dataMin", "dataMax"]} hide />
+              <ReferenceLine
+                y={referenceValue}
+                stroke="rgba(255,255,255,0.2)"
+                strokeDasharray="3 3"
+              />
+              <Area
+                type="linear"
+                dataKey="value"
+                stroke={trendColor}
+                strokeWidth={1.5}
+                fill={`url(#gradient-${ticker})`}
+                dot={false}
+                isAnimationActive={false}
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { StockWidget };

package/.next/standalone/src/components/dashboard/weather-widget.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { Cloud, Sun, CloudRain, CloudSnow, Wind } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+type WeatherCondition = "sunny" | "cloudy" | "rainy" | "snowy" | "windy";
+
+export interface WeatherWidgetProps {
+  temperature?: number;
+  condition?: WeatherCondition;
+  location?: string;
+  high?: number;
+  low?: number;
+  variant?: "solid" | "glass";
+  className?: string;
+}
+
+const weatherIcons: Record<WeatherCondition, typeof Sun> = {
+  sunny: Sun,
+  cloudy: Cloud,
+  rainy: CloudRain,
+  snowy: CloudSnow,
+  windy: Wind,
+};
+
+function WeatherWidget({
+  temperature = 12,
+  condition = "cloudy",
+  location = "Zurich",
+  high = 15,
+  low = 8,
+  variant = "solid",
+  className,
+}: WeatherWidgetProps) {
+  const Icon = weatherIcons[condition];
+
+  return (
+    <div className={cn(
+      "rounded-[var(--radius-lg)] p-6",
+      variant === "glass" ? "glass" : "bg-surface border border-border",
+      className
+    )}>
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm text-foreground-secondary mb-1">{location}</p>
+          <div className="flex items-baseline gap-1">
+            <span className="text-5xl font-light text-foreground">
+              {temperature}
+            </span>
+            <span className="text-2xl text-foreground-secondary">°C</span>
+          </div>
+          <p className="text-sm text-foreground-secondary mt-2 capitalize">
+            {condition}
+          </p>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <Icon className="h-12 w-12 text-foreground-secondary" strokeWidth={1.5} />
+          <div className="flex gap-3 text-xs text-foreground-muted">
+            <span>H: {high}°</span>
+            <span>L: {low}°</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { WeatherWidget };