zugzbot 1.0.20 → 1.0.22

package/.opencode/oh-my-design/web/src/app/api/og/playground/route.tsx

@@ -1,179 +0,0 @@
-/**
- * Dynamic OG image for Playground share URLs.
- *
- * GET /api/og/playground?c=<compact-state> → 1200×630 PNG
- *
- * Renders a simple, Playground-branded card showing the user's brand name,
- * primary color block, and mood. If the `c` param is missing or malformed,
- * falls back to a generic Playground card so the route never 500s on a
- * shared link.
- */
-
-import { ImageResponse } from "next/og";
-import { NextRequest, NextResponse } from "next/server";
-import { decodeState } from "@/lib/playground/codec";
-import { MOOD_DEFAULTS } from "@/lib/playground/rules/mood";
-
-export const runtime = "edge";
-
-// Dev-only gate — matches /playground route. Returns 404 in preview/prod.
-const IS_DEV = process.env.NODE_ENV !== "production";
-
-function contrastForeground(hex: string): string {
-  const m = hex.replace("#", "").match(/.{2}/g);
-  if (!m) return "#ffffff";
-  const [r, g, b] = m.map((x) => parseInt(x, 16));
-  const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  return lum > 0.6 ? "#0a0a0a" : "#ffffff";
-}
-
-export async function GET(req: NextRequest) {
-  if (!IS_DEV) {
-    return new NextResponse("Not Found", { status: 404 });
-  }
-  const { searchParams } = new URL(req.url);
-  const compact = searchParams.get("c");
-  const state = compact ? decodeState(compact) : null;
-
-  const name = state?.name.trim() || "Your Design System";
-  const mood = state?.mood ?? "sharp";
-  const primary = state?.primary ?? MOOD_DEFAULTS.sharp.primary;
-  const tagline = state?.tagline || "Designed in oh-my-design Playground";
-  const fg = contrastForeground(primary);
-
-  return new ImageResponse(
-    (
-      <div
-        style={{
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "space-between",
-          padding: "72px",
-          background: "#fafafa",
-          fontFamily: "system-ui, sans-serif",
-        }}
-      >
-        {/* Top: brand chip + primary color swatch */}
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: 24,
-          }}
-        >
-          <div
-            style={{
-              width: 120,
-              height: 120,
-              borderRadius: 24,
-              background: primary,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              color: fg,
-              fontSize: 72,
-              fontWeight: 700,
-              letterSpacing: "-0.02em",
-            }}
-          >
-            {(name[0] || "?").toUpperCase()}
-          </div>
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              gap: 8,
-            }}
-          >
-            <div
-              style={{
-                fontSize: 28,
-                fontWeight: 500,
-                color: "#71717a",
-                letterSpacing: "0.08em",
-                textTransform: "uppercase",
-              }}
-            >
-              {mood}
-            </div>
-            <div
-              style={{
-                fontSize: 22,
-                fontFamily: "monospace",
-                color: "#52525b",
-              }}
-            >
-              {primary}
-            </div>
-          </div>
-        </div>
-
-        {/* Middle: name + tagline */}
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            gap: 20,
-          }}
-        >
-          <div
-            style={{
-              fontSize: 96,
-              fontWeight: 700,
-              color: "#09090b",
-              letterSpacing: "-0.03em",
-              lineHeight: 1,
-              maxWidth: "100%",
-            }}
-          >
-            {name.length > 40 ? name.slice(0, 37) + "…" : name}
-          </div>
-          <div
-            style={{
-              fontSize: 32,
-              color: "#52525b",
-              lineHeight: 1.3,
-              maxWidth: "90%",
-            }}
-          >
-            {tagline.length > 80 ? tagline.slice(0, 77) + "…" : tagline}
-          </div>
-        </div>
-
-        {/* Bottom: OMD watermark */}
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-          }}
-        >
-          <div
-            style={{
-              fontSize: 20,
-              fontWeight: 600,
-              color: "#18181b",
-              letterSpacing: "-0.01em",
-            }}
-          >
-            oh-my-design / playground
-          </div>
-          <div
-            style={{
-              fontSize: 18,
-              color: "#a1a1aa",
-            }}
-          >
-            DESIGN.md · OmD v0.1
-          </div>
-        </div>
-      </div>
-    ),
-    {
-      width: 1200,
-      height: 630,
-    },
-  );
-}

package/.opencode/oh-my-design/web/src/app/api/references/[id]/route.ts

@@ -1,162 +0,0 @@
-import { NextResponse } from 'next/server';
-import { readFileSync, existsSync } from 'fs';
-import { join } from 'path';
-
-const HEX_RE = /^#[0-9a-f]{3,8}$/i;
-const KEYWORD_RE = /^(serif|sans-serif|monospace|var|inherit|system-ui|none)$/i;
-
-function isValidFontName(s: string): boolean {
-  if (!s || s.length > 50) return false;
-  if (HEX_RE.test(s)) return false;
-  if (KEYWORD_RE.test(s)) return false;
-  return true;
-}
-
-function cleanFontToken(raw: string): string {
-  return raw.replace(/['"`]/g, '').replace(/[;].*/, '').trim();
-}
-
-function extractPrimaryFont(md: string): string {
-  const sec3 = md.match(/## 3\. Typography[\s\S]*?(?=## 4\.)/i)?.[0] ?? md;
-
-  // 1. **Primary** label
-  const primary = sec3.match(/\*\*Primary[^*]*\*\*:?\s*`([^`]+)`/i);
-  if (primary) {
-    const first = cleanFontToken(primary[1].split(',')[0]);
-    if (isValidFontName(first)) return first;
-  }
-
-  // 2. **Display** / **Sans** / **Heading** label
-  const display = sec3.match(/\*\*(?:Display|Sans|Heading)[^*]*\*\*:?\s*`([^`]+)`/i);
-  if (display) {
-    const first = cleanFontToken(display[1].split(',')[0]);
-    if (isValidFontName(first)) return first;
-  }
-
-  // 3. font-family declaration (first non-keyword)
-  for (const m of sec3.matchAll(/font-family:\s*([^;\n]+)/gi)) {
-    for (const tok of m[1].split(',')) {
-      const cleaned = cleanFontToken(tok);
-      if (isValidFontName(cleaned)) return cleaned;
-    }
-  }
-
-  // 4. First capitalized backticked font name (heuristic)
-  for (const m of sec3.matchAll(/`([A-Z][A-Za-z][\w\s\-]{2,40})`/g)) {
-    const name = m[1].trim();
-    if (name.length > 35) continue;
-    if (/^(?:Display|Heading|Body|Caption|Small|Large|Medium|Regular|Bold|Light|Italic|Mono|Sans|Serif|Variable|Pro|UI|Inter Placeholder|Inter Fallback|Fallback|XS|S|M|L|XL|XXL|SemiBold|ExtraBold|Black|Thin)$/i.test(name)) continue;
-    if (/^[0-9]/.test(name)) continue;
-    if (isValidFontName(name)) return name;
-  }
-
-  return 'Inter';
-}
-
-function extractMonoFont(md: string): string | undefined {
-  const sec3 = md.match(/## 3\. Typography[\s\S]*?(?=## 4\.)/i)?.[0] ?? md;
-  // Explicit Monospace label
-  const m = sec3.match(/\*\*Monospace[^*]*\*\*:?\s*`([^`]+)`/i)
-    ?? sec3.match(/\*\*Mono[^*]*\*\*:?\s*`([^`]+)`/i);
-  if (m) {
-    const first = cleanFontToken(m[1].split(',')[0]);
-    if (isValidFontName(first)) return first;
-  }
-  return undefined;
-}
-
-export async function GET(
-  _req: Request,
-  { params }: { params: Promise<{ id: string }> },
-) {
-  const { id } = await params;
-  const mdPath = join(process.cwd(), 'references', id, 'DESIGN.md');
-  if (!existsSync(mdPath)) {
-    return NextResponse.json({ error: 'Reference not found' }, { status: 404 });
-  }
-
-  const designMd = readFileSync(mdPath, 'utf-8');
-
-  // Extract key info
-  const primaryMatch = designMd.match(/## 2\. Color[\s\S]*?\*\*([^*]+)\*\*\s*\(`(#[0-9a-fA-F]{6})`\).*?(?:primary|brand|CTA|main)/i);
-  const primary = primaryMatch ? primaryMatch[2] : '#6366f1';
-
-  // Background extraction — priority ladder:
-  //  (1) An explicit **Name** (`#hex`) entry in §2 whose prose role-labels it
-  //      as the page background / primary canvas. This wins across §2
-  //      subsections — Claude/Framer/Expo put it under Surface & Background,
-  //      Runway puts it under Primary.
-  //  (2) Quick Color Reference → Background row.
-  //  (3) First **Name** (`#hex`) entry in `### Surface & Background`.
-  //  (4) Default #ffffff.
-  //
-  // The old logic anchored on "Pure White|page background" which matched text
-  // colors first for dark-brand refs, forcing many of them (Claude, RunwayML,
-  // Sanity, ClickHouse, Composio, HashiCorp, Sentry, Expo, VoltAgent, Resend,
-  // SpaceX, Lamborghini) to render as white-canvas when their DESIGN.md
-  // explicitly declared a dark canvas.
-  const s2Full = designMd.match(/## 2\. Color[\s\S]*?(?=## 3\.)/i)?.[0] ?? '';
-  let background = '#ffffff';
-
-  // Background extraction — 4-tier priority ladder.
-  //
-  // Tier 1 — phrase-labelled hex anywhere in §2 (limited to first 2 000 chars to avoid
-  //           "in light mode" tail sections in dark-first refs like Linear).
-  //           Catches: "Page background", "primary canvas", "main canvas", etc.
-  const s2Early = s2Full.slice(0, 2000);
-  const roleRe = /\*\*[^*]+\*\*\s*\(`(#[0-9a-fA-F]{6})`\)[^\n]{0,300}?(?:primary\s+page\s+background|primary\s+canvas|main\s+canvas|default\s+canvas|page\s+background|primary\s+background|the\s+primary\s+(?:page\s+)?(?:canvas|background)|page\s+canvas|void\s+canvas|main\s+page\s+background)/i;
-  const tier1 = s2Early.match(roleRe);
-  if (tier1) {
-    background = tier1[1];
-  } else {
-    // Tier 2 — Background/Surface subsection first meaningful hex
-    //           "Meaningful" = description does NOT mention overlay/badge/pill/selection/frost/glass.
-    //           Handles "Background Surfaces" (Linear) and "Surface & Background" (Cohere/Expo).
-    const bgSectionContent = s2Full.match(
-      /###[^\n]*\b(?:Background|Surface|Canvas)\b[^\n]*\n([\s\S]*?)(?=\n###|\n## |$)/i
-    )?.[1] ?? '';
-    const hexEntries = [...bgSectionContent.matchAll(/\*\*[^*]+\*\*\s*\(`(#[0-9a-fA-F]{6})`\)[^\n]*/g)];
-    const meaningfulHex = hexEntries.find(
-      (m) => !/overlay|badge|pill|selection|frost|glass|alpha|backdrop/i.test(m[0])
-    );
-    if (meaningfulHex) {
-      background = meaningfulHex[1];
-    } else if (bgSectionContent) {
-      // Section exists but all rgba/hsla or only overlay entries → fallback to dark-surface hex in §2
-      const darkFallback = s2Full.match(
-        /\*\*[^*]+\*\*\s*\(`(#[0-9a-fA-F]{6})`\)[^\n]*(?:dark\s+(?:\w+\s+)?(?:surface|background|canvas|interactive)|deepest\s+surface|button\s+background[^\n]*dark)/i
-      );
-      if (darkFallback) background = darkFallback[1];
-    } else {
-      // Tier 3 — Quick Color Reference table (search within §2 only to avoid
-      //           Philosophy layer / §10-15 false positives in full designMd)
-      const quickBg = s2Full.match(/Quick Color Reference[\s\S]*?Background.*?`(#[0-9a-fA-F]{6})`/i);
-      if (quickBg) background = quickBg[1];
-    }
-  }
-
-  const fgMatch = designMd.match(/(?:heading|primary text).*?`(#[0-9a-fA-F]{6})`/i);
-  const foreground = fgMatch ? fgMatch[1] : '#09090b';
-
-  // Broader font extraction — looks at §3 with multiple patterns to avoid Inter fallback
-  // for refs that don't use the strict **Primary**: format.
-  const fontFamily = extractPrimaryFont(designMd);
-  const mono = extractMonoFont(designMd);
-
-  const weightMatch = designMd.match(/Display.*?\|\s*(\d{3})\s*\|/);
-  const headingWeight = weightMatch ? weightMatch[1] : '600';
-
-  const radiusMatch = designMd.match(/(?:border-radius|radius).*?(\d+px(?:\s*[-–]\s*\d+px)?)/i);
-  const radius = radiusMatch ? radiusMatch[1] : '6px';
-
-  const accentMatch = designMd.match(/(?:accent|secondary).*?`(#[0-9a-fA-F]{6})`/i);
-  const borderMatch = designMd.match(/(?:border.*?default|border.*?standard).*?`(#[0-9a-fA-F]{6})`/i);
-
-  const mood = designMd.match(/## 1\. Visual Theme.*?\n([\s\S]*?)(?=## 2\.)/)?.[1]?.trim().split('\n\n')[0] || '';
-
-  return NextResponse.json({
-    id, designMd, primary, background, foreground,
-    fontFamily, mono, headingWeight, radius, mood,
-    accent: accentMatch?.[1], border: borderMatch?.[1],
-  });
-}

package/.opencode/oh-my-design/web/src/app/api/references/route.ts

@@ -1,142 +0,0 @@
-import { NextResponse } from 'next/server';
-import { readFileSync, existsSync } from 'fs';
-import { join } from 'path';
-import { REGISTRY } from '@/data/registry.generated';
-import { counterKey, getRedis } from '@/lib/kv';
-
-// Re-resolve the HOT set at most every 30s (matches /api/leaderboard) so the
-// builder grid arrives already hot-first + badged, without hammering KV on
-// every page load.
-export const revalidate = 30;
-
-// Number of top-selected references that earn the HOT treatment — mirrors the
-// `useHotRefs(5)` default used elsewhere so the two surfaces agree.
-const HOT_LIMIT = 5;
-
-// Display labels for category slugs. Sort priority lives in `CATEGORY_ORDER`.
-const CATEGORY_LABELS: Record<string, string> = {
-  fintech: 'Fintech',
-  'developer-tools': 'Developer Tools',
-  'backend-devops': 'Backend & DevOps',
-  productivity: 'Productivity',
-  'design-tools': 'Design Tools',
-  ai: 'AI & LLM',
-  'consumer-tech': 'Consumer Tech',
-  marketing: 'Marketing',
-  automotive: 'Automotive',
-  ecommerce: 'E-commerce',
-  government: 'Government',
-  education: 'Education',
-  healthcare: 'Healthcare',
-  saas: 'Productivity',
-};
-
-const COUNTRY_LABELS: Record<string, string> = {
-  KR: 'Korea',
-  TW: 'Taiwan',
-  JP: 'Japan',
-  FR: 'France',
-  IT: 'Italy',
-  DE: 'Germany',
-  UK: 'UK',
-  US: 'United States',
-};
-
-function extractPrimaryColor(md: string, fallback: string): string {
-  const section2 = md.match(/## 2\. Color Palette.*?\n([\s\S]*?)(?=## 3\.)/);
-  if (section2) {
-    const m = section2[1].match(/\*\*([^*]+)\*\*\s*\(`(#[0-9a-fA-F]{6})`\).*?(?:primary|brand|CTA|main)/i);
-    if (m) return m[2];
-    const first = section2[1].match(/`(#[0-9a-fA-F]{6})`/);
-    if (first) return first[1];
-  }
-  return fallback;
-}
-
-function extractBackground(md: string): string {
-  const quickRef = md.match(/Quick Color Reference[\s\S]*?(?:Page\s+)?Background.*?[(`](#[0-9a-fA-F]{6})[)`]/i);
-  if (quickRef) return quickRef[1];
-  const s2 = md.match(/## 2\. Color.*?\n([\s\S]*?)(?=## 3\.)/);
-  if (s2) {
-    const bg = s2[1].match(/(?:Pure White|Pure Black|page background).*?`(#[0-9a-fA-F]{6})`/i);
-    if (bg) return bg[1];
-  }
-  const reverseMatch = md.match(/`(#[0-9a-fA-F]{6})`[^.]*?(?:primary\s+)?page\s+background/i);
-  if (reverseMatch) return reverseMatch[1];
-  if (md.match(/dark.mode.(?:native|first)/i)) {
-    const d = md.match(/(?:marketing|deepest|canvas).*?`(#[0-9a-fA-F]{6})`/i);
-    if (d) return d[1];
-  }
-  return '#ffffff';
-}
-
-export async function GET() {
-  const refDir = join(process.cwd(), 'references');
-  if (!existsSync(refDir)) {
-    return NextResponse.json({ error: 'references/ not found' }, { status: 500 });
-  }
-
-  // Resolve HOT server-side from the same `select` leaderboard the
-  // /api/leaderboard endpoint serves. Baking it into this single response
-  // (flag + ordering) means the grid never reflows after first paint.
-  // Degrades silently to "no hot refs" when KV is unavailable (local dev).
-  const hotIds = new Set<string>();
-  const redis = getRedis();
-  if (redis) {
-    try {
-      const raw = await redis.zrange<(string | number)[]>(counterKey('select'), 0, HOT_LIMIT - 1, {
-        rev: true,
-        withScores: true,
-      });
-      for (let i = 0; i < raw.length; i += 2) {
-        if (Number(raw[i + 1]) > 0) hotIds.add(String(raw[i]));
-      }
-    } catch {
-      /* KV hiccup → no hot pills; the list still renders normally. */
-    }
-  }
-
-  const entries = REGISTRY
-    .filter(e => existsSync(join(refDir, e.id, 'DESIGN.md')))
-    .map(e => {
-      const md = readFileSync(join(refDir, e.id, 'DESIGN.md'), 'utf-8');
-      // Prefer the reconciled machine-readable token block when present; fall
-      // back to the legacy prose-regex extraction for refs without tokens.
-      return {
-        id: e.id,
-        name: e.displayName,
-        category: CATEGORY_LABELS[e.category] || e.category,
-        country: COUNTRY_LABELS[e.country] || e.country,
-        primaryColor: e.tokens?.colors?.primary || e.tokens?.color?.primary || extractPrimaryColor(md, e.primaryColor),
-        background: e.tokens?.colors?.canvas || e.tokens?.colors?.background || e.tokens?.color?.background || extractBackground(md),
-        hot: hotIds.has(e.id),
-        tokens: e.tokens ?? null,
-      };
-    })
-    .sort((a, b) => {
-      // HOT references float to the top, grouped together. Within the hot and
-      // non-hot partitions the existing country/category order is preserved.
-      if (a.hot !== b.hot) return a.hot ? -1 : 1;
-      // Asian markets first (Korea → Taiwan → Japan), then everything else by industry order.
-      const countryPriority = ['Korea', 'Taiwan', 'Japan'];
-      const ac = countryPriority.indexOf(a.country);
-      const bc = countryPriority.indexOf(b.country);
-      if (ac !== -1 || bc !== -1) {
-        if (ac === -1) return 1;
-        if (bc === -1) return -1;
-        return ac - bc || a.name.localeCompare(b.name);
-      }
-      const order = [
-        'AI & LLM', 'Design Tools', 'Developer Tools',
-        'Productivity', 'Consumer Tech', 'Fintech', 'Backend & DevOps',
-        'E-commerce', 'Automotive', 'Marketing', 'Government',
-      ];
-      const ai = order.indexOf(a.category);
-      const bi = order.indexOf(b.category);
-      const oa = ai === -1 ? 999 : ai;
-      const ob = bi === -1 ? 999 : bi;
-      return oa - ob || a.name.localeCompare(b.name);
-    });
-
-  return NextResponse.json(entries);
-}

package/.opencode/oh-my-design/web/src/app/api/track/route.ts

@@ -1,30 +0,0 @@
-import { NextResponse } from "next/server";
-import { counterKey, getRedis, REFERENCE_ID_RE, TRACK_EVENTS, type TrackEvent } from "@/lib/kv";
-
-export const runtime = "edge";
-
-export async function POST(req: Request) {
-  let body: unknown;
-  try {
-    body = await req.json();
-  } catch {
-    return NextResponse.json({ ok: false, reason: "invalid_json" }, { status: 400 });
-  }
-
-  const { event, reference } = (body ?? {}) as { event?: string; reference?: string };
-
-  if (typeof event !== "string" || !TRACK_EVENTS.includes(event as TrackEvent)) {
-    return NextResponse.json({ ok: false, reason: "invalid_event" }, { status: 400 });
-  }
-  if (typeof reference !== "string" || !REFERENCE_ID_RE.test(reference)) {
-    return NextResponse.json({ ok: false, reason: "invalid_reference" }, { status: 400 });
-  }
-
-  const redis = getRedis();
-  if (!redis) {
-    return NextResponse.json({ ok: false, reason: "kv_disabled" });
-  }
-
-  await redis.zincrby(counterKey(event as TrackEvent), 1, reference);
-  return NextResponse.json({ ok: true });
-}

package/.opencode/oh-my-design/web/src/app/builder/layout.tsx

@@ -1,43 +0,0 @@
-import type { Metadata } from "next";
-
-const siteUrl = "https://oh-my-design.kr";
-
-export const metadata: Metadata = {
-  title: "Design System Builder — oh-my-design",
-  description:
-    "Build your DESIGN.md from 246 real company design systems. Choose from Stripe, Vercel, Linear, Apple, and more. Customize colors, typography, radius, and spacing with an interactive A/B wizard — each ref ships a full brand philosophy (voice, principles, personas) for AI coding agents.",
-  alternates: {
-    canonical: `${siteUrl}/builder`,
-  },
-  openGraph: {
-    title: "Design System Builder — oh-my-design",
-    description:
-      "Build your DESIGN.md from 246 real company design systems, each with a full brand philosophy. Interactive A/B wizard.",
-    type: "website",
-    url: `${siteUrl}/builder`,
-    siteName: "oh-my-design",
-    images: [
-      {
-        url: "/og-image.png",
-        width: 1200,
-        height: 630,
-        alt: "oh-my-design — Design System Builder",
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "Design System Builder — oh-my-design",
-    description:
-      "Build your DESIGN.md from 246 real company design systems. Every ref ships a full brand philosophy. A/B wizard.",
-    images: ["/og-image.png"],
-  },
-};
-
-export default function BuilderLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return children;
-}