zugzbot 1.0.21 → 1.0.22

package/.opencode/oh-my-design/web/src/components/playground/controls/voice-picker.tsx

@@ -1,120 +0,0 @@
-"use client";
-
-import { Lightbulb } from "lucide-react";
-import {
-  VOICE_POOL,
-  VOICE_MAX,
-  type VoiceAdjective,
-} from "@/lib/playground/state";
-import { MOOD_VOICE_DEFAULTS } from "@/lib/playground/samples";
-import type { MoodPreset } from "@/lib/playground/state";
-
-export function VoicePicker({
-  value,
-  mood,
-  onChange,
-}: {
-  value: VoiceAdjective[];
-  mood: MoodPreset;
-  onChange: (next: VoiceAdjective[]) => void;
-}) {
-  const suggestions = MOOD_VOICE_DEFAULTS[mood];
-
-  function toggle(adj: VoiceAdjective) {
-    const has = value.includes(adj);
-    if (has) {
-      onChange(value.filter((v) => v !== adj));
-    } else if (value.length < VOICE_MAX) {
-      onChange([...value, adj]);
-    }
-  }
-
-  function useSuggestions() {
-    onChange([...suggestions]);
-  }
-
-  function clear() {
-    onChange([]);
-  }
-
-  const activeMatchesSuggestions =
-    value.length === suggestions.length &&
-    value.every((v) => suggestions.includes(v));
-
-  return (
-    <div className="space-y-2.5">
-      {/* Mood suggestion banner — makes the auto-pop behavior transparent */}
-      <div className="flex items-start gap-2 rounded-lg border border-primary/20 bg-primary/5 px-3 py-2 text-[11px] leading-snug">
-        <Lightbulb className="mt-0.5 h-3.5 w-3.5 shrink-0 text-primary" />
-        <div className="flex-1 min-w-0">
-          <span className="font-semibold">
-            Suggested for <span className="capitalize">{mood}</span>:
-          </span>{" "}
-          <span className="text-muted-foreground">{suggestions.join(", ")}.</span>{" "}
-          {activeMatchesSuggestions ? (
-            <button
-              type="button"
-              onClick={clear}
-              className="underline underline-offset-2 hover:text-foreground"
-            >
-              clear and pick your own
-            </button>
-          ) : (
-            <button
-              type="button"
-              onClick={useSuggestions}
-              className="underline underline-offset-2 hover:text-foreground"
-            >
-              use these
-            </button>
-          )}
-        </div>
-      </div>
-
-      <div className="flex flex-wrap gap-1.5">
-        {VOICE_POOL.map((adj) => {
-          const active = value.includes(adj);
-          const suggested = suggestions.includes(adj);
-          const atCap = !active && value.length >= VOICE_MAX;
-          const base = "relative rounded-full border px-2.5 py-1 text-xs font-medium transition-all";
-          let variant: string;
-          if (active) {
-            variant =
-              "border-primary bg-primary/10 text-primary";
-          } else if (atCap) {
-            variant =
-              "border-border/30 bg-muted/20 text-muted-foreground/50 cursor-not-allowed";
-          } else if (suggested) {
-            variant =
-              "border-primary/30 bg-primary/5 text-foreground hover:bg-primary/10 hover:border-primary/40";
-          } else {
-            variant =
-              "border-border/50 bg-background/50 text-foreground hover:border-foreground/40 hover:bg-accent/30";
-          }
-          return (
-            <button
-              key={adj}
-              type="button"
-              disabled={atCap}
-              onClick={() => toggle(adj)}
-              className={`${base} ${variant}`}
-              aria-pressed={active}
-              title={suggested ? `Suggested for ${mood}` : undefined}
-            >
-              {suggested && (
-                <span
-                  className="absolute right-1 top-0.5 h-1 w-1 rounded-full bg-primary"
-                  aria-hidden
-                />
-              )}
-              {adj}
-            </button>
-          );
-        })}
-      </div>
-      <p className="text-[10px] text-muted-foreground leading-relaxed">
-        {value.length} / {VOICE_MAX} selected · dot = suggested for this mood
-      </p>
-    </div>
-  );
-}

package/.opencode/oh-my-design/web/src/components/playground/controls/weight-picker.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import { WEIGHT_PICKS, type WeightScale } from "@/lib/playground/state";
-import { WEIGHT_RULES } from "@/lib/playground/rules/weight";
-
-export function WeightPicker({
-  value,
-  onPick,
-}: {
-  value: WeightScale;
-  onPick: (w: WeightScale) => void;
-}) {
-  return (
-    <div className="grid grid-cols-3 gap-1.5">
-      {WEIGHT_PICKS.map((w) => {
-        const active = value === w;
-        const rules = WEIGHT_RULES[w];
-        return (
-          <button
-            key={w}
-            type="button"
-            onClick={() => onPick(w)}
-            className={`flex flex-col items-stretch gap-1 rounded-lg border p-2.5 text-left transition-all ${
-              active
-                ? "border-primary bg-primary/5"
-                : "border-border/50 hover:border-foreground/30 hover:bg-accent/30"
-            }`}
-            aria-pressed={active}
-          >
-            <div
-              className="text-xl leading-none"
-              style={{ fontWeight: rules.heading }}
-              aria-hidden
-            >
-              Aa
-            </div>
-            <div className="mt-1">
-              <div className="text-xs font-semibold capitalize">{w}</div>
-              <div className="text-[10px] text-muted-foreground leading-snug">
-                {rules.heading}/{rules.body}
-              </div>
-            </div>
-          </button>
-        );
-      })}
-    </div>
-  );
-}

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

@@ -1,120 +0,0 @@
-"use client";
-
-import { useState, useMemo } from "react";
-import { Copy, Check, Download, Eye, FileText } from "lucide-react";
-import { Markdown } from "@/components/markdown";
-import { generateDesignMd } from "@/lib/playground/generate";
-import type { PlaygroundState } from "@/lib/playground/state";
-import { event } from "@/lib/gtag";
-
-export function ExportBox({ state }: { state: PlaygroundState }) {
-  const [view, setView] = useState<"rendered" | "raw">("rendered");
-  const [copied, setCopied] = useState(false);
-
-  const md = useMemo(() => generateDesignMd(state), [state]);
-  const nameMissing = state.name.trim() === "";
-  const personasShort = state.personas.length < 2;
-
-  async function copy() {
-    if (typeof navigator === "undefined") return;
-    try {
-      await navigator.clipboard.writeText(md);
-      event("playground_export_copy", { brand_name: state.name });
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      window.prompt("Copy DESIGN.md:", md);
-    }
-  }
-
-  function download() {
-    const blob = new Blob([md], { type: "text/markdown" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "DESIGN.md";
-    a.click();
-    URL.revokeObjectURL(url);
-    event("playground_export_md", {
-      brand_name: state.name,
-      name_set: !nameMissing,
-      personas: state.personas.length,
-    });
-  }
-
-  return (
-    <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 bg-muted/20 px-4 py-2 dark:border-border dark:bg-muted/30">
-        <div className="text-xs font-semibold uppercase tracking-[0.1em] text-muted-foreground">
-          DESIGN.md Export
-        </div>
-        <div className="flex items-center gap-2">
-          <div className="flex items-center gap-0.5 rounded-lg border border-border/60 bg-background p-0.5 dark:border-border">
-            <button
-              type="button"
-              onClick={() => setView("rendered")}
-              className={`flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium transition-colors ${
-                view === "rendered" ? "bg-muted text-foreground" : "text-muted-foreground"
-              }`}
-              aria-pressed={view === "rendered"}
-            >
-              <Eye className="h-3 w-3" /> Rendered
-            </button>
-            <button
-              type="button"
-              onClick={() => setView("raw")}
-              className={`flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium transition-colors ${
-                view === "raw" ? "bg-muted text-foreground" : "text-muted-foreground"
-              }`}
-              aria-pressed={view === "raw"}
-            >
-              <FileText className="h-3 w-3" /> Raw
-            </button>
-          </div>
-          <button
-            type="button"
-            onClick={download}
-            disabled={nameMissing}
-            className="inline-flex items-center gap-1.5 rounded-lg border border-border/60 bg-background px-3 py-1.5 text-xs font-medium transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 dark:border-border"
-          >
-            <Download className="h-3.5 w-3.5" /> Download
-          </button>
-          <button
-            type="button"
-            onClick={copy}
-            disabled={nameMissing}
-            className="inline-flex items-center gap-1.5 rounded-lg border border-border/60 bg-background px-3 py-1.5 text-xs font-medium transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 dark:border-border"
-          >
-            {copied ? (
-              <Check className="h-3.5 w-3.5 text-green-500" />
-            ) : (
-              <Copy className="h-3.5 w-3.5" />
-            )}
-            {copied ? "Copied" : "Copy"}
-          </button>
-        </div>
-      </div>
-
-      {(nameMissing || personasShort) && (
-        <div className="border-b border-amber-500/30 bg-amber-50 px-4 py-2 text-[11px] text-amber-900 dark:bg-amber-500/10 dark:text-amber-400">
-          {nameMissing && <div>⚠ Brand name required before export.</div>}
-          {!nameMissing && personasShort && (
-            <div>⚠ Pick at least 2 personas for a complete Philosophy layer.</div>
-          )}
-        </div>
-      )}
-
-      {/* Body */}
-      {view === "rendered" ? (
-        <div className="max-h-[50vh] overflow-auto p-6">
-          <Markdown content={md} />
-        </div>
-      ) : (
-        <pre className="max-h-[50vh] overflow-auto p-6 whitespace-pre-wrap font-mono text-[11px] leading-[1.7] text-foreground/80">
-          {md}
-        </pre>
-      )}
-    </div>
-  );
-}

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

@@ -1,71 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import { ArrowLeft, Moon, Sun } from "lucide-react";
-import { useTheme } from "next-themes";
-import { ActionsHeader } from "./actions-header";
-import { MoodOverrideBadge } from "./mood-override-badge";
-import type { PlaygroundState } from "@/lib/playground/state";
-
-export function PlaygroundHeader({
-  state,
-  onReset,
-  onRevertOverrides,
-}: {
-  state: PlaygroundState;
-  onReset: () => void;
-  onRevertOverrides: () => void;
-}) {
-  const { theme, setTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => setMounted(true), []);
-
-  const displayName = state.name.trim() || "Untitled";
-
-  return (
-    <header className="sticky top-0 z-50 border-b border-border/40 bg-background/75 backdrop-blur-xl dark:border-border">
-      <div className="mx-auto flex h-14 max-w-7xl items-center justify-between gap-3 px-4 sm:px-6">
-        <div className="flex min-w-0 items-center gap-3">
-          <Link
-            href="/"
-            className="flex shrink-0 items-center gap-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
-          >
-            <ArrowLeft className="h-3.5 w-3.5" />
-            <span className="hidden sm:inline">Home</span>
-          </Link>
-          <span className="hidden h-4 w-px bg-border sm:block" />
-          <div className="min-w-0">
-            <div className="truncate text-sm font-semibold">{displayName}</div>
-            <div className="flex items-center gap-1.5 text-[10px] font-mono uppercase tracking-wider text-muted-foreground">
-              <span>playground</span>
-              <span aria-hidden>·</span>
-              <span>{state.mood}</span>
-            </div>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-2">
-          <div className="hidden items-center gap-2 lg:flex">
-            <MoodOverrideBadge
-              mood={state.mood}
-              overrides={state.overrides}
-              onRevert={onRevertOverrides}
-            />
-          </div>
-          <ActionsHeader state={state} onReset={onReset} />
-          {mounted && (
-            <button
-              type="button"
-              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-              className="flex h-8 w-8 items-center justify-center rounded-full border border-border/60 bg-card/50 transition-colors hover:bg-accent dark:border-border"
-              aria-label="Toggle theme"
-            >
-              {theme === "dark" ? <Sun className="h-3.5 w-3.5" /> : <Moon className="h-3.5 w-3.5" />}
-            </button>
-          )}
-        </div>
-      </div>
-    </header>
-  );
-}

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

@@ -1,50 +0,0 @@
-"use client";
-
-import { useState, type ReactNode } from "react";
-import { Edit3 } from "lucide-react";
-import { MobileDrawer } from "./mobile-drawer";
-
-/**
- * Playground layout shell — 2-col on desktop (controls left / preview right),
- * preview-full with FAB-triggered drawer on mobile. Accepts controls and
- * preview as slots so the orchestrator stays in playground-view.tsx.
- */
-export function PlaygroundLayout({
-  controls,
-  preview,
-}: {
-  controls: ReactNode;
-  preview: ReactNode;
-}) {
-  const [drawerOpen, setDrawerOpen] = useState(false);
-
-  return (
-    <>
-      {/* Desktop layout */}
-      <div className="mx-auto grid max-w-7xl gap-0 px-4 py-4 md:grid-cols-[380px_minmax(0,1fr)] md:gap-6 md:px-6 md:py-6 lg:grid-cols-[420px_minmax(0,1fr)]">
-        <aside className="hidden space-y-3 md:block md:max-h-[calc(100vh-5.5rem)] md:overflow-y-auto md:pr-2">
-          {controls}
-        </aside>
-        <main className="md:sticky md:top-[calc(3.5rem+1.5rem)] md:max-h-[calc(100vh-5.5rem)] md:overflow-y-auto">
-          {preview}
-        </main>
-      </div>
-
-      {/* Mobile FAB */}
-      <button
-        type="button"
-        onClick={() => setDrawerOpen(true)}
-        className="fixed bottom-5 right-5 z-40 inline-flex h-14 items-center gap-2 rounded-full bg-primary px-5 text-sm font-semibold text-primary-foreground shadow-lg transition-transform hover:scale-105 md:hidden"
-        aria-label="Open Playground controls"
-      >
-        <Edit3 className="h-4 w-4" />
-        Edit
-      </button>
-
-      {/* Mobile drawer */}
-      <MobileDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)}>
-        <div className="space-y-3">{controls}</div>
-      </MobileDrawer>
-    </>
-  );
-}

package/.opencode/oh-my-design/web/src/components/playground/mobile-drawer.tsx

@@ -1,78 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import { X } from "lucide-react";
-import { motion, AnimatePresence } from "framer-motion";
-
-/**
- * Bottom-sheet drawer for the mobile Playground — controls slide up over
- * the preview. Uses framer-motion directly (project already depends on it)
- * so we don't pull in a new drawer primitive.
- */
-export function MobileDrawer({
-  open,
-  onClose,
-  children,
-}: {
-  open: boolean;
-  onClose: () => void;
-  children: React.ReactNode;
-}) {
-  useEffect(() => {
-    if (open) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [open]);
-
-  return (
-    <AnimatePresence>
-      {open && (
-        <>
-          <motion.div
-            key="backdrop"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.2 }}
-            onClick={onClose}
-            className="fixed inset-0 z-[60] bg-black/50 md:hidden"
-            aria-hidden
-          />
-          <motion.div
-            key="sheet"
-            initial={{ y: "100%" }}
-            animate={{ y: 0 }}
-            exit={{ y: "100%" }}
-            transition={{ type: "spring", damping: 30, stiffness: 320 }}
-            drag="y"
-            dragConstraints={{ top: 0, bottom: 0 }}
-            dragElastic={{ top: 0, bottom: 0.3 }}
-            onDragEnd={(_, info) => {
-              if (info.offset.y > 100) onClose();
-            }}
-            className="fixed inset-x-0 bottom-0 z-[70] flex h-[85vh] flex-col rounded-t-2xl bg-background shadow-2xl md:hidden"
-          >
-            {/* Grab handle */}
-            <div className="flex items-center justify-between border-b border-border/40 px-4 py-3">
-              <div className="mx-auto h-1 w-10 rounded-full bg-muted-foreground/30" aria-hidden />
-              <button
-                type="button"
-                onClick={onClose}
-                className="absolute right-3 top-3 rounded-full p-1.5 text-muted-foreground hover:bg-accent"
-                aria-label="Close"
-              >
-                <X className="h-4 w-4" />
-              </button>
-            </div>
-            <div className="flex-1 overflow-y-auto px-4 py-4">{children}</div>
-          </motion.div>
-        </>
-      )}
-    </AnimatePresence>
-  );
-}

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

@@ -1,40 +0,0 @@
-"use client";
-
-import type { OverrideFlags } from "@/lib/playground/state";
-
-/**
- * Inline badge that surfaces whenever the user has diverged from the Mood
- * preset on any primitive. Shows which primitives are overridden and a
- * single-click "Revert to mood defaults" action.
- */
-export function MoodOverrideBadge({
-  mood,
-  overrides,
-  onRevert,
-}: {
-  mood: string;
-  overrides: OverrideFlags;
-  onRevert: () => void;
-}) {
-  const diverged = Object.entries(overrides)
-    .filter(([, v]) => v)
-    .map(([k]) => k);
-
-  if (diverged.length === 0) return null;
-
-  return (
-    <div className="inline-flex items-center gap-2 rounded-full bg-amber-100 px-2.5 py-1 text-[11px] font-medium text-amber-900 dark:bg-amber-500/15 dark:text-amber-300">
-      <span>
-        Overrides <span className="font-mono lowercase">{mood}</span>:{" "}
-        <span className="font-mono">{diverged.join(", ")}</span>
-      </span>
-      <button
-        type="button"
-        onClick={onRevert}
-        className="rounded-full border border-amber-900/20 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.08em] transition-colors hover:border-amber-900/40 dark:border-amber-300/30"
-      >
-        Revert
-      </button>
-    </div>
-  );
-}

package/.opencode/oh-my-design/web/src/components/playground/preview-pane.tsx

@@ -1,82 +0,0 @@
-"use client";
-
-/**
- * Right-column shell for the Playground.
- *
- * Layout (top → bottom):
- *   1. PrimitivesStrip — always visible, 6 pills with miniature visuals
- *   2. View toggle [Preview | DESIGN.md]
- *   3. Content area — either <ReferencePreview> or <ExportBox>
- *
- * Moving the DESIGN.md export out of the left controls column fixes the
- * previous issue where it lived in the bottom-left gutter (low visibility).
- */
-
-import { useState } from "react";
-import { Eye, FileText } from "lucide-react";
-import { ReferencePreview } from "@/components/reference-preview";
-import { ExportBox } from "./export-box";
-import { PrimitivesStrip } from "./primitives-strip";
-import type { PlaygroundState } from "@/lib/playground/state";
-import type { ParsedTokens } from "@/lib/extract-tokens";
-import { event } from "@/lib/gtag";
-
-type ViewMode = "preview" | "markdown";
-
-export function PreviewPane({
-  state,
-  tokens,
-}: {
-  state: PlaygroundState;
-  tokens: ParsedTokens;
-}) {
-  const [view, setView] = useState<ViewMode>("preview");
-
-  function pick(next: ViewMode) {
-    setView(next);
-    event("playground_preview_toggle", { view: next });
-  }
-
-  return (
-    <div className="space-y-3">
-      <PrimitivesStrip state={state} />
-
-      <div className="flex items-center justify-between gap-2">
-        <div className="flex items-center gap-0.5 rounded-lg border border-border/40 bg-card/40 p-0.5 dark:border-border dark:bg-card/60">
-          <button
-            type="button"
-            onClick={() => pick("preview")}
-            className={`inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${
-              view === "preview"
-                ? "bg-background text-foreground shadow-sm"
-                : "text-muted-foreground hover:text-foreground"
-            }`}
-            aria-pressed={view === "preview"}
-          >
-            <Eye className="h-3.5 w-3.5" /> Preview
-          </button>
-          <button
-            type="button"
-            onClick={() => pick("markdown")}
-            className={`inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${
-              view === "markdown"
-                ? "bg-background text-foreground shadow-sm"
-                : "text-muted-foreground hover:text-foreground"
-            }`}
-            aria-pressed={view === "markdown"}
-          >
-            <FileText className="h-3.5 w-3.5" /> DESIGN.md
-          </button>
-        </div>
-      </div>
-
-      {view === "preview" ? (
-        <div className="rounded-2xl border border-border/40 bg-background dark:border-border">
-          <ReferencePreview tokens={tokens} embedded />
-        </div>
-      ) : (
-        <ExportBox state={state} />
-      )}
-    </div>
-  );
-}