@almadar/cli 0.3.1 → 0.3.3

package/shells/typescript-shell/packages/client/src/clients/winning-11/atoms/GrowthMeter.tsx

@@ -0,0 +1,216 @@
+/**
+ * GrowthMeter
+ *
+ * Progress indicator showing relationship growth stage.
+ * Visual feedback for relationship growth - reinforces garden metaphor.
+ *
+ * Maps to RelationshipHealth.visualMetaphor:
+ * - seedling, sprout, sapling, tree, flowering
+ *
+ * Event Contract:
+ * - Emits: UI:GROWTH_CLICK (optional) - when clicked
+ * - Payload: { visualMetaphor, growthPoints, entity }
+ */
+
+import React, { useCallback } from "react";
+import { cn } from "../../../lib/cn";
+import { Sprout, Leaf, TreeDeciduous, Flower2 } from "lucide-react";
+import { useEventBus } from "../../../hooks/useEventBus";
+import { Box } from "../../../components/atoms/Box";
+import { HStack, VStack } from "../../../components/atoms/Stack";
+import { Typography } from "../../../components/atoms/Typography";
+
+/** Visual metaphor values from RelationshipHealth entity */
+export type VisualMetaphor =
+  | "seedling"
+  | "sprout"
+  | "sapling"
+  | "tree"
+  | "flowering";
+
+export interface GrowthMeterProps {
+  /** Visual metaphor from RelationshipHealth entity */
+  visualMetaphor?: VisualMetaphor;
+  /** Growth points from RelationshipHealth entity (0-100+) */
+  growthPoints?: number;
+  /** Legacy: Growth progress 0-100 (maps to growthPoints) */
+  progress?: number;
+  /** Growth stage labels */
+  stages?: string[];
+  /** Show current stage name */
+  showStageLabel?: boolean;
+  /** Animate progress changes */
+  animated?: boolean;
+  /** Size variant */
+  size?: "sm" | "md" | "lg";
+  /** Entity context for event payload */
+  entity?: string;
+  /** Event to emit on click */
+  event?: string;
+  /** Click handler callback */
+  onClick?: () => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const defaultStages = ["Seedling", "Sprout", "Sapling", "Tree", "Flowering"];
+
+// Map visualMetaphor to index
+const metaphorToIndex: Record<VisualMetaphor, number> = {
+  seedling: 0,
+  sprout: 1,
+  sapling: 2,
+  tree: 3,
+  flowering: 4,
+};
+
+const stageConfig = [
+  { icon: Sprout, color: "text-lime-400", bgColor: "bg-lime-100" },
+  { icon: Leaf, color: "text-lime-500", bgColor: "bg-lime-200" },
+  { icon: TreeDeciduous, color: "text-emerald-500", bgColor: "bg-emerald-200" },
+  { icon: TreeDeciduous, color: "text-emerald-600", bgColor: "bg-emerald-300" },
+  { icon: Flower2, color: "text-pink-500", bgColor: "bg-pink-200" },
+];
+
+const sizeConfig = {
+  sm: {
+    icon: "h-4 w-4",
+    text: "text-xs",
+    bar: "h-2",
+    stageIcon: "h-3 w-3",
+    gap: "sm" as const,
+  },
+  md: {
+    icon: "h-5 w-5",
+    text: "text-sm",
+    bar: "h-3",
+    stageIcon: "h-4 w-4",
+    gap: "sm" as const,
+  },
+  lg: {
+    icon: "h-6 w-6",
+    text: "text-base",
+    bar: "h-4",
+    stageIcon: "h-5 w-5",
+    gap: "md" as const,
+  },
+};
+
+export const GrowthMeter: React.FC<GrowthMeterProps> = ({
+  visualMetaphor,
+  growthPoints,
+  progress,
+  stages = defaultStages,
+  showStageLabel = true,
+  animated = true,
+  size = "md",
+  entity,
+  event,
+  onClick,
+  className,
+}) => {
+  const eventBus = useEventBus();
+
+  // Normalize progress: use growthPoints if available, else progress
+  // Map to 0-100 scale (cap at 100 for display)
+  const normalizedProgress = Math.min(100, growthPoints ?? progress ?? 0);
+
+  // Determine stage index from visualMetaphor or calculate from progress
+  let stageIndex: number;
+  if (visualMetaphor) {
+    stageIndex = metaphorToIndex[visualMetaphor];
+  } else {
+    // Calculate from progress (5 stages: 0-20, 20-40, 40-60, 60-80, 80-100)
+    stageIndex = Math.min(4, Math.floor(normalizedProgress / 20));
+  }
+
+  const currentStage = stages[stageIndex] || defaultStages[stageIndex];
+  const config = stageConfig[stageIndex] || stageConfig[0];
+  const sizes = sizeConfig[size];
+  const Icon = config.icon;
+
+  const isClickable = !!(event || onClick);
+
+  // Handle click
+  const handleClick = useCallback(() => {
+    if (event) {
+      eventBus.emit(`UI:${event}`, {
+        visualMetaphor,
+        growthPoints: normalizedProgress,
+        entity,
+      });
+    }
+    onClick?.();
+  }, [event, eventBus, visualMetaphor, normalizedProgress, entity, onClick]);
+
+  return (
+    <VStack
+      gap={sizes.gap}
+      className={cn(isClickable && "cursor-pointer", className)}
+      onClick={isClickable ? handleClick : undefined}
+    >
+      {/* Stage icon and label */}
+      <HStack gap="sm" align="center">
+        <Box rounded="full" padding="xs" className={config.bgColor}>
+          <Icon className={cn(sizes.icon, config.color)} />
+        </Box>
+        {showStageLabel && (
+          <Typography
+            variant="label"
+            className={cn(sizes.text, "font-medium text-neutral-700")}
+          >
+            {currentStage}
+          </Typography>
+        )}
+        <Typography
+          variant="label"
+          className={cn("ml-auto font-bold", sizes.text, config.color)}
+        >
+          {normalizedProgress}%
+        </Typography>
+      </HStack>
+
+      {/* Progress bar with stage markers */}
+      <Box position="relative">
+        <Box rounded="full" className={cn("w-full bg-neutral-200", sizes.bar)}>
+          <Box
+            rounded="full"
+            className={cn(
+              "bg-gradient-to-r from-lime-400 via-emerald-500 to-pink-500",
+              sizes.bar,
+              animated && "transition-all duration-700 ease-out",
+            )}
+            style={{ width: `${normalizedProgress}%` }}
+          />
+        </Box>
+
+        {/* Stage markers */}
+        <HStack
+          justify="between"
+          className="absolute top-full mt-1 w-full px-0.5"
+        >
+          {stages.map((stage, idx) => {
+            const StageIcon = stageConfig[idx]?.icon || Sprout;
+            const isActive = idx <= stageIndex;
+            return (
+              <VStack
+                key={stage}
+                align="center"
+                className={cn(isActive ? "opacity-100" : "opacity-40")}
+              >
+                <StageIcon
+                  className={cn(
+                    sizes.stageIcon,
+                    isActive ? stageConfig[idx]?.color : "text-neutral-400",
+                  )}
+                />
+              </VStack>
+            );
+          })}
+        </HStack>
+      </Box>
+    </VStack>
+  );
+};
+
+GrowthMeter.displayName = "GrowthMeter";

package/shells/typescript-shell/packages/client/src/clients/winning-11/atoms/SeasonIndicator.tsx

@@ -0,0 +1,140 @@
+/**
+ * SeasonIndicator
+ *
+ * Shows current season/phase in the agricultural cycle.
+ * Contextualizes actions within agricultural seasons.
+ */
+
+import React from "react";
+import { cn } from "../../../lib/cn";
+import { Sprout, Sun, Wheat, Snowflake } from "lucide-react";
+import { Box } from "../../../components/atoms/Box";
+import { HStack } from "../../../components/atoms/Stack";
+import { Typography } from "../../../components/atoms/Typography";
+
+export type SeasonPhase = "planting" | "growing" | "harvest" | "rest";
+
+export interface SeasonIndicatorProps {
+  /** Current season */
+  season: SeasonPhase;
+  /** Progress through season (0-100) */
+  progress?: number;
+  /** Show season label */
+  showLabel?: boolean;
+  /** Size variant */
+  size?: "sm" | "md" | "lg";
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const seasonConfig = {
+  planting: {
+    icon: Sprout,
+    label: "Planting Season",
+    color: "text-lime-600",
+    bgColor: "bg-lime-100",
+    borderColor: "border-lime-300",
+    gradientFrom: "from-lime-400",
+    gradientTo: "to-lime-600",
+  },
+  growing: {
+    icon: Sun,
+    label: "Growing Season",
+    color: "text-amber-600",
+    bgColor: "bg-amber-100",
+    borderColor: "border-amber-300",
+    gradientFrom: "from-amber-400",
+    gradientTo: "to-amber-600",
+  },
+  harvest: {
+    icon: Wheat,
+    label: "Harvest Season",
+    color: "text-orange-600",
+    bgColor: "bg-orange-100",
+    borderColor: "border-orange-300",
+    gradientFrom: "from-orange-400",
+    gradientTo: "to-orange-600",
+  },
+  rest: {
+    icon: Snowflake,
+    label: "Rest Season",
+    color: "text-blue-600",
+    bgColor: "bg-blue-100",
+    borderColor: "border-blue-300",
+    gradientFrom: "from-blue-400",
+    gradientTo: "to-blue-600",
+  },
+};
+
+const sizeConfig = {
+  sm: {
+    gap: "xs" as const,
+    icon: "h-3.5 w-3.5",
+    text: "text-xs",
+    progress: "h-1 w-12",
+  },
+  md: {
+    gap: "sm" as const,
+    icon: "h-4 w-4",
+    text: "text-sm",
+    progress: "h-1.5 w-16",
+  },
+  lg: {
+    gap: "sm" as const,
+    icon: "h-5 w-5",
+    text: "text-base",
+    progress: "h-2 w-20",
+  },
+};
+
+export const SeasonIndicator: React.FC<SeasonIndicatorProps> = ({
+  season,
+  progress,
+  showLabel = true,
+  size = "md",
+  className,
+}) => {
+  const config = seasonConfig[season];
+  const sizes = sizeConfig[size];
+  const Icon = config.icon;
+
+  return (
+    <HStack
+      gap={sizes.gap}
+      align="center"
+      className={cn(
+        "inline-flex rounded-full border px-3 py-1.5",
+        config.bgColor,
+        config.borderColor,
+        className,
+      )}
+    >
+      <Icon className={cn(sizes.icon, config.color)} />
+
+      {showLabel && (
+        <Typography
+          variant="label"
+          className={cn(sizes.text, "font-medium", config.color)}
+        >
+          {config.label}
+        </Typography>
+      )}
+
+      {progress !== undefined && (
+        <Box rounded="full" className={cn("bg-white/50", sizes.progress)}>
+          <Box
+            rounded="full"
+            className={cn(
+              "h-full bg-gradient-to-r transition-all duration-500",
+              config.gradientFrom,
+              config.gradientTo,
+            )}
+            style={{ width: `${Math.max(0, Math.min(100, progress))}%` }}
+          />
+        </Box>
+      )}
+    </HStack>
+  );
+};
+
+SeasonIndicator.displayName = "SeasonIndicator";

package/shells/typescript-shell/packages/client/src/clients/winning-11/atoms/TrustMeter.tsx

@@ -0,0 +1,221 @@
+/**
+ * TrustMeter
+ *
+ * Visual indicator for trust level between connections.
+ * Core UI for visualizing trust - the main value prop of Winning-11.
+ *
+ * Maps to RelationshipHealth.healthStatus:
+ * - thriving, healthy, declining, withering
+ *
+ * Event Contract:
+ * - Emits: UI:TRUST_CLICK (optional) - when clickable and clicked
+ * - Payload: { healthStatus, growthPoints, entity }
+ */
+
+import React, { useCallback } from "react";
+import { cn } from "../../../lib/cn";
+import { Shield, ShieldCheck, ShieldAlert, Award } from "lucide-react";
+import { useEventBus } from "../../../hooks/useEventBus";
+import { Box } from "../../../components/atoms/Box";
+import { HStack, VStack } from "../../../components/atoms/Stack";
+import { Typography } from "../../../components/atoms/Typography";
+
+/** Health status values from RelationshipHealth entity */
+export type HealthStatus = "thriving" | "healthy" | "declining" | "withering";
+
+/** Legacy level type for backwards compatibility */
+export type TrustLevel = "low" | "medium" | "high" | "verified";
+
+export interface TrustMeterProps {
+  /** Health status from RelationshipHealth entity */
+  healthStatus?: HealthStatus;
+  /** Legacy: Trust level (maps to healthStatus) */
+  level?: TrustLevel;
+  /** Growth points from RelationshipHealth entity */
+  growthPoints?: number;
+  /** Numeric trust score (0-100) - legacy */
+  score?: number;
+  /** Show text label */
+  showLabel?: boolean;
+  /** Size variant */
+  size?: "sm" | "md" | "lg";
+  /** Additional CSS classes */
+  className?: string;
+  /** Entity context for event payload */
+  entity?: string;
+  /** Event to emit on click (enables clickable mode) */
+  event?: string;
+  /** Click handler callback */
+  onClick?: () => void;
+}
+
+// Map healthStatus to display config
+const healthStatusConfig: Record<
+  HealthStatus,
+  {
+    icon: typeof Shield;
+    color: string;
+    bgColor: string;
+    borderColor: string;
+    label: string;
+    barColor: string;
+    defaultScore: number;
+  }
+> = {
+  withering: {
+    icon: ShieldAlert,
+    color: "text-red-500",
+    bgColor: "bg-red-50",
+    borderColor: "border-red-200",
+    label: "Needs Attention",
+    barColor: "bg-red-500",
+    defaultScore: 20,
+  },
+  declining: {
+    icon: Shield,
+    color: "text-amber-500",
+    bgColor: "bg-amber-50",
+    borderColor: "border-amber-200",
+    label: "Declining",
+    barColor: "bg-amber-500",
+    defaultScore: 45,
+  },
+  healthy: {
+    icon: ShieldCheck,
+    color: "text-emerald-500",
+    bgColor: "bg-emerald-50",
+    borderColor: "border-emerald-200",
+    label: "Healthy",
+    barColor: "bg-emerald-500",
+    defaultScore: 75,
+  },
+  thriving: {
+    icon: Award,
+    color: "text-blue-600",
+    bgColor: "bg-blue-50",
+    borderColor: "border-blue-200",
+    label: "Thriving",
+    barColor: "bg-blue-600",
+    defaultScore: 95,
+  },
+};
+
+// Map legacy level to healthStatus
+const levelToHealthStatus: Record<TrustLevel, HealthStatus> = {
+  low: "withering",
+  medium: "declining",
+  high: "healthy",
+  verified: "thriving",
+};
+
+const sizeConfig = {
+  sm: { icon: "h-4 w-4", text: "text-xs", bar: "h-1", gap: "xs" as const },
+  md: { icon: "h-5 w-5", text: "text-sm", bar: "h-1.5", gap: "sm" as const },
+  lg: { icon: "h-6 w-6", text: "text-base", bar: "h-2", gap: "sm" as const },
+};
+
+export const TrustMeter: React.FC<TrustMeterProps> = ({
+  healthStatus,
+  level,
+  growthPoints,
+  score,
+  showLabel = true,
+  size = "md",
+  className,
+  entity,
+  event,
+  onClick,
+}) => {
+  const eventBus = useEventBus();
+
+  // Normalize healthStatus: prefer healthStatus, fall back to level mapping
+  const normalizedStatus: HealthStatus =
+    healthStatus ?? (level ? levelToHealthStatus[level] : "healthy");
+
+  const config = healthStatusConfig[normalizedStatus];
+  const sizes = sizeConfig[size];
+  const Icon = config.icon;
+
+  // Calculate display score: use growthPoints, score, or default
+  const displayScore = growthPoints ?? score ?? config.defaultScore;
+
+  const isClickable = !!(event || onClick);
+
+  // Handle click - emit event and/or call callback
+  const handleClick = useCallback(() => {
+    if (event) {
+      eventBus.emit(`UI:${event}`, {
+        healthStatus: normalizedStatus,
+        growthPoints: displayScore,
+        entity,
+      });
+    }
+    onClick?.();
+  }, [event, eventBus, normalizedStatus, displayScore, entity, onClick]);
+
+  return (
+    <HStack
+      gap={sizes.gap}
+      align="center"
+      className={cn(
+        isClickable && "cursor-pointer hover:opacity-80 transition-opacity",
+        className,
+      )}
+      onClick={isClickable ? handleClick : undefined}
+      role={isClickable ? "button" : undefined}
+      tabIndex={isClickable ? 0 : undefined}
+      onKeyDown={
+        isClickable
+          ? (e: React.KeyboardEvent) => e.key === "Enter" && handleClick()
+          : undefined
+      }
+    >
+      <Box
+        display="flex"
+        rounded="full"
+        padding="xs"
+        border
+        className={cn(
+          "items-center justify-center",
+          config.bgColor,
+          config.borderColor,
+        )}
+      >
+        <Icon className={cn(sizes.icon, config.color)} />
+      </Box>
+
+      <VStack gap="none">
+        {showLabel && (
+          <Typography
+            variant="label"
+            className={cn(sizes.text, "font-medium text-neutral-700")}
+          >
+            {config.label}
+          </Typography>
+        )}
+
+        <HStack gap="sm" align="center">
+          <Box rounded="full" className={cn("w-16 bg-neutral-200", sizes.bar)}>
+            <Box
+              rounded="full"
+              className={cn(
+                "transition-all duration-500",
+                sizes.bar,
+                config.barColor,
+              )}
+              style={{ width: `${Math.min(100, displayScore)}%` }}
+            />
+          </Box>
+          <Typography
+            variant="small"
+            className={cn("font-medium", config.color)}
+          >
+            {displayScore}
+          </Typography>
+        </HStack>
+      </VStack>
+    </HStack>
+  );
+};
+
+TrustMeter.displayName = "TrustMeter";

package/shells/typescript-shell/packages/client/src/clients/winning-11/atoms/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Winning-11 Client Atoms
+ */
+
+export { TrustMeter } from './TrustMeter';
+export type { TrustMeterProps } from './TrustMeter';
+
+export { GrowthMeter } from './GrowthMeter';
+export type { GrowthMeterProps } from './GrowthMeter';
+
+export { CareIndicator } from './CareIndicator';
+export type { CareIndicatorProps } from './CareIndicator';
+
+export { SeasonIndicator } from './SeasonIndicator';
+export type { SeasonIndicatorProps } from './SeasonIndicator';