@chesapeake/stack 0.1.0

package/components/ux/ActivityAnimation.tsx

@@ -0,0 +1,135 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+import { cn } from "../../lib/utils";
+
+interface ActivityAnimationProps {
+  /** Animation type: "pulse" for pulsing/spinner style, "particles" for particle motion */
+  type?: "pulse" | "particles";
+  /** Additional CSS classes to apply */
+  className?: string;
+  /** Size of the animation indicator */
+  size?: "sm" | "md" | "lg";
+}
+
+/**
+ * ActivityAnimation component displays animated activity indicators.
+ * Supports two animation types: pulse (spinner-style) and particles (motion-based).
+ * Useful for indicating active states, loading, or ongoing processes.
+ *
+ * @example
+ * ```tsx
+ * import { ActivityAnimation } from "@shared/components/ux/ActivityAnimation"
+ * import { Button } from "@shared/components/ui/button"
+ *
+ * // Pulse animation (default)
+ * function LoadingButton() {
+ *   return (
+ *     <Button disabled>
+ *       <ActivityAnimation type="pulse" size="sm" className="mr-2" />
+ *       Processing...
+ *     </Button>
+ *   )
+ * }
+ *
+ * // Particles animation
+ * function ActiveIndicator() {
+ *   return (
+ *     <div className="flex items-center gap-2">
+ *       <ActivityAnimation type="particles" size="md" />
+ *       <span>Active session</span>
+ *     </div>
+ *   )
+ * }
+ *
+ * // Inline with text
+ * function TimerButton({ isRunning }: { isRunning: boolean }) {
+ *   return (
+ *     <Button variant={isRunning ? "destructive" : "default"}>
+ *       {isRunning && (
+ *         <ActivityAnimation type="pulse" size="sm" className="mr-1" />
+ *       )}
+ *       {isRunning ? "25:00" : "Start Timer"}
+ *     </Button>
+ *   )
+ * }
+ * ```
+ */
+export function ActivityAnimation({
+  type,
+  className,
+  size,
+}: ActivityAnimationProps) {
+  const sizeClasses = {
+    sm: "w-3 h-3",
+    md: "w-4 h-4",
+    lg: "w-5 h-5",
+  };
+
+  if (type === "pulse") {
+    return (
+      <div
+        className={cn(
+          "relative inline-flex items-center justify-center",
+          className
+        )}
+        aria-label="Activity indicator"
+      >
+        <div
+          className={cn(
+            "rounded-full bg-current opacity-75",
+            sizeClasses[size ?? "md"],
+            "animate-pulse"
+          )}
+        />
+        <div
+          className={cn(
+            "absolute rounded-full bg-current opacity-40",
+            sizeClasses[size ?? "md"],
+            "animate-ping"
+          )}
+        />
+      </div>
+    );
+  }
+
+  // Particles animation
+  return (
+    <div
+      className={cn(
+        "relative inline-flex items-center justify-center",
+        className
+      )}
+      aria-label="Activity indicator"
+      style={{
+        width: size === "sm" ? "12px" : size === "md" ? "16px" : "20px",
+      }}
+    >
+      {[0, 1, 2].map((i) => {
+        const offset = size === "sm" ? "-4px" : size === "md" ? "-6px" : "-8px";
+        const rotation = i * 120;
+        return (
+          <div
+            key={i}
+            className={cn(
+              "absolute rounded-full bg-current opacity-60",
+              size === "sm"
+                ? "w-1 h-1"
+                : size === "md"
+                  ? "w-1.5 h-1.5"
+                  : "w-2 h-2"
+            )}
+            style={{
+              animation: `particle-float-opacity 2s ease-in-out infinite`,
+              animationDelay: `${String(i * 0.3)}s`,
+              transform: `rotate(${String(rotation)}deg) translateY(${offset})`,
+              transformOrigin: "center",
+            }}
+            data-particle-index={i}
+            data-rotation={rotation}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/components/ux/EmptyState.tsx

@@ -0,0 +1,22 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+interface EmptyStateProps {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+/**
+ * EmptyState component for displaying empty state messages
+ */
+export function EmptyState({ title, description, className }: EmptyStateProps) {
+  return (
+    <div
+      className={`text-center py-12 px-4 text-muted-foreground ${className ?? ""}`}
+    >
+      <p className="mb-2">{title}</p>
+      {description && <p className="text-sm">{description}</p>}
+    </div>
+  );
+}

package/components/ux/FeedbackDrawer.tsx

@@ -0,0 +1,141 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+/** @jsxImportSource react */
+import { useState } from "react";
+import { MessageSquare, Send } from "lucide-react";
+import { Button } from "../ui/button.tsx";
+import { Textarea } from "../ui/textarea.tsx";
+import { Label } from "../ui/label.tsx";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from "../ui/drawer.tsx";
+import { toast } from "../ui/sonner-api.ts";
+
+interface FeedbackDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (feedback: string) => Promise<void>;
+}
+
+export function FeedbackDrawer({
+  isOpen,
+  onClose,
+  onSubmit,
+}: FeedbackDrawerProps) {
+  const [feedback, setFeedback] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async (e: { preventDefault: () => void }) => {
+    e.preventDefault();
+    if (!feedback.trim() || feedback.trim().length < 10) return;
+
+    setIsSubmitting(true);
+    try {
+      await onSubmit(feedback.trim());
+      setFeedback("");
+      toast("Feedback Submitted", {
+        description: "Thank you for your feedback! We appreciate your input.",
+      });
+      onClose();
+    } catch (error) {
+      console.error("Failed to submit feedback:", error);
+      toast.error("Failed to Submit Feedback", {
+        description:
+          "There was an error submitting your feedback. Please try again.",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleClose = () => {
+    if (!isSubmitting) {
+      setFeedback("");
+      onClose();
+    }
+  };
+
+  return (
+    <Drawer open={isOpen} onOpenChange={handleClose}>
+      <DrawerContent>
+        <div className="mx-auto w-full max-w-md">
+          <DrawerHeader>
+            <DrawerTitle className="flex items-center gap-2">
+              <MessageSquare className="h-5 w-5" />
+              Send Feedback
+            </DrawerTitle>
+            <DrawerDescription>
+              Help us improve by sharing your thoughts and suggestions
+            </DrawerDescription>
+          </DrawerHeader>
+
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              void handleSubmit(e);
+            }}
+            className="p-4 pb-0 space-y-4"
+          >
+            <div className="space-y-2">
+              <Label htmlFor="feedback">Your Feedback</Label>
+              <Textarea
+                id="feedback"
+                value={feedback}
+                onChange={(e) => {
+                  setFeedback(e.target.value);
+                }}
+                placeholder="Tell us what you think, what features you'd like to see, or report any issues..."
+                rows={6}
+                className="resize-none"
+                disabled={isSubmitting}
+                maxLength={1000}
+                required
+              />
+              <p className="text-xs text-muted-foreground">
+                {feedback.length}/1000 characters (minimum 10 characters)
+              </p>
+            </div>
+            <DrawerFooter>
+              <div className="flex gap-2">
+                <DrawerClose asChild>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    disabled={isSubmitting}
+                  >
+                    Cancel
+                  </Button>
+                </DrawerClose>
+                <Button
+                  type="submit"
+                  disabled={
+                    !feedback.trim() ||
+                    feedback.trim().length < 10 ||
+                    isSubmitting
+                  }
+                  className="flex-1"
+                >
+                  {isSubmitting ? (
+                    "Sending..."
+                  ) : (
+                    <>
+                      <Send className="h-4 w-4 mr-2" />
+                      Send Feedback
+                    </>
+                  )}
+                </Button>
+              </div>
+            </DrawerFooter>
+          </form>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}

package/components/ux/FireAnimation.tsx

@@ -0,0 +1,189 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+import { cn } from "../../lib/utils";
+
+interface FireAnimationProps {
+  /** Productivity score used to determine fire intensity (0-3: ember, 4-7: small, 8-12: medium, 13+: large) */
+  score: number;
+  /** Additional CSS classes to apply */
+  className?: string;
+}
+
+type FireIntensity = "ember" | "small" | "medium" | "large";
+
+/**
+ * FireAnimation component displays an animated fire visualization based on a productivity score.
+ * The fire intensity scales with the score, providing visual feedback for achievement levels.
+ * Uses SVG animations for smooth, performant rendering.
+ *
+ * Score tiers:
+ * - 0-3: Ember (minimal fire, 2 flames)
+ * - 4-7: Small Fire (moderate fire, 3 flames)
+ * - 8-12: Medium Fire (good fire, 4 flames)
+ * - 13+: Large Fire (impressive fire, 5 flames)
+ *
+ * @example
+ * ```tsx
+ * import { FireAnimation } from "@shared/components/ux/FireAnimation"
+ * import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@shared/components/ui/dialog"
+ *
+ * // In a completion modal
+ * function SessionCompleteModal({ score }: { score: number }) {
+ *   return (
+ *     <Dialog open={true}>
+ *       <DialogContent>
+ *         <DialogHeader>
+ *           <DialogTitle>Session Complete!</DialogTitle>
+ *         </DialogHeader>
+ *         <div className="flex flex-col items-center py-4">
+ *           <FireAnimation score={score} className="text-orange-500" />
+ *           <p className="mt-2 text-sm">Your productivity score: {score}</p>
+ *         </div>
+ *       </DialogContent>
+ *     </Dialog>
+ *   )
+ * }
+ *
+ * // Calculate score and display
+ * function ProductivityDisplay({ tasksCompleted, tasksCreated, keystrokes }: Props) {
+ *   const score = tasksCompleted * 2 + tasksCreated * 1 + Math.floor(keystrokes / 100)
+ *
+ *   return (
+ *     <div className="text-center">
+ *       <FireAnimation score={score} className="text-red-500 dark:text-orange-400" />
+ *       <p className="mt-2 text-lg font-bold">Score: {score}</p>
+ *     </div>
+ *   )
+ * }
+ *
+ * // With custom styling
+ * function CustomFireDisplay({ score }: { score: number }) {
+ *   return (
+ *     <div className="bg-gradient-to-b from-transparent to-orange-50 dark:to-orange-950 p-8 rounded-lg">
+ *       <FireAnimation
+ *         score={score}
+ *         className="text-orange-600 dark:text-orange-400"
+ *       />
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export function FireAnimation({ score, className }: FireAnimationProps) {
+  const getIntensity = (score: number): FireIntensity => {
+    if (score <= 3) return "ember";
+    if (score <= 7) return "small";
+    if (score <= 12) return "medium";
+    return "large";
+  };
+
+  const intensity = getIntensity(score);
+
+  const intensityConfig = {
+    ember: {
+      flames: 2,
+      height: "h-8",
+      opacity: "opacity-40",
+      scale: "scale-75",
+    },
+    small: {
+      flames: 3,
+      height: "h-12",
+      opacity: "opacity-60",
+      scale: "scale-90",
+    },
+    medium: {
+      flames: 4,
+      height: "h-16",
+      opacity: "opacity-80",
+      scale: "scale-100",
+    },
+    large: {
+      flames: 5,
+      height: "h-20",
+      opacity: "opacity-100",
+      scale: "scale-110",
+    },
+  };
+
+  const config = intensityConfig[intensity];
+
+  return (
+    <div
+      className={cn(
+        "relative inline-flex items-end justify-center",
+        config.height,
+        className
+      )}
+      aria-label={`Fire animation: ${intensity} intensity (score: ${String(score)})`}
+    >
+      <svg
+        viewBox="0 0 100 100"
+        className={cn("w-full h-full", config.scale)}
+        preserveAspectRatio="xMidYMid meet"
+      >
+        {Array.from({ length: config.flames }).map((_, i) => {
+          const delay = i * 0.15;
+          const offset = (i - (config.flames - 1) / 2) * 20;
+          const baseHeight = 30 + (i % 2) * 10;
+          const baseWidth = 15 + (i % 2) * 5;
+
+          return (
+            <g key={i} transform={`translate(${String(50 + offset)}, 80)`}>
+              <path
+                d={`M 0 0 Q ${String(baseWidth / 2)} -${String(baseHeight * 0.3)} ${String(
+                  baseWidth / 2
+                )} -${String(baseHeight * 0.6)} T ${String(baseWidth / 2)} -${String(
+                  baseHeight
+                )} Q ${String(baseWidth / 2)} -${String(baseHeight * 0.9)} ${String(
+                  baseWidth / 2
+                )} -${String(baseHeight * 0.7)} T 0 0`}
+                fill="currentColor"
+                className={cn(config.opacity, "animate-fire-flicker")}
+                style={{
+                  animationDelay: `${String(delay)}s`,
+                  transformOrigin: `${String(baseWidth / 2)}px ${String(baseHeight)}px`,
+                }}
+              >
+                <animate
+                  attributeName="d"
+                  values={`M 0 0 Q ${String(baseWidth / 2)} -${String(baseHeight * 0.3)} ${String(
+                    baseWidth / 2
+                  )} -${String(baseHeight * 0.6)} T ${String(baseWidth / 2)} -${String(
+                    baseHeight
+                  )} Q ${String(baseWidth / 2)} -${String(baseHeight * 0.9)} ${String(
+                    baseWidth / 2
+                  )} -${String(baseHeight * 0.7)} T 0 0;
+                          M 0 0 Q ${String(baseWidth / 3)} -${String(baseHeight * 0.35)} ${String(
+                            baseWidth / 2
+                          )} -${String(baseHeight * 0.65)} T ${String(baseWidth / 2)} -${String(
+                            baseHeight
+                          )} Q ${String(baseWidth / 2)} -${String(baseHeight * 0.85)} ${String(
+                            baseWidth / 2
+                          )} -${String(baseHeight * 0.75)} T 0 0;
+                          M 0 0 Q ${String(baseWidth / 2.5)} -${String(baseHeight * 0.32)} ${String(
+                            baseWidth / 2
+                          )} -${String(baseHeight * 0.58)} T ${String(baseWidth / 2)} -${String(
+                            baseHeight
+                          )} Q ${String(baseWidth / 2)} -${String(baseHeight * 0.92)} ${String(
+                            baseWidth / 2
+                          )} -${String(baseHeight * 0.68)} T 0 0;
+                          M 0 0 Q ${String(baseWidth / 2)} -${String(baseHeight * 0.3)} ${String(
+                            baseWidth / 2
+                          )} -${String(baseHeight * 0.6)} T ${String(baseWidth / 2)} -${String(
+                            baseHeight
+                          )} Q ${String(baseWidth / 2)} -${String(baseHeight * 0.9)} ${String(
+                            baseWidth / 2
+                          )} -${String(baseHeight * 0.7)} T 0 0`}
+                  dur="1.5s"
+                  repeatCount="indefinite"
+                />
+              </path>
+            </g>
+          );
+        })}
+      </svg>
+    </div>
+  );
+}

package/components/ux/FriendList.tsx

@@ -0,0 +1,111 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+/** @jsxImportSource react */
+import { Button } from "../ui/button.tsx";
+import { X } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.tsx";
+import type { BaseUser } from "../../types/user.ts";
+
+export interface Friend extends BaseUser {
+  status: "pending" | "accepted";
+  presence?: number;
+}
+
+export interface FriendListProps {
+  friends: Friend[];
+  onRemove: (friendId: string) => void;
+  showPresence?: boolean;
+  emptyMessage?: string;
+  title?: string;
+}
+
+export function FriendList({
+  friends,
+  onRemove,
+  showPresence,
+  emptyMessage,
+  title,
+}: FriendListProps) {
+  if (friends.length === 0) {
+    return (
+      <div className="space-y-2">
+        {title && <h3 className="font-medium">{title}</h3>}
+        <p className="text-sm text-muted-foreground">{emptyMessage}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {title && <h3 className="font-medium">{title}</h3>}
+      <div className="space-y-2 max-h-[400px] overflow-y-auto">
+        {friends.map((friend) => (
+          <div
+            key={friend.id}
+            className="flex items-center justify-between p-3 border rounded-lg"
+          >
+            <div className="flex items-center gap-3 flex-1 min-w-0">
+              {friend.profilePicture && (
+                <div className="relative flex-shrink-0">
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <img
+                        src={friend.profilePicture}
+                        alt={friend.displayName}
+                        className="w-10 h-10 rounded-full object-cover"
+                      />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{friend.displayName}</p>
+                      {friend.email && (
+                        <p className="text-xs text-muted-foreground">
+                          {friend.email}
+                        </p>
+                      )}
+                      {friend.status === "pending" && (
+                        <p className="text-xs text-yellow-600">Pending</p>
+                      )}
+                    </TooltipContent>
+                  </Tooltip>
+                  {showPresence && friend.presence !== undefined && (
+                    <div
+                      className={`absolute bottom-0 right-0 w-3 h-3 rounded-full border-2 border-background ${
+                        friend.presence > 0 ? "bg-green-500" : "bg-gray-400"
+                      }`}
+                      title={friend.presence > 0 ? "Online" : "Offline"}
+                    />
+                  )}
+                </div>
+              )}
+              <div className="flex-1 min-w-0">
+                <div className="font-medium truncate">{friend.displayName}</div>
+                {friend.email && (
+                  <div className="text-sm text-muted-foreground truncate">
+                    {friend.email}
+                  </div>
+                )}
+                {friend.status === "pending" && (
+                  <div className="text-xs text-yellow-600 mt-1">Pending</div>
+                )}
+              </div>
+            </div>
+            <div className="ml-4 flex-shrink-0">
+              <Button
+                type="button"
+                variant="destructive"
+                size="sm"
+                onClick={() => {
+                  onRemove(friend.id);
+                }}
+                className="h-8 w-8 p-0"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}