@lemoncat7/dsh-theme-xiaohei 0.3.2 → 0.3.4

package/lib/client.js

@@ -928,8 +928,8 @@ var XIAOHEI_CONVERSATION_MESSAGES_CSS = `
     inset 0 1px 0 var(--xiaohei-conversation-highlight),
     inset 1px 0 0 color-mix(in srgb, var(--xiaohei-conversation-highlight) 42%, transparent),
     0 7px 22px var(--xiaohei-conversation-shadow) !important;
-  -webkit-backdrop-filter: blur(var(--xiaohei-conversation-blur)) saturate(124%);
-  backdrop-filter: blur(var(--xiaohei-conversation-blur)) saturate(124%);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
   overflow-wrap: anywhere;
 }
 
@@ -963,8 +963,8 @@ var XIAOHEI_CONVERSATION_MESSAGES_CSS = `
     inset 0 1px 0 var(--xiaohei-conversation-highlight),
     inset -1px 0 0 color-mix(in srgb, var(--xiaohei-conversation-highlight) 42%, transparent),
     0 7px 22px var(--xiaohei-conversation-shadow) !important;
-  -webkit-backdrop-filter: blur(var(--xiaohei-conversation-blur)) saturate(124%);
-  backdrop-filter: blur(var(--xiaohei-conversation-blur)) saturate(124%);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
   overflow-wrap: anywhere;
 }
 
@@ -996,8 +996,8 @@ var XIAOHEI_CONVERSATION_MESSAGES_CSS = `
   box-shadow:
     inset 0 1px 0 color-mix(in srgb, var(--xiaohei-conversation-highlight) 52%, transparent),
     0 4px 14px color-mix(in srgb, var(--xiaohei-conversation-shadow) 58%, transparent);
-  -webkit-backdrop-filter: blur(12px) saturate(118%);
-  backdrop-filter: blur(12px) saturate(118%);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
   overflow: hidden;
 }
 
@@ -1008,8 +1008,8 @@ var XIAOHEI_CONVERSATION_MESSAGES_CSS = `
   border-radius: 9px;
   background: var(--xiaohei-conversation-meta-surface) !important;
   box-shadow: inset 0 1px 0 color-mix(in srgb, var(--xiaohei-conversation-highlight) 48%, transparent);
-  -webkit-backdrop-filter: blur(10px) saturate(116%);
-  backdrop-filter: blur(10px) saturate(116%);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
 }
 
 #root [data-chat-flow-kind='context'],
@@ -1442,12 +1442,10 @@ var XIAOHEI_SIDEBAR_CSS = `
  * Keep the toggle itself native. Opacity is applied to content, never the shell
  * (which also hosts fixed-position settings dialogs). */
 @media (prefers-reduced-motion: no-preference) {
-  #root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal]:not([class*='_collapsed']) > :not(:first-child),
-  #root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal]:not([class*='_collapsed']) > div:first-child > button:first-child {
+  #root [data-xiaohei-sidebar-reveal] [data-xiaohei-sidebar-brand] {
     transition: opacity 100ms ease-out;
   }
-  #root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal='waiting']:not([class*='_collapsed']) > :not(:first-child),
-  #root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal='waiting']:not([class*='_collapsed']) > div:first-child > button:first-child {
+  #root [data-xiaohei-sidebar-reveal='waiting'] [data-xiaohei-sidebar-brand] {
     opacity: 0 !important;
     visibility: hidden;
     transition: none;
@@ -1596,9 +1594,9 @@ html[data-xiaohei-sidebar-resizing] #dsh-theme-xiaohei\\/sidebar-glass {
 }
 
 /* Keep native rail/wide geometry and one consistent control material. */
-#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > div:first-child button:last-child,
-#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],
-#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {
+#root [data-slot='sidebar'] button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F']),
+#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F'])) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],
+#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F'])) > button[aria-label='New session'] {
   color: var(--xiaohei-sidebar-emphasis);
   transition:
     background-color var(--xiaohei-motion-fast) ease,
@@ -1606,12 +1604,12 @@ html[data-xiaohei-sidebar-resizing] #dsh-theme-xiaohei\\/sidebar-glass {
     transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);
 }
 
-#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > div:first-child button:last-child:hover {
+#root [data-slot='sidebar'] button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F']):hover {
   background: var(--xiaohei-sidebar-hover);
 }
 
-#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],
-#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {
+#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F'])) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],
+#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F'])) > button[aria-label='New session'] {
   border: 1px solid var(--xiaohei-sidebar-control-edge);
   border-radius: var(--xiaohei-radius-control);
   background: var(--xiaohei-sidebar-control);
@@ -1622,14 +1620,14 @@ html[data-xiaohei-sidebar-resizing] #dsh-theme-xiaohei\\/sidebar-glass {
   text-align: start;
 }
 
-#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD']:hover,
-#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session']:hover {
+#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F'])) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD']:hover,
+#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F'])) > button[aria-label='New session']:hover {
   border-color: var(--xiaohei-sidebar-control-edge-hover);
   background: var(--xiaohei-sidebar-hover);
 }
 
 /* The footer uses a divider instead of another framed card. */
-#root [data-slot='sidebar'] > div:not([class*='_collapsed'])
+#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F']))
   > :has(> div > [data-slot='sidebar.footer.action']) {
   box-sizing: border-box;
   gap: 2px;
@@ -1702,8 +1700,8 @@ html[data-xiaohei-sidebar-resizing] #dsh-theme-xiaohei\\/sidebar-glass {
     backdrop-filter: none;
   }
 
-  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],
-  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {
+  #root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F'])) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],
+  #root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F'])) > button[aria-label='New session'] {
     border-color: ButtonText;
   }
 
@@ -1727,13 +1725,13 @@ html {
   --xiaohei-sidebar-emphasis: #E1E6E7;
   --xiaohei-sidebar-icon: rgb(220 227 229 / 70%);
   --xiaohei-sidebar-hover: rgb(231 238 240 / 6.5%);
-  --xiaohei-sidebar-glass-fill: rgb(18 22 25 / 48%);
+  --xiaohei-sidebar-glass-fill: rgb(18 22 25 / 25%);
   --xiaohei-sidebar-glass-solid: #1B2023;
   --xiaohei-sidebar-glass-edge: rgb(255 255 255 / 8%);
   --xiaohei-sidebar-glass-highlight: rgb(255 255 255 / 13%);
   --xiaohei-sidebar-glass-refraction: rgb(255 255 255 / 18%);
   --xiaohei-sidebar-glass-saturation: 102%;
-  --xiaohei-sidebar-glass-blur: 18px;
+  --xiaohei-sidebar-glass-blur: 12px;
   --xiaohei-sidebar-glass-radius: 18px;
   --xiaohei-sidebar-control: rgb(231 238 240 / 7%);
   --xiaohei-sidebar-control-edge: rgb(231 238 240 / 8%);
@@ -1841,13 +1839,13 @@ html[data-xiaohei-appearance='light'] {
   --xiaohei-sidebar-emphasis: #3F454C;
   --xiaohei-sidebar-icon: rgb(48 54 61 / 68%);
   --xiaohei-sidebar-hover: rgb(48 54 61 / 6%);
-  --xiaohei-sidebar-glass-fill: rgb(247 245 242 / 58%);
+  --xiaohei-sidebar-glass-fill: rgb(247 245 242 / 30%);
   --xiaohei-sidebar-glass-solid: #EDF1F3;
   --xiaohei-sidebar-glass-edge: rgb(37 45 51 / 9%);
   --xiaohei-sidebar-glass-highlight: rgb(255 255 255 / 64%);
   --xiaohei-sidebar-glass-refraction: rgb(255 255 255 / 18%);
   --xiaohei-sidebar-glass-saturation: 102%;
-  --xiaohei-sidebar-glass-blur: 18px;
+  --xiaohei-sidebar-glass-blur: 12px;
   --xiaohei-sidebar-control: rgb(255 255 255 / 30%);
   --xiaohei-sidebar-control-edge: rgb(46 51 58 / 8%);
   --xiaohei-sidebar-control-edge-hover: rgb(46 51 58 / 13%);
@@ -3421,7 +3419,13 @@ function createSidebarReveal(doc) {
   let observer;
   let phase = "", width = 0, waiting = false;
   const attribute = "data-xiaohei-sidebar-reveal";
-  const readPhase = () => shell?.className.includes("_collapsed") ? "rail" : shell?.className.includes("_fading") ? "closing" : "wide";
+  const readPhase = () => {
+    const state = shell?.closest("[data-sidebar-collapsed]")?.getAttribute("data-sidebar-collapsed");
+    if (state === "true") return "rail";
+    if (state === "false") return "wide";
+    if (shell?.querySelector("button[aria-label='Collapse sidebar'], button[aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F']")) return "wide";
+    return "rail";
+  };
   const apply3 = () => {
     if (!shell) return;
     const target = Number.parseFloat(shell.style.width);
@@ -3447,7 +3451,7 @@ function createSidebarReveal(doc) {
       phase = readPhase();
       if (!shell) return;
       observer = new doc.defaultView.MutationObserver(changed);
-      observer.observe(shell, { attributes: true, attributeFilter: ["class", "style"] });
+      observer.observe(column, { subtree: true, childList: true, attributes: true, attributeFilter: ["data-sidebar-collapsed", "aria-label", "style"] });
       apply3();
     },
     resize(nextWidth) {
@@ -3719,8 +3723,9 @@ var CHARACTER_MOTION = { "peek": { "light": { "layers": { "ear0": { "box": [17.5
 
 // src/scene/character-motion-clock.ts
 function createCharacterMotionClock(clock, changed, random = Math.random) {
-  let timer, disposed = false, turn = 0, active = "";
+  let timer, disposed = false, active = "";
   let clips;
+  let blinksSinceEar = 0, nextEar = 0;
   const clear = () => {
     if (timer !== void 0) clock.clearTimeout(timer);
     timer = void 0;
@@ -3745,7 +3750,7 @@ function createCharacterMotionClock(clock, changed, random = Math.random) {
         rest();
         return;
       }
-      timer = clock.setTimeout(step, 1e3 / 30);
+      timer = clock.setTimeout(step, 1e3 / 60);
     };
     step();
   }
@@ -3753,7 +3758,11 @@ function createCharacterMotionClock(clock, changed, random = Math.random) {
     timer = void 0;
     if (!clips || disposed) return;
     const gestures = Object.keys(clips).filter((name) => name !== "blink" && name !== "attention");
-    play(turn++ % 2 === 0 && clips.blink || !gestures.length ? "blink" : gestures[Math.floor(random() * gestures.length)]);
+    const ears = gestures.filter((name) => name.startsWith("ear"));
+    const action = ears.length && blinksSinceEar >= 2 ? ears[nextEar++ % ears.length] : random() < 0.72 && clips.blink || !gestures.length ? "blink" : gestures[Math.floor(random() * gestures.length)];
+    if (action.startsWith("ear")) blinksSinceEar = 0;
+    else blinksSinceEar++;
+    play(action);
   }
   return {
     setClips(next) {
@@ -3761,6 +3770,8 @@ function createCharacterMotionClock(clock, changed, random = Math.random) {
       clear();
       clips = next;
       active = "";
+      blinksSinceEar = 0;
+      nextEar = 0;
       changed(void 0, 0);
       if (clips) timer = clock.setTimeout(start, 1200 + random() * 800);
     },
@@ -3776,6 +3787,206 @@ function createCharacterMotionClock(clock, changed, random = Math.random) {
   };
 }
 
+// src/scene/character-expression.ts
+var smooth = (t) => {
+  const x = Math.max(0, Math.min(1, t));
+  return x * x * (3 - 2 * x);
+};
+function blinkClosure(progress) {
+  if (progress <= 0 || progress >= 1) return 0;
+  if (progress < 0.3) return smooth(progress / 0.3);
+  if (progress < 0.4) return 1;
+  return 1 - smooth((progress - 0.4) / 0.6);
+}
+function attentionBlink(progress) {
+  return blinkClosure((progress - 0.12) / 0.16);
+}
+
+// src/scene/character-eye-rig.ts
+var EYE_RIGS = {
+  seated: [
+    { left: [285, 223], right: [326, 224], upper: [302, 188], lower: [310, 276], iris: [309, 230, 13, 20, 0], skin: [315, 258] },
+    { left: [373, 221], right: [421, 226], upper: [387, 186], lower: [393, 277], iris: [393, 228, 15, 22, 0], skin: [391, 261] }
+  ],
+  peek: [
+    { left: [80, 214], right: [119, 221], upper: [103, 186], lower: [91, 267], iris: [102, 225, 14, 20, 0.25], skin: [110, 253] },
+    { left: [171, 252], right: [210, 265], upper: [195, 221], lower: [175, 300], iris: [186, 260, 15, 20, 0.4], skin: [186, 288] }
+  ],
+  chin: [
+    { left: [252, 252], right: [290, 247], upper: [266, 223], lower: [287, 297], iris: [278, 258, 14, 19, -0.3], skin: [291, 285] },
+    { left: [339, 234], right: [387, 227], upper: [358, 196], lower: [365, 280], iris: [361, 235, 15, 21, -0.25], skin: [367, 269] }
+  ],
+  halfpeek: [
+    { left: [89, 390], right: [159, 395], upper: [116, 337], lower: [110, 471], iris: [116, 401, 23, 30, 0.22], skin: [117, 445] }
+  ]
+};
+function clampGaze(x, y) {
+  if (!Number.isFinite(x) || !Number.isFinite(y)) return [0, 0];
+  const length = Math.max(1, Math.hypot(x, y));
+  return [x / length, y / length];
+}
+function eyelidControls(eye2, closure) {
+  const t = Math.max(0, Math.min(1, closure));
+  const cornerY = (eye2.left[1] + eye2.right[1]) / 2;
+  const drop = (eye2.lower[1] - cornerY) * 0.24;
+  const middle = [(eye2.left[0] + eye2.right[0]) / 2, cornerY + drop + (eye2.right[0] - eye2.left[0]) * 0.18];
+  const lerp2 = (p) => [p[0] + (middle[0] - p[0]) * t, p[1] + (middle[1] - p[1]) * t];
+  return { upper: lerp2(eye2.upper), lower: lerp2(eye2.lower), left: [eye2.left[0], eye2.left[1] + drop * t], right: [eye2.right[0], eye2.right[1] + drop * t] };
+}
+
+// src/scene/character-eye-material.ts
+function lidY(eye2, control, x) {
+  let low = 0, high = 1;
+  for (let i = 0; i < 14; i++) {
+    const t2 = (low + high) / 2, s2 = 1 - t2;
+    if (s2 * s2 * eye2.left[0] + 2 * s2 * t2 * control[0] + t2 * t2 * eye2.right[0] < x) low = t2;
+    else high = t2;
+  }
+  const t = (low + high) / 2, s = 1 - t;
+  return s * s * eye2.left[1] + 2 * s * t * control[1] + t * t * eye2.right[1];
+}
+function prepareEyeMaterial(doc, source, eye2) {
+  const left = Math.floor(eye2.left[0] - 9), right = Math.ceil(eye2.right[0] + 9);
+  const top = Math.floor(Math.min(eye2.upper[1], eye2.left[1], eye2.right[1]) - 5);
+  const bottom = Math.ceil(Math.max(eye2.lower[1], eye2.left[1], eye2.right[1]) + 5);
+  const width = right - left, height = bottom - top;
+  const canvas = () => {
+    const c = doc.createElement("canvas");
+    c.width = width;
+    c.height = height;
+    return c;
+  };
+  const ink = canvas(), skin = canvas(), mask = canvas();
+  const ic = ink.getContext("2d"), sc = skin.getContext("2d"), mc = mask.getContext("2d");
+  const pixels = source.getImageData(0, 0, source.canvas.width, source.canvas.height);
+  const pixel = (x, y) => {
+    const offset = (Math.max(0, Math.min(pixels.height - 1, Math.round(y / 2))) * pixels.width + Math.max(0, Math.min(pixels.width - 1, Math.round(x / 2)))) * 4;
+    return [pixels.data[offset], pixels.data[offset + 1], pixels.data[offset + 2]];
+  };
+  const ref = pixel(...eye2.skin), output = ic.createImageData(width, height), plate = sc.createImageData(width, height);
+  const isSkin = (c) => c.every((v, i) => Math.abs(v - ref[i]) < 25);
+  const skinAt = (x, y, c) => {
+    if (isSkin(c)) return c;
+    const sum = [ref[0] * 0.05, ref[1] * 0.05, ref[2] * 0.05];
+    let weight = 0.05;
+    for (const radius of [6, 12, 20, 30]) for (let i = 0; i < 8; i++) {
+      const p = pixel(x + Math.cos(i * Math.PI / 4) * radius, y + Math.sin(i * Math.PI / 4) * radius);
+      if (!isSkin(p)) continue;
+      const w = 1 / radius;
+      weight += w;
+      for (let k = 0; k < 3; k++) sum[k] += p[k] * w;
+    }
+    return sum.map((v) => Math.round(v / weight));
+  };
+  for (let x = 0; x < width; x++) {
+    const ax = left + x, upper = lidY(eye2, eye2.upper, ax);
+    for (let y = 0; y < height; y++) {
+      const ay = top + y, c = pixel(ax, ay), index = (y * width + x) * 4;
+      const darkness = 1 - (c[0] + c[1] + c[2]) / Math.max(1, ref[0] + ref[1] + ref[2]);
+      const green = c[1] > c[0] * 1.15 && c[1] > c[2] * 1.12;
+      const inBand = ay >= upper - 12 && ay <= upper + 3;
+      const alpha = inBand && !green ? Math.max(0, Math.min(1, (darkness - 0.3) / 0.35)) : 0;
+      output.data.set([...c, Math.round(alpha * 255)], index);
+      plate.data.set([...skinAt(ax, ay, c), 255], index);
+    }
+  }
+  ic.putImageData(output, 0, 0);
+  sc.putImageData(plate, 0, 0);
+  const inkMask = mc.createImageData(width, height);
+  for (let i = 0; i < output.data.length; i += 4) inkMask.data[i + 3] = output.data[i + 3] > 4 ? 255 : 0;
+  mc.putImageData(inkMask, 0, 0);
+  const expanded = canvas(), ec = expanded.getContext("2d");
+  for (const [dx, dy] of [[0, 0], [-1, 0], [1, 0], [0, -1], [0, 1]]) ec.drawImage(mask, dx, dy);
+  mc.drawImage(expanded, 0, 0);
+  mc.translate(-left, -top);
+  mc.beginPath();
+  mc.moveTo(eye2.left[0] - 7, eye2.left[1]);
+  mc.quadraticCurveTo(eye2.upper[0], eye2.upper[1] - 4, eye2.right[0] + 7, eye2.right[1]);
+  mc.quadraticCurveTo(eye2.lower[0], eye2.lower[1] + 20, eye2.left[0] - 7, eye2.left[1]);
+  mc.closePath();
+  mc.fill();
+  sc.globalCompositeOperation = "destination-in";
+  sc.filter = "blur(0.65px)";
+  sc.drawImage(mask, 0, 0);
+  sc.filter = "none";
+  return { ink, skin, left, top, width, height };
+}
+
+// src/scene/character-eye-renderer.ts
+function createEyeRenderer(ctx, body, eyes) {
+  const doc = ctx.canvas.ownerDocument;
+  const source = doc.createElement("canvas");
+  source.width = body.width;
+  source.height = body.height;
+  const sample = source.getContext("2d", { willReadFrequently: true });
+  sample.drawImage(body, 0, 0);
+  const color = (p) => {
+    const data = sample.getImageData(Math.round(p[0] / 2), Math.round(p[1] / 2), 1, 1).data;
+    return [data[0], data[1], data[2]];
+  };
+  const rgb = (c) => `rgb(${c.map((v) => Math.round(v)).join(" ")})`;
+  const prepared = eyes.map((eye2) => {
+    const [cx, cy, rx, ry, angle] = eye2.iris;
+    const iris = doc.createElement("canvas");
+    iris.width = Math.ceil(rx * 2 + 4);
+    iris.height = Math.ceil(ry * 2 + 4);
+    const ic = iris.getContext("2d");
+    ic.translate(iris.width / 2, iris.height / 2);
+    ic.rotate(angle);
+    ic.beginPath();
+    ic.ellipse(0, 0, rx, ry, 0, 0, Math.PI * 2);
+    ic.clip();
+    ic.rotate(-angle);
+    ic.drawImage(body, 0, 0, body.width, body.height, -cx, -cy, body.width * 2, body.height * 2);
+    return { eye: eye2, iris, skin: color(eye2.skin), material: prepareEyeMaterial(doc, sample, eye2) };
+  });
+  function aperture(eye2, closure) {
+    const { upper, lower, left, right } = eyelidControls(eye2, closure);
+    ctx.beginPath();
+    ctx.moveTo(...left);
+    ctx.quadraticCurveTo(...upper, ...right);
+    ctx.quadraticCurveTo(...lower, ...left);
+    ctx.closePath();
+  }
+  return (gaze, closure) => {
+    const [gx, gy] = clampGaze(...gaze);
+    ctx.save();
+    ctx.scale(0.5, 0.5);
+    for (const { eye: eye2, iris, skin, material } of prepared) {
+      const [cx, cy, rx, ry] = eye2.iris;
+      ctx.save();
+      ctx.drawImage(material.skin, material.left, material.top);
+      ctx.save();
+      aperture(eye2, 0);
+      ctx.clip();
+      if (closure < 0.999) {
+        ctx.save();
+        aperture(eye2, closure);
+        ctx.clip();
+        const shade = ctx.createLinearGradient(0, cy - ry, 0, cy + ry);
+        const brightness = (skin[0] + skin[1] + skin[2]) / 765;
+        const white = brightness > 0.65 ? [255, 253, 241] : [166, 185, 193];
+        shade.addColorStop(0, rgb(white.map((c) => c * 0.83)));
+        shade.addColorStop(0.5, rgb(white));
+        ctx.fillStyle = shade;
+        ctx.fillRect(cx - 70, cy - 70, 140, 140);
+        const dx = gx * rx * 0.26, dy = gy * ry * 0.13;
+        ctx.drawImage(iris, cx - iris.width / 2 + dx, cy - iris.height / 2 + dy);
+        ctx.restore();
+      }
+      ctx.restore();
+      const lids = eyelidControls(eye2, closure);
+      for (let x = 0; x < material.width; x++) {
+        const ax = material.left + x;
+        const dy = lidY({ ...eye2, left: lids.left, right: lids.right }, lids.upper, ax) - lidY(eye2, eye2.upper, ax);
+        ctx.drawImage(material.ink, x, 0, 1, material.height, ax, material.top + dy, 1, material.height);
+      }
+      ctx.restore();
+    }
+    ctx.restore();
+  };
+}
+
 // src/scene/character-rig.ts
 var TAIL_JOINTS = [
   [284, 328],
@@ -3786,6 +3997,12 @@ var TAIL_JOINTS = [
   [307, 448],
   [319, 464]
 ];
+function earOffset(y, top, root, angle) {
+  const span = Math.max(1, root - top);
+  const weight = Math.max(0, Math.min(1, (root - y) / span));
+  if (weight === 0) return 0;
+  return Math.sin(angle) * Math.min(20, span * 0.55) * weight * weight;
+}
 function solveBones(rest, angles) {
   return rest.reduce((out, p, i) => {
     const parent = out[i - 1];
@@ -3826,11 +4043,13 @@ function skinVertex(v, joints, rest = TAIL_JOINTS) {
 function rigAngles(progress, count, tail) {
   const t = Math.max(0, Math.min(1, progress));
   const envelope = Math.sin(Math.PI * t) ** 2;
-  return Array.from({ length: count }, (_, i) => envelope * (tail ? i ? 0.12 : 0 : 0.22) * Math.sin(t * Math.PI * (tail ? 3 : 4) - i * (tail ? 0.65 : 1.1)));
+  return Array.from({ length: count }, (_, i) => envelope * (tail ? i ? 0.12 : 0 : 0.32) * Math.sin(t * Math.PI * (tail ? 3 : 4) - i * (tail ? 0.65 : 1.1)));
 }
 
 // src/scene/character-rig-renderer.ts
-function createRigRenderer(ctx, rig, images) {
+function createRigRenderer(ctx, rig, images, eyes = []) {
+  const body = images.get(rig.layers.body.src);
+  const drawEyes = body ? createEyeRenderer(ctx, body, eyes) : void 0;
   const tail = rig.layers.tail;
   const vertices = [], triangles = [];
   if (tail) {
@@ -3884,24 +4103,67 @@ function createRigRenderer(ctx, rig, images) {
       ctx.restore();
     }
   }
-  return (action, progress) => {
+  return (action, progress, gaze = [0, 0]) => {
     ctx.clearRect(0, 0, rig.size[0], rig.size[1]);
-    const ears = rigAngles(progress, rig.ears.length, false);
-    rig.ears.forEach(([x, y], i) => {
-      ctx.save();
-      ctx.translate(x, y);
-      ctx.rotate(action === "attention" || action === "ear" + i ? ears[i] : 0);
-      ctx.translate(-x, -y);
-      layer("ear" + i);
-      ctx.restore();
+    const earProgress = action === "attention" ? Math.max(0, Math.min(1, (progress - 0.03) / 0.65)) : progress;
+    const ears = rigAngles(earProgress, rig.ears.length, false);
+    rig.ears.forEach(([, root], i) => {
+      const part = rig.layers["ear" + i], image = part && images.get(part.src);
+      if (!part || !image) return;
+      const angle = action === "attention" || action === "ear" + i ? ears[i] : 0;
+      if (Math.abs(angle) < 1e-8) {
+        layer("ear" + i);
+        return;
+      }
+      const [x, top, right, bottom] = part.box;
+      for (let row = 0; row < image.height; row++) {
+        const y = top + row * (bottom - top) / image.height;
+        ctx.drawImage(image, 0, row, image.width, 1, x + earOffset(y, top, root, angle), y, right - x, (bottom - top) / image.height);
+      }
     });
     layer("body");
-    drawTail(action === "tail" || action === "attention" ? progress : 0);
-    if (action === "blink") {
-      ctx.save();
-      ctx.globalAlpha = Math.min(1, Math.sin(Math.PI * progress) * 2);
-      layer("blink");
-      ctx.restore();
+    drawTail(action === "attention" ? Math.max(0, Math.min(1, (progress - 0.22) / 0.78)) : action === "tail" ? progress : 0);
+    const closure = action === "blink" ? blinkClosure(progress) : action === "attention" ? attentionBlink(progress) : 0;
+    drawEyes?.(gaze, closure);
+  };
+}
+
+// src/scene/character-gaze.ts
+function createCharacterGaze(clock, changed) {
+  let value = [0, 0], target = [0, 0], frame, last = 0, disposed = false;
+  function step(now) {
+    frame = void 0;
+    if (disposed) return;
+    const dt = Math.min(64, Math.max(0, now - last));
+    last = now;
+    const amount = 1 - Math.exp(-dt / 95);
+    value = [value[0] + (target[0] - value[0]) * amount, value[1] + (target[1] - value[1]) * amount];
+    const settled = Math.hypot(value[0] - target[0], value[1] - target[1]) < 1e-3;
+    if (settled) value = target;
+    changed(value);
+    if (!settled) frame = clock.requestAnimationFrame(step);
+  }
+  function stop() {
+    if (frame !== void 0) clock.cancelAnimationFrame(frame);
+    frame = void 0;
+  }
+  return {
+    target(x, y) {
+      if (disposed) return;
+      target = clampGaze(x, y);
+      if (frame === void 0 && Math.hypot(value[0] - target[0], value[1] - target[1]) >= 1e-3) {
+        last = clock.performance.now();
+        frame = clock.requestAnimationFrame(step);
+      }
+    },
+    reset() {
+      stop();
+      target = value = [0, 0];
+      changed(value);
+    },
+    dispose() {
+      disposed = true;
+      stop();
     }
   };
 }
@@ -3913,6 +4175,23 @@ function createCharacterMotion(doc) {
   let disposed = false, part, rig;
   let canvas, render;
   let pose2 = "", appearance = "", revision = 0, nearby = false, lastPointer = 0;
+  let attentionTimer, lastAttention = -Infinity;
+  let gazePoint = [0, 0], activeAction, activeProgress = 0;
+  let bounds;
+  const paint = () => {
+    if (render && part) {
+      render(activeAction, activeProgress, gazePoint);
+      part.dataset.motion = activeAction ?? "rig-rest";
+    }
+  };
+  const gaze = createCharacterGaze(win, (point) => {
+    gazePoint = point;
+    paint();
+  });
+  const cancelAttention = () => {
+    if (attentionTimer !== void 0) win.clearTimeout(attentionTimer);
+    attentionTimer = void 0;
+  };
   function decode(src) {
     if (loading.has(src)) return loading.get(src);
     if (images.has(src)) return Promise.resolve();
@@ -3927,8 +4206,9 @@ function createCharacterMotion(doc) {
   }
   const clock = createCharacterMotionClock(win, (action, progress) => {
     if (!canvas || !part || !render) return;
-    render(action, progress);
-    part.dataset.motion = action ?? "rig-rest";
+    activeAction = action;
+    activeProgress = progress;
+    paint();
   });
   function update() {
     if (disposed) return;
@@ -3936,8 +4216,13 @@ function createCharacterMotion(doc) {
     const moving = doc.documentElement.hasAttribute("data-xiaohei-sidebar-resizing");
     const next = !doc.hidden && !reduced.matches && !moving && part ? CHARACTER_MOTION[pose2]?.[mode] : void 0;
     if (next === rig && appearance === mode) return;
-    clock.setClips(void 0);
+    cancelAttention();
     render = void 0;
+    clock.setClips(void 0);
+    gaze.reset();
+    bounds = void 0;
+    activeAction = void 0;
+    activeProgress = 0;
     const current = ++revision;
     canvas?.remove();
     canvas = void 0;
@@ -3959,9 +4244,9 @@ function createCharacterMotion(doc) {
         return;
       }
       currentPart.append(canvas);
-      render = createRigRenderer(ctx, next, images);
+      render = createRigRenderer(ctx, next, images, EYE_RIGS[pose2]);
       clock.setClips({
-        blink: { duration: 330 },
+        blink: { duration: 280 },
         ...Object.fromEntries(next.ears.map((_, i) => ["ear" + i, { duration: 1050 }])),
         ...next.layers.tail ? { tail: { duration: 2400 } } : {},
         attention: { duration: 2400 }
@@ -3971,14 +4256,48 @@ function createCharacterMotion(doc) {
   const pointer = (event) => {
     if (!part || !render || event.pointerType !== "mouse") return;
     const now = win.performance.now();
-    if (now - lastPointer < 100) return;
-    lastPointer = now;
-    const rect = part.getBoundingClientRect();
+    if (!bounds || now - lastPointer >= 100) {
+      bounds = part.getBoundingClientRect();
+      lastPointer = now;
+    }
+    const rect = bounds, eyes = EYE_RIGS[pose2];
+    if (rig && eyes?.length) {
+      const scale = Math.min(rect.width / rig.size[0], rect.height / rig.size[1]);
+      const eyeX = eyes.reduce((sum, eye2) => sum + eye2.iris[0], 0) / eyes.length / 2;
+      const eyeY = eyes.reduce((sum, eye2) => sum + eye2.iris[1], 0) / eyes.length / 2;
+      const cx = rect.left + eyeX * scale;
+      const cy = rect.top + (rect.height - rig.size[1] * scale) / 2 + eyeY * scale;
+      gaze.target((event.clientX - cx) / Math.max(220, win.innerWidth * 0.32), (event.clientY - cy) / Math.max(180, win.innerHeight * 0.32));
+    }
     const near = event.clientX >= rect.left - 70 && event.clientX <= rect.right + 70 && event.clientY >= rect.top - 50 && event.clientY <= rect.bottom + 50;
-    if (near && !nearby) clock.attention();
+    if (!near) cancelAttention();
+    if (near && !nearby && now - lastAttention > 6e3) {
+      const current = revision;
+      attentionTimer = win.setTimeout(() => {
+        attentionTimer = void 0;
+        if (!disposed && nearby && current === revision) {
+          lastAttention = win.performance.now();
+          clock.attention();
+        }
+      }, 180);
+    }
     nearby = near;
   };
   reduced.addEventListener("change", update);
+  const neutral = () => {
+    gaze.target(0, 0);
+    nearby = false;
+    cancelAttention();
+  };
+  const leave = (event) => {
+    if (!event.relatedTarget) neutral();
+  };
+  const resize = () => {
+    bounds = void 0;
+  };
+  doc.addEventListener("pointerout", leave);
+  win.addEventListener("blur", neutral);
+  win.addEventListener("resize", resize);
   doc.addEventListener("visibilitychange", update);
   doc.addEventListener("pointermove", pointer, { passive: true });
   const observer = new win.MutationObserver(update);
@@ -3986,9 +4305,12 @@ function createCharacterMotion(doc) {
   return {
     setPose(nextPart, nextPose) {
       if (nextPart !== part || pose2 !== nextPose) {
+        cancelAttention();
         revision++;
-        clock.setClips(void 0);
         render = void 0;
+        clock.setClips(void 0);
+        gaze.reset();
+        bounds = void 0;
         canvas?.remove();
         canvas = void 0;
         rig = void 0;
@@ -4000,8 +4322,10 @@ function createCharacterMotion(doc) {
     },
     dispose() {
       disposed = true;
+      cancelAttention();
       revision++;
       clock.dispose();
+      gaze.dispose();
       canvas?.remove();
       render = void 0;
       images.clear();
@@ -4011,6 +4335,9 @@ function createCharacterMotion(doc) {
       observer.disconnect();
       doc.removeEventListener("visibilitychange", update);
       doc.removeEventListener("pointermove", pointer);
+      doc.removeEventListener("pointerout", leave);
+      win.removeEventListener("blur", neutral);
+      win.removeEventListener("resize", resize);
     }
   };
 }
@@ -5862,7 +6189,7 @@ var HEIXIU_FACE = {
 var HEIXIU_FOOT = Math.max(...HEIXIU_PROFILE.map((r, i) => r * Math.sin(i / HEIXIU_PROFILE.length * Math.PI * 2))) * 100;
 var HEIXIU_REST = { x: 0, y: 0, sx: 1, sy: 1, roll: 0, lid: 1, cheer: 0 };
 var HEIXIU_REACTIONS = ["greet", "hop", "wiggle"];
-var smooth = (x) => {
+var smooth2 = (x) => {
   const k = Math.max(0, Math.min(1, x));
   return k * k * (3 - 2 * k);
 };
@@ -5898,7 +6225,7 @@ var HeixiuReactions = class {
     this.aim(0, time);
   }
   aim(direction, time) {
-    this.hover = this.hoverFrom + (this.hoverTo - this.hoverFrom) * smooth((time - this.hoverAt) / 0.28);
+    this.hover = this.hoverFrom + (this.hoverTo - this.hoverFrom) * smooth2((time - this.hoverAt) / 0.28);
     this.hoverFrom = this.hover;
     this.hoverTo = Math.max(-1, Math.min(1, direction));
     this.hoverAt = time;
@@ -5954,7 +6281,7 @@ var HeixiuReactions = class {
   }
   sample(time) {
     const out = this.track(time);
-    this.hover = this.hoverFrom + (this.hoverTo - this.hoverFrom) * smooth((time - this.hoverAt) / 0.28);
+    this.hover = this.hoverFrom + (this.hoverTo - this.hoverFrom) * smooth2((time - this.hoverAt) / 0.28);
     out.roll += this.hover * 5;
     out.x += this.hover * 4;
     return out;
@@ -6380,6 +6707,8 @@ function installComposerBloub(doc = typeof document === "undefined" ? void 0 : d
   let hero = null, heroRow = null;
   let bounds;
   let layoutFrame, animationFrame, wake;
+  let frameTimer;
+  let lastPointerStamp = -Infinity;
   let time = 0, lastStamp, activeUntil = 2.5, actionUntil = 0, reactionIndex = 0;
   let pointerSide = 1;
   let special = false, specialIndex = 0;
@@ -6406,8 +6735,10 @@ function installComposerBloub(doc = typeof document === "undefined" ? void 0 : d
     ambientTimer = void 0;
     flight.cancel();
     if (animationFrame !== void 0) win.cancelAnimationFrame(animationFrame);
+    if (frameTimer !== void 0) win.clearTimeout(frameTimer);
     if (wake !== void 0) win.clearTimeout(wake);
     animationFrame = void 0;
+    frameTimer = void 0;
     wake = void 0;
     lastStamp = void 0;
   }
@@ -6442,7 +6773,7 @@ function installComposerBloub(doc = typeof document === "undefined" ? void 0 : d
   }
   function animateFor(seconds) {
     activeUntil = Math.max(activeUntil, time + seconds);
-    if (!allowed() || animationFrame !== void 0) return;
+    if (!allowed() || animationFrame !== void 0 || frameTimer !== void 0) return;
     if (wake !== void 0) win.clearTimeout(wake);
     wake = void 0;
     lastStamp = void 0;
@@ -6467,13 +6798,16 @@ function installComposerBloub(doc = typeof document === "undefined" ? void 0 : d
     }
     renderer.render(engine.sample(time), reactions.sample(time));
     if (time < activeUntil || actionUntil || liveliness(time).lid < 0.99) {
-      animationFrame = win.requestAnimationFrame(tick);
+      frameTimer = win.setTimeout(() => {
+        frameTimer = void 0;
+        if (allowed()) animationFrame = win.requestAnimationFrame(tick);
+      }, 1e3 / 30);
     } else {
       lastStamp = void 0;
       wake = win.setTimeout(() => {
         wake = void 0;
-        animateFor(2);
-      }, 3200);
+        animateFor(1);
+      }, 8e3);
     }
   }
   function syncPlayback() {
@@ -6567,6 +6901,8 @@ function installComposerBloub(doc = typeof document === "undefined" ? void 0 : d
       leave();
       return;
     }
+    if (event.timeStamp - lastPointerStamp < 1e3 / 30) return;
+    lastPointerStamp = event.timeStamp;
     const dx = event.clientX - (bounds.left + bounds.width / 2);
     const dy = event.clientY - (bounds.top + bounds.height / 2);
     follow(dx, dy);
@@ -6946,7 +7282,7 @@ var XIAOHEI_THEME_TOKEN_OVERRIDES = Object.fromEntries(
 // src/metallic-brand-mark.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var sidebarMetallicSnapshot;
+var metallicSnapshots = /* @__PURE__ */ new Map();
 var VERTEX_SHADER = `#version 300 es
 precision highp float;
 in vec2 a_position;
@@ -7125,14 +7461,14 @@ function XiaoheiMetallicBrandMark({ size, className }) {
   const [ready, setReady] = (0, import_react.useState)(false);
   const visualSize = Math.max(24, size + 4);
   const context = size >= 32 ? "hero" : "sidebar";
-  const [snapshot, setSnapshot] = (0, import_react.useState)(context === "sidebar" ? sidebarMetallicSnapshot : void 0);
+  const [snapshot, setSnapshot] = (0, import_react.useState)(metallicSnapshots.get(visualSize));
   (0, import_react.useEffect)(() => {
     if (snapshot !== void 0) return;
     const canvas = canvasRef.current;
     if (canvas === null) return;
     const gl = canvas.getContext("webgl2", {
       alpha: true,
-      antialias: true,
+      antialias: false,
       powerPreference: "low-power",
       premultipliedAlpha: true
     });
@@ -7165,7 +7501,7 @@ function XiaoheiMetallicBrandMark({ size, className }) {
       UNIFORM_NAMES.map((name) => [name, gl.getUniformLocation(program, name)])
     );
     const pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
-    const renderSize = Math.max(96, Math.ceil(visualSize * pixelRatio * 2));
+    const renderSize = Math.max(64, Math.ceil(visualSize * pixelRatio));
     canvas.width = renderSize;
     canvas.height = renderSize;
     gl.viewport(0, 0, renderSize, renderSize);
@@ -7196,27 +7532,13 @@ function XiaoheiMetallicBrandMark({ size, className }) {
     setRgb(gl, uniforms.u_darkColor, [0.025, 0.04, 0.045]);
     setRgb(gl, uniforms.u_tint, [0.84, 0.92, 0.89]);
     let disposed = false;
-    let visible = true;
-    let animationFrame;
-    let lastFrame = 0;
-    let metallicTime = 1450;
-    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const metallicTime = 1450;
     const texture = gl.createTexture();
     const image = new Image();
     const draw = () => {
       gl.uniform1f(uniforms.u_time, metallicTime);
       gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
     };
-    const render = (now) => {
-      if (disposed) return;
-      if (visible && document.visibilityState !== "hidden" && now - lastFrame >= 40) {
-        const delta = lastFrame === 0 ? 0 : Math.min(80, now - lastFrame);
-        lastFrame = now;
-        metallicTime += delta * 0.11;
-        draw();
-      }
-      animationFrame = window.requestAnimationFrame(render);
-    };
     image.onload = () => {
       if (disposed || texture === null) return;
       gl.activeTexture(gl.TEXTURE0);
@@ -7229,24 +7551,15 @@ function XiaoheiMetallicBrandMark({ size, className }) {
       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
       gl.uniform1i(uniforms.u_tex, 0);
       draw();
-      if (context === "sidebar") {
-        sidebarMetallicSnapshot = canvas.toDataURL();
-        setSnapshot(sidebarMetallicSnapshot);
-        return;
-      }
+      const result = canvas.toDataURL();
+      metallicSnapshots.set(visualSize, result);
+      setSnapshot(result);
       setReady(true);
-      if (!reduceMotion.matches) animationFrame = window.requestAnimationFrame(render);
     };
     image.src = XIAOHEI_BRAND_AVATAR;
-    const visibilityObserver = typeof IntersectionObserver === "function" ? new IntersectionObserver((entries) => {
-      visible = entries.some((entry) => entry.isIntersecting);
-      if (visible) lastFrame = 0;
-    }) : void 0;
-    visibilityObserver?.observe(canvas);
     return () => {
       disposed = true;
-      if (animationFrame !== void 0) window.cancelAnimationFrame(animationFrame);
-      visibilityObserver?.disconnect();
+      image.onload = null;
       if (texture !== null) gl.deleteTexture(texture);
       gl.deleteBuffer(buffer);
       gl.deleteProgram(program);
@@ -7261,6 +7574,7 @@ function XiaoheiMetallicBrandMark({ size, className }) {
     {
       className: className === void 0 ? "xiaohei-brand-mark" : `${className} xiaohei-brand-mark`,
       "data-brand-context": context,
+      "data-xiaohei-sidebar-brand": context === "sidebar" ? "" : void 0,
       "data-metallic-ready": ready || snapshot !== void 0 ? "true" : "false",
       style: geometry,
       "aria-hidden": "true",
@@ -7272,7 +7586,7 @@ function XiaoheiMetallicBrandMark({ size, className }) {
   );
 }
 function XiaoheiBrandName() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "xiaohei-brand-name", children: "\u7F57\u5C0F\u9ED1 \xB7 \u5996\u7075\u4F1A\u9986" });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "xiaohei-brand-name", "data-xiaohei-sidebar-brand": "", children: "\u7F57\u5C0F\u9ED1 \xB7 \u5996\u7075\u4F1A\u9986" });
 }
 
 // src/plugin.ts