2026-08-14 22:30:15 +08:00
window . _ _ModuleLoader _ _ . load ( { id : "dsh-client-liang-intensity-skin" , factory : ( require ) => { var module = { exports : { } } ; var exports = module . exports ;
var _ _defProp = Object . defineProperty ;
var _ _getOwnPropDesc = Object . getOwnPropertyDescriptor ;
var _ _getOwnPropNames = Object . getOwnPropertyNames ;
var _ _hasOwnProp = Object . prototype . hasOwnProperty ;
var _ _export = ( target , all ) => {
for ( var name in all )
_ _defProp ( target , name , { get : all [ name ] , enumerable : true } ) ;
} ;
var _ _copyProps = ( to , from , except , desc ) => {
if ( from && typeof from === "object" || typeof from === "function" ) {
for ( let key of _ _getOwnPropNames ( from ) )
if ( ! _ _hasOwnProp . call ( to , key ) && key !== except )
_ _defProp ( to , key , { get : ( ) => from [ key ] , enumerable : ! ( desc = _ _getOwnPropDesc ( from , key ) ) || desc . enumerable } ) ;
}
return to ;
} ;
var _ _toCommonJS = ( mod ) => _ _copyProps ( _ _defProp ( { } , "__esModule" , { value : true } ) , mod ) ;
// src/client/index.tsx
var index _exports = { } ;
_ _export ( index _exports , {
apply : ( ) => apply ,
inject : ( ) => inject
} ) ;
module . exports = _ _toCommonJS ( index _exports ) ;
var import _react = require ( "react" ) ;
// src/client/skin.css
2026-08-18 19:01:24 +08:00
var skin _default = ` .liang-skin-backdrop {
position : fixed ;
z - index : 0 ;
inset : 0 ;
overflow : hidden ;
pointer - events : none ;
background : var ( -- liang - page , transparent ) ;
opacity : 0 ;
transition : opacity 220 ms ease , background - color 180 ms linear ;
}
body [ data - liang - skin = "on" ] . liang - skin - backdrop {
opacity : 1 ;
}
. liang - skin - backdrop img {
position : absolute ;
top : 50 % ;
right : 0 ;
display : block ;
width : min ( 42 vw , 720 px ) ;
height : 100 vh ;
object - fit : cover ;
object - position : 50 % 42 % ;
opacity : var ( -- liang - portrait - opacity , 0.45 ) ;
transform : translateY ( - 50 % ) ;
filter : none ;
mask - image : linear - gradient ( 90 deg , transparent 0 % , rgb ( 0 0 0 / 20 % ) 10 % , black 30 % , black 100 % ) ;
transition : filter 180 ms linear ;
}
. liang - skin - backdrop img {
display : none ;
}
. liang - skin - backdrop [ data - media = "sequence" ] . liang - skin - poster {
display : none ;
}
. liang - skin - backdrop [ data - media = "sequence" ] . liang - skin - sequence - frame {
display : block ;
opacity : var ( -- liang - portrait - opacity , 0.82 ) ;
}
. liang - skin - backdrop [ data - media = "poster" ] . liang - skin - sequence - frame {
display : none ;
}
. liang - skin - backdrop [ data - media = "poster" ] . liang - skin - poster {
display : block ;
}
. liang - skin - backdrop [ data - media = "color" ] img {
display : none ;
}
. liang - skin - backdrop : : after {
position : absolute ;
inset : 0 ;
content : "" ;
background : linear - gradient ( 90 deg , var ( -- liang - page , transparent ) 0 28 % , transparent 57 % 100 % ) ;
}
body [ data - liang - skin = "on" ] {
-- dsw - alias - bg - base : var ( -- liang - bg - base ) ! important ;
-- dsw - alias - bg - layer - 1 : var ( -- liang - layer - 1 ) ! important ;
-- dsw - alias - bg - layer - 2 : var ( -- liang - layer - 2 ) ! important ;
-- dsw - alias - bg - layer - 3 : var ( -- liang - layer - 3 ) ! important ;
-- dsw - specific - sidebar - fill : var ( -- liang - sidebar ) ! important ;
-- dsw - alias - label - primary : var ( -- liang - ink ) ! important ;
-- dsw - alias - label - primary - dimmed : var ( -- liang - ink ) ! important ;
-- dsw - alias - label - secondary : var ( -- liang - secondary ) ! important ;
-- dsw - alias - label - tertiary : var ( -- liang - tertiary ) ! important ;
-- dsw - alias - label - caption : var ( -- liang - tertiary ) ! important ;
-- dsw - alias - border - l1 : var ( -- liang - border ) ! important ;
-- dsw - alias - border - l2 - darkmode - thin : var ( -- liang - border ) ! important ;
-- dsw - alias - border - l2 : var ( -- liang - border ) ! important ;
-- dsw - alias - border - l3 : var ( -- liang - border ) ! important ;
-- dsw - alias - button - primary - fill : var ( -- liang - accent ) ! important ;
-- dsw - alias - button - primary - hover : var ( -- liang - accent - hover ) ! important ;
-- dsw - alias - button - info - fill : var ( -- liang - accent ) ! important ;
-- dsw - alias - button - info - hover : var ( -- liang - accent - hover ) ! important ;
-- dsw - alias - state - business - primary : var ( -- liang - accent ) ! important ;
-- dsw - alias - interactive - bg - hover : var ( -- liang - hover ) ! important ;
-- dsw - alias - interactive - bg - active : var ( -- liang - hover ) ! important ;
-- dsw - alias - button - elevated - fill : var ( -- liang - layer - 1 ) ! important ;
-- dsw - alias - button - floating - fill : var ( -- liang - layer - 2 ) ! important ;
-- dsw - alias - button - floating - hover : var ( -- liang - layer - 3 ) ! important ;
-- dsw - alias - interactive - bg - hover - solid : var ( -- liang - layer - 2 ) ! important ;
-- dsw - specific - bubble : var ( -- liang - layer - 2 ) ! important ;
-- dsw - specific - input - major : var ( -- liang - layer - 1 ) ! important ;
-- dsw - specific - menu : var ( -- liang - layer - 3 ) ! important ;
-- dsw - specific - selector : var ( -- liang - layer - 2 ) ! important ;
-- dsw - alias - markdown - citation : var ( -- liang - layer - 2 ) ! important ;
-- dsw - alias - markdown - code - block - banner : var ( -- liang - layer - 1 ) ! important ;
-- dsw - alias - markdown - code - block : var ( -- liang - layer - 1 ) ! important ;
-- dsw - alias - markdown - code - segment - selected : var ( -- liang - layer - 2 ) ! important ;
-- dsw - alias - markdown - code - segment - unselected : var ( -- liang - layer - 1 ) ! important ;
-- dsw - alias - markdown - inline - code : var ( -- liang - layer - 2 ) ! important ;
-- dsw - alias - markdown - placeholder : var ( -- liang - layer - 1 ) ! important ;
-- dsw - alias - markdown - tag : var ( -- liang - layer - 2 ) ! important ;
background : var ( -- liang - page ) ! important ;
}
body [ data - liang - skin = "on" ] : is (
[ data - liang - stage = "0" ] ,
[ data - liang - stage = "1" ] ,
[ data - liang - stage = "2" ] ,
[ data - liang - stage = "3" ]
) {
-- dsw - alias - brand - primary - new - colorprimary - new - color : rgb ( 65 118 230 ) ! important ;
-- dsw - alias - brand - primary : rgb ( 15 17 21 ) ! important ;
-- dsw - alias - brand - text : rgb ( 15 17 21 ) ! important ;
-- dsw - alias - button - primary - fill : rgb ( 15 17 21 ) ! important ;
-- dsw - alias - button - primary - hover : rgb ( 53 54 56 ) ! important ;
-- dsw - alias - button - info - fill : rgb ( 65 118 230 ) ! important ;
-- dsw - alias - button - info - hover : rgb ( 103 158 254 ) ! important ;
-- dsw - alias - state - business - primary : rgb ( 65 118 230 ) ! important ;
-- dsw - alias - label - primary - inverted : rgb ( 249 250 251 ) ! important ;
-- dsw - alias - button - elevated - fill : rgb ( 255 255 255 ) ! important ;
-- dsw - alias - button - floating - fill : rgb ( 255 255 255 ) ! important ;
-- dsw - alias - button - floating - hover : rgb ( 241 243 245 ) ! important ;
-- dsw - alias - interactive - bg - hover - solid : rgb ( 241 243 245 ) ! important ;
-- dsw - specific - bubble : rgb ( 237 243 254 ) ! important ;
-- dsw - specific - input - major : rgb ( 255 255 255 ) ! important ;
-- dsw - specific - menu : rgb ( 255 255 255 ) ! important ;
-- dsw - specific - selector : rgb ( 245 246 247 ) ! important ;
}
body [ data - liang - skin = "on" ] [ data - liang - stage = "5" ] {
-- dsw - alias - brand - primary - new - colorprimary - new - color : # c19a49 ! important ;
-- dsw - alias - brand - primary : # c19a49 ! important ;
-- dsw - alias - brand - text : # d5b56e ! important ;
-- dsw - alias - button - info - fill : # c19a49 ! important ;
-- dsw - alias - button - info - hover : # d5b56e ! important ;
-- dsw - alias - state - business - primary : # c19a49 ! important ;
-- dsw - alias - bg - module - platform : var ( -- liang - layer - 3 ) ! important ;
-- dsw - specific - sidebar - nav - item - active : var ( -- liang - layer - 3 ) ! important ;
-- dsw - specific - sidebar - nav - item - hover : var ( -- liang - hover ) ! important ;
}
/ * T h e l o w - i n t e n s i t y s k i n i s l i g h t b y d e f a u l t , b u t i t m u s t n o t t u r n a d a r k
Harness document into a light surface . Keep the skin ' s portrait progression
while switching the shared UI layers back to a readable charcoal palette . * /
body [ data - liang - skin = "on" ] [ data - ds - dark - theme ] : is (
[ data - liang - stage = "0" ] ,
[ data - liang - stage = "1" ] ,
[ data - liang - stage = "2" ] ,
[ data - liang - stage = "3" ]
) {
-- liang - page : rgb ( 17 17 17 ) ! important ;
-- liang - bg - base : rgb ( 17 17 17 / 42 % ) ! important ;
-- liang - layer - 1 : rgb ( 30 27 25 / 94 % ) ! important ;
-- liang - layer - 2 : rgb ( 41 35 30 / 96 % ) ! important ;
-- liang - layer - 3 : rgb ( 41 35 30 / 99 % ) ! important ;
-- liang - sidebar : rgb ( 23 20 18 / 96 % ) ! important ;
-- liang - ink : rgb ( 244 241 232 ) ! important ;
-- liang - secondary : rgb ( 184 180 169 ) ! important ;
-- liang - tertiary : rgb ( 137 134 126 ) ! important ;
-- liang - border : rgb ( 244 241 232 / 15 % ) ! important ;
-- liang - hover : rgb ( 244 241 232 / 9 % ) ! important ;
-- dsw - alias - brand - primary : var ( -- liang - accent ) ! important ;
-- dsw - alias - brand - text : var ( -- liang - accent ) ! important ;
-- dsw - alias - button - primary - fill : var ( -- liang - accent ) ! important ;
-- dsw - alias - button - primary - hover : var ( -- liang - accent - hover ) ! important ;
-- dsw - alias - button - info - fill : var ( -- liang - accent ) ! important ;
-- dsw - alias - button - info - hover : var ( -- liang - accent - hover ) ! important ;
-- dsw - alias - state - business - primary : var ( -- liang - accent ) ! important ;
-- dsw - alias - button - elevated - fill : var ( -- liang - layer - 1 ) ! important ;
-- dsw - alias - button - floating - fill : var ( -- liang - layer - 2 ) ! important ;
-- dsw - alias - button - floating - hover : var ( -- liang - layer - 3 ) ! important ;
-- dsw - alias - interactive - bg - hover - solid : var ( -- liang - layer - 2 ) ! important ;
-- dsw - specific - bubble : var ( -- liang - layer - 2 ) ! important ;
-- dsw - specific - input - major : var ( -- liang - layer - 1 ) ! important ;
-- dsw - specific - menu : var ( -- liang - layer - 3 ) ! important ;
-- dsw - specific - selector : var ( -- liang - layer - 2 ) ! important ;
background : var ( -- liang - page ) ! important ;
}
body [ data - liang - skin = "on" ] [ data - ds - dark - theme ] : is (
[ data - liang - stage = "0" ] ,
[ data - liang - stage = "1" ] ,
[ data - liang - stage = "2" ] ,
[ data - liang - stage = "3" ]
) . liang - skin - backdrop {
background : var ( -- liang - page ) ! important ;
}
body [ data - liang - skin = "on" ] [ data - ds - dark - theme ] : is (
[ data - liang - stage = "0" ] ,
[ data - liang - stage = "1" ] ,
[ data - liang - stage = "2" ] ,
[ data - liang - stage = "3" ]
) . liang - skin - backdrop : : after {
background : linear - gradient ( 90 deg , var ( -- liang - page ) 0 28 % , transparent 57 % 100 % ) ;
}
/ * T h e h o s t r e n d e r s t h e r u n n i n g - t u r n l a b e l a s a c l i p p e d b l u e t e x t g r a d i e n t .
Retarget only that gradient ' s color tokens in the custom dark skin ; keep
the host ' s text clipping and shimmer behavior , and leave light mode alone . * /
body [ data - liang - skin = "on" ] [ data - liang - stage = "5" ] [ class *= "_turnStatus" ] {
-- dsw - static - deepseek - 500 : # c19a49 ! important ;
-- dsw - static - deepseek - 200 : # d5b56e ! important ;
}
body [ data - liang - skin = "on" ] [ data - liang - stage = "5" ] [ class *= "_turnStatusClock" ] {
color : # c19a49 ! important ;
- webkit - text - fill - color : # c19a49 ! important ;
}
/* Preserve the wordmark badge contrast in the low-intensity shell. */
body [ data - liang - skin = "on" ] : is (
[ data - liang - stage = "0" ] ,
[ data - liang - stage = "1" ] ,
[ data - liang - stage = "2" ] ,
[ data - liang - stage = "3" ]
) button [ aria - label = "\u65B0\u5EFA\u4F1A\u8BDD" ] svg [ viewBox = "0 0 182 24" ] > rect [ width = "52" ] {
fill : rgb ( 15 17 21 ) ! important ;
}
body [ data - liang - skin = "on" ] : is (
[ data - liang - stage = "0" ] ,
[ data - liang - stage = "1" ] ,
[ data - liang - stage = "2" ] ,
[ data - liang - stage = "3" ]
) button [ aria - label = "\u65B0\u5EFA\u4F1A\u8BDD" ] svg [ viewBox = "0 0 182 24" ] > g [ clip - path *= "badge" ] path {
fill : rgb ( 249 250 251 ) ! important ;
}
body [ data - liang - skin = "on" ] [ data - liang - stage = "5" ] button [ aria - label = "\u65B0\u5EFA\u4F1A\u8BDD" ] svg [ viewBox = "0 0 182 24" ] > rect [ width = "52" ] {
fill : # c19a49 ! important ;
}
body [ data - liang - skin = "on" ] [ data - liang - stage = "5" ] button [ aria - label = "\u65B0\u5EFA\u4F1A\u8BDD" ] svg [ viewBox = "0 0 182 24" ] > g [ clip - path *= "badge" ] path {
fill : # 171816 ! important ;
}
body [ data - liang - skin = "on" ] [ data - liang - stage = "5" ] [ aria - label ^= "\u9009\u62E9\u6A21\u578B" ] > span : nth - of - type ( 2 ) {
color : # d5b56e ! important ;
}
body [ data - liang - skin = "on" ] [ data - liang - stage = "5" ] [ class *= "heroGlow" ] ellipse {
fill : # c19a49 ! important ;
fill - opacity : 0.16 ! important ;
}
body [ data - liang - skin = "on" ] [ data - liang - stage = "5" ] span [ class *= "_previewBadge" ] {
color : # 171816 ! important ;
background : # c19a49 ! important ;
}
body [ data - liang - skin = "on" ] [ data - liang - stage = "5" ] button [ aria - label = "\u53D1\u9001\u6D88\u606F" ] {
color : # 171816 ! important ;
}
body [ data - liang - skin = "on" ] [ data - liang - stage = "5" ] button [ aria - label = "\u53D1\u9001\u6D88\u606F" ] : disabled {
opacity : 0.62 ;
}
body [ data - liang - skin = "on" ] : is (
[ data - liang - stage = "0" ] ,
[ data - liang - stage = "1" ] ,
[ data - liang - stage = "2" ] ,
[ data - liang - stage = "3" ]
) button [ aria - label = "\u53D1\u9001\u6D88\u606F" ] {
color : # fff ! important ;
}
body [ data - liang - skin = "on" ] : is (
[ data - liang - stage = "0" ] ,
[ data - liang - stage = "1" ] ,
[ data - liang - stage = "2" ] ,
[ data - liang - stage = "3" ]
) button [ aria - label = "\u53D1\u9001\u6D88\u606F" ] : disabled {
color : rgb ( 255 255 255 / 92 % ) ! important ;
background : rgb ( 65 118 230 / 42 % ) ! important ;
opacity : 1 ;
}
body [ data - liang - skin = "on" ] > # root {
position : relative ;
z - index : 1 ;
background : transparent ! important ;
}
body [ data - liang - skin = "on" ] button ,
body [ data - liang - skin = "on" ] input ,
body [ data - liang - skin = "on" ] textarea {
transition : color 160 ms linear , background - color 160 ms linear , border - color 160 ms linear ;
}
/ * T h e c o m p o s e r c a r d h a s a n a t i v e t h e m e - m o d e f i l l , s o k e e p i t s s u r f a c e a n d
readable ink aligned with the active Liang palette . * /
body [ data - liang - skin = "on" ] : is (
[ data - liang - stage = "0" ] ,
[ data - liang - stage = "1" ] ,
[ data - liang - stage = "2" ] ,
[ data - liang - stage = "3" ]
) [ data - composer - card = "true" ] {
border - color : var ( -- liang - border ) ! important ;
color : var ( -- liang - ink ) ! important ;
background : var ( -- liang - layer - 1 ) ! important ;
box - shadow : 0 8 px 28 px rgb ( 20 22 20 / 8 % ) ;
}
body [ data - liang - skin = "on" ] : is (
[ data - liang - stage = "0" ] ,
[ data - liang - stage = "1" ] ,
[ data - liang - stage = "2" ] ,
[ data - liang - stage = "3" ]
) [ data - composer - card = "true" ] : is ( textarea , button , [ data - input - mirror = "true" ] ) {
color : var ( -- liang - ink ) ! important ;
caret - color : var ( -- liang - accent ) ! important ;
}
body [ data - liang - skin = "on" ] : is (
[ data - liang - stage = "0" ] ,
[ data - liang - stage = "1" ] ,
[ data - liang - stage = "2" ] ,
[ data - liang - stage = "3" ]
) [ data - composer - card = "true" ] textarea : : placeholder {
color : var ( -- liang - tertiary ) ! important ;
opacity : 1 ;
}
. liang - effort - control {
-- liang - control - accent : var ( -- dsw - alias - brand - primary - new - colorprimary - new - color , # 4176e6 ) ;
-- liang - control - rail : var ( -- dsw - alias - border - l3 , rgb ( 0 0 0 / 16 % ) ) ;
position : relative ;
display : flex ;
width : 124 px ;
height : 28 px ;
align - items : center ;
margin : 0 3 px ;
overflow : visible ;
}
body [ data - liang - skin = "on" ] . liang - effort - control {
-- liang - control - accent : var ( -- liang - secondary ) ;
-- liang - control - rail : color - mix ( in srgb , var ( -- liang - secondary ) 28 % , transparent ) ;
}
. liang - effort - control _ _ticks {
position : absolute ;
z - index : 0 ;
inset : 0 10 px ;
pointer - events : none ;
}
. liang - effort - control _ _ticks : : before {
position : absolute ;
top : 50 % ;
right : 0 ;
left : 0 ;
height : 1 px ;
content : "" ;
background : var ( -- liang - control - rail ) ;
transform : translateY ( - 50 % ) ;
}
. liang - effort - control _ _tooltip {
position : absolute ;
z - index : 4 ;
bottom : calc ( 100 % + 7 px ) ;
left : calc ( 10 px + ( 100 % - 20 px ) * var ( -- liang - slider - ratio ) ) ;
min - width : max - content ;
padding : 5 px 8 px ;
border : 1 px solid var ( -- liang - border , rgb ( 0 0 0 / 12 % ) ) ;
border - radius : 7 px ;
color : var ( -- liang - ink , # 171816 ) ;
background : var ( -- liang - layer - 1 , # fff ) ;
box - shadow : 0 5 px 16 px rgb ( 0 0 0 / 16 % ) ;
font - size : 11 px ;
font - weight : 600 ;
line - height : 16 px ;
letter - spacing : 0.01 em ;
pointer - events : none ;
transform : translateX ( - 50 % ) ;
white - space : nowrap ;
}
. liang - effort - control _ _tooltip : : after {
position : absolute ;
top : 100 % ;
left : 50 % ;
width : 7 px ;
height : 7 px ;
content : "" ;
background : inherit ;
transform : translate ( - 50 % , - 4 px ) rotate ( 45 deg ) ;
}
. liang - effort - control _ _tick {
position : absolute ;
top : 50 % ;
width : 1 px ;
height : 7 px ;
background : var ( -- liang - control - accent ) ;
opacity : 0.42 ;
transform : translate ( - 50 % , - 50 % ) ;
}
. liang - effort - control _ _range {
position : relative ;
z - index : 1 ;
width : calc ( 100 % - 7 px ) ;
height : 28 px ;
margin : 0 3.5 px ;
cursor : ew - resize ;
appearance : none ;
background : transparent ;
touch - action : pan - y ;
}
. liang - effort - control _ _range : disabled {
cursor : progress ;
opacity : 0.58 ;
}
. liang - effort - control _ _range : : - webkit - slider - runnable - track {
height : 1 px ;
border - radius : 1 px ;
background : transparent ;
}
. liang - effort - control _ _range : : - webkit - slider - thumb {
width : 13 px ;
height : 13 px ;
margin - top : - 6 px ;
border : 1.5 px solid color - mix ( in srgb , var ( -- liang - control - accent ) 72 % , transparent ) ;
border - radius : 50 % ;
appearance : none ;
background : radial - gradient ( circle , var ( -- liang - control - accent ) 0 2 px , color - mix ( in srgb , var ( -- liang - control - accent ) 22 % , var ( -- dsw - alias - bg - layer - 1 , # fff ) ) 2.5 px ) ;
box - shadow : 0 1 px 4 px rgb ( 0 0 0 / 14 % ) ;
}
body [ data - liang - skin = "on" ] . liang - effort - control _ _range : : - webkit - slider - thumb {
width : 13 px ;
height : 13 px ;
margin - top : - 6 px ;
border - color : color - mix ( in srgb , var ( -- liang - control - accent ) 72 % , transparent ) ;
background : radial - gradient ( circle , var ( -- liang - control - accent ) 0 2 px , color - mix ( in srgb , var ( -- liang - control - accent ) 22 % , var ( -- liang - layer - 1 ) ) 2.5 px ) ;
}
. liang - effort - control _ _range : : - moz - range - track {
height : 1 px ;
background : transparent ;
}
. liang - effort - control _ _range : : - moz - range - progress {
height : 1 px ;
background : transparent ;
}
. liang - effort - control _ _range : : - moz - range - thumb {
width : 11 px ;
height : 11 px ;
border : 1.5 px solid color - mix ( in srgb , var ( -- liang - control - accent ) 72 % , transparent ) ;
border - radius : 50 % ;
background : color - mix ( in srgb , var ( -- liang - control - accent ) 24 % , var ( -- dsw - alias - bg - layer - 1 , # fff ) ) ;
}
. liang - effort - control _ _range : focus - visible {
outline : none ;
}
. liang - effort - control [ data - state = "error" ] {
-- liang - control - accent : var ( -- dsw - alias - state - error - primary , # e43c3c ) ;
}
. liang - appearance - choice {
box - sizing : border - box ;
border : 1 px solid var ( -- dsw - alias - border - l2 ) ;
flex : 180 px ;
flex - direction : column ;
justify - content : center ;
align - items : center ;
gap : 4 px ;
padding : 20 px 32 px ;
border - radius : 16 px ;
font : inherit ;
color : var ( -- dsw - alias - label - primary ) ;
cursor : pointer ;
background : transparent ;
font - size : 14 px ;
line - height : 22 px ;
display : flex ;
}
[ class *= "_8HJdBW_cubeRow" ] : has ( . liang - appearance - choice ) {
display : grid ;
grid - template - columns : repeat ( 4 , minmax ( 0 , 1 fr ) ) ;
}
. liang - appearance - choice : hover : not ( [ aria - pressed = "true" ] ) {
background : var ( -- dsw - alias - interactive - bg - hover ) ;
}
. liang - appearance - choice [ aria - pressed = "true" ] {
border - color : var ( -- dsw - static - neutral - bluish - 400 ) ;
background : var ( -- dsw - alias - bg - module - platform ) ;
}
. liang - appearance - choice _ _icon {
display : block ;
flex : 0 0 16 px ;
width : 16 px ;
height : 16 px ;
color : currentColor ;
font - size : 16 px ;
line - height : 16 px ;
}
. liang - appearance - choice _ _label {
display : block ;
}
/ * K e e p t h e h o s t ' s t h r e e t h e m e c u b e s u n t o u c h e d . T h e s e r u l e s o n l y s t y l e t h e
fourth button that is appended to the host cube row . * /
. liang - appearance - choice : disabled {
cursor : progress ;
opacity : 0.7 ;
}
. liang - appearance - binding {
box - sizing : border - box ;
display : flex ;
width : 100 % ;
min - height : 28 px ;
align - items : center ;
justify - content : space - between ;
gap : 16 px ;
padding : 4 px 0 0 ;
color : var ( -- dsw - alias - label - primary ) ;
font : inherit ;
font - size : 14 px ;
line - height : 22 px ;
cursor : pointer ;
}
. liang - appearance - binding _ _label {
display : block ;
min - width : 0 ;
overflow : hidden ;
text - overflow : ellipsis ;
white - space : nowrap ;
}
. liang - appearance - binding _ _copy {
display : flex ;
min - width : 0 ;
flex - direction : column ;
gap : 1 px ;
}
. liang - appearance - binding _ _description {
display : block ;
overflow : hidden ;
color : var ( -- dsw - alias - label - secondary ) ;
font - size : 12 px ;
line - height : 18 px ;
text - overflow : ellipsis ;
white - space : nowrap ;
}
. liang - appearance - binding _ _input {
position : relative ;
flex : 0 0 36 px ;
width : 36 px ;
height : 20 px ;
margin : 0 ;
border : 1 px solid var ( -- dsw - alias - border - l2 ) ;
border - radius : 999 px ;
outline : none ;
cursor : pointer ;
appearance : none ;
background : var ( -- dsw - alias - interactive - bg - hover , var ( -- dsw - alias - bg - module - platform ) ) ;
}
. liang - appearance - binding _ _input : : before {
position : absolute ;
top : 2 px ;
left : 2 px ;
width : 14 px ;
height : 14 px ;
border - radius : 50 % ;
content : "" ;
background : var ( -- dsw - alias - label - primary ) ;
box - shadow : 0 1 px 3 px rgb ( 0 0 0 / 18 % ) ;
transition : transform 160 ms ease , background - color 160 ms ease ;
}
. liang - appearance - binding _ _input : checked {
border - color : var ( -- dsw - static - neutral - bluish - 400 ) ;
background : var ( -- dsw - static - neutral - bluish - 400 ) ;
}
. liang - appearance - binding _ _input : checked : : before {
background : var ( -- dsw - alias - bg - layer - 1 , # fff ) ;
transform : translateX ( 16 px ) ;
}
. liang - appearance - binding _ _input : focus - visible {
box - shadow : 0 0 0 2 px var ( -- dsw - alias - interactive - bg - hover ) ;
}
. liang - appearance - binding _ _input : disabled {
cursor : progress ;
opacity : 0.7 ;
}
@ media ( max - width : 760 px ) {
. liang - effort - control {
width : 92 px ;
}
. liang - skin - backdrop img {
right : - 18 vw ;
width : 92 vw ;
opacity : calc ( var ( -- liang - portrait - opacity , 0.45 ) * 0.72 ) ;
}
}
@ media ( prefers - reduced - motion : reduce ) {
. liang - skin - backdrop ,
. liang - skin - backdrop img ,
body [ data - liang - skin = "on" ] button ,
body [ data - liang - skin = "on" ] input ,
body [ data - liang - skin = "on" ] textarea {
transition : none ;
}
}
2026-08-15 12:54:08 +08:00
` ;
2026-08-14 22:30:15 +08:00
// src/client/logic.ts
var PREVIEW _MAX _FRAME = 240 ;
var MAX _LEVEL = 30 ;
var LIANG _RANKS = [ "\u5C0F\u96BE\u6881" , "\u7262\u6881" , "\u6881\u5B50" , "\u6881\u5723" , "\u6881\u795E" , "\u6881\u7956" ] ;
var STOPS = [
{ at : 0 , page : [ 232 , 233 , 229 ] , surface : [ 248 , 248 , 245 ] , surface2 : [ 238 , 239 , 235 ] , ink : [ 23 , 24 , 22 ] , secondary : [ 112 , 116 , 111 ] , accent : [ 181 , 43 , 36 ] , portraitOpacity : 0.92 } ,
{ at : 6 , page : [ 211 , 211 , 206 ] , surface : [ 239 , 239 , 234 ] , surface2 : [ 224 , 224 , 218 ] , ink : [ 26 , 26 , 24 ] , secondary : [ 101 , 101 , 96 ] , accent : [ 181 , 43 , 36 ] , portraitOpacity : 0.93 } ,
{ at : 12 , page : [ 171 , 168 , 162 ] , surface : [ 211 , 208 , 201 ] , surface2 : [ 190 , 186 , 179 ] , ink : [ 27 , 26 , 24 ] , secondary : [ 83 , 79 , 74 ] , accent : [ 166 , 54 , 42 ] , portraitOpacity : 0.94 } ,
{ at : 18 , page : [ 117 , 112 , 106 ] , surface : [ 154 , 148 , 140 ] , surface2 : [ 128 , 122 , 115 ] , ink : [ 24 , 22 , 20 ] , secondary : [ 65 , 61 , 56 ] , accent : [ 154 , 56 , 42 ] , portraitOpacity : 0.94 } ,
{ at : 24 , page : [ 43 , 39 , 37 ] , surface : [ 48 , 43 , 40 ] , surface2 : [ 58 , 51 , 46 ] , ink : [ 244 , 241 , 232 ] , secondary : [ 184 , 180 , 169 ] , accent : [ 181 , 92 , 54 ] , portraitOpacity : 0.94 } ,
{ at : 30 , page : [ 17 , 17 , 17 ] , surface : [ 30 , 27 , 25 ] , surface2 : [ 41 , 35 , 30 ] , ink : [ 244 , 241 , 232 ] , secondary : [ 184 , 180 , 169 ] , accent : [ 193 , 154 , 73 ] , portraitOpacity : 0.94 }
] ;
function clampFrame ( value ) {
if ( ! Number . isFinite ( value ) ) return 0 ;
return Math . min ( PREVIEW _MAX _FRAME , Math . max ( 0 , Math . round ( value ) ) ) ;
}
function frameForEffort ( index , count ) {
if ( count <= 1 || ! Number . isFinite ( index ) ) return 0 ;
const safe = Math . min ( count - 1 , Math . max ( 0 , Math . round ( index ) ) ) ;
return Math . round ( safe / ( count - 1 ) * PREVIEW _MAX _FRAME ) ;
}
function nearestEffortIndex ( frame , efforts ) {
if ( efforts . length === 0 ) return - 1 ;
const safe = clampFrame ( frame ) ;
let best = 0 ;
let distance = Math . abs ( safe - frameForEffort ( 0 , efforts . length ) ) ;
for ( let index = 1 ; index < efforts . length ; index += 1 ) {
const next = Math . abs ( safe - frameForEffort ( index , efforts . length ) ) ;
if ( next < distance ) {
best = index ;
distance = next ;
}
}
return best ;
}
function selectedEffortIndex ( efforts , selectedId , defaultId ) {
const id = selectedId ? ? defaultId ;
return id === void 0 ? - 1 : efforts . findIndex ( ( effort ) => effort . id === id ) ;
}
function portraitBlendForLevel ( level , anchors ) {
if ( anchors . length === 0 ) return { lowerIndex : - 1 , upperIndex : - 1 , mix : 0 } ;
const safeLevel = Number . isFinite ( level ) ? Math . min ( anchors [ anchors . length - 1 ] , Math . max ( anchors [ 0 ] , level ) ) : anchors [ 0 ] ;
let upperIndex = anchors . findIndex ( ( anchor ) => anchor >= safeLevel ) ;
if ( upperIndex < 0 ) upperIndex = anchors . length - 1 ;
const lowerIndex = Math . max ( 0 , upperIndex - ( anchors [ upperIndex ] > safeLevel ? 1 : 0 ) ) ;
const span = anchors [ upperIndex ] - anchors [ lowerIndex ] ;
return {
lowerIndex ,
upperIndex ,
mix : span === 0 ? 0 : ( safeLevel - anchors [ lowerIndex ] ) / span
} ;
}
function liangRankForFrame ( rawFrame ) {
const level = clampFrame ( rawFrame ) / PREVIEW _MAX _FRAME * MAX _LEVEL ;
const index = level >= MAX _LEVEL ? LIANG _RANKS . length - 1 : Math . floor ( level / 6 ) ;
return LIANG _RANKS [ Math . min ( LIANG _RANKS . length - 1 , Math . max ( 0 , index ) ) ] ;
}
function indicatorLabel ( rawFrame , efforts ) {
const effort = efforts [ nearestEffortIndex ( rawFrame , efforts ) ] ;
return effort === void 0 ? liangRankForFrame ( rawFrame ) : ` ${ liangRankForFrame ( rawFrame ) } \x B7 ${ effort . name } ` ;
}
function lerp ( a , b , amount ) {
return a + ( b - a ) * amount ;
}
function mix ( a , b , amount ) {
return [
Math . round ( lerp ( a [ 0 ] , b [ 0 ] , amount ) ) ,
Math . round ( lerp ( a [ 1 ] , b [ 1 ] , amount ) ) ,
Math . round ( lerp ( a [ 2 ] , b [ 2 ] , amount ) )
] ;
}
function rgb ( value , alpha = 1 ) {
return alpha === 1 ? ` rgb( ${ value [ 0 ] } ${ value [ 1 ] } ${ value [ 2 ] } ) ` : ` rgb( ${ value [ 0 ] } ${ value [ 1 ] } ${ value [ 2 ] } / ${ alpha } ) ` ;
}
function paletteForFrame ( rawFrame ) {
const frame = clampFrame ( rawFrame ) ;
const level = frame / PREVIEW _MAX _FRAME * MAX _LEVEL ;
const portraitStage = Math . min ( 5 , Math . floor ( level / 6 ) ) ;
const portraitFrom = STOPS [ portraitStage ] ;
const portraitTo = STOPS [ Math . min ( 5 , portraitStage + 1 ) ] ;
const portraitAmount = portraitFrom === portraitTo ? 0 : ( level - portraitFrom . at ) / ( portraitTo . at - portraitFrom . at ) ;
const dark = level >= 24 ;
const stage = dark ? 5 : 0 ;
const ui = dark ? STOPS [ 5 ] : STOPS [ 0 ] ;
const page = ui . page ;
const surface = ui . surface ;
const surface2 = ui . surface2 ;
const sidebar = mix ( page , surface2 , 0.25 ) ;
const ink = ui . ink ;
const secondary = ui . secondary ;
const accent = dark ? [ 193 , 154 , 73 ] : [ 65 , 118 , 230 ] ;
const accentHover = mix ( accent , ink , 0.13 ) ;
return {
level ,
stage ,
strength : level / MAX _LEVEL ,
page : rgb ( page ) ,
// Keep the shell readable while allowing the right-side portrait to remain
// visibly present. Dense controls use the opaque layer tokens below.
base : rgb ( page , dark ? 0.42 : 0.28 ) ,
layer1 : rgb ( surface , 0.94 ) ,
layer2 : rgb ( surface2 , 0.96 ) ,
layer3 : rgb ( surface2 , 0.99 ) ,
sidebar : rgb ( sidebar , 0.96 ) ,
ink : rgb ( ink ) ,
secondary : rgb ( secondary ) ,
tertiary : rgb ( mix ( secondary , page , 0.28 ) ) ,
border : rgb ( ink , dark ? 0.15 : 0.12 ) ,
accent : rgb ( accent ) ,
accentHover : rgb ( accentHover ) ,
hover : rgb ( ink , dark ? 0.09 : 0.07 ) ,
portraitOpacity : String ( lerp (
portraitFrom . portraitOpacity ,
portraitTo . portraitOpacity ,
portraitAmount
) )
} ;
}
// src/client/index.tsx
var import _jsx _runtime = require ( "react/jsx-runtime" ) ;
var PACKAGE _ID = "dsh-client-liang-intensity-skin" ;
var LOCALE _NAMESPACE = "liang.skin" ;
var ASSET _PREFIX = ` /plugins/ ${ PACKAGE _ID } /assets ` ;
2026-08-16 16:29:42 +08:00
var BIND _EFFORT _KEY = "dsh-liang-intensity-skin.bind-effort" ;
2026-08-14 22:30:15 +08:00
var PORTRAIT _ANCHORS = [
{ level : 0 , file : "stage-00.png" } ,
2026-08-14 22:48:03 +08:00
{ level : 1 , file : "level-01.png" } ,
{ level : 3 , file : "level-03.png" } ,
{ level : 4 , file : "level-04.png" } ,
2026-08-14 22:30:15 +08:00
{ level : 6 , file : "stage-06.png" } ,
2026-08-14 22:48:03 +08:00
{ level : 7 , file : "level-07.png" } ,
{ level : 9 , file : "level-09.png" } ,
{ level : 10 , file : "level-10.png" } ,
2026-08-14 22:30:15 +08:00
{ level : 12 , file : "stage-12.png" } ,
2026-08-14 22:48:03 +08:00
{ level : 13 , file : "level-13.png" } ,
{ level : 14 , file : "level-14.png" } ,
2026-08-14 22:30:15 +08:00
{ level : 15 , file : "bridge-15.png" } ,
2026-08-14 22:48:03 +08:00
{ level : 16 , file : "level-16.png" } ,
{ level : 17 , file : "level-17.png" } ,
2026-08-14 22:30:15 +08:00
{ level : 18 , file : "stage-18.png" } ,
2026-08-14 22:48:03 +08:00
{ level : 19 , file : "level-19.png" } ,
{ level : 21 , file : "level-21.png" } ,
{ level : 22 , file : "level-22.png" } ,
2026-08-14 22:30:15 +08:00
{ level : 24 , file : "stage-24.png" } ,
2026-08-14 22:48:03 +08:00
{ level : 25 , file : "level-25.png" } ,
2026-08-14 22:30:15 +08:00
{ level : 27 , file : "bridge-27.png" } ,
2026-08-14 22:48:03 +08:00
{ level : 28 , file : "level-28.png" } ,
{ level : 29 , file : "level-29.png" } ,
2026-08-14 22:30:15 +08:00
{ level : 30 , file : "stage-30.png" }
] ;
2026-08-18 19:03:18 +08:00
var ANCHOR _LEVELS = PORTRAIT _ANCHORS . map ( ( anchor ) => anchor . level ) ;
2026-08-14 22:30:15 +08:00
var cssVariables = [
"--liang-strength" ,
"--liang-page" ,
"--liang-bg-base" ,
"--liang-layer-1" ,
"--liang-layer-2" ,
"--liang-layer-3" ,
"--liang-sidebar" ,
"--liang-ink" ,
"--liang-secondary" ,
"--liang-tertiary" ,
"--liang-border" ,
"--liang-accent" ,
"--liang-accent-hover" ,
"--liang-hover" ,
"--liang-portrait-opacity"
] ;
var SkinPresenter = class {
scope ;
2026-08-15 12:54:08 +08:00
theme ;
2026-08-14 22:30:15 +08:00
root ;
poster ;
2026-08-18 19:01:24 +08:00
portrait ;
2026-08-14 22:30:15 +08:00
preloads ;
2026-08-18 19:09:38 +08:00
portraitReady = false ;
2026-08-14 22:30:15 +08:00
enabled = true ;
2026-08-15 22:42:27 +08:00
// Default to the max frame so the first paint after load is the dark shell;
// starting at 0 flashed the light palette before the directory resolved.
frame = PREVIEW _MAX _FRAME ;
pendingFrame = PREVIEW _MAX _FRAME ;
2026-08-14 22:30:15 +08:00
raf = 0 ;
disposed = false ;
unsubscribe ;
2026-08-15 12:54:08 +08:00
constructor ( scope , theme ) {
2026-08-14 22:30:15 +08:00
this . scope = scope ;
2026-08-15 12:54:08 +08:00
this . theme = theme ;
2026-08-14 22:30:15 +08:00
this . root = document . createElement ( "div" ) ;
this . root . className = "liang-skin-backdrop" ;
this . root . dataset . plugin = PACKAGE _ID ;
2026-08-18 19:09:38 +08:00
this . root . dataset . media = "poster" ;
2026-08-14 22:30:15 +08:00
this . root . setAttribute ( "aria-hidden" , "true" ) ;
this . poster = document . createElement ( "img" ) ;
this . poster . className = "liang-skin-poster" ;
this . poster . src = ` ${ ASSET _PREFIX } /liang-poster.png ` ;
this . poster . alt = "" ;
2026-08-18 19:01:24 +08:00
this . portrait = document . createElement ( "img" ) ;
this . portrait . className = "liang-skin-sequence-frame" ;
this . portrait . alt = "" ;
this . portrait . draggable = false ;
2026-08-18 19:03:18 +08:00
this . portrait . decoding = "async" ;
2026-08-18 19:01:24 +08:00
this . portrait . addEventListener ( "error" , this . handleSequenceError ) ;
2026-08-14 22:30:15 +08:00
this . preloads = PORTRAIT _ANCHORS . map ( ( { file } ) => {
const image = new Image ( ) ;
2026-08-18 19:09:38 +08:00
image . loading = "eager" ;
2026-08-18 19:03:18 +08:00
image . decoding = "async" ;
2026-08-14 22:30:15 +08:00
image . src = ` ${ ASSET _PREFIX } /portrait-source-v2/ ${ file } ` ;
return image ;
} ) ;
2026-08-18 19:09:38 +08:00
void Promise . all ( this . preloads . map ( ( image ) => image . decode ( ) ) ) . then (
( ) => {
if ( this . disposed ) return ;
this . portraitReady = true ;
this . root . dataset . media = "sequence" ;
this . updatePortrait ( paletteForFrame ( this . frame ) . level ) ;
} ,
( ) => {
if ( ! this . disposed ) this . root . dataset . media = "poster" ;
}
) ;
2026-08-18 19:03:18 +08:00
this . root . append ( this . portrait , this . poster ) ;
2026-08-14 22:30:15 +08:00
document . body . prepend ( this . root ) ;
this . poster . addEventListener ( "error" , this . handlePosterError ) ;
this . unsubscribe = scope . subscribe ( ( ) => this . syncSettings ( ) ) ;
this . syncSettings ( ) ;
}
handleSequenceError = ( ) => {
2026-08-18 19:03:18 +08:00
this . root . dataset . media = "poster" ;
2026-08-14 22:30:15 +08:00
} ;
handlePosterError = ( ) => {
this . root . dataset . media = "color" ;
} ;
syncSettings ( ) {
this . setEnabled ( this . scope . getSnapshot ( ) . enabled ) ;
}
isEnabled ( ) {
return this . enabled ;
}
2026-08-16 16:29:42 +08:00
getFrame ( ) {
return this . frame ;
}
2026-08-14 22:30:15 +08:00
setEnabled ( enabled ) {
this . enabled = enabled ;
if ( enabled ) {
if ( ! this . root . isConnected ) document . body . prepend ( this . root ) ;
document . body . dataset . liangSkin = "on" ;
this . applyFrame ( ) ;
} else {
this . root . remove ( ) ;
delete document . body . dataset . liangSkin ;
delete document . body . dataset . liangStage ;
for ( const name of cssVariables ) document . body . style . removeProperty ( name ) ;
}
}
2026-08-18 19:01:24 +08:00
setFrame ( frame ) {
2026-08-14 22:30:15 +08:00
this . pendingFrame = Math . min ( PREVIEW _MAX _FRAME , Math . max ( 0 , Math . round ( frame ) ) ) ;
this . frame = this . pendingFrame ;
if ( ! this . enabled ) return ;
if ( this . raf !== 0 ) return ;
this . raf = requestAnimationFrame ( ( ) => {
this . raf = 0 ;
this . frame = this . pendingFrame ;
this . applyFrame ( ) ;
} ) ;
}
applyFrame ( ) {
const palette = paletteForFrame ( this . frame ) ;
const body = document . body ;
2026-08-15 12:54:08 +08:00
this . syncNativeTheme ( palette . stage === 5 ? "dark" : "light" ) ;
2026-08-14 22:30:15 +08:00
body . dataset . liangStage = String ( palette . stage ) ;
body . style . setProperty ( "--liang-strength" , String ( palette . strength ) ) ;
body . style . setProperty ( "--liang-page" , palette . page ) ;
body . style . setProperty ( "--liang-bg-base" , palette . base ) ;
body . style . setProperty ( "--liang-layer-1" , palette . layer1 ) ;
body . style . setProperty ( "--liang-layer-2" , palette . layer2 ) ;
body . style . setProperty ( "--liang-layer-3" , palette . layer3 ) ;
body . style . setProperty ( "--liang-sidebar" , palette . sidebar ) ;
body . style . setProperty ( "--liang-ink" , palette . ink ) ;
body . style . setProperty ( "--liang-secondary" , palette . secondary ) ;
body . style . setProperty ( "--liang-tertiary" , palette . tertiary ) ;
body . style . setProperty ( "--liang-border" , palette . border ) ;
body . style . setProperty ( "--liang-accent" , palette . accent ) ;
body . style . setProperty ( "--liang-accent-hover" , palette . accentHover ) ;
body . style . setProperty ( "--liang-hover" , palette . hover ) ;
body . style . setProperty ( "--liang-portrait-opacity" , palette . portraitOpacity ) ;
this . updatePortrait ( palette . level ) ;
}
2026-08-15 12:54:08 +08:00
syncNativeTheme ( theme = paletteForFrame ( this . frame ) . stage === 5 ? "dark" : "light" ) {
if ( ! this . enabled || this . theme . getTheme ( ) . preference === theme ) return ;
this . theme . setTheme ( theme ) ;
}
2026-08-14 22:30:15 +08:00
updatePortrait ( level ) {
2026-08-18 19:09:38 +08:00
if ( ! this . portraitReady ) return ;
2026-08-14 22:30:15 +08:00
const { lowerIndex , upperIndex , mix : mix2 } = portraitBlendForLevel (
level ,
2026-08-18 19:03:18 +08:00
ANCHOR _LEVELS
2026-08-14 22:30:15 +08:00
) ;
const lower = PORTRAIT _ANCHORS [ lowerIndex ] ;
const upper = PORTRAIT _ANCHORS [ upperIndex ] ;
const selected = mix2 >= 0.5 ? upper : lower ;
const source = ` ${ ASSET _PREFIX } /portrait-source-v2/ ${ selected . file } ` ;
2026-08-18 19:01:24 +08:00
if ( this . portrait . getAttribute ( "src" ) !== source ) this . portrait . src = source ;
2026-08-14 22:30:15 +08:00
}
async choose ( enabled ) {
this . setEnabled ( enabled ) ;
try {
await this . scope . set ( enabled ) ;
} catch ( error ) {
this . syncSettings ( ) ;
throw error ;
}
}
dispose ( ) {
if ( this . disposed ) return ;
this . disposed = true ;
this . unsubscribe ( ) ;
if ( this . raf !== 0 ) cancelAnimationFrame ( this . raf ) ;
2026-08-18 19:01:24 +08:00
this . portrait . removeEventListener ( "error" , this . handleSequenceError ) ;
2026-08-14 22:30:15 +08:00
this . poster . removeEventListener ( "error" , this . handlePosterError ) ;
for ( const image of this . preloads ) image . src = "" ;
this . root . remove ( ) ;
document . body . removeAttribute ( "data-liang-skin" ) ;
delete document . body . dataset . liangStage ;
for ( const name of cssVariables ) document . body . style . removeProperty ( name ) ;
}
} ;
function modelReasoning ( state ) {
const current = state . current ;
if ( current === null ) return null ;
const group = state . groups . find ( ( item ) => item . id === current . provider ) ;
const model = group ? . models . find ( ( item ) => item . id === current . model ) ;
if ( model ? . reasoning === void 0 ) return null ;
return {
selection : current ,
efforts : model . reasoning . efforts ,
defaultEffort : model . reasoning . defaultEffort
} ;
}
function LiangEffortSlider ( { directory , load , select , presenter , scope } ) {
const state = ( 0 , import _react . useSyncExternalStore ) (
( listener ) => directory . subscribe ( listener ) ,
( ) => directory . getSnapshot ( )
) ;
const skin = ( 0 , import _react . useSyncExternalStore ) (
( listener ) => scope . subscribe ( listener ) ,
( ) => scope . getSnapshot ( )
) ;
const reasoning = ( 0 , import _react . useMemo ) ( ( ) => modelReasoning ( state ) , [ state ] ) ;
const efforts = reasoning ? . efforts ? ? [ ] ;
const committedIndex = selectedEffortIndex (
efforts ,
reasoning ? . selection . reasoningEffort ,
reasoning ? . defaultEffort
) ;
2026-08-15 22:42:27 +08:00
const committedFrame = committedIndex < 0 ? PREVIEW _MAX _FRAME : frameForEffort ( committedIndex , efforts . length ) ;
2026-08-16 16:29:42 +08:00
const bindEffort = skin . bindEffort ;
const [ frame , setFrame ] = ( 0 , import _react . useState ) ( ( ) => bindEffort ? committedFrame : presenter . getFrame ( ) ) ;
2026-08-14 22:30:15 +08:00
const [ pending , setPending ] = ( 0 , import _react . useState ) ( false ) ;
const [ failed , setFailed ] = ( 0 , import _react . useState ) ( false ) ;
const [ interacting , setInteracting ] = ( 0 , import _react . useState ) ( false ) ;
const dragging = ( 0 , import _react . useRef ) ( false ) ;
2026-08-16 16:29:42 +08:00
const dragStartFrame = ( 0 , import _react . useRef ) ( frame ) ;
2026-08-14 22:30:15 +08:00
const enabled = skin . enabled ;
( 0 , import _react . useEffect ) ( ( ) => {
if ( enabled ) load ( ) ;
} , [ enabled , load ] ) ;
( 0 , import _react . useEffect ) ( ( ) => {
2026-08-16 16:29:42 +08:00
if ( ! bindEffort || dragging . current || pending ) return ;
2026-08-14 22:30:15 +08:00
setFrame ( committedFrame ) ;
2026-08-18 19:01:24 +08:00
presenter . setFrame ( committedFrame ) ;
2026-08-16 16:29:42 +08:00
} , [ bindEffort , committedFrame , pending , presenter ] ) ;
2026-08-14 22:30:15 +08:00
if ( ! enabled ) return null ;
2026-08-16 16:29:42 +08:00
if ( bindEffort && ( reasoning === null || efforts . length < 2 ) ) return null ;
2026-08-14 22:30:15 +08:00
const previewIndex = nearestEffortIndex ( frame , efforts ) ;
const previewEffort = efforts [ previewIndex ] ;
2026-08-14 22:48:03 +08:00
const progressRatio = frame / PREVIEW _MAX _FRAME ;
2026-08-16 16:29:42 +08:00
const tooltipLabel = indicatorLabel ( frame , bindEffort ? efforts : [ ] ) ;
2026-08-14 22:30:15 +08:00
const commit = async ( rawFrame ) => {
2026-08-16 16:29:42 +08:00
if ( ! bindEffort ) {
2026-08-18 19:01:24 +08:00
dragging . current = false ;
2026-08-16 16:29:42 +08:00
setFrame ( rawFrame ) ;
2026-08-18 19:01:24 +08:00
presenter . setFrame ( rawFrame ) ;
2026-08-16 16:29:42 +08:00
return ;
}
2026-08-14 22:30:15 +08:00
const targetIndex = nearestEffortIndex ( rawFrame , efforts ) ;
const target = efforts [ targetIndex ] ;
2026-08-18 19:01:24 +08:00
if ( target === void 0 ) return ;
2026-08-14 22:30:15 +08:00
const targetFrame = frameForEffort ( targetIndex , efforts . length ) ;
2026-08-18 19:01:24 +08:00
dragging . current = false ;
2026-08-14 22:30:15 +08:00
setFrame ( targetFrame ) ;
2026-08-18 19:01:24 +08:00
presenter . setFrame ( targetFrame ) ;
if ( targetIndex === committedIndex || pending ) return ;
2026-08-14 22:30:15 +08:00
setPending ( true ) ;
setFailed ( false ) ;
const accepted = await select ( {
provider : reasoning . selection . provider ,
model : reasoning . selection . model ,
reasoningEffort : target . id
} ) ;
setPending ( false ) ;
if ( ! accepted ) {
setFailed ( true ) ;
2026-08-18 19:01:24 +08:00
setFrame ( committedFrame ) ;
presenter . setFrame ( committedFrame ) ;
2026-08-14 22:30:15 +08:00
}
} ;
return /* @__PURE__ */ ( 0 , import _jsx _runtime . jsxs ) (
"div" ,
{
className : "liang-effort-control" ,
"data-plugin" : PACKAGE _ID ,
"data-state" : failed ? "error" : pending ? "pending" : "ready" ,
2026-08-16 16:29:42 +08:00
title : bindEffort ? previewEffort ? . name : void 0 ,
2026-08-14 22:30:15 +08:00
children : [
interacting && /* @__PURE__ */ ( 0 , import _jsx _runtime . jsx ) (
"output" ,
{
className : "liang-effort-control__tooltip" ,
2026-08-14 22:48:03 +08:00
style : { "--liang-slider-ratio" : progressRatio } ,
2026-08-16 16:29:42 +08:00
children : tooltipLabel
2026-08-14 22:30:15 +08:00
}
) ,
/* @__PURE__ */ ( 0 , import _jsx _runtime . jsx ) ( "div" , { className : "liang-effort-control__ticks" , "aria-hidden" : "true" , children : efforts . map ( ( effort , index ) => /* @__PURE__ */ ( 0 , import _jsx _runtime . jsx ) (
"i" ,
{
className : "liang-effort-control__tick" ,
style : { left : ` ${ frameForEffort ( index , efforts . length ) / PREVIEW _MAX _FRAME * 100 } % ` }
} ,
effort . id
) ) } ) ,
/* @__PURE__ */ ( 0 , import _jsx _runtime . jsx ) (
"input" ,
{
className : "liang-effort-control__range" ,
type : "range" ,
min : 0 ,
max : PREVIEW _MAX _FRAME ,
step : 1 ,
value : frame ,
disabled : pending || state . status === "selecting" ,
2026-08-16 16:29:42 +08:00
"aria-label" : bindEffort ? "\u601D\u8003\u7B49\u7EA7" : "\u76AE\u80A4\u8FDB\u5EA6" ,
"aria-valuetext" : bindEffort ? previewEffort ? . name ? ? "" : tooltipLabel ,
2026-08-14 22:30:15 +08:00
onPointerDown : ( ) => {
2026-08-18 19:01:24 +08:00
dragging . current = true ;
dragStartFrame . current = frame ;
2026-08-14 22:30:15 +08:00
setInteracting ( true ) ;
} ,
onInput : ( event ) => {
dragging . current = true ;
const next = Number ( event . currentTarget . value ) ;
setFrame ( next ) ;
2026-08-18 19:01:24 +08:00
presenter . setFrame ( next ) ;
2026-08-14 22:30:15 +08:00
} ,
onPointerUp : ( event ) => {
setInteracting ( false ) ;
void commit ( Number ( event . currentTarget . value ) ) ;
} ,
onPointerCancel : ( ) => {
2026-08-18 19:01:24 +08:00
setInteracting ( false ) ;
dragging . current = false ;
setFrame ( dragStartFrame . current ) ;
presenter . setFrame ( dragStartFrame . current ) ;
2026-08-14 22:30:15 +08:00
} ,
onKeyUp : ( event ) => {
setInteracting ( false ) ;
if ( event . key !== "Escape" ) void commit ( Number ( event . currentTarget . value ) ) ;
} ,
onBlur : ( event ) => {
setInteracting ( false ) ;
if ( dragging . current ) void commit ( Number ( event . currentTarget . value ) ) ;
} ,
onKeyDown : ( event ) => {
setInteracting ( true ) ;
if ( event . key === "Escape" && ! pending ) {
2026-08-18 19:01:24 +08:00
setInteracting ( false ) ;
dragging . current = false ;
setFrame ( dragStartFrame . current ) ;
presenter . setFrame ( dragStartFrame . current ) ;
2026-08-14 22:30:15 +08:00
}
}
}
)
]
}
) ;
}
2026-08-15 14:15:55 +08:00
var NATIVE _APPEARANCE _GROUP = '[class*="_8HJdBW_group"]' ;
var NATIVE _APPEARANCE _ROW = '[class*="_8HJdBW_cubeRow"]' ;
var LIANG _APPEARANCE _BUTTON = "liang-appearance-choice" ;
2026-08-16 16:29:42 +08:00
var LIANG _BINDING _CONTROL = "liang-appearance-binding" ;
var LIANG _BINDING _INPUT = "liang-appearance-binding__input" ;
2026-08-15 14:15:55 +08:00
function installLiangAppearanceButton ( scope , presenter ) {
let pending = false ;
const hookedNativeButtons = /* @__PURE__ */ new Set ( ) ;
const nativeClickHandlers = /* @__PURE__ */ new Map ( ) ;
const sync = ( ) => {
const group = [ ... document . querySelectorAll ( NATIVE _APPEARANCE _GROUP ) ] . find ( ( node ) => node . querySelector ( '[class*="_8HJdBW_themeCube"]' ) ) ;
const row = group ? . querySelector ( NATIVE _APPEARANCE _ROW ) ;
if ( row === void 0 || row === null ) return ;
let customButton = row . querySelector ( ` . ${ LIANG _APPEARANCE _BUTTON } ` ) ;
if ( customButton === null ) {
customButton = document . createElement ( "button" ) ;
customButton . className = LIANG _APPEARANCE _BUTTON ;
customButton . type = "button" ;
customButton . dataset . plugin = PACKAGE _ID ;
customButton . setAttribute ( "aria-label" , "\u6ED1\u52A8\u53D8\u7956" ) ;
const icon = document . createElement ( "span" ) ;
icon . className = "liang-appearance-choice__icon" ;
icon . setAttribute ( "aria-hidden" , "true" ) ;
icon . textContent = "\u25C8" ;
const label = document . createElement ( "span" ) ;
label . className = "liang-appearance-choice__label" ;
label . textContent = document . documentElement . lang . toLowerCase ( ) . startsWith ( "en" ) ? "Slider" : "\u6ED1\u52A8\u53D8\u7956" ;
customButton . append ( icon , label ) ;
customButton . addEventListener ( "click" , ( ) => {
if ( pending || scope . getSnapshot ( ) . enabled ) return ;
pending = true ;
sync ( ) ;
void presenter . choose ( true ) . finally ( ( ) => {
pending = false ;
sync ( ) ;
} ) ;
} ) ;
2026-08-14 22:30:15 +08:00
}
2026-08-15 14:15:55 +08:00
if ( customButton . parentElement !== row ) row . append ( customButton ) ;
2026-08-16 16:29:42 +08:00
const snapshot = scope . getSnapshot ( ) ;
2026-08-15 14:15:55 +08:00
customButton . disabled = pending ;
2026-08-16 16:29:42 +08:00
customButton . setAttribute ( "aria-pressed" , String ( snapshot . enabled ) ) ;
let bindingControl = group . querySelector ( ` . ${ LIANG _BINDING _CONTROL } ` ) ;
if ( ! snapshot . enabled ) {
bindingControl ? . remove ( ) ;
bindingControl = null ;
} else if ( bindingControl === null ) {
bindingControl = document . createElement ( "label" ) ;
bindingControl . className = LIANG _BINDING _CONTROL ;
bindingControl . dataset . plugin = PACKAGE _ID ;
const bindingCopy = document . createElement ( "span" ) ;
bindingCopy . className = "liang-appearance-binding__copy" ;
const bindingLabel = document . createElement ( "span" ) ;
bindingLabel . className = "liang-appearance-binding__label" ;
const bindingText = document . documentElement . lang . toLowerCase ( ) . startsWith ( "en" ) ? "Bind slider to reasoning level" : "\u6ED1\u52A8\u53D8\u7956\u7ED1\u5B9A\u601D\u8003\u7B49\u7EA7" ;
bindingLabel . textContent = bindingText ;
const bindingDescription = document . createElement ( "span" ) ;
bindingDescription . className = "liang-appearance-binding__description" ;
bindingDescription . id = "liang-appearance-binding-description" ;
bindingDescription . textContent = document . documentElement . lang . toLowerCase ( ) . startsWith ( "en" ) ? "When off, the slider does not change the reasoning level." : "\u5173\u95ED\u4E4B\u540E\u6ED1\u5757\u4E0D\u8054\u52A8\u601D\u8003\u7B49\u7EA7" ;
bindingCopy . append ( bindingLabel , bindingDescription ) ;
const bindingInput = document . createElement ( "input" ) ;
bindingInput . className = LIANG _BINDING _INPUT ;
bindingInput . type = "checkbox" ;
bindingInput . setAttribute ( "role" , "switch" ) ;
bindingInput . setAttribute ( "aria-label" , bindingText ) ;
bindingInput . setAttribute ( "aria-describedby" , bindingDescription . id ) ;
bindingInput . addEventListener ( "change" , ( ) => {
void scope . setBindEffort ( bindingInput . checked ) . catch ( ( ) => sync ( ) ) ;
} ) ;
bindingControl . append ( bindingCopy , bindingInput ) ;
group . append ( bindingControl ) ;
}
if ( bindingControl !== null ) {
const bindingInput = bindingControl . querySelector ( ` . ${ LIANG _BINDING _INPUT } ` ) ;
if ( bindingInput !== null ) {
bindingInput . checked = snapshot . bindEffort ;
bindingInput . setAttribute ( "aria-checked" , String ( snapshot . bindEffort ) ) ;
bindingInput . disabled = pending ;
}
}
2026-08-15 14:15:55 +08:00
for ( const nativeButton of row . querySelectorAll ( '[class*="_8HJdBW_themeCube"]' ) ) {
if ( hookedNativeButtons . has ( nativeButton ) ) continue ;
hookedNativeButtons . add ( nativeButton ) ;
const handleNativeClick = ( ) => {
if ( pending || ! scope . getSnapshot ( ) . enabled ) return ;
pending = true ;
sync ( ) ;
void presenter . choose ( false ) . finally ( ( ) => {
pending = false ;
sync ( ) ;
} ) ;
} ;
nativeClickHandlers . set ( nativeButton , handleNativeClick ) ;
nativeButton . addEventListener ( "click" , handleNativeClick , { capture : true } ) ;
}
} ;
const observer = new MutationObserver ( sync ) ;
observer . observe ( document . body , { childList : true , subtree : true } ) ;
const unsubscribe = scope . subscribe ( sync ) ;
sync ( ) ;
return ( ) => {
observer . disconnect ( ) ;
unsubscribe ( ) ;
for ( const [ nativeButton , handleNativeClick ] of nativeClickHandlers ) {
nativeButton . removeEventListener ( "click" , handleNativeClick , { capture : true } ) ;
}
document . querySelectorAll ( ` . ${ LIANG _APPEARANCE _BUTTON } ` ) . forEach ( ( button ) => button . remove ( ) ) ;
2026-08-16 16:29:42 +08:00
document . querySelectorAll ( ` . ${ LIANG _BINDING _CONTROL } ` ) . forEach ( ( control ) => control . remove ( ) ) ;
2026-08-14 22:30:15 +08:00
} ;
}
var inject = [
"slots" ,
"sessions" ,
"modelDirectories" ,
2026-08-15 12:54:08 +08:00
"locale" ,
"theme"
2026-08-14 22:30:15 +08:00
] ;
function createPreferenceStore ( ) {
2026-08-17 15:33:48 +08:00
try {
localStorage . removeItem ( "dsh-liang-intensity-skin.enabled" ) ;
} catch {
}
2026-08-14 22:30:15 +08:00
let snapshot = {
2026-08-17 15:33:48 +08:00
enabled : true ,
2026-08-16 16:29:42 +08:00
bindEffort : localStorage . getItem ( BIND _EFFORT _KEY ) !== "0"
2026-08-14 22:30:15 +08:00
} ;
const listeners = /* @__PURE__ */ new Set ( ) ;
const onStorage = ( event ) => {
2026-08-17 15:33:48 +08:00
if ( event . key !== BIND _EFFORT _KEY ) return ;
2026-08-16 16:29:42 +08:00
const next = {
2026-08-17 15:33:48 +08:00
enabled : snapshot . enabled ,
bindEffort : event . newValue !== "0"
2026-08-16 16:29:42 +08:00
} ;
if ( next . enabled === snapshot . enabled && next . bindEffort === snapshot . bindEffort ) return ;
snapshot = next ;
2026-08-14 22:30:15 +08:00
for ( const listener of listeners ) listener ( ) ;
} ;
window . addEventListener ( "storage" , onStorage ) ;
return {
getSnapshot : ( ) => snapshot ,
subscribe ( listener ) {
listeners . add ( listener ) ;
return ( ) => listeners . delete ( listener ) ;
} ,
async set ( enabled ) {
if ( enabled === snapshot . enabled ) return ;
2026-08-16 16:29:42 +08:00
snapshot = { ... snapshot , enabled } ;
for ( const listener of listeners ) listener ( ) ;
} ,
async setBindEffort ( bindEffort ) {
if ( bindEffort === snapshot . bindEffort ) return ;
localStorage . setItem ( BIND _EFFORT _KEY , bindEffort ? "1" : "0" ) ;
snapshot = { ... snapshot , bindEffort } ;
2026-08-14 22:30:15 +08:00
for ( const listener of listeners ) listener ( ) ;
} ,
dispose ( ) {
window . removeEventListener ( "storage" , onStorage ) ;
listeners . clear ( ) ;
}
} ;
}
function apply ( ctx ) {
const style = document . createElement ( "style" ) ;
style . dataset . plugin = PACKAGE _ID ;
style . textContent = skin _default ;
document . head . append ( style ) ;
ctx . effect ( ( ) => ( ) => style . remove ( ) , "liang-intensity-skin: scoped styles" ) ;
const scope = createPreferenceStore ( ) ;
ctx . effect ( ( ) => ( ) => scope . dispose ( ) , "liang-intensity-skin: appearance preference" ) ;
2026-08-15 12:54:08 +08:00
const theme = ctx . get ( "theme" ) ;
const presenter = new SkinPresenter ( scope , theme ) ;
2026-08-14 22:30:15 +08:00
ctx . effect ( ( ) => ( ) => presenter . dispose ( ) , "liang-intensity-skin: backdrop presenter" ) ;
2026-08-15 12:54:08 +08:00
ctx . effect (
2026-08-15 14:15:55 +08:00
( ) => installLiangAppearanceButton ( scope , presenter ) ,
"liang-intensity-skin: native appearance extension"
) ;
ctx . effect (
( ) => ctx . locale . register ( LOCALE _NAMESPACE , {
zh : {
"appearance.title" : "\u5916\u89C2" ,
"appearance.light" : "\u6D45\u8272" ,
"appearance.dark" : "\u6DF1\u8272" ,
"appearance.system" : "\u8DDF\u968F\u7CFB\u7EDF" ,
"appearance.liang" : "\u6ED1\u52A8\u53D8\u7956"
} ,
en : {
"appearance.title" : "Appearance" ,
"appearance.light" : "Light" ,
"appearance.dark" : "Dark" ,
"appearance.system" : "System" ,
"appearance.liang" : "Slider"
}
} ) ,
"liang-intensity-skin: settings locale"
2026-08-15 12:54:08 +08:00
) ;
2026-08-14 22:30:15 +08:00
ctx . slots . inject ( "conversation.input.right" , ( ) => ctx . slots . register ( {
name : "conversation.input.right" ,
id : "liang-intensity-control" ,
order : 10 ,
inject : ( sessionId ) => {
const available = ctx . sessions . subagentAddress ( sessionId ) === void 0 ;
const directory = ctx . modelDirectories . directoryFor ( sessionId ) ;
return {
directory : directory . store ,
presenter ,
scope ,
load : ( ) => {
if ( available ) void directory . load ( ) . catch ( ( ) => void 0 ) ;
} ,
select : ( selection ) => available ? directory . select ( selection ) . then ( ( ) => true , ( ) => false ) : Promise . resolve ( false )
} ;
}
} , LiangEffortSlider ) ) ;
}
return module . exports ; } } ) ;
//# sourceMappingURL=client.js.map