feat: replace custom brand mark with design-system Logo (ui#29 wave 2)

package.json

@@ -19,7 +19,7 @@
     "@inrupt/solid-client-authn-browser": "^4.0.0",
     "@inrupt/solid-client-authn-node": "^3.1.1",
     "@mind-studio/core": "^0.7.0",
-    "@mind-studio/ui": "^0.4.0",
+    "@mind-studio/ui": "^0.7.0",
     "better-sqlite3": "^11.8.1",
     "dotenv": "^17.4.2",
     "next": "16.2.6",

src/app/page.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { MindLoginCard, writeLastIdentity } from "@mind-studio/core";
+import { Logo } from "@mind-studio/ui";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
-import { BrandMark } from "@/components/TopBar";
 import { APP_NAME, oidcIssuer } from "@/lib/config";
 import { hueFor } from "@/lib/dock/accents";
 import { useSession } from "@/lib/solid/session";
@@ -34,8 +34,7 @@
   return (
     <main className="mx-auto flex min-h-screen max-w-5xl flex-col px-6 pb-16">
       <header className="reveal flex items-center gap-2.5 py-7">
-        <BrandMark />
-        <span className="font-display text-lg font-semibold tracking-tight">Mind Dock</span>
+        <Logo />
       </header>
 
       <section className="grid flex-1 items-center gap-12 lg:grid-cols-[1.05fr_1fr]">
@@ -85,7 +84,7 @@
               </h2>
             </div>
             <div className="grid grid-cols-3 gap-3 p-5">
               {MOCK.map((m, i) => {
                 const hue = hueFor(m.key);
                 return (
                   <div

src/components/TopBar.tsx

@@ -11,36 +11,20 @@
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  Logo,
   useMindTheme,
 } from "@mind-studio/ui";
 import Link from "next/link";
 
-export function BrandMark({ size = 32 }: { size?: number }) {
-  return (
-    <span
-      className="grid shrink-0 place-items-center rounded-xl bg-primary text-primary-foreground"
-      style={{
-        width: size,
-        height: size,
-        fontSize: size * 0.5,
-        boxShadow:
-          "0 0 0 1px color-mix(in oklch, white 10%, transparent), 0 6px 18px -6px var(--primary)",
-      }}
-    >
-      ✦
-    </span>
-  );
-}
-
 export function ThemeToggle() {
   const { resolvedMode, setMode } = useMindTheme();
   const dark = resolvedMode !== "light";
   return (
     <button
       aria-label={dark ? "Switch to light" : "Switch to dark"}
       onClick={() => setMode(dark ? "light" : "dark")}
       className="grid size-9 place-items-center rounded-full text-muted-foreground transition hover:bg-muted hover:text-foreground"
     >
       <span className="text-[15px]">{dark ? "☀" : "☾"}</span>
     </button>
   );
@@ -66,15 +50,14 @@
     <header className="sticky top-0 z-30 border-b border-[color:var(--border)] glass-panel">
       <div className="mx-auto flex max-w-5xl items-center justify-between px-6 py-3.5">
         <Link href="/dock" className="flex items-center gap-2.5">
-          <BrandMark />
-          <span className="font-display text-[19px] font-semibold tracking-tight">Mind Dock</span>
+          <Logo />
         </Link>
         <div className="flex items-center gap-1">
           <MindAppLauncher podRoot={podRoot ?? undefined} podFetch={podFetch} manageHref="/dock" />
           <ThemeToggle />
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <button className="rounded-full outline-none ring-offset-2 transition focus-visible:ring-2 focus-visible:ring-primary">
                 <Avatar className="size-9 ring-1 ring-[color:var(--border)] transition hover:ring-primary/60">
                   {avatarUri ? <AvatarImage src={avatarUri} alt={name} /> : null}
                   <AvatarFallback className="bg-primary text-primary-foreground">