@almadar/cli 1.0.6 → 1.0.7

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

@@ -1,216 +0,0 @@
-/**
- * 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

@@ -1,140 +0,0 @@
-/**
- * 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

@@ -1,221 +0,0 @@
-/**
- * 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

@@ -1,15 +0,0 @@
-/**
- * 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';