From 96be9e3f3857ea4367c1749141e6883af4e1930c Mon Sep 17 00:00:00 2001
From: x <x@xdeMacBook-Air.local>
Date: Thu, 6 Aug 2026 20:25:23 +0800
Subject: [PATCH] =?UTF-8?q?AIT-575:=20Library=20residual=20carnival=20pink?=
 =?UTF-8?q?=20rgba=20=E2=86=92=20gallery=20copper?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Map LibraryGrid owner-card/detail placeholders and library page wash
from carnival pink/purple rgba onto copper board glow
rgba(196,165,116,…). Shell label/stat accents use --brand board tokens.
Owner-safe product logic untouched. Smoke-lock product-proof +
library-owner-safe against residual carnival pink RGB.

Closes AIT-575

Co-authored-by: multica-agent <github@multica.ai>
---
 app/library/page.tsx                      | 10 +++----
 components/LibraryGrid.tsx                |  4 +--
 scripts/library-owner-safe-regression.mjs | 27 +++++++++++++++++
 scripts/product-proof-smoke.mjs           | 35 +++++++++++++++++++++++
 4 files changed, 69 insertions(+), 7 deletions(-)

diff --git a/app/library/page.tsx b/app/library/page.tsx
index dd44c380..60d0f313 100644
--- a/app/library/page.tsx
+++ b/app/library/page.tsx
@@ -25,14 +25,14 @@ export default function LibraryPage() {
       data-library-content-pad="mobile-generate-bar"
     >
       <div
-        className="pointer-events-none absolute inset-x-0 top-0 h-96 bg-[radial-gradient(42%_80%_at_8%_0%,rgba(177,78,255,0.2),transparent_72%),radial-gradient(36%_70%_at_92%_0%,rgba(255,78,205,0.14),transparent_68%)]"
+        className="pointer-events-none absolute inset-x-0 top-0 h-96 bg-[radial-gradient(42%_80%_at_8%_0%,rgba(196,165,116,0.16),transparent_72%),radial-gradient(36%_70%_at_92%_0%,rgba(168,144,112,0.12),transparent_68%)]"
         aria-hidden
       />
       <div className="relative mx-auto max-w-7xl">
         <section className="toy-card mb-8 p-5 sm:p-8">
           <div className="flex flex-wrap items-end justify-between gap-6">
             <div>
-              <p className="text-[10px] font-black uppercase tracking-[0.18em] text-[#FF4ECD]">
+              <p className="text-[10px] font-black uppercase tracking-[0.18em] text-[var(--brand)]">
                 Private Library
               </p>
               <h1 className="mt-3 max-w-3xl font-display text-4xl font-black tracking-[-0.055em] sm:text-6xl">
@@ -63,9 +63,9 @@ export default function LibraryPage() {
           </div>
           <div className="mt-7 grid gap-3 sm:grid-cols-3">
             {[
-              ["Private", "Only your account can access these results", "#B14EFF"],
-              ["Recoverable", "Finished videos return after refresh", "#00D9FF"],
-              ["Ready to use", "Download or generate the Moment again", "#00FFA3"],
+              ["Private", "Only your account can access these results", "var(--brand)"],
+              ["Recoverable", "Finished videos return after refresh", "var(--brand-2)"],
+              ["Ready to use", "Download or generate the Moment again", "var(--mint)"],
             ].map(([label, value, accent]) => (
               <div key={label} className="stat-card px-4 py-3.5">
                 <p
diff --git a/components/LibraryGrid.tsx b/components/LibraryGrid.tsx
index a14828c9..aaa1d59f 100644
--- a/components/LibraryGrid.tsx
+++ b/components/LibraryGrid.tsx
@@ -1351,7 +1351,7 @@ function LibraryGridInner() {
                   aria-pressed={selected}
                   aria-label={`${effectName(job.effect)}, ${status.label}, ${formatDate(job.createdAt)}`}
                 >
-                  <div className="relative grid aspect-video place-items-center overflow-hidden border-b border-white/10 bg-[radial-gradient(circle_at_50%_20%,rgba(255,78,205,0.12),transparent_55%),#09090a] text-center">
+                  <div className="relative grid aspect-video place-items-center overflow-hidden border-b border-white/10 bg-[radial-gradient(circle_at_50%_20%,rgba(196,165,116,0.12),transparent_55%),#09090a] text-center">
                     {job.status === "succeeded" && job.videoUrl ? (
                       <video
                         src={job.videoUrl}
@@ -1408,7 +1408,7 @@ function LibraryGridInner() {
                     className="overflow-hidden rounded-[1.5rem] border border-white/10 bg-[#111113] shadow-[0_24px_70px_-50px_rgba(0,0,0,0.95)] lg:sticky lg:top-6"
                     data-library-detail="true"
                   >
-                    <div className="relative grid aspect-video place-items-center overflow-hidden border-b border-white/10 bg-[radial-gradient(circle_at_50%_20%,rgba(255,78,205,0.12),transparent_55%),#09090a] text-center">
+                    <div className="relative grid aspect-video place-items-center overflow-hidden border-b border-white/10 bg-[radial-gradient(circle_at_50%_20%,rgba(196,165,116,0.12),transparent_55%),#09090a] text-center">
                       {job.status === "succeeded" && job.videoUrl ? (
                         <video
                           src={job.videoUrl}
diff --git a/scripts/library-owner-safe-regression.mjs b/scripts/library-owner-safe-regression.mjs
index 9c1c201d..45415059 100644
--- a/scripts/library-owner-safe-regression.mjs
+++ b/scripts/library-owner-safe-regression.mjs
@@ -865,4 +865,31 @@ assert.match(
   "asset bind membership must empty-set on query error"
 );
 
+// AIT-575: Library residual carnival pink rgba → gallery-calm copper (color only)
+{
+  const libraryPage = read("app/library/page.tsx");
+  const carnivalPink =
+    /#FF4ECD|255\s*,\s*78\s*,\s*205|177\s*,\s*78\s*,\s*255|#B14EFF/i;
+  assert.doesNotMatch(
+    library,
+    carnivalPink,
+    "LibraryGrid must not hard-code carnival pink RGB"
+  );
+  assert.doesNotMatch(
+    libraryPage,
+    carnivalPink,
+    "library page must not hard-code carnival pink RGB"
+  );
+  assert.match(
+    library,
+    /rgba\(196\s*,\s*165\s*,\s*116/,
+    "LibraryGrid placeholders use copper board glow"
+  );
+  assert.match(
+    libraryPage,
+    /rgba\(196\s*,\s*165\s*,\s*116/,
+    "library page wash uses copper board glow"
+  );
+}
+
 console.log("library-owner-safe-regression: ok");
diff --git a/scripts/product-proof-smoke.mjs b/scripts/product-proof-smoke.mjs
index b2d5588b..1b625027 100644
--- a/scripts/product-proof-smoke.mjs
+++ b/scripts/product-proof-smoke.mjs
@@ -341,6 +341,41 @@ assert(
   );
 }
 
+// AIT-575: Library residual carnival pink rgba → gallery-calm copper board
+{
+  const libraryPage = read("app/library/page.tsx");
+  const carnival =
+    /#B14EFF|#FF4ECD|#00D9FF|#00FFA3|255\s*,\s*78\s*,\s*205|177\s*,\s*78\s*,\s*255|0\s*,\s*217\s*,\s*255|0\s*,\s*255\s*,\s*163/i;
+  assert(
+    !carnival.test(library),
+    "components/LibraryGrid.tsx must not hard-code carnival pink RGB"
+  );
+  assert(
+    !carnival.test(libraryPage),
+    "app/library/page.tsx must not hard-code carnival pink/purple/cyan hex accents"
+  );
+  assert(
+    /rgba\(196\s*,\s*165\s*,\s*116/.test(library) &&
+      library.includes("var(--neon-pink)"),
+    "LibraryGrid card placeholders use copper rgba glow + neon-pink board tokens"
+  );
+  assert(
+    /rgba\(196\s*,\s*165\s*,\s*116/.test(libraryPage) &&
+      libraryPage.includes("var(--brand)") &&
+      libraryPage.includes("var(--brand-2)") &&
+      libraryPage.includes("var(--mint)"),
+    "Library page wash + shell accents use gallery-calm copper board tokens"
+  );
+  assert(
+    libraryPage.includes("Private Library") &&
+      libraryPage.includes("Your Moments.") &&
+      libraryPage.includes('data-library-header-cta="generate-360"') &&
+      libraryPage.includes('data-library-header-cta="moment"') &&
+      libraryPage.includes("<LibraryGrid />"),
+    "Library page keeps owner-safe shell + header CTAs + LibraryGrid mount"
+  );
+}
+
 console.log(
   `product-proof smoke passed: ${proofSlugs.length} proof recipes, static concepts, 1/2 autoplay budget`
 );