create-appraisejs 0.1.6 → 0.1.8-alpha

package/templates/default/src/app/api/test-runs/[runId]/trace/[testCaseId]/route.ts

@@ -1,146 +1,146 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { promises as fs } from 'fs'
-import { taskSpawner } from '@/tests/utils/spawner.util'
-import prisma from '@/config/db-config'
-import path from 'path'
-
-// Ensure this route runs in Node.js runtime (not Edge) for singleton to work
-export const runtime = 'nodejs'
-
-/**
- * GET handler for checking if trace viewer is running
- *
- * This endpoint checks if a trace viewer process is currently running for a test case.
- */
-export async function GET(
-  request: NextRequest,
-  { params }: { params: Promise<{ runId: string; testCaseId: string }> },
-) {
-  const { runId, testCaseId } = await params
-
-  try {
-    // Verify test run exists
-    const testRun = await prisma.testRun.findUnique({
-      where: { runId },
-      include: {
-        testCases: {
-          where: { id: testCaseId },
-        },
-      },
-    })
-
-    if (!testRun) {
-      return NextResponse.json({ error: 'Test run not found' }, { status: 404 })
-    }
-
-    // Verify test case belongs to this test run
-    const testRunTestCase = testRun.testCases.find(tc => tc.id === testCaseId)
-    if (!testRunTestCase) {
-      return NextResponse.json({ error: 'Test case not found in this test run' }, { status: 404 })
-    }
-
-    // Check if trace viewer process is running
-    const processName = `trace-viewer-${testCaseId}`
-    const process = taskSpawner.getProcess(processName)
-    const isRunning = process?.isRunning ?? false
-
-    return NextResponse.json({
-      isRunning,
-      processName: isRunning ? processName : null,
-    })
-  } catch (error) {
-    console.error(`[TraceViewer] Error checking trace viewer status for runId: ${runId}, testCaseId: ${testCaseId}:`, error)
-    return NextResponse.json(
-      {
-        error: `Failed to check trace viewer status: ${error instanceof Error ? error.message : 'Unknown error'}`,
-      },
-      { status: 500 },
-    )
-  }
-}
-
-/**
- * POST handler for spawning Playwright trace viewer
- *
- * This endpoint spawns a process to open the Playwright trace viewer for a failed test scenario.
- * The process is self-closing and doesn't require cleanup.
- *
- * Security: Verifies test run and test case exist and belong together before allowing access.
- * TODO: Add user authentication check when authentication is implemented.
- */
-export async function POST(
-  request: NextRequest,
-  { params }: { params: Promise<{ runId: string; testCaseId: string }> },
-) {
-  const { runId, testCaseId } = await params
-
-  try {
-    // Verify test run exists
-    const testRun = await prisma.testRun.findUnique({
-      where: { runId },
-      include: {
-        testCases: {
-          where: { id: testCaseId },
-          include: {
-            testCase: true,
-          },
-        },
-      },
-    })
-
-    if (!testRun) {
-      return NextResponse.json({ error: 'Test run not found' }, { status: 404 })
-    }
-
-    // Verify test case belongs to this test run
-    const testRunTestCase = testRun.testCases.find(tc => tc.id === testCaseId)
-    if (!testRunTestCase) {
-      return NextResponse.json({ error: 'Test case not found in this test run' }, { status: 404 })
-    }
-
-    // Get trace path from database
-    const tracePath = testRunTestCase.tracePath
-    if (!tracePath) {
-      return NextResponse.json({ error: 'No trace path available for this test case' }, { status: 400 })
-    }
-
-    // Validate trace file exists
-    try {
-      await fs.access(tracePath)
-    } catch {
-      return NextResponse.json(
-        { error: `Trace file not found at path: ${tracePath}` },
-        { status: 404 },
-      )
-    }
-
-    // Resolve absolute path if relative
-    const absoluteTracePath = path.isAbsolute(tracePath) ? tracePath : path.join(process.cwd(), tracePath)
-
-    // Spawn playwright show-trace command
-    // The process is self-closing when the user closes the trace viewer
-    const spawnedProcess = await taskSpawner.spawn('npx', ['playwright', 'show-trace', absoluteTracePath], {
-      streamLogs: true,
-      prefixLogs: true,
-      logPrefix: `trace-viewer-${testCaseId}`,
-      captureOutput: false, // No need to capture output for trace viewer
-    })
-
-    console.log(`[TraceViewer] Spawned trace viewer process for testCaseId: ${testCaseId}, tracePath: ${absoluteTracePath}`)
-
-    return NextResponse.json({
-      success: true,
-      message: 'Trace viewer launched successfully',
-      processName: spawnedProcess.name,
-    })
-  } catch (error) {
-    console.error(`[TraceViewer] Error spawning trace viewer for runId: ${runId}, testCaseId: ${testCaseId}:`, error)
-    return NextResponse.json(
-      {
-        error: `Failed to spawn trace viewer: ${error instanceof Error ? error.message : 'Unknown error'}`,
-      },
-      { status: 500 },
-    )
-  }
-}
-
+import { NextRequest, NextResponse } from 'next/server'
+import { promises as fs } from 'fs'
+import { taskSpawner } from '@/tests/utils/spawner.util'
+import prisma from '@/config/db-config'
+import path from 'path'
+
+// Ensure this route runs in Node.js runtime (not Edge) for singleton to work
+export const runtime = 'nodejs'
+
+/**
+ * GET handler for checking if trace viewer is running
+ *
+ * This endpoint checks if a trace viewer process is currently running for a test case.
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ runId: string; testCaseId: string }> },
+) {
+  const { runId, testCaseId } = await params
+
+  try {
+    // Verify test run exists
+    const testRun = await prisma.testRun.findUnique({
+      where: { runId },
+      include: {
+        testCases: {
+          where: { id: testCaseId },
+        },
+      },
+    })
+
+    if (!testRun) {
+      return NextResponse.json({ error: 'Test run not found' }, { status: 404 })
+    }
+
+    // Verify test case belongs to this test run
+    const testRunTestCase = testRun.testCases.find(tc => tc.id === testCaseId)
+    if (!testRunTestCase) {
+      return NextResponse.json({ error: 'Test case not found in this test run' }, { status: 404 })
+    }
+
+    // Check if trace viewer process is running
+    const processName = `trace-viewer-${testCaseId}`
+    const process = taskSpawner.getProcess(processName)
+    const isRunning = process?.isRunning ?? false
+
+    return NextResponse.json({
+      isRunning,
+      processName: isRunning ? processName : null,
+    })
+  } catch (error) {
+    console.error(`[TraceViewer] Error checking trace viewer status for runId: ${runId}, testCaseId: ${testCaseId}:`, error)
+    return NextResponse.json(
+      {
+        error: `Failed to check trace viewer status: ${error instanceof Error ? error.message : 'Unknown error'}`,
+      },
+      { status: 500 },
+    )
+  }
+}
+
+/**
+ * POST handler for spawning Playwright trace viewer
+ *
+ * This endpoint spawns a process to open the Playwright trace viewer for a failed test scenario.
+ * The process is self-closing and doesn't require cleanup.
+ *
+ * Security: Verifies test run and test case exist and belong together before allowing access.
+ * TODO: Add user authentication check when authentication is implemented.
+ */
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ runId: string; testCaseId: string }> },
+) {
+  const { runId, testCaseId } = await params
+
+  try {
+    // Verify test run exists
+    const testRun = await prisma.testRun.findUnique({
+      where: { runId },
+      include: {
+        testCases: {
+          where: { id: testCaseId },
+          include: {
+            testCase: true,
+          },
+        },
+      },
+    })
+
+    if (!testRun) {
+      return NextResponse.json({ error: 'Test run not found' }, { status: 404 })
+    }
+
+    // Verify test case belongs to this test run
+    const testRunTestCase = testRun.testCases.find(tc => tc.id === testCaseId)
+    if (!testRunTestCase) {
+      return NextResponse.json({ error: 'Test case not found in this test run' }, { status: 404 })
+    }
+
+    // Get trace path from database
+    const tracePath = testRunTestCase.tracePath
+    if (!tracePath) {
+      return NextResponse.json({ error: 'No trace path available for this test case' }, { status: 400 })
+    }
+
+    // Validate trace file exists
+    try {
+      await fs.access(tracePath)
+    } catch {
+      return NextResponse.json(
+        { error: `Trace file not found at path: ${tracePath}` },
+        { status: 404 },
+      )
+    }
+
+    // Resolve absolute path if relative
+    const absoluteTracePath = path.isAbsolute(tracePath) ? tracePath : path.join(process.cwd(), tracePath)
+
+    // Spawn playwright show-trace command
+    // The process is self-closing when the user closes the trace viewer
+    const spawnedProcess = await taskSpawner.spawn('npx', ['playwright', 'show-trace', absoluteTracePath], {
+      streamLogs: true,
+      prefixLogs: true,
+      logPrefix: `trace-viewer-${testCaseId}`,
+      captureOutput: false, // No need to capture output for trace viewer
+    })
+
+    console.log(`[TraceViewer] Spawned trace viewer process for testCaseId: ${testCaseId}, tracePath: ${absoluteTracePath}`)
+
+    return NextResponse.json({
+      success: true,
+      message: 'Trace viewer launched successfully',
+      processName: spawnedProcess.name,
+    })
+  } catch (error) {
+    console.error(`[TraceViewer] Error spawning trace viewer for runId: ${runId}, testCaseId: ${testCaseId}:`, error)
+    return NextResponse.json(
+      {
+        error: `Failed to spawn trace viewer: ${error instanceof Error ? error.message : 'Unknown error'}`,
+      },
+      { status: 500 },
+    )
+  }
+}
+

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

@@ -1,147 +1,147 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-body {
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-@layer base {
-  :root {
-    --background: oklch(0.9751 0.0127 244.2507);
-    --foreground: oklch(0.3729 0.0306 259.7328);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.3729 0.0306 259.7328);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.3729 0.0306 259.7328);
-    --primary: oklch(0.5606 0.192 149.5793);
-    --primary-foreground: oklch(1 0 0);
-    --secondary: oklch(0.9514 0.025 236.8242);
-    --secondary-foreground: oklch(0.4461 0.0263 256.8018);
-    --muted: oklch(0.967 0.0029 264.5419);
-    --muted-foreground: oklch(0.551 0.0234 264.3637);
-    --accent: oklch(0.9505 0.0507 163.0508);
-    --accent-foreground: oklch(0.3729 0.0306 259.7328);
-    --destructive: oklch(0.6368 0.2078 25.3313);
-    --destructive-foreground: oklch(1 0 0);
-    --border: oklch(0.9276 0.0058 264.5313);
-    --input: oklch(0.9276 0.0058 264.5313);
-    --ring: oklch(0.7227 0.192 149.5793);
-    --chart-1: oklch(0.7227 0.192 149.5793);
-    --chart-2: oklch(0.6959 0.1491 162.4796);
-    --chart-3: oklch(0.596 0.1274 163.2254);
-    --chart-4: oklch(0.5081 0.1049 165.6121);
-    --chart-5: oklch(0.4318 0.0865 166.9128);
-    --sidebar: oklch(0.9514 0.025 236.8242);
-    --sidebar-foreground: oklch(0.3729 0.0306 259.7328);
-    --sidebar-primary: oklch(0.7227 0.192 149.5793);
-    --sidebar-primary-foreground: oklch(1 0 0);
-    --sidebar-accent: oklch(0.9505 0.0507 163.0508);
-    --sidebar-accent-foreground: oklch(0.3729 0.0306 259.7328);
-    --sidebar-border: oklch(0.9276 0.0058 264.5313);
-    --sidebar-ring: oklch(0.7227 0.192 149.5793);
-    --font-sans: DM Sans, sans-serif;
-    --font-serif: Lora, serif;
-    --font-mono: IBM Plex Mono, monospace;
-    --radius: 0.5rem;
-    --shadow-x: 0px;
-    --shadow-y: 4px;
-    --shadow-blur: 8px;
-    --shadow-spread: -1px;
-    --shadow-opacity: 0.1;
-    --shadow-color: hsl(0 0% 0%);
-    --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
-    --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
-    --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
-    --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
-    --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 2px 4px -2px hsl(0 0% 0% / 0.1);
-    --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 4px 6px -2px hsl(0 0% 0% / 0.1);
-    --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 8px 10px -2px hsl(0 0% 0% / 0.1);
-    --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
-    --tracking-normal: 0em;
-    --spacing: 0.25rem;
-    --shadow-offset-x: 0px;
-    --shadow-offset-y: 4px;
-    --letter-spacing: 0em;
-  }
-
-  .dark {
-    --background: oklch(0.2077 0.0398 265.7549);
-    --foreground: oklch(0.8717 0.0093 258.3382);
-    --card: oklch(0.2795 0.0368 260.031);
-    --card-foreground: oklch(0.8717 0.0093 258.3382);
-    --popover: oklch(0.2795 0.0368 260.031);
-    --popover-foreground: oklch(0.8717 0.0093 258.3382);
-    --primary: oklch(0.7729 0.1535 163.2231);
-    --primary-foreground: oklch(0.2077 0.0398 265.7549);
-    --secondary: oklch(0.3351 0.0331 260.912);
-    --secondary-foreground: oklch(0.7118 0.0129 286.0665);
-    --muted: oklch(0.2463 0.0275 259.9628);
-    --muted-foreground: oklch(0.551 0.0234 264.3637);
-    --accent: oklch(0.3729 0.0306 259.7328);
-    --accent-foreground: oklch(0.7118 0.0129 286.0665);
-    --destructive: oklch(0.6368 0.2078 25.3313);
-    --destructive-foreground: oklch(0.2077 0.0398 265.7549);
-    --border: oklch(0.4461 0.0263 256.8018);
-    --input: oklch(0.4461 0.0263 256.8018);
-    --ring: oklch(0.7729 0.1535 163.2231);
-    --chart-1: oklch(0.7729 0.1535 163.2231);
-    --chart-2: oklch(0.7845 0.1325 181.912);
-    --chart-3: oklch(0.7227 0.192 149.5793);
-    --chart-4: oklch(0.6959 0.1491 162.4796);
-    --chart-5: oklch(0.596 0.1274 163.2254);
-    --sidebar: oklch(0.2795 0.0368 260.031);
-    --sidebar-foreground: oklch(0.8717 0.0093 258.3382);
-    --sidebar-primary: oklch(0.7729 0.1535 163.2231);
-    --sidebar-primary-foreground: oklch(0.2077 0.0398 265.7549);
-    --sidebar-accent: oklch(0.3729 0.0306 259.7328);
-    --sidebar-accent-foreground: oklch(0.7118 0.0129 286.0665);
-    --sidebar-border: oklch(0.4461 0.0263 256.8018);
-    --sidebar-ring: oklch(0.7729 0.1535 163.2231);
-    --font-sans: DM Sans, sans-serif;
-    --font-serif: Lora, serif;
-    --font-mono: IBM Plex Mono, monospace;
-    --radius: 0.5rem;
-    --shadow-x: 0px;
-    --shadow-y: 4px;
-    --shadow-blur: 8px;
-    --shadow-spread: -1px;
-    --shadow-opacity: 0.1;
-    --shadow-color: hsl(0 0% 0%);
-    --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
-    --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
-    --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
-    --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
-    --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 2px 4px -2px hsl(0 0% 0% / 0.1);
-    --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 4px 6px -2px hsl(0 0% 0% / 0.1);
-    --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 8px 10px -2px hsl(0 0% 0% / 0.1);
-    --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
-    --shadow-offset-x: 0px;
-    --shadow-offset-y: 4px;
-    --letter-spacing: 0em;
-    --spacing: 0.25rem;
-  }
-  .theme {
-    --font-sans: DM Sans, sans-serif;
-    --font-mono: IBM Plex Mono, monospace;
-    --font-serif: Lora, serif;
-    --radius: 0.5rem;
-    --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
-    --tracking-tight: calc(var(--tracking-normal) - 0.025em);
-    --tracking-wide: calc(var(--tracking-normal) + 0.025em);
-    --tracking-wider: calc(var(--tracking-normal) + 0.05em);
-    --tracking-widest: calc(var(--tracking-normal) + 0.1em);
-  }
-  body {
-    letter-spacing: var(--tracking-normal);
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer base {
+  :root {
+    --background: oklch(0.9751 0.0127 244.2507);
+    --foreground: oklch(0.3729 0.0306 259.7328);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.3729 0.0306 259.7328);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.3729 0.0306 259.7328);
+    --primary: oklch(0.5606 0.192 149.5793);
+    --primary-foreground: oklch(1 0 0);
+    --secondary: oklch(0.9514 0.025 236.8242);
+    --secondary-foreground: oklch(0.4461 0.0263 256.8018);
+    --muted: oklch(0.967 0.0029 264.5419);
+    --muted-foreground: oklch(0.551 0.0234 264.3637);
+    --accent: oklch(0.9505 0.0507 163.0508);
+    --accent-foreground: oklch(0.3729 0.0306 259.7328);
+    --destructive: oklch(0.6368 0.2078 25.3313);
+    --destructive-foreground: oklch(1 0 0);
+    --border: oklch(0.9276 0.0058 264.5313);
+    --input: oklch(0.9276 0.0058 264.5313);
+    --ring: oklch(0.7227 0.192 149.5793);
+    --chart-1: oklch(0.7227 0.192 149.5793);
+    --chart-2: oklch(0.6959 0.1491 162.4796);
+    --chart-3: oklch(0.596 0.1274 163.2254);
+    --chart-4: oklch(0.5081 0.1049 165.6121);
+    --chart-5: oklch(0.4318 0.0865 166.9128);
+    --sidebar: oklch(0.9514 0.025 236.8242);
+    --sidebar-foreground: oklch(0.3729 0.0306 259.7328);
+    --sidebar-primary: oklch(0.7227 0.192 149.5793);
+    --sidebar-primary-foreground: oklch(1 0 0);
+    --sidebar-accent: oklch(0.9505 0.0507 163.0508);
+    --sidebar-accent-foreground: oklch(0.3729 0.0306 259.7328);
+    --sidebar-border: oklch(0.9276 0.0058 264.5313);
+    --sidebar-ring: oklch(0.7227 0.192 149.5793);
+    --font-sans: DM Sans, sans-serif;
+    --font-serif: Lora, serif;
+    --font-mono: IBM Plex Mono, monospace;
+    --radius: 0.5rem;
+    --shadow-x: 0px;
+    --shadow-y: 4px;
+    --shadow-blur: 8px;
+    --shadow-spread: -1px;
+    --shadow-opacity: 0.1;
+    --shadow-color: hsl(0 0% 0%);
+    --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 2px 4px -2px hsl(0 0% 0% / 0.1);
+    --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 4px 6px -2px hsl(0 0% 0% / 0.1);
+    --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 8px 10px -2px hsl(0 0% 0% / 0.1);
+    --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
+    --tracking-normal: 0em;
+    --spacing: 0.25rem;
+    --shadow-offset-x: 0px;
+    --shadow-offset-y: 4px;
+    --letter-spacing: 0em;
+  }
+
+  .dark {
+    --background: oklch(0.2077 0.0398 265.7549);
+    --foreground: oklch(0.8717 0.0093 258.3382);
+    --card: oklch(0.2795 0.0368 260.031);
+    --card-foreground: oklch(0.8717 0.0093 258.3382);
+    --popover: oklch(0.2795 0.0368 260.031);
+    --popover-foreground: oklch(0.8717 0.0093 258.3382);
+    --primary: oklch(0.7729 0.1535 163.2231);
+    --primary-foreground: oklch(0.2077 0.0398 265.7549);
+    --secondary: oklch(0.3351 0.0331 260.912);
+    --secondary-foreground: oklch(0.7118 0.0129 286.0665);
+    --muted: oklch(0.2463 0.0275 259.9628);
+    --muted-foreground: oklch(0.551 0.0234 264.3637);
+    --accent: oklch(0.3729 0.0306 259.7328);
+    --accent-foreground: oklch(0.7118 0.0129 286.0665);
+    --destructive: oklch(0.6368 0.2078 25.3313);
+    --destructive-foreground: oklch(0.2077 0.0398 265.7549);
+    --border: oklch(0.4461 0.0263 256.8018);
+    --input: oklch(0.4461 0.0263 256.8018);
+    --ring: oklch(0.7729 0.1535 163.2231);
+    --chart-1: oklch(0.7729 0.1535 163.2231);
+    --chart-2: oklch(0.7845 0.1325 181.912);
+    --chart-3: oklch(0.7227 0.192 149.5793);
+    --chart-4: oklch(0.6959 0.1491 162.4796);
+    --chart-5: oklch(0.596 0.1274 163.2254);
+    --sidebar: oklch(0.2795 0.0368 260.031);
+    --sidebar-foreground: oklch(0.8717 0.0093 258.3382);
+    --sidebar-primary: oklch(0.7729 0.1535 163.2231);
+    --sidebar-primary-foreground: oklch(0.2077 0.0398 265.7549);
+    --sidebar-accent: oklch(0.3729 0.0306 259.7328);
+    --sidebar-accent-foreground: oklch(0.7118 0.0129 286.0665);
+    --sidebar-border: oklch(0.4461 0.0263 256.8018);
+    --sidebar-ring: oklch(0.7729 0.1535 163.2231);
+    --font-sans: DM Sans, sans-serif;
+    --font-serif: Lora, serif;
+    --font-mono: IBM Plex Mono, monospace;
+    --radius: 0.5rem;
+    --shadow-x: 0px;
+    --shadow-y: 4px;
+    --shadow-blur: 8px;
+    --shadow-spread: -1px;
+    --shadow-opacity: 0.1;
+    --shadow-color: hsl(0 0% 0%);
+    --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 2px 4px -2px hsl(0 0% 0% / 0.1);
+    --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 4px 6px -2px hsl(0 0% 0% / 0.1);
+    --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 8px 10px -2px hsl(0 0% 0% / 0.1);
+    --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
+    --shadow-offset-x: 0px;
+    --shadow-offset-y: 4px;
+    --letter-spacing: 0em;
+    --spacing: 0.25rem;
+  }
+  .theme {
+    --font-sans: DM Sans, sans-serif;
+    --font-mono: IBM Plex Mono, monospace;
+    --font-serif: Lora, serif;
+    --radius: 0.5rem;
+    --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+    --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+    --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+    --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+    --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+  }
+  body {
+    letter-spacing: var(--tracking-normal);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}