spb/polyllm

1"use client";2import { useId } from "react";3import { cn } from "@/lib/utils";45/**6 * PolyLLM mark — "the Prism P".7 * A bold P (Poly) whose bowl emits three beams of decreasing intensity: one interface, every model.8 * Keep in sync with `public/icon.svg` and `scripts/brand-assets.sh` (favicon / PWA / OG renders).9 */10export function LogoMark({ className, size = 28, mono = false }: { className?: string; size?: number; mono?: boolean }) {11  // Unique gradient id per instance: a duplicate id inside a `display:none` sidebar would otherwise12  // win the lookup and the mark would paint black on mobile.13  const uid = useId().replace(/[^a-zA-Z0-9]/g, "");14  const gid = `plm-g-${uid}`;15  const hid = `plm-h-${uid}`;16  return (17    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={cn("shrink-0", className)} aria-hidden>18      <defs>19        <linearGradient id={gid} x1="3" y1="3" x2="29" y2="29" gradientUnits="userSpaceOnUse">20          <stop stopColor="#6366f1" />21          <stop offset="0.52" stopColor="#8b5cf6" />22          <stop offset="1" stopColor="#f472b6" />23        </linearGradient>24        <radialGradient id={hid} cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9 6) rotate(48) scale(26 22)">25          <stop stopColor="#fff" stopOpacity="0.32" />26          <stop offset="1" stopColor="#fff" stopOpacity="0" />27        </radialGradient>28      </defs>29      {mono ? <rect x="1" y="1" width="30" height="30" rx="9" fill="currentColor" /> : (30        <>31          <rect x="1" y="1" width="30" height="30" rx="9" fill={`url(#${gid})`} />32          <rect x="1" y="1" width="30" height="30" rx="9" fill={`url(#${hid})`} />33        </>34      )}35      <g fill={mono ? "var(--bg, #fff)" : "#fff"}>36        {/* P stem */}37        <rect x="7.5" y="7" width="5" height="18" rx="2.5" />38        {/* P bowl (ring) */}39        <path fillRule="evenodd" d="M12 7h5.4a5.6 5.6 0 0 1 0 11.2H12V7Zm0 3.4v4.4h5.3a2.2 2.2 0 0 0 0-4.4H12Z" />40        {/* Beams: one → many */}41        <rect x="24.6" y="9.1" width="3.2" height="2.3" rx="1.15" opacity="0.95" />42        <rect x="24.6" y="12.55" width="3.2" height="2.3" rx="1.15" opacity="0.62" />43        <rect x="24.6" y="16" width="3.2" height="2.3" rx="1.15" opacity="0.34" />44      </g>45    </svg>46  );47}4849export function Logo({ className, size = 24, wordmark = true, mono }: { className?: string; size?: number; wordmark?: boolean; mono?: boolean }) {50  return (51    <span className={cn("inline-flex items-center gap-2", className)}>52      <LogoMark size={size} mono={mono} />53      {wordmark ? <Wordmark className="text-[17px]" /> : null}54    </span>55  );56}5758/** Text wordmark — "Poly" solid, "LLM" slightly lighter for rhythm. */59export function Wordmark({ className }: { className?: string }) {60  return (61    <span className={cn("font-semibold tracking-[-0.02em] leading-none", className)}>62      Poly<span className="font-medium text-fg-muted">LLM</span>63    </span>64  );65}66