zugzbot 1.0.21 → 1.0.23

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

@@ -1,162 +0,0 @@
-"use client";
-
-/**
- * Design-system directory card — extracted from /design-systems/page.tsx so
- * the same grid card serves both the full directory and /collections/[slug]
- * pages. Thumbnail cascade, logo fallback chain, and analytics stay identical;
- * only the ds_detail_open `source` varies per surface.
- */
-
-import Link from "next/link";
-import { useState } from "react";
-import { ExternalLink } from "lucide-react";
-import { isNewRef } from "@/lib/new-refs";
-import { StatusBadge } from "@/components/status-badge";
-import { BrandNameplateLogo } from "@/components/brand-logo";
-import type { DesignSystemInfo } from "@/lib/design-systems";
-import { getLogoUrl, isGitHubLogo, getLogoFallbackUrl } from "@/lib/logos";
-import { event } from "@/lib/gtag";
-
-export function DSCard({
-  ds,
-  hot = false,
-  source = "directory",
-}: {
-  ds: DesignSystemInfo;
-  hot?: boolean;
-  /** Where the card is rendered — becomes ds_detail_open { source }. */
-  source?: string;
-}) {
-  const isSystem = ds.type === "system";
-  return (
-    <Link
-      href={`/design-systems/${ds.refId}`}
-      onClick={() =>
-        event("ds_detail_open", { reference: ds.refId, source })
-      }
-      className="group relative flex flex-col gap-3 rounded-2xl border border-border/50 bg-card/40 p-3 transition-all hover:border-foreground/20 hover:bg-card hover:-translate-y-0.5 dark:border-border dark:bg-card/60 dark:hover:bg-card"
-    >
-      {/* Thumbnail — OG image with logo fallback */}
-      <CardThumbnail ds={ds} />
-
-      {/* Body */}
-      <div className="px-1 pb-2">
-        <div className="flex items-start justify-between gap-2 mb-1.5">
-          <span
-            className={`text-[10px] font-mono uppercase tracking-wider px-1.5 py-0.5 rounded ${
-              isSystem ? "bg-primary/10 text-primary" : "bg-foreground/5 text-muted-foreground"
-            }`}
-          >
-            {isSystem ? "Design System" : "Brand"}
-          </span>
-          <div className="flex items-center gap-1.5">
-            {hot && <StatusBadge kind="hot" />}
-            {isNewRef(ds.refId) && <StatusBadge kind="new" />}
-          </div>
-        </div>
-        <div className="flex items-center gap-3">
-          {/* Neutral nameplate logo — shared with the builder (issue #19);
-              see BrandNameplateLogo for the fallback chain. */}
-          <BrandNameplateLogo refId={ds.refId} name={ds.name} />
-          <div className="min-w-0 flex-1">
-            <div className="text-base font-semibold leading-tight truncate">{ds.name}</div>
-            <div className="text-[11px] text-muted-foreground/80 mt-0.5 capitalize truncate">
-              {ds.refId.replace(".app", "").replace(".ai", "")}
-            </div>
-          </div>
-        </div>
-        <div className="text-xs text-muted-foreground leading-snug mt-2 line-clamp-2">
-          {ds.description}
-        </div>
-        {/* Secondary action — jump straight to the canonical external site.
-            Must be a <button> (not <a>), because this node is already a
-            descendant of a <Link>/<a> and HTML forbids nested anchors.
-            stopPropagation alone only suppresses the JS click bubble;
-            the DOM validity issue triggers a hydration error. We open
-            the external URL programmatically via window.open instead. */}
-        <button
-          type="button"
-          onClick={(e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            event("ds_external_click", { reference: ds.refId });
-            window.open(ds.url, "_blank", "noopener,noreferrer");
-          }}
-          className="mt-3 inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground"
-          aria-label={`${ds.name} official site (opens in a new tab)`}
-        >
-          Official site <ExternalLink className="h-3 w-3" />
-        </button>
-      </div>
-    </Link>
-  );
-}
-
-/**
- * Thumbnail cascade: OG image → mShots live screenshot → gradient-logo tile.
- *
- * mShots (WordPress's public screenshot service) renders any public URL as a
- * cached screenshot and is our safety net for sites that don't publish an
- * og:image or block hotlinking. First visitor may see a brief placeholder
- * while mShots warms its cache — subsequent loads are instant.
- */
-function CardThumbnail({ ds }: { ds: DesignSystemInfo }) {
-  const isSystem = ds.type === "system";
-  const initialStage: 0 | 1 | 2 = ds.ogImage ? 0 : 1;
-  const [stage, setStage] = useState<0 | 1 | 2>(initialStage);
-
-  if (stage === 2) return <LogoFallbackThumbnail refId={ds.refId} isSystem={isSystem} name={ds.name} />;
-
-  const src =
-    stage === 0
-      ? ds.ogImage!
-      : `https://s0.wp.com/mshots/v1/${encodeURIComponent(ds.url)}?w=1200&h=675`;
-
-  return (
-    <div className="relative overflow-hidden rounded-xl ring-1 ring-border/40 aspect-[16/9] bg-muted/30">
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
-        src={src}
-        alt={`${ds.name} preview`}
-        className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
-        loading="lazy"
-        onError={() => setStage((s) => (s < 2 ? ((s + 1) as 0 | 1 | 2) : 2))}
-      />
-    </div>
-  );
-}
-
-function LogoFallbackThumbnail({
-  refId,
-  isSystem,
-  name,
-}: {
-  refId: string;
-  isSystem: boolean;
-  name: string;
-}) {
-  const logoColor = isSystem ? "ffffff" : "475569";
-  const logoUrl = getLogoUrl(refId, logoColor) ?? getLogoFallbackUrl(refId);
-  const raster = isGitHubLogo(refId);
-  const bg = isSystem
-    ? { backgroundImage: "linear-gradient(135deg, #1e293b 0%, #312e81 50%, #1e1b4b 100%)" }
-    : undefined;
-  return (
-    <div
-      className={`flex aspect-[16/9] items-center justify-center overflow-hidden rounded-xl ring-1 ring-border/40 ${
-        isSystem ? "" : "bg-muted/60 dark:bg-muted/30"
-      }`}
-      style={bg}
-    >
-      {logoUrl && (
-        // eslint-disable-next-line @next/next/no-img-element
-        <img
-          src={logoUrl}
-          alt={name}
-          className={raster ? "h-12 w-12 rounded object-contain" : "h-11 w-11 object-contain"}
-          loading="lazy"
-        />
-      )}
-    </div>
-  );
-}

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

@@ -1,162 +0,0 @@
-"use client";
-
-import { useMemo, useState } from "react";
-import { event, trackRef } from "@/lib/gtag";
-import { Copy, Check, Download, Eye, FileText } from "lucide-react";
-import { generateShadcnCss, applyOverridesToMd } from "@/lib/core/generate-css";
-import { generateNpxCommand } from "@/lib/core/config-hash";
-import type { Overrides, StylePreferences } from "@/lib/core/types";
-import type { RefDetail } from "@/app/builder/page";
-import { Markdown } from "@/components/markdown";
-
-type MdView = "rendered" | "raw";
-
-export function ExportPanel({
-  detail,
-  overrides,
-  components,
-  stylePreferences,
-}: {
-  detail: RefDetail;
-  overrides: Overrides;
-  components?: string[];
-  stylePreferences?: StylePreferences;
-}) {
-  const primary = overrides.primaryColor || detail.primary;
-  const radius = overrides.borderRadius || detail.radius.replace(/[-–].*/, "").trim();
-  const [copied, setCopied] = useState<string | null>(null);
-
-  // Only surface the toggle when the source file actually carries an OmD v0.1
-  // Philosophy Layer — checked via the canonical "## 10. Voice & Tone" header.
-  const hasPhilosophyLayer = detail.designMd.includes("## 10. Voice & Tone");
-  const [includePhilosophyLayer, setIncludePhilosophyLayer] = useState(true);
-
-  // Rendered vs raw-source view of DESIGN.md. Default is "rendered" because
-  // ExportPanel has always rendered markdown (via a hand-rolled renderer).
-  // The toggle adds a "raw" view for users who want to inspect the source
-  // DESIGN.md before copy/download — it does not change the default.
-  const [mdView, setMdView] = useState<MdView>("rendered");
-
-  const css = useMemo(
-    () => generateShadcnCss(primary, detail.background, detail.foreground, radius, detail.accent, detail.border, overrides.darkMode),
-    [primary, detail, radius, overrides.darkMode],
-  );
-
-  const designMd = useMemo(
-    () => applyOverridesToMd(
-      detail.designMd,
-      detail.id.charAt(0).toUpperCase() + detail.id.slice(1),
-      detail.primary, detail.fontFamily,
-      overrides, components, stylePreferences,
-      includePhilosophyLayer,
-    ),
-    [detail, overrides, components, stylePreferences, includePhilosophyLayer],
-  );
-
-  function copyTo(key: string, text: string) {
-    navigator.clipboard.writeText(text);
-    event("copy_designmd", { reference: detail.id });
-    trackRef("copy", detail.id);
-    setCopied(key);
-    setTimeout(() => setCopied(null), 2000);
-  }
-
-  function download() {
-    const blob = new Blob([designMd], { type: "text/plain" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "DESIGN.md";
-    a.click();
-    URL.revokeObjectURL(url);
-    event("download_designmd", { reference: detail.id });
-    trackRef("download", detail.id);
-  }
-
-  function setView(next: MdView) {
-    setMdView(next);
-    event("md_view_toggle", { reference: detail.id, view: next });
-  }
-
-  return (
-    <div>
-      {/* DESIGN.md viewer */}
-      <div className="rounded-xl border border-border/60 dark:border-border overflow-hidden">
-        {/* Toolbar */}
-        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border/40 dark:border-border bg-muted/20 dark:bg-muted/30 px-4 py-2">
-          {hasPhilosophyLayer ? (
-            <label
-              className="flex items-center gap-2 text-sm text-foreground cursor-pointer select-none"
-              title="Voice · Narrative · Principles · Personas · States · Motion. Uncheck to export only the base design system."
-            >
-              <input
-                type="checkbox"
-                checked={includePhilosophyLayer}
-                onChange={(e) => {
-                  const next = e.target.checked;
-                  setIncludePhilosophyLayer(next);
-                  event("philosophy_toggle", { reference: detail.id, on: next });
-                }}
-                className="h-4 w-4 cursor-pointer accent-primary"
-              />
-              <span className="font-medium">Include brand philosophy</span>
-            </label>
-          ) : (
-            <span />
-          )}
-          <div className="flex items-center gap-2">
-            {/* Rendered ↔ Raw toggle — segmented control */}
-            <div className="flex items-center gap-0.5 rounded-lg border border-border/60 dark:border-border bg-background p-0.5">
-              <button
-                onClick={() => setView("rendered")}
-                className={`flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors ${
-                  mdView === "rendered"
-                    ? "bg-muted text-foreground"
-                    : "text-muted-foreground hover:text-foreground"
-                }`}
-                aria-pressed={mdView === "rendered"}
-              >
-                <Eye className="h-3 w-3" /> Rendered
-              </button>
-              <button
-                onClick={() => setView("raw")}
-                className={`flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors ${
-                  mdView === "raw"
-                    ? "bg-muted text-foreground"
-                    : "text-muted-foreground hover:text-foreground"
-                }`}
-                aria-pressed={mdView === "raw"}
-              >
-                <FileText className="h-3 w-3" /> Raw
-              </button>
-            </div>
-            <button
-              onClick={download}
-              className="flex items-center gap-2 rounded-lg border border-border/60 dark:border-border bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted"
-            >
-              <Download className="h-4 w-4" /> Download
-            </button>
-            <button
-              onClick={() => copyTo("md", designMd)}
-              className="flex items-center gap-2 rounded-lg border border-border/60 dark:border-border bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted"
-            >
-              {copied === "md" ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
-              {copied === "md" ? "Copied" : "Copy"}
-            </button>
-          </div>
-        </div>
-
-        {/* Content */}
-        {mdView === "rendered" ? (
-          <div className="p-6 max-h-[60vh] overflow-auto">
-            <Markdown content={designMd} />
-          </div>
-        ) : (
-          <pre className="p-6 max-h-[60vh] overflow-auto text-[11px] leading-[1.7] font-mono text-foreground/80 whitespace-pre-wrap">
-            {designMd}
-          </pre>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,121 +0,0 @@
-/**
- * Font card — shows a font's name, license badge, source, and install CTA.
- * Used in both the builder Live Preview (preview.tsx) and the showcase
- * route (reference-preview.tsx).
- */
-
-import type { FontInfo, FontLicense } from "@/lib/font-registry";
-
-const LICENSE_STYLES: Record<FontLicense, { bg: string; color: string; label: string }> = {
-  OFL:                  { bg: "rgba(16, 185, 129, 0.12)", color: "#047857", label: "Open · OFL" },
-  "Apache 2.0":         { bg: "rgba(16, 185, 129, 0.12)", color: "#047857", label: "Open · Apache 2.0" },
-  Proprietary:          { bg: "rgba(245, 158, 11, 0.12)", color: "#b45309", label: "Commercial" },
-  "Brand-proprietary":  { bg: "rgba(239, 68, 68, 0.12)",  color: "#b91c1c", label: "Brand-only" },
-  System:               { bg: "rgba(107, 114, 128, 0.12)", color: "#4b5563", label: "System" },
-  Mixed:                { bg: "rgba(99, 102, 241, 0.12)", color: "#4338ca", label: "Mixed" },
-};
-
-const ROLE_LABELS: Record<string, string> = {
-  primary: "Primary",
-  mono: "Monospace",
-  display: "Display",
-  serif: "Serif",
-  fallback: "Fallback",
-  icon: "Icon",
-};
-
-function ExternalIcon() {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="h-3 w-3"
-      aria-hidden="true"
-    >
-      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
-      <polyline points="15 3 21 3 21 9" />
-      <line x1="10" y1="14" x2="21" y2="3" />
-    </svg>
-  );
-}
-
-export function FontCard({ font, role, fontFamilyForRender }: { font: FontInfo; role?: string; fontFamilyForRender?: string }) {
-  const license = LICENSE_STYLES[font.license];
-  return (
-    <div className="rounded-xl bg-card p-4 ring-1 ring-border/40 flex flex-col gap-3 min-h-[160px]">
-      {/* Role label */}
-      {role && (
-        <div className="text-[9px] font-mono uppercase tracking-wider text-muted-foreground">
-          {ROLE_LABELS[role] ?? role}
-        </div>
-      )}
-      {/* Name (system-ui — no brand-font rendering attempt; we just label what it IS) */}
-      <div>
-        <div
-          className="text-xl font-semibold leading-tight"
-          style={{ fontFamily: fontFamilyForRender ?? "system-ui, sans-serif" }}
-          title={font.name}
-        >
-          {font.name}
-        </div>
-        <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
-          <span
-            className="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium"
-            style={{ background: license.bg, color: license.color }}
-          >
-            {license.label}
-          </span>
-          {!font.installable && font.license === "System" && (
-            <span className="text-[10px] text-muted-foreground">no install needed</span>
-          )}
-        </div>
-      </div>
-
-      {/* Notes */}
-      {font.notes && (
-        <div className="text-[11px] text-muted-foreground leading-snug flex-1">{font.notes}</div>
-      )}
-
-      {/* Source link / CTA */}
-      {font.source ? (
-        <a
-          href={font.source.url}
-          target="_blank"
-          rel="noopener noreferrer"
-          className={`inline-flex items-center justify-between gap-2 rounded-lg border border-border/60 px-3 py-2 text-xs font-medium transition-colors hover:border-foreground/30 hover:bg-accent ${
-            font.installable ? "text-foreground" : "text-muted-foreground"
-          }`}
-        >
-          <span className="truncate">
-            {font.installable ? "Install via " : "Source · "}
-            {font.source.name}
-          </span>
-          <ExternalIcon />
-        </a>
-      ) : (
-        <div className="text-[11px] text-muted-foreground italic">Not publicly distributed.</div>
-      )}
-    </div>
-  );
-}
-
-export function FontStackGrid({ stack, fonts }: { stack: string; fonts: FontInfo[] }) {
-  return (
-    <div>
-      <div className="mb-2 flex items-baseline gap-2">
-        <div className="text-[10px] font-mono text-muted-foreground uppercase tracking-wider">Font Stack</div>
-        <div className="text-[10px] text-muted-foreground/70">{fonts.length} font{fonts.length !== 1 ? "s" : ""} resolved · CSS fallback chain</div>
-      </div>
-      <div className="text-[11px] font-mono text-muted-foreground mb-4 break-all">{stack}</div>
-      <div className="grid gap-3 sm:grid-cols-2 md:grid-cols-3">
-        {fonts.map((f, i) => (
-          <FontCard key={`${f.name}-${i}`} font={f} />
-        ))}
-      </div>
-    </div>
-  );
-}

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

@@ -1,86 +0,0 @@
-"use client";
-
-/**
- * Color swatches for the preview. Lets users see their chosen font
- * rendered in a brand-plausible color, not just flat foreground. Picks
- * apply to text only — background stays page-neutral so we don't have
- * to worry about contrast pairs for 56 combinations.
- *
- * Curated small palette — warm/cool/neutral anchors — beats a freeform
- * picker here: users want "how would this look in a real brand color",
- * not "exact hex input".
- */
-
-import { Check } from "lucide-react";
-
-export interface Swatch {
-  id: string;
-  label: string;
-  /** CSS color value applied to text in the preview. */
-  value: string;
-}
-
-export const PREVIEW_SWATCHES: Swatch[] = [
-  { id: "ink", label: "Ink", value: "currentColor" },
-  { id: "charcoal", label: "Charcoal", value: "#1f2937" },
-  { id: "navy", label: "Navy", value: "#1e3a8a" },
-  { id: "electric", label: "Electric", value: "#2563eb" },
-  { id: "forest", label: "Forest", value: "#166534" },
-  { id: "terracotta", label: "Terracotta", value: "#c2410c" },
-  { id: "wine", label: "Wine", value: "#831843" },
-  { id: "plum", label: "Plum", value: "#6b21a8" },
-  { id: "coral", label: "Coral", value: "#e11d48" },
-];
-
-export function ColorPalette({
-  activeId,
-  onChange,
-}: {
-  activeId: string;
-  onChange: (swatch: Swatch) => void;
-}) {
-  return (
-    <div
-      className="flex flex-wrap items-center gap-1.5"
-      role="radiogroup"
-      aria-label="Preview color"
-    >
-      {PREVIEW_SWATCHES.map((s) => {
-        const active = s.id === activeId;
-        const isInk = s.id === "ink";
-        return (
-          <button
-            key={s.id}
-            type="button"
-            role="radio"
-            aria-checked={active}
-            onClick={() => onChange(s)}
-            title={s.label}
-            className={
-              active
-                ? "relative flex h-6 w-6 items-center justify-center rounded-full ring-2 ring-foreground ring-offset-2 ring-offset-background transition-transform"
-                : "relative flex h-6 w-6 items-center justify-center rounded-full border border-border/40 transition-transform hover:scale-110 dark:border-border"
-            }
-            style={{
-              background: isInk
-                ? "conic-gradient(from 0deg, #0f172a, #374151, #0f172a)"
-                : s.value,
-            }}
-          >
-            {active && (
-              <Check
-                className="h-3 w-3"
-                style={{
-                  color:
-                    isInk || s.value === "#1f2937" ? "#fff" : "#fff",
-                  mixBlendMode: "difference",
-                }}
-                aria-hidden
-              />
-            )}
-          </button>
-        );
-      })}
-    </div>
-  );
-}