vibecarbon 0.1.0

package/carbon/src/client/pages/ApiDocs.tsx

@@ -0,0 +1,76 @@
+import { ApiReferenceReact } from '@scalar/api-reference-react';
+import '@scalar/api-reference-react/style.css';
+import './api-docs.css';
+import { Nav } from '@/components/Nav';
+import { SEO } from '@/components/SEO';
+
+export default function ApiDocs() {
+  return (
+    <div className="min-h-screen bg-background">
+      <Nav />
+      <SEO title="API Reference" description="Interactive API documentation" />
+
+      <div className="scalar-wrapper pt-20 mx-auto max-w-7xl px-6">
+        <ApiReferenceReact
+          configuration={{
+            url: '/api/openapi.json',
+            darkMode: true,
+            hideDownloadButton: true,
+            customCss: `
+              /* Map app theme to Scalar CSS variables */
+              .dark-mode {
+                --scalar-font: 'Noto Sans Variable', 'Noto Sans', system-ui, sans-serif;
+                --scalar-font-code: 'JetBrains Mono', ui-monospace, monospace;
+
+                /* Text colors */
+                --scalar-color-1: oklch(0.98 0 0);
+                --scalar-color-2: oklch(0.707 0.022 261.325);
+                --scalar-color-3: oklch(0.55 0.02 261);
+                --scalar-color-accent: oklch(0.82 0.14 192);
+
+                /* Backgrounds — transparent so the app background shows through */
+                --scalar-background-1: transparent;
+                --scalar-background-2: oklch(0.18 0.025 258 / 0.5);
+                --scalar-background-3: oklch(0.22 0.03 255 / 0.5);
+                --scalar-background-accent: oklch(0.82 0.14 192 / 0.08);
+
+                /* Border */
+                --scalar-border-color: oklch(0.33 0.025 195 / 0.6);
+
+                /* Radius — match app's --radius system */
+                --scalar-radius: var(--radius);
+                --scalar-radius-lg: var(--radius-xl);
+
+                /* Sidebar */
+                --scalar-sidebar-background-1: transparent;
+                --scalar-sidebar-border-color: transparent;
+                --scalar-sidebar-color-1: oklch(0.98 0 0);
+                --scalar-sidebar-color-2: oklch(0.707 0.022 261.325);
+                --scalar-sidebar-color-active: oklch(0.82 0.14 192);
+                --scalar-sidebar-item-hover-background: oklch(0.18 0.025 258);
+                --scalar-sidebar-item-active-background: oklch(0.22 0.03 255);
+                --scalar-sidebar-search-background: oklch(0.18 0.025 258);
+                --scalar-sidebar-search-border-color: oklch(0.33 0.025 195 / 0.4);
+                --scalar-sidebar-search-color: oklch(0.707 0.022 261.325);
+              }
+
+              .light-mode {
+                --scalar-font: 'Noto Sans Variable', 'Noto Sans', system-ui, sans-serif;
+                --scalar-font-code: 'JetBrains Mono', ui-monospace, monospace;
+                --scalar-color-accent: oklch(0.55 0.12 192);
+                --scalar-radius: var(--radius);
+                --scalar-radius-lg: var(--radius-xl);
+              }
+
+              /* Layout variables */
+              .scalar-api-reference {
+                --scalar-custom-header-height: 5rem;
+                --scalar-sidebar-width: 14rem;
+              }
+            `,
+          }}
+        />
+      </div>
+    </div>
+  );
+}

package/carbon/src/client/pages/AuthCallback.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { supabase } from '../lib/supabase';
+
+// This page handles OAuth callbacks from Supabase Auth
+export default function AuthCallback() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const handleCallback = async () => {
+      const { error } = await supabase.auth.getSession();
+
+      if (error) {
+        console.error('Auth callback error:', error);
+        navigate('/login?error=auth_failed');
+        return;
+      }
+
+      // Successful authentication - redirect to dashboard
+      navigate('/dashboard', { replace: true });
+    };
+
+    handleCallback();
+  }, [navigate]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background">
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4" />
+        <p className="text-muted-foreground">Completing sign in...</p>
+      </div>
+    </div>
+  );
+}

package/carbon/src/client/pages/Blog.tsx

@@ -0,0 +1,167 @@
+import { ArrowLeft, Calendar, User } from 'lucide-react';
+import { Link, useParams } from 'react-router-dom';
+import { PROJECT_NAME, Wordmark } from '@/components/Logo';
+import { Nav } from '@/components/Nav';
+import { SEO } from '@/components/SEO';
+import { Button } from '@/components/ui/button';
+import { getPost, posts } from '@/lib/blog';
+
+export function BlogIndex() {
+  return (
+    <div className="min-h-screen bg-background">
+      <Nav />
+      <SEO title="Blog" description={`Latest updates and guides from ${PROJECT_NAME}.`} />
+
+      <main className="mx-auto max-w-3xl px-6 pt-32 pb-24">
+        <h1 className="mb-2 text-4xl font-black tracking-tight">Blog</h1>
+        <p className="mb-12 text-lg text-muted-foreground">
+          Updates, guides, and insights from the team.
+        </p>
+
+        <div className="space-y-8">
+          {posts.map((post) => (
+            <article key={post.slug} className="group">
+              <Link
+                to={`/blog/${post.slug}`}
+                className="block rounded-xl border p-6 transition-colors hover:bg-muted/50"
+              >
+                <h2 className="mb-2 text-xl font-bold tracking-tight group-hover:text-primary transition-colors">
+                  {post.frontmatter.title}
+                </h2>
+                <p className="mb-3 text-muted-foreground">{post.frontmatter.description}</p>
+                <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                  <span className="flex items-center gap-1">
+                    <Calendar className="size-3.5" />
+                    {formatDate(post.frontmatter.date)}
+                  </span>
+                  {post.frontmatter.author && (
+                    <span className="flex items-center gap-1">
+                      <User className="size-3.5" />
+                      {post.frontmatter.author}
+                    </span>
+                  )}
+                </div>
+              </Link>
+            </article>
+          ))}
+
+          {posts.length === 0 && (
+            <p className="py-12 text-center text-muted-foreground">
+              No posts yet. Check back soon!
+            </p>
+          )}
+        </div>
+      </main>
+
+      <BlogFooter />
+    </div>
+  );
+}
+
+export function BlogPost() {
+  const { slug } = useParams<{ slug: string }>();
+  const post = slug ? getPost(slug) : undefined;
+
+  if (!post) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Nav />
+        <main className="mx-auto max-w-3xl px-6 pt-32 pb-24 text-center">
+          <h1 className="mb-4 text-2xl font-bold">Post not found</h1>
+          <Button variant="outline" asChild>
+            <Link to="/blog" className="inline-flex items-center gap-2">
+              <ArrowLeft className="size-4 shrink-0" />
+              Back to blog
+            </Link>
+          </Button>
+        </main>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Nav />
+      <SEO title={post.frontmatter.title} description={post.frontmatter.description} />
+
+      <main className="mx-auto max-w-3xl px-6 pt-32 pb-24">
+        <Link
+          to="/blog"
+          className="mb-8 inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft className="size-3.5" />
+          Back to blog
+        </Link>
+
+        <header className="mb-10">
+          <h1 className="mb-3 text-4xl font-black tracking-tight">{post.frontmatter.title}</h1>
+          <div className="flex items-center gap-4 text-sm text-muted-foreground">
+            <span className="flex items-center gap-1">
+              <Calendar className="size-3.5" />
+              {formatDate(post.frontmatter.date)}
+            </span>
+            {post.frontmatter.author && (
+              <span className="flex items-center gap-1">
+                <User className="size-3.5" />
+                {post.frontmatter.author}
+              </span>
+            )}
+          </div>
+        </header>
+
+        <article className="prose prose-invert max-w-none">
+          <post.Component />
+        </article>
+
+        <div className="mt-16 border-t pt-8">
+          <Button variant="outline" asChild>
+            <Link to="/blog" className="inline-flex items-center gap-2">
+              <ArrowLeft className="size-4 shrink-0" />
+              All posts
+            </Link>
+          </Button>
+        </div>
+      </main>
+
+      <BlogFooter />
+    </div>
+  );
+}
+
+function BlogFooter() {
+  return (
+    <footer className="border-t border-border py-8">
+      <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 px-6 sm:flex-row">
+        <Wordmark size="sm" />
+        <div className="flex items-center gap-6">
+          <Link
+            to="/"
+            className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+          >
+            Home
+          </Link>
+          <Link
+            to="/blog"
+            className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+          >
+            Blog
+          </Link>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+/** Default export for React.lazy() route-level code splitting */
+export default function BlogRoute() {
+  const { slug } = useParams<{ slug: string }>();
+  return slug ? <BlogPost /> : <BlogIndex />;
+}

package/carbon/src/client/pages/Changelog.tsx

@@ -0,0 +1,171 @@
+import { ArrowLeft, Calendar, Tag } from 'lucide-react';
+import { Link, useParams } from 'react-router-dom';
+import { PROJECT_NAME, Wordmark } from '@/components/Logo';
+import { Nav } from '@/components/Nav';
+import { SEO } from '@/components/SEO';
+import { Button } from '@/components/ui/button';
+import { entries, getEntry } from '@/lib/changelog';
+
+export function ChangelogIndex() {
+  return (
+    <div className="min-h-screen bg-background">
+      <Nav />
+      <SEO title="Changelog" description={`What's new in ${PROJECT_NAME}.`} />
+
+      <main className="mx-auto max-w-3xl px-6 pt-32 pb-24">
+        <h1 className="mb-2 text-4xl font-black tracking-tight">Changelog</h1>
+        <p className="mb-12 text-lg text-muted-foreground">
+          New features, improvements, and fixes.
+        </p>
+
+        <div className="space-y-8">
+          {entries.map((entry) => (
+            <article key={entry.slug} className="group">
+              <Link
+                to={`/changelog/${entry.slug}`}
+                className="block rounded-xl border p-6 transition-colors hover:bg-muted/50"
+              >
+                <h2 className="mb-2 text-xl font-bold tracking-tight group-hover:text-primary transition-colors">
+                  {entry.frontmatter.title}
+                </h2>
+                <p className="mb-3 text-muted-foreground">{entry.frontmatter.description}</p>
+                <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                  <span className="flex items-center gap-1">
+                    <Calendar className="size-3.5" />
+                    {formatDate(entry.frontmatter.date)}
+                  </span>
+                  {entry.frontmatter.version && (
+                    <span className="flex items-center gap-1">
+                      <Tag className="size-3.5" />v{entry.frontmatter.version}
+                    </span>
+                  )}
+                </div>
+              </Link>
+            </article>
+          ))}
+
+          {entries.length === 0 && (
+            <p className="py-12 text-center text-muted-foreground">
+              No changelog entries yet. Check back soon!
+            </p>
+          )}
+        </div>
+      </main>
+
+      <ChangelogFooter />
+    </div>
+  );
+}
+
+export function ChangelogEntry() {
+  const { slug } = useParams<{ slug: string }>();
+  const entry = slug ? getEntry(slug) : undefined;
+
+  if (!entry) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Nav />
+        <main className="mx-auto max-w-3xl px-6 pt-32 pb-24 text-center">
+          <h1 className="mb-4 text-2xl font-bold">Entry not found</h1>
+          <Button variant="outline" asChild>
+            <Link to="/changelog" className="inline-flex items-center gap-2">
+              <ArrowLeft className="size-4 shrink-0" />
+              Back to changelog
+            </Link>
+          </Button>
+        </main>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Nav />
+      <SEO title={entry.frontmatter.title} description={entry.frontmatter.description} />
+
+      <main className="mx-auto max-w-3xl px-6 pt-32 pb-24">
+        <Link
+          to="/changelog"
+          className="mb-8 inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft className="size-3.5" />
+          Back to changelog
+        </Link>
+
+        <header className="mb-10">
+          <h1 className="mb-3 text-4xl font-black tracking-tight">{entry.frontmatter.title}</h1>
+          <div className="flex items-center gap-4 text-sm text-muted-foreground">
+            <span className="flex items-center gap-1">
+              <Calendar className="size-3.5" />
+              {formatDate(entry.frontmatter.date)}
+            </span>
+            {entry.frontmatter.version && (
+              <span className="flex items-center gap-1">
+                <Tag className="size-3.5" />v{entry.frontmatter.version}
+              </span>
+            )}
+          </div>
+        </header>
+
+        <article className="prose prose-invert max-w-none">
+          <entry.Component />
+        </article>
+
+        <div className="mt-16 border-t pt-8">
+          <Button variant="outline" asChild>
+            <Link to="/changelog" className="inline-flex items-center gap-2">
+              <ArrowLeft className="size-4 shrink-0" />
+              All releases
+            </Link>
+          </Button>
+        </div>
+      </main>
+
+      <ChangelogFooter />
+    </div>
+  );
+}
+
+function ChangelogFooter() {
+  return (
+    <footer className="border-t border-border py-8">
+      <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 px-6 sm:flex-row">
+        <Wordmark size="sm" />
+        <div className="flex items-center gap-6">
+          <Link
+            to="/"
+            className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+          >
+            Home
+          </Link>
+          <Link
+            to="/blog"
+            className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+          >
+            Blog
+          </Link>
+          <Link
+            to="/changelog"
+            className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+          >
+            Changelog
+          </Link>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+/** Default export for React.lazy() route-level code splitting */
+export default function ChangelogRoute() {
+  const { slug } = useParams<{ slug: string }>();
+  return slug ? <ChangelogEntry /> : <ChangelogIndex />;
+}