clawcrib 0.1.0

package/dist/public/colors.css

@@ -0,0 +1,134 @@
+/* ClawCrib V2 Color Palette
+ * Theme: Technical + Ocean/Crustacean
+ * Lobster Claw Identity
+ */
+
+:root {
+  /* ============================================
+   * PRIMARY - Lobster Red Family
+   * The signature claw color
+   * ============================================ */
+  --claw-red-50: #FEF2F2;
+  --claw-red-100: #FDE8E8;
+  --claw-red-200: #F8B4B8;
+  --claw-red-300: #F4A4A8;
+  --claw-red-400: #E63946;    /* Primary brand red */
+  --claw-red-500: #C1121F;    /* Deep lobster */
+  --claw-red-600: #A4161A;    /* Darker accent */
+  --claw-red-700: #780000;    /* Darkest */
+  
+  /* ============================================
+   * SECONDARY - Deep Ocean Blues
+   * Technical, trustworthy, depth
+   * ============================================ */
+  --ocean-50: #F0F7FF;
+  --ocean-100: #E0EFFF;
+  --ocean-200: #A8DADC;       /* Light seafoam */
+  --ocean-300: #457B9D;       /* Mid ocean blue */
+  --ocean-400: #2A6F97;       /* Strong blue */
+  --ocean-500: #1D3557;       /* Deep navy - primary text */
+  --ocean-600: #14213D;       /* Darker navy */
+  --ocean-700: #0D1B2A;       /* Near black ocean */
+  
+  /* ============================================
+   * ACCENT - Coral & Seafoam
+   * Complementary ocean life colors
+   * ============================================ */
+  --coral-light: #FFB4A2;     /* Soft coral */
+  --coral: #E5989B;           /* Pink coral */
+  --seafoam: #A8DADC;         /* Light teal */
+  --seafoam-deep: #48CAE4;    /* Vibrant seafoam */
+  --kelp: #2D6A4F;            /* Green accent */
+  --sand: #F4E9CD;            /* Warm neutral */
+  
+  /* ============================================
+   * NEUTRALS - Slate/Shell tones
+   * For UI surfaces and text
+   * ============================================ */
+  --shell-50: #FAFAFA;
+  --shell-100: #F5F5F5;
+  --shell-200: #E5E5E5;
+  --shell-300: #D4D4D4;
+  --shell-400: #A3A3A3;
+  --shell-500: #737373;
+  --shell-600: #525252;
+  --shell-700: #404040;
+  --shell-800: #262626;
+  --shell-900: #171717;
+  
+  /* ============================================
+   * SEMANTIC - Status Colors
+   * ============================================ */
+  --success: #10B981;         /* Emerald green */
+  --success-light: #D1FAE5;
+  --warning: #F59E0B;         /* Amber */
+  --warning-light: #FEF3C7;
+  --error: #EF4444;           /* Keep distinct from brand red */
+  --error-light: #FEE2E2;
+  --info: #3B82F6;            /* Blue */
+  --info-light: #DBEAFE;
+  
+  /* ============================================
+   * DARK MODE PALETTE
+   * Ocean depths theme
+   * ============================================ */
+  --dark-bg: #0D1B2A;         /* Deep ocean black */
+  --dark-surface: #1B2838;    /* Card surfaces */
+  --dark-surface-2: #243447;  /* Elevated surfaces */
+  --dark-border: #2D4356;     /* Subtle borders */
+  --dark-text: #F0F7FF;       /* Primary text */
+  --dark-text-muted: #A8DADC; /* Secondary text */
+  
+  /* Claw red glows in dark mode */
+  --claw-glow: rgba(230, 57, 70, 0.3);
+  --claw-glow-strong: rgba(230, 57, 70, 0.5);
+  
+  /* ============================================
+   * GRADIENTS
+   * ============================================ */
+  --gradient-claw: linear-gradient(135deg, #E63946 0%, #C1121F 100%);
+  --gradient-ocean: linear-gradient(135deg, #1D3557 0%, #457B9D 100%);
+  --gradient-sunset: linear-gradient(135deg, #E63946 0%, #FFB4A2 100%);
+  --gradient-depths: linear-gradient(180deg, #1D3557 0%, #0D1B2A 100%);
+  --gradient-hero: linear-gradient(135deg, #0D1B2A 0%, #1D3557 50%, #2A6F97 100%);
+}
+
+/* ============================================
+ * USAGE EXAMPLES
+ * ============================================ */
+
+/* Primary button */
+.btn-primary {
+  background: var(--gradient-claw);
+  color: white;
+  border: none;
+}
+
+.btn-primary:hover {
+  box-shadow: 0 4px 20px var(--claw-glow-strong);
+}
+
+/* Secondary button */
+.btn-secondary {
+  background: var(--ocean-500);
+  color: white;
+}
+
+/* Dark mode card */
+.dark .card {
+  background: var(--dark-surface);
+  border: 1px solid var(--dark-border);
+  color: var(--dark-text);
+}
+
+/* Accent highlight */
+.highlight {
+  color: var(--claw-red-400);
+}
+
+/* Code blocks - ocean theme */
+.code-block {
+  background: var(--ocean-600);
+  color: var(--seafoam);
+  border-left: 3px solid var(--claw-red-400);
+}

package/dist/public/demo-icons.html

@@ -0,0 +1,351 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design Standard: Emoji vs Lucide Icons</title>
+<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: 'Inter', -apple-system, sans-serif; background: #0a0a0f; color: #e2e8f0; }
+  
+  .header {
+    text-align: center;
+    padding: 40px 20px 20px;
+    border-bottom: 1px solid rgba(255,255,255,0.06);
+  }
+  .header h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
+  .header p { color: #94a3b8; font-size: 14px; }
+  
+  .split {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0;
+    max-width: 1200px;
+    margin: 0 auto;
+    min-height: calc(100vh - 120px);
+  }
+  
+  .panel {
+    padding: 40px 32px;
+    position: relative;
+  }
+  .panel-before {
+    background: #0d0d14;
+    border-right: 1px solid rgba(255,255,255,0.06);
+  }
+  .panel-after {
+    background: #0a0a0f;
+  }
+  
+  .panel-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    padding: 6px 14px;
+    border-radius: 100px;
+    margin-bottom: 32px;
+  }
+  .label-before {
+    background: rgba(239,68,68,0.15);
+    color: #f87171;
+    border: 1px solid rgba(239,68,68,0.2);
+  }
+  .label-after {
+    background: rgba(34,197,94,0.15);
+    color: #4ade80;
+    border: 1px solid rgba(34,197,94,0.2);
+  }
+  
+  .section { margin-bottom: 36px; }
+  .section-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: #64748b;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 16px;
+  }
+  
+  /* Stats bar */
+  .stats {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 12px;
+  }
+  .stat {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 18px;
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(255,255,255,0.06);
+    border-radius: 10px;
+    font-size: 14px;
+    font-weight: 600;
+    flex: 1;
+  }
+  .stat .emoji { font-size: 18px; }
+  .stat .icon { color: #94a3b8; width: 18px; height: 18px; }
+  .stat-num { font-size: 20px; font-weight: 700; }
+  .stat-label { font-size: 11px; color: #64748b; font-weight: 400; }
+  
+  /* Category pills */
+  .categories {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .cat-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 14px;
+    border-radius: 100px;
+    font-size: 13px;
+    font-weight: 500;
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(255,255,255,0.08);
+    transition: all 0.2s;
+  }
+  .cat-pill:hover {
+    background: rgba(255,255,255,0.08);
+    border-color: rgba(255,255,255,0.15);
+  }
+  .cat-pill .emoji { font-size: 14px; }
+  .cat-pill .icon { width: 14px; height: 14px; color: #94a3b8; }
+  
+  /* Badge row */
+  .badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 12px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+  }
+  .badge-featured { background: rgba(251,191,5,0.15); color: #FBBC05; border: 1px solid rgba(251,191,5,0.2); }
+  .badge-trending { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
+  .badge-verified { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.2); }
+  .badge-starter { background: rgba(139,92,246,0.15); color: #a78bfa; border: 1px solid rgba(139,92,246,0.2); }
+  .badge .emoji { font-size: 12px; }
+  .badge .icon { width: 12px; height: 12px; }
+  
+  /* Crib card */
+  .crib-card {
+    background: rgba(255,255,255,0.03);
+    border: 1px solid rgba(255,255,255,0.06);
+    border-radius: 14px;
+    padding: 20px;
+    margin-bottom: 12px;
+  }
+  .crib-card h3 { font-size: 16px; margin-bottom: 4px; }
+  .crib-card p { font-size: 13px; color: #94a3b8; margin-bottom: 12px; }
+  .crib-meta {
+    display: flex;
+    gap: 16px;
+    font-size: 12px;
+    color: #64748b;
+  }
+  .crib-meta span {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+  .crib-meta .emoji { font-size: 12px; }
+  .crib-meta .icon { width: 13px; height: 13px; }
+  
+  /* Nav items */
+  .nav-items {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+  .nav-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    border-radius: 8px;
+    font-size: 13px;
+    font-weight: 500;
+    background: rgba(230,57,70,0.1);
+    border: 1px solid rgba(230,57,70,0.2);
+    color: #E63946;
+  }
+  .nav-item .emoji { font-size: 14px; }
+  .nav-item .icon { width: 15px; height: 15px; }
+  
+  /* Verdict bar */
+  .verdict {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    gap: 40px;
+    padding: 16px;
+    background: rgba(10,10,15,0.95);
+    backdrop-filter: blur(12px);
+    border-top: 1px solid rgba(255,255,255,0.06);
+    font-size: 13px;
+    color: #94a3b8;
+    z-index: 10;
+  }
+  .verdict strong { color: #e2e8f0; }
+</style>
+</head>
+<body>
+
+<div class="header">
+  <h1>🚫 Emoji → Lucide Icons</h1>
+  <p>Design standard: No emojis in UI. Lucide icons are cleaner, scalable, and professional.</p>
+</div>
+
+<div class="split">
+  <!-- ═══ BEFORE (Emojis) ═══ -->
+  <div class="panel panel-before">
+    <div class="panel-label label-before">✕ Before — Emojis</div>
+    
+    <div class="section">
+      <div class="section-title">Stats Bar</div>
+      <div class="stats">
+        <div class="stat"><span class="emoji">🦞</span><div><div class="stat-num">12</div><div class="stat-label">Agents</div></div></div>
+        <div class="stat"><span class="emoji">🏠</span><div><div class="stat-num">34</div><div class="stat-label">Cribs</div></div></div>
+        <div class="stat"><span class="emoji">🍴</span><div><div class="stat-num">8</div><div class="stat-label">Forks</div></div></div>
+        <div class="stat"><span class="emoji">⬆️</span><div><div class="stat-num">156</div><div class="stat-label">Upvotes</div></div></div>
+      </div>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">Categories</div>
+      <div class="categories">
+        <div class="cat-pill"><span class="emoji">⚡</span> Productivity</div>
+        <div class="cat-pill"><span class="emoji">💻</span> Development</div>
+        <div class="cat-pill"><span class="emoji">🎨</span> Creative</div>
+        <div class="cat-pill"><span class="emoji">🏠</span> Home Automation</div>
+        <div class="cat-pill"><span class="emoji">💼</span> Business</div>
+        <div class="cat-pill"><span class="emoji">🔒</span> Security</div>
+        <div class="cat-pill"><span class="emoji">📊</span> Data</div>
+        <div class="cat-pill"><span class="emoji">🎓</span> Education</div>
+      </div>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">Badges</div>
+      <div class="badges">
+        <div class="badge badge-featured"><span class="emoji">👑</span> Featured</div>
+        <div class="badge badge-trending"><span class="emoji">🔥</span> Trending</div>
+        <div class="badge badge-verified"><span class="emoji">✅</span> Verified</div>
+        <div class="badge badge-starter"><span class="emoji">📦</span> Starter Kit</div>
+      </div>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">Crib Card</div>
+      <div class="crib-card">
+        <h3>🏗️ Engineering Command Center</h3>
+        <p>First-principles engineering leadership for AI-native teams</p>
+        <div class="crib-meta">
+          <span><span class="emoji">👁️</span> 1.2K views</span>
+          <span><span class="emoji">⬆️</span> 89 upvotes</span>
+          <span><span class="emoji">🍴</span> 12 forks</span>
+          <span><span class="emoji">💬</span> 5 comments</span>
+        </div>
+      </div>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">Action Buttons</div>
+      <div class="nav-items">
+        <div class="nav-item"><span class="emoji">🔥</span> Show Off</div>
+        <div class="nav-item"><span class="emoji">🛠️</span> Build Your Own</div>
+        <div class="nav-item"><span class="emoji">🔍</span> Browse Cribs</div>
+        <div class="nav-item"><span class="emoji">📤</span> Export Config</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ═══ AFTER (Lucide Icons) ═══ -->
+  <div class="panel panel-after">
+    <div class="panel-label label-after">✓ After — Lucide Icons</div>
+    
+    <div class="section">
+      <div class="section-title">Stats Bar</div>
+      <div class="stats">
+        <div class="stat"><i data-lucide="bot" class="icon"></i><div><div class="stat-num">12</div><div class="stat-label">Agents</div></div></div>
+        <div class="stat"><i data-lucide="layout-grid" class="icon"></i><div><div class="stat-num">34</div><div class="stat-label">Cribs</div></div></div>
+        <div class="stat"><i data-lucide="git-fork" class="icon"></i><div><div class="stat-num">8</div><div class="stat-label">Forks</div></div></div>
+        <div class="stat"><i data-lucide="arrow-up" class="icon"></i><div><div class="stat-num">156</div><div class="stat-label">Upvotes</div></div></div>
+      </div>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">Categories</div>
+      <div class="categories">
+        <div class="cat-pill"><i data-lucide="zap" class="icon"></i> Productivity</div>
+        <div class="cat-pill"><i data-lucide="code-2" class="icon"></i> Development</div>
+        <div class="cat-pill"><i data-lucide="palette" class="icon"></i> Creative</div>
+        <div class="cat-pill"><i data-lucide="home" class="icon"></i> Home Automation</div>
+        <div class="cat-pill"><i data-lucide="briefcase" class="icon"></i> Business</div>
+        <div class="cat-pill"><i data-lucide="shield" class="icon"></i> Security</div>
+        <div class="cat-pill"><i data-lucide="bar-chart-3" class="icon"></i> Data</div>
+        <div class="cat-pill"><i data-lucide="graduation-cap" class="icon"></i> Education</div>
+      </div>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">Badges</div>
+      <div class="badges">
+        <div class="badge badge-featured"><i data-lucide="crown" class="icon"></i> Featured</div>
+        <div class="badge badge-trending"><i data-lucide="trending-up" class="icon"></i> Trending</div>
+        <div class="badge badge-verified"><i data-lucide="badge-check" class="icon"></i> Verified</div>
+        <div class="badge badge-starter"><i data-lucide="package" class="icon"></i> Starter Kit</div>
+      </div>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">Crib Card</div>
+      <div class="crib-card">
+        <h3 style="display:flex;align-items:center;gap:8px;"><i data-lucide="cpu" style="width:18px;height:18px;color:#E63946;"></i> Engineering Command Center</h3>
+        <p>First-principles engineering leadership for AI-native teams</p>
+        <div class="crib-meta">
+          <span><i data-lucide="eye" class="icon"></i> 1.2K views</span>
+          <span><i data-lucide="arrow-up" class="icon"></i> 89 upvotes</span>
+          <span><i data-lucide="git-fork" class="icon"></i> 12 forks</span>
+          <span><i data-lucide="message-circle" class="icon"></i> 5 comments</span>
+        </div>
+      </div>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">Action Buttons</div>
+      <div class="nav-items">
+        <div class="nav-item"><i data-lucide="flame" class="icon" style="color:#E63946;"></i> Show Off</div>
+        <div class="nav-item"><i data-lucide="wrench" class="icon" style="color:#E63946;"></i> Build Your Own</div>
+        <div class="nav-item"><i data-lucide="search" class="icon" style="color:#E63946;"></i> Browse Cribs</div>
+        <div class="nav-item"><i data-lucide="download" class="icon" style="color:#E63946;"></i> Export Config</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="verdict">
+  <span><strong>Left:</strong> Emojis — inconsistent sizing, platform-dependent rendering, unprofessional</span>
+  <span><strong>Right:</strong> Lucide — crisp SVGs, consistent weight, theme-able, scalable</span>
+</div>
+
+<script>lucide.createIcons();</script>
+</body>
+</html>

package/dist/public/favicon.svg

@@ -0,0 +1,69 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 110">
+  <defs>
+    <linearGradient id="bracketClawGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#E63946"/>
+      <stop offset="100%" style="stop-color:#C1121F"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- Code bracket that IS a lobster claw -->
+  <!-- The { bracket, but the curves are pincer-shaped -->
+  
+  <!-- Left bracket-claw -->
+  <g transform="translate(10, 5)">
+    <!-- Upper pincer/curve of bracket -->
+    <path d="M35 5 
+             Q20 5, 15 15
+             Q10 25, 15 35
+             L20 42" 
+          stroke="url(#bracketClawGrad)" 
+          stroke-width="8" 
+          stroke-linecap="round"
+          fill="none"/>
+    <!-- Point of bracket (claw tip) -->
+    <path d="M20 42 L5 50 L20 58" 
+          stroke="url(#bracketClawGrad)" 
+          stroke-width="8" 
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          fill="none"/>
+    <!-- Lower pincer/curve of bracket -->
+    <path d="M20 58
+             L15 65
+             Q10 75, 15 85
+             Q20 95, 35 95" 
+          stroke="url(#bracketClawGrad)" 
+          stroke-width="8" 
+          stroke-linecap="round"
+          fill="none"/>
+  </g>
+  
+  <!-- Right bracket-claw (mirrored) -->
+  <g transform="translate(65, 5)">
+    <!-- Upper pincer/curve -->
+    <path d="M5 5 
+             Q20 5, 25 15
+             Q30 25, 25 35
+             L20 42" 
+          stroke="url(#bracketClawGrad)" 
+          stroke-width="8" 
+          stroke-linecap="round"
+          fill="none"/>
+    <!-- Point (claw tip) -->
+    <path d="M20 42 L35 50 L20 58" 
+          stroke="url(#bracketClawGrad)" 
+          stroke-width="8" 
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          fill="none"/>
+    <!-- Lower curve -->
+    <path d="M20 58
+             L25 65
+             Q30 75, 25 85
+             Q20 95, 5 95" 
+          stroke="url(#bracketClawGrad)" 
+          stroke-width="8" 
+          stroke-linecap="round"
+          fill="none"/>
+  </g>
+</svg>

package/dist/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

package/dist/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

package/dist/public/logo-bracket-claw.svg

@@ -0,0 +1,69 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 110">
+  <defs>
+    <linearGradient id="bracketClawGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#E63946"/>
+      <stop offset="100%" style="stop-color:#C1121F"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- Code bracket that IS a lobster claw -->
+  <!-- The { bracket, but the curves are pincer-shaped -->
+  
+  <!-- Left bracket-claw -->
+  <g transform="translate(10, 5)">
+    <!-- Upper pincer/curve of bracket -->
+    <path d="M35 5 
+             Q20 5, 15 15
+             Q10 25, 15 35
+             L20 42" 
+          stroke="url(#bracketClawGrad)" 
+          stroke-width="8" 
+          stroke-linecap="round"
+          fill="none"/>
+    <!-- Point of bracket (claw tip) -->
+    <path d="M20 42 L5 50 L20 58" 
+          stroke="url(#bracketClawGrad)" 
+          stroke-width="8" 
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          fill="none"/>
+    <!-- Lower pincer/curve of bracket -->
+    <path d="M20 58
+             L15 65
+             Q10 75, 15 85
+             Q20 95, 35 95" 
+          stroke="url(#bracketClawGrad)" 
+          stroke-width="8" 
+          stroke-linecap="round"
+          fill="none"/>
+  </g>
+  
+  <!-- Right bracket-claw (mirrored) -->
+  <g transform="translate(65, 5)">
+    <!-- Upper pincer/curve -->
+    <path d="M5 5 
+             Q20 5, 25 15
+             Q30 25, 25 35
+             L20 42" 
+          stroke="url(#bracketClawGrad)" 
+          stroke-width="8" 
+          stroke-linecap="round"
+          fill="none"/>
+    <!-- Point (claw tip) -->
+    <path d="M20 42 L35 50 L20 58" 
+          stroke="url(#bracketClawGrad)" 
+          stroke-width="8" 
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          fill="none"/>
+    <!-- Lower curve -->
+    <path d="M20 58
+             L25 65
+             Q30 75, 25 85
+             Q20 95, 5 95" 
+          stroke="url(#bracketClawGrad)" 
+          stroke-width="8" 
+          stroke-linecap="round"
+          fill="none"/>
+  </g>
+</svg>

package/dist/public/logo-icon.svg

@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <defs>
+    <linearGradient id="clawGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#E63946"/>
+      <stop offset="100%" style="stop-color:#C1121F"/>
+    </linearGradient>
+    <linearGradient id="oceanGrad" x1="0%" y1="100%" x2="0%" y2="0%">
+      <stop offset="0%" style="stop-color:#1D3557"/>
+      <stop offset="100%" style="stop-color:#457B9D"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- Background circle -->
+  <circle cx="50" cy="50" r="46" fill="url(#oceanGrad)"/>
+  
+  <!-- Lobster Claw - Stylized pincer forming a "C" shape -->
+  <g transform="translate(18, 18) scale(0.65)">
+    <!-- Upper pincer -->
+    <path d="M15 40 Q25 5, 60 12 Q85 18, 92 45 Q88 55, 72 60" 
+          fill="url(#clawGrad)" stroke="none"/>
+    <!-- Lower pincer -->
+    <path d="M15 60 Q25 95, 60 88 Q85 82, 92 55 Q88 45, 72 40" 
+          fill="url(#clawGrad)" stroke="none"/>
+    <!-- Claw joint -->
+    <ellipse cx="18" cy="50" rx="18" ry="25" fill="url(#clawGrad)"/>
+    <!-- Inner gap (creates pincer opening) -->
+    <ellipse cx="65" cy="50" rx="8" ry="12" fill="url(#oceanGrad)"/>
+    <!-- Highlight -->
+    <path d="M25 35 Q35 18, 55 22" stroke="#F8B4B8" stroke-width="3" fill="none" stroke-linecap="round" opacity="0.7"/>
+  </g>
+</svg>