zugzbot 1.0.20 → 1.0.22

package/.opencode/oh-my-design/web/src/components/font-playground/filter-bar.tsx

@@ -1,192 +0,0 @@
-"use client";
-
-/**
- * Filter bar — two-row controls for narrowing the catalog.
- *   Row 1: script tabs (All · Korean · Latin · Mono)
- *   Row 2: mood chips — top picks inline, "More moods" unfolds the full
- *          taxonomy grouped by Feel / Form / Purpose.
- *
- * The mood taxonomy has ~40 tags. Showing them all flat overwhelms — so
- * we put the most-representative moods (by catalog frequency) up front,
- * and hide the long tail behind a single toggle that reveals bucketed
- * chips. No tag is removed — just deferred.
- */
-
-import { useMemo, useState } from "react";
-import { ChevronDown } from "lucide-react";
-import type { FontScript } from "@/lib/fonts/types";
-import { MOOD_BUCKETS, moodFrequency } from "@/lib/fonts/catalog";
-
-export type ScriptFilter = "all" | FontScript | "mono";
-
-const POPULAR_COUNT = 8;
-
-export function FilterBar({
-  script,
-  mood,
-  moods,
-  onScriptChange,
-  onMoodChange,
-}: {
-  script: ScriptFilter;
-  mood: string | null;
-  moods: string[];
-  onScriptChange: (s: ScriptFilter) => void;
-  onMoodChange: (m: string | null) => void;
-}) {
-  const [expanded, setExpanded] = useState(false);
-
-  const scripts: { id: ScriptFilter; label: string }[] = [
-    { id: "all", label: "All" },
-    { id: "hangul", label: "Korean" },
-    { id: "latin", label: "Latin" },
-    { id: "mono", label: "Mono" },
-  ];
-
-  /** Top moods by frequency, stable-sorted alphabetically within ties so
-   *  the surfaced shortlist looks deliberate rather than randomly ordered. */
-  const popular = useMemo(() => {
-    const freq = moodFrequency();
-    const scored = moods
-      .map((m) => ({ m, n: freq.get(m) ?? 0 }))
-      .sort((a, b) => b.n - a.n || a.m.localeCompare(b.m));
-    return scored.slice(0, POPULAR_COUNT).map((s) => s.m);
-  }, [moods]);
-
-  /** Anything in the taxonomy but not surfaced inline gets deferred to
-   *  the expandable panel — bucketed by semantic group. */
-  const bucketed = useMemo(() => {
-    const leftover = new Set(moods.filter((m) => !popular.includes(m)));
-    const known = new Set(MOOD_BUCKETS.flatMap((b) => b.moods));
-    const buckets = MOOD_BUCKETS.map((b) => ({
-      id: b.id,
-      label: b.label,
-      moods: b.moods.filter((m) => leftover.has(m)),
-    }));
-    const other = [...leftover].filter((m) => !known.has(m)).sort();
-    if (other.length > 0) {
-      buckets.push({ id: "other", label: "Other", moods: other });
-    }
-    return buckets.filter((b) => b.moods.length > 0);
-  }, [moods, popular]);
-
-  const hiddenCount = Math.max(0, moods.length - popular.length);
-  const moodSelectedButHidden =
-    mood != null && !popular.includes(mood);
-
-  return (
-    <div className="space-y-3">
-      {/* Script tabs */}
-      <div className="flex flex-wrap items-center gap-1.5">
-        <span className="mr-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
-          Script
-        </span>
-        {scripts.map((s) => (
-          <button
-            key={s.id}
-            type="button"
-            onClick={() => onScriptChange(s.id)}
-            className={
-              script === s.id
-                ? "rounded-full bg-primary px-3 py-1 text-xs font-semibold text-primary-foreground"
-                : "rounded-full border border-border/50 bg-background/50 px-3 py-1 text-xs font-medium text-foreground transition-colors hover:border-primary/40 hover:bg-accent/30"
-            }
-            aria-pressed={script === s.id}
-          >
-            {s.label}
-          </button>
-        ))}
-      </div>
-
-      {/* Mood — popular row */}
-      <div className="flex flex-wrap items-center gap-1.5">
-        <span className="mr-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
-          Mood
-        </span>
-        <MoodChip label="Any" active={mood == null} onClick={() => onMoodChange(null)} />
-        {popular.map((m) => (
-          <MoodChip
-            key={m}
-            label={m}
-            active={mood === m}
-            onClick={() => onMoodChange(mood === m ? null : m)}
-          />
-        ))}
-        {hiddenCount > 0 && (
-          <button
-            type="button"
-            onClick={() => setExpanded((v) => !v)}
-            aria-expanded={expanded}
-            className={
-              expanded || moodSelectedButHidden
-                ? "inline-flex items-center gap-1 rounded-full border border-primary/50 bg-primary/10 px-2.5 py-1 text-[11px] font-medium text-primary transition-colors"
-                : "inline-flex items-center gap-1 rounded-full border border-dashed border-border/70 bg-background/50 px-2.5 py-1 text-[11px] font-medium text-muted-foreground transition-colors hover:border-foreground/40 hover:text-foreground dark:border-border"
-            }
-          >
-            {expanded ? "Hide" : `More moods · ${hiddenCount}`}
-            <ChevronDown
-              className={
-                expanded
-                  ? "h-3 w-3 rotate-180 transition-transform"
-                  : "h-3 w-3 transition-transform"
-              }
-            />
-          </button>
-        )}
-      </div>
-
-      {/* Mood — bucketed panel */}
-      {(expanded || moodSelectedButHidden) && bucketed.length > 0 && (
-        <div className="space-y-2 rounded-xl border border-border/50 bg-muted/20 p-3 dark:border-border dark:bg-muted/10">
-          {bucketed.map((bucket) => (
-            <div
-              key={bucket.id}
-              className="flex flex-wrap items-center gap-1.5"
-            >
-              <span className="mr-1 w-14 shrink-0 text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
-                {bucket.label}
-              </span>
-              {bucket.moods.map((m) => (
-                <MoodChip
-                  key={m}
-                  label={m}
-                  active={mood === m}
-                  onClick={() => onMoodChange(mood === m ? null : m)}
-                  small
-                />
-              ))}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function MoodChip({
-  label,
-  active,
-  onClick,
-  small,
-}: {
-  label: string;
-  active: boolean;
-  onClick: () => void;
-  small?: boolean;
-}) {
-  const sizing = small ? "px-2 py-0.5 text-[10px]" : "px-2.5 py-1 text-[11px]";
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={
-        active
-          ? `rounded-full bg-primary font-semibold capitalize text-primary-foreground ${sizing}`
-          : `rounded-full border border-border/50 bg-background/50 font-medium capitalize text-foreground transition-colors hover:border-primary/40 hover:bg-accent/30 ${sizing}`
-      }
-      aria-pressed={active}
-    >
-      {label}
-    </button>
-  );
-}

package/.opencode/oh-my-design/web/src/components/font-playground/font-tile.tsx

@@ -1,92 +0,0 @@
-"use client";
-
-/**
- * FontTile — one card in the gallery. Renders the user's sample text in
- * the font's default weight, with the font name and key tags underneath.
- *
- * The whole tile is clickable; parent opens the detail overlay.
- */
-
-import type { FontEntry, FontScript } from "@/lib/fonts/types";
-import { scriptLabels } from "./labels";
-
-export function FontTile({
-  font,
-  sampleText,
-  activeScript,
-  onSelect,
-}: {
-  font: FontEntry;
-  sampleText: string;
-  /** When the gallery has a script filter active, show the matching-script
-   *  sample; when 'all', prefer hangul if available, else latin. */
-  activeScript: "hangul" | "latin" | "auto";
-  onSelect: () => void;
-}) {
-  const scriptForSample: FontScript =
-    activeScript === "hangul" && font.scripts.includes("hangul")
-      ? "hangul"
-      : activeScript === "latin" && font.scripts.includes("latin")
-        ? "latin"
-        : font.scripts.includes("hangul")
-          ? "hangul"
-          : "latin";
-
-  const display =
-    sampleText.trim() !== ""
-      ? sampleText
-      : (font.sampleText[scriptForSample] ?? font.sampleText.latin ?? font.name);
-
-  const displayWeight = font.variable
-    ? (font.axes.find((a) => a.tag === "wght")?.default ?? 500)
-    : (font.weights?.[Math.floor(font.weights.length / 2)] ?? 400);
-
-  return (
-    <button
-      type="button"
-      onClick={onSelect}
-      className="group flex flex-col gap-3 rounded-xl border border-border/50 bg-card/40 p-4 text-left transition-all hover:-translate-y-0.5 hover:border-primary/40 hover:bg-card dark:border-border dark:bg-card/60 dark:hover:bg-card"
-    >
-      {/* Sample text in the font itself */}
-      <div
-        className="flex min-h-[6rem] items-center break-words text-[28px] leading-tight text-foreground"
-        style={{
-          fontFamily: font.cssFamily,
-          fontWeight: displayWeight,
-        }}
-      >
-        {display}
-      </div>
-
-      {/* Meta */}
-      <div className="flex items-end justify-between gap-3 border-t border-border/30 pt-3">
-        <div className="min-w-0 flex-1">
-          <div className="text-sm font-semibold text-foreground">{font.name}</div>
-          <div className="mt-0.5 flex flex-wrap items-center gap-1 text-[10px] uppercase tracking-wider text-muted-foreground">
-            <span>{font.family}</span>
-            <span aria-hidden>·</span>
-            <span>{scriptLabels(font.scripts)}</span>
-            {font.variable && (
-              <>
-                <span aria-hidden>·</span>
-                <span className="rounded bg-primary/10 px-1 py-0.5 text-[9px] font-semibold text-primary">
-                  VARIABLE
-                </span>
-              </>
-            )}
-          </div>
-        </div>
-        <div className="flex shrink-0 flex-wrap justify-end gap-1">
-          {font.tags.mood.slice(0, 2).map((m) => (
-            <span
-              key={m}
-              className="rounded-full bg-muted/50 px-2 py-0.5 text-[9px] font-medium capitalize text-muted-foreground dark:bg-muted/30"
-            >
-              {m}
-            </span>
-          ))}
-        </div>
-      </div>
-    </button>
-  );
-}

package/.opencode/oh-my-design/web/src/components/font-playground/gallery.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-/**
- * Gallery — responsive grid of font tiles driven by filter state.
- */
-
-import type { FontEntry } from "@/lib/fonts/types";
-import { FontTile } from "./font-tile";
-
-export function Gallery({
-  fonts,
-  sampleText,
-  activeScript,
-  onSelect,
-}: {
-  fonts: FontEntry[];
-  sampleText: string;
-  activeScript: "hangul" | "latin" | "auto";
-  onSelect: (id: string) => void;
-}) {
-  if (fonts.length === 0) {
-    return (
-      <div className="rounded-xl border border-dashed border-border/50 py-16 text-center text-sm text-muted-foreground">
-        No fonts match the current filters. Clear a filter or widen the script.
-      </div>
-    );
-  }
-
-  return (
-    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-      {fonts.map((f) => (
-        <FontTile
-          key={f.id}
-          font={f}
-          sampleText={sampleText}
-          activeScript={activeScript}
-          onSelect={() => onSelect(f.id)}
-        />
-      ))}
-    </div>
-  );
-}

package/.opencode/oh-my-design/web/src/components/font-playground/hero-entry.tsx

@@ -1,150 +0,0 @@
-"use client";
-
-/**
- * Stage 1 — describe-first entry.
- *
- * Replaces the old browse-first gallery landing. User types what they
- * want ("warm korean sans") or picks a chip; we route them to Stage 2
- * (match-results). Browse catalog + My saved are secondary escapes for
- * users who prefer to explore the old way.
- */
-
-import { useState } from "react";
-import { ArrowRight, BookOpen, Star } from "lucide-react";
-import type { FontScript } from "@/lib/fonts/types";
-import { trackHeroChipClick } from "@/lib/fonts/analytics";
-import { ScriptToggle } from "./script-toggle";
-
-const SUGGESTION_CHIPS: { label: string; query: string }[] = [
-  { label: "몽글몽글 따뜻한 느낌", query: "몽글몽글 따뜻한 느낌의 폰트" },
-  { label: "토스 같은 핀테크 산세리프", query: "토스 같은 핀테크 산세리프" },
-  { label: "배민처럼 친근한 느낌", query: "배민처럼 친근한 느낌의 폰트" },
-  { label: "프리텐다드인데 조금 더 따뜻하게", query: "프리텐다드 느낌인데 조금 더 따뜻한" },
-  { label: "긴 글 읽기 좋은 세리프", query: "긴 글 읽기 좋은 편집 세리프" },
-  { label: "Geist 느낌을 한글로", query: "Geist 느낌을 한글로 옮긴 산세리프" },
-];
-
-export function HeroEntry({
-  initialQuery,
-  initialScripts,
-  savedCount,
-  onSubmit,
-  onBrowseCatalog,
-  onOpenSaved,
-}: {
-  initialQuery?: string;
-  initialScripts?: FontScript[];
-  savedCount: number;
-  onSubmit: (query: string, scripts: FontScript[], source?: "input" | "chip") => void;
-  onBrowseCatalog: () => void;
-  onOpenSaved: () => void;
-}) {
-  const [query, setQuery] = useState(initialQuery ?? "");
-  const [scripts, setScripts] = useState<FontScript[]>(
-    initialScripts ?? ["hangul", "latin"],
-  );
-
-  function submit(value: string, source: "input" | "chip" = "input") {
-    const q = value.trim();
-    if (!q) return;
-    onSubmit(q, scripts, source);
-  }
-
-  return (
-    <section className="mx-auto flex min-h-[calc(100vh-3.5rem)] max-w-3xl flex-col items-center justify-center px-4 pb-20 sm:px-6">
-      <div className="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-primary">
-        <span className="h-1.5 w-1.5 rounded-full bg-primary" aria-hidden />
-        Describe · Match · Customize
-      </div>
-
-      <h1 className="mt-5 text-center text-3xl font-bold tracking-tight sm:text-4xl">
-        Describe the font you want
-      </h1>
-      <p className="mt-2 max-w-xl text-center text-sm text-muted-foreground leading-relaxed">
-        원하는 분위기를 한 줄로 적어주세요. 카탈로그에서 가장 가까운 폰트를
-        찾아드려요.
-      </p>
-
-      <form
-        className="mt-6 w-full"
-        onSubmit={(e) => {
-          e.preventDefault();
-          submit(query);
-        }}
-      >
-        <div className="flex items-center gap-2 rounded-xl border border-border/60 bg-background p-1.5 shadow-sm transition-colors focus-within:border-primary/60 focus-within:shadow-[0_0_0_3px_oklch(0.55_0.22_275/0.12)] dark:border-border dark:focus-within:shadow-[0_0_0_3px_oklch(0.7_0.2_275/0.18)]">
-          <input
-            type="text"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            placeholder="e.g., Pretendard but warmer · 따뜻한 한글 산세리프"
-            autoFocus
-            className="h-10 min-w-0 flex-1 bg-transparent px-3 text-sm outline-none"
-            aria-label="Font description"
-          />
-          <button
-            type="submit"
-            disabled={!query.trim()}
-            className="inline-flex h-10 shrink-0 items-center gap-1.5 rounded-lg bg-primary px-4 text-xs font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
-          >
-            Discover
-            <ArrowRight className="h-3.5 w-3.5" />
-          </button>
-        </div>
-      </form>
-
-      <div className="mt-4 flex flex-wrap items-center justify-center gap-2 text-xs">
-        <span className="text-muted-foreground">지원하는 언어:</span>
-        <ScriptToggle value={scripts} onChange={setScripts} size="sm" />
-      </div>
-
-      <div className="mt-14 w-full">
-        <div className="mb-3 text-center text-[11px] text-muted-foreground">
-          이렇게 검색해보시는 건 어떠신가요?
-        </div>
-        <div className="flex flex-wrap justify-center gap-2">
-          {SUGGESTION_CHIPS.map((chip, idx) => (
-            <button
-              key={chip.label}
-              type="button"
-              onClick={() => {
-                trackHeroChipClick({ position: idx, queryLen: chip.query.length });
-                setQuery(chip.query);
-                submit(chip.query, "chip");
-              }}
-              className="rounded-full border border-dashed border-border/70 bg-background px-3.5 py-1.5 text-xs text-foreground/80 transition-all hover:-translate-y-0.5 hover:border-solid hover:border-primary hover:bg-primary hover:text-primary-foreground hover:shadow-sm dark:border-border"
-            >
-              {chip.label}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      <div className="mt-20 flex items-center gap-4 text-xs text-muted-foreground">
-        <button
-          type="button"
-          onClick={onBrowseCatalog}
-          className="inline-flex items-center gap-1.5 transition-colors hover:text-foreground"
-        >
-          <BookOpen className="h-3.5 w-3.5" />
-          Browse catalog
-        </button>
-        <span className="h-3 w-px bg-border" aria-hidden />
-        <button
-          type="button"
-          onClick={onOpenSaved}
-          className="inline-flex items-center gap-1.5 transition-colors hover:text-foreground"
-        >
-          <Star className="h-3.5 w-3.5" />
-          My saved
-          {savedCount > 0 && (
-            <span className="rounded-full bg-foreground/10 px-1.5 py-0.5 text-[10px] font-semibold text-foreground">
-              {savedCount}
-            </span>
-          )}
-        </button>
-      </div>
-
-    </section>
-  );
-}

package/.opencode/oh-my-design/web/src/components/font-playground/labels.ts

@@ -1,18 +0,0 @@
-import type { FontScript } from "@/lib/fonts/types";
-
-/** Short, industry-standard language-script labels. `hangul` → `KO`,
- *  `latin` → `EN`. Renders nicer than raw tag names inside meta rows. */
-const SCRIPT_LABEL: Record<FontScript, string> = {
-  hangul: "KO",
-  latin: "EN",
-  japanese: "JP",
-  chinese: "ZH",
-};
-
-export function scriptLabel(script: FontScript): string {
-  return SCRIPT_LABEL[script] ?? script;
-}
-
-export function scriptLabels(scripts: FontScript[], sep = " + "): string {
-  return scripts.map(scriptLabel).join(sep);
-}