pxengine 0.1.11 → 0.1.13

package/src/molecules/creator-discovery/SearchSpecCard/CustomFieldRenderers.tsx

@@ -1,334 +0,0 @@
-import { useState, useRef, useEffect } from "react";
-import { ChevronDown, Check } from "lucide-react";
-import { countries } from "@/lib/countries";
-import { Badge } from "@/components";
-import { cn } from "@/lib/utils";
-
-// ============================================================================
-// COUNTRY SELECT FIELD
-// ============================================================================
-
-export const CountrySelectEdit = ({
-  value,
-  onChange,
-}: {
-  value: any;
-  onChange: (value: any) => void;
-}) => {
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [searchTerm, setSearchTerm] = useState("");
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsDropdownOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  const inputValue = Array.isArray(value) ? value : [];
-
-  return (
-    <div className="space-y-3">
-      <div className="relative" ref={dropdownRef}>
-        <div
-          className="flex-1 bg-white border border-gray200 rounded-md px-3 py-2 text-sm cursor-pointer flex items-center justify-between font-medium hover:border-purple500 transition-colors"
-          onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-        >
-          <span className="text-gray-700">
-            {inputValue.length > 0
-              ? `${inputValue.length} ${inputValue.length === 1 ? "country" : "countries"} selected`
-              : "Select countries..."}
-          </span>
-          <ChevronDown
-            className={cn(
-              "h-4 w-4 text-gray-400 transition-transform",
-              isDropdownOpen && "rotate-180",
-            )}
-          />
-        </div>
-
-        {isDropdownOpen && (
-          <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-gray200 rounded-lg shadow-xl z-50 max-h-60 overflow-hidden animate-in fade-in slide-in-from-top-1">
-            <div className="p-2 border-b border-gray-100">
-              <input
-                type="text"
-                placeholder="Search countries..."
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                className="w-full px-3 py-1.5 text-sm border border-gray-100 rounded-md bg-gray-50 focus:outline-none focus:ring-2 focus:ring-purple500/20 focus:border-purple500"
-                onClick={(e) => e.stopPropagation()}
-              />
-            </div>
-
-            <div className="max-h-40 overflow-y-auto p-1">
-              {countries
-                .filter(
-                  (country) =>
-                    country.name
-                      .toLowerCase()
-                      .includes(searchTerm.toLowerCase()) ||
-                    country.code
-                      .toLowerCase()
-                      .includes(searchTerm.toLowerCase()),
-                )
-                .map((country) => (
-                  <div
-                    key={country.code}
-                    className={cn(
-                      "flex items-center justify-between px-3 py-2 rounded-md hover:bg-purple50 cursor-pointer transition-colors",
-                      inputValue.includes(country.code) && "bg-purple50/50",
-                    )}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      const currentGeography = inputValue;
-                      if (currentGeography.includes(country.code)) {
-                        onChange(
-                          currentGeography.filter(
-                            (c: string) => c !== country.code,
-                          ),
-                        );
-                      } else {
-                        onChange([...currentGeography, country.code]);
-                      }
-                    }}
-                  >
-                    <div className="flex items-center gap-2">
-                      <span className="text-sm text-gray-700">
-                        {country.name}
-                      </span>
-                      <span className="text-xs text-gray-400 font-mono">
-                        {country.code}
-                      </span>
-                    </div>
-                    {inputValue.includes(country.code) && (
-                      <Check className="h-4 w-4 text-purple500" />
-                    )}
-                  </div>
-                ))}
-            </div>
-          </div>
-        )}
-      </div>
-
-      {inputValue.length > 0 && (
-        <div className="flex flex-wrap gap-1.5">
-          {inputValue.map((countryCode: string) => (
-            <Badge
-              key={countryCode}
-              variant="secondary"
-              className="bg-purple50 text-purple700 border-purple100 hover:bg-purple100 cursor-default flex items-center gap-1 pr-1"
-            >
-              {countryCode}
-              <button
-                onClick={() =>
-                  onChange(inputValue.filter((c: string) => c !== countryCode))
-                }
-                className="hover:bg-purple200 rounded-full p-0.5 transition-colors"
-              >
-                <ChevronDown className="h-3 w-3 rotate-45" />{" "}
-                {/* Close icon substitute */}
-              </button>
-            </Badge>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export const CountrySelectDisplay = ({ value }: { value: any }) => {
-  if (!value || !Array.isArray(value) || value.length === 0) {
-    return <span className="text-muted-foreground italic">Not specified</span>;
-  }
-
-  return (
-    <div className="flex flex-wrap gap-1.5">
-      {value.map((countryCode: string) => (
-        <Badge
-          key={countryCode}
-          variant="outline"
-          className="bg-gray-50 text-gray-700 border-gray-200"
-        >
-          {countryCode}
-        </Badge>
-      ))}
-    </div>
-  );
-};
-
-// ============================================================================
-// KEYWORD BUNDLES FIELD
-// ============================================================================
-
-export const KeywordBundlesEdit = ({
-  value,
-  onChange,
-}: {
-  value: any;
-  onChange: (value: any) => void;
-}) => {
-  const bundles = Array.isArray(value) ? value : [];
-
-  const groups: { [priority: number]: { bundle: any; index: number }[] } = {};
-  bundles.forEach((b: any, idx: number) => {
-    const p = Number(b?.priority) || 1;
-    if (!groups[p]) groups[p] = [];
-    groups[p].push({ bundle: b, index: idx });
-  });
-
-  const sortedPriorities = Object.keys(groups)
-    .map((n) => parseInt(n))
-    .sort((a, b) => a - b);
-
-  return (
-    <div className="space-y-6 pt-2">
-      {sortedPriorities.map((priority) => (
-        <div key={priority} className="space-y-3">
-          <div className="flex items-center gap-2">
-            <Badge className="bg-purple500 hover:bg-purple500">
-              Priority {priority}
-            </Badge>
-            <div className="h-px flex-1 bg-gray-100" />
-          </div>
-          {groups[priority].map(({ bundle, index: bundleIndex }) => (
-            <div
-              key={bundleIndex}
-              className="bg-gray-50/50 border border-gray-100 rounded-xl p-4 transition-all hover:bg-gray-50 hover:border-gray-200 shadow-sm"
-            >
-              <div className="flex flex-col gap-3">
-                <label className="text-[10px] font-bold text-gray-400 uppercase tracking-widest pl-1">
-                  Keywords
-                </label>
-                <div className="space-y-3">
-                  <div className="flex flex-wrap gap-1.5">
-                    {Array.isArray(bundle.keywords) &&
-                      bundle.keywords.map((keyword: string, kIndex: number) => (
-                        <Badge
-                          key={kIndex}
-                          className="bg-white border-gray-200 text-gray-700 hover:bg-red-50 hover:text-red-600 hover:border-red-100 transition-all cursor-pointer group"
-                          onClick={() => {
-                            const updatedBundles = [...bundles];
-                            updatedBundles[bundleIndex] = {
-                              ...bundle,
-                              keywords: bundle.keywords.filter(
-                                (_: string, i: number) => i !== kIndex,
-                              ),
-                            };
-                            onChange(updatedBundles);
-                          }}
-                        >
-                          {keyword}
-                          <span className="ml-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                            ×
-                          </span>
-                        </Badge>
-                      ))}
-                  </div>
-                  <div className="flex gap-2">
-                    <input
-                      type="text"
-                      placeholder="Add keyword..."
-                      className="flex-1 px-3 py-1.5 text-sm border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500"
-                      onKeyPress={(e) => {
-                        if (e.key === "Enter") {
-                          const input = e.target as HTMLInputElement;
-                          const val = input.value.trim();
-                          if (val) {
-                            const updatedBundles = [...bundles];
-                            updatedBundles[bundleIndex] = {
-                              ...bundle,
-                              keywords: [...(bundle.keywords || []), val],
-                            };
-                            onChange(updatedBundles);
-                            input.value = "";
-                          }
-                        }
-                      }}
-                    />
-                  </div>
-                </div>
-                <div className="flex flex-col gap-1.5 mt-1">
-                  <label className="text-[10px] font-bold text-gray-400 uppercase tracking-widest pl-1">
-                    Priority Level (1-5)
-                  </label>
-                  <input
-                    type="number"
-                    min="1"
-                    max="5"
-                    value={bundle.priority || 1}
-                    onChange={(e) => {
-                      const updatedBundles = [...bundles];
-                      updatedBundles[bundleIndex] = {
-                        ...bundle,
-                        priority: parseInt(e.target.value) || 1,
-                      };
-                      onChange(updatedBundles);
-                    }}
-                    className="w-20 px-3 py-1.5 text-sm border border-gray-200 rounded-md bg-white focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 outline-none"
-                  />
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export const KeywordBundlesDisplay = ({ value }: { value: any }) => {
-  const bundles = Array.isArray(value) ? value : [];
-  if (bundles.length === 0)
-    return <span className="text-muted-foreground italic">Not specified</span>;
-
-  const groups: { [priority: number]: string[] } = {};
-  bundles.forEach((b: any) => {
-    const p = Number(b?.priority) || 1;
-    const keywords = Array.isArray(b?.keywords) ? b.keywords : [];
-    if (!groups[p]) groups[p] = [];
-    groups[p].push(...keywords);
-  });
-
-  const sortedPriorities = Object.keys(groups)
-    .map((n) => parseInt(n))
-    .sort((a, b) => a - b);
-
-  return (
-    <div className="space-y-4 pt-1">
-      {sortedPriorities.map((priority) => {
-        const deduped = Array.from(new Set(groups[priority]));
-        return (
-          <div key={priority} className="space-y-2">
-            <div className="flex items-center gap-2">
-              <Badge
-                variant="outline"
-                className="text-[10px] uppercase tracking-wider text-purple600 border-purple100 bg-purple50/30"
-              >
-                Priority {priority}
-              </Badge>
-              <div className="h-px flex-1 bg-gray-100/50" />
-            </div>
-            <div className="flex flex-wrap gap-1.5">
-              {deduped.map((keyword: string) => (
-                <Badge
-                  key={keyword}
-                  variant="secondary"
-                  className="bg-white border-gray-200 text-gray-700 font-medium"
-                >
-                  {keyword}
-                </Badge>
-              ))}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-};

package/src/molecules/creator-discovery/SearchSpecCard/SearchSpecCard.tsx

@@ -1,111 +0,0 @@
-import React from "react";
-import { SearchSpecCardProps } from "./SearchSpecCard.types";
-import { FormCard } from "../../generic/FormCard";
-import { FieldConfig } from "@/types/common";
-import {
-  CountrySelectEdit,
-  CountrySelectDisplay,
-  KeywordBundlesEdit,
-  KeywordBundlesDisplay,
-} from "./CustomFieldRenderers";
-import { CheckCircle2 } from "lucide-react";
-
-/**
- * Default field configuration for Search Specification
- */
-export const SEARCH_SPEC_FIELDS: FieldConfig[] = [
-  {
-    key: "platforms",
-    label: "Platforms",
-    type: "select", // Changed to select for simplicity in form, or custom if multi-select needed
-    placeholder: "Select platforms",
-    options: ["Instagram", "YouTube", "TikTok"],
-  },
-  {
-    key: "follower_range",
-    label: "Follower Range",
-    type: "slider",
-    placeholder: "Not specified",
-    sliderConfig: {
-      min: 0,
-      max: 5000000,
-      step: 10000,
-      formatValue: (value: any) => {
-        if (!value || typeof value !== "object") return "0 - 2.5M followers";
-        const formatNum = (n: number) => {
-          if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M`;
-          if (n >= 1000) return `${(n / 1000).toFixed(0)}K`;
-          return n.toLocaleString();
-        };
-        return `${formatNum(value.min || 0)} - ${formatNum(value.max || 2500000)} followers`;
-      },
-    },
-  },
-  {
-    key: "geography",
-    label: "Geography",
-    type: "custom",
-    renderEdit: (value, onChange) => (
-      <CountrySelectEdit value={value} onChange={onChange} />
-    ),
-    renderDisplay: (value) => <CountrySelectDisplay value={value} />,
-  },
-  {
-    key: "keyword_bundles",
-    label: "Keyword Bundles",
-    type: "custom",
-    renderEdit: (value, onChange) => (
-      <KeywordBundlesEdit value={value} onChange={onChange} />
-    ),
-    renderDisplay: (value) => <KeywordBundlesDisplay value={value} />,
-  },
-  {
-    key: "desired_candidate_count",
-    label: "Initial Creators",
-    type: "number",
-    numberConfig: {
-      min: 1,
-      formatValue: (value: any) => `${value || 0} creators`,
-    },
-  },
-];
-
-/**
- * SearchSpecCard
- *
- * A domain-specific molecule for the Creator Discovery workflow.
- * Encapsulates search settings like platforms, ranges, and custom keyword bundles.
- */
-export const SearchSpecCard = React.memo<SearchSpecCardProps>(
-  ({
-    selectionStatus,
-    isLatestMessage = true,
-    className,
-    ...formCardProps
-  }) => {
-    return (
-      <FormCard
-        {...formCardProps}
-        title={formCardProps.title || "Creator Search Settings"}
-        fields={SEARCH_SPEC_FIELDS}
-        className={className}
-        footer={
-          !isLatestMessage && selectionStatus ? (
-            <div className="flex justify-end items-center gap-1.5 text-green-600 text-xs font-semibold py-1">
-              <CheckCircle2 className="h-4 w-4" />
-              <span>
-                {selectionStatus === "agent"
-                  ? "Selected by Agent"
-                  : "Selected by User"}
-              </span>
-            </div>
-          ) : (
-            formCardProps.footer
-          )
-        }
-      />
-    );
-  },
-);
-
-SearchSpecCard.displayName = "SearchSpecCard";

package/src/molecules/creator-discovery/SearchSpecCard/SearchSpecCard.types.ts

@@ -1,18 +0,0 @@
-import { FormCardProps } from "../../generic/FormCard";
-
-export interface SearchSpecCardProps extends Omit<FormCardProps, "fields"> {
-  /**
-   * Version of the search specification
-   */
-  version?: number;
-  
-  /**
-   * Status of the selection
-   */
-  selectionStatus?: "user" | "agent";
-  
-  /**
-   * Whether the message is the latest
-   */
-  isLatestMessage?: boolean;
-}

package/src/molecules/creator-discovery/SearchSpecCard/index.ts

@@ -1,3 +0,0 @@
-export * from "./SearchSpecCard";
-export * from "./SearchSpecCard.types";
-export * from "./CustomFieldRenderers";

package/src/molecules/creator-discovery/TopPostsGrid/TopPostsGrid.tsx

@@ -1,49 +0,0 @@
-import React from "react";
-import { TopPostsGridMolecule } from "../../../types/molecules";
-import { cn } from "@/lib/utils";
-import { Heart, MessageCircle, BarChart3 } from "lucide-react";
-
-/**
- * TopPostsGrid
- * Displays a grid of the creator's best-performing content pieces.
- */
-export const TopPostsGrid: React.FC<TopPostsGridMolecule> = ({
-  posts,
-  className,
-}) => {
-  return (
-    <div
-      className={cn(
-        "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
-        className,
-      )}
-    >
-      {posts.map((post, i) => (
-        <div
-          key={i}
-          className="group relative aspect-square overflow-hidden rounded-2xl bg-gray-100 border border-purple-50"
-        >
-          <img
-            src={post.thumbnail}
-            alt={`Post ${i}`}
-            className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
-          />
-          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity p-4 flex flex-col justify-end">
-            <div className="flex items-center gap-4 text-white text-xs font-bold">
-              <span className="flex items-center gap-1">
-                <Heart className="w-3 h-3 fill-white" /> {post.likes}
-              </span>
-              <span className="flex items-center gap-1">
-                <MessageCircle className="w-3 h-3 fill-white" /> {post.comments}
-              </span>
-              <span className="flex items-center gap-1">
-                <BarChart3 className="w-3 h-3" /> {post.engagement}
-              </span>
-            </div>
-            <span className="text-[10px] text-gray-300 mt-2">{post.date}</span>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};

package/src/molecules/creator-discovery/TopPostsGrid/index.ts

@@ -1 +0,0 @@
-export * from "./TopPostsGrid";

package/src/molecules/creator-discovery/index.ts

@@ -1,13 +0,0 @@
-export * from "./CampaignSeedCard";
-export * from "./SearchSpecCard";
-export * from "./MCQCard";
-export * from "./PlatformIconGroup";
-export * from "./CreatorProfileSummary";
-export * from "./AudienceMetricCard";
-export * from "./CreatorGridCard";
-export * from "./BrandAffinityGroup";
-export * from "./ContentPreviewGallery";
-export * from "./AudienceDemographicsCard";
-export * from "./GrowthChartCard";
-export * from "./TopPostsGrid";
-export * from "./CreatorActionHeader";

package/src/molecules/generic/ActionButton/ActionButton.tsx

@@ -1,137 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { ActionButtonProps } from "./ActionButton.types";
-import { Button } from "@/components";
-import { cn } from "@/lib/utils";
-import { Pause, Play, ArrowRight, Loader2 } from "lucide-react";
-
-/**
- * ActionButton
- *
- * A powerful button molecule that supports:
- * - Auto-countdown for agent workflows
- * - Pause/Resume toggle
- * - Loading and Disabled states
- * - Custom themes
- */
-export const ActionButton = React.memo<ActionButtonProps>(
-  ({
-    label,
-    secondaryLabel,
-    countdown: countdownProp,
-    isPaused = false,
-    onPause,
-    onProceed,
-    variant = "default",
-    size = "default",
-    disabled = false,
-    isLoading = false,
-    className,
-    showCountdown = true,
-  }) => {
-    const [timeLeft, setTimeLeft] = useState(countdownProp || 0);
-
-    // Sync with prop
-    useEffect(() => {
-      if (countdownProp !== undefined) {
-        setTimeLeft(countdownProp);
-      }
-    }, [countdownProp]);
-
-    // Countdown logic
-    useEffect(() => {
-      if (
-        countdownProp === undefined ||
-        countdownProp <= 0 ||
-        isPaused ||
-        isLoading ||
-        disabled
-      ) {
-        return;
-      }
-
-      const timer = setInterval(() => {
-        setTimeLeft((prev) => {
-          if (prev <= 1) {
-            clearInterval(timer);
-            onProceed();
-            return 0;
-          }
-          return prev - 1;
-        });
-      }, 1000);
-
-      return () => clearInterval(timer);
-    }, [countdownProp, isPaused, isLoading, disabled, onProceed]);
-
-    const progress = countdownProp ? (timeLeft / countdownProp) * 100 : 0;
-
-    return (
-      <div className={cn("inline-flex items-center gap-2", className)}>
-        <Button
-          variant={variant}
-          size={size}
-          disabled={disabled || isLoading}
-          onClick={onProceed}
-          className={cn(
-            "relative min-w-[140px] overflow-hidden group transition-all duration-300",
-            "bg-purple500 hover:bg-purple600 text-white font-semibold rounded-full px-6 py-2.5 shadow-md hover:shadow-lg",
-            variant === "outline" &&
-              "bg-transparent border-purple500 text-purple500 hover:bg-purple50",
-            isLoading && "opacity-80",
-          )}
-        >
-          <div className="relative z-10 flex items-center justify-center gap-2">
-            {isLoading ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <>
-                <span>{label}</span>
-                {showCountdown &&
-                  countdownProp &&
-                  countdownProp > 0 &&
-                  !isLoading && (
-                    <span className="opacity-70 text-xs bg-white/20 px-1.5 py-0.5 rounded-md tabular-nums min-w-[24px]">
-                      {timeLeft}s
-                    </span>
-                  )}
-                <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
-              </>
-            )}
-          </div>
-
-          {/* Progress Background Overlay (Optional) */}
-          {!isPaused && countdownProp && countdownProp > 0 && (
-            <div
-              className="absolute bottom-0 left-0 h-0.5 bg-white/30 transition-all duration-1000 ease-linear"
-              style={{ width: `${progress}%` }}
-            />
-          )}
-        </Button>
-
-        {countdownProp !== undefined && countdownProp > 0 && onPause && (
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={onPause}
-            className="h-10 w-10 rounded-full hover:bg-gray200 text-gray600"
-            title={isPaused ? "Resume auto-proceed" : "Pause auto-proceed"}
-          >
-            {isPaused ? (
-              <Play className="h-4 w-4 fill-current" />
-            ) : (
-              <Pause className="h-4 w-4 fill-current" />
-            )}
-          </Button>
-        )}
-
-        {secondaryLabel && (
-          <span className="text-sm text-gray-500 font-medium italic">
-            {secondaryLabel}
-          </span>
-        )}
-      </div>
-    );
-  },
-);
-
-ActionButton.displayName = "ActionButton";