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

package/lib/chrome/composer-send-heixiu.js

@@ -0,0 +1,143 @@
+/** Heixiu is the Host send button, not a neighbouring ornament. */
+export const XIAOHEI_COMPOSER_SEND_HEIXIU_CSS = `
+/* Official InputBar contract: row -> trailing controls -> last primary action. */
+#root [data-composer-card='true'] > :last-child > :last-child > button:last-child {
+  position: relative;
+  isolation: isolate;
+  width: 38px;
+  height: 38px;
+  min-width: 38px;
+  min-height: 38px;
+  border: 1px solid var(--xiaohei-composer-control-edge) !important;
+  border-radius: 50% !important;
+  color: var(--xiaohei-composer-primary-icon) !important;
+  background: var(--xiaohei-composer-disabled) !important;
+  box-shadow: inset 0 1px 0 var(--xiaohei-composer-highlight) !important;
+}
+
+#root [data-composer-card='true'] > :last-child > :last-child > button:last-child[data-xiaohei-send-heixiu='true'] {
+  overflow: visible;
+  padding: 0;
+  border-color: transparent !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+/* Preserve the native glyph in the DOM; only the visual presentation changes. */
+#root [data-composer-card='true'] > :last-child > :last-child
+  > button[data-xiaohei-send-heixiu='true'] > svg {
+  opacity: 0;
+}
+
+.xiaohei-composer-send-heixiu {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  overflow: visible;
+  pointer-events: none;
+  opacity: 1;
+  transform: translateY(-1px) scale(1) translateZ(0);
+  transform-origin: 50% 58%;
+  transition:
+    opacity 160ms ease,
+    transform 180ms var(--xiaohei-motion-curve);
+}
+
+.xiaohei-composer-send-heixiu img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  width: 60px;
+  height: 60px;
+  max-width: none;
+  user-select: none;
+  pointer-events: none;
+  object-fit: contain;
+  filter:
+    drop-shadow(0 0 1px var(--xiaohei-composer-heixiu-edge))
+    drop-shadow(0 3px 4px var(--xiaohei-composer-heixiu-shadow));
+  transform: translate(-50%, -45%) translateZ(0);
+}
+
+.xiaohei-composer-send-heixiu__open {
+  opacity: 1;
+}
+
+.xiaohei-composer-send-heixiu__blink {
+  opacity: 0;
+}
+
+.xiaohei-composer-send-heixiu[data-xiaohei-blink='closed']
+  .xiaohei-composer-send-heixiu__open {
+  opacity: 0;
+}
+
+.xiaohei-composer-send-heixiu[data-xiaohei-blink='closed']
+  .xiaohei-composer-send-heixiu__blink {
+  opacity: 1;
+}
+
+#root [data-composer-card='true'] > :last-child > :last-child
+  > button[data-xiaohei-send-heixiu='true']:not(:disabled):hover {
+  border-color: transparent !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  transform: none;
+}
+
+#root [data-composer-card='true'] > :last-child > :last-child
+  > button[data-xiaohei-send-heixiu='true']:not(:disabled):hover
+  .xiaohei-composer-send-heixiu {
+  transform: translateY(-2px) scale(1.055) translateZ(0);
+}
+
+#root [data-composer-card='true'] > :last-child > :last-child
+  > button[data-xiaohei-send-heixiu='true']:not(:disabled):active {
+  transform: none;
+}
+
+#root [data-composer-card='true'] > :last-child > :last-child
+  > button[data-xiaohei-send-heixiu='true']:not(:disabled):active
+  .xiaohei-composer-send-heixiu {
+  transform: translateY(0) scale(.93) translateZ(0);
+}
+
+#root [data-composer-card='true'] > :last-child > :last-child
+  > button[data-xiaohei-send-heixiu='true']:disabled {
+  border-color: transparent !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  transform: none;
+}
+
+#root [data-composer-card='true'] > :last-child > :last-child
+  > button[data-xiaohei-send-heixiu='true']:disabled
+  .xiaohei-composer-send-heixiu {
+  opacity: .42;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xiaohei-composer-send-heixiu {
+    transition-duration: 0.01ms !important;
+  }
+}
+
+@media (forced-colors: active) {
+  #root [data-composer-card='true'] > :last-child > :last-child
+    > button[data-xiaohei-send-heixiu='true'] {
+    border: 1px solid ButtonText !important;
+    background: ButtonFace !important;
+  }
+
+  #root [data-composer-card='true'] > :last-child > :last-child
+    > button[data-xiaohei-send-heixiu='true'] > svg {
+    opacity: 1;
+  }
+
+  .xiaohei-composer-send-heixiu {
+    display: none;
+  }
+}
+`;
+//# sourceMappingURL=composer-send-heixiu.js.map

package/lib/chrome/composer.d.ts

@@ -1,3 +1,3 @@
-/** Conversation composer, command affordances, and send action. */
-export declare const XIAOHEI_COMPOSER_CSS = "\n#root [data-composer-card='true'] {\n  position: relative;\n  isolation: isolate;\n  overflow: visible;\n  border: 1px solid var(--xiaohei-layer-content-edge) !important;\n  border-radius: 8px !important;\n  background:\n    linear-gradient(\n      90deg,\n      transparent,\n      transparent 18%,\n      var(--xiaohei-spirit-faint) 52%,\n      transparent\n    ) 18px 0 / 104px 1px no-repeat,\n    linear-gradient(180deg, var(--xiaohei-layer-content-highlight), transparent 34%),\n    var(--xiaohei-layer-content) !important;\n  box-shadow:\n    inset 0 0 0 1px var(--xiaohei-frame-inner),\n    inset 0 1px rgb(255 255 255 / 7%),\n    inset 0 -1px var(--xiaohei-layer-panel-edge),\n    0 8px 22px var(--xiaohei-shadow) !important;\n  transition:\n    border-color var(--xiaohei-motion-base) ease,\n    box-shadow var(--xiaohei-motion-base) ease;\n}\n\n#root [data-composer-card='true']:focus-within {\n  border-color: var(--xiaohei-edge-strong) !important;\n  box-shadow:\n    inset 0 1px rgb(255 255 255 / 9%),\n    0 10px 26px var(--xiaohei-shadow),\n    0 0 0 4px var(--xiaohei-focus-shadow) !important;\n}\n\n#root [data-composer-card='true'] textarea {\n  color: var(--dsw-alias-label-primary) !important;\n  caret-color: var(--xiaohei-spirit-strong);\n}\n\n#root [data-composer-card='true'] textarea::placeholder {\n  color: var(--dsw-alias-label-tertiary) !important;\n  opacity: 0.92;\n}\n\n#root [data-composer-card='true'] [data-input-backdrop='true'] {\n  border-color: transparent !important;\n  background: transparent !important;\n}\n\n#root [data-composer-card='true'] button {\n  min-width: 28px;\n  min-height: 28px;\n  border: 1px solid transparent;\n  border-radius: var(--xiaohei-radius-small);\n  transition:\n    color var(--xiaohei-motion-fast) ease,\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-composer-card='true'] button:not(:disabled):hover {\n  color: var(--xiaohei-spirit-strong);\n  border-color: var(--xiaohei-edge);\n  background: var(--xiaohei-spirit-soft);\n}\n\n#root [data-composer-card='true'] button:not(:disabled):active {\n  transform: translateY(1px) scale(0.98);\n}\n\n#root button[aria-label='\u53D1\u9001\u6D88\u606F'],\n#root button[aria-label='Send message'] {\n  position: relative;\n  isolation: isolate;\n  border: 1px solid var(--xiaohei-edge-strong) !important;\n  border-radius: 50% !important;\n  color: var(--dsw-alias-brand-primary-invert) !important;\n  background:\n    radial-gradient(circle at 36% 27%, rgb(255 255 255 / 36%) 0 7%, transparent 9%),\n    linear-gradient(145deg, var(--xiaohei-spirit), var(--dsw-alias-button-primary-fill)) !important;\n  box-shadow:\n    inset 0 1px rgb(255 255 255 / 34%),\n    inset 0 -2px rgb(4 25 31 / 18%),\n    0 6px 16px var(--xiaohei-focus-shadow) !important;\n  transition:\n    transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve),\n    box-shadow var(--xiaohei-motion-base) ease,\n    filter var(--xiaohei-motion-base) ease;\n}\n\n#root button[aria-label='\u53D1\u9001\u6D88\u606F']::after,\n#root button[aria-label='Send message']::after {\n  content: '';\n  position: absolute;\n  inset: 3px;\n  border: 1px solid rgb(238 253 255 / 28%);\n  border-radius: inherit;\n  pointer-events: none;\n  opacity: 0.58;\n  transition: opacity var(--xiaohei-motion-fast) ease, transform 220ms var(--xiaohei-motion-curve);\n}\n\n#root button[aria-label='\u53D1\u9001\u6D88\u606F']:not(:disabled):hover,\n#root button[aria-label='Send message']:not(:disabled):hover {\n  filter: brightness(1.05) saturate(1.03);\n  box-shadow:\n    inset 0 1px rgb(255 255 255 / 42%),\n    inset 0 -2px rgb(4 25 31 / 16%),\n    0 8px 20px var(--xiaohei-focus-shadow) !important;\n}\n\n#root button[aria-label='\u53D1\u9001\u6D88\u606F']:not(:disabled):active,\n#root button[aria-label='Send message']:not(:disabled):active {\n  transform: translateY(1px) scale(0.96);\n}\n\n#root button[aria-label='\u53D1\u9001\u6D88\u606F']:not(:disabled):active::after,\n#root button[aria-label='Send message']:not(:disabled):active::after {\n  opacity: 0.86;\n  transform: scale(0.76);\n}\n\n#root button[aria-label='\u53D1\u9001\u6D88\u606F']:disabled,\n#root button[aria-label='Send message']:disabled {\n  border-color: var(--xiaohei-edge) !important;\n  color: var(--dsw-alias-label-dimmed) !important;\n  background: var(--xiaohei-surface-muted) !important;\n  filter: saturate(0.42);\n  box-shadow: inset 0 1px rgb(255 255 255 / 8%) !important;\n}\n\n#root button[aria-label='\u53D1\u9001\u6D88\u606F']:disabled::after,\n#root button[aria-label='Send message']:disabled::after {\n  opacity: 0.12;\n}\n\n@media (max-width: 700px) {\n  #root [data-composer-card='true'] {\n    border-radius: 7px !important;\n  }\n}\n";
+/** Conversation composer expressed as Xiaohei's quiet spatial workbench. */
+export declare const XIAOHEI_COMPOSER_CSS = "\n#root [data-composer-card='true'] {\n  position: relative;\n  isolation: isolate;\n  overflow: visible;\n  gap: 10px;\n  padding-top: 12px;\n  border: 1px solid var(--xiaohei-composer-edge) !important;\n  border-radius: 14px !important;\n  background: var(--xiaohei-composer-fill) !important;\n  -webkit-backdrop-filter:\n    blur(var(--xiaohei-composer-blur))\n    saturate(var(--xiaohei-composer-saturation));\n  backdrop-filter:\n    blur(var(--xiaohei-composer-blur))\n    saturate(var(--xiaohei-composer-saturation));\n  box-shadow:\n    0 10px 28px var(--xiaohei-composer-shadow),\n    0 2px 8px var(--xiaohei-shadow) !important;\n  transition:\n    border-color var(--xiaohei-motion-base) ease,\n    box-shadow 260ms ease,\n    background-color var(--xiaohei-motion-base) ease;\n}\n\n/* The lower contour behaves like Xiaohei's tail. Workspace-pick mode is\n   excluded so the Host keeps ownership of its native dashed affordance. */\n#root [data-composer-card='true']:not(:has(textarea[aria-haspopup='menu']))::after {\n  content: '';\n  position: absolute;\n  z-index: 2;\n  right: 58px;\n  bottom: -1px;\n  left: 18px;\n  height: 11px;\n  border-bottom: 2px solid var(--xiaohei-composer-tail);\n  border-radius: 0 0 76% 34%;\n  pointer-events: none;\n  opacity: 0.32;\n  transform: scaleX(.48) translateZ(0);\n  transform-origin: right center;\n  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);\n  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);\n  transition:\n    opacity 240ms ease,\n    transform 360ms var(--xiaohei-motion-curve);\n}\n\n#root [data-composer-card='true']:not(:has(textarea[aria-haspopup='menu'])):focus-within::after {\n  opacity: 0.74;\n  transform: scaleX(1) translateZ(0);\n}\n\n#root [data-composer-card='true']:not(:has(textarea[aria-haspopup='menu'])):has(textarea:not(:placeholder-shown))::after {\n  opacity: 0.88;\n  transform: scaleX(.92) translateZ(0);\n}\n\n#root [data-composer-card='true'] textarea {\n  -webkit-appearance: none;\n  appearance: none;\n  border: 0 !important;\n  border-radius: 0 !important;\n  color: var(--dsw-alias-label-primary) !important;\n  background: transparent !important;\n  caret-color: var(--xiaohei-spirit-strong);\n  box-shadow: none !important;\n}\n\n#root [data-composer-card='true'] textarea:focus-visible {\n  outline: none !important;\n  box-shadow: none !important;\n}\n\n#root [data-composer-card='true'] textarea::placeholder {\n  color: var(--dsw-alias-label-tertiary) !important;\n  opacity: 0.84;\n}\n\n#root [data-composer-card='true'] [data-input-backdrop='true'] {\n  border-color: transparent !important;\n  background: transparent !important;\n}\n\n#root [data-composer-card='true'] button {\n  min-width: 30px;\n  min-height: 30px;\n  border: 1px solid transparent;\n  border-radius: 9px;\n  transition:\n    color var(--xiaohei-motion-fast) ease,\n    background-color var(--xiaohei-motion-fast) ease,\n    border-color var(--xiaohei-motion-fast) ease,\n    box-shadow var(--xiaohei-motion-fast) ease,\n    transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);\n}\n\n#root [data-composer-card='true'] button:not(:disabled):hover {\n  color: var(--dsw-alias-label-primary);\n  border-color: var(--xiaohei-composer-control-edge);\n  background: var(--xiaohei-composer-control-hover);\n  box-shadow: inset 0 1px 0 var(--xiaohei-composer-highlight);\n}\n\n#root [data-composer-card='true'] button:not(:disabled):active {\n  transform: translateY(1px) scale(.97);\n}\n\n@media (max-width: 700px) {\n  #root [data-composer-card='true'] {\n    border-radius: 12px !important;\n  }\n\n  #root [data-composer-card='true']:not(:has(textarea[aria-haspopup='menu']))::after {\n    right: 54px;\n    left: 14px;\n  }\n}\n\n@media (prefers-reduced-transparency: reduce) {\n  #root [data-composer-card='true'] {\n    background: var(--xiaohei-composer-solid) !important;\n    -webkit-backdrop-filter: none;\n    backdrop-filter: none;\n  }\n}\n\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n  #root [data-composer-card='true'] {\n    background: var(--xiaohei-composer-solid) !important;\n  }\n}\n";
 //# sourceMappingURL=composer.d.ts.map

package/lib/chrome/composer.js

@@ -1,47 +1,81 @@
-/** Conversation composer, command affordances, and send action. */
+/** Conversation composer expressed as Xiaohei's quiet spatial workbench. */
 export const XIAOHEI_COMPOSER_CSS = `
 #root [data-composer-card='true'] {
   position: relative;
   isolation: isolate;
   overflow: visible;
-  border: 1px solid var(--xiaohei-layer-content-edge) !important;
-  border-radius: 8px !important;
-  background:
-    linear-gradient(
-      90deg,
-      transparent,
-      transparent 18%,
-      var(--xiaohei-spirit-faint) 52%,
-      transparent
-    ) 18px 0 / 104px 1px no-repeat,
-    linear-gradient(180deg, var(--xiaohei-layer-content-highlight), transparent 34%),
-    var(--xiaohei-layer-content) !important;
+  gap: 10px;
+  padding-top: 12px;
+  border: 1px solid var(--xiaohei-composer-edge) !important;
+  border-radius: 14px !important;
+  background: var(--xiaohei-composer-fill) !important;
+  -webkit-backdrop-filter:
+    blur(var(--xiaohei-composer-blur))
+    saturate(var(--xiaohei-composer-saturation));
+  backdrop-filter:
+    blur(var(--xiaohei-composer-blur))
+    saturate(var(--xiaohei-composer-saturation));
   box-shadow:
-    inset 0 0 0 1px var(--xiaohei-frame-inner),
-    inset 0 1px rgb(255 255 255 / 7%),
-    inset 0 -1px var(--xiaohei-layer-panel-edge),
-    0 8px 22px var(--xiaohei-shadow) !important;
+    0 10px 28px var(--xiaohei-composer-shadow),
+    0 2px 8px var(--xiaohei-shadow) !important;
   transition:
     border-color var(--xiaohei-motion-base) ease,
-    box-shadow var(--xiaohei-motion-base) ease;
+    box-shadow 260ms ease,
+    background-color var(--xiaohei-motion-base) ease;
 }
 
-#root [data-composer-card='true']:focus-within {
-  border-color: var(--xiaohei-edge-strong) !important;
-  box-shadow:
-    inset 0 1px rgb(255 255 255 / 9%),
-    0 10px 26px var(--xiaohei-shadow),
-    0 0 0 4px var(--xiaohei-focus-shadow) !important;
+/* The lower contour behaves like Xiaohei's tail. Workspace-pick mode is
+   excluded so the Host keeps ownership of its native dashed affordance. */
+#root [data-composer-card='true']:not(:has(textarea[aria-haspopup='menu']))::after {
+  content: '';
+  position: absolute;
+  z-index: 2;
+  right: 58px;
+  bottom: -1px;
+  left: 18px;
+  height: 11px;
+  border-bottom: 2px solid var(--xiaohei-composer-tail);
+  border-radius: 0 0 76% 34%;
+  pointer-events: none;
+  opacity: 0.32;
+  transform: scaleX(.48) translateZ(0);
+  transform-origin: right center;
+  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
+  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
+  transition:
+    opacity 240ms ease,
+    transform 360ms var(--xiaohei-motion-curve);
+}
+
+#root [data-composer-card='true']:not(:has(textarea[aria-haspopup='menu'])):focus-within::after {
+  opacity: 0.74;
+  transform: scaleX(1) translateZ(0);
+}
+
+#root [data-composer-card='true']:not(:has(textarea[aria-haspopup='menu'])):has(textarea:not(:placeholder-shown))::after {
+  opacity: 0.88;
+  transform: scaleX(.92) translateZ(0);
 }
 
 #root [data-composer-card='true'] textarea {
+  -webkit-appearance: none;
+  appearance: none;
+  border: 0 !important;
+  border-radius: 0 !important;
   color: var(--dsw-alias-label-primary) !important;
+  background: transparent !important;
   caret-color: var(--xiaohei-spirit-strong);
+  box-shadow: none !important;
+}
+
+#root [data-composer-card='true'] textarea:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
 }
 
 #root [data-composer-card='true'] textarea::placeholder {
   color: var(--dsw-alias-label-tertiary) !important;
-  opacity: 0.92;
+  opacity: 0.84;
 }
 
 #root [data-composer-card='true'] [data-input-backdrop='true'] {
@@ -50,96 +84,51 @@ export const XIAOHEI_COMPOSER_CSS = `
 }
 
 #root [data-composer-card='true'] button {
-  min-width: 28px;
-  min-height: 28px;
+  min-width: 30px;
+  min-height: 30px;
   border: 1px solid transparent;
-  border-radius: var(--xiaohei-radius-small);
+  border-radius: 9px;
   transition:
     color var(--xiaohei-motion-fast) ease,
     background-color var(--xiaohei-motion-fast) ease,
     border-color var(--xiaohei-motion-fast) ease,
+    box-shadow var(--xiaohei-motion-fast) ease,
     transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);
 }
 
 #root [data-composer-card='true'] button:not(:disabled):hover {
-  color: var(--xiaohei-spirit-strong);
-  border-color: var(--xiaohei-edge);
-  background: var(--xiaohei-spirit-soft);
+  color: var(--dsw-alias-label-primary);
+  border-color: var(--xiaohei-composer-control-edge);
+  background: var(--xiaohei-composer-control-hover);
+  box-shadow: inset 0 1px 0 var(--xiaohei-composer-highlight);
 }
 
 #root [data-composer-card='true'] button:not(:disabled):active {
-  transform: translateY(1px) scale(0.98);
-}
-
-#root button[aria-label='发送消息'],
-#root button[aria-label='Send message'] {
-  position: relative;
-  isolation: isolate;
-  border: 1px solid var(--xiaohei-edge-strong) !important;
-  border-radius: 50% !important;
-  color: var(--dsw-alias-brand-primary-invert) !important;
-  background:
-    radial-gradient(circle at 36% 27%, rgb(255 255 255 / 36%) 0 7%, transparent 9%),
-    linear-gradient(145deg, var(--xiaohei-spirit), var(--dsw-alias-button-primary-fill)) !important;
-  box-shadow:
-    inset 0 1px rgb(255 255 255 / 34%),
-    inset 0 -2px rgb(4 25 31 / 18%),
-    0 6px 16px var(--xiaohei-focus-shadow) !important;
-  transition:
-    transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve),
-    box-shadow var(--xiaohei-motion-base) ease,
-    filter var(--xiaohei-motion-base) ease;
+  transform: translateY(1px) scale(.97);
 }
 
-#root button[aria-label='发送消息']::after,
-#root button[aria-label='Send message']::after {
-  content: '';
-  position: absolute;
-  inset: 3px;
-  border: 1px solid rgb(238 253 255 / 28%);
-  border-radius: inherit;
-  pointer-events: none;
-  opacity: 0.58;
-  transition: opacity var(--xiaohei-motion-fast) ease, transform 220ms var(--xiaohei-motion-curve);
-}
-
-#root button[aria-label='发送消息']:not(:disabled):hover,
-#root button[aria-label='Send message']:not(:disabled):hover {
-  filter: brightness(1.05) saturate(1.03);
-  box-shadow:
-    inset 0 1px rgb(255 255 255 / 42%),
-    inset 0 -2px rgb(4 25 31 / 16%),
-    0 8px 20px var(--xiaohei-focus-shadow) !important;
-}
-
-#root button[aria-label='发送消息']:not(:disabled):active,
-#root button[aria-label='Send message']:not(:disabled):active {
-  transform: translateY(1px) scale(0.96);
-}
-
-#root button[aria-label='发送消息']:not(:disabled):active::after,
-#root button[aria-label='Send message']:not(:disabled):active::after {
-  opacity: 0.86;
-  transform: scale(0.76);
-}
+@media (max-width: 700px) {
+  #root [data-composer-card='true'] {
+    border-radius: 12px !important;
+  }
 
-#root button[aria-label='发送消息']:disabled,
-#root button[aria-label='Send message']:disabled {
-  border-color: var(--xiaohei-edge) !important;
-  color: var(--dsw-alias-label-dimmed) !important;
-  background: var(--xiaohei-surface-muted) !important;
-  filter: saturate(0.42);
-  box-shadow: inset 0 1px rgb(255 255 255 / 8%) !important;
+  #root [data-composer-card='true']:not(:has(textarea[aria-haspopup='menu']))::after {
+    right: 54px;
+    left: 14px;
+  }
 }
 
-#root button[aria-label='发送消息']:disabled::after,
-#root button[aria-label='Send message']:disabled::after {
-  opacity: 0.12;
+@media (prefers-reduced-transparency: reduce) {
+  #root [data-composer-card='true'] {
+    background: var(--xiaohei-composer-solid) !important;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
 }
 
-@media (max-width: 700px) {
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
   #root [data-composer-card='true'] {
-    border-radius: 7px !important;
+    background: var(--xiaohei-composer-solid) !important;
   }
 }
 `;

package/lib/chrome/controls.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Browser-independent control primitives.
+ *
+ * This layer owns only the shared native-control contract. Feature chrome is
+ * composed after it and remains free to define geometry or stronger states.
+ */
+export declare const XIAOHEI_CONTROL_PRIMITIVES_CSS = "\nhtml {\n  color-scheme: dark;\n  accent-color: var(--xiaohei-spirit);\n  font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"PingFang SC\",\n    \"Microsoft YaHei\", \"Segoe UI\", sans-serif;\n  font-synthesis: none;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nhtml[data-xiaohei-appearance='light'] {\n  color-scheme: light;\n}\n\n#root,\n:where(#root) :where(button, input, textarea, select) {\n  font: inherit;\n  letter-spacing: inherit;\n}\n\n:where(#root) :where(button, input, textarea, select) {\n  box-sizing: border-box;\n  color: inherit;\n  -webkit-tap-highlight-color: transparent;\n}\n\n:where(#root) :where(button, select, input[type='button'], input[type='submit'], input[type='reset']) {\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n:where(#root) :where(button, input[type='button'], input[type='submit'], input[type='reset']) {\n  margin: 0;\n  border: 1px solid transparent;\n  border-radius: var(--xiaohei-radius-small);\n  color: var(--dsw-alias-label-primary);\n  background: transparent;\n  cursor: pointer;\n  transition:\n    color var(--xiaohei-motion-fast) ease,\n    border-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:where(#root) :where(button, input[type='button'], input[type='submit'], input[type='reset']):not(:disabled):hover {\n  border-color: var(--xiaohei-edge);\n  background-color: var(--xiaohei-spirit-soft);\n}\n\n:where(#root) :where(button, input[type='button'], input[type='submit'], input[type='reset']):not(:disabled):active {\n  transform: translateY(1px) scale(.98);\n}\n\n:where(#root) :where(button, input[type='button'], input[type='submit'], input[type='reset']):disabled {\n  cursor: not-allowed;\n  opacity: .48;\n}\n\n:where(#root) :where(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']), textarea, select) {\n  border: 1px solid var(--xiaohei-edge);\n  border-radius: var(--xiaohei-radius-control);\n  color: var(--dsw-alias-label-primary);\n  background-color: var(--xiaohei-plugin-control-fill);\n  box-shadow: inset 0 1px var(--xiaohei-layer-content-highlight);\n  transition:\n    border-color var(--xiaohei-motion-fast) ease,\n    background-color var(--xiaohei-motion-fast) ease,\n    box-shadow var(--xiaohei-motion-fast) ease;\n}\n\n:where(#root) :where(input, textarea)::placeholder {\n  color: var(--dsw-alias-label-tertiary);\n  opacity: 1;\n}\n\n:where(#root) :where(input[type='search'])::-webkit-search-cancel-button,\n:where(#root) :where(input[type='search'])::-webkit-search-decoration {\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n:where(#root) :where(input[type='number']) {\n  -moz-appearance: textfield;\n}\n\n:where(#root) :where(input[type='number'])::-webkit-inner-spin-button,\n:where(#root) :where(input[type='number'])::-webkit-outer-spin-button {\n  margin: 0;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n:where(#root) :where(textarea) {\n  resize: vertical;\n}\n\n:where(#root) :where(select) {\n  padding-inline-end: 30px;\n  background-image:\n    linear-gradient(45deg, transparent 50%, currentColor 50%),\n    linear-gradient(135deg, currentColor 50%, transparent 50%);\n  background-position:\n    calc(100% - 15px) 50%,\n    calc(100% - 10px) 50%;\n  background-repeat: no-repeat;\n  background-size: 5px 5px, 5px 5px;\n}\n\n:where(#root) :where(select)::-ms-expand {\n  display: none;\n}\n\n:where(#root) :where(option, optgroup) {\n  color: var(--dsw-alias-label-primary);\n  background: var(--xiaohei-surface-raised);\n}\n\n:where(#root) :where(input[type='checkbox'], input[type='radio']) {\n  -webkit-appearance: none;\n  appearance: none;\n  display: inline-grid;\n  place-content: center;\n  width: 16px;\n  height: 16px;\n  margin: 0;\n  border: 1px solid var(--xiaohei-edge-strong);\n  color: var(--xiaohei-frame-ink);\n  background: var(--xiaohei-plugin-control-fill);\n  box-shadow: inset 0 1px var(--xiaohei-layer-content-highlight);\n  cursor: pointer;\n  transition:\n    border-color var(--xiaohei-motion-fast) ease,\n    background-color var(--xiaohei-motion-fast) ease,\n    box-shadow var(--xiaohei-motion-fast) ease;\n}\n\n:where(#root) :where(input[type='checkbox']) {\n  border-radius: 5px;\n}\n\n:where(#root) :where(input[type='radio']) {\n  border-radius: 50%;\n}\n\n:where(#root) :where(input[type='checkbox'], input[type='radio'])::before {\n  content: '';\n  width: 8px;\n  height: 8px;\n  background: currentColor;\n  opacity: 0;\n  transform: scale(.5);\n  transition:\n    opacity var(--xiaohei-motion-fast) ease,\n    transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);\n}\n\n:where(#root) :where(input[type='checkbox'])::before {\n  clip-path: polygon(14% 44%, 0 62%, 40% 100%, 100% 20%, 82% 5%, 38% 70%);\n}\n\n:where(#root) :where(input[type='radio'])::before {\n  border-radius: 50%;\n}\n\n:where(#root) :where(input[type='checkbox'], input[type='radio']):checked {\n  border-color: var(--xiaohei-spirit-strong);\n  background: var(--xiaohei-spirit);\n  box-shadow: 0 0 0 3px var(--xiaohei-spirit-faint);\n}\n\n:where(#root) :where(input[type='checkbox'], input[type='radio']):checked::before {\n  opacity: 1;\n  transform: scale(1);\n}\n\n:where(#root) :where(input[type='checkbox'], input[type='radio']):disabled {\n  cursor: not-allowed;\n  opacity: .48;\n}\n\n:where(#root) :where(input[type='range']) {\n  -webkit-appearance: none;\n  appearance: none;\n  height: 16px;\n  margin: 0;\n  background: transparent;\n  cursor: pointer;\n}\n\n:where(#root) :where(input[type='range'])::-webkit-slider-runnable-track {\n  height: 4px;\n  border-radius: 999px;\n  background: var(--xiaohei-surface-muted);\n  box-shadow: inset 0 0 0 1px var(--xiaohei-edge);\n}\n\n:where(#root) :where(input[type='range'])::-webkit-slider-thumb {\n  width: 14px;\n  height: 14px;\n  margin-top: -5px;\n  border: 2px solid var(--xiaohei-surface-raised);\n  border-radius: 50%;\n  background: var(--xiaohei-spirit);\n  box-shadow: 0 2px 6px var(--xiaohei-shadow);\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n:where(#root) :where(input[type='range'])::-moz-range-track {\n  height: 4px;\n  border: 0;\n  border-radius: 999px;\n  background: var(--xiaohei-surface-muted);\n  box-shadow: inset 0 0 0 1px var(--xiaohei-edge);\n}\n\n:where(#root) :where(input[type='range'])::-moz-range-progress {\n  height: 4px;\n  border-radius: 999px;\n  background: var(--xiaohei-spirit);\n}\n\n:where(#root) :where(input[type='range'])::-moz-range-thumb {\n  width: 10px;\n  height: 10px;\n  border: 2px solid var(--xiaohei-surface-raised);\n  border-radius: 50%;\n  background: var(--xiaohei-spirit);\n  box-shadow: 0 2px 6px var(--xiaohei-shadow);\n}\n\n:where(#root) :where(input[type='range']):disabled {\n  cursor: not-allowed;\n  opacity: .48;\n}\n\n:where(#root) :where(input[type='file'])::file-selector-button {\n  margin-inline-end: 10px;\n  padding: 6px 10px;\n  border: 1px solid var(--xiaohei-edge);\n  border-radius: var(--xiaohei-radius-small);\n  color: var(--dsw-alias-label-primary);\n  background: var(--xiaohei-plugin-control-fill);\n  font: inherit;\n  cursor: pointer;\n}\n\n:where(#root) :where(progress) {\n  overflow: hidden;\n  border: 0;\n  border-radius: 999px;\n  color: var(--xiaohei-spirit);\n  background: var(--xiaohei-surface-muted);\n  accent-color: var(--xiaohei-spirit);\n}\n\n:where(#root) :where(progress)::-webkit-progress-bar {\n  background: var(--xiaohei-surface-muted);\n}\n\n:where(#root) :where(progress)::-webkit-progress-value {\n  background: var(--xiaohei-spirit);\n}\n\n:where(#root) :where(progress)::-moz-progress-bar {\n  background: var(--xiaohei-spirit);\n}\n\n:where(#root) :where(fieldset) {\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\n:where(#root) :where(legend) {\n  padding: 0;\n  color: var(--dsw-alias-label-secondary);\n}\n\n:where(#root) :where(summary) {\n  cursor: pointer;\n}\n\n:where(#root) :where(a) {\n  color: var(--xiaohei-spirit-strong);\n  text-decoration-color: var(--xiaohei-edge-strong);\n  text-underline-offset: .18em;\n}\n\n:where(#root) :where(a):hover {\n  text-decoration-color: currentColor;\n}\n\n#root {\n  scrollbar-width: thin;\n  scrollbar-color: transparent transparent;\n}\n\n#root:hover,\n#root:focus-within {\n  scrollbar-color: var(--dsw-alias-scrollbar-bg-l1) transparent;\n}\n\n#root ::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n\n#root ::-webkit-scrollbar-track,\n#root ::-webkit-scrollbar-corner {\n  background: transparent;\n}\n\n#root ::-webkit-scrollbar-thumb {\n  min-width: 28px;\n  min-height: 28px;\n  border: 2px solid transparent;\n  border-radius: 999px;\n  background: transparent;\n  background-clip: padding-box;\n}\n\n#root:hover ::-webkit-scrollbar-thumb,\n#root:focus-within ::-webkit-scrollbar-thumb {\n  background-color: var(--dsw-alias-scrollbar-bg-l1);\n}\n\n#root ::-webkit-scrollbar-thumb:hover {\n  background-color: var(--dsw-alias-scrollbar-hover-l1);\n}\n\n@media (forced-colors: active) {\n  :where(#root) :where(input, textarea, select, button, progress) {\n    forced-color-adjust: auto;\n  }\n}\n";
+//# sourceMappingURL=controls.d.ts.map