Stop clipping the cat at the window edge

The cat was drawn in a 100 x 90 box that was exactly the window, so anything
reaching past it was cut off: the right whiskers always, and more of them in
poses that push the head forward, up to art x 109 while stretching.

The window box is now 120 x 106 with the drawing inset at (7, 14). The slack is
symmetric on purpose, because facing left mirrors the art about the box centre,
so asymmetric slack would clip the other side instead.

The mood-name mapper grew the shared aspect ratio and became CatDefs, so every
window sizes the cat the same way. Nose and mug offsets follow the new inset.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

qml/Cat.qml

@@ -40,7 +40,15 @@ Item {
     readonly property bool sleeping: mood === "sleeping"
     readonly property bool happy: mood === "loving" || mood === "grooming" || mood === "stretching"
                                   || mood === "drinking" || petted
-    readonly property real unit: width / 100
+    // The cat is drawn in a 100 x 90 box. The window box is larger so whiskers,
+    // tail and the glyphs above the head stay inside it in every pose. The slack
+    // has to be symmetric: facing left mirrors the art about the box centre.
+    // Widest reach is the right whiskers while stretching, art x 109.
+    readonly property real designWidth: 120
+    readonly property real designHeight: 106
+    readonly property real artX: 7
+    readonly property real artY: 14
+    readonly property real unit: width / designWidth
 
     // tail pose (design units); swish is added on top by the idle animation
     property real tailC1X: 14
@@ -57,8 +65,8 @@ Item {
     Behavior on tailX { NumberAnimation { duration: 500; easing.type: Easing.InOutQuad } }
     Behavior on tailY { NumberAnimation { duration: 500; easing.type: Easing.InOutQuad } }
 
-    implicitWidth: 100
-    implicitHeight: 90
+    implicitWidth: designWidth
+    implicitHeight: designHeight
 
     transform: Scale {
         origin.x: cat.width / 2
@@ -67,6 +75,8 @@ Item {
 
     Item {
         id: art
+        x: cat.artX * cat.unit
+        y: cat.artY * cat.unit
         width: 100
         height: 90
         transformOrigin: Item.TopLeft
@@ -459,6 +469,46 @@ Item {
             }
         }
 
+        // Machine code tag, flashed in the headroom whenever the mood changes
+        Item {
+            id: codeTag
+            x: 16; y: -12
+            width: codeBg.width
+            height: codeBg.height
+            opacity: 0
+            visible: cat.showCodes && opacity > 0.01
+            transform: Scale { xScale: cat.facingRight ? 1 : -1; origin.x: codeTag.width / 2 }
+            z: 10
+            Accessible.ignored: true
+
+            Rectangle {
+                id: codeBg
+                width: codeText.implicitWidth + 8
+                height: codeText.implicitHeight + 4
+                radius: 3
+                color: "#242833"
+                opacity: 0.92
+                antialiasing: true
+
+                Text {
+                    id: codeText
+                    anchors.centerIn: parent
+                    text: cat.moodCode
+                    color: "#8fd6ff"
+                    font.pixelSize: 10
+                    font.bold: true
+                    font.family: "Menlo"
+                }
+            }
+
+            SequentialAnimation {
+                id: codeFlash
+                NumberAnimation { target: codeTag; property: "opacity"; to: 1; duration: 160 }
+                PauseAnimation { duration: 1500 }
+                NumberAnimation { target: codeTag; property: "opacity"; to: 0; duration: 500 }
+            }
+        }
+
         // speech bubble: "!" / "z" / "♥"
         Text {
             id: bubble
@@ -490,47 +540,6 @@ Item {
         }
     }
 
-    // Machine code tag above the head, flashed whenever the mood changes
-    Item {
-        id: codeTag
-        x: 30; y: 2
-        width: codeBg.width
-        height: codeBg.height
-        opacity: 0
-        visible: cat.showCodes && opacity > 0.01
-        transformOrigin: Item.Center
-        transform: Scale { xScale: cat.facingRight ? 1 : -1; origin.x: codeTag.width / 2 }
-        z: 10
-        scale: cat.unit
-        Accessible.ignored: true
-
-        Rectangle {
-            id: codeBg
-            width: codeText.implicitWidth + 10
-            height: codeText.implicitHeight + 6
-            radius: 4
-            color: "#242833"
-            opacity: 0.92
-            antialiasing: true
-
-            Text {
-                id: codeText
-                anchors.centerIn: parent
-                text: cat.moodCode
-                color: "#8fd6ff"
-                font.pixelSize: 11
-                font.bold: true
-                font.family: "Menlo"
-            }
-        }
-
-        SequentialAnimation {
-            id: codeFlash
-            NumberAnimation { target: codeTag; property: "opacity"; to: 1; duration: 160 }
-            PauseAnimation { duration: 1500 }
-            NumberAnimation { target: codeTag; property: "opacity"; to: 0; duration: 500 }
-        }
-    }
 
     onMoodCodeChanged: if (showCodes && moodCode.length > 0) codeFlash.restart()