From aad29dd83280cf38f5b25a7972a978485733d7ed Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 22 Apr 2026 10:02:05 +0000
Subject: [PATCH] kasuti: grey-tint both fabrics on a dead-end
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Lifted the legal-stitches check into a deadEnd flag shared by the
banner and both fabric panels. When the user runs out of legal moves
on the active side, both SVG canvases fade to bg-muted (a light grey)
with a smooth transition — a passive cue to match the existing amber
banner.

https://claude.ai/code/session_01KNdXjQczMCRGMK7K3Qderw
---
 src/components/interactives/KasutiEmbroidery.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/interactives/KasutiEmbroidery.tsx b/src/components/interactives/KasutiEmbroidery.tsx
index cb1b195..655de7f 100644
--- a/src/components/interactives/KasutiEmbroidery.tsx
+++ b/src/components/interactives/KasutiEmbroidery.tsx
@@ -743,6 +743,7 @@ const KasutiEmbroidery: React.FC = () => {
   const totalEdges = placed.edges.length;
   const frontRemaining = totalEdges - drawnFront.size;
   const backRemaining = totalEdges - drawnBack.size;
+  const deadEnd = !completed && currentVertex !== null && legalNextVertices.length === 0;
 
   return (
     <div className="w-full max-w-5xl mx-auto p-4 space-y-6">
@@ -868,6 +869,7 @@ const KasutiEmbroidery: React.FC = () => {
           legalNext={legalNextVertices}
           canStartAt={canStartAt}
           completed={completed}
+          deadEnd={deadEnd}
           remaining={frontRemaining}
         />
         <FabricPanel
@@ -889,6 +891,7 @@ const KasutiEmbroidery: React.FC = () => {
           legalNext={legalNextVertices}
           canStartAt={canStartAt}
           completed={completed}
+          deadEnd={deadEnd}
           remaining={backRemaining}
         />
       </div>
@@ -900,7 +903,7 @@ const KasutiEmbroidery: React.FC = () => {
         </div>
       )}
 
-      {!completed && currentVertex && legalNextVertices.length === 0 && (
+      {deadEnd && (
         <div className="text-center p-4 rounded-xl bg-amber-100 dark:bg-amber-900/30 border border-amber-500 text-amber-800 dark:text-amber-200 text-sm">
           No legal stitches from here on the {activeSide}. Undo a step or reset to try a
           different route.
@@ -931,6 +934,7 @@ interface FabricPanelProps {
   legalNext: V[];
   canStartAt: (v: V) => boolean;
   completed: boolean;
+  deadEnd: boolean;
   remaining: number;
 }
 
@@ -950,6 +954,7 @@ const FabricPanel: React.FC<FabricPanelProps> = ({
   legalNext,
   canStartAt,
   completed,
+  deadEnd,
   remaining,
 }) => {
   const isActive = activeSide === side && !completed;
@@ -1030,7 +1035,9 @@ const FabricPanel: React.FC<FabricPanelProps> = ({
           <svg
             width={SVG_DIM}
             height={SVG_DIM}
-            className="rounded-lg bg-card"
+            className={`rounded-lg transition-colors ${
+              deadEnd ? 'bg-muted' : 'bg-card'
+            }`}
             style={{
               outline: '1px solid var(--border)',
             }}