zugzbot 1.0.20 → 1.0.22

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

@@ -1,434 +0,0 @@
-"use client";
-
-import { useState, useEffect, useCallback, useRef } from "react";
-import { event, trackRef } from "@/lib/gtag";
-import { useTheme } from "next-themes";
-import { Moon, Sun } from "lucide-react";
-import Link from "next/link";
-import { ReferenceSelector } from "@/components/reference-selector";
-import { DesignWizard } from "@/components/design-wizard";
-import { PreviewExportView } from "@/components/preview-export-view";
-import { InstallCta } from "@/components/install-cta";
-import { ScrollToTop } from "@/components/scroll-to-top";
-import { encodeConfig, decodeConfig } from "@/lib/core/config-hash";
-import { buildBuilderPrompt, DEFAULT_BUILDER_COMPONENTS } from "@/lib/core/builder-prompt";
-import type { Overrides, StylePreferences } from "@/lib/core/types";
-
-type Step = "select" | "customize" | "preview";
-
-export interface RefListItem {
-  id: string;
-  name: string;
-  category: string;
-  country: string;
-  primaryColor: string;
-  background: string;
-  /** Among the most-selected references — resolved server-side so the grid
-   *  arrives hot-first + badged with no post-render reflow. */
-  hot: boolean;
-}
-
-export interface RefDetail {
-  id: string;
-  designMd: string;
-  primary: string;
-  background: string;
-  foreground: string;
-  fontFamily: string;
-  mono?: string;
-  headingWeight: string;
-  radius: string;
-  mood: string;
-  accent?: string;
-  border?: string;
-}
-
-const DEFAULT_COMPONENTS = DEFAULT_BUILDER_COMPONENTS;
-
-export default function BuilderPage() {
-  const { theme, setTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
-  const [step, setStep] = useState<Step>("select");
-  const [refs, setRefs] = useState<RefListItem[]>([]);
-  const [detail, setDetail] = useState<RefDetail | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [overrides, setOverrides] = useState<Overrides>({
-    primaryColor: "",
-    fontFamily: "",
-    headingWeight: "",
-    borderRadius: "",
-    darkMode: false,
-  });
-  const [activeComponents, setActiveComponents] = useState<string[]>(DEFAULT_COMPONENTS);
-  const [stylePreferences, setStylePreferences] = useState<StylePreferences>({});
-  // Lifted from ReferenceSelector so the header can reflect the skip-wizard
-  // mode (Reference → Export, no Customize) the instant the user toggles it.
-  // Default = true ("Use as-is"): picking a reference jumps straight to the
-  // original DESIGN.md export, no customization wizard. Customize is opt-in.
-  const [skipWizard, setSkipWizard] = useState(true);
-
-  const [refsLoading, setRefsLoading] = useState(true);
-
-  // Guard against the initial popstate-like hydrate pushing a duplicate
-  // history entry. We only write URL on transitions the user initiates.
-  const hydrating = useRef(true);
-
-  useEffect(() => setMounted(true), []);
-
-  // ── URL hydration ────────────────────────────────────────────────
-  //
-  // URL shape (query-string, single route):
-  //   /builder                                   → step 1 (select)
-  //   /builder?step=customize&ref=<id>           → step 2 (wizard)
-  //   /builder?step=preview&ref=<id>&cfg=<hash>  → step 3 (preview + export)
-  //
-  // Backward compat: `?ref=<id>` without `step=` (old survey-result links)
-  // is treated as step=customize.
-  //
-  // `cfg` is the same base64 hash used by the npx command, so the preview
-  // URL and the generated CLI invocation always describe the same artifact.
-  const loadFromUrl = useCallback(async () => {
-    const params = new URLSearchParams(window.location.search);
-    const rawStep = (params.get("step") as Step | null) ?? null;
-    const refParam = params.get("ref");
-    const cfgParam = params.get("cfg");
-
-    const resolvedStep: Step =
-      rawStep === "preview" || rawStep === "customize" || rawStep === "select"
-        ? rawStep
-        : refParam
-          ? "customize" // legacy link
-          : "select";
-
-    // Preview needs both ref + cfg. If cfg is present, hydrate state FROM it
-    // before landing on the step (so the preview shows the full captured config).
-    if (resolvedStep === "preview" && refParam && cfgParam) {
-      try {
-        const decoded = decodeConfig(cfgParam);
-        const data = await fetchRef(refParam);
-        if (data) {
-          setDetail(data);
-          // Preserve the decoded overrides verbatim — do NOT seed empty fields
-          // from the reference defaults. An empty-string slot means "no
-          // override / use reference as-is"; filling it from defaults would
-          // defeat the Use-as-is path and cause radius-range collapses on
-          // shared preview URLs.
-          setOverrides({
-            primaryColor: decoded.overrides.primaryColor,
-            fontFamily: decoded.overrides.fontFamily,
-            headingWeight: decoded.overrides.headingWeight,
-            borderRadius: decoded.overrides.borderRadius,
-            darkMode: decoded.overrides.darkMode,
-          });
-          if (decoded.components.length > 0) setActiveComponents(decoded.components);
-          setStylePreferences(decoded.stylePreferences || {});
-          setStep("preview");
-          return;
-        }
-      } catch {
-        // malformed hash — fall through to customize/select
-      }
-    }
-
-    if (resolvedStep === "customize" && refParam) {
-      const data = await fetchRef(refParam);
-      if (data) {
-        setDetail(data);
-        setOverrides({
-          primaryColor: data.primary,
-          fontFamily: "",
-          headingWeight: "",
-          borderRadius: data.radius.replace(/[-–].*/, "").trim(),
-          darkMode: false,
-        });
-        setStep("customize");
-        return;
-      }
-    }
-
-    setStep("select");
-  }, []);
-
-  useEffect(() => {
-    fetch("/api/references")
-      .then((r) => r.json())
-      .then((data) => setRefs(data))
-      .catch(() => event("api_error", { endpoint: "/api/references" }))
-      .finally(() => setRefsLoading(false));
-  }, []);
-
-  useEffect(() => {
-    (async () => {
-      await loadFromUrl();
-      hydrating.current = false;
-    })();
-    const onPop = () => {
-      hydrating.current = true;
-      loadFromUrl().finally(() => {
-        hydrating.current = false;
-      });
-    };
-    window.addEventListener("popstate", onPop);
-    return () => window.removeEventListener("popstate", onPop);
-  }, [loadFromUrl]);
-
-  // Reset window scroll to top on every step transition. Without this, scrolling
-  // down the reference list (step 1) then proceeding leaves the next step scrolled
-  // to the carried-over position, forcing the user to scroll back up.
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [step]);
-
-  // While in preview, keep the cfg query param in sync with the live state
-  // (components, overrides, prefs) so the URL is always a truthful snapshot
-  // the user can copy-share. Uses replaceState to avoid history churn.
-  useEffect(() => {
-    if (hydrating.current) return;
-    if (step !== "preview" || !detail) return;
-    const cfg = encodeConfig(detail.id, overrides, activeComponents, stylePreferences);
-    const params = new URLSearchParams(window.location.search);
-    if (params.get("cfg") === cfg && params.get("ref") === detail.id) return;
-    params.set("step", "preview");
-    params.set("ref", detail.id);
-    params.set("cfg", cfg);
-    window.history.replaceState({}, "", `/builder?${params.toString()}`);
-  }, [step, detail, overrides, activeComponents, stylePreferences]);
-
-  // ── URL writers ──────────────────────────────────────────────────
-
-  function pushUrl(nextStep: Step, ref?: string, cfg?: string) {
-    if (hydrating.current) return; // don't write during hydration
-    const params = new URLSearchParams();
-    if (nextStep !== "select") params.set("step", nextStep);
-    if (ref) params.set("ref", ref);
-    if (cfg) params.set("cfg", cfg);
-    const qs = params.toString();
-    const url = qs ? `/builder?${qs}` : `/builder`;
-    window.history.pushState({}, "", url);
-  }
-
-  async function fetchRef(id: string): Promise<RefDetail | null> {
-    try {
-      const res = await fetch(`/api/references/${id}`);
-      if (!res.ok) return null;
-      return await res.json();
-    } catch {
-      event("api_error", { endpoint: `/api/references/${id}` });
-      return null;
-    }
-  }
-
-  const selectRef = useCallback(async (id: string) => {
-    setLoading(true);
-    const data = await fetchRef(id);
-    setLoading(false);
-    if (!data) return;
-    setDetail(data);
-    setOverrides({
-      primaryColor: data.primary,
-      fontFamily: "",
-      headingWeight: "",
-      borderRadius: data.radius.replace(/[-–].*/, "").trim(),
-      darkMode: false,
-    });
-    setActiveComponents(DEFAULT_COMPONENTS);
-    setStylePreferences({});
-    setStep("customize");
-    pushUrl("customize", id);
-  }, []);
-
-  // Skip-wizard path: load the ref but hold overrides at their empty-string
-  // defaults and stylePreferences at {}. This is the contract for "pure
-  // original" — every rewrite guard inside applyOverridesToMd and the preview
-  // honors empty strings as "no override" and falls back to the ref's own
-  // values, so the DESIGN.md and the preview render the reference unchanged.
-  const selectRefAsIs = useCallback(async (id: string) => {
-    setLoading(true);
-    const data = await fetchRef(id);
-    setLoading(false);
-    if (!data) return;
-    setDetail(data);
-    const pure: Overrides = {
-      primaryColor: "",
-      fontFamily: "",
-      headingWeight: "",
-      borderRadius: "",
-      darkMode: false,
-    };
-    setOverrides(pure);
-    setActiveComponents(DEFAULT_COMPONENTS);
-    setStylePreferences({});
-    setStep("preview");
-    event("generation_complete", { reference: id, mode: "as_is" });
-    // GA4 mirror of the Redis trackRef("generate") funnel counter.
-    event("builder_export", { reference: id, format: "as_is" });
-    trackRef("generate", id);
-    const cfg = encodeConfig(id, pure, DEFAULT_COMPONENTS, {});
-    pushUrl("preview", id, cfg);
-  }, []);
-
-  const goToPreview = useCallback(() => {
-    if (!detail) return;
-    const cfg = encodeConfig(detail.id, overrides, activeComponents, stylePreferences);
-    event("generation_complete", { reference: detail.id });
-    // GA4 mirror of the Redis trackRef("generate") funnel counter.
-    event("builder_export", { reference: detail.id, format: "customized" });
-    trackRef("generate", detail.id);
-    setStep("preview");
-    pushUrl("preview", detail.id, cfg);
-  }, [detail, overrides, activeComponents, stylePreferences]);
-
-  const goToCustomize = useCallback(() => {
-    if (!detail) return;
-    setStep("customize");
-    pushUrl("customize", detail.id);
-  }, [detail]);
-
-  const goToSelect = useCallback(() => {
-    setStep("select");
-    pushUrl("select");
-  }, []);
-
-  const goToStepFromNav = useCallback((next: Step) => {
-    if (next === "select") return goToSelect();
-    if (!detail) return;
-    if (next === "customize") return goToCustomize();
-    if (next === "preview") return goToPreview();
-  }, [detail, goToSelect, goToCustomize, goToPreview]);
-
-  // When skipWizard is on AND we aren't currently sitting on the customize
-  // step, drop "Customize" from the nav and renumber Export to 2 — the user
-  // signaled they want the direct path, so the header should mirror it.
-  // (If they're already on customize, keep all three so they can still
-  // navigate; toggling mode does not retroactively unmount the wizard.)
-  const STEPS: { key: Step; label: string; num: number }[] =
-    skipWizard && step !== "customize"
-      ? [
-          { key: "select", label: "Reference", num: 1 },
-          { key: "preview", label: "Export", num: 2 },
-        ]
-      : [
-          { key: "select", label: "Reference", num: 1 },
-          { key: "customize", label: "Customize", num: 2 },
-          { key: "preview", label: "Export", num: 3 },
-        ];
-
-  return (
-    <div className="min-h-screen">
-      {/* Header */}
-      <header className="sticky top-0 z-50 border-b border-border/40 bg-background/60 backdrop-blur-xl">
-        <div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6">
-          <Link href="/" className="flex items-center">
-            <img src="/logo.png" alt="oh-my-design" className="h-6 block dark:hidden" />
-            <img src="/logo-white.png" alt="oh-my-design" className="h-6 hidden dark:block" />
-          </Link>
-
-          {/* Steps */}
-          <nav className="hidden sm:flex items-center gap-1 rounded-full border border-border/40 bg-muted/30 dark:border-border dark:bg-muted/50 p-1 backdrop-blur">
-            {STEPS.map((s) => (
-              <button
-                key={s.key}
-                onClick={() => goToStepFromNav(s.key)}
-                disabled={!detail && s.key !== "select"}
-                className={`flex items-center gap-1.5 rounded-full px-4 py-1.5 text-xs font-medium transition-all ${
-                  step === s.key
-                    ? "bg-primary text-primary-foreground shadow-sm"
-                    : "text-muted-foreground hover:text-foreground"
-                } disabled:opacity-30 disabled:cursor-not-allowed`}
-              >
-                <span className={`flex h-4 w-4 items-center justify-center rounded-full text-[10px] ${
-                  step === s.key ? "bg-primary-foreground/20" : "bg-muted"
-                }`}>
-                  {s.num}
-                </span>
-                {s.label}
-              </button>
-            ))}
-          </nav>
-
-          {mounted && (
-            <button
-              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-              className="flex h-8 w-8 items-center justify-center rounded-full border border-border/40 bg-card/50 dark:border-border dark:bg-card/60 transition-colors hover:bg-accent"
-            >
-              {theme === "dark" ? <Sun className="h-3.5 w-3.5" /> : <Moon className="h-3.5 w-3.5" />}
-            </button>
-          )}
-        </div>
-      </header>
-
-      {/* Content. Preview gets extra bottom padding so the last content row
-          stays reachable above the fixed install bar (same pb pattern as the
-          reference detail pages). */}
-      <main className={`mx-auto max-w-7xl px-4 py-8 sm:px-6 ${step === "preview" ? "pb-24" : ""}`}>
-        {step === "select" && (
-          <ReferenceSelector
-            refs={refs}
-            onSelect={selectRef}
-            onSelectAsIs={selectRefAsIs}
-            loading={loading}
-            initialLoading={refsLoading}
-            skipWizard={skipWizard}
-            onSkipWizardChange={setSkipWizard}
-          />
-        )}
-        {step === "customize" && detail && (
-          <DesignWizard
-            detail={detail}
-            overrides={overrides}
-            onChange={setOverrides}
-            onComplete={goToPreview}
-            onBack={goToSelect}
-            onPreferencesChange={(p) => setStylePreferences(p as StylePreferences)}
-          />
-        )}
-        {step === "preview" && detail && (
-          <>
-            <PreviewExportView
-              detail={detail}
-              overrides={overrides}
-              onBack={skipWizard ? goToSelect : goToCustomize}
-              components={activeComponents}
-              onComponentsChange={setActiveComponents}
-              stylePreferences={stylePreferences}
-            />
-            {/* Builder is the main funnel surface — close the loop from preview
-                into the install command. Same sticky bottom bar as the reference
-                detail pages (#19); the main's pb-24 above keeps content clear of
-                it. Fires install_copy{source:'builder'} / prompt_copy{reference}
-                (see InstallCta). The first prompt is composed from the LIVE
-                builder config (not a generic brand line) so the user's step-2
-                customizations survive the handoff to the agent; the URL we
-                append matches the cfg replaceState sync above (same encoder). */}
-            <InstallCta
-              variant="bar"
-              source="builder"
-              reference={detail.id}
-              brandName={detail.id}
-              prompt={buildBuilderPrompt({
-                brandName: detail.id,
-                overrides,
-                components: activeComponents,
-                stylePreferences,
-                // selectRef seeds these two slots from the reference, so a
-                // matching value means "unchanged" — not a customization.
-                defaults: {
-                  primaryColor: detail.primary,
-                  borderRadius: detail.radius.replace(/[-–].*/, "").trim(),
-                },
-                url: `${typeof window !== "undefined" ? window.location.origin : "https://oh-my-design.kr"}/builder?step=preview&ref=${detail.id}&cfg=${encodeConfig(detail.id, overrides, activeComponents, stylePreferences)}`,
-              })}
-            />
-          </>
-        )}
-      </main>
-
-      {/* Floating scroll-to-top on the long-scrolling steps (select grid + preview).
-          On preview it lifts above the fixed install bar (bottom-4 + pill height)
-          so the two floating controls never overlap on narrow viewports. */}
-      {(step === "select" || step === "preview") && (
-        <ScrollToTop bottomClass={step === "preview" ? "bottom-20" : "bottom-5"} />
-      )}
-    </div>
-  );
-}

package/.opencode/oh-my-design/web/src/app/changelog/[version]/page.tsx

@@ -1,160 +0,0 @@
-/**
- * /changelog/[version] — single release page. Server component, body
- * rendered via react-markdown (already a project dep). JSON-LD =
- * Article with datePublished.
- */
-
-import type { Metadata } from "next";
-import Link from "next/link";
-import { notFound } from "next/navigation";
-import { ArrowLeft } from "lucide-react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import { getChangelog, getChangelogEntry } from "@/lib/changelog";
-
-const SITE_URL = "https://oh-my-design.kr";
-
-export function generateStaticParams() {
-  return getChangelog().map((e) => ({ version: e.version }));
-}
-
-export async function generateMetadata({
-  params,
-}: {
-  params: Promise<{ version: string }>;
-}): Promise<Metadata> {
-  const { version } = await params;
-  const entry = getChangelogEntry(version);
-  if (!entry) return {};
-  const title = `oh-my-design v${entry.version}${entry.date ? ` (${entry.date})` : ""}`;
-  const description = entry.headline
-    ? entry.headline.slice(0, 200)
-    : `Release notes for oh-my-design-cli v${entry.version}.`;
-  return {
-    title,
-    description,
-    alternates: { canonical: `${SITE_URL}/changelog/${version}` },
-    openGraph: {
-      title,
-      description,
-      url: `${SITE_URL}/changelog/${version}`,
-      type: "article",
-      publishedTime: entry.date,
-    },
-  };
-}
-
-export default async function ChangelogVersionPage({
-  params,
-}: {
-  params: Promise<{ version: string }>;
-}) {
-  const { version } = await params;
-  const entry = getChangelogEntry(version);
-  if (!entry) notFound();
-
-  const all = getChangelog();
-  const idx = all.findIndex((e) => e.version === version);
-  const prev = idx >= 0 ? all[idx + 1] : null; // older
-  const next = idx > 0 ? all[idx - 1] : null; // newer
-
-  const jsonLd = {
-    "@context": "https://schema.org",
-    "@type": "Article",
-    headline: `oh-my-design v${entry.version}`,
-    description: entry.headline || `Release notes for v${entry.version}.`,
-    author: { "@type": "Organization", name: "oh-my-design" },
-    publisher: { "@type": "Organization", name: "oh-my-design" },
-    datePublished: entry.date ?? "2026-04-29",
-    dateModified: entry.date ?? "2026-04-29",
-    mainEntityOfPage: `${SITE_URL}/changelog/${entry.version}`,
-  };
-
-  return (
-    <div className="min-h-screen bg-background text-foreground">
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-      />
-
-      <header className="sticky top-0 z-50 border-b border-border/40 bg-background/60 backdrop-blur-xl">
-        <div className="mx-auto flex h-14 max-w-3xl items-center justify-between px-4 sm:px-6">
-          <Link href="/" className="flex items-center">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src="/logo.png" alt="oh-my-design" className="h-6 sm:h-7 block dark:hidden" />
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src="/logo-white.png" alt="oh-my-design" className="h-6 sm:h-7 hidden dark:block" />
-          </Link>
-          <nav className="flex items-center gap-4 text-xs sm:text-sm">
-            <Link href="/changelog" className="text-muted-foreground hover:text-foreground">All releases</Link>
-            <Link href="/docs" className="text-muted-foreground hover:text-foreground">Docs</Link>
-            <a href="https://github.com/kwakseongjae/oh-my-design" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-foreground">GitHub</a>
-          </nav>
-        </div>
-      </header>
-
-      <article className="mx-auto max-w-3xl px-4 sm:px-6 pt-12 pb-24">
-        <Link
-          href="/changelog"
-          className="inline-flex items-center gap-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground mb-6"
-        >
-          <ArrowLeft className="h-3.5 w-3.5" /> All releases
-        </Link>
-
-        <div className="flex flex-wrap items-baseline gap-3 mb-3">
-          <code className="font-mono text-2xl font-bold text-primary">
-            v{entry.version}
-          </code>
-          {entry.date && (
-            <span className="text-[12px] font-mono uppercase tracking-wider text-muted-foreground">
-              {entry.date}
-            </span>
-          )}
-        </div>
-        {entry.headline && (
-          <h1
-            className="text-2xl sm:text-3xl font-bold tracking-tight leading-snug"
-            style={{ fontFamily: "var(--font-geist-sans), system-ui, sans-serif" }}
-          >
-            {entry.headline}
-          </h1>
-        )}
-
-        <div className="prose prose-sm sm:prose-base dark:prose-invert mt-8 max-w-none
-          prose-headings:font-semibold prose-headings:tracking-tight
-          prose-h3:text-base prose-h3:mt-8 prose-h3:mb-3
-          prose-p:leading-relaxed prose-p:text-muted-foreground
-          prose-li:text-muted-foreground prose-li:leading-relaxed
-          prose-strong:text-foreground
-          prose-code:text-[0.9em] prose-code:font-mono prose-code:text-primary prose-code:before:content-none prose-code:after:content-none prose-code:bg-foreground/[0.05] prose-code:rounded prose-code:px-1 prose-code:py-0.5
-          prose-pre:rounded-xl prose-pre:border prose-pre:border-border/60
-          prose-a:text-foreground prose-a:underline prose-a:underline-offset-4">
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>{entry.body}</ReactMarkdown>
-        </div>
-
-        <nav className="mt-14 flex items-center justify-between border-t border-border/40 pt-6 text-sm">
-          {prev ? (
-            <Link
-              href={`/changelog/${prev.version}`}
-              className="text-muted-foreground hover:text-foreground"
-            >
-              ← v{prev.version}
-            </Link>
-          ) : (
-            <span />
-          )}
-          {next ? (
-            <Link
-              href={`/changelog/${next.version}`}
-              className="text-muted-foreground hover:text-foreground"
-            >
-              v{next.version} →
-            </Link>
-          ) : (
-            <span />
-          )}
-        </nav>
-      </article>
-    </div>
-  );
-}