@weirdfingers/baseboards 0.9.6 → 0.9.7

package/templates/web/src/app/lineage/[generationId]/page.tsx

@@ -1,235 +0,0 @@
-"use client";
-
-import React from "react";
-import { useParams, useRouter } from "next/navigation";
-import { useLineage, type AncestryNode, type DescendantNode } from "@weirdfingers/boards";
-import { Card } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { ArrowLeft, Loader2 } from "lucide-react";
-
-export default function LineageExplorerPage() {
-  const params = useParams();
-  const router = useRouter();
-  const generationId = params.generationId as string;
-
-  const { ancestry, descendants, loading, error } = useLineage(generationId, {
-    maxDepth: 10,
-  });
-
-  if (loading) {
-    return (
-      <div className="container mx-auto p-6 flex items-center justify-center min-h-screen">
-        <div className="flex items-center gap-2">
-          <Loader2 className="h-6 w-6 animate-spin" />
-          <span>Loading lineage...</span>
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="container mx-auto p-6">
-        <Card className="p-6 border-red-500">
-          <h2 className="text-xl font-bold text-red-600 mb-2">Error</h2>
-          <p className="text-red-600">{error.message}</p>
-          <Button
-            onClick={() => router.back()}
-            variant="outline"
-            className="mt-4"
-          >
-            <ArrowLeft className="mr-2 h-4 w-4" />
-            Go Back
-          </Button>
-        </Card>
-      </div>
-    );
-  }
-
-  return (
-    <div className="container mx-auto p-6">
-      <div className="mb-6">
-        <Button
-          onClick={() => router.back()}
-          variant="outline"
-          className="mb-4"
-        >
-          <ArrowLeft className="mr-2 h-4 w-4" />
-          Back
-        </Button>
-        <h1 className="text-3xl font-bold">Artifact Lineage Explorer</h1>
-        <p className="text-muted-foreground mt-2">
-          Explore the ancestry and descendants of generation {generationId}
-        </p>
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* Ancestry Section */}
-        <Card className="p-6">
-          <h2 className="text-2xl font-bold mb-4">Ancestry</h2>
-          <p className="text-muted-foreground mb-4">
-            Shows all parent generations that contributed to this artifact
-          </p>
-          {ancestry ? (
-            <AncestryTree node={ancestry} currentGenerationId={generationId} />
-          ) : (
-            <p className="text-muted-foreground">No ancestry data available</p>
-          )}
-        </Card>
-
-        {/* Descendants Section */}
-        <Card className="p-6">
-          <h2 className="text-2xl font-bold mb-4">Descendants</h2>
-          <p className="text-muted-foreground mb-4">
-            Shows all child generations that used this artifact as input
-          </p>
-          {descendants ? (
-            <DescendantTree node={descendants} currentGenerationId={generationId} />
-          ) : (
-            <p className="text-muted-foreground">
-              No descendants data available
-            </p>
-          )}
-        </Card>
-      </div>
-    </div>
-  );
-}
-
-interface AncestryTreeProps {
-  node: AncestryNode;
-  currentGenerationId: string;
-}
-
-function AncestryTree({ node, currentGenerationId }: AncestryTreeProps) {
-  const router = useRouter();
-  const isCurrentGeneration = node.generation.id === currentGenerationId;
-
-  return (
-    <div className="space-y-2">
-      <div
-        className={`p-3 rounded-lg border ${
-          isCurrentGeneration
-            ? "bg-primary/10 border-primary"
-            : "bg-card hover:bg-accent cursor-pointer"
-        }`}
-        onClick={() => {
-          if (!isCurrentGeneration) {
-            router.push(`/lineage/${node.generation.id}`);
-          }
-        }}
-      >
-        <div className="flex items-start justify-between">
-          <div className="flex-1">
-            <div className="flex items-center gap-2">
-              <span className="font-mono text-sm text-muted-foreground">
-                Depth: {node.depth}
-              </span>
-              {node.role && (
-                <span className="px-2 py-0.5 text-xs rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300">
-                  {node.role}
-                </span>
-              )}
-            </div>
-            <p className="font-semibold mt-1">{node.generation.generatorName}</p>
-            <p className="text-sm text-muted-foreground">
-              {node.generation.artifactType} • {node.generation.status}
-            </p>
-            <p className="text-xs text-muted-foreground font-mono mt-1">
-              {node.generation.id.slice(0, 8)}...
-            </p>
-          </div>
-          {node.generation.thumbnailUrl && (
-            // eslint-disable-next-line @next/next/no-img-element
-            <img
-              src={node.generation.thumbnailUrl}
-              alt="Thumbnail"
-              className="w-16 h-16 object-cover rounded"
-            />
-          )}
-        </div>
-      </div>
-
-      {node.parents && node.parents.length > 0 && (
-        <div className="ml-6 pl-4 border-l-2 border-muted space-y-2">
-          {node.parents.map((parent, idx) => (
-            <AncestryTree
-              key={`${parent.generation.id}-${idx}`}
-              node={parent}
-              currentGenerationId={currentGenerationId}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-interface DescendantTreeProps {
-  node: DescendantNode;
-  currentGenerationId: string;
-}
-
-function DescendantTree({ node, currentGenerationId }: DescendantTreeProps) {
-  const router = useRouter();
-  const isCurrentGeneration = node.generation.id === currentGenerationId;
-
-  return (
-    <div className="space-y-2">
-      <div
-        className={`p-3 rounded-lg border ${
-          isCurrentGeneration
-            ? "bg-primary/10 border-primary"
-            : "bg-card hover:bg-accent cursor-pointer"
-        }`}
-        onClick={() => {
-          if (!isCurrentGeneration) {
-            router.push(`/lineage/${node.generation.id}`);
-          }
-        }}
-      >
-        <div className="flex items-start justify-between">
-          <div className="flex-1">
-            <div className="flex items-center gap-2">
-              <span className="font-mono text-sm text-muted-foreground">
-                Depth: {node.depth}
-              </span>
-              {node.role && (
-                <span className="px-2 py-0.5 text-xs rounded-full bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300">
-                  {node.role}
-                </span>
-              )}
-            </div>
-            <p className="font-semibold mt-1">{node.generation.generatorName}</p>
-            <p className="text-sm text-muted-foreground">
-              {node.generation.artifactType} • {node.generation.status}
-            </p>
-            <p className="text-xs text-muted-foreground font-mono mt-1">
-              {node.generation.id.slice(0, 8)}...
-            </p>
-          </div>
-          {node.generation.thumbnailUrl && (
-            // eslint-disable-next-line @next/next/no-img-element
-            <img
-              src={node.generation.thumbnailUrl}
-              alt="Thumbnail"
-              className="w-16 h-16 object-cover rounded"
-            />
-          )}
-        </div>
-      </div>
-
-      {node.children && node.children.length > 0 && (
-        <div className="ml-6 pl-4 border-l-2 border-muted space-y-2">
-          {node.children.map((child, idx) => (
-            <DescendantTree
-              key={`${child.generation.id}-${idx}`}
-              node={child}
-              currentGenerationId={currentGenerationId}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

package/templates/web/src/app/page.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import { useBoards } from "@weirdfingers/boards";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import Link from "next/link";
-
-export default function Home() {
-  const { boards, createBoard } = useBoards();
-
-  return (
-    <main className="container mx-auto p-4">
-      <div className="flex justify-between items-center mb-4">
-        <h1 className="text-2xl font-bold">Boards</h1>
-        <Button onClick={() => createBoard({ title: "New Board" })}>
-          Create Board
-        </Button>
-      </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {boards.map((board) => (
-          <Link href={`/boards/${board.id}`} key={board.id}>
-            <Card>
-              <CardHeader>
-                <CardTitle>{board.title}</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p>{board.description || "No description"}</p>
-              </CardContent>
-            </Card>
-          </Link>
-        ))}
-      </div>
-    </main>
-  );
-}

package/templates/web/src/app/providers.tsx

@@ -1,18 +0,0 @@
-"use client";
-
-import React from "react";
-import { BoardsProvider, NoAuthProvider } from "@weirdfingers/boards";
-
-export function Providers({ children }: { children: React.ReactNode }) {
-  const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8088";
-
-  return (
-    <BoardsProvider
-      authProvider={new NoAuthProvider()}
-      apiUrl={apiUrl}
-      // graphqlUrl will default to `${apiUrl}/graphql`
-    >
-      {children}
-    </BoardsProvider>
-  );
-}

package/templates/web/src/components/boards/ArtifactInputSlots.tsx

@@ -1,206 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { FileVideo, Volume2, X } from "lucide-react";
-import Image from "next/image";
-
-interface Generation {
-  id: string;
-  artifactType: string;
-  storageUrl?: string | null;
-  thumbnailUrl?: string | null;
-}
-
-interface ArtifactSlot {
-  name: string;
-  type: string; // "audio", "video", "image", etc.
-  required: boolean;
-}
-
-interface ArtifactInputSlotsProps {
-  slots: ArtifactSlot[];
-  selectedArtifacts: Map<string, Generation>;
-  availableArtifacts: Generation[];
-  onSelectArtifact: (slotName: string, artifact: Generation | null) => void;
-}
-
-export function ArtifactInputSlots({
-  slots,
-  selectedArtifacts,
-  availableArtifacts,
-  onSelectArtifact,
-}: ArtifactInputSlotsProps) {
-  const [dragOverSlot, setDragOverSlot] = useState<string | null>(null);
-
-  const getIcon = (type: string) => {
-    switch (type.toLowerCase()) {
-      case "video":
-        return <FileVideo className="w-5 h-5" />;
-      case "audio":
-        return <Volume2 className="w-5 h-5" />;
-      default:
-        return <FileVideo className="w-5 h-5" />;
-    }
-  };
-
-  const getFilteredArtifacts = (slotType: string) => {
-    return availableArtifacts.filter(
-      (artifact) =>
-        artifact.artifactType.toLowerCase() === slotType.toLowerCase()
-    );
-  };
-
-  const handleDragOver = (
-    e: React.DragEvent,
-    slotType: string,
-    slotName: string
-  ) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    // Check if the dragged artifact type matches the slot type
-    try {
-      const data = e.dataTransfer.types.includes("application/json");
-      if (data) {
-        e.dataTransfer.dropEffect = "copy";
-        setDragOverSlot(slotName);
-      }
-    } catch {
-      // Ignore errors during drag over
-    }
-  };
-
-  const handleDragLeave = (e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDragOverSlot(null);
-  };
-
-  const handleDrop = (
-    e: React.DragEvent,
-    slotType: string,
-    slotName: string
-  ) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDragOverSlot(null);
-
-    try {
-      const jsonData = e.dataTransfer.getData("application/json");
-      if (jsonData) {
-        const artifact = JSON.parse(jsonData) as Generation;
-
-        // Check if artifact type matches slot type
-        if (artifact.artifactType.toLowerCase() === slotType.toLowerCase()) {
-          onSelectArtifact(slotName, artifact);
-        }
-      }
-    } catch (err) {
-      console.error("Error handling drop:", err);
-    }
-  };
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-      {slots.map((slot) => {
-        const selectedArtifact = selectedArtifacts.get(slot.name);
-        const matchingArtifacts = getFilteredArtifacts(slot.type);
-
-        return (
-          <div key={slot.name} className="relative">
-            {selectedArtifact ? (
-              // Show selected artifact
-              <div className="border-2 border-primary rounded-lg p-4 bg-primary/5">
-                <div className="flex items-start gap-3">
-                  <div className="flex-shrink-0">
-                    {selectedArtifact.thumbnailUrl ||
-                    selectedArtifact.storageUrl ? (
-                      <Image
-                        src={
-                          selectedArtifact.thumbnailUrl ||
-                          selectedArtifact.storageUrl ||
-                          ""
-                        }
-                        alt={`${slot.type} preview`}
-                        className="w-16 h-16 object-cover rounded"
-                        width={64}
-                        height={64}
-                      />
-                    ) : (
-                      <div className="w-16 h-16 bg-muted rounded flex items-center justify-center">
-                        {getIcon(slot.type)}
-                      </div>
-                    )}
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2">
-                      {getIcon(slot.type)}
-                      <span className="font-medium text-sm capitalize">
-                        {slot.type} {selectedArtifact.id.substring(0, 7)}
-                      </span>
-                    </div>
-                    <p className="text-xs text-muted-foreground mt-1">
-                      {slot.name.replace(/_/g, " ")}
-                    </p>
-                  </div>
-                  <button
-                    onClick={() => onSelectArtifact(slot.name, null)}
-                    className="flex-shrink-0 p-1 hover:bg-primary/10 rounded"
-                  >
-                    <X className="w-4 h-4" />
-                  </button>
-                </div>
-              </div>
-            ) : (
-              // Show slot placeholder
-              <div
-                className={`border-2 border-dashed rounded-lg p-6 transition-all ${
-                  dragOverSlot === slot.name
-                    ? "border-primary bg-primary/5"
-                    : "border-border hover:border-border/80"
-                }`}
-                onDragOver={(e) => handleDragOver(e, slot.type, slot.name)}
-                onDragLeave={handleDragLeave}
-                onDrop={(e) => handleDrop(e, slot.type, slot.name)}
-              >
-                <div className="flex flex-col items-center justify-center text-center">
-                  <div className="mb-2">{getIcon(slot.type)}</div>
-                  <p className="text-sm font-medium text-foreground mb-1">
-                    {dragOverSlot === slot.name
-                      ? `Drop ${slot.type} here`
-                      : `Add a ${slot.type}`}
-                  </p>
-                  {matchingArtifacts.length > 0 ? (
-                    <select
-                      onChange={(e) => {
-                        const artifact = matchingArtifacts.find(
-                          (a) => a.id === e.target.value
-                        );
-                        if (artifact) {
-                          onSelectArtifact(slot.name, artifact);
-                        }
-                      }}
-                      className="mt-2 px-3 py-1.5 text-sm border border-border rounded bg-background"
-                    >
-                      <option value="">Select from board...</option>
-                      {matchingArtifacts.map((artifact) => (
-                        <option key={artifact.id} value={artifact.id}>
-                          {artifact.artifactType} -{" "}
-                          {artifact.id.substring(0, 8)}
-                        </option>
-                      ))}
-                    </select>
-                  ) : (
-                    <p className="text-xs text-muted-foreground mt-1">
-                      No {slot.type} artifacts in this board yet.
-                    </p>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}