@lemoncat7/dsh-theme-xiaohei 0.3.0-alpha.23 → 0.3.2

package/lib/chrome/identity.js

@@ -1,11 +1,10 @@
-import { XIAOHEI_IDENTITY_CAT_TAG, XIAOHEI_IDENTITY_CHARM, } from '../generated-identity.js';
+import { XIAOHEI_IDENTITY_CHARM } from '../generated-identity.js';
 /**
  * Xiaohei ornaments shared by native DSH chrome and opt-in feature plugins.
  * Frames own geometry and headings; this layer owns generated hanging art only.
  */
 export const XIAOHEI_IDENTITY_CSS = `
-:where([data-xiaohei-frame-ornament='spirit-knot'])::after,
-#root [data-composer-card='true']::before {
+:where([data-xiaohei-frame-ornament='spirit-knot'])::after {
   content: '';
   position: absolute;
   z-index: 3;
@@ -29,31 +28,18 @@ export const XIAOHEI_IDENTITY_CSS = `
   background-image: url("${XIAOHEI_IDENTITY_CHARM}");
 }
 
-#root [data-composer-card='true']::before {
-  width: 34px;
-  height: 50px;
-  background-image: url("${XIAOHEI_IDENTITY_CAT_TAG}");
-}
-
 :where([data-xiaohei-frame-ornament='spirit-knot'])::after {
   top: -6px;
   right: 16px;
 }
 
-#root [data-composer-card='true']::before {
-  top: -10px;
-  right: 24px;
-}
-
-:where([data-xiaohei-frame-ornament='spirit-knot']):hover::after,
-#root [data-composer-card='true']:focus-within::before {
+:where([data-xiaohei-frame-ornament='spirit-knot']):hover::after {
   filter: drop-shadow(0 4px 6px var(--xiaohei-focus-shadow));
   transform: rotate(-4deg) scale(1.03);
 }
 
 @media (forced-colors: active) {
-  :where([data-xiaohei-frame-ornament])::after,
-  #root [data-composer-card='true']::before {
+  :where([data-xiaohei-frame-ornament])::after {
     display: none;
   }
 }

package/lib/chrome/portal.d.ts

@@ -2,5 +2,5 @@
  * Two compact voids and one travelling Heixiu. The portals are matte spatial
  * gaps rather than rings; all keyframes stay on compositor-safe properties.
  */
-export declare const XIAOHEI_PORTAL_CSS = "\n#dsh-theme-xiaohei\\/portal-layer {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  overflow: hidden;\n  contain: strict;\n  pointer-events: none;\n  user-select: none;\n}\n\n#dsh-theme-xiaohei\\/portal-layer > * {\n  position: absolute;\n  display: block;\n  pointer-events: none;\n}\n\n.xiaohei-portal__void {\n  width: clamp(2.8rem, 3.6vw, 4rem);\n  aspect-ratio: 0.76;\n  border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;\n  opacity: 0;\n  background:\n    radial-gradient(ellipse at 46% 48%, #010304 0%, #020609 58%, #092027 72%, rgb(66 188 170 / 36%) 78%, transparent 82%);\n  box-shadow:\n    inset 0 0 0.7rem rgb(0 0 0 / 92%),\n    0 0 0.85rem rgb(78 214 191 / 18%);\n  will-change: transform, opacity;\n}\n\n.xiaohei-portal__void::after {\n  position: absolute;\n  inset: 13% 18%;\n  display: block;\n  content: '';\n  border-radius: inherit;\n  background: #000102;\n  box-shadow: inset 0.18rem 0 0.45rem rgb(16 56 64 / 42%);\n}\n\n.xiaohei-portal__void--entry {\n  left: var(--portal-entry-x);\n  top: var(--portal-entry-y);\n  transform: translate3d(-50%, -50%, 0) rotate(var(--portal-entry-angle)) scale3d(0.04, 0.12, 1);\n}\n\n.xiaohei-portal__void--exit {\n  left: var(--portal-exit-x);\n  top: var(--portal-exit-y);\n  transform: translate3d(-50%, -50%, 0) rotate(var(--portal-exit-angle)) scale3d(0.04, 0.12, 1);\n}\n\n.xiaohei-portal__traveler {\n  left: var(--portal-entry-x);\n  top: var(--portal-entry-y);\n  z-index: 1;\n  width: clamp(2.7rem, 3.4vw, 3.7rem);\n  aspect-ratio: 1;\n  opacity: 0;\n  transform: translate3d(-5rem, -50%, 0) scale(0.9);\n  filter:\n    drop-shadow(0 0.25rem 0.45rem rgb(90 221 199 / 20%))\n    drop-shadow(0 0.58rem 0.9rem rgb(1 9 10 / 22%));\n  will-change: transform, opacity;\n}\n\n.xiaohei-portal__traveler > img {\n  position: absolute;\n  inset: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n  max-width: none;\n  max-height: none;\n  object-fit: contain;\n  filter: brightness(1.1) contrast(1.05) saturate(0.82);\n}\n\n.xiaohei-portal__traveler-blink { opacity: 0; }\n\n#dsh-theme-xiaohei\\/portal-layer[data-running='true'] .xiaohei-portal__void--entry {\n  animation: xiaohei-portal-entry 2.6s cubic-bezier(0.4, 0, 0.2, 1) both;\n}\n\n#dsh-theme-xiaohei\\/portal-layer[data-running='true'] .xiaohei-portal__void--exit {\n  animation: xiaohei-portal-exit 2.6s cubic-bezier(0.4, 0, 0.2, 1) both;\n}\n\n#dsh-theme-xiaohei\\/portal-layer[data-running='true'] .xiaohei-portal__traveler {\n  animation: xiaohei-portal-traveler 2.6s cubic-bezier(0.45, 0, 0.25, 1) both;\n}\n\n#dsh-theme-xiaohei\\/portal-layer[data-running='true'] .xiaohei-portal__traveler-open {\n  animation: xiaohei-portal-eyes-open 2.6s step-end both;\n}\n\n#dsh-theme-xiaohei\\/portal-layer[data-running='true'] .xiaohei-portal__traveler-blink {\n  animation: xiaohei-portal-eyes-blink 2.6s step-end both;\n}\n\n@keyframes xiaohei-portal-entry {\n  0% { transform: translate3d(-50%, -50%, 0) rotate(var(--portal-entry-angle)) scale3d(0.04, 0.12, 1); opacity: 0; }\n  10%, 55% { transform: translate3d(-50%, -50%, 0) rotate(var(--portal-entry-angle)) scale3d(1, 1, 1); opacity: 0.96; }\n  68%, 100% { transform: translate3d(-50%, -50%, 0) rotate(var(--portal-entry-angle)) scale3d(0.04, 0.12, 1); opacity: 0; }\n}\n\n@keyframes xiaohei-portal-exit {\n  0%, 40% { transform: translate3d(-50%, -50%, 0) rotate(var(--portal-exit-angle)) scale3d(0.04, 0.12, 1); opacity: 0; }\n  51%, 86% { transform: translate3d(-50%, -50%, 0) rotate(var(--portal-exit-angle)) scale3d(1, 1, 1); opacity: 0.96; }\n  100% { transform: translate3d(-50%, -50%, 0) rotate(var(--portal-exit-angle)) scale3d(0.04, 0.12, 1); opacity: 0; }\n}\n\n@keyframes xiaohei-portal-traveler {\n  0% { transform: translate3d(-5rem, -50%, 0) scale(0.88); opacity: 0; }\n  9% { transform: translate3d(-4rem, -50%, 0) scale(0.92); opacity: 0.82; }\n  29% { transform: translate3d(-1rem, -50%, 0) scale(0.92); opacity: 1; }\n  43% { transform: translate3d(0, -50%, 0) scale(0.12); opacity: 0; }\n  50% { transform: translate3d(var(--portal-travel-x), var(--portal-travel-y), 0) scale(0.12); opacity: 0; }\n  59% { transform: translate3d(var(--portal-travel-x), var(--portal-travel-y), 0) scale(0.16); opacity: 0; }\n  70% { transform: translate3d(calc(var(--portal-travel-x) + var(--portal-emerge-near)), var(--portal-travel-y), 0) scale(0.94); opacity: 1; }\n  90% { transform: translate3d(calc(var(--portal-travel-x) + var(--portal-emerge-far)), var(--portal-travel-y), 0) scale(0.92); opacity: 0.9; }\n  100% { transform: translate3d(calc(var(--portal-travel-x) + var(--portal-emerge-end)), var(--portal-travel-y), 0) scale(0.9); opacity: 0; }\n}\n\n@keyframes xiaohei-portal-eyes-open {\n  0%, 20.9% { opacity: 1; transform: translate3d(0, 0, 0); }\n  21%, 23.5% { opacity: 0; transform: translate3d(0, 0, 0); }\n  23.6%, 75.9% { opacity: 1; transform: translate3d(0, 0, 0); }\n  76%, 78.5% { opacity: 0; transform: translate3d(0, 0, 0); }\n  78.6%, 100% { opacity: 1; transform: translate3d(0, 0, 0); }\n}\n\n@keyframes xiaohei-portal-eyes-blink {\n  0%, 20.9% { opacity: 0; transform: translate3d(0, 0, 0); }\n  21%, 23.5% { opacity: 1; transform: translate3d(0, 0, 0); }\n  23.6%, 75.9% { opacity: 0; transform: translate3d(0, 0, 0); }\n  76%, 78.5% { opacity: 1; transform: translate3d(0, 0, 0); }\n  78.6%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }\n}\n\nhtml[data-xiaohei-appearance='light'] .xiaohei-portal__void {\n  box-shadow:\n    inset 0 0 0.7rem rgb(0 0 0 / 94%),\n    0 0 0.75rem rgb(47 125 108 / 22%);\n}\n\nhtml[data-xiaohei-appearance='light'] .xiaohei-portal__traveler {\n  filter:\n    drop-shadow(0 0.25rem 0.4rem rgb(48 96 81 / 16%))\n    drop-shadow(0 0.55rem 0.8rem rgb(43 61 54 / 12%));\n}\n\nhtml[data-xiaohei-appearance='light'] .xiaohei-portal__traveler > img {\n  filter: brightness(1.01) contrast(1.06) saturate(0.76);\n}\n\n@media (max-width: 768px) {\n  #dsh-theme-xiaohei\\/portal-layer { display: none; }\n}\n\n@media (prefers-reduced-motion: reduce), (forced-colors: active), print {\n  #dsh-theme-xiaohei\\/portal-layer { display: none; }\n}\n";
+export declare const XIAOHEI_PORTAL_CSS = "\n#dsh-theme-xiaohei\\/portal-layer {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  overflow: hidden;\n  contain: strict;\n  pointer-events: none;\n  user-select: none;\n}\n\n#dsh-theme-xiaohei\\/portal-layer > * {\n  position: absolute;\n  display: block;\n  pointer-events: none;\n}\n\n.xiaohei-portal__void {\n  width: clamp(2.8rem, 3.6vw, 4rem);\n  aspect-ratio: 0.76;\n  border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;\n  opacity: 0;\n  background:\n    radial-gradient(ellipse at 46% 48%, #010304 0%, #020609 58%, #092027 72%, rgb(66 188 170 / 36%) 78%, transparent 82%);\n  box-shadow:\n    inset 0 0 0.7rem rgb(0 0 0 / 92%),\n    0 0 0.85rem rgb(78 214 191 / 18%);\n  will-change: transform, opacity;\n}\n\n.xiaohei-portal__void::after {\n  position: absolute;\n  inset: 13% 18%;\n  display: block;\n  content: '';\n  border-radius: inherit;\n  background: #000102;\n  box-shadow: inset 0.18rem 0 0.45rem rgb(16 56 64 / 42%);\n}\n\n.xiaohei-portal__void--entry {\n  left: var(--portal-entry-x);\n  top: var(--portal-entry-y);\n  transform: translate3d(-50%, -50%, 0) rotate(var(--portal-entry-angle)) scale3d(0.04, 0.12, 1);\n}\n\n.xiaohei-portal__void--exit {\n  left: var(--portal-exit-x);\n  top: var(--portal-exit-y);\n  transform: translate3d(-50%, -50%, 0) rotate(var(--portal-exit-angle)) scale3d(0.04, 0.12, 1);\n}\n\n.xiaohei-portal__traveler {\n  left: var(--portal-entry-x);\n  top: var(--portal-entry-y);\n  z-index: 1;\n  width: clamp(2.7rem, 3.4vw, 3.7rem);\n  aspect-ratio: 1;\n  opacity: 0;\n  transform: translate3d(-5rem, -50%, 0) scale(0.9);\n  filter:\n    drop-shadow(0 0.25rem 0.45rem rgb(90 221 199 / 20%))\n    drop-shadow(0 0.58rem 0.9rem rgb(1 9 10 / 22%));\n  will-change: transform, opacity;\n}\n\n.xiaohei-portal__traveler > img {\n  position: absolute;\n  inset: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n  max-width: none;\n  max-height: none;\n  object-fit: contain;\n  filter: brightness(1.1) contrast(1.05) saturate(0.82);\n}\n\n.xiaohei-portal__traveler-blink { opacity: 0; }\n\n#dsh-theme-xiaohei\\/portal-layer[data-running='true'] .xiaohei-portal__void--entry {\n  animation: xiaohei-portal-entry 2.6s cubic-bezier(0.4, 0, 0.2, 1) both;\n}\n\n#dsh-theme-xiaohei\\/portal-layer[data-running='true'] .xiaohei-portal__void--exit {\n  animation: xiaohei-portal-exit 2.6s cubic-bezier(0.4, 0, 0.2, 1) both;\n}\n\n#dsh-theme-xiaohei\\/portal-layer[data-running='true'] .xiaohei-portal__traveler {\n  animation: xiaohei-portal-traveler 2.6s cubic-bezier(0.45, 0, 0.25, 1) both;\n}\n\n#dsh-theme-xiaohei\\/portal-layer[data-running='true'] .xiaohei-portal__traveler-open {\n  animation: xiaohei-portal-eyes-open 2.6s step-end both;\n}\n\n#dsh-theme-xiaohei\\/portal-layer[data-running='true'] .xiaohei-portal__traveler-blink {\n  animation: xiaohei-portal-eyes-blink 2.6s step-end both;\n}\n\n@keyframes xiaohei-portal-entry {\n  0% { transform: translate3d(-50%, -50%, 0) rotate(var(--portal-entry-angle)) scale3d(0.04, 0.12, 1); opacity: 0; }\n  10%, 55% { transform: translate3d(-50%, -50%, 0) rotate(var(--portal-entry-angle)) scale3d(1, 1, 1); opacity: 0.96; }\n  68%, 100% { transform: translate3d(-50%, -50%, 0) rotate(var(--portal-entry-angle)) scale3d(0.04, 0.12, 1); opacity: 0; }\n}\n\n@keyframes xiaohei-portal-exit {\n  0%, 40% { transform: translate3d(-50%, -50%, 0) rotate(var(--portal-exit-angle)) scale3d(0.04, 0.12, 1); opacity: 0; }\n  51%, 86% { transform: translate3d(-50%, -50%, 0) rotate(var(--portal-exit-angle)) scale3d(1, 1, 1); opacity: 0.96; }\n  100% { transform: translate3d(-50%, -50%, 0) rotate(var(--portal-exit-angle)) scale3d(0.04, 0.12, 1); opacity: 0; }\n}\n\n@keyframes xiaohei-portal-traveler {\n  0% { transform: translate3d(-5rem, -50%, 0) scale(0.88); opacity: 0; }\n  9% { transform: translate3d(-4rem, -50%, 0) scale(0.92); opacity: 0.82; }\n  29% { transform: translate3d(-1rem, -50%, 0) scale(0.92); opacity: 1; }\n  43% { transform: translate3d(0, -50%, 0) scale(0.12); opacity: 0; }\n  50% { transform: translate3d(var(--portal-travel-x), var(--portal-travel-y), 0) scale(0.12); opacity: 0; }\n  59% { transform: translate3d(var(--portal-travel-x), var(--portal-travel-y), 0) scale(0.16); opacity: 0; }\n  70% { transform: translate3d(calc(var(--portal-travel-x) + var(--portal-emerge-near)), var(--portal-travel-y), 0) scale(0.94); opacity: 1; }\n  90% { transform: translate3d(calc(var(--portal-travel-x) + var(--portal-emerge-far)), var(--portal-travel-y), 0) scale(0.92); opacity: 0.9; }\n  100% { transform: translate3d(calc(var(--portal-travel-x) + var(--portal-emerge-end)), var(--portal-travel-y), 0) scale(0.9); opacity: 0; }\n}\n\n@keyframes xiaohei-portal-eyes-open {\n  0%, 20.9% { opacity: 1; transform: translate3d(0, 0, 0); }\n  21%, 23.5% { opacity: 0; transform: translate3d(0, 0, 0); }\n  23.6%, 75.9% { opacity: 1; transform: translate3d(0, 0, 0); }\n  76%, 78.5% { opacity: 0; transform: translate3d(0, 0, 0); }\n  78.6%, 100% { opacity: 1; transform: translate3d(0, 0, 0); }\n}\n\n@keyframes xiaohei-portal-eyes-blink {\n  0%, 20.9% { opacity: 0; transform: translate3d(0, 0, 0); }\n  21%, 23.5% { opacity: 1; transform: translate3d(0, 0, 0); }\n  23.6%, 75.9% { opacity: 0; transform: translate3d(0, 0, 0); }\n  76%, 78.5% { opacity: 1; transform: translate3d(0, 0, 0); }\n  78.6%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }\n}\n\nhtml[data-xiaohei-appearance='light'] .xiaohei-portal__void {\n  box-shadow:\n    inset 0 0 0.7rem rgb(0 0 0 / 94%),\n    0 0 0.75rem rgb(47 125 108 / 22%);\n}\n\nhtml[data-xiaohei-appearance='light'] .xiaohei-portal__traveler {\n  filter:\n    drop-shadow(0 0.25rem 0.4rem rgb(48 96 81 / 16%))\n    drop-shadow(0 0.55rem 0.8rem rgb(43 61 54 / 12%));\n}\n\nhtml[data-xiaohei-appearance='light'] .xiaohei-portal__traveler > img {\n  filter: brightness(1.01) contrast(1.06) saturate(0.76);\n}\n\n@media (max-width: 768px) {\n  #dsh-theme-xiaohei\\/portal-layer { display: none; }\n}\n\n@media (prefers-reduced-motion: reduce), (forced-colors: active), print {\n  #dsh-theme-xiaohei\\/portal-layer { display: none; }\n}\n";
 //# sourceMappingURL=portal.d.ts.map

package/lib/chrome/portal.js

@@ -6,7 +6,7 @@ export const XIAOHEI_PORTAL_CSS = `
 #dsh-theme-xiaohei\\/portal-layer {
   position: absolute;
   inset: 0;
-  z-index: 0;
+  z-index: 2;
   overflow: hidden;
   contain: strict;
   pointer-events: none;

package/lib/chrome/sidebar.d.ts

@@ -1,3 +1,3 @@
 /** One glass surface over DSH's native sidebar geometry and controls. */
-export declare const XIAOHEI_SIDEBAR_CSS = "\n/* The layout column and SidebarRoot both consume the native sidebar fill.\n * The theme token makes those surfaces transparent; this stable slot\n * relationship removes the layout column's remaining straight divider. */\n#root :has(> [data-slot='sidebar']) {\n  background: transparent !important;\n  border-right-color: transparent !important;\n}\n\n#root [data-slot='sidebar'] {\n  position: relative;\n}\n\n/* The host shell remains paint- and filter-free because Settings is a fixed\n * descendant. The glass itself lives outside #root in the scene layer. */\n#root [data-slot='sidebar'] > div {\n  position: relative;\n  background: transparent !important;\n  border-right: 0;\n  box-shadow: none;\n}\n\n#dsh-theme-xiaohei\\/sidebar-glass {\n  position: absolute;\n  box-sizing: border-box;\n  left: var(--xiaohei-sidebar-glass-left, 7px);\n  top: var(--xiaohei-sidebar-glass-top, 8px);\n  width: var(--xiaohei-sidebar-glass-width, 0px);\n  height: var(--xiaohei-sidebar-glass-height, 0px);\n  pointer-events: none;\n  overflow: hidden;\n  border: 1px solid var(--xiaohei-sidebar-glass-edge);\n  border-radius: var(--xiaohei-radius-panel);\n  background:\n    radial-gradient(96% 16% at 14% 0%, var(--xiaohei-sidebar-glass-highlight), transparent 64%),\n    linear-gradient(\n      90deg,\n      var(--xiaohei-sidebar-glass-refraction),\n      transparent 6%,\n      transparent 95%,\n      var(--xiaohei-sidebar-glass-inner-edge)\n    ),\n    linear-gradient(\n      180deg,\n      var(--xiaohei-sidebar-glass-refraction),\n      transparent 9%,\n      transparent 88%,\n      var(--xiaohei-sidebar-glass-inner-edge)\n    ),\n    var(--xiaohei-sidebar-glass-fill);\n  box-shadow:\n    0 0 0 1px var(--xiaohei-sidebar-glass-outline),\n    inset 0 1px 0 var(--xiaohei-sidebar-glass-highlight),\n    inset 1px 0 0 var(--xiaohei-sidebar-glass-refraction),\n    inset -1px 0 0 var(--xiaohei-sidebar-glass-inner-edge),\n    inset 0 -1px 0 var(--xiaohei-sidebar-glass-inner-edge),\n    0 1px 1px rgb(255 255 255 / 4%),\n    10px 0 30px -22px var(--xiaohei-sidebar-shadow),\n    0 24px 52px -30px var(--xiaohei-sidebar-shadow);\n  -webkit-backdrop-filter:\n    blur(28px)\n    saturate(var(--xiaohei-sidebar-glass-saturation))\n    brightness(var(--xiaohei-sidebar-glass-brightness));\n  backdrop-filter:\n    blur(28px)\n    saturate(var(--xiaohei-sidebar-glass-saturation))\n    brightness(var(--xiaohei-sidebar-glass-brightness));\n}\n\n/* Specular light and the inner lens rim are independent from the tint. This\n * keeps the surface recognisably glass without reducing control contrast. */\n#dsh-theme-xiaohei\\/sidebar-glass::before,\n#dsh-theme-xiaohei\\/sidebar-glass::after {\n  content: '';\n  position: absolute;\n  pointer-events: none;\n}\n\n#dsh-theme-xiaohei\\/sidebar-glass::before {\n  inset: 0;\n  border-radius: inherit;\n  background:\n    linear-gradient(\n      112deg,\n      var(--xiaohei-sidebar-glass-specular),\n      transparent 14%,\n      transparent 78%,\n      var(--xiaohei-sidebar-glass-refraction)\n    );\n  opacity: .72;\n  -webkit-mask-image: linear-gradient(180deg, black, rgb(0 0 0 / 18%) 26%, transparent 58%);\n  mask-image: linear-gradient(180deg, black, rgb(0 0 0 / 18%) 26%, transparent 58%);\n}\n\n#dsh-theme-xiaohei\\/sidebar-glass::after {\n  inset: 1px;\n  border-radius: calc(var(--xiaohei-radius-panel) - 1px);\n  box-shadow:\n    inset 0 0 0 1px var(--xiaohei-sidebar-glass-refraction),\n    inset 0 18px 24px -28px var(--xiaohei-sidebar-glass-highlight),\n    inset 0 -20px 30px -30px var(--xiaohei-sidebar-shadow);\n}\n\n/* Generated ink-space artwork supplies the complex Xiaohei identity. It is a\n * paint-only layer inside the glass and never participates in host layout. */\n#dsh-theme-xiaohei\\/sidebar-glass > .xiaohei-sidebar-atmosphere {\n  position: absolute;\n  z-index: 0;\n  inset: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: left bottom;\n  pointer-events: none;\n  user-select: none;\n  opacity: var(--xiaohei-sidebar-atmosphere-opacity);\n  mix-blend-mode: screen;\n}\n\nhtml[data-xiaohei-appearance='light']\n  #dsh-theme-xiaohei\\/sidebar-glass > .xiaohei-sidebar-atmosphere {\n  mix-blend-mode: multiply;\n}\n\n/* Header toggle and the primary action keep the host's dimensions. */\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > div:first-child button:last-child,\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {\n  color: var(--xiaohei-sidebar-icon);\n  transition:\n    color var(--xiaohei-motion-fast) ease,\n    background-color var(--xiaohei-motion-base) ease,\n    border-color var(--xiaohei-motion-base) ease;\n}\n\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > div:first-child button:last-child:hover {\n  color: var(--xiaohei-sidebar-emphasis);\n  background: var(--xiaohei-sidebar-hover);\n}\n\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n  border-color: transparent;\n  background: transparent !important;\n  box-shadow: none;\n  justify-content: flex-start;\n  gap: 8px;\n  padding-inline: 12px;\n  text-align: start;\n}\n\n/* One quiet horizontal ink stroke replaces the generic button card. The\n * brush is paint-only; the native button, label and focus target stay intact. */\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD']::before,\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session']::before {\n  content: '';\n  position: absolute;\n  z-index: -1;\n  inset: 3px 7px 3px 5px;\n  border-radius: 42% 9% 37% 12% / 28% 46% 36% 58%;\n  background: linear-gradient(\n    94deg,\n    transparent 0%,\n    var(--xiaohei-sidebar-brush-ink) 5%,\n    var(--xiaohei-sidebar-brush-ink) 72%,\n    transparent 100%\n  );\n  -webkit-mask-image:\n    radial-gradient(ellipse 12px 70% at 5% 48%, black 44%, transparent 76%),\n    linear-gradient(90deg, black 5%, black 76%, transparent 100%);\n  mask-image:\n    radial-gradient(ellipse 12px 70% at 5% 48%, black 44%, transparent 76%),\n    linear-gradient(90deg, black 5%, black 76%, transparent 100%);\n  -webkit-mask-composite: source-over;\n  mask-composite: add;\n  opacity: .9;\n  transform: scaleX(.985);\n  transform-origin: left center;\n  transition:\n    background-color var(--xiaohei-motion-base) ease,\n    opacity var(--xiaohei-motion-fast) ease,\n    transform var(--xiaohei-motion-base) var(--xiaohei-motion-curve);\n}\n\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD']:hover,\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session']:hover {\n  color: var(--xiaohei-sidebar-emphasis);\n  border-color: transparent;\n  background: transparent !important;\n}\n\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD']:hover::before,\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session']:hover::before {\n  background: linear-gradient(\n    94deg,\n    transparent 0%,\n    var(--xiaohei-sidebar-brush-ink-hover) 5%,\n    var(--xiaohei-sidebar-brush-ink-hover) 72%,\n    transparent 100%\n  );\n  opacity: 1;\n  transform: scaleX(1);\n}\n\n/* Footer occupants keep their native layout. Only their interaction surface\n * is shaded, avoiding a second card inside the sidebar glass. */\n#root [data-slot='sidebar'] > div:not([class*='_collapsed'])\n  > :has(> div > [data-slot='sidebar.footer.action']) {\n  box-sizing: border-box;\n  gap: 2px;\n  margin: 8px 2px 4px;\n  padding: 4px;\n  border: 1px solid var(--xiaohei-sidebar-control-edge);\n  border-radius: calc(var(--xiaohei-radius-control) + 2px);\n  background: color-mix(in srgb, var(--xiaohei-sidebar-control) 76%, transparent);\n  box-shadow: inset 0 1px 0 var(--xiaohei-sidebar-control-highlight);\n}\n\n#root [data-slot='sidebar.footer.action'] > button,\n#root [data-slot='sidebar.settings'] > button {\n  color: var(--dsw-alias-label-secondary);\n  border-radius: var(--xiaohei-radius-small) !important;\n  transition:\n    color var(--xiaohei-motion-fast) ease,\n    background-color var(--xiaohei-motion-fast) ease,\n    transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);\n}\n\n#root [data-slot='sidebar.footer.action'] > button:hover,\n#root [data-slot='sidebar.settings'] > button:hover,\n#root [data-slot='sidebar.footer.action'] > button[aria-expanded='true'],\n#root [data-slot='sidebar.settings'] > button[aria-expanded='true'] {\n  color: var(--xiaohei-sidebar-emphasis);\n  background: var(--xiaohei-sidebar-hover);\n}\n\n#root [data-slot='sidebar.footer.action'] > button:active,\n#root [data-slot='sidebar.settings'] > button:active {\n  transform: translateY(1px);\n}\n\n#root [data-slot='sidebar'] button:focus-visible {\n  outline: 2px solid var(--xiaohei-sidebar-emphasis);\n  outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  #root [data-slot='sidebar'] button {\n    transition-duration: 0ms !important;\n  }\n\n  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD']::before,\n  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session']::before {\n    transition-duration: 0ms !important;\n  }\n}\n\n@media (prefers-reduced-transparency: reduce) {\n  #dsh-theme-xiaohei\\/sidebar-glass {\n    background: var(--xiaohei-sidebar-glass-solid);\n    -webkit-backdrop-filter: none;\n    backdrop-filter: none;\n  }\n\n  #dsh-theme-xiaohei\\/sidebar-glass > .xiaohei-sidebar-atmosphere {\n    opacity: var(--xiaohei-sidebar-atmosphere-solid-opacity);\n  }\n}\n\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n  #dsh-theme-xiaohei\\/sidebar-glass {\n    background: var(--xiaohei-sidebar-glass-solid);\n  }\n}\n\n@media (forced-colors: active) {\n  #dsh-theme-xiaohei\\/sidebar-glass {\n    border-color: CanvasText;\n    background: Canvas;\n    box-shadow: none;\n    -webkit-backdrop-filter: none;\n    backdrop-filter: none;\n  }\n\n  #dsh-theme-xiaohei\\/sidebar-glass > .xiaohei-sidebar-atmosphere {\n    display: none;\n  }\n\n  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],\n  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {\n    border-color: ButtonText;\n  }\n\n  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD']::before,\n  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session']::before {\n    display: none;\n  }\n}\n";
+export declare const XIAOHEI_SIDEBAR_CSS = "\n/* The layout column and SidebarRoot both consume the native sidebar fill.\n * The theme token makes those surfaces transparent; this stable slot\n * relationship removes the layout column's remaining straight divider. */\n#root :has(> [data-slot='sidebar']) {\n  background: transparent !important;\n  border-right-color: transparent !important;\n}\n\n#root [data-slot='sidebar'] {\n  position: relative;\n}\n\n/* Reveal wide navigation only after its column has reached the target width.\n * Keep the toggle itself native. Opacity is applied to content, never the shell\n * (which also hosts fixed-position settings dialogs). */\n@media (prefers-reduced-motion: no-preference) {\n  #root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal]:not([class*='_collapsed']) > :not(:first-child),\n  #root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal]:not([class*='_collapsed']) > div:first-child > button:first-child {\n    transition: opacity 100ms ease-out;\n  }\n  #root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal='waiting']:not([class*='_collapsed']) > :not(:first-child),\n  #root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal='waiting']:not([class*='_collapsed']) > div:first-child > button:first-child {\n    opacity: 0 !important;\n    visibility: hidden;\n    transition: none;\n  }\n}\n\n/* Hide the tree scrollbar's paint, retaining its gutter so rows do not grow\n * into the glass edge. Wheel, touch and keyboard remain native; dialogs and\n * other plugin panels keep their normal scrollbar affordance. */\n#root [data-slot='sidebar.workspaces'] [role='tree'] {\n  scrollbar-color: transparent transparent !important;\n}\n\n#root [data-slot='sidebar.workspaces'] [role='tree']::-webkit-scrollbar,\n#root [data-slot='sidebar.workspaces'] [role='tree']::-webkit-scrollbar-thumb,\n#root [data-slot='sidebar.workspaces'] [role='tree']::-webkit-scrollbar-track {\n  background: transparent !important;\n  border-color: transparent !important;\n  box-shadow: none !important;\n}\n\n/* The host shell remains paint- and filter-free because Settings is a fixed\n * descendant. The glass itself lives outside #root in the scene layer. */\n#root [data-slot='sidebar'] > div {\n  --dsh-sidebar-inline-padding: 18px;\n  position: relative;\n  background: transparent !important;\n  border-right: 0;\n  box-shadow: none;\n}\n\n#dsh-theme-xiaohei\\/sidebar-glass {\n  position: absolute;\n  box-sizing: border-box;\n  left: var(--xiaohei-sidebar-glass-left, 7px);\n  top: var(--xiaohei-sidebar-glass-top, 8px);\n  width: var(--xiaohei-sidebar-glass-width, 0px);\n  height: var(--xiaohei-sidebar-glass-height, 0px);\n  pointer-events: none;\n  overflow: hidden;\n  border: 1px solid var(--xiaohei-sidebar-glass-edge);\n  border-radius: var(--xiaohei-sidebar-glass-radius);\n  background: var(--xiaohei-sidebar-glass-fill);\n  box-shadow:\n    inset 0 1px var(--xiaohei-sidebar-glass-highlight),\n    inset 1px 0 var(--xiaohei-sidebar-glass-refraction),\n    0 18px 50px -32px var(--xiaohei-sidebar-shadow);\n  -webkit-backdrop-filter:\n    blur(var(--xiaohei-sidebar-glass-blur))\n    saturate(var(--xiaohei-sidebar-glass-saturation));\n  backdrop-filter:\n    blur(var(--xiaohei-sidebar-glass-blur))\n    saturate(var(--xiaohei-sidebar-glass-saturation));\n}\n\n/* Width dragging changes the full-height glass raster every frame. Suspend\n * only the filters while geometry is moving; the translucent surface remains\n * visible and the settled glass returns after the resize gesture ends. */\nhtml[data-xiaohei-sidebar-resizing] #dsh-theme-xiaohei\\/sidebar-glass {\n  -webkit-backdrop-filter: none;\n  backdrop-filter: none;\n}\n\n/* One restrained inner rim completes the glass edge without tinting content. */\n#dsh-theme-xiaohei\\/sidebar-glass::after {\n  content: '';\n  position: absolute;\n  pointer-events: none;\n  inset: 1px;\n  border-radius: calc(var(--xiaohei-sidebar-glass-radius) - 1px);\n  box-shadow:\n    inset 0 1px var(--xiaohei-sidebar-glass-refraction),\n    inset 0 -20px 28px -32px var(--xiaohei-sidebar-shadow-soft);\n}\n\n/* The official brand slot owns geometry in both the wide sidebar and rail.\n * The bitmap remains visible as a no-WebGL fallback while the compact\n * MetallicPaint canvas adds a restrained liquid-metal pass above it. */\n.xiaohei-brand-mark {\n  position: relative;\n  display: inline-grid;\n  flex: none;\n  place-items: center;\n  width: var(--xiaohei-brand-mark-size);\n  height: var(--xiaohei-brand-mark-size);\n  margin: -2px;\n  overflow: visible;\n  pointer-events: none;\n  filter: drop-shadow(0 2px 3px rgb(8 13 15 / 18%));\n  transform: translateY(-1px);\n}\n\n.xiaohei-brand-mark__fallback,\n.xiaohei-brand-mark__metal {\n  position: absolute;\n  inset: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n.xiaohei-brand-mark__fallback {\n  opacity: .94;\n  transition: opacity var(--xiaohei-motion-base) ease;\n}\n\n.xiaohei-brand-mark__metal {\n  opacity: 0;\n  transition:\n    opacity var(--xiaohei-motion-base) ease,\n    filter var(--xiaohei-motion-base) ease;\n}\n\n.xiaohei-brand-mark[data-metallic-ready='true'] .xiaohei-brand-mark__fallback {\n  opacity: .28;\n}\n\n.xiaohei-brand-mark[data-metallic-ready='true'] .xiaohei-brand-mark__metal {\n  opacity: .92;\n}\n\n.xiaohei-brand-name {\n  white-space: nowrap;\n  letter-spacing: .025em;\n  font-size: 17px;\n  font-weight: 600;\n}\n\n/* ui-conversation currently exposes the Hero mark but not its headline as a\n * slot. Anchor the visual copy to that official mark occupant so hashed Host\n * class names and unrelated headings remain untouched. */\n#root span:has(> .xiaohei-brand-mark[data-brand-context='hero']) + span {\n  font-size: 0;\n}\n\n#root span:has(> .xiaohei-brand-mark[data-brand-context='hero']) + span::after {\n  content: '\u4E07\u7269\u6709\u7075\uFF0C\u81EA\u5728\u540C\u884C';\n  font-size: 26px;\n  font-weight: 500;\n  line-height: 32px;\n}\n\n#root [data-slot='sidebar'] button:hover .xiaohei-brand-mark__metal {\n  filter: brightness(1.12) contrast(1.04);\n}\n\n/* Keep native rail/wide geometry and one consistent control material. */\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > div:first-child button:last-child,\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {\n  color: var(--xiaohei-sidebar-emphasis);\n  transition:\n    background-color var(--xiaohei-motion-fast) ease,\n    border-color var(--xiaohei-motion-fast) ease,\n    transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);\n}\n\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > div:first-child button:last-child:hover {\n  background: var(--xiaohei-sidebar-hover);\n}\n\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {\n  border: 1px solid var(--xiaohei-sidebar-control-edge);\n  border-radius: var(--xiaohei-radius-control);\n  background: var(--xiaohei-sidebar-control);\n  box-shadow: inset 0 1px var(--xiaohei-sidebar-control-highlight);\n  justify-content: flex-start;\n  gap: 8px;\n  padding-inline: 12px;\n  text-align: start;\n}\n\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD']:hover,\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session']:hover {\n  border-color: var(--xiaohei-sidebar-control-edge-hover);\n  background: var(--xiaohei-sidebar-hover);\n}\n\n/* The footer uses a divider instead of another framed card. */\n#root [data-slot='sidebar'] > div:not([class*='_collapsed'])\n  > :has(> div > [data-slot='sidebar.footer.action']) {\n  box-sizing: border-box;\n  gap: 2px;\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--xiaohei-sidebar-control-edge);\n}\n\n#root [data-slot='sidebar.footer.action'] > button,\n#root [data-slot='sidebar.settings'] > button {\n  color: var(--dsw-alias-label-secondary);\n  border-radius: var(--xiaohei-radius-small) !important;\n  transition:\n    color var(--xiaohei-motion-fast) ease,\n    background-color var(--xiaohei-motion-fast) ease,\n    transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);\n}\n\n#root [data-slot='sidebar.footer.action'] > button:hover,\n#root [data-slot='sidebar.settings'] > button:hover,\n#root [data-slot='sidebar.footer.action'] > button[aria-expanded='true'],\n#root [data-slot='sidebar.settings'] > button[aria-expanded='true'] {\n  color: var(--xiaohei-sidebar-emphasis);\n  background: var(--xiaohei-sidebar-hover);\n}\n\n#root [data-slot='sidebar.footer.action'] > button:active,\n#root [data-slot='sidebar.settings'] > button:active {\n  transform: translateY(1px);\n}\n\n#root [data-slot='sidebar'] button:focus-visible {\n  outline: 2px solid var(--xiaohei-sidebar-emphasis);\n  outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  #root [data-slot='sidebar'] button {\n    transition-duration: 0ms !important;\n  }\n\n\n  .xiaohei-brand-mark__fallback,\n  .xiaohei-brand-mark__metal {\n    transition-duration: 0ms !important;\n  }\n}\n\n@media (prefers-reduced-transparency: reduce) {\n  #dsh-theme-xiaohei\\/sidebar-glass {\n    background: var(--xiaohei-sidebar-glass-solid);\n    -webkit-backdrop-filter: none;\n    backdrop-filter: none;\n  }\n\n}\n\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n  #dsh-theme-xiaohei\\/sidebar-glass {\n    background: var(--xiaohei-sidebar-glass-solid);\n  }\n}\n\n@media (forced-colors: active) {\n  #dsh-theme-xiaohei\\/sidebar-glass {\n    border-color: CanvasText;\n    background: Canvas;\n    box-shadow: none;\n    -webkit-backdrop-filter: none;\n    backdrop-filter: none;\n  }\n\n  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],\n  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {\n    border-color: ButtonText;\n  }\n\n}\n";
 //# sourceMappingURL=sidebar.d.ts.map

package/lib/chrome/sidebar.js

@@ -12,9 +12,41 @@ export const XIAOHEI_SIDEBAR_CSS = `
   position: relative;
 }
 
+/* Reveal wide navigation only after its column has reached the target width.
+ * 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 {
+    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 {
+    opacity: 0 !important;
+    visibility: hidden;
+    transition: none;
+  }
+}
+
+/* Hide the tree scrollbar's paint, retaining its gutter so rows do not grow
+ * into the glass edge. Wheel, touch and keyboard remain native; dialogs and
+ * other plugin panels keep their normal scrollbar affordance. */
+#root [data-slot='sidebar.workspaces'] [role='tree'] {
+  scrollbar-color: transparent transparent !important;
+}
+
+#root [data-slot='sidebar.workspaces'] [role='tree']::-webkit-scrollbar,
+#root [data-slot='sidebar.workspaces'] [role='tree']::-webkit-scrollbar-thumb,
+#root [data-slot='sidebar.workspaces'] [role='tree']::-webkit-scrollbar-track {
+  background: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+
 /* The host shell remains paint- and filter-free because Settings is a fixed
  * descendant. The glass itself lives outside #root in the scene layer. */
 #root [data-slot='sidebar'] > div {
+  --dsh-sidebar-inline-padding: 18px;
   position: relative;
   background: transparent !important;
   border-right: 0;
@@ -31,194 +63,153 @@ export const XIAOHEI_SIDEBAR_CSS = `
   pointer-events: none;
   overflow: hidden;
   border: 1px solid var(--xiaohei-sidebar-glass-edge);
-  border-radius: var(--xiaohei-radius-panel);
-  background:
-    radial-gradient(96% 16% at 14% 0%, var(--xiaohei-sidebar-glass-highlight), transparent 64%),
-    linear-gradient(
-      90deg,
-      var(--xiaohei-sidebar-glass-refraction),
-      transparent 6%,
-      transparent 95%,
-      var(--xiaohei-sidebar-glass-inner-edge)
-    ),
-    linear-gradient(
-      180deg,
-      var(--xiaohei-sidebar-glass-refraction),
-      transparent 9%,
-      transparent 88%,
-      var(--xiaohei-sidebar-glass-inner-edge)
-    ),
-    var(--xiaohei-sidebar-glass-fill);
+  border-radius: var(--xiaohei-sidebar-glass-radius);
+  background: var(--xiaohei-sidebar-glass-fill);
   box-shadow:
-    0 0 0 1px var(--xiaohei-sidebar-glass-outline),
-    inset 0 1px 0 var(--xiaohei-sidebar-glass-highlight),
-    inset 1px 0 0 var(--xiaohei-sidebar-glass-refraction),
-    inset -1px 0 0 var(--xiaohei-sidebar-glass-inner-edge),
-    inset 0 -1px 0 var(--xiaohei-sidebar-glass-inner-edge),
-    0 1px 1px rgb(255 255 255 / 4%),
-    10px 0 30px -22px var(--xiaohei-sidebar-shadow),
-    0 24px 52px -30px var(--xiaohei-sidebar-shadow);
+    inset 0 1px var(--xiaohei-sidebar-glass-highlight),
+    inset 1px 0 var(--xiaohei-sidebar-glass-refraction),
+    0 18px 50px -32px var(--xiaohei-sidebar-shadow);
   -webkit-backdrop-filter:
-    blur(28px)
-    saturate(var(--xiaohei-sidebar-glass-saturation))
-    brightness(var(--xiaohei-sidebar-glass-brightness));
+    blur(var(--xiaohei-sidebar-glass-blur))
+    saturate(var(--xiaohei-sidebar-glass-saturation));
   backdrop-filter:
-    blur(28px)
-    saturate(var(--xiaohei-sidebar-glass-saturation))
-    brightness(var(--xiaohei-sidebar-glass-brightness));
+    blur(var(--xiaohei-sidebar-glass-blur))
+    saturate(var(--xiaohei-sidebar-glass-saturation));
+}
+
+/* Width dragging changes the full-height glass raster every frame. Suspend
+ * only the filters while geometry is moving; the translucent surface remains
+ * visible and the settled glass returns after the resize gesture ends. */
+html[data-xiaohei-sidebar-resizing] #dsh-theme-xiaohei\\/sidebar-glass {
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
 }
 
-/* Specular light and the inner lens rim are independent from the tint. This
- * keeps the surface recognisably glass without reducing control contrast. */
-#dsh-theme-xiaohei\\/sidebar-glass::before,
+/* One restrained inner rim completes the glass edge without tinting content. */
 #dsh-theme-xiaohei\\/sidebar-glass::after {
   content: '';
   position: absolute;
   pointer-events: none;
-}
-
-#dsh-theme-xiaohei\\/sidebar-glass::before {
-  inset: 0;
-  border-radius: inherit;
-  background:
-    linear-gradient(
-      112deg,
-      var(--xiaohei-sidebar-glass-specular),
-      transparent 14%,
-      transparent 78%,
-      var(--xiaohei-sidebar-glass-refraction)
-    );
-  opacity: .72;
-  -webkit-mask-image: linear-gradient(180deg, black, rgb(0 0 0 / 18%) 26%, transparent 58%);
-  mask-image: linear-gradient(180deg, black, rgb(0 0 0 / 18%) 26%, transparent 58%);
-}
-
-#dsh-theme-xiaohei\\/sidebar-glass::after {
   inset: 1px;
-  border-radius: calc(var(--xiaohei-radius-panel) - 1px);
+  border-radius: calc(var(--xiaohei-sidebar-glass-radius) - 1px);
   box-shadow:
-    inset 0 0 0 1px var(--xiaohei-sidebar-glass-refraction),
-    inset 0 18px 24px -28px var(--xiaohei-sidebar-glass-highlight),
-    inset 0 -20px 30px -30px var(--xiaohei-sidebar-shadow);
+    inset 0 1px var(--xiaohei-sidebar-glass-refraction),
+    inset 0 -20px 28px -32px var(--xiaohei-sidebar-shadow-soft);
+}
+
+/* The official brand slot owns geometry in both the wide sidebar and rail.
+ * The bitmap remains visible as a no-WebGL fallback while the compact
+ * MetallicPaint canvas adds a restrained liquid-metal pass above it. */
+.xiaohei-brand-mark {
+  position: relative;
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: var(--xiaohei-brand-mark-size);
+  height: var(--xiaohei-brand-mark-size);
+  margin: -2px;
+  overflow: visible;
+  pointer-events: none;
+  filter: drop-shadow(0 2px 3px rgb(8 13 15 / 18%));
+  transform: translateY(-1px);
 }
 
-/* Generated ink-space artwork supplies the complex Xiaohei identity. It is a
- * paint-only layer inside the glass and never participates in host layout. */
-#dsh-theme-xiaohei\\/sidebar-glass > .xiaohei-sidebar-atmosphere {
+.xiaohei-brand-mark__fallback,
+.xiaohei-brand-mark__metal {
   position: absolute;
-  z-index: 0;
   inset: 0;
   display: block;
   width: 100%;
   height: 100%;
-  object-fit: cover;
-  object-position: left bottom;
-  pointer-events: none;
-  user-select: none;
-  opacity: var(--xiaohei-sidebar-atmosphere-opacity);
-  mix-blend-mode: screen;
+  object-fit: contain;
+}
+
+.xiaohei-brand-mark__fallback {
+  opacity: .94;
+  transition: opacity var(--xiaohei-motion-base) ease;
 }
 
-html[data-xiaohei-appearance='light']
-  #dsh-theme-xiaohei\\/sidebar-glass > .xiaohei-sidebar-atmosphere {
-  mix-blend-mode: multiply;
+.xiaohei-brand-mark__metal {
+  opacity: 0;
+  transition:
+    opacity var(--xiaohei-motion-base) ease,
+    filter var(--xiaohei-motion-base) ease;
+}
+
+.xiaohei-brand-mark[data-metallic-ready='true'] .xiaohei-brand-mark__fallback {
+  opacity: .28;
+}
+
+.xiaohei-brand-mark[data-metallic-ready='true'] .xiaohei-brand-mark__metal {
+  opacity: .92;
+}
+
+.xiaohei-brand-name {
+  white-space: nowrap;
+  letter-spacing: .025em;
+  font-size: 17px;
+  font-weight: 600;
 }
 
-/* Header toggle and the primary action keep the host's dimensions. */
+/* ui-conversation currently exposes the Hero mark but not its headline as a
+ * slot. Anchor the visual copy to that official mark occupant so hashed Host
+ * class names and unrelated headings remain untouched. */
+#root span:has(> .xiaohei-brand-mark[data-brand-context='hero']) + span {
+  font-size: 0;
+}
+
+#root span:has(> .xiaohei-brand-mark[data-brand-context='hero']) + span::after {
+  content: '万物有灵，自在同行';
+  font-size: 26px;
+  font-weight: 500;
+  line-height: 32px;
+}
+
+#root [data-slot='sidebar'] button:hover .xiaohei-brand-mark__metal {
+  filter: brightness(1.12) contrast(1.04);
+}
+
+/* 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='新建会话'],
 #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {
-  color: var(--xiaohei-sidebar-icon);
+  color: var(--xiaohei-sidebar-emphasis);
   transition:
-    color var(--xiaohei-motion-fast) ease,
-    background-color var(--xiaohei-motion-base) ease,
-    border-color var(--xiaohei-motion-base) ease;
+    background-color var(--xiaohei-motion-fast) ease,
+    border-color var(--xiaohei-motion-fast) ease,
+    transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);
 }
 
 #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > div:first-child button:last-child:hover {
-  color: var(--xiaohei-sidebar-emphasis);
   background: var(--xiaohei-sidebar-hover);
 }
 
 #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='新建会话'],
 #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {
-  position: relative;
-  isolation: isolate;
-  overflow: hidden;
-  border-color: transparent;
-  background: transparent !important;
-  box-shadow: none;
+  border: 1px solid var(--xiaohei-sidebar-control-edge);
+  border-radius: var(--xiaohei-radius-control);
+  background: var(--xiaohei-sidebar-control);
+  box-shadow: inset 0 1px var(--xiaohei-sidebar-control-highlight);
   justify-content: flex-start;
   gap: 8px;
   padding-inline: 12px;
   text-align: start;
 }
 
-/* One quiet horizontal ink stroke replaces the generic button card. The
- * brush is paint-only; the native button, label and focus target stay intact. */
-#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='新建会话']::before,
-#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session']::before {
-  content: '';
-  position: absolute;
-  z-index: -1;
-  inset: 3px 7px 3px 5px;
-  border-radius: 42% 9% 37% 12% / 28% 46% 36% 58%;
-  background: linear-gradient(
-    94deg,
-    transparent 0%,
-    var(--xiaohei-sidebar-brush-ink) 5%,
-    var(--xiaohei-sidebar-brush-ink) 72%,
-    transparent 100%
-  );
-  -webkit-mask-image:
-    radial-gradient(ellipse 12px 70% at 5% 48%, black 44%, transparent 76%),
-    linear-gradient(90deg, black 5%, black 76%, transparent 100%);
-  mask-image:
-    radial-gradient(ellipse 12px 70% at 5% 48%, black 44%, transparent 76%),
-    linear-gradient(90deg, black 5%, black 76%, transparent 100%);
-  -webkit-mask-composite: source-over;
-  mask-composite: add;
-  opacity: .9;
-  transform: scaleX(.985);
-  transform-origin: left center;
-  transition:
-    background-color var(--xiaohei-motion-base) ease,
-    opacity var(--xiaohei-motion-fast) ease,
-    transform var(--xiaohei-motion-base) var(--xiaohei-motion-curve);
-}
-
 #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='新建会话']:hover,
 #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session']:hover {
-  color: var(--xiaohei-sidebar-emphasis);
-  border-color: transparent;
-  background: transparent !important;
-}
-
-#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='新建会话']:hover::before,
-#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session']:hover::before {
-  background: linear-gradient(
-    94deg,
-    transparent 0%,
-    var(--xiaohei-sidebar-brush-ink-hover) 5%,
-    var(--xiaohei-sidebar-brush-ink-hover) 72%,
-    transparent 100%
-  );
-  opacity: 1;
-  transform: scaleX(1);
+  border-color: var(--xiaohei-sidebar-control-edge-hover);
+  background: var(--xiaohei-sidebar-hover);
 }
 
-/* Footer occupants keep their native layout. Only their interaction surface
- * is shaded, avoiding a second card inside the sidebar glass. */
+/* The footer uses a divider instead of another framed card. */
 #root [data-slot='sidebar'] > div:not([class*='_collapsed'])
   > :has(> div > [data-slot='sidebar.footer.action']) {
   box-sizing: border-box;
   gap: 2px;
-  margin: 8px 2px 4px;
-  padding: 4px;
-  border: 1px solid var(--xiaohei-sidebar-control-edge);
-  border-radius: calc(var(--xiaohei-radius-control) + 2px);
-  background: color-mix(in srgb, var(--xiaohei-sidebar-control) 76%, transparent);
-  box-shadow: inset 0 1px 0 var(--xiaohei-sidebar-control-highlight);
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--xiaohei-sidebar-control-edge);
 }
 
 #root [data-slot='sidebar.footer.action'] > button,
@@ -254,8 +245,9 @@ html[data-xiaohei-appearance='light']
     transition-duration: 0ms !important;
   }
 
-  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='新建会话']::before,
-  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session']::before {
+
+  .xiaohei-brand-mark__fallback,
+  .xiaohei-brand-mark__metal {
     transition-duration: 0ms !important;
   }
 }
@@ -267,9 +259,6 @@ html[data-xiaohei-appearance='light']
     backdrop-filter: none;
   }
 
-  #dsh-theme-xiaohei\\/sidebar-glass > .xiaohei-sidebar-atmosphere {
-    opacity: var(--xiaohei-sidebar-atmosphere-solid-opacity);
-  }
 }
 
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
@@ -287,19 +276,11 @@ html[data-xiaohei-appearance='light']
     backdrop-filter: none;
   }
 
-  #dsh-theme-xiaohei\\/sidebar-glass > .xiaohei-sidebar-atmosphere {
-    display: none;
-  }
-
   #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='新建会话'],
   #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {
     border-color: ButtonText;
   }
 
-  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='新建会话']::before,
-  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session']::before {
-    display: none;
-  }
 }
 `;
 //# sourceMappingURL=sidebar.js.map

package/lib/chrome/tokens.d.ts

@@ -1,3 +1,3 @@
 /** Semantic Xiaohei identity tokens shared by every themed component layer. */
-export declare const XIAOHEI_CHROME_TOKENS_CSS = "\nhtml {\n  --xiaohei-ink: #0E1517;\n  --xiaohei-ink-soft: rgb(14 21 23 / 74%);\n  --xiaohei-spirit: #69B6BA;\n  --xiaohei-spirit-strong: #8ACED0;\n  --xiaohei-spirit-soft: rgb(105 182 186 / 12%);\n  --xiaohei-spirit-faint: rgb(105 182 186 / 6%);\n  --xiaohei-edge: rgb(124 189 192 / 15%);\n  --xiaohei-edge-strong: rgb(138 206 208 / 30%);\n  --xiaohei-surface: rgb(22 29 31 / 94%);\n  --xiaohei-surface-raised: rgb(29 37 39 / 97%);\n  --xiaohei-surface-muted: rgb(15 21 23 / 68%);\n  --xiaohei-sidebar-emphasis: #E1E6E7;\n  --xiaohei-sidebar-icon: rgb(220 227 229 / 70%);\n  --xiaohei-sidebar-hover: rgb(231 238 240 / 6.5%);\n  --xiaohei-sidebar-glass-fill: rgb(21 25 27 / 62%);\n  --xiaohei-sidebar-glass-solid: #1B2325;\n  --xiaohei-sidebar-glass-edge: rgb(238 247 249 / 18%);\n  --xiaohei-sidebar-glass-outline: rgb(0 0 0 / 30%);\n  --xiaohei-sidebar-glass-inner-edge: rgb(0 0 0 / 18%);\n  --xiaohei-sidebar-glass-highlight: rgb(255 255 255 / 16%);\n  --xiaohei-sidebar-glass-refraction: rgb(255 255 255 / 9%);\n  --xiaohei-sidebar-glass-specular: rgb(255 255 255 / 13%);\n  --xiaohei-sidebar-glass-saturation: 90%;\n  --xiaohei-sidebar-glass-brightness: 92%;\n  --xiaohei-sidebar-atmosphere-opacity: 0.36;\n  --xiaohei-sidebar-atmosphere-solid-opacity: 0.22;\n  --xiaohei-sidebar-control: rgb(231 238 240 / 4.5%);\n  --xiaohei-sidebar-control-edge: rgb(231 238 240 / 8%);\n  --xiaohei-sidebar-control-edge-hover: rgb(231 238 240 / 13%);\n  --xiaohei-sidebar-control-highlight: rgb(255 255 255 / 5%);\n  --xiaohei-sidebar-brush-ink: rgb(231 238 240 / 8%);\n  --xiaohei-sidebar-brush-ink-hover: rgb(231 238 240 / 13%);\n  --xiaohei-sidebar-shadow: rgb(0 0 0 / 24%);\n  --xiaohei-workspace-label: rgb(220 227 229 / 78%);\n  --xiaohei-space-frame-edge: rgb(231 238 240 / 8%);\n  --xiaohei-space-frame-highlight: rgb(255 255 255 / 4%);\n  --xiaohei-workspace-control-edge: rgb(231 238 240 / 8%);\n  --xiaohei-workspace-path: rgb(200 211 213 / 8%);\n  --xiaohei-workspace-path-active: rgb(105 182 186 / 20%);\n  --xiaohei-workspace-folder-open: rgb(105 182 186 / 7%);\n  --xiaohei-workspace-folder-edge: rgb(105 182 186 / 7%);\n  --xiaohei-workspace-folder-shadow: rgb(0 0 0 / 2.4%);\n  --xiaohei-workspace-row-hover: rgb(231 238 240 / 5.5%);\n  --xiaohei-workspace-row-active: rgb(231 238 240 / 7.5%);\n  --xiaohei-workspace-row-active-edge: rgb(231 238 240 / 5%);\n  --xiaohei-workspace-action-hover: rgb(231 238 240 / 7%);\n  --xiaohei-workspace-active-line: #69B6BA;\n  --xiaohei-workspace-active-line-glow: rgb(105 182 186 / 20%);\n  --xiaohei-workspace-rift-glow: rgb(105 182 186 / 12%);\n  --xiaohei-frame-line: rgb(138 206 208 / 21%);\n  --xiaohei-frame-line-strong: rgb(151 216 218 / 40%);\n  --xiaohei-frame-fill: rgb(15 21 23 / 54%);\n  --xiaohei-frame-fill-raised: rgb(24 32 34 / 78%);\n  --xiaohei-frame-inner: rgb(231 252 252 / 6%);\n  --xiaohei-frame-plaque: #182122;\n  --xiaohei-frame-label: #B9E5E7;\n  --xiaohei-frame-ink: #081011;\n  --xiaohei-layer-panel: rgb(20 27 29 / 76%);\n  --xiaohei-layer-panel-edge: rgb(124 189 192 / 12%);\n  --xiaohei-layer-panel-shadow: rgb(0 5 8 / 26%);\n  --xiaohei-conversation-text: #E0E6E4;\n  --xiaohei-conversation-meta: rgb(195 205 204 / 58%);\n  --xiaohei-conversation-user: rgb(117 158 154 / 13%);\n  --xiaohei-conversation-user-edge: rgb(143 177 173 / 12%);\n  --xiaohei-layer-content: rgb(27 35 37 / 92%);\n  --xiaohei-layer-content-edge: rgb(124 189 192 / 20%);\n  --xiaohei-layer-content-highlight: rgb(239 255 255 / 4%);\n  --xiaohei-shadow: rgb(0 5 7 / 30%);\n  --xiaohei-focus-shadow: rgb(105 182 186 / 14%);\n  --xiaohei-overlay-fill: rgb(22 29 31 / 88%);\n  --xiaohei-overlay-blur: 18px;\n  --xiaohei-overlay-saturation: 108%;\n  --xiaohei-plugin-workspace-fill: rgb(20 27 29 / 62%);\n  --xiaohei-plugin-pane-fill: rgb(27 35 37 / 46%);\n  --xiaohei-plugin-raised-fill: rgb(29 37 39 / 72%);\n  --xiaohei-plugin-control-fill: rgb(33 42 44 / 86%);\n  --xiaohei-plugin-surface-blur: 32px;\n  --xiaohei-plugin-surface-saturation: 112%;\n  --xiaohei-radius-panel: 16px;\n  --xiaohei-radius-control: 10px;\n  --xiaohei-radius-small: 8px;\n  --xiaohei-motion-fast: 140ms;\n  --xiaohei-motion-base: 190ms;\n  --xiaohei-motion-curve: cubic-bezier(0.16, 1, 0.3, 1);\n}\n\nhtml[data-xiaohei-appearance='light'] {\n  --xiaohei-ink: #252C35;\n  --xiaohei-ink-soft: rgb(37 44 53 / 72%);\n  --xiaohei-spirit: #547D78;\n  --xiaohei-spirit-strong: #426A65;\n  --xiaohei-spirit-soft: rgb(84 125 120 / 10%);\n  --xiaohei-spirit-faint: rgb(84 125 120 / 5%);\n  --xiaohei-edge: rgb(84 125 120 / 19%);\n  --xiaohei-edge-strong: rgb(84 125 120 / 38%);\n  --xiaohei-surface: rgb(232 237 243 / 94%);\n  --xiaohei-surface-raised: rgb(241 244 248 / 97%);\n  --xiaohei-surface-muted: rgb(220 227 234 / 78%);\n  --xiaohei-sidebar-emphasis: #3F454C;\n  --xiaohei-sidebar-icon: rgb(48 54 61 / 68%);\n  --xiaohei-sidebar-hover: rgb(48 54 61 / 6%);\n  --xiaohei-sidebar-glass-fill: rgb(215 220 223 / 62%);\n  --xiaohei-sidebar-glass-solid: #E8EDEF;\n  --xiaohei-sidebar-glass-edge: rgb(255 255 255 / 88%);\n  --xiaohei-sidebar-glass-outline: rgb(42 50 56 / 14%);\n  --xiaohei-sidebar-glass-inner-edge: rgb(43 51 56 / 11%);\n  --xiaohei-sidebar-glass-highlight: rgb(255 255 255 / 88%);\n  --xiaohei-sidebar-glass-refraction: rgb(255 255 255 / 42%);\n  --xiaohei-sidebar-glass-specular: rgb(255 255 255 / 72%);\n  --xiaohei-sidebar-glass-saturation: 76%;\n  --xiaohei-sidebar-glass-brightness: 104%;\n  --xiaohei-sidebar-atmosphere-opacity: 0.28;\n  --xiaohei-sidebar-atmosphere-solid-opacity: 0.16;\n  --xiaohei-sidebar-control: rgb(255 255 255 / 26%);\n  --xiaohei-sidebar-control-edge: rgb(46 51 58 / 8%);\n  --xiaohei-sidebar-control-edge-hover: rgb(46 51 58 / 13%);\n  --xiaohei-sidebar-control-highlight: rgb(255 255 255 / 48%);\n  --xiaohei-sidebar-brush-ink: rgb(38 47 49 / 9%);\n  --xiaohei-sidebar-brush-ink-hover: rgb(38 47 49 / 14%);\n  --xiaohei-sidebar-shadow: rgb(23 30 34 / 14%);\n  --xiaohei-workspace-label: rgb(48 54 61 / 76%);\n  --xiaohei-space-frame-edge: rgb(46 51 58 / 8%);\n  --xiaohei-space-frame-highlight: rgb(255 255 255 / 32%);\n  --xiaohei-workspace-control-edge: rgb(46 51 58 / 9%);\n  --xiaohei-workspace-path: rgb(45 56 57 / 9%);\n  --xiaohei-workspace-path-active: rgb(84 125 120 / 22%);\n  --xiaohei-workspace-folder-open: rgb(84 125 120 / 6.5%);\n  --xiaohei-workspace-folder-edge: rgb(61 99 84 / 5.5%);\n  --xiaohei-workspace-folder-shadow: rgb(30 50 42 / 1.8%);\n  --xiaohei-workspace-row-hover: rgb(48 54 61 / 5%);\n  --xiaohei-workspace-row-active: rgb(48 54 61 / 7.5%);\n  --xiaohei-workspace-row-active-edge: rgb(46 51 58 / 5%);\n  --xiaohei-workspace-action-hover: rgb(48 54 61 / 7%);\n  --xiaohei-workspace-active-line: #547D78;\n  --xiaohei-workspace-active-line-glow: rgb(84 125 120 / 20%);\n  --xiaohei-workspace-rift-glow: rgb(84 125 120 / 8%);\n  --xiaohei-frame-line: rgb(84 125 120 / 22%);\n  --xiaohei-frame-line-strong: rgb(84 125 120 / 43%);\n  --xiaohei-frame-fill: rgb(224 231 238 / 58%);\n  --xiaohei-frame-fill-raised: rgb(238 242 247 / 88%);\n  --xiaohei-frame-inner: rgb(255 255 255 / 72%);\n  --xiaohei-frame-plaque: rgb(235 241 240 / 94%);\n  --xiaohei-frame-label: #294A46;\n  --xiaohei-frame-ink: #243633;\n  --xiaohei-layer-panel: rgb(226 232 239 / 78%);\n  --xiaohei-layer-panel-edge: rgb(84 125 120 / 11%);\n  --xiaohei-layer-panel-shadow: rgb(43 55 51 / 8%);\n  --xiaohei-conversation-text: #303842;\n  --xiaohei-conversation-meta: rgb(76 87 99 / 56%);\n  --xiaohei-conversation-user: rgb(84 125 120 / 10%);\n  --xiaohei-conversation-user-edge: rgb(84 125 120 / 10%);\n  --xiaohei-layer-content: rgb(238 242 247 / 94%);\n  --xiaohei-layer-content-edge: rgb(84 125 120 / 20%);\n  --xiaohei-layer-content-highlight: rgb(255 255 255 / 62%);\n  --xiaohei-shadow: rgb(43 55 51 / 11%);\n  --xiaohei-focus-shadow: rgb(84 125 120 / 13%);\n  --xiaohei-overlay-fill: rgb(232 237 243 / 90%);\n  --xiaohei-overlay-blur: 18px;\n  --xiaohei-overlay-saturation: 106%;\n  --xiaohei-plugin-workspace-fill: rgb(232 237 243 / 64%);\n  --xiaohei-plugin-pane-fill: rgb(238 242 247 / 46%);\n  --xiaohei-plugin-raised-fill: rgb(244 247 250 / 72%);\n  --xiaohei-plugin-control-fill: rgb(248 250 252 / 86%);\n  --xiaohei-plugin-surface-blur: 32px;\n  --xiaohei-plugin-surface-saturation: 106%;\n}\n";
+export declare const XIAOHEI_CHROME_TOKENS_CSS = "\nhtml {\n  --xiaohei-ink: #0E1517;\n  --xiaohei-ink-soft: rgb(14 21 23 / 74%);\n  --xiaohei-spirit: #69B6BA;\n  --xiaohei-spirit-strong: #8ACED0;\n  --xiaohei-spirit-soft: rgb(105 182 186 / 12%);\n  --xiaohei-spirit-faint: rgb(105 182 186 / 6%);\n  --xiaohei-edge: rgb(124 189 192 / 15%);\n  --xiaohei-edge-strong: rgb(138 206 208 / 30%);\n  --xiaohei-surface: rgb(22 29 31 / 94%);\n  --xiaohei-surface-raised: rgb(29 37 39 / 97%);\n  --xiaohei-surface-muted: rgb(15 21 23 / 68%);\n  --xiaohei-sidebar-emphasis: #E1E6E7;\n  --xiaohei-sidebar-icon: rgb(220 227 229 / 70%);\n  --xiaohei-sidebar-hover: rgb(231 238 240 / 6.5%);\n  --xiaohei-sidebar-glass-fill: rgb(18 22 25 / 48%);\n  --xiaohei-sidebar-glass-solid: #1B2023;\n  --xiaohei-sidebar-glass-edge: rgb(255 255 255 / 8%);\n  --xiaohei-sidebar-glass-highlight: rgb(255 255 255 / 13%);\n  --xiaohei-sidebar-glass-refraction: rgb(255 255 255 / 18%);\n  --xiaohei-sidebar-glass-saturation: 102%;\n  --xiaohei-sidebar-glass-blur: 18px;\n  --xiaohei-sidebar-glass-radius: 18px;\n  --xiaohei-sidebar-control: rgb(231 238 240 / 7%);\n  --xiaohei-sidebar-control-edge: rgb(231 238 240 / 8%);\n  --xiaohei-sidebar-control-edge-hover: rgb(231 238 240 / 13%);\n  --xiaohei-sidebar-control-highlight: rgb(255 255 255 / 5%);\n  --xiaohei-sidebar-shadow: rgb(0 0 0 / 30%);\n  --xiaohei-sidebar-shadow-soft: rgb(0 0 0 / 16%);\n  --xiaohei-workspace-label: rgb(220 227 229 / 78%);\n  --xiaohei-workspace-control-edge: rgb(231 238 240 / 8%);\n  --xiaohei-workspace-folder-open: rgb(231 238 240 / 3%);\n  --xiaohei-workspace-row-hover: rgb(231 238 240 / 4%);\n  --xiaohei-workspace-row-active: rgb(231 238 240 / 12%);\n  --xiaohei-workspace-row-active-hover: rgb(231 238 240 / 16%);\n  --xiaohei-workspace-row-active-edge: rgb(231 238 240 / 10%);\n  --xiaohei-workspace-action-hover: rgb(231 238 240 / 6%);\n  --xiaohei-frame-line: rgb(138 206 208 / 21%);\n  --xiaohei-frame-line-strong: rgb(151 216 218 / 40%);\n  --xiaohei-frame-fill: rgb(15 21 23 / 54%);\n  --xiaohei-frame-fill-raised: rgb(24 32 34 / 78%);\n  --xiaohei-frame-inner: rgb(231 252 252 / 6%);\n  --xiaohei-frame-plaque: #182122;\n  --xiaohei-frame-label: #B9E5E7;\n  --xiaohei-frame-ink: #081011;\n  --xiaohei-layer-panel: rgb(20 27 29 / 76%);\n  --xiaohei-layer-panel-edge: rgb(124 189 192 / 12%);\n  --xiaohei-layer-panel-shadow: rgb(0 5 8 / 26%);\n  --xiaohei-conversation-text: #E5E7E8;\n  --xiaohei-conversation-meta: rgb(199 203 206 / 60%);\n  --xiaohei-conversation-assistant:\n    linear-gradient(\n      115deg,\n      rgb(86 91 95 / 30%) 0%,\n      rgb(50 54 57 / 22%) 46%,\n      rgb(27 30 32 / 30%) 100%\n    ),\n    rgb(20 23 25 / 68%);\n  --xiaohei-conversation-user:\n    linear-gradient(\n      118deg,\n      rgb(105 110 114 / 27%) 0%,\n      rgb(61 65 68 / 23%) 52%,\n      rgb(34 37 40 / 31%) 100%\n    ),\n    rgb(27 30 33 / 72%);\n  --xiaohei-conversation-meta-surface:\n    linear-gradient(112deg, rgb(91 96 100 / 17%), rgb(42 46 49 / 14%)),\n    rgb(20 23 25 / 58%);\n  --xiaohei-conversation-meta-edge: rgb(221 225 227 / 12%);\n  --xiaohei-conversation-edge: rgb(229 232 234 / 17%);\n  --xiaohei-conversation-highlight: rgb(255 255 255 / 12%);\n  --xiaohei-conversation-shadow: rgb(0 0 0 / 28%);\n  --xiaohei-conversation-blur: 18px;\n  --xiaohei-layer-content: rgb(27 35 37 / 92%);\n  --xiaohei-layer-content-edge: rgb(124 189 192 / 20%);\n  --xiaohei-layer-content-highlight: rgb(239 255 255 / 4%);\n  --xiaohei-composer-fill: rgb(17 23 25 / 78%);\n  --xiaohei-composer-solid: #1B2325;\n  --xiaohei-composer-edge: rgb(232 240 242 / 13%);\n  --xiaohei-composer-edge-focus: rgb(232 240 242 / 26%);\n  --xiaohei-composer-highlight: rgb(255 255 255 / 7%);\n  --xiaohei-composer-highlight-strong: rgb(255 255 255 / 10%);\n  --xiaohei-composer-lower-edge: rgb(0 0 0 / 20%);\n  --xiaohei-composer-shadow: rgb(0 5 7 / 24%);\n  --xiaohei-composer-focus: rgb(232 240 242 / 7%);\n  --xiaohei-composer-tail: rgb(181 211 212 / 32%);\n  --xiaohei-composer-control-edge: rgb(231 238 240 / 10%);\n  --xiaohei-composer-control-hover: rgb(231 238 240 / 6%);\n  --xiaohei-composer-disabled: rgb(34 42 44 / 66%);\n  --xiaohei-composer-primary-icon: #EDF4F4;\n  --xiaohei-composer-heixiu-edge: rgb(235 243 244 / 34%);\n  --xiaohei-composer-heixiu-shadow: rgb(0 3 4 / 52%);\n  --xiaohei-composer-blur: 22px;\n  --xiaohei-composer-saturation: 106%;\n  --xiaohei-shadow: rgb(0 5 7 / 30%);\n  --xiaohei-focus-shadow: rgb(105 182 186 / 14%);\n  --xiaohei-overlay-fill: rgb(22 29 31 / 88%);\n  --xiaohei-overlay-blur: 18px;\n  --xiaohei-overlay-saturation: 108%;\n  --xiaohei-plugin-workspace-fill: rgb(20 27 29 / 62%);\n  --xiaohei-plugin-pane-fill: rgb(27 35 37 / 46%);\n  --xiaohei-plugin-raised-fill: rgb(29 37 39 / 72%);\n  --xiaohei-plugin-control-fill: rgb(33 42 44 / 86%);\n  --xiaohei-plugin-surface-blur: 32px;\n  --xiaohei-plugin-surface-saturation: 112%;\n  --xiaohei-radius-panel: 16px;\n  --xiaohei-radius-control: 10px;\n  --xiaohei-radius-small: 8px;\n  --xiaohei-motion-fast: 140ms;\n  --xiaohei-motion-base: 190ms;\n  --xiaohei-motion-curve: cubic-bezier(0.16, 1, 0.3, 1);\n}\n\nhtml[data-xiaohei-appearance='light'] {\n  --xiaohei-ink: #252C35;\n  --xiaohei-ink-soft: rgb(37 44 53 / 72%);\n  --xiaohei-spirit: #547D78;\n  --xiaohei-spirit-strong: #426A65;\n  --xiaohei-spirit-soft: rgb(84 125 120 / 10%);\n  --xiaohei-spirit-faint: rgb(84 125 120 / 5%);\n  --xiaohei-edge: rgb(84 125 120 / 19%);\n  --xiaohei-edge-strong: rgb(84 125 120 / 38%);\n  --xiaohei-surface: rgb(232 237 243 / 94%);\n  --xiaohei-surface-raised: rgb(241 244 248 / 97%);\n  --xiaohei-surface-muted: rgb(220 227 234 / 78%);\n  --xiaohei-sidebar-emphasis: #3F454C;\n  --xiaohei-sidebar-icon: rgb(48 54 61 / 68%);\n  --xiaohei-sidebar-hover: rgb(48 54 61 / 6%);\n  --xiaohei-sidebar-glass-fill: rgb(247 245 242 / 58%);\n  --xiaohei-sidebar-glass-solid: #EDF1F3;\n  --xiaohei-sidebar-glass-edge: rgb(37 45 51 / 9%);\n  --xiaohei-sidebar-glass-highlight: rgb(255 255 255 / 64%);\n  --xiaohei-sidebar-glass-refraction: rgb(255 255 255 / 18%);\n  --xiaohei-sidebar-glass-saturation: 102%;\n  --xiaohei-sidebar-glass-blur: 18px;\n  --xiaohei-sidebar-control: rgb(255 255 255 / 30%);\n  --xiaohei-sidebar-control-edge: rgb(46 51 58 / 8%);\n  --xiaohei-sidebar-control-edge-hover: rgb(46 51 58 / 13%);\n  --xiaohei-sidebar-control-highlight: rgb(255 255 255 / 48%);\n  --xiaohei-sidebar-shadow: rgb(28 37 43 / 12%);\n  --xiaohei-sidebar-shadow-soft: rgb(28 37 43 / 6%);\n  --xiaohei-workspace-label: rgb(48 54 61 / 76%);\n  --xiaohei-workspace-control-edge: rgb(46 51 58 / 9%);\n  --xiaohei-workspace-folder-open: rgb(48 54 61 / 3%);\n  --xiaohei-workspace-row-hover: rgb(48 54 61 / 5.5%);\n  --xiaohei-workspace-row-active: rgb(48 54 61 / 10%);\n  --xiaohei-workspace-row-active-hover: rgb(48 54 61 / 14%);\n  --xiaohei-workspace-row-active-edge: rgb(46 51 58 / 8%);\n  --xiaohei-workspace-action-hover: rgb(255 255 255 / 10%);\n  --xiaohei-frame-line: rgb(84 125 120 / 22%);\n  --xiaohei-frame-line-strong: rgb(84 125 120 / 43%);\n  --xiaohei-frame-fill: rgb(224 231 238 / 58%);\n  --xiaohei-frame-fill-raised: rgb(238 242 247 / 88%);\n  --xiaohei-frame-inner: rgb(255 255 255 / 72%);\n  --xiaohei-frame-plaque: rgb(235 241 240 / 94%);\n  --xiaohei-frame-label: #294A46;\n  --xiaohei-frame-ink: #243633;\n  --xiaohei-layer-panel: rgb(226 232 239 / 78%);\n  --xiaohei-layer-panel-edge: rgb(84 125 120 / 11%);\n  --xiaohei-layer-panel-shadow: rgb(43 55 51 / 8%);\n  --xiaohei-conversation-text: #30353A;\n  --xiaohei-conversation-meta: rgb(72 79 86 / 58%);\n  --xiaohei-conversation-assistant:\n    linear-gradient(\n      115deg,\n      rgb(255 255 255 / 55%) 0%,\n      rgb(230 233 235 / 24%) 48%,\n      rgb(202 207 210 / 16%) 100%\n    ),\n    rgb(232 235 237 / 67%);\n  --xiaohei-conversation-user:\n    linear-gradient(\n      118deg,\n      rgb(255 255 255 / 42%) 0%,\n      rgb(213 217 220 / 23%) 52%,\n      rgb(190 196 200 / 17%) 100%\n    ),\n    rgb(220 224 227 / 72%);\n  --xiaohei-conversation-meta-surface:\n    linear-gradient(112deg, rgb(255 255 255 / 34%), rgb(201 206 209 / 15%)),\n    rgb(224 227 229 / 58%);\n  --xiaohei-conversation-meta-edge: rgb(50 57 63 / 12%);\n  --xiaohei-conversation-edge: rgb(45 52 58 / 15%);\n  --xiaohei-conversation-highlight: rgb(255 255 255 / 58%);\n  --xiaohei-conversation-shadow: rgb(36 42 47 / 13%);\n  --xiaohei-conversation-blur: 18px;\n  --xiaohei-layer-content: rgb(238 242 247 / 94%);\n  --xiaohei-layer-content-edge: rgb(84 125 120 / 20%);\n  --xiaohei-layer-content-highlight: rgb(255 255 255 / 62%);\n  --xiaohei-composer-fill: rgb(241 244 246 / 76%);\n  --xiaohei-composer-solid: #F0F3F5;\n  --xiaohei-composer-edge: rgb(45 53 59 / 12%);\n  --xiaohei-composer-edge-focus: rgb(45 53 59 / 24%);\n  --xiaohei-composer-highlight: rgb(255 255 255 / 72%);\n  --xiaohei-composer-highlight-strong: rgb(255 255 255 / 88%);\n  --xiaohei-composer-lower-edge: rgb(45 53 59 / 8%);\n  --xiaohei-composer-shadow: rgb(36 45 50 / 11%);\n  --xiaohei-composer-focus: rgb(45 53 59 / 6%);\n  --xiaohei-composer-tail: rgb(47 57 62 / 26%);\n  --xiaohei-composer-control-edge: rgb(46 53 59 / 10%);\n  --xiaohei-composer-control-hover: rgb(255 255 255 / 46%);\n  --xiaohei-composer-disabled: rgb(222 227 230 / 72%);\n  --xiaohei-composer-primary-icon: #F5F8F8;\n  --xiaohei-composer-heixiu-edge: rgb(255 255 255 / 24%);\n  --xiaohei-composer-heixiu-shadow: rgb(35 43 47 / 30%);\n  --xiaohei-composer-blur: 22px;\n  --xiaohei-composer-saturation: 104%;\n  --xiaohei-shadow: rgb(43 55 51 / 11%);\n  --xiaohei-focus-shadow: rgb(84 125 120 / 13%);\n  --xiaohei-overlay-fill: rgb(232 237 243 / 90%);\n  --xiaohei-overlay-blur: 18px;\n  --xiaohei-overlay-saturation: 106%;\n  --xiaohei-plugin-workspace-fill: rgb(232 237 243 / 64%);\n  --xiaohei-plugin-pane-fill: rgb(238 242 247 / 46%);\n  --xiaohei-plugin-raised-fill: rgb(244 247 250 / 72%);\n  --xiaohei-plugin-control-fill: rgb(248 250 252 / 86%);\n  --xiaohei-plugin-surface-blur: 32px;\n  --xiaohei-plugin-surface-saturation: 106%;\n}\n";
 //# sourceMappingURL=tokens.d.ts.map