@weirdfingers/baseboards 0.2.0

package/templates/web/src/app/globals.css

@@ -0,0 +1,120 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+import "./globals.css";
+import { Providers } from "./providers";
+import { Header } from "@/components/header";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <Providers>
+          <Header />
+          {children}
+        </Providers>
+      </body>
+    </html>
+  );
+}

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

@@ -0,0 +1,35 @@
+"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

@@ -0,0 +1,18 @@
+"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

@@ -0,0 +1,142 @@
+"use client";
+
+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 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()
+    );
+  };
+
+  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-yellow-500 rounded-lg p-4 bg-yellow-50">
+                <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-gray-200 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-gray-600 mt-1">
+                      {slot.name.replace(/_/g, " ")}
+                    </p>
+                  </div>
+                  <button
+                    onClick={() => onSelectArtifact(slot.name, null)}
+                    className="flex-shrink-0 p-1 hover:bg-yellow-200 rounded"
+                  >
+                    <X className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            ) : (
+              // Show slot placeholder
+              <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 hover:border-gray-400 transition-colors">
+                <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-gray-700 mb-1">
+                    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-gray-300 rounded bg-white"
+                    >
+                      <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-gray-500 mt-1">
+                      No {slot.type} artifacts in this board yet
+                    </p>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,125 @@
+import { FileVideo, Volume2, FileText, Image as ImageIcon } from "lucide-react";
+import Image from "next/image";
+
+interface ArtifactPreviewProps {
+  artifactType: string;
+  storageUrl?: string | null;
+  thumbnailUrl?: string | null;
+  status: string;
+  errorMessage?: string | null;
+  onClick?: () => void;
+}
+
+export function ArtifactPreview({
+  artifactType,
+  storageUrl,
+  thumbnailUrl,
+  status,
+  errorMessage,
+  onClick,
+}: ArtifactPreviewProps) {
+  const isLoading = status === "PENDING" || status === "PROCESSING";
+  const isFailed = status === "FAILED" || status === "CANCELLED";
+
+  // Determine which URL to use for preview
+  const previewUrl = thumbnailUrl || storageUrl;
+
+  const renderContent = () => {
+    if (isFailed) {
+      return (
+        <div className="flex flex-col items-center justify-center h-full p-4 text-center">
+          <div className="text-red-500 mb-2">
+            {status === "CANCELLED" ? "Cancelled" : "Failed"}
+          </div>
+          {errorMessage && (
+            <p className="text-sm text-gray-500">{errorMessage}</p>
+          )}
+        </div>
+      );
+    }
+
+    if (isLoading) {
+      return (
+        <div className="flex items-center justify-center h-full">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+        </div>
+      );
+    }
+
+    switch (artifactType) {
+      case "IMAGE":
+        if (previewUrl) {
+          return (
+            <Image
+              src={previewUrl}
+              alt="Generated image"
+              className="w-full h-full object-cover"
+              width={512}
+              height={512}
+            />
+          );
+        }
+        return (
+          <div className="flex items-center justify-center h-full bg-gray-100">
+            <ImageIcon className="w-12 h-12 text-gray-400" />
+          </div>
+        );
+
+      case "VIDEO":
+        return (
+          <div className="relative w-full h-full">
+            {previewUrl ? (
+              <Image
+                src={previewUrl}
+                alt="Video thumbnail"
+                className="w-full h-full object-cover"
+                width={512}
+                height={512}
+              />
+            ) : (
+              <div className="flex items-center justify-center h-full bg-gray-100">
+                <FileVideo className="w-12 h-12 text-gray-400" />
+              </div>
+            )}
+            <div className="absolute top-2 left-2 bg-black/50 rounded p-1">
+              <FileVideo className="w-5 h-5 text-white" />
+            </div>
+          </div>
+        );
+
+      case "AUDIO":
+        return (
+          <div className="flex flex-col items-center justify-center h-full bg-gradient-to-br from-blue-900 to-blue-700">
+            <Volume2 className="w-12 h-12 text-white mb-2" />
+            <span className="text-white text-sm">Audio file</span>
+          </div>
+        );
+
+      case "TEXT":
+        return (
+          <div className="flex flex-col items-center justify-center h-full bg-gradient-to-br from-gray-700 to-gray-900">
+            <FileText className="w-12 h-12 text-white mb-2" />
+            <span className="text-white text-sm">Text</span>
+          </div>
+        );
+
+      default:
+        return (
+          <div className="flex items-center justify-center h-full bg-gray-100">
+            <span className="text-gray-400">Unknown type</span>
+          </div>
+        );
+    }
+  };
+
+  return (
+    <div
+      className={`relative aspect-square rounded-lg overflow-hidden border border-gray-200 ${
+        onClick ? "cursor-pointer hover:opacity-80 transition-opacity" : ""
+      }`}
+      onClick={onClick}
+    >
+      {renderContent()}
+    </div>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { ArtifactPreview } from "./ArtifactPreview";
+
+interface Generation {
+  id: string;
+  artifactType: string;
+  storageUrl?: string | null;
+  thumbnailUrl?: string | null;
+  status: string;
+  errorMessage?: string | null;
+  createdAt: string;
+}
+
+interface GenerationGridProps {
+  generations: Generation[];
+  onGenerationClick?: (generation: Generation) => void;
+}
+
+export function GenerationGrid({
+  generations,
+  onGenerationClick,
+}: GenerationGridProps) {
+  if (generations.length === 0) {
+    return (
+      <div className="flex items-center justify-center py-12 text-gray-500">
+        <p>No generations yet. Create your first one below!</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      {generations.map((generation) => (
+        <ArtifactPreview
+          key={generation.id}
+          artifactType={generation.artifactType}
+          storageUrl={generation.storageUrl}
+          thumbnailUrl={generation.thumbnailUrl}
+          status={generation.status}
+          errorMessage={generation.errorMessage}
+          onClick={() => onGenerationClick?.(generation)}
+        />
+      ))}
+    </div>
+  );
+}