zugzbot 1.0.21 → 1.0.22

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

@@ -1,153 +0,0 @@
-"use client";
-
-/**
- * Always-visible strip at the top of the Playground preview pane — surfaces
- * every primitive with a miniature visual so the user can see at a glance
- * what `ReferencePreview` alone can't express (density, motion in particular).
- *
- * Primitive pills (L→R): Mood · Color · Density · Radius · Weight · Motion.
- */
-
-import { useState } from "react";
-import type { PlaygroundState } from "@/lib/playground/state";
-import { MOOD_DEFAULTS } from "@/lib/playground/rules/mood";
-import { DENSITY_RULES } from "@/lib/playground/rules/density";
-import { RADIUS_RULES } from "@/lib/playground/rules/radius";
-import { WEIGHT_RULES } from "@/lib/playground/rules/weight";
-import { MOTION_RULES } from "@/lib/playground/rules/motion";
-import { ContrastBadge } from "./contrast-badge";
-
-export function PrimitivesStrip({ state }: { state: PlaygroundState }) {
-  return (
-    <div className="flex flex-wrap gap-2 rounded-xl border border-border/40 bg-card/30 p-2 dark:border-border dark:bg-card/50">
-      <MoodPill mood={state.mood} />
-      <ColorPill primary={state.primary} />
-      <ContrastBadge primary={state.primary} compact />
-      <DensityPill density={state.density} />
-      <RadiusPill radius={state.radius} />
-      <WeightPill weight={state.weight} />
-      <MotionPill motion={state.motion} />
-    </div>
-  );
-}
-
-const PILL_CLS =
-  "inline-flex items-center gap-2 rounded-lg border border-border/40 bg-background px-2.5 py-1.5 text-[11px] font-medium dark:border-border";
-const LABEL_CLS = "font-mono uppercase tracking-wider text-muted-foreground";
-
-function MoodPill({ mood }: { mood: PlaygroundState["mood"] }) {
-  const d = MOOD_DEFAULTS[mood];
-  return (
-    <div className={PILL_CLS} title={`Mood — ${d.tagline}`}>
-      <span
-        className="flex h-4 w-4 shrink-0 items-center justify-center rounded text-[9px] text-white"
-        style={{ background: d.primary }}
-        aria-hidden
-      >
-        {d.glyph}
-      </span>
-      <span className={LABEL_CLS}>mood</span>
-      <span className="capitalize">{mood}</span>
-    </div>
-  );
-}
-
-function ColorPill({ primary }: { primary: string }) {
-  return (
-    <div className={PILL_CLS} title={`Primary ${primary}`}>
-      <span
-        className="h-4 w-4 shrink-0 rounded ring-1 ring-border/60"
-        style={{ background: primary }}
-        aria-hidden
-      />
-      <span className={LABEL_CLS}>color</span>
-      <span className="font-mono">{primary}</span>
-    </div>
-  );
-}
-
-function DensityPill({ density }: { density: PlaygroundState["density"] }) {
-  const rules = DENSITY_RULES[density];
-  return (
-    <div className={PILL_CLS} title={`Density — unit ${rules.unit}px`}>
-      <span className="flex h-4 w-4 shrink-0 flex-col justify-center gap-[2px]" aria-hidden>
-        <span
-          className="h-[2px] w-full rounded-sm bg-foreground/70"
-          style={{ marginTop: density === "compact" ? 0 : density === "comfortable" ? 1 : 2 }}
-        />
-        <span
-          className="h-[2px] w-full rounded-sm bg-foreground/50"
-          style={{ marginTop: density === "compact" ? 1 : density === "comfortable" ? 2 : 3 }}
-        />
-        <span
-          className="h-[2px] w-full rounded-sm bg-foreground/30"
-          style={{ marginTop: density === "compact" ? 1 : density === "comfortable" ? 2 : 3 }}
-        />
-      </span>
-      <span className={LABEL_CLS}>density</span>
-      <span className="capitalize">{density}</span>
-      <span className="text-muted-foreground">{rules.unit}px</span>
-    </div>
-  );
-}
-
-function RadiusPill({ radius }: { radius: PlaygroundState["radius"] }) {
-  const rules = RADIUS_RULES[radius];
-  const corner = Math.min(rules.control, 8);
-  return (
-    <div className={PILL_CLS} title={`Radius — control ${rules.control}px`}>
-      <span
-        className="h-4 w-4 shrink-0 bg-foreground/70"
-        style={{ borderRadius: `${corner}px ${corner}px 0 0` }}
-        aria-hidden
-      />
-      <span className={LABEL_CLS}>radius</span>
-      <span className="capitalize">{radius}</span>
-    </div>
-  );
-}
-
-function WeightPill({ weight }: { weight: PlaygroundState["weight"] }) {
-  const rules = WEIGHT_RULES[weight];
-  return (
-    <div className={PILL_CLS} title={`Weight — heading ${rules.heading}, body ${rules.body}`}>
-      <span
-        className="text-sm leading-none"
-        style={{ fontWeight: rules.heading }}
-        aria-hidden
-      >
-        Aa
-      </span>
-      <span className={LABEL_CLS}>weight</span>
-      <span className="capitalize">{weight}</span>
-    </div>
-  );
-}
-
-function MotionPill({ motion }: { motion: PlaygroundState["motion"] }) {
-  const rules = MOTION_RULES[motion];
-  const [hover, setHover] = useState(false);
-  return (
-    <div
-      className={PILL_CLS}
-      title={`Motion — ${rules.durations.standard}ms, spring ${rules.springLicensed ? "licensed" : "forbidden"}`}
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
-    >
-      <span
-        className="relative h-4 w-8 overflow-hidden rounded-full bg-muted/60"
-        aria-hidden
-      >
-        <span
-          className="absolute left-0.5 top-1/2 h-2.5 w-2.5 -translate-y-1/2 rounded-full bg-foreground/80"
-          style={{
-            transform: `translate(${hover ? 14 : 0}px, -50%)`,
-            transition: `transform ${rules.durations.standard}ms ${rules.easings.standard}`,
-          }}
-        />
-      </span>
-      <span className={LABEL_CLS}>motion</span>
-      <span className="capitalize">{motion}</span>
-    </div>
-  );
-}

package/.opencode/oh-my-design/web/src/components/playground/reference-picker-modal.tsx

@@ -1,146 +0,0 @@
-"use client";
-
-/**
- * Reference picker for the Playground "Clone from reference" flow.
- *
- * Opens as a modal (not a route navigation) so the user's in-progress
- * Playground state isn't lost. On pick, calls `onPick(refId)` — parent is
- * responsible for fetching `/api/references/<id>` and seeding state.
- */
-
-import { useMemo, useState } from "react";
-import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
-import { Search } from "lucide-react";
-import { getAllDesignSystems } from "@/lib/design-systems";
-import { getLogoUrl, getLogoFallbackUrl, isGitHubLogo } from "@/lib/logos";
-import { refMatchesQuery } from "@/lib/search-aliases";
-
-export function ReferencePickerModal({
-  open,
-  onOpenChange,
-  onPick,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onPick: (refId: string) => void;
-}) {
-  const [query, setQuery] = useState("");
-  const all = useMemo(() => getAllDesignSystems(), []);
-  const filtered = useMemo(() => {
-    if (!query.trim()) return all;
-    return all.filter((ds) =>
-      refMatchesQuery({ id: ds.refId, name: ds.name }, query),
-    );
-  }, [all, query]);
-
-  function handlePick(refId: string) {
-    onPick(refId);
-    onOpenChange(false);
-    setQuery("");
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        className="sm:max-w-3xl gap-0 p-0 overflow-hidden max-h-[85vh] flex flex-col"
-        showCloseButton
-      >
-        <div className="border-b border-border/40 px-5 py-4">
-          <DialogTitle className="text-base font-semibold">
-            Pick a reference
-          </DialogTitle>
-          <p className="mt-1 text-xs text-muted-foreground">
-            Clone the primary color, radius, and heading weight from a verified
-            design system. Mood, personas, and philosophy stay your own.
-          </p>
-        </div>
-        <div className="border-b border-border/40 px-5 py-3">
-          <div className="relative">
-            <Search className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
-            <input
-              autoFocus
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              placeholder={`Search ${all.length} references…`}
-              className="h-9 w-full rounded-lg border border-border/60 bg-background pl-9 pr-3 text-sm dark:border-border"
-            />
-          </div>
-        </div>
-        <div className="overflow-y-auto px-4 py-4">
-          {filtered.length === 0 ? (
-            <div className="py-12 text-center text-sm text-muted-foreground">
-              No references match &quot;{query}&quot;.
-            </div>
-          ) : (
-            <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4">
-              {filtered.map((ds) => (
-                <ReferenceCard
-                  key={ds.refId}
-                  refId={ds.refId}
-                  name={ds.name}
-                  category={ds.type}
-                  onPick={handlePick}
-                />
-              ))}
-            </div>
-          )}
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function ReferenceCard({
-  refId,
-  name,
-  category,
-  onPick,
-}: {
-  refId: string;
-  name: string;
-  category: "system" | "brand";
-  onPick: (id: string) => void;
-}) {
-  const primaryUrl = getLogoUrl(refId, "111111");
-  const fallbackUrl = getLogoFallbackUrl(refId);
-  const [stage, setStage] = useState<0 | 1 | 2>(0);
-  const src = stage === 0 ? primaryUrl : stage === 1 ? fallbackUrl : null;
-  const raster = isGitHubLogo(refId);
-
-  return (
-    <button
-      type="button"
-      onClick={() => onPick(refId)}
-      className="group flex flex-col items-center gap-2 rounded-lg border border-border/50 bg-card/30 p-3 transition-all hover:border-foreground/30 hover:bg-accent/30 dark:border-border dark:bg-card/60"
-    >
-      <div className="flex h-10 w-10 items-center justify-center rounded-md bg-muted/60 ring-1 ring-border/50 dark:bg-muted/30 dark:ring-border">
-        {src ? (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img
-            src={src}
-            alt={name}
-            onError={() =>
-              setStage((s) => (s < 2 ? ((s + 1) as 0 | 1 | 2) : 2))
-            }
-            className={
-              raster
-                ? "h-6 w-6 rounded object-contain"
-                : "h-5 w-5 object-contain dark:invert"
-            }
-            loading="lazy"
-          />
-        ) : (
-          <span className="text-sm font-bold text-foreground/70">
-            {name.charAt(0).toUpperCase()}
-          </span>
-        )}
-      </div>
-      <div className="min-w-0 text-center">
-        <div className="truncate text-xs font-semibold">{name}</div>
-        <div className="truncate text-[10px] uppercase tracking-wider text-muted-foreground">
-          {category === "system" ? "system" : "brand"}
-        </div>
-      </div>
-    </button>
-  );
-}

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

@@ -1,42 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Check, Link2 } from "lucide-react";
-import { buildShareUrl } from "@/lib/playground/codec";
-import type { PlaygroundState } from "@/lib/playground/state";
-import { event } from "@/lib/gtag";
-
-export function ShareButton({ state }: { state: PlaygroundState }) {
-  const [copied, setCopied] = useState(false);
-
-  async function copy() {
-    if (typeof window === "undefined") return;
-    const url = buildShareUrl(window.location.origin, state);
-    try {
-      await navigator.clipboard.writeText(url);
-      setCopied(true);
-      event("playground_share", { state_bytes: url.length });
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // Fallback: put the URL in a prompt so the user can copy manually
-      window.prompt("Copy this Playground link:", url);
-      event("playground_share", { state_bytes: url.length, fallback: true });
-    }
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={copy}
-      className="inline-flex items-center gap-1.5 rounded-lg border border-border/60 bg-card/50 px-2.5 py-1.5 text-xs font-medium transition-colors hover:bg-accent dark:border-border"
-      aria-label="Share Playground link"
-    >
-      {copied ? (
-        <Check className="h-3.5 w-3.5 text-green-500" />
-      ) : (
-        <Link2 className="h-3.5 w-3.5" />
-      )}
-      <span className="hidden sm:inline">{copied ? "Copied" : "Share"}</span>
-    </button>
-  );
-}

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

@@ -1,90 +0,0 @@
-"use client";
-
-import { Paintbrush, FileSymlink, Dices } from "lucide-react";
-import type { PlaygroundState } from "@/lib/playground/state";
-
-/**
- * Base seed picker — 3 options. Randomize was promoted here from the
- * header because (a) it belongs conceptually with "how do I start" and
- * (b) Personality was removed, leaving a natural third slot.
- *
- * All three are buttons; the parent wires concrete handlers.
- */
-export function StartFrom({
-  state,
-  onPickBlank,
-  onOpenReferenceModal,
-  onRandomize,
-}: {
-  state: PlaygroundState;
-  onPickBlank: () => void;
-  onOpenReferenceModal: () => void;
-  onRandomize: () => void;
-}) {
-  const base = state.base;
-  return (
-    <div className="grid grid-cols-3 gap-1.5">
-      <BaseCard
-        icon={<Paintbrush className="h-4 w-4" />}
-        title="Blank"
-        subtitle="Start fresh"
-        active={base.kind === "blank"}
-        onClick={onPickBlank}
-      />
-      <BaseCard
-        icon={<FileSymlink className="h-4 w-4" />}
-        title="Reference"
-        active={base.kind === "clone"}
-        subtitle={
-          base.kind === "clone"
-            ? `cloned: ${(base as { refId: string }).refId}`
-            : "clone a brand"
-        }
-        onClick={onOpenReferenceModal}
-      />
-      <BaseCard
-        icon={<Dices className="h-4 w-4" />}
-        title="Randomize"
-        subtitle="roll the dice"
-        onClick={onRandomize}
-      />
-    </div>
-  );
-}
-
-function BaseCard({
-  icon,
-  title,
-  subtitle,
-  active,
-  onClick,
-}: {
-  icon: React.ReactNode;
-  title: string;
-  subtitle?: string;
-  active?: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={`flex flex-col items-center justify-center gap-1 rounded-lg border p-2.5 text-center transition-all ${
-        active
-          ? "border-primary bg-primary/5"
-          : "border-border/50 hover:border-foreground/30 hover:bg-accent/30"
-      }`}
-      aria-pressed={active}
-    >
-      <div className={active ? "text-primary" : "text-muted-foreground"}>
-        {icon}
-      </div>
-      <div className="text-xs font-semibold">{title}</div>
-      {subtitle && (
-        <div className="max-w-full truncate text-[10px] leading-tight text-muted-foreground">
-          {subtitle}
-        </div>
-      )}
-    </button>
-  );
-}

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

@@ -1,205 +0,0 @@
-"use client";
-
-import { useState, useMemo } from "react";
-import { event, trackRef } from "@/lib/gtag";
-import { FileText, Copy, Check, ArrowLeft, Download, ArrowUpRight, Eye } from "lucide-react";
-import { ReferencePreview } from "@/components/reference-preview";
-import { extractTokens } from "@/lib/extract-tokens";
-import { applyOverridesToMd } from "@/lib/core/generate-css";
-import type { Overrides, StylePreferences } from "@/lib/core/types";
-import type { RefDetail } from "@/app/builder/page";
-import { Button } from "@/components/ui/button";
-import { getDesignSystem } from "@/lib/design-systems";
-import { getHomepageUrl } from "@/data/registry.generated";
-import { BrandNameplateLogo } from "@/components/brand-logo";
-import { Markdown } from "@/components/markdown";
-
-type MdView = "rendered" | "raw";
-
-export function PreviewExportView({
-  detail,
-  overrides,
-  onBack,
-  components,
-  onComponentsChange,
-  stylePreferences,
-}: {
-  detail: RefDetail;
-  overrides: Overrides;
-  onBack: () => void;
-  components: string[];
-  onComponentsChange: (c: string[]) => void;
-  stylePreferences?: StylePreferences;
-}) {
-  const [mdView, setMdView] = useState<MdView>("rendered");
-  const [copied, setCopied] = useState<string | null>(null);
-  // Mobile-only: which panel is shown (desktop shows both side-by-side via lg: classes).
-  const [mobileView, setMobileView] = useState<"preview" | "designmd">("preview");
-
-  const designMd = useMemo(
-    () => applyOverridesToMd(
-      detail.designMd,
-      detail.id.charAt(0).toUpperCase() + detail.id.slice(1),
-      detail.primary, detail.fontFamily,
-      overrides, components, stylePreferences,
-      true,
-    ),
-    [detail, overrides, components, stylePreferences],
-  );
-
-  const refName = detail.id.charAt(0).toUpperCase() + detail.id.slice(1);
-  const ds = getDesignSystem(detail.id);
-  const homepageUrl = getHomepageUrl(detail.id);
-  const tokens = useMemo(() => extractTokens(detail), [detail]);
-  const lineCount = designMd.split("\n").length;
-
-  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 copyMd() {
-    navigator.clipboard.writeText(designMd);
-    event("copy_designmd", { reference: detail.id });
-    trackRef("copy", detail.id);
-    setCopied("md");
-    setTimeout(() => setCopied(null), 2000);
-  }
-
-  return (
-    <div className="flex flex-col gap-4">
-
-      {/* ── Header ── */}
-      <div className="flex items-center gap-3">
-        <Button variant="ghost" size="sm" onClick={onBack} className="gap-1.5 shrink-0">
-          <ArrowLeft className="h-3.5 w-3.5" /> Back
-        </Button>
-
-        <div className="flex-1 min-w-0">
-          <h2 className="text-xl font-semibold tracking-tight leading-tight">{refName}</h2>
-          <p className="text-xs text-muted-foreground mt-0.5">
-            {components.length} components · {lineCount} lines
-          </p>
-        </div>
-
-        {ds && (
-          <a
-            href={ds.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            onClick={() => event("ds_click", { reference: ds.refId, url: ds.url, location: "preview_header" })}
-            className="hidden sm:flex items-center gap-1.5 shrink-0 rounded-[0.625rem] border border-border/25 dark:border-border/50 bg-muted/10 dark:bg-muted/20 px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors duration-150 hover:bg-muted/30 hover:text-foreground"
-          >
-            {/* Neutral nameplate (shared treatment, issue #19) — the old
-                primary-colored tile hid logos matching detail.primary. */}
-            <BrandNameplateLogo refId={ds.refId} name={refName} size="xs" />
-            <span className="truncate max-w-[180px]">
-              {ds.type === "system" ? `${refName} Design System` : `${refName} Brand`}
-            </span>
-            <ArrowUpRight className="h-3 w-3 shrink-0 opacity-50" />
-          </a>
-        )}
-      </div>
-
-      {/* ── Mobile view toggle (desktop shows both side-by-side) ── */}
-      <div className="flex lg:hidden items-center rounded-[0.5rem] border border-border/40 dark:border-border bg-muted/20 p-0.5">
-        <button
-          onClick={() => setMobileView("preview")}
-          className={`flex flex-1 items-center justify-center gap-1.5 rounded-[0.4rem] px-3 py-2 text-xs font-medium transition-all duration-200 ${
-            mobileView === "preview" ? "bg-primary/10 text-primary font-semibold shadow-[0_2px_10px_-3px_rgba(85,70,255,0.45)] ring-1 ring-inset ring-primary/40" : "text-muted-foreground hover:text-foreground"
-          }`}
-        >
-          <Eye className="h-3.5 w-3.5" /> Live Preview
-        </button>
-        <button
-          onClick={() => setMobileView("designmd")}
-          className={`flex flex-1 items-center justify-center gap-1.5 rounded-[0.4rem] px-3 py-2 text-xs font-medium transition-all duration-200 ${
-            mobileView === "designmd" ? "bg-primary/10 text-primary font-semibold shadow-[0_2px_10px_-3px_rgba(85,70,255,0.45)] ring-1 ring-inset ring-primary/40" : "text-muted-foreground hover:text-foreground"
-          }`}
-        >
-          <FileText className="h-3.5 w-3.5" /> DESIGN.md
-        </button>
-      </div>
-
-      {/* ── 2-column layout ── */}
-      <div className="grid gap-4 lg:grid-cols-[1fr_440px] items-start">
-
-        {/* Left — brand preview */}
-        <div className={`${mobileView === "preview" ? "block" : "hidden"} lg:block rounded-xl border border-border/40 dark:border-border ring-1 ring-border/20 dark:ring-transparent overflow-hidden`}>
-          <ReferencePreview
-            tokens={tokens}
-            overrides={{ ...overrides, stylePreferences }}
-            embedded
-            homepageUrl={homepageUrl ?? undefined}
-          />
-        </div>
-
-        {/* Right — sticky DESIGN.md panel */}
-        <div className={`${mobileView === "designmd" ? "flex" : "hidden"} lg:flex sticky top-[4.5rem] flex-col rounded-xl border border-border/40 dark:border-border overflow-hidden max-h-[calc(100dvh-5.5rem)] lg:max-h-[calc(100vh-5.5rem)]`}>
-
-          {/* Toolbar */}
-          <div className="shrink-0 flex items-center gap-2 border-b border-border/40 dark:border-border px-3 py-2">
-            <div className="flex items-center gap-1.5 ml-auto">
-              {/* Rendered / Raw toggle */}
-              <div className="flex items-center rounded-[0.5rem] border border-border/40 dark:border-border bg-muted/20 p-0.5">
-                <button
-                  onClick={() => setMdView("rendered")}
-                  className={`flex items-center gap-1 rounded-[0.375rem] px-2 py-1 text-[11px] font-medium transition-colors duration-150 ${
-                    mdView === "rendered"
-                      ? "bg-background text-foreground"
-                      : "text-muted-foreground hover:text-foreground"
-                  }`}
-                >
-                  <Eye className="h-2.5 w-2.5" /> Rendered
-                </button>
-                <button
-                  onClick={() => setMdView("raw")}
-                  className={`flex items-center gap-1 rounded-[0.375rem] px-2 py-1 text-[11px] font-medium transition-colors duration-150 ${
-                    mdView === "raw"
-                      ? "bg-background text-foreground"
-                      : "text-muted-foreground hover:text-foreground"
-                  }`}
-                >
-                  <FileText className="h-2.5 w-2.5" /> Raw
-                </button>
-              </div>
-
-              <button
-                onClick={download}
-                className="flex items-center gap-1 rounded-[0.5rem] border border-border/40 dark:border-border bg-background px-2.5 py-1.5 text-[11px] font-medium text-foreground/80 transition-colors duration-150 hover:bg-muted"
-              >
-                <Download className="h-3 w-3" /> Download
-              </button>
-
-              <button
-                onClick={copyMd}
-                className="flex items-center gap-1 rounded-[0.5rem] border border-border/40 dark:border-border bg-background px-2.5 py-1.5 text-[11px] font-medium text-foreground/80 transition-colors duration-150 hover:bg-muted"
-              >
-                {copied === "md"
-                  ? <><Check className="h-3 w-3 text-emerald-500" /> Copied</>
-                  : <><Copy className="h-3 w-3" /> Copy</>}
-              </button>
-            </div>
-          </div>
-
-          {/* DESIGN.md content. Rendered strips all frontmatter (markdown.tsx),
-              so the tokens block is hidden there; Raw shows the full file —
-              tokens sit at the top like frontmatter, which is the intent. */}
-          <div className="flex-1 overflow-auto min-h-0">
-            {mdView === "rendered"
-              ? <div className="p-5"><Markdown content={designMd} /></div>
-              : <pre className="p-5 text-[11px] leading-[1.7] font-mono text-foreground/70 whitespace-pre-wrap">{designMd}</pre>
-            }
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}