zugzbot 1.0.21 → 1.0.22

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

@@ -1,149 +0,0 @@
-"use client";
-
-/**
- * Browse dropdown — compact menu launched from the center of the home nav.
- * Currently a single entry point (Design Systems directory); extra
- * categories can be slotted in as more button rows without changing
- * callers.
- */
-
-import Link from "next/link";
-import { useState } from "react";
-import { Dialog, DialogContent, DialogTrigger, DialogTitle } from "@/components/ui/dialog";
-import { Compass, ArrowRight, Sparkles, Type } from "lucide-react";
-import { getAllDesignSystems } from "@/lib/design-systems";
-import { getLogoUrl, getLogoFallbackUrl, isGitHubLogo } from "@/lib/logos";
-import { event } from "@/lib/gtag";
-
-export function BrowseModal({ className }: { className?: string }) {
-  const [open, setOpen] = useState(false);
-  const total = getAllDesignSystems().length;
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger
-        onClick={() => event("browse_open", {})}
-        className={
-          className ??
-          "inline-flex items-center gap-1.5 rounded-full border border-border/50 bg-card/40 px-3 sm:px-4 h-9 sm:h-10 text-xs sm:text-sm font-medium text-foreground/80 backdrop-blur transition-colors hover:bg-accent hover:text-foreground dark:border-border dark:bg-card/60"
-        }
-      >
-        <Compass className="h-4 w-4" />
-        Browse
-      </DialogTrigger>
-      <DialogContent
-        className="sm:max-w-md gap-0 p-0 overflow-hidden"
-        showCloseButton={false}
-      >
-        <DialogTitle className="sr-only">Browse OMD resources</DialogTitle>
-
-        <div className="p-4">
-          <div className="text-[10px] font-semibold uppercase tracking-[0.15em] text-muted-foreground mb-3 px-1">
-            Explore
-          </div>
-          <Link
-            href="/design-systems"
-            onClick={() => {
-              event("browse_ds_directory", {});
-              setOpen(false);
-            }}
-            className="group flex min-h-[88px] items-center gap-4 rounded-xl border border-border/50 bg-card/40 p-4 transition-colors hover:border-foreground/20 hover:bg-accent dark:border-border dark:bg-card/60"
-          >
-            <StackedLogoChip />
-            <div className="flex-1 min-w-0">
-              <div className="text-sm font-semibold text-foreground">Design Systems</div>
-              <div className="text-xs text-muted-foreground leading-snug mt-0.5">
-                {total} references — browse, preview, and export as AI-ready
-                DESIGN.md.
-              </div>
-            </div>
-            <ArrowRight className="h-4 w-4 text-muted-foreground shrink-0 transition-transform group-hover:translate-x-0.5 group-hover:text-foreground" />
-          </Link>
-
-          <Link
-            href="/font-playground"
-            onClick={() => {
-              event("browse_font_playground", {});
-              setOpen(false);
-            }}
-            className="group mt-2 flex min-h-[88px] items-center gap-4 rounded-xl border border-border/50 bg-card/40 p-4 transition-colors hover:border-foreground/20 hover:bg-accent dark:border-border dark:bg-card/60"
-          >
-            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary/10 ring-2 ring-background">
-              <Type className="h-4 w-4 text-primary" />
-            </div>
-            <div className="flex-1 min-w-0">
-              <div className="text-sm font-semibold text-foreground">Font Playground</div>
-              <div className="text-xs text-muted-foreground leading-snug mt-0.5">
-                느낌을 묘사하면 60개 큐레이션 카탈로그에서 어울리는 폰트 3개를 골라드려요.
-              </div>
-            </div>
-            <ArrowRight className="h-4 w-4 text-muted-foreground shrink-0 transition-transform group-hover:translate-x-0.5 group-hover:text-foreground" />
-          </Link>
-
-          {process.env.NODE_ENV !== "production" && (
-            <Link
-              href="/playground"
-              onClick={() => {
-                event("browse_playground", {});
-                setOpen(false);
-              }}
-              className="group mt-2 flex min-h-[88px] items-center gap-4 rounded-xl border border-border/50 bg-card/40 p-4 transition-colors hover:border-foreground/20 hover:bg-accent dark:border-border dark:bg-card/60"
-            >
-              <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary/10 ring-2 ring-background">
-                <Sparkles className="h-4 w-4 text-primary" />
-              </div>
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2">
-                  <div className="text-sm font-semibold text-foreground">Playground</div>
-                  <span className="rounded-full bg-amber-100 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-amber-900 dark:bg-amber-500/20 dark:text-amber-300">
-                    dev
-                  </span>
-                </div>
-                <div className="text-xs text-muted-foreground leading-snug mt-0.5">
-                  Create your own DS — mood, color, tokens, philosophy. Zero AI.
-                </div>
-              </div>
-              <ArrowRight className="h-4 w-4 text-muted-foreground shrink-0 transition-transform group-hover:translate-x-0.5 group-hover:text-foreground" />
-            </Link>
-          )}
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-/** Three overlapping brand logos (Toss, Anthropic, Vercel) as a visual
- *  hint that the directory covers a mix of companies. Uses the same
- *  getLogoUrl pipeline as the builder Reference step. */
-function StackedLogoChip() {
-  const picks: { id: string; color: string; bg: string }[] = [
-    { id: "toss", color: "ffffff", bg: "#3182f6" },
-    { id: "claude", color: "ffffff", bg: "#d97706" },
-    { id: "vercel", color: "ffffff", bg: "#000000" },
-  ];
-  return (
-    <div className="flex items-center shrink-0 pl-1">
-      {picks.map((p, i) => {
-        const raster = isGitHubLogo(p.id);
-        const url = getLogoUrl(p.id, p.color) ?? getLogoFallbackUrl(p.id);
-        return (
-          <div
-            key={p.id}
-            className={`flex h-9 w-9 items-center justify-center rounded-full ring-2 ring-background shadow-sm ${i > 0 ? "-ml-3" : ""}`}
-            style={{ background: p.bg, zIndex: picks.length - i }}
-          >
-            {url && (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                src={url}
-                alt={p.id}
-                loading="lazy"
-                className={raster ? "h-5 w-5 rounded object-contain" : "h-4 w-4 object-contain"}
-              />
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}

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

@@ -1,108 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { X, Check } from "lucide-react";
-import { Button } from "@/components/ui/button";
-
-export interface ComponentVariant {
-  id: string;
-  label: string;
-  preview: React.ReactNode;
-}
-
-export function ComponentModal({
-  open,
-  onClose,
-  title,
-  description,
-  variants,
-  selected,
-  onSelect,
-}: {
-  open: boolean;
-  onClose: () => void;
-  title: string;
-  description: string;
-  variants: ComponentVariant[];
-  selected: string;
-  onSelect: (id: string) => void;
-}) {
-  return (
-    <AnimatePresence>
-      {open && (
-        <>
-          {/* Backdrop */}
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            onClick={onClose}
-            className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm"
-          />
-          {/* Modal */}
-          <motion.div
-            initial={{ opacity: 0, scale: 0.95, y: 20 }}
-            animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={{ opacity: 0, scale: 0.95, y: 20 }}
-            transition={{ type: "spring", damping: 25, stiffness: 300 }}
-            className="fixed inset-4 z-50 m-auto flex max-h-[85vh] max-w-3xl flex-col overflow-hidden rounded-2xl border bg-background shadow-2xl"
-          >
-            {/* Header */}
-            <div className="flex items-center justify-between border-b px-6 py-4">
-              <div>
-                <h2 className="text-lg font-semibold">{title}</h2>
-                <p className="text-sm text-muted-foreground">{description}</p>
-              </div>
-              <button onClick={onClose} className="rounded-full p-2 hover:bg-muted transition-colors">
-                <X className="h-4 w-4" />
-              </button>
-            </div>
-
-            {/* Variants grid */}
-            <div className="flex-1 overflow-y-auto p-6">
-              <div className="grid gap-4 sm:grid-cols-2">
-                {variants.map((v) => {
-                  const isActive = selected === v.id;
-                  return (
-                    <motion.button
-                      key={v.id}
-                      whileTap={{ scale: 0.98 }}
-                      onClick={() => onSelect(v.id)}
-                      className={`group relative flex flex-col overflow-hidden rounded-xl border-2 text-left transition-all ${
-                        isActive
-                          ? "border-foreground shadow-md"
-                          : "border-border/50 hover:border-border dark:border-border"
-                      }`}
-                    >
-                      <div className="relative w-full overflow-hidden bg-muted/30 dark:bg-muted/60 p-6">
-                        {v.preview}
-                        {isActive && (
-                          <motion.div
-                            initial={{ scale: 0 }}
-                            animate={{ scale: 1 }}
-                            className="absolute top-3 right-3 flex h-6 w-6 items-center justify-center rounded-full bg-foreground"
-                          >
-                            <Check className="h-3.5 w-3.5 text-background" />
-                          </motion.div>
-                        )}
-                      </div>
-                      <div className="border-t p-3">
-                        <div className="text-sm font-medium">{v.label}</div>
-                      </div>
-                    </motion.button>
-                  );
-                })}
-              </div>
-            </div>
-
-            {/* Footer */}
-            <div className="border-t px-6 py-4 flex justify-end">
-              <Button onClick={onClose}>Done</Button>
-            </div>
-          </motion.div>
-        </>
-      )}
-    </AnimatePresence>
-  );
-}

package/.opencode/oh-my-design/web/src/components/content-preview-modal.tsx

@@ -1,213 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { event } from "@/lib/gtag";
-import { X, Copy, Check, Download } from "lucide-react";
-
-export function ContentPreviewModal({
-  open,
-  onClose,
-  title,
-  content,
-  language,
-  filename,
-}: {
-  open: boolean;
-  onClose: () => void;
-  title: string;
-  content: string;
-  language: "markdown" | "css" | "json";
-  filename: string;
-}) {
-  const [copied, setCopied] = useState(false);
-
-  function copyContent() {
-    navigator.clipboard.writeText(content);
-    event("copy_content", { filename, language });
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  }
-
-  function downloadContent() {
-    const type = language === "json" ? "application/json" : language === "css" ? "text/css" : "text/plain";
-    const blob = new Blob([content], { type });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = filename;
-    a.click();
-    URL.revokeObjectURL(url);
-    event("download_content", { filename, language });
-  }
-
-  return (
-    <AnimatePresence>
-      {open && (
-        <>
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            onClick={onClose}
-            className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm"
-          />
-          <motion.div
-            initial={{ opacity: 0, scale: 0.95, y: 20 }}
-            animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={{ opacity: 0, scale: 0.95, y: 20 }}
-            transition={{ type: "spring", damping: 25, stiffness: 300 }}
-            className="fixed inset-4 z-50 m-auto flex max-h-[90vh] max-w-4xl flex-col overflow-hidden rounded-2xl border bg-background shadow-2xl dark:border-border"
-          >
-            {/* Header */}
-            <div className="flex items-center justify-between border-b px-5 py-3">
-              <div className="flex items-center gap-3">
-                <h2 className="text-sm font-semibold">{title}</h2>
-                <span className="rounded-md bg-muted px-2 py-0.5 text-[10px] font-mono text-muted-foreground">
-                  {filename}
-                </span>
-                <span className="text-[10px] text-muted-foreground">
-                  {(content.length / 1024).toFixed(1)} KB / {content.split("\n").length} lines
-                </span>
-              </div>
-              <div className="flex items-center gap-1.5">
-                <button
-                  onClick={copyContent}
-                  className="flex h-7 items-center gap-1.5 rounded-md border border-border/60 dark:border-border bg-background px-2.5 text-[11px] font-medium transition-colors hover:bg-muted"
-                >
-                  {copied ? <Check className="h-3 w-3 text-green-500" /> : <Copy className="h-3 w-3" />}
-                  {copied ? "Copied" : "Copy"}
-                </button>
-                <button
-                  onClick={downloadContent}
-                  className="flex h-7 items-center gap-1.5 rounded-md border border-border/60 dark:border-border bg-background px-2.5 text-[11px] font-medium transition-colors hover:bg-muted"
-                >
-                  <Download className="h-3 w-3" /> Download
-                </button>
-                <button
-                  onClick={onClose}
-                  className="flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-muted"
-                >
-                  <X className="h-3.5 w-3.5" />
-                </button>
-              </div>
-            </div>
-
-            {/* Content */}
-            <div className="flex-1 overflow-y-auto">
-              <pre className={`p-5 text-[12px] leading-[1.7] font-mono whitespace-pre-wrap break-words ${
-                language === "css" ? "text-blue-400 dark:text-blue-300" :
-                language === "json" ? "text-emerald-400 dark:text-emerald-300" :
-                "text-foreground/80"
-              }`}>
-                {language === "markdown" ? <MarkdownPreview content={content} /> : content}
-              </pre>
-            </div>
-          </motion.div>
-        </>
-      )}
-    </AnimatePresence>
-  );
-}
-
-/** Simple markdown rendering — headings, bold, tables, code blocks */
-function MarkdownPreview({ content }: { content: string }) {
-  const lines = content.split("\n");
-
-  return (
-    <div className="space-y-0 text-foreground/80 font-sans text-[13px] leading-[1.8]">
-      {lines.map((line, i) => {
-        // Heading 1
-        if (line.startsWith("# ")) {
-          return <h1 key={i} className="text-xl font-bold mt-6 mb-2 text-foreground">{line.slice(2)}</h1>;
-        }
-        // Heading 2
-        if (line.startsWith("## ")) {
-          return <h2 key={i} className="text-lg font-semibold mt-5 mb-2 text-foreground border-b border-border/40 pb-1">{line.slice(3)}</h2>;
-        }
-        // Heading 3
-        if (line.startsWith("### ")) {
-          return <h3 key={i} className="text-base font-semibold mt-4 mb-1 text-foreground">{line.slice(4)}</h3>;
-        }
-        // Blockquote
-        if (line.startsWith("> ")) {
-          return <div key={i} className="border-l-2 border-primary/40 pl-3 text-muted-foreground italic text-[12px]">{renderInline(line.slice(2))}</div>;
-        }
-        // Table header separator
-        if (/^\|[-|: ]+\|$/.test(line)) {
-          return null;
-        }
-        // Table row
-        if (line.startsWith("|")) {
-          const cells = line.split("|").slice(1, -1).map(c => c.trim());
-          const isHeader = lines[i + 1]?.match(/^\|[-|: ]+\|$/);
-          return (
-            <div key={i} className={`flex text-[11px] font-mono ${isHeader ? "font-semibold text-muted-foreground border-b border-border/30 pb-1 mb-1" : ""}`}>
-              {cells.map((cell, j) => (
-                <span key={j} className="flex-1 px-1 py-0.5 truncate">{renderInline(cell)}</span>
-              ))}
-            </div>
-          );
-        }
-        // List item
-        if (line.match(/^[-*] /)) {
-          return <div key={i} className="pl-4 relative before:content-[''] before:absolute before:left-1 before:top-[10px] before:h-1 before:w-1 before:rounded-full before:bg-muted-foreground/40">{renderInline(line.slice(2))}</div>;
-        }
-        // Code block fence
-        if (line.startsWith("```")) {
-          return <div key={i} className="text-[10px] text-muted-foreground/50 font-mono">{line}</div>;
-        }
-        // Horizontal rule
-        if (line === "---") {
-          return <hr key={i} className="border-border/30 my-3" />;
-        }
-        // Empty line
-        if (line.trim() === "") {
-          return <div key={i} className="h-2" />;
-        }
-        // Normal text
-        return <div key={i}>{renderInline(line)}</div>;
-      })}
-    </div>
-  );
-}
-
-/** Render inline markdown: bold, code, links */
-function renderInline(text: string): React.ReactNode {
-  // Split by **bold**, `code`, and plain text
-  const parts: React.ReactNode[] = [];
-  let remaining = text;
-  let key = 0;
-
-  while (remaining.length > 0) {
-    // Bold
-    const boldMatch = remaining.match(/\*\*(.+?)\*\*/);
-    // Inline code
-    const codeMatch = remaining.match(/`([^`]+)`/);
-
-    const matches = [
-      boldMatch ? { index: boldMatch.index!, length: boldMatch[0].length, type: "bold" as const, content: boldMatch[1] } : null,
-      codeMatch ? { index: codeMatch.index!, length: codeMatch[0].length, type: "code" as const, content: codeMatch[1] } : null,
-    ].filter(Boolean).sort((a, b) => a!.index - b!.index);
-
-    if (matches.length === 0) {
-      parts.push(<span key={key++}>{remaining}</span>);
-      break;
-    }
-
-    const match = matches[0]!;
-    if (match.index > 0) {
-      parts.push(<span key={key++}>{remaining.slice(0, match.index)}</span>);
-    }
-
-    if (match.type === "bold") {
-      parts.push(<strong key={key++} className="font-semibold text-foreground">{match.content}</strong>);
-    } else {
-      parts.push(<code key={key++} className="px-1 py-0.5 rounded bg-muted text-[11px] font-mono text-primary">{match.content}</code>);
-    }
-
-    remaining = remaining.slice(match.index + match.length);
-  }
-
-  return <>{parts}</>;
-}