zugzbot 1.0.20 → 1.0.22

package/.opencode/oh-my-design/web/src/components/landing-v2/the-wall.tsx

@@ -1,332 +0,0 @@
-"use client";
-
-import {
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type CSSProperties,
-} from "react";
-import { motion } from "framer-motion";
-import { getLogoUrl, getLogoFallbackUrl, isGitHubLogo } from "@/lib/logos";
-import { isLight } from "@/lib/core/color";
-import { V2, BRAND_COLORS, colorForId } from "./tokens";
-
-/* ──────────────────────────── COLOR HELPERS ──────────────────────────── */
-
-const NEAR_BLACK = new Set([
-  "#000000",
-  "#0a0a0f",
-  "#0d0e10",
-  "#0f0f17",
-  "#08090a",
-]);
-
-function luminance(hex: string): number | null {
-  if (!/^#[0-9a-f]{6}$/i.test(hex)) return null;
-  const r = parseInt(hex.slice(1, 3), 16);
-  const g = parseInt(hex.slice(3, 5), 16);
-  const b = parseInt(hex.slice(5, 7), 16);
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-}
-
-function isDarkBrand(c: string) {
-  if (NEAR_BLACK.has(c.toLowerCase())) return true;
-  const l = luminance(c);
-  return l !== null && l < 28;
-}
-
-/* ──────────────────────────── LOGO ──────────────────────────── */
-
-/**
- * Brand logo — mirrors the builder's RefLogo so the Wall reads identically:
- * logo color adapts to the brand-color background luminance (black glyph on
- * light tiles, white on dark), with a primary → favicon → initial-letter
- * fallback chain. GitHub/favicon logos (and any fallback stage) get a frosted
- * ring so raster marks sit cleanly on the brand color.
- */
-function BrandLogo({ id, size = 34 }: { id: string; size?: number }) {
-  const color = colorForId(id);
-  const lightBg = isLight(color);
-  const primary = getLogoUrl(id, lightBg ? "000000" : "ffffff");
-  const fallback = getLogoFallbackUrl(id);
-  const isGh = isGitHubLogo(id);
-  const [stage, setStage] = useState<0 | 1 | 2>(0);
-  const src = stage === 0 ? primary : stage === 1 ? fallback : null;
-
-  if (!src) {
-    return (
-      <div
-        className="flex items-center justify-center rounded-full font-bold"
-        style={{
-          width: size,
-          height: size,
-          fontSize: size * 0.45,
-          background: lightBg ? "rgba(0,0,0,0.08)" : "rgba(255,255,255,0.18)",
-          color: lightBg ? "#1e1e1e" : "#ffffff",
-        }}
-      >
-        {id.charAt(0).toUpperCase()}
-      </div>
-    );
-  }
-
-  const ringed = isGh || stage > 0;
-  return (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img
-      src={src}
-      alt=""
-      loading="lazy"
-      decoding="async"
-      onError={() => setStage((s) => (s < 2 ? ((s + 1) as 0 | 1 | 2) : 2))}
-      className={ringed ? "rounded-full ring-2 ring-white/20 bg-white/10 p-1 object-contain" : "object-contain"}
-      style={{ width: size, height: size }}
-    />
-  );
-}
-
-/* ──────────────────────────── WALL ──────────────────────────── */
-
-export function TheWall() {
-  // BRAND_COLORS holds every catalog brand — use it as the source of truth
-  // (the web design-systems registry is a smaller subset).
-  const cards = useMemo(
-    () =>
-      Object.keys(BRAND_COLORS).sort((a, b) => a.localeCompare(b)),
-    []
-  );
-
-  const sectionRef = useRef<HTMLDivElement>(null);
-  const overlayRef = useRef<HTMLDivElement>(null);
-  const rafRef = useRef<number | null>(null);
-  // Mobile: show a 3-col × 10-row subset, with a "Show more" button to reveal the rest.
-  const [expanded, setExpanded] = useState(false);
-  const MOBILE_COLLAPSED = 30;
-
-  // Cursor-tracked ADDITIVE spotlight — adds brightness to the cursor area
-  // via plus-lighter blending. Outside tiles stay at their resting tone
-  // (no global dimming).
-  useEffect(() => {
-    const section = sectionRef.current;
-    const overlay = overlayRef.current;
-    if (!section || !overlay) return;
-
-    let lastX = -9999;
-    let lastY = -9999;
-    let ticking = false;
-    let visible = false;
-
-    const apply = () => {
-      ticking = false;
-      overlay.style.background = `radial-gradient(circle 320px at ${lastX}px ${lastY}px, rgba(255,255,255,0.16) 0%, rgba(168,156,255,0.06) 35%, transparent 70%)`;
-      overlay.style.opacity = visible ? "1" : "0";
-    };
-
-    const onMove = (e: MouseEvent) => {
-      const rect = section.getBoundingClientRect();
-      lastX = e.clientX - rect.left;
-      lastY = e.clientY - rect.top;
-      visible = true;
-      if (!ticking) {
-        ticking = true;
-        rafRef.current = requestAnimationFrame(apply);
-      }
-    };
-
-    const onLeave = () => {
-      visible = false;
-      if (!ticking) {
-        ticking = true;
-        rafRef.current = requestAnimationFrame(apply);
-      }
-    };
-
-    section.addEventListener("mousemove", onMove);
-    section.addEventListener("mouseleave", onLeave);
-
-    return () => {
-      section.removeEventListener("mousemove", onMove);
-      section.removeEventListener("mouseleave", onLeave);
-      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
-    };
-  }, []);
-
-  return (
-    <section
-      ref={sectionRef}
-      className="relative overflow-hidden py-24"
-      style={{
-        background: V2.bgDark,
-        color: V2.textOnDark,
-      }}
-    >
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-0"
-        style={{
-          background: `radial-gradient(ellipse 70% 40% at 50% 0%, ${V2.primary}10, transparent 65%)`,
-        }}
-      />
-
-      <div className="relative mx-auto max-w-6xl px-4 sm:px-6">
-        <div className="mb-12 text-center">
-          <div
-            className="mb-2 text-[10px] font-semibold uppercase tracking-[0.2em]"
-            style={{ color: V2.accent }}
-          >
-            The wall
-          </div>
-          <h2 className="text-3xl font-bold tracking-tight sm:text-5xl">
-            221 systems. All real.{" "}
-            <span style={{ color: V2.primary }}>All extracted.</span>
-          </h2>
-          <p className="mx-auto mt-4 max-w-xl text-sm text-white/55">
-            Every tile is a real brand with a full DESIGN.md your AI agent can
-            read — browse them all in the catalog.
-          </p>
-        </div>
-
-        <div className="grid grid-cols-3 gap-2.5 sm:gap-3 sm:[grid-template-columns:repeat(auto-fill,minmax(120px,1fr))]">
-          {cards.map((id, idx) => (
-            <Tile
-              key={id}
-              id={id}
-              index={idx}
-              className={!expanded && idx >= MOBILE_COLLAPSED ? "hidden sm:block" : ""}
-            />
-          ))}
-        </div>
-
-        {/* Mobile-only "Show more" — desktop (sm+) always shows the full wall */}
-        {!expanded && cards.length > MOBILE_COLLAPSED && (
-          <div className="mt-6 flex justify-center sm:hidden">
-            <button
-              type="button"
-              onClick={() => setExpanded(true)}
-              className="flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-5 py-2.5 text-sm font-medium text-white/80 transition-colors hover:bg-white/10 hover:text-white"
-            >
-              Show more <span className="text-white/40">+{cards.length - MOBILE_COLLAPSED}</span>
-            </button>
-          </div>
-        )}
-
-        <p className="mt-10 text-center text-xs text-white/35">
-          Logos belong to their respective companies. Reproduced for
-          educational reference only.
-        </p>
-      </div>
-
-      {/* Cursor-tracked ADDITIVE highlight — plus-lighter blend brightens
-          the area near the cursor without dimming the rest. */}
-      <div
-        ref={overlayRef}
-        aria-hidden
-        className="pointer-events-none absolute inset-0 transition-opacity duration-300"
-        style={{
-          mixBlendMode: "plus-lighter",
-          opacity: 0,
-        }}
-      />
-    </section>
-  );
-}
-
-/* ──────────────────────────── TILE ──────────────────────────── */
-
-function Tile({
-  id,
-  index,
-  className = "",
-}: {
-  id: string;
-  index: number;
-  className?: string;
-}) {
-  const color = colorForId(id);
-  const dark = isDarkBrand(color);
-  const [tilt, setTilt] = useState({ rx: 0, ry: 0, px: 50, py: 50 });
-  const [hover, setHover] = useState(false);
-
-  const onMove = (e: React.MouseEvent<HTMLDivElement>) => {
-    const r = e.currentTarget.getBoundingClientRect();
-    const x = (e.clientX - r.left) / r.width;
-    const y = (e.clientY - r.top) / r.height;
-    setTilt({
-      rx: (0.5 - y) * 12,
-      ry: (x - 0.5) * 12,
-      px: x * 100,
-      py: y * 100,
-    });
-  };
-  const onLeave = () => {
-    setHover(false);
-    setTilt({ rx: 0, ry: 0, px: 50, py: 50 });
-  };
-
-  // Flat brand color as the tile background — matches the builder's reference
-  // cards (no dark-gradient substitution for near-black brands). Dark tiles
-  // get a faint white inset border so they don't vanish into the dark section.
-  const tileStyle: CSSProperties = {
-    background: color,
-    borderColor: dark ? "rgba(255,255,255,0.10)" : "rgba(0,0,0,0.18)",
-    transform: `perspective(600px) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg) ${
-      hover ? "translateZ(8px) scale(1.04)" : ""
-    }`,
-    transition:
-      "transform 0.18s ease-out, box-shadow 0.25s ease-out, border-color 0.2s",
-    boxShadow: hover
-      ? `0 18px 40px -16px ${color}99, 0 0 0 1px ${color}66`
-      : dark
-      ? "inset 0 0 0 1px rgba(255,255,255,0.04)"
-      : "0 1px 2px rgba(0,0,0,0.25)",
-  };
-
-  return (
-    <motion.div
-      onMouseMove={onMove}
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={onLeave}
-      initial={{ opacity: 0, y: 10 }}
-      whileInView={{ opacity: 1, y: 0 }}
-      viewport={{ once: true, amount: 0.05 }}
-      transition={{ duration: 0.4, delay: (index % 14) * 0.025 }}
-      className={`group relative aspect-[3/2] overflow-hidden rounded-xl border ${className}`}
-      style={tileStyle}
-    >
-      {/* moving sheen */}
-      <span
-        aria-hidden
-        className="absolute inset-0 transition-opacity duration-200"
-        style={{
-          background: hover
-            ? `radial-gradient(180px 120px at ${tilt.px}% ${tilt.py}%, rgba(255,255,255,0.18), transparent 60%)`
-            : "transparent",
-        }}
-      />
-
-      {/* logo */}
-      <span
-        className="absolute inset-0 flex items-center justify-center transition-transform duration-300"
-        style={{ transform: hover ? "scale(1.08)" : "scale(1)" }}
-      >
-        <BrandLogo id={id} size={34} />
-      </span>
-
-      {/* bottom gradient veil */}
-      <span
-        aria-hidden
-        className="pointer-events-none absolute inset-x-0 bottom-0 h-2/5"
-        style={{
-          background:
-            "linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%)",
-        }}
-      />
-
-      {/* brand id */}
-      <span className="absolute inset-x-0 bottom-1.5 px-2 text-[10px] font-mono font-semibold leading-tight text-white/95 drop-shadow">
-        {id}
-      </span>
-    </motion.div>
-  );
-}

package/.opencode/oh-my-design/web/src/components/landing-v2/tokens.ts

@@ -1,33 +0,0 @@
-// Scoped design tokens for the /v2 landing variant.
-// Implemented as plain JS constants + inline styles so the global
-// --primary token (used by v1 + builder) is never touched.
-
-import { REGISTRY } from "@/data/registry.generated";
-
-export const V2 = {
-  primary: "#5546ff",        // electric indigo — CTAs, links
-  primaryDeep: "#3a2dd6",
-  primaryGlow: "#8b7dff",    // mid-step for gradients
-  accent: "#a89cff",         // light indigo — labels, $ prompts, accents
-  bgDark: "#0a0a0f",
-  bgLight: "#fafafa",
-  textOnDark: "#fafafa",
-  textOnLight: "#0a0a0f",
-  borderLight: "rgba(0,0,0,0.08)",
-  borderDark: "rgba(255,255,255,0.08)",
-} as const;
-
-/** Brand color hints for the brand-card wall and the LIVE PROOF strip.
- *  Derived from the registry — every reference contributes its primaryColor. */
-export const BRAND_COLORS: Record<string, string> = Object.fromEntries(
-  REGISTRY.map(e => [e.id, e.primaryColor])
-);
-
-/** Deterministic fallback color from id hash. */
-export function colorForId(id: string): string {
-  if (BRAND_COLORS[id]) return BRAND_COLORS[id];
-  let h = 0;
-  for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) | 0;
-  const hue = Math.abs(h) % 360;
-  return `hsl(${hue}, 70%, 55%)`;
-}

package/.opencode/oh-my-design/web/src/components/markdown.tsx

@@ -1,168 +0,0 @@
-/**
- * Shared markdown renderer for DESIGN.md content.
- *
- * Server component (no "use client") — react-markdown runs synchronously
- * on the server and emits static HTML, so there's zero client JS cost
- * for the markdown pane on the Browse Detail route.
- *
- * Styling uses an explicit `components` map (rather than the `prose`
- * typography plugin) because this project is on Tailwind v4 and doesn't
- * ship @tailwindcss/typography. Explicit classes keep the output
- * self-contained and theme-aware via next-themes' `.dark` cascade.
- *
- * Security posture: rehypeRaw allows HTML comments (DESIGN.md uses them
- * heavily for `<!-- verified -->`, `<!-- illustrative -->` markers) but
- * rehypeSanitize with a tightened schema drops any active tags/attributes
- * that could carry XSS. Input is from our own references/ tree so this
- * is defense-in-depth, not the primary control.
- */
-
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import rehypeRaw from "rehype-raw";
-import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
-
-const schema = {
-  ...defaultSchema,
-  tagNames: [
-    ...(defaultSchema.tagNames ?? []),
-    "details",
-    "summary",
-  ],
-  attributes: {
-    ...defaultSchema.attributes,
-    code: [...(defaultSchema.attributes?.code ?? []), ["className"]],
-    span: [...(defaultSchema.attributes?.span ?? []), ["className"]],
-  },
-};
-
-export function Markdown({ content }: { content: string }) {
-  // Strip leading YAML frontmatter from the rendered view — the file on
-  // disk keeps it (agents/tools that inspect the file need the metadata),
-  // but the human-facing rendering reads better without the raw delimiters.
-  let src = content;
-  if (src.startsWith("---\n")) {
-    const end = src.indexOf("\n---\n", 4);
-    if (end !== -1) src = src.slice(end + 5).replace(/^\n+/, "");
-  }
-
-  return (
-    <div className="text-sm leading-relaxed text-foreground/85">
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        rehypePlugins={[rehypeRaw, [rehypeSanitize, schema]]}
-        components={{
-          h1: (props) => (
-            <h1
-              className="mt-8 mb-3 text-3xl font-bold tracking-tight text-foreground first:mt-0"
-              {...props}
-            />
-          ),
-          h2: (props) => (
-            <h2
-              className="mt-10 mb-3 border-b border-border/40 pb-2 text-2xl font-semibold tracking-tight text-foreground"
-              {...props}
-            />
-          ),
-          h3: (props) => (
-            <h3
-              className="mt-6 mb-2 text-lg font-semibold text-foreground"
-              {...props}
-            />
-          ),
-          h4: (props) => (
-            <h4
-              className="mt-5 mb-2 text-base font-semibold text-foreground"
-              {...props}
-            />
-          ),
-          p: (props) => <p className="my-3 leading-relaxed" {...props} />,
-          a: ({ href, ...props }) => (
-            <a
-              href={href}
-              target={href?.startsWith("http") ? "_blank" : undefined}
-              rel={href?.startsWith("http") ? "noopener noreferrer" : undefined}
-              className="text-primary underline-offset-2 hover:underline"
-              {...props}
-            />
-          ),
-          strong: (props) => (
-            <strong className="font-semibold text-foreground" {...props} />
-          ),
-          em: (props) => <em className="italic" {...props} />,
-          ul: (props) => (
-            <ul className="my-3 list-disc space-y-1 pl-6" {...props} />
-          ),
-          ol: (props) => (
-            <ol className="my-3 list-decimal space-y-1 pl-6" {...props} />
-          ),
-          li: (props) => <li className="leading-relaxed" {...props} />,
-          blockquote: (props) => (
-            <blockquote
-              className="my-4 border-l-2 border-primary/40 pl-4 italic text-muted-foreground"
-              {...props}
-            />
-          ),
-          code: ({ className, children, ...props }) => {
-            const isBlock =
-              className?.startsWith("language-") || String(children).includes("\n");
-            if (isBlock) {
-              return (
-                <code
-                  className={`block ${className ?? ""}`}
-                  {...props}
-                >
-                  {children}
-                </code>
-              );
-            }
-            return (
-              <code
-                className="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.85em] text-foreground"
-                {...props}
-              >
-                {children}
-              </code>
-            );
-          },
-          pre: (props) => (
-            <pre
-              className="my-4 overflow-x-auto rounded-lg bg-muted/50 p-4 text-xs leading-relaxed dark:bg-muted/30"
-              {...props}
-            />
-          ),
-          hr: () => <hr className="my-6 border-border/40" />,
-          table: (props) => (
-            <div className="my-4 overflow-x-auto rounded-lg border border-border/50">
-              <table
-                className="min-w-full border-collapse text-sm"
-                {...props}
-              />
-            </div>
-          ),
-          thead: (props) => (
-            <thead className="bg-muted/40 dark:bg-muted/20" {...props} />
-          ),
-          th: (props) => (
-            <th
-              className="border-b border-border/50 px-3 py-2 text-left font-semibold"
-              {...props}
-            />
-          ),
-          tbody: (props) => (
-            <tbody className="divide-y divide-border/40" {...props} />
-          ),
-          tr: (props) => <tr {...props} />,
-          td: (props) => (
-            <td
-              className="px-3 py-2 align-top text-foreground/80"
-              {...props}
-            />
-          ),
-        }}
-      >
-        {src}
-      </ReactMarkdown>
-    </div>
-  );
-}

package/.opencode/oh-my-design/web/src/components/playground/actions-header.tsx

@@ -1,28 +0,0 @@
-"use client";
-
-import { RotateCcw } from "lucide-react";
-import { ShareButton } from "./share-button";
-import type { PlaygroundState } from "@/lib/playground/state";
-
-export function ActionsHeader({
-  state,
-  onReset,
-}: {
-  state: PlaygroundState;
-  onReset: () => void;
-}) {
-  return (
-    <div className="flex items-center gap-1.5">
-      <button
-        type="button"
-        onClick={onReset}
-        className="inline-flex items-center gap-1.5 rounded-lg border border-border/60 bg-card/50 px-2.5 py-1.5 text-xs font-medium transition-colors hover:bg-accent dark:border-border"
-        aria-label="Reset to defaults"
-      >
-        <RotateCcw className="h-3.5 w-3.5" />
-        <span className="hidden sm:inline">Reset</span>
-      </button>
-      <ShareButton state={state} />
-    </div>
-  );
-}

package/.opencode/oh-my-design/web/src/components/playground/contrast-badge.tsx

@@ -1,112 +0,0 @@
-"use client";
-
-/**
- * WCAG contrast-ratio indicator — plain-language for non-designers.
- *
- * Drops the "AAA / AA / AA-L" jargon in the primary label and replaces it
- * with language an owner-operator can read at a glance: "Easy to read",
- * "Readable", "Large text only", "Hard to read". The technical tier and
- * the raw ratio still appear as secondary annotation for people who need
- * it to file an a11y audit, but they don't lead.
- */
-
-import { Check, AlertTriangle, X } from "lucide-react";
-
-function luminance(hex: string): number {
-  const m = hex.replace("#", "").match(/.{2}/g);
-  if (!m) return 0;
-  const [r, g, b] = m.map((x) => {
-    const v = parseInt(x, 16) / 255;
-    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
-  });
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-}
-
-function contrastRatio(a: string, b: string): number {
-  const la = luminance(a);
-  const lb = luminance(b);
-  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
-}
-
-type Tier = "excellent" | "readable" | "display" | "fail";
-
-function rate(ratio: number): { tier: Tier; label: string; tech: string; Icon: typeof Check } {
-  if (ratio >= 7)
-    return {
-      tier: "excellent",
-      label: "Easy to read",
-      tech: "WCAG AAA",
-      Icon: Check,
-    };
-  if (ratio >= 4.5)
-    return {
-      tier: "readable",
-      label: "Readable",
-      tech: "WCAG AA",
-      Icon: Check,
-    };
-  if (ratio >= 3)
-    return {
-      tier: "display",
-      label: "Large text only",
-      tech: "WCAG AA · display size",
-      Icon: AlertTriangle,
-    };
-  return {
-    tier: "fail",
-    label: "Hard to read",
-    tech: "Below WCAG AA",
-    Icon: X,
-  };
-}
-
-const STYLES: Record<Tier, string> = {
-  excellent: "border-green-500/30 bg-green-50 text-green-900 dark:bg-green-500/10 dark:text-green-300",
-  readable: "border-border/50 bg-muted/30 text-foreground dark:bg-muted/20",
-  display: "border-amber-500/30 bg-amber-50 text-amber-900 dark:bg-amber-500/10 dark:text-amber-300",
-  fail: "border-red-500/30 bg-red-50 text-red-900 dark:bg-red-500/10 dark:text-red-300",
-};
-
-export function ContrastBadge({
-  primary,
-  background = "#ffffff",
-  compact = false,
-}: {
-  primary: string;
-  background?: string;
-  /** Compact variant for the PrimitivesStrip — single-line, small. */
-  compact?: boolean;
-}) {
-  const ratio = contrastRatio(primary, background);
-  const { tier, label, tech, Icon } = rate(ratio);
-
-  if (compact) {
-    return (
-      <div
-        className={`inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-[11px] font-medium ${STYLES[tier]}`}
-        title={`${tech} · ${ratio.toFixed(2)}:1 contrast`}
-      >
-        <Icon className="h-3.5 w-3.5 shrink-0" />
-        <span className="font-mono uppercase tracking-wider text-muted-foreground">
-          contrast
-        </span>
-        <span>{label}</span>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={`inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 ${STYLES[tier]}`}
-      title={`Contrast ratio ${ratio.toFixed(2)}:1`}
-    >
-      <Icon className="h-4 w-4 shrink-0" />
-      <div className="flex flex-col leading-tight">
-        <span className="text-xs font-semibold">{label}</span>
-        <span className="text-[9px] font-mono opacity-75">
-          {tech} · {ratio.toFixed(2)}:1
-        </span>
-      </div>
-    </div>
-  );
-}