@whykusanagi/corrupted-theme 0.1.0

package/src/css/utilities.css

@@ -0,0 +1,239 @@
+/* utilities.css — Utility classes for spacing, sizing, opacity, etc */
+
+/* ========== SPACING UTILITIES ========== */
+
+.m-0 { margin: 0; }
+.m-xs { margin: var(--spacing-xs); }
+.m-sm { margin: var(--spacing-sm); }
+.m-md { margin: var(--spacing-md); }
+.m-lg { margin: var(--spacing-lg); }
+.m-xl { margin: var(--spacing-xl); }
+.m-2xl { margin: var(--spacing-2xl); }
+
+.mx-auto { margin-left: auto; margin-right: auto; }
+.my-auto { margin-top: auto; margin-bottom: auto; }
+
+.mt-0 { margin-top: 0; }
+.mt-xs { margin-top: var(--spacing-xs); }
+.mt-sm { margin-top: var(--spacing-sm); }
+.mt-md { margin-top: var(--spacing-md); }
+.mt-lg { margin-top: var(--spacing-lg); }
+.mt-xl { margin-top: var(--spacing-xl); }
+.mt-2xl { margin-top: var(--spacing-2xl); }
+
+.mb-0 { margin-bottom: 0; }
+.mb-xs { margin-bottom: var(--spacing-xs); }
+.mb-sm { margin-bottom: var(--spacing-sm); }
+.mb-md { margin-bottom: var(--spacing-md); }
+.mb-lg { margin-bottom: var(--spacing-lg); }
+.mb-xl { margin-bottom: var(--spacing-xl); }
+.mb-2xl { margin-bottom: var(--spacing-2xl); }
+
+.p-0 { padding: 0; }
+.p-xs { padding: var(--spacing-xs); }
+.p-sm { padding: var(--spacing-sm); }
+.p-md { padding: var(--spacing-md); }
+.p-lg { padding: var(--spacing-lg); }
+.p-xl { padding: var(--spacing-xl); }
+.p-2xl { padding: var(--spacing-2xl); }
+
+.pt-md { padding-top: var(--spacing-md); }
+.pb-md { padding-bottom: var(--spacing-md); }
+.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
+.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
+
+/* ========== DISPLAY UTILITIES ========== */
+
+.block { display: block; }
+.inline { display: inline; }
+.inline-block { display: inline-block; }
+.flex { display: flex; }
+.grid { display: grid; }
+.hidden { display: none; }
+.visible { visibility: visible; }
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.items-center { align-items: center; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-end { justify-content: flex-end; }
+
+.gap-sm { gap: var(--spacing-sm); }
+.gap-md { gap: var(--spacing-md); }
+.gap-lg { gap: var(--spacing-lg); }
+
+/* ========== OPACITY UTILITIES ========== */
+
+.opacity-0 { opacity: 0; }
+.opacity-25 { opacity: 0.25; }
+.opacity-50 { opacity: 0.5; }
+.opacity-75 { opacity: 0.75; }
+.opacity-100 { opacity: 1; }
+
+/* ========== TEXT UTILITIES ========== */
+
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+
+.font-sm { font-size: 0.875rem; }
+.font-base { font-size: 1rem; }
+.font-lg { font-size: 1.125rem; }
+.font-xl { font-size: 1.25rem; }
+
+.font-normal { font-weight: 400; }
+.font-semi { font-weight: 600; }
+.font-bold { font-weight: 700; }
+
+.text-primary { color: var(--text); }
+.text-secondary { color: var(--text-secondary); }
+.text-muted { color: var(--text-muted); }
+.text-accent { color: var(--accent); }
+
+.uppercase { text-transform: uppercase; }
+.lowercase { text-transform: lowercase; }
+.capitalize { text-transform: capitalize; }
+
+.underline { text-decoration: underline; }
+.no-underline { text-decoration: none; }
+
+.line-clamp-1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* ========== WIDTH & HEIGHT UTILITIES ========== */
+
+.w-full { width: 100%; }
+.h-full { height: 100%; }
+.w-auto { width: auto; }
+.h-auto { height: auto; }
+
+.min-h-screen { min-height: 100vh; }
+.max-w-xs { max-width: 20rem; }
+.max-w-sm { max-width: 24rem; }
+.max-w-md { max-width: 28rem; }
+.max-w-lg { max-width: 32rem; }
+.max-w-xl { max-width: 36rem; }
+.max-w-2xl { max-width: 42rem; }
+.max-w-4xl { max-width: 56rem; }
+.max-w-6xl { max-width: 72rem; }
+
+.container-sm { max-width: 640px; margin: 0 auto; }
+.container-md { max-width: 768px; margin: 0 auto; }
+.container-lg { max-width: 1024px; margin: 0 auto; }
+.container-xl { max-width: 1280px; margin: 0 auto; }
+
+/* ========== POSITION UTILITIES ========== */
+
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed { position: fixed; }
+.sticky { position: sticky; }
+
+.top-0 { top: 0; }
+.bottom-0 { bottom: 0; }
+.left-0 { left: 0; }
+.right-0 { right: 0; }
+
+.inset-0 { inset: 0; }
+
+.z-0 { z-index: var(--z-base); }
+.z-10 { z-index: 10; }
+.z-50 { z-index: 50; }
+.z-navbar { z-index: var(--z-navbar); }
+.z-modal { z-index: var(--z-modal); }
+
+/* ========== BORDER RADIUS UTILITIES ========== */
+
+.rounded-none { border-radius: 0; }
+.rounded-sm { border-radius: var(--radius-sm); }
+.rounded-md { border-radius: var(--radius-md); }
+.rounded-lg { border-radius: var(--radius-lg); }
+.rounded-xl { border-radius: var(--radius-xl); }
+.rounded-2xl { border-radius: var(--radius-2xl); }
+.rounded-full { border-radius: 9999px; }
+
+/* ========== BACKGROUND UTILITIES ========== */
+
+.bg-primary { background-color: var(--bg); }
+.bg-secondary { background-color: var(--bg-secondary); }
+.bg-glass { background-color: var(--glass); }
+.bg-glass-light { background-color: var(--glass-light); }
+.bg-accent-light {
+  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
+}
+
+/* ========== BORDER UTILITIES ========== */
+
+.border { border: 1px solid var(--border); }
+.border-t { border-top: 1px solid var(--border); }
+.border-b { border-bottom: 1px solid var(--border); }
+.border-l { border-left: 1px solid var(--border); }
+.border-r { border-right: 1px solid var(--border); }
+
+.border-accent { border-color: var(--accent); }
+.border-light { border-color: var(--border-light); }
+
+/* ========== OVERFLOW UTILITIES ========== */
+
+.overflow-hidden { overflow: hidden; }
+.overflow-auto { overflow: auto; }
+.overflow-x-auto { overflow-x: auto; }
+.overflow-y-auto { overflow-y: auto; }
+
+/* ========== OBJECT-FIT UTILITIES ========== */
+
+.object-cover { object-fit: cover; }
+.object-contain { object-fit: contain; }
+
+/* ========== RESPONSIVENESS ========== */
+
+@media screen and (max-width: 768px) {
+  /* Stack flexbox on mobile */
+  .flex-responsive {
+    flex-direction: column;
+  }
+
+  /* Adjust padding on smaller screens */
+  .p-md { padding: var(--spacing-sm); }
+  .px-md { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
+}
+
+/* ========== PRINT UTILITIES ========== */
+
+@media print {
+  .hidden-print { display: none !important; }
+  .visible-print { display: block !important; }
+}

package/src/css/variables.css

@@ -0,0 +1,73 @@
+/* variables.css — Core CSS Variables for Corrupted Theme */
+/* These are the foundation colors and design tokens */
+
+:root {
+  /* ========== PRIMARY COLORS ========== */
+  --accent: #d94f90;           /* Main pink accent */
+  --accent-light: #e86ca8;     /* Lighter pink for hover states */
+  --accent-dark: #b61b70;      /* Darker pink for depth */
+
+  /* ========== BACKGROUNDS ========== */
+  --bg: #0a0a0a;               /* Pure black base */
+  --bg-secondary: #0f0f1a;     /* Deep purple-black */
+  --overlay: rgba(0, 0, 0, 0.85);  /* Dark overlay */
+
+  /* ========== GLASS MORPHISM EFFECTS ========== */
+  --glass: rgba(20, 12, 40, 0.7);       /* Frosted glass (dark) */
+  --glass-light: rgba(28, 18, 48, 0.5); /* Frosted glass (light) */
+  --glass-darker: rgba(10, 5, 20, 0.6);  /* Darker glass for code blocks */
+
+  /* ========== BORDERS & DIVIDERS ========== */
+  --border: #3a2555;           /* Primary border color */
+  --border-light: #5a4575;     /* Lighter border for emphasis */
+
+  /* ========== TEXT COLORS ========== */
+  --text: #f5f1f8;             /* Primary text */
+  --text-secondary: #b8afc8;   /* Secondary text */
+  --text-muted: #7a7085;       /* Muted/disabled text */
+
+  /* ========== GRADIENTS ========== */
+  --gradient-accent: linear-gradient(135deg, #d94f90 0%, #b61b70 100%);
+  --gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #d94f90 100%);
+
+  /* ========== SPACING SCALE ========== */
+  --spacing-xs: 0.25rem;       /* 4px */
+  --spacing-sm: 0.5rem;        /* 8px */
+  --spacing-md: 1rem;          /* 16px */
+  --spacing-lg: 1.5rem;        /* 24px */
+  --spacing-xl: 2rem;          /* 32px */
+  --spacing-2xl: 3rem;         /* 48px */
+
+  /* ========== BORDER RADIUS ========== */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 20px;
+
+  /* ========== TRANSITIONS ========== */
+  --transition: 0.3s ease;              /* Standard transition (alias for transition-normal) */
+  --transition-fast: 0.15s ease;        /* Fast transition for interactive elements */
+  --transition-normal: 0.3s ease;        /* Normal transition */
+  --transition-slow: 0.5s ease;          /* Slow transition */
+  --transition-easing: cubic-bezier(0.34, 1.56, 0.64, 1); /* Custom easing */
+
+  /* ========== Z-INDEX SCALE ========== */
+  --z-negative: -2;
+  --z-background: -1;
+  --z-base: 0;
+  --z-elevated: 1;
+  --z-navbar: 500;
+  --z-modal: 1000;
+}
+
+/* Reset defaults for consistency */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}

package/src/lib/celeste-proxy.js

@@ -0,0 +1,215 @@
+/**
+ * Celeste API Proxy - Shared logic for local dev and Cloudflare Workers
+ * Handles secure proxying of Celeste API requests
+ */
+
+/**
+ * Build messages array from request data
+ */
+function buildMessages(requestData) {
+  const messages = [];
+  const { message, system_prompt, history } = requestData;
+
+  // Add system prompt if provided
+  if (system_prompt) {
+    messages.push({
+      role: 'system',
+      content: system_prompt
+    });
+  }
+
+  // Add conversation history
+  if (Array.isArray(history)) {
+    for (const histMsg of history) {
+      if (histMsg.sender === 'user') {
+        messages.push({
+          role: 'user',
+          content: histMsg.text || ''
+        });
+      } else if (histMsg.sender === 'celeste') {
+        messages.push({
+          role: 'assistant',
+          content: histMsg.text || ''
+        });
+      }
+    }
+  }
+
+  // Add current message
+  if (message) {
+    messages.push({
+      role: 'user',
+      content: message.trim()
+    });
+  }
+
+  return messages;
+}
+
+/**
+ * Handle proxy request - works in both Node.js and Cloudflare Workers
+ */
+export async function handleProxyRequest(request, env) {
+  try {
+    // Validate required environment variables
+    const agentKey = env.CELESTE_AGENT_KEY || env.CELESTE_API_KEY;
+    const agentId = env.CELESTE_AGENT_ID;
+    const agentBaseUrl = env.CELESTE_AGENT_BASE_URL;
+
+    if (!agentKey || !agentId || !agentBaseUrl) {
+      return new Response(
+        JSON.stringify({ error: 'Proxy configuration missing' }),
+        {
+          status: 500,
+          headers: {
+            'Content-Type': 'application/json',
+            'Access-Control-Allow-Origin': '*'
+          }
+        }
+      );
+    }
+
+    // Handle CORS preflight
+    if (request.method === 'OPTIONS') {
+      return new Response(null, {
+        status: 204,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'POST, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type'
+        }
+      });
+    }
+
+    // Only allow POST
+    if (request.method !== 'POST') {
+      return new Response(
+        JSON.stringify({ error: 'Method not allowed' }),
+        {
+          status: 405,
+          headers: {
+            'Content-Type': 'application/json',
+            'Access-Control-Allow-Origin': '*'
+          }
+        }
+      );
+    }
+
+    // Parse request body
+    let requestData;
+    try {
+      requestData = await request.json();
+    } catch (e) {
+      return new Response(
+        JSON.stringify({ error: 'Invalid JSON in request body' }),
+        {
+          status: 400,
+          headers: {
+            'Content-Type': 'application/json',
+            'Access-Control-Allow-Origin': '*'
+          }
+        }
+      );
+    }
+
+    // Validate message
+    if (!requestData.message || !requestData.message.trim()) {
+      return new Response(
+        JSON.stringify({ error: 'Message required' }),
+        {
+          status: 400,
+          headers: {
+            'Content-Type': 'application/json',
+            'Access-Control-Allow-Origin': '*'
+          }
+        }
+      );
+    }
+
+    // Build messages array
+    const messages = buildMessages(requestData);
+
+    // Call Celeste API
+    const celesteUrl = `${agentBaseUrl}/api/v1/chat/completions`;
+    const celesteResponse = await fetch(celesteUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${agentKey}`
+      },
+      body: JSON.stringify({
+        model: 'gpt-4o-mini',
+        messages: messages,
+        max_tokens: 400,
+        temperature: 0.7,
+        stream: false
+      })
+    });
+
+    // Handle Celeste API errors
+    if (celesteResponse.status === 401) {
+      return new Response(
+        JSON.stringify({ error: 'Authentication failed - invalid API key' }),
+        {
+          status: 401,
+          headers: {
+            'Content-Type': 'application/json',
+            'Access-Control-Allow-Origin': '*'
+          }
+        }
+      );
+    }
+
+    if (celesteResponse.status === 503) {
+      return new Response(
+        JSON.stringify({ error: 'Celeste service is currently unavailable' }),
+        {
+          status: 503,
+          headers: {
+            'Content-Type': 'application/json',
+            'Access-Control-Allow-Origin': '*'
+          }
+        }
+      );
+    }
+
+    if (!celesteResponse.ok) {
+      return new Response(
+        JSON.stringify({ error: `API error: ${celesteResponse.status}` }),
+        {
+          status: celesteResponse.status,
+          headers: {
+            'Content-Type': 'application/json',
+            'Access-Control-Allow-Origin': '*'
+          }
+        }
+      );
+    }
+
+    // Return successful response
+    const celesteData = await celesteResponse.json();
+    return new Response(JSON.stringify(celesteData), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json',
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'POST, OPTIONS',
+        'Access-Control-Allow-Headers': 'Content-Type'
+      }
+    });
+
+  } catch (error) {
+    console.error('Proxy error:', error);
+    return new Response(
+      JSON.stringify({ error: 'Internal server error' }),
+      {
+        status: 500,
+        headers: {
+          'Content-Type': 'application/json',
+          'Access-Control-Allow-Origin': '*'
+        }
+      }
+    );
+  }
+}
+