antd-solid 0.0.19 → 0.0.21

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { createComponent, Dynamic, mergeProps as mergeProps$1, insert, effect, className, style, template, use, spread, delegateEvents, memo, render, Portal, setAttribute } from 'solid-js/web';
+import { createComponent, Dynamic, mergeProps as mergeProps$1, ssr, ssrHydrationKey, escape, ssrAttribute, ssrStyle, ssrElement, render, Portal } from 'solid-js/web';
 import { createContext, mergeProps, useContext, createSignal, onMount, createMemo, untrack, splitProps, children, Show, createComputed, on, createEffect, onCleanup, createRenderEffect, For, createSelector, Switch as Switch$1, Match, getOwner, runWithOwner } from 'solid-js';
 import cs from 'classnames';
 import { nanoid } from 'nanoid';
@@ -574,9 +574,9 @@ function isEmptyJSXElement(element) {
   return element === undefined || element === null || typeof element === 'boolean' || element === '' || Array.isArray(element) && element.length === 0;
 }
 
-var _tmpl$$O = /*#__PURE__*/template(`<span class="i-ant-design:loading [vertical-align:-0.125em] keyframes-spin [animation:spin_1s_linear_infinite]">`),
-  _tmpl$2$v = /*#__PURE__*/template(`<span>`),
-  _tmpl$3$k = /*#__PURE__*/template(`<span class="inline-block leading-inherit">`);
+var _tmpl$$N = ["<span", " class=\"i-ant-design:loading [vertical-align:-0.125em] keyframes-spin [animation:spin_1s_linear_infinite]\"></span>"],
+  _tmpl$2$w = ["<span", " style=\"", "\">", "</span>"],
+  _tmpl$3$l = ["<span", " class=\"inline-block leading-inherit\">", "</span>"];
 const sizeClassMap = {
   large: 'px-15px py-7px h-40px leading-24px',
   middle: 'px-15px py-4px h-32px leading-22px',
@@ -608,10 +608,6 @@ const Button$1 = _props => {
   return createComponent(Element$1, mergeProps$1({
     tag: "button"
   }, buttonElementProps, {
-    ref(r$) {
-      var _ref$ = props.ref;
-      typeof _ref$ === "function" ? _ref$(r$) : props.ref = r$;
-    },
     get ["class"]() {
       return cs(`ant-btn ant-btn-${props.type}`, 'inline-flex justify-center items-center gap-8px', 'relative cursor-pointer [font-size:var(--ant-font-size)] rounded-[--ant-button-border-radius]', 'focus-visible:[outline:4px_solid_var(--ant-color-primary-border)] focus-visible:[outline-offset:1px]', props.block && 'block w-full', props.class, sizeClassMap[size()], props.disabled && 'cursor-not-allowed', typeClassMap[props.type](props.danger, props.disabled), loading() && 'opacity-65');
     },
@@ -649,33 +645,19 @@ const Button$1 = _props => {
               return resolvedIcon();
             },
             get children() {
-              var _el$3 = _tmpl$3$k();
-              insert(_el$3, resolvedIcon);
-              return _el$3;
+              return ssr(_tmpl$3$l, ssrHydrationKey(), escape(resolvedIcon()));
             }
           });
         },
         get children() {
-          return _tmpl$$O();
+          return ssr(_tmpl$$N, ssrHydrationKey());
         }
       }), createComponent(Show, {
         get when() {
           return resolvedChildren();
         },
         get children() {
-          var _el$2 = _tmpl$2$v();
-          insert(_el$2, resolvedChildren);
-          effect(_p$ => {
-            var _v$ = cs('inline-block leading-inherit', props.contentClass),
-              _v$2 = props.contentStyle;
-            _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-            _p$.t = style(_el$2, _v$2, _p$.t);
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined
-          });
-          return _el$2;
+          return ssr(_tmpl$2$w, ssrHydrationKey() + ssrAttribute("class", escape(cs('inline-block leading-inherit', props.contentClass), true), false), ssrStyle(props.contentStyle), escape(resolvedChildren()));
         }
       })];
     }
@@ -740,18 +722,14 @@ function useFocus(target) {
   return hover;
 }
 
-var _tmpl$$N = /*#__PURE__*/template(`<textarea>`);
 const TextArea = props => {
   const size = useComponentSize(() => props.size);
   const [_, inputProps] = splitProps(props, ['defaultValue', 'value', 'onChange', 'onPressEnter', 'onKeyDown', 'size', 'autoFocus', 'status']);
   let inputRef;
   const foucs = useFocus(() => inputRef);
   onMount(() => {
-    if (props.autoFocus) {
-      inputRef?.focus();
-    }
+    if (props.autoFocus) ;
   });
-  const isControlled = () => Object.keys(props).includes('value');
   const [value, setValue] = createControllableValue(props, {
     trigger: null
   });
@@ -775,12 +753,7 @@ const TextArea = props => {
       };
     },
     get children() {
-      var _el$ = _tmpl$$N();
-      use(el => {
-        setRef(props, el);
-        inputRef = el;
-      }, _el$);
-      spread(_el$, mergeProps$1(inputProps, {
+      return ssrElement("textarea", mergeProps$1(inputProps, {
         get ["class"]() {
           return cs('p-[--ant-input-padding] border-1px border-solid bg-[--ant-color-bg-container]', 'w-full h-full [font-size:var(--ant-input-font-size)] [outline:none] placeholder-text-[var(--ant-color-text-placeholder)]', props.disabled && 'color-[var(--ant-color-text-disabled)] cursor-not-allowed', {
             small: 'rounded-[var(--ant-border-radius-sm)]',
@@ -790,25 +763,8 @@ const TextArea = props => {
         },
         get value() {
           return value() ?? '';
-        },
-        "onInput": e => {
-          setValue(e.target.value);
-          try {
-            props.onChange?.(e);
-          } finally {
-            if (isControlled() && e.target.value !== props.value) {
-              e.target.value = props.value ?? '';
-            }
-          }
-        },
-        "onKeyDown": e => {
-          if (e.key === 'Enter') {
-            props.onPressEnter?.(e);
-          }
-          props.onKeyDown?.(e);
         }
-      }), false, false);
-      return _el$;
+      }), undefined, true);
     }
   });
 };
@@ -820,12 +776,12 @@ const CompactContext = createContext({
   compact: false
 });
 
-var _tmpl$$M = /*#__PURE__*/template(`<div>`),
-  _tmpl$2$u = /*#__PURE__*/template(`<div class=mr-4px>`),
-  _tmpl$3$j = /*#__PURE__*/template(`<span class="ml-4px i-ant-design:close-circle-filled cursor-pointer text-[var(--ant-color-text-quaternary)] hover:text-[var(--ant-color-text-tertiary)] active:text-[var(--ant-color-text)]">`),
-  _tmpl$4$d = /*#__PURE__*/template(`<div class=ml-4px>`),
-  _tmpl$5$9 = /*#__PURE__*/template(`<div class="[display:var(--actions-display)] absolute top-0 bottom-0 right-0 h-[calc(100%-2px)] translate-y-1px -translate-x-1px">`),
-  _tmpl$6$3 = /*#__PURE__*/template(`<div><input>`);
+var _tmpl$$M = ["<div", ">", "</div>"],
+  _tmpl$2$v = ["<div", " class=\"mr-4px\">", "</div>"],
+  _tmpl$3$k = ["<span", " class=\"ml-4px i-ant-design:close-circle-filled cursor-pointer text-[var(--ant-color-text-quaternary)] hover:text-[var(--ant-color-text-tertiary)] active:text-[var(--ant-color-text)]\"></span>"],
+  _tmpl$4$d = ["<div", " class=\"ml-4px\">", "</div>"],
+  _tmpl$5$8 = ["<div", " class=\"[display:var(--actions-display)] absolute top-0 bottom-0 right-0 h-[calc(100%-2px)] translate-y-1px -translate-x-1px\">", "</div>"],
+  _tmpl$6$2 = ["<div", "><!--$-->", "<!--/-->", "<!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
 const statusClassDict$1 = {
   default: (disabled, foucs) => {
     if (disabled) {
@@ -864,11 +820,8 @@ function CommonInput(props) {
   let inputRef;
   const foucs = useFocus(() => inputRef);
   onMount(() => {
-    if (props.autoFocus) {
-      inputRef?.focus();
-    }
+    if (props.autoFocus) ;
   });
-  const isControlled = () => Object.keys(props).includes('value');
   const [value, setValue] = createControllableValue(props, {
     trigger: null
   });
@@ -913,101 +866,49 @@ function CommonInput(props) {
           return !isNil(addonBefore());
         },
         get children() {
-          var _el$ = _tmpl$$M();
-          insert(_el$, addonBefore);
-          effect(() => className(_el$, cs('ant-input-addon', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-r-0')));
-          return _el$;
+          return ssr(_tmpl$$M, ssrHydrationKey() + ssrAttribute("class", escape(cs('ant-input-addon', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-r-0'), true), false), escape(addonBefore()));
         }
-      }), (() => {
-        var _el$2 = _tmpl$6$3(),
-          _el$4 = _el$2.firstChild;
-        insert(_el$2, createComponent(Show, {
-          get when() {
-            return !isNil(prefix());
-          },
-          get children() {
-            var _el$3 = _tmpl$2$u();
-            insert(_el$3, prefix);
-            return _el$3;
-          }
-        }), _el$4);
-        use(el => {
-          setRef(props, el);
-          inputRef = el;
-        }, _el$4);
-        spread(_el$4, mergeProps$1(inputProps, {
-          get ["class"]() {
-            return cs('w-full h-full [font-size:var(--ant-input-font-size)] [outline:none] placeholder-text-[var(--ant-color-text-placeholder)] bg-transparent', props.disabled && 'color-[var(--ant-color-text-disabled)] cursor-not-allowed', props.class);
-          },
-          get value() {
-            return value() ?? '';
-          },
-          "onInput": e => {
-            setValue(e.target.value);
-            try {
-              props.onChange?.(e);
-            } finally {
-              if (isControlled() && e.target.value !== props.value) {
-                e.target.value = props.value ?? '';
-              }
-            }
-          },
-          "onKeyDown": e => {
-            if (e.key === 'Enter') {
-              props.onPressEnter?.(e);
-            }
-            props.onKeyDown?.(e);
-          }
-        }), false, false);
-        insert(_el$2, createComponent(Show, {
-          get when() {
-            return showClearBtn();
-          },
-          get children() {
-            var _el$5 = _tmpl$3$j();
-            _el$5.$$click = e => {
-              e.stopPropagation();
-              inputRef.value = '';
-              const inputEvent = new InputEvent('input', {
-                bubbles: true
-              });
-              inputRef.dispatchEvent(inputEvent);
-              inputRef?.focus();
-            };
-            return _el$5;
-          }
-        }), null);
-        insert(_el$2, createComponent(Show, {
-          get when() {
-            return !isNil(suffix());
-          },
-          get children() {
-            var _el$6 = _tmpl$4$d();
-            insert(_el$6, suffix);
-            return _el$6;
-          }
-        }), null);
-        insert(_el$2, createComponent(Show, {
-          get when() {
-            return !isNil(actions());
-          },
-          get children() {
-            var _el$7 = _tmpl$5$9();
-            insert(_el$7, actions);
-            return _el$7;
-          }
-        }), null);
-        effect(() => className(_el$2, cs('ant-input-affix-wrapper', 'flex items-center w-full relative p:hover-child[input]:border-[--ant-color-primary] bg-[--ant-color-bg-container] p-[--ant-input-padding] border-1px border-solid', ['[--actions-display:none]', !props.disabled && 'hover:[--actions-display:block]'], statusClassDict$1[props.status ?? 'default'](!!props.disabled, foucs()))));
-        return _el$2;
-      })(), createComponent(Show, {
+      }), ssr(_tmpl$6$2, ssrHydrationKey() + ssrAttribute("class", escape(cs('ant-input-affix-wrapper', 'flex items-center w-full relative p:hover-child[input]:border-[--ant-color-primary] bg-[--ant-color-bg-container] p-[--ant-input-padding] border-1px border-solid', ['[--actions-display:none]', !props.disabled && 'hover:[--actions-display:block]'], statusClassDict$1[props.status ?? 'default'](!!props.disabled, foucs())), true), false), escape(createComponent(Show, {
+        get when() {
+          return !isNil(prefix());
+        },
+        get children() {
+          return ssr(_tmpl$2$v, ssrHydrationKey(), escape(prefix()));
+        }
+      })), ssrElement("input", mergeProps$1(inputProps, {
+        get ["class"]() {
+          return cs('w-full h-full [font-size:var(--ant-input-font-size)] [outline:none] placeholder-text-[var(--ant-color-text-placeholder)] bg-transparent', props.disabled && 'color-[var(--ant-color-text-disabled)] cursor-not-allowed', props.class);
+        },
+        get value() {
+          return value() ?? '';
+        }
+      }), undefined, false), escape(createComponent(Show, {
+        get when() {
+          return showClearBtn();
+        },
+        get children() {
+          return ssr(_tmpl$3$k, ssrHydrationKey());
+        }
+      })), escape(createComponent(Show, {
+        get when() {
+          return !isNil(suffix());
+        },
+        get children() {
+          return ssr(_tmpl$4$d, ssrHydrationKey(), escape(suffix()));
+        }
+      })), escape(createComponent(Show, {
+        get when() {
+          return !isNil(actions());
+        },
+        get children() {
+          return ssr(_tmpl$5$8, ssrHydrationKey(), escape(actions()));
+        }
+      }))), createComponent(Show, {
         get when() {
           return !isNil(addonAfter());
         },
         get children() {
-          var _el$8 = _tmpl$$M();
-          insert(_el$8, addonAfter);
-          effect(() => className(_el$8, cs('ant-input-addon', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-l-0')));
-          return _el$8;
+          return ssr(_tmpl$$M, ssrHydrationKey() + ssrAttribute("class", escape(cs('ant-input-addon', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-l-0'), true), false), escape(addonAfter()));
         }
       })];
     }
@@ -1017,10 +918,10 @@ const Input = props => {
   return createComponent(CommonInput, mergeProps$1(() => omit(props, ['actions'])));
 };
 Input.TextArea = TextArea;
-delegateEvents(["click"]);
 
-var _tmpl$$L = /*#__PURE__*/template(`<div class="flex flex-col h-full w-[--ant-input-number-handle-width] [border-left:1px_solid_var(--ant-color-border)] bg-[--ant-color-bg-container]"><div class="text-12px flex justify-center items-center h-1/2 cursor-pointer opacity-70 hover:h-100% hover:text-[var(--ant-color-primary)] transition-color transition-height transition-duration-500"><div class=i-ant-design:up-outlined></div></div><div class="[border-top:1px_solid_var(--ant-color-border)] text-12px flex justify-center items-center h-1/2 cursor-pointer opacity-70 hover:h-100% hover:text-[var(--ant-color-primary)] transition-color transition-height transition-duration-500"><div class=i-ant-design:down-outlined>`);
+var _tmpl$$L = ["<div", " class=\"flex flex-col h-full w-[--ant-input-number-handle-width] [border-left:1px_solid_var(--ant-color-border)] bg-[--ant-color-bg-container]\"><div", "><div class=\"i-ant-design:up-outlined\"></div></div><div class=\"", "\"><div class=\"i-ant-design:down-outlined\"></div></div></div>"];
 const isEmptyValue = value => isNil(value) || value === '';
+const actionBtnClass = 'text-12px flex justify-center items-center h-1/2 cursor-pointer opacity-70 hover:h-100% hover:text-[var(--ant-color-primary)] transition-color transition-height transition-duration-500';
 const InputNumber = _props => {
   const props = mergeProps({
     min: -Infinity,
@@ -1089,14 +990,7 @@ const InputNumber = _props => {
       };
     },
     get actions() {
-      return memo(() => !!props.controls)() ? (() => {
-        var _el$ = _tmpl$$L(),
-          _el$2 = _el$.firstChild,
-          _el$3 = _el$2.nextSibling;
-        _el$2.$$click = up;
-        _el$3.$$click = down;
-        return _el$;
-      })() : undefined;
+      return props.controls ? ssr(_tmpl$$L, ssrHydrationKey(), ssrAttribute("class", escape(actionBtnClass, true), false), `[border-top:1px_solid_var(--ant-color-border)] ${escape(actionBtnClass, true)}`) : undefined;
     },
     get value() {
       return `${(focusing() ? value() : displayValue()) ?? ''}`;
@@ -1131,10 +1025,9 @@ const InputNumber = _props => {
     }
   }));
 };
-delegateEvents(["click"]);
 
-var _tmpl$$K = /*#__PURE__*/template(`<div class="flex relative"><div class="w-[10px] h-[10px] border-solid border-width-[3px] border-[var(--ant-color-primary)] bg-white rounded-[50%] mt-[8px]"></div><div class=ml-[8px]>`),
-  _tmpl$2$t = /*#__PURE__*/template(`<div class="absolute top-[8px] bottom-[-24px] left-[4px] w-[2px] bg-[rgba(5,5,5,.06)]">`);
+var _tmpl$$K = ["<div", " class=\"flex relative\"><!--$-->", "<!--/--><div class=\"w-[10px] h-[10px] border-solid border-width-[3px] border-[var(--ant-color-primary)] bg-white rounded-[50%] mt-[8px]\"></div><div class=\"ml-[8px]\">", "</div></div>"],
+  _tmpl$2$u = ["<div", " class=\"absolute top-[8px] bottom-[-24px] left-[4px] w-[2px] bg-[rgba(5,5,5,.06)]\"></div>"];
 const Timeline = props => {
   return createComponent(Element$1, {
     "class": "flex flex-col gap-[16px]",
@@ -1143,17 +1036,7 @@ const Timeline = props => {
         get each() {
           return props.items;
         },
-        children: (item, i) => (() => {
-          var _el$ = _tmpl$$K(),
-            _el$2 = _el$.firstChild,
-            _el$3 = _el$2.nextSibling;
-          insert(_el$, (() => {
-            var _c$ = memo(() => i() !== props.items.length - 1);
-            return () => _c$() && _tmpl$2$t();
-          })(), _el$2);
-          insert(_el$3, () => item.children?.());
-          return _el$;
-        })()
+        children: (item, i) => ssr(_tmpl$$K, ssrHydrationKey(), i() !== props.items.length - 1 && _tmpl$2$u[0] + ssrHydrationKey() + _tmpl$2$u[1], escape(item.children?.()))
       });
     }
   });
@@ -1225,8 +1108,8 @@ function createTransition(target, when, props = {}) {
   }));
 }
 
-var _tmpl$$J = /*#__PURE__*/template(`<div class="flex items-center gap-12px"><span class="i-ant-design:exclamation-circle text-22px text-[var(--ant-color-warning)]">`),
-  _tmpl$2$s = /*#__PURE__*/template(`<div class=ml-34px>`);
+var _tmpl$$J = ["<div", " class=\"flex items-center gap-12px\"><span class=\"i-ant-design:exclamation-circle text-22px text-[var(--ant-color-warning)]\"></span><!--$-->", "<!--/--></div>"],
+  _tmpl$2$t = ["<div", " class=\"ml-34px\">", "</div>"];
 function useModal() {
   const [open, setOpen] = createSignal(false);
   const [modalProps, setModalProps] = createSignal({});
@@ -1242,19 +1125,10 @@ function useModal() {
     closeIcon: false
   }, modalProps, {
     get title() {
-      return (() => {
-        var _el$ = _tmpl$$J();
-          _el$.firstChild;
-        insert(_el$, () => modalProps().title, null);
-        return _el$;
-      })();
+      return ssr(_tmpl$$J, ssrHydrationKey(), escape(modalProps().title));
     },
     get children() {
-      return (() => {
-        var _el$3 = _tmpl$2$s();
-        insert(_el$3, () => modalProps().children);
-        return _el$3;
-      })();
+      return ssr(_tmpl$2$t, ssrHydrationKey(), escape(modalProps().children));
     },
     get open() {
       return open();
@@ -1271,8 +1145,8 @@ function useModal() {
   return [modal, getContextHolder];
 }
 
-var _tmpl$$I = /*#__PURE__*/template(`<div class="flex items-center gap-12px"><span class="i-ant-design:exclamation-circle text-22px text-[var(--ant-color-warning)]">`),
-  _tmpl$2$r = /*#__PURE__*/template(`<div class=ml-34px>`);
+var _tmpl$$I = ["<div", " class=\"flex items-center gap-12px\"><span class=\"i-ant-design:exclamation-circle text-22px text-[var(--ant-color-warning)]\"></span><!--$-->", "<!--/--></div>"],
+  _tmpl$2$s = ["<div", " class=\"ml-34px\">", "</div>"];
 function warning$1(props) {
   const div = document.createElement('div');
   document.body.appendChild(div);
@@ -1282,19 +1156,10 @@ function warning$1(props) {
     closeIcon: false
   }, props, {
     get title() {
-      return (() => {
-        var _el$ = _tmpl$$I();
-          _el$.firstChild;
-        insert(_el$, () => props.title, null);
-        return _el$;
-      })();
+      return ssr(_tmpl$$I, ssrHydrationKey(), escape(props.title));
     },
     get children() {
-      return (() => {
-        var _el$3 = _tmpl$2$r();
-        insert(_el$3, () => props.children);
-        return _el$3;
-      })();
+      return ssr(_tmpl$2$s, ssrHydrationKey(), escape(props.children));
     },
     defaultOpen: true,
     onOk: () => {
@@ -1317,11 +1182,11 @@ function useLocale() {
   return locale;
 }
 
-var _tmpl$$H = /*#__PURE__*/template(`<div aria-label=mask>`),
-  _tmpl$2$q = /*#__PURE__*/template(`<span class=i-ant-design:close-outlined>`),
-  _tmpl$3$i = /*#__PURE__*/template(`<div class="inline-flex gap-8px">`),
-  _tmpl$4$c = /*#__PURE__*/template(`<div class="mt-12px text-right">`),
-  _tmpl$5$8 = /*#__PURE__*/template(`<div class="ant-modal-wrap z-1000 fixed inset-0 overflow-auto pointer-events-none"><div><div class="text-[var(--ant-modal-title-color)] text-16px font-600 mb-8px"></div><div class=grow>`);
+var _tmpl$$H = ["<div", " aria-label=\"mask\"></div>"],
+  _tmpl$2$r = ["<span", " class=\"i-ant-design:close-outlined\"></span>"],
+  _tmpl$3$j = ["<div", " class=\"inline-flex gap-8px\"><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"],
+  _tmpl$4$c = ["<div", " class=\"mt-12px text-right\">", "</div>"],
+  _tmpl$5$7 = ["<div", " class=\"ant-modal-wrap z-1000 fixed inset-0 overflow-auto pointer-events-none\"><div", " style=\"", "\"><!--$-->", "<!--/--><div class=\"text-[var(--ant-modal-title-color)] text-16px font-600 mb-8px\">", "</div><div class=\"grow\">", "</div><!--$-->", "<!--/--></div></div>"];
 // 单位 s
 const transitionDuration = 0.3;
 const Modal = _props => {
@@ -1411,10 +1276,6 @@ const Modal = _props => {
                 },
                 get children() {
                   return createComponent(Element$1, {
-                    ref(r$) {
-                      var _ref$ = modalRootRef;
-                      typeof _ref$ === "function" ? _ref$(r$) : modalRootRef = r$;
-                    },
                     "class": "[font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]",
                     style: {
                       '--transition-duration': `${transitionDuration}s`
@@ -1425,105 +1286,58 @@ const Modal = _props => {
                           return props.mask;
                         },
                         get children() {
-                          var _el$ = _tmpl$$H();
-                          _el$.$$click = () => {
-                            if (props.maskClosable) {
+                          return ssr(_tmpl$$H, ssrHydrationKey() + ssrAttribute("class", escape(cs('ant-modal-mask', 'fixed inset-0 bg-[var(--ant-color-bg-mask)] z-1000'), true), false));
+                        }
+                      }), ssr(_tmpl$5$7, ssrHydrationKey(), ssrAttribute("class", escape(cs('ant-modal', 'px-24px py-20px rounded-8px overflow-hidden bg-[--ant-color-bg-container-secondary] flex flex-col max-w-[calc(100vw-calc(var(--ant-margin)*2))] transform-origin-center pointer-events-initial'), true), false), "--translate-y:" + (props.centered ? "max(calc(50vh - 50%), 0px)" : "100px") + (";--active-element-center-x:" + `${escape(activeElementCenter().x, true)}px`) + (";--active-element-center-y:" + `${escape(activeElementCenter().y, true)}px`) + (";width:" + escape(props.width, true)) + (";height:" + escape(props.height, true)), escape(createComponent(Show, {
+                        get when() {
+                          return props.closeIcon;
+                        },
+                        get children() {
+                          return createComponent(Button$1, {
+                            type: "text",
+                            get ["class"]() {
+                              return cs('!w-22px !h-22px !flex !justify-center !items-center text-center text-18px !absolute !top-16px !right-16px z-1000 !text-[var(--ant-color-icon)] hover:!text-[var(--ant-color-icon-hover)]');
+                            },
+                            onClick: () => {
                               props.onCancel?.();
+                            },
+                            get children() {
+                              return ssr(_tmpl$2$r, ssrHydrationKey());
                             }
-                          };
-                          effect(() => className(_el$, cs('ant-modal-mask', 'fixed inset-0 bg-[var(--ant-color-bg-mask)] z-1000')));
-                          return _el$;
+                          });
                         }
-                      }), (() => {
-                        var _el$2 = _tmpl$5$8(),
-                          _el$3 = _el$2.firstChild,
-                          _el$5 = _el$3.firstChild,
-                          _el$6 = _el$5.nextSibling;
-                        _el$3.$$click = e => {
-                          e.stopPropagation();
-                        };
-                        insert(_el$3, createComponent(Show, {
-                          get when() {
-                            return props.closeIcon;
-                          },
-                          get children() {
-                            return createComponent(Button$1, {
-                              type: "text",
-                              get ["class"]() {
-                                return cs('!w-22px !h-22px !flex !justify-center !items-center text-center text-18px !absolute !top-16px !right-16px z-1000 !text-[var(--ant-color-icon)] hover:!text-[var(--ant-color-icon-hover)]');
-                              },
-                              onClick: () => {
-                                props.onCancel?.();
-                              },
-                              get children() {
-                                return _tmpl$2$q();
-                              }
-                            });
-                          }
-                        }), _el$5);
-                        insert(_el$5, () => props.title);
-                        insert(_el$6, () => props.children);
-                        insert(_el$3, createComponent(Show, {
-                          get when() {
-                            return props.footer;
-                          },
-                          get children() {
-                            var _el$7 = _tmpl$4$c();
-                            insert(_el$7, createComponent(Show, {
-                              get when() {
-                                return typeof props.footer !== 'function';
-                              },
-                              get fallback() {
-                                return memo(() => typeof props.footer === 'function')() && props.footer();
-                              },
-                              get children() {
-                                var _el$8 = _tmpl$3$i();
-                                insert(_el$8, createComponent(Button$1, mergeProps$1({
-                                  onClick: () => {
-                                    props.onCancel?.();
-                                  },
-                                  get children() {
-                                    return locale().Modal?.cancelText;
-                                  }
-                                }, () => props.cancelButtonProps)), null);
-                                insert(_el$8, createComponent(Button$1, mergeProps$1({
-                                  type: "primary",
-                                  loading: "auto",
-                                  onClick: async () => await props.onOk?.(),
-                                  get children() {
-                                    return locale().Modal?.okText;
-                                  }
-                                }, () => props.okButtonProps)), null);
-                                return _el$8;
-                              }
-                            }));
-                            return _el$7;
-                          }
-                        }), null);
-                        effect(_p$ => {
-                          var _v$ = cs('ant-modal', 'px-24px py-20px rounded-8px overflow-hidden bg-[--ant-color-bg-container-secondary] flex flex-col max-w-[calc(100vw-calc(var(--ant-margin)*2))] transform-origin-center pointer-events-initial'),
-                            _v$2 = props.centered ? 'max(calc(50vh - 50%), 0px)' : '100px',
-                            _v$3 = `${activeElementCenter().x}px`,
-                            _v$4 = `${activeElementCenter().y}px`,
-                            _v$5 = props.width,
-                            _v$6 = props.height;
-                          _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
-                          _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$3.style.setProperty("--translate-y", _v$2) : _el$3.style.removeProperty("--translate-y"));
-                          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$3.style.setProperty("--active-element-center-x", _v$3) : _el$3.style.removeProperty("--active-element-center-x"));
-                          _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$3.style.setProperty("--active-element-center-y", _v$4) : _el$3.style.removeProperty("--active-element-center-y"));
-                          _v$5 !== _p$.i && ((_p$.i = _v$5) != null ? _el$3.style.setProperty("width", _v$5) : _el$3.style.removeProperty("width"));
-                          _v$6 !== _p$.n && ((_p$.n = _v$6) != null ? _el$3.style.setProperty("height", _v$6) : _el$3.style.removeProperty("height"));
-                          return _p$;
-                        }, {
-                          e: undefined,
-                          t: undefined,
-                          a: undefined,
-                          o: undefined,
-                          i: undefined,
-                          n: undefined
-                        });
-                        return _el$2;
-                      })()];
+                      })), escape(props.title), escape(props.children), escape(createComponent(Show, {
+                        get when() {
+                          return props.footer;
+                        },
+                        get children() {
+                          return ssr(_tmpl$4$c, ssrHydrationKey(), escape(createComponent(Show, {
+                            get when() {
+                              return typeof props.footer !== 'function';
+                            },
+                            get fallback() {
+                              return typeof props.footer === 'function' && props.footer();
+                            },
+                            get children() {
+                              return ssr(_tmpl$3$j, ssrHydrationKey(), escape(createComponent(Button$1, mergeProps$1({
+                                onClick: () => {
+                                  props.onCancel?.();
+                                },
+                                get children() {
+                                  return locale().Modal?.cancelText;
+                                }
+                              }, () => props.cancelButtonProps))), escape(createComponent(Button$1, mergeProps$1({
+                                type: "primary",
+                                loading: "auto",
+                                onClick: async () => await props.onOk?.(),
+                                get children() {
+                                  return locale().Modal?.okText;
+                                }
+                              }, () => props.okButtonProps))));
+                            }
+                          })));
+                        }
+                      })))];
                     }
                   });
                 }
@@ -1537,16 +1351,15 @@ const Modal = _props => {
 };
 Modal.warning = warning$1;
 Modal.useModal = useModal;
-delegateEvents(["click"]);
 
 var css_248z$2 = ".ant-drawer-content-right {\n  top: 0;\n  bottom: 0;\n  right: 0;\n}\n\n.ant-drawer-content-left {\n  top: 0;\n  bottom: 0;\n  left: 0;\n}\n\n.ant-drawer-content-top {\n  top: 0;\n  left: 0;\n  right: 0;\n}\n\n.ant-drawer-content-bottom {\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n.ant-drawer-fade-enter-active .ant-drawer-mask,\n.ant-drawer-fade-exit-active .ant-drawer-mask {\n  transition: opacity 0.3s;\n}\n.ant-drawer-fade-enter-active .ant-drawer-content,\n.ant-drawer-fade-exit-active .ant-drawer-content {\n  transition: transform 0.3s;\n}\n\n.ant-drawer-fade-enter .ant-drawer-mask,\n.ant-drawer-fade-exit-to .ant-drawer-mask {\n  opacity: 0;\n}\n.ant-drawer-fade-enter .ant-drawer-content-right,\n.ant-drawer-fade-exit-to .ant-drawer-content-right {\n  transform: translateX(100%);\n}\n.ant-drawer-fade-enter .ant-drawer-content-left,\n.ant-drawer-fade-exit-to .ant-drawer-content-left {\n  transform: translateX(-100%);\n}\n.ant-drawer-fade-enter .ant-drawer-content-top,\n.ant-drawer-fade-exit-to .ant-drawer-content-top {\n  transform: translateY(-100%);\n}\n.ant-drawer-fade-enter .ant-drawer-content-bottom,\n.ant-drawer-fade-exit-to .ant-drawer-content-bottom {\n  transform: translateY(100%);\n}";
 styleInject(css_248z$2);
 
-var _tmpl$$G = /*#__PURE__*/template(`<div aria-label=mask>`),
-  _tmpl$2$p = /*#__PURE__*/template(`<span class=i-ant-design:close-outlined>`),
-  _tmpl$3$h = /*#__PURE__*/template(`<div class="w-full text-[var(--ant-color-text)] text-size-[var(--ant-font-size-lg)] [font-weight:var(--ant-font-weight-strong)] leading-[var(--ant-line-height-lg)]">`),
-  _tmpl$4$b = /*#__PURE__*/template(`<div class=shrink-0>`),
-  _tmpl$5$7 = /*#__PURE__*/template(`<div><div class="px-[var(--ant-padding-lg)] py-[var(--ant-padding)] flex items-center [border-bottom:var(--ant-line-width)_solid_var(--ant-color-split)] empty:hidden"></div><div class="p-[--ant-drawer-body-padding] overflow-auto">`);
+var _tmpl$$G = ["<div", " aria-label=\"mask\"></div>"],
+  _tmpl$2$q = ["<span", " class=\"i-ant-design:close-outlined\"></span>"],
+  _tmpl$3$i = ["<div", " class=\"w-full text-[var(--ant-color-text)] text-size-[var(--ant-font-size-lg)] [font-weight:var(--ant-font-weight-strong)] leading-[var(--ant-line-height-lg)]\">", "</div>"],
+  _tmpl$4$b = ["<div", " class=\"shrink-0\">", "</div>"],
+  _tmpl$5$6 = ["<div", " style=\"", "\"><div class=\"px-[var(--ant-padding-lg)] py-[var(--ant-padding)] flex items-center [border-bottom:var(--ant-line-width)_solid_var(--ant-color-split)] empty:hidden\"><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><div class=\"p-[--ant-drawer-body-padding] overflow-auto\">", "</div></div>"];
 const Drawer = _props => {
   const props = mergeProps({
     size: '378px',
@@ -1618,10 +1431,6 @@ const Drawer = _props => {
         },
         get children() {
           return createComponent(Element$1, {
-            ref(r$) {
-              var _ref$ = drawerRef;
-              typeof _ref$ === "function" ? _ref$(r$) : drawerRef = r$;
-            },
             get ["class"]() {
               return cs(props.class, '[font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', 'inset-0 z-1000', isBody() ? 'fixed' : 'absolute');
             },
@@ -1637,81 +1446,45 @@ const Drawer = _props => {
                   return props.mask;
                 },
                 get children() {
-                  var _el$ = _tmpl$$G();
-                  _el$.$$click = () => {
-                    if (props.maskClosable) {
+                  return ssr(_tmpl$$G, ssrHydrationKey() + ssrAttribute("class", escape(cs('ant-drawer-mask', 'absolute inset-0 bg-[--ant-color-bg-mask]'), true), false));
+                }
+              }), ssr(_tmpl$5$6, ssrHydrationKey() + ssrAttribute("class", escape(cs('ant-drawer-content', {
+                left: 'ant-drawer-content-left',
+                right: 'ant-drawer-content-right',
+                top: 'ant-drawer-content-top',
+                bottom: 'ant-drawer-content-bottom'
+              }[props.placement], 'absolute bg-[--ant-color-bg-container-secondary] grid [grid-template-rows:auto_1fr]'), true), false), "width:" + (direction() === 'horizontal' ? escape(props.size, true) : escape(undefined, true)) + (";height:" + (direction() === 'vertical' ? escape(props.size, true) : escape(undefined, true))), escape(createComponent(Show, {
+                get when() {
+                  return props.closeIcon;
+                },
+                get children() {
+                  return createComponent(Button$1, {
+                    type: "text",
+                    size: "small",
+                    "class": "shrink-0 mr-[var(--ant-margin-sm)] text-size-[var(--ant-font-size-lg)] h-[var(--ant-font-size-lg)] leading-[var(--ant-font-size-lg)] hover:!bg-transparent !text-[var(--ant-color-icon)] hover:!text-[var(--ant-color-icon-hover)] !p-0",
+                    onClick: () => {
                       props.onClose?.();
+                    },
+                    get children() {
+                      return ssr(_tmpl$2$q, ssrHydrationKey());
                     }
-                  };
-                  effect(() => className(_el$, cs('ant-drawer-mask', 'absolute inset-0 bg-[--ant-color-bg-mask]')));
-                  return _el$;
+                  });
                 }
-              }), (() => {
-                var _el$2 = _tmpl$5$7(),
-                  _el$3 = _el$2.firstChild,
-                  _el$7 = _el$3.nextSibling;
-                _el$2.$$click = e => {
-                  e.stopPropagation();
-                };
-                insert(_el$3, createComponent(Show, {
-                  get when() {
-                    return props.closeIcon;
-                  },
-                  get children() {
-                    return createComponent(Button$1, {
-                      type: "text",
-                      size: "small",
-                      "class": "shrink-0 mr-[var(--ant-margin-sm)] text-size-[var(--ant-font-size-lg)] h-[var(--ant-font-size-lg)] leading-[var(--ant-font-size-lg)] hover:!bg-transparent !text-[var(--ant-color-icon)] hover:!text-[var(--ant-color-icon-hover)] !p-0",
-                      onClick: () => {
-                        props.onClose?.();
-                      },
-                      get children() {
-                        return _tmpl$2$p();
-                      }
-                    });
-                  }
-                }), null);
-                insert(_el$3, createComponent(Show, {
-                  get when() {
-                    return title();
-                  },
-                  get children() {
-                    var _el$5 = _tmpl$3$h();
-                    insert(_el$5, title);
-                    return _el$5;
-                  }
-                }), null);
-                insert(_el$3, createComponent(Show, {
-                  get when() {
-                    return extra();
-                  },
-                  get children() {
-                    var _el$6 = _tmpl$4$b();
-                    insert(_el$6, extra);
-                    return _el$6;
-                  }
-                }), null);
-                insert(_el$7, () => props.children);
-                effect(_p$ => {
-                  var _v$ = cs('ant-drawer-content', {
-                      left: 'ant-drawer-content-left',
-                      right: 'ant-drawer-content-right',
-                      top: 'ant-drawer-content-top',
-                      bottom: 'ant-drawer-content-bottom'
-                    }[props.placement], 'absolute bg-[--ant-color-bg-container-secondary] grid [grid-template-rows:auto_1fr]'),
-                    _v$2 = direction() === 'horizontal' ? props.size : undefined,
-                    _v$3 = direction() === 'vertical' ? props.size : undefined;
-                  _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-                  _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$2.style.setProperty("width", _v$2) : _el$2.style.removeProperty("width"));
-                  _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$2.style.setProperty("height", _v$3) : _el$2.style.removeProperty("height"));
-                  return _p$;
-                }, {
-                  e: undefined,
-                  t: undefined,
-                  a: undefined
-                });
-                return _el$2;
-              })()];
+              })), escape(createComponent(Show, {
+                get when() {
+                  return title();
+                },
+                get children() {
+                  return ssr(_tmpl$3$i, ssrHydrationKey(), escape(title()));
+                }
+              })), escape(createComponent(Show, {
+                get when() {
+                  return extra();
+                },
+                get children() {
+                  return ssr(_tmpl$4$b, ssrHydrationKey(), escape(extra()));
+                }
+              })), escape(props.children))];
             }
           });
         }
@@ -1740,7 +1513,6 @@ const Drawer = _props => {
     }
   });
 };
-delegateEvents(["click"]);
 
 /**
  * 如果传入一个非数组字段，则将其转化为数组
@@ -1869,7 +1641,8 @@ class DOMRect {
   }
 }
 
-var _tmpl$$F = /*#__PURE__*/template(`<div>`);
+var _tmpl$$F = ["<div", " style=\"", "\">", "</div>"],
+  _tmpl$2$p = ["<div", " style=\"", "\"></div>"];
 const unwrapContent = (content, close) => {
   return typeof content === 'function' ? content(close) : content;
 };
@@ -2022,7 +1795,7 @@ const Tooltip = _props => {
     }
   };
   // =========================== Tooltip ============================
-  const id = nanoid();
+  nanoid();
   const resolvedChildren = children(() => createComponent(TooltipContext.Provider, {
     value: context,
     get children() {
@@ -2030,10 +1803,6 @@ const Tooltip = _props => {
     }
   }));
   const [contentRef, setContentRef] = createSignal();
-  const setPopupRef = node => {
-    setContentRef(node);
-    parentContext?.registerSubPopup(id, node);
-  };
   const [_open, setOpen] = createControllableValue(_props, {
     defaultValue: false,
     defaultValuePropName: 'defaultOpen',
@@ -2276,7 +2045,7 @@ const Tooltip = _props => {
       _contentRef.style.setProperty('--inner-translate-y', `${innerTranslateY}px`);
     }
   });
-  return [memo(resolvedChildren), createComponent(Dynamic, {
+  return [resolvedChildren(), createComponent(Dynamic, {
     get component() {
       return props.destroyOnClose ? Show : DelayShow;
     },
@@ -2290,7 +2059,6 @@ const Tooltip = _props => {
         },
         get children() {
           return createComponent(Element$1, {
-            ref: setPopupRef,
             get ["class"]() {
               return cs('z-1000 fixed left-0 top-0 [font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', open() ? 'block' : 'hidden');
             },
@@ -2301,49 +2069,24 @@ const Tooltip = _props => {
               e.stopPropagation();
             },
             get children() {
-              return [(() => {
-                var _el$ = _tmpl$$F();
-                insert(_el$, createComponent(TooltipContext.Provider, {
-                  value: context,
-                  get children() {
-                    return unwrapContent(props.content, () => setOpen(false));
-                  }
-                }));
-                effect(_p$ => {
-                  var _v$ = cs('px-8px py-6px [box-shadow:var(--ant-box-shadow)] rounded-[var(--ant-border-radius-lg)] overflow-auto', props.plain ? 'text-[var(--ant-color-text)] bg-[var(--ant-color-bg-container-tertiary)]' : 'text-[var(--ant-color-text-light-solid)] bg-[var(--ant-color-bg-spotlight)]'),
-                    _v$2 = {
-                      transform: 'translate(var(--inner-translate-x), var(--inner-translate-y))',
-                      ...props.contentStyle
-                    };
-                  _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-                  _p$.t = style(_el$, _v$2, _p$.t);
-                  return _p$;
-                }, {
-                  e: undefined,
-                  t: undefined
-                });
-                return _el$;
-              })(), createComponent(Show, {
+              return [ssr(_tmpl$$F, ssrHydrationKey() + ssrAttribute("class", escape(cs('px-8px py-6px [box-shadow:var(--ant-box-shadow)] rounded-[var(--ant-border-radius-lg)] overflow-auto', props.plain ? 'text-[var(--ant-color-text)] bg-[var(--ant-color-bg-container-tertiary)]' : 'text-[var(--ant-color-text-light-solid)] bg-[var(--ant-color-bg-spotlight)]'), true), false), ssrStyle({
+                transform: 'translate(var(--inner-translate-x), var(--inner-translate-y))',
+                ...props.contentStyle
+              }), escape(createComponent(TooltipContext.Provider, {
+                value: context,
+                get children() {
+                  return unwrapContent(props.content, () => setOpen(false));
+                }
+              }))), createComponent(Show, {
                 get when() {
                   return props.arrow;
                 },
                 get children() {
-                  var _el$2 = _tmpl$$F();
-                  effect(_p$ => {
-                    var _v$3 = cs('w-8px h-8px absolute border-transparent [box-shadow:var(--ant-box-shadow)]'),
-                      _v$4 = {
-                        'clip-path': 'polygon(-100% -100%, 200% -100%, 200% 200%)',
-                        'background-color': props.plain ? 'var(--ant-color-bg-container-tertiary)' : 'var(--ant-color-bg-spotlight)',
-                        ...ARROW_STYLE_DICT[mergePlacement(reversedMainPlacement(), reversedMinorPlacement())]
-                      };
-                    _v$3 !== _p$.e && className(_el$2, _p$.e = _v$3);
-                    _p$.t = style(_el$2, _v$4, _p$.t);
-                    return _p$;
-                  }, {
-                    e: undefined,
-                    t: undefined
-                  });
-                  return _el$2;
+                  return ssr(_tmpl$2$p, ssrHydrationKey() + ssrAttribute("class", escape(cs('w-8px h-8px absolute border-transparent [box-shadow:var(--ant-box-shadow)]'), true), false), ssrStyle({
+                    'clip-path': 'polygon(-100% -100%, 200% -100%, 200% 200%)',
+                    'background-color': props.plain ? 'var(--ant-color-bg-container-tertiary)' : 'var(--ant-color-bg-spotlight)',
+                    ...ARROW_STYLE_DICT[mergePlacement(reversedMainPlacement(), reversedMinorPlacement())]
+                  }));
                 }
               })];
             }
@@ -2354,11 +2097,11 @@ const Tooltip = _props => {
   })];
 };
 
-var _tmpl$$E = /*#__PURE__*/template(`<span class="i-ant-design:close-circle-filled cursor-pointer text-[var(--ant-color-text-quaternary)] hover:text-[var(--ant-color-text-tertiary)] active:text-[var(--ant-color-text)]">`),
-  _tmpl$2$o = /*#__PURE__*/template(`<div tabindex=0><div class=truncate></div><span class="i-ant-design:swap-right-outlined w-32px"></span><div class=truncate></div><div aria-label=active-bar class="h-1px bg-[var(--ant-color-primary)] absolute bottom-0 transition-left"></div><div class="absolute top-0 bottom-0 right-11px flex items-center">`),
-  _tmpl$3$g = /*#__PURE__*/template(`<div class="w-200px max-h-400px overflow-auto">`),
-  _tmpl$4$a = /*#__PURE__*/template(`<input class="h-30px [outline:none] bg-inherit placeholder-text-[var(--ant-color-text-placeholder)]"readonly>`),
-  _tmpl$5$6 = /*#__PURE__*/template(`<span class="i-ant-design:down-outlined text-[var(--ant-color-text-quaternary)]">`);
+var _tmpl$$E = ["<span", " class=\"i-ant-design:close-circle-filled cursor-pointer text-[var(--ant-color-text-quaternary)] hover:text-[var(--ant-color-text-tertiary)] active:text-[var(--ant-color-text)]\"></span>"],
+  _tmpl$2$o = ["<div", " tabindex=\"0\"><div class=\"truncate\">", "</div><span class=\"i-ant-design:swap-right-outlined w-32px\"></span><div class=\"truncate\">", "</div><div aria-label=\"active-bar\" class=\"h-1px bg-[var(--ant-color-primary)] absolute bottom-0 transition-left\" style=\"", "\"></div><div class=\"absolute top-0 bottom-0 right-11px flex items-center\">", "</div></div>"],
+  _tmpl$3$h = ["<div", " class=\"w-200px max-h-400px overflow-auto\" style=\"", "\">", "</div>"],
+  _tmpl$4$a = ["<input", " class=\"h-30px [outline:none] bg-inherit placeholder-text-[var(--ant-color-text-placeholder)]\"", " readonly>"],
+  _tmpl$5$5 = ["<span", " class=\"i-ant-design:down-outlined text-[var(--ant-color-text-quaternary)]\"></span>"];
 const statusClassDict = {
   default: (disabled, focus) => cs('[border:1px_solid_var(--ant-color-border)]', !disabled && 'hover:border-[var(--ant-color-primary)] focus-within:border-[var(--ant-color-primary)] focus-within:[box-shadow:0_0_0_2px_var(--ant-control-outline)]', focus && 'border-[var(--ant-color-primary)] [box-shadow:0_0_0_2px_var(--ant-control-outline)]'),
   error: (disabled, focus) => cs('[border:1px_solid_var(--ant-color-error)]', !disabled && 'hover:border-[var(--ant-color-error-border-hover)] focus-within:[box-shadow:0_0_0_2px_rgba(255,38,5,.06)]', focus && '[box-shadow:0_0_0_2px_rgba(255,38,5,.06)]'),
@@ -2451,115 +2194,61 @@ function RangeInput(props) {
         contentStyle: {
           padding: 0
         },
-        content: () => (() => {
-          var _el$8 = _tmpl$3$g();
-          var _ref$4 = tooltipContent;
-          typeof _ref$4 === "function" ? use(_ref$4, _el$8) : tooltipContent = _el$8;
-          insert(_el$8, () => props.content({
-            currentFocusType,
-            tempValue,
-            setSingleValue
-          }));
-          effect(_$p => (_$p = `${width()}px`) != null ? _el$8.style.setProperty("width", _$p) : _el$8.style.removeProperty("width"));
-          return _el$8;
-        })(),
+        content: () => ssr(_tmpl$3$h, ssrHydrationKey(), "width:" + `${escape(width(), true)}px`, escape(props.content({
+          currentFocusType,
+          tempValue,
+          setSingleValue
+        }))),
         get children() {
-          var _el$ = _tmpl$2$o(),
-            _el$2 = _el$.firstChild,
-            _el$3 = _el$2.nextSibling,
-            _el$4 = _el$3.nextSibling,
-            _el$5 = _el$4.nextSibling,
-            _el$6 = _el$5.nextSibling;
-          _el$.addEventListener("mouseleave", () => setHover(false));
-          _el$.addEventListener("mouseenter", () => setHover(true));
-          _el$.$$click = e => {
-            setOpen(true);
-            setWidth(e.currentTarget.offsetWidth);
-            setCurrentFocusType(e.target !== endDom ? 'start' : 'end');
-          };
-          var _ref$ = container;
-          typeof _ref$ === "function" ? use(_ref$, _el$) : container = _el$;
-          var _ref$2 = startDom;
-          typeof _ref$2 === "function" ? use(_ref$2, _el$2) : startDom = _el$2;
-          insert(_el$2, createComponent(Show, {
+          return ssr(_tmpl$2$o, ssrHydrationKey() + ssrAttribute("class", escape(cs('relative min-h-32px pr-25px rounded-inherit grid [grid-template-columns:1fr_auto_1fr] items-center', tempValue().length && props.multiple ? 'pl-4px' : 'pl-11px', props.multiple && 'py-1px', props.disabled && '[pointer-events:none] bg-[var(--ant-color-bg-container-disabled)] color-[var(--ant-color-text-disabled)]', statusClassDict[props.status ?? 'default'](!!props.disabled, open())), true), false), escape(createComponent(Show, {
             get when() {
               return !isNil(tempValue()[0]);
             },
             get fallback() {
-              return (() => {
-                var _el$9 = _tmpl$4$a();
-                effect(() => setAttribute(_el$9, "placeholder", props.placeholder?.[0]));
-                return _el$9;
-              })();
+              return ssr(_tmpl$4$a, ssrHydrationKey(), ssrAttribute("placeholder", escape(props.placeholder?.[0], true), false));
             },
             get children() {
               return optionLabelRender(tempValue()[0]);
             }
-          }));
-          var _ref$3 = endDom;
-          typeof _ref$3 === "function" ? use(_ref$3, _el$4) : endDom = _el$4;
-          insert(_el$4, createComponent(Show, {
+          })), escape(createComponent(Show, {
             get when() {
               return !isNil(tempValue()[1]);
             },
             get fallback() {
-              return (() => {
-                var _el$10 = _tmpl$4$a();
-                effect(() => setAttribute(_el$10, "placeholder", props.placeholder?.[1]));
-                return _el$10;
-              })();
+              return ssr(_tmpl$4$a, ssrHydrationKey(), ssrAttribute("placeholder", escape(props.placeholder?.[1], true), false));
             },
             get children() {
               return optionLabelRender(tempValue()[1]);
             }
-          }));
-          insert(_el$6, createComponent(Show, {
+          })), ssrStyle({
+            display: open() ? 'block' : 'none',
+            ...activeBarStyle()
+          }), escape(createComponent(Show, {
             get when() {
               return showClearBtn();
             },
             get fallback() {
-              return _tmpl$5$6();
+              return ssr(_tmpl$5$5, ssrHydrationKey());
             },
             get children() {
-              var _el$7 = _tmpl$$E();
-              _el$7.$$click = e => {
-                e.stopPropagation();
-                setValue([]);
-                setOpen(false);
-              };
-              return _el$7;
+              return ssr(_tmpl$$E, ssrHydrationKey());
             }
-          }));
-          effect(_p$ => {
-            var _v$ = cs('relative min-h-32px pr-25px rounded-inherit grid [grid-template-columns:1fr_auto_1fr] items-center', tempValue().length && props.multiple ? 'pl-4px' : 'pl-11px', props.multiple && 'py-1px', props.disabled && '[pointer-events:none] bg-[var(--ant-color-bg-container-disabled)] color-[var(--ant-color-text-disabled)]', statusClassDict[props.status ?? 'default'](!!props.disabled, open())),
-              _v$2 = {
-                display: open() ? 'block' : 'none',
-                ...activeBarStyle()
-              };
-            _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-            _p$.t = style(_el$5, _v$2, _p$.t);
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined
-          });
-          return _el$;
+          })));
         }
       });
     }
   });
 }
-delegateEvents(["click"]);
 
-var _tmpl$$D = /*#__PURE__*/template(`<div class=w-full>`),
-  _tmpl$2$n = /*#__PURE__*/template(`<span class="right-[--ant-select-input-padding-right] i-ant-design:close-circle-filled cursor-pointer text-[var(--ant-color-text-quaternary)] hover:text-[var(--ant-color-text-tertiary)] active:text-[var(--ant-color-text)]">`),
-  _tmpl$3$f = /*#__PURE__*/template(`<div tabindex=0><div>`),
-  _tmpl$4$9 = /*#__PURE__*/template(`<div class="w-[--ant-select-popup-match-width] max-h-400px overflow-auto [font-size:var(--ant-select-popup-font-size)]">`),
-  _tmpl$5$5 = /*#__PURE__*/template(`<span class="inline-block w-0"> `),
-  _tmpl$6$2 = /*#__PURE__*/template(`<span class="block w-full h-[calc(var(--ant-select-input-height)-2px)] leading-[calc(var(--ant-select-input-height)-2px)] text-[var(--ant-color-text-placeholder)]">`),
-  _tmpl$7$1 = /*#__PURE__*/template(`<div class="w-full h-[calc(var(--ant-select-input-height)-2px)] leading-[calc(var(--ant-select-input-height)-2px)] ellipsis">`),
-  _tmpl$8 = /*#__PURE__*/template(`<span class="inline-block my-2px mr-4px bg-[var(--ant-select-multiple-item-bg)] leading-[var(--ant-select-multiple-item-height)] h-[var(--ant-select-multiple-item-height)] pl-8px pr-4px rounded-[var(--ant-border-radius-sm)]"><span class="i-ant-design:close-outlined text-[var(--ant-color-icon)] hover:text-[var(--ant-color-icon-hover)] text-12px cursor-pointer">`),
-  _tmpl$9 = /*#__PURE__*/template(`<span class="i-ant-design:down-outlined text-[var(--ant-color-text-quaternary)] text-12px">`);
+var _tmpl$$D = ["<div", " class=\"w-full\">", "</div>"],
+  _tmpl$2$n = ["<span", " class=\"right-[--ant-select-input-padding-right] i-ant-design:close-circle-filled cursor-pointer text-[var(--ant-color-text-quaternary)] hover:text-[var(--ant-color-text-tertiary)] active:text-[var(--ant-color-text)]\"></span>"],
+  _tmpl$3$g = ["<div", " style=\"", "\" tabindex=\"0\"><!--$-->", "<!--/--><div", ">", "</div></div>"],
+  _tmpl$4$9 = ["<div", " class=\"w-[--ant-select-popup-match-width] max-h-400px overflow-auto [font-size:var(--ant-select-popup-font-size)]\" style=\"", "\">", "</div>"],
+  _tmpl$5$4 = ["<span", " class=\"inline-block w-0\"> </span>"],
+  _tmpl$6$1 = ["<span", " class=\"block w-full h-[calc(var(--ant-select-input-height)-2px)] leading-[calc(var(--ant-select-input-height)-2px)] text-[var(--ant-color-text-placeholder)]\"><!--$-->", "<!--/--><!--$-->", "<!--/--></span>"],
+  _tmpl$7$1 = ["<div", " class=\"w-full h-[calc(var(--ant-select-input-height)-2px)] leading-[calc(var(--ant-select-input-height)-2px)] ellipsis\"", ">", "</div>"],
+  _tmpl$8 = ["<span", " class=\"inline-block my-2px mr-4px bg-[var(--ant-select-multiple-item-bg)] leading-[var(--ant-select-multiple-item-height)] h-[var(--ant-select-multiple-item-height)] pl-8px pr-4px rounded-[var(--ant-border-radius-sm)]\"", "><!--$-->", "<!--/--><span class=\"i-ant-design:close-outlined text-[var(--ant-color-icon)] hover:text-[var(--ant-color-icon-hover)] text-12px cursor-pointer\"></span></span>"],
+  _tmpl$9 = ["<span", " class=\"i-ant-design:down-outlined text-[var(--ant-color-text-quaternary)] text-12px\"></span>"];
 function SelectInput(_props) {
   let select;
   let tooltipContent;
@@ -2586,7 +2275,7 @@ function SelectInput(_props) {
   const [hover, setHover] = createSignal(false);
   const showClearBtn = createMemo(() => props.allowClear && hover() && valueArr().length > 0);
   const optionLabelRender = v => props.labelRender ? props.labelRender(v) : String(v);
-  const style$1 = createMemo(() => ({
+  const style = createMemo(() => ({
     '--ant-select-input-font-size': {
       small: 'var(--ant-font-size)',
       middle: 'var(--ant-font-size)',
@@ -2609,15 +2298,11 @@ function SelectInput(_props) {
     ...props.style
   }));
   return createComponent(Element$1, {
-    ref(r$) {
-      var _ref$ = select;
-      typeof _ref$ === "function" ? _ref$(r$) : select = r$;
-    },
     get ["class"]() {
       return cs('!p[.ant-input-addon]:my--1px !p[.ant-input-addon]:mx--12px', 'rounded-6px cursor-pointer inline-block text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', isCompact && 'ant-compact-item', props.class, props.disabled && 'cursor-not-allowed');
     },
     get style() {
-      return style$1();
+      return style();
     },
     get children() {
       return createComponent(Tooltip, {
@@ -2634,47 +2319,42 @@ function SelectInput(_props) {
         contentStyle: {
           padding: 0
         },
-        content: () => (() => {
-          var _el$5 = _tmpl$4$9();
-          var _ref$2 = tooltipContent;
-          typeof _ref$2 === "function" ? use(_ref$2, _el$5) : tooltipContent = _el$5;
-          insert(_el$5, () => props.content(() => setOpen(false)));
-          effect(_$p => style(_el$5, {
-            ...pick(style$1(), ['--ant-select-popup-font-size', '--ant-select-popup-match-width'])
-          }, _$p));
-          return _el$5;
-        })(),
+        content: () => ssr(_tmpl$4$9, ssrHydrationKey(), ssrStyle({
+          ...pick(style(), ['--ant-select-popup-font-size', '--ant-select-popup-match-width'])
+        }), escape(props.content(() => setOpen(false)))),
         get getPopupContainer() {
           return props.getPopupContainer;
         },
         get children() {
-          var _el$ = _tmpl$3$f(),
-            _el$3 = _el$.firstChild;
-          _el$.addEventListener("mouseleave", () => setHover(false));
-          _el$.addEventListener("mouseenter", () => setHover(true));
-          _el$.$$click = e => {
-            setOpen(v => !v);
-            setPopupMatchWidth(e.currentTarget.offsetWidth);
-            e.currentTarget.focus();
-          };
-          insert(_el$, createComponent(Show, {
+          return ssr(_tmpl$3$g, ssrHydrationKey() + ssrAttribute("class", escape(cs('p[.ant-input-addon]:border-transparent p[.ant-input-addon]:bg-transparent p[.ant-input-addon]:focus-within:border-transparent p[.ant-input-addon]:hover:border-transparent p[.ant-input-addon]:focus-within:[box-shadow:none]', 'relative h-[--ant-select-input-height] rounded-inherit py-1px flex items-center [font-size:var(--ant-select-input-font-size)] p-[--ant-select-input-padding]', props.disabled && '[pointer-events:none] bg-[var(--ant-color-bg-container-disabled)] color-[var(--ant-color-text-disabled)]', props.variant === 'outlined' && {
+            default: cs('border-1px border-solid border-[--ant-color-border] bg-[--ant-color-bg-container]', !props.disabled && 'hover:border-[var(--ant-color-primary)] focus-within:border-[var(--ant-color-primary)] focus-within:[box-shadow:0_0_0_2px_var(--ant-control-outline)]'),
+            error: cs('border-1px border-solid border-[--ant-color-error] bg-[--ant-color-bg-container]', !props.disabled && 'hover:border-[var(--ant-color-error-border-hover)] focus-within:[box-shadow:0_0_0_2px_rgba(255,38,5,.06)]'),
+            warning: cs('border-1px border-solid border-[--ant-color-warning] bg-[--ant-color-bg-container]', !props.disabled && 'hover:border-[var(--ant-color-warning-border-hover)] focus-within:[box-shadow:0_0_0_2px_rgba(255,215,5,.1)]')
+          }[props.status ?? 'default'], props.variant === 'filled' && {
+            default: cs('bg-[--ant-color-fill-tertiary]', !props.disabled && 'hover:bg-[--ant-color-fill-secondary]'),
+            error: cs('bg-[--ant-color-error-bg]', !props.disabled && 'hover:bg-[--ant-color-error-bg-hover]'),
+            warning: cs('bg-[--ant-color-warning-bg]', !props.disabled && 'hover:bg-[--ant-color-warning-bg-hover]')
+          }[props.status ?? 'default']), true), false), "--ant-select-input-height:" + escape({
+            small: '24px',
+            middle: '32px',
+            large: '40px'
+          }[size()], true) + (";--ant-select-multiple-item-height:" + escape({
+            small: '16px',
+            middle: '24px',
+            large: '32px'
+          }[size()], true)), escape(createComponent(Show, {
             get when() {
               return valueArr().length;
             },
             get fallback() {
-              return (() => {
-                var _el$6 = _tmpl$6$2();
-                insert(_el$6, () => props.placeholder, null);
-                insert(_el$6, createComponent(Show, {
-                  get when() {
-                    return !props.placeholder;
-                  },
-                  get children() {
-                    return _tmpl$5$5();
-                  }
-                }), null);
-                return _el$6;
-              })();
+              return ssr(_tmpl$6$1, ssrHydrationKey(), escape(props.placeholder), escape(createComponent(Show, {
+                get when() {
+                  return !props.placeholder;
+                },
+                get children() {
+                  return ssr(_tmpl$5$4, ssrHydrationKey());
+                }
+              })));
             },
             get children() {
               return createComponent(Show, {
@@ -2685,39 +2365,24 @@ function SelectInput(_props) {
                   return createComponent(Dynamic, {
                     component: () => {
                       const optionLabel = createMemo(() => optionLabelRender(valueArr()[0]));
-                      return (() => {
-                        var _el$8 = _tmpl$7$1();
-                        insert(_el$8, optionLabel);
-                        effect(() => setAttribute(_el$8, "title", typeof optionLabel() === 'string' ? optionLabel() : undefined));
-                        return _el$8;
-                      })();
+                      return ssr(_tmpl$7$1, ssrHydrationKey(), ssrAttribute("title", typeof optionLabel() === 'string' ? escape(optionLabel(), true) : escape(undefined, true), false), escape(optionLabel()));
                     }
                   });
                 },
                 get children() {
-                  var _el$2 = _tmpl$$D();
-                  insert(_el$2, createComponent(For, {
+                  return ssr(_tmpl$$D, ssrHydrationKey(), escape(createComponent(For, {
                     get each() {
                       return valueArr();
                     },
                     children: item => {
                       const optionLabel = createMemo(() => optionLabelRender(valueArr()[0]));
-                      return (() => {
-                        var _el$9 = _tmpl$8(),
-                          _el$10 = _el$9.firstChild;
-                        insert(_el$9, optionLabel, _el$10);
-                        _el$10.$$click = () => setValue(valueArr().filter(v => v !== item));
-                        effect(() => setAttribute(_el$9, "title", typeof optionLabel() === 'string' ? optionLabel() : undefined));
-                        return _el$9;
-                      })();
+                      return ssr(_tmpl$8, ssrHydrationKey(), ssrAttribute("title", typeof optionLabel() === 'string' ? escape(optionLabel(), true) : escape(undefined, true), false), escape(optionLabel()));
                     }
-                  }));
-                  return _el$2;
+                  })));
                 }
               });
             }
-          }), _el$3);
-          insert(_el$3, createComponent(Show, {
+          })), ssrAttribute("class", escape(cs('shrink-0 flex justify-end items-center p-[--ant-select-input-addon-after-padding] empty:hidden'), true), false), escape(createComponent(Show, {
             get when() {
               return showClearBtn();
             },
@@ -2730,65 +2395,25 @@ function SelectInput(_props) {
                   return props.suffixIcon;
                 },
                 get children() {
-                  return _tmpl$9();
+                  return ssr(_tmpl$9, ssrHydrationKey());
                 }
               });
             },
             get children() {
-              var _el$4 = _tmpl$2$n();
-              _el$4.$$click = e => {
-                e.stopPropagation();
-                setValue([]);
-                setOpen(false);
-              };
-              return _el$4;
+              return ssr(_tmpl$2$n, ssrHydrationKey());
             }
-          }));
-          effect(_p$ => {
-            var _v$ = cs('p[.ant-input-addon]:border-transparent p[.ant-input-addon]:bg-transparent p[.ant-input-addon]:focus-within:border-transparent p[.ant-input-addon]:hover:border-transparent p[.ant-input-addon]:focus-within:[box-shadow:none]', 'relative h-[--ant-select-input-height] rounded-inherit py-1px flex items-center [font-size:var(--ant-select-input-font-size)] p-[--ant-select-input-padding]', props.disabled && '[pointer-events:none] bg-[var(--ant-color-bg-container-disabled)] color-[var(--ant-color-text-disabled)]', props.variant === 'outlined' && {
-                default: cs('border-1px border-solid border-[--ant-color-border] bg-[--ant-color-bg-container]', !props.disabled && 'hover:border-[var(--ant-color-primary)] focus-within:border-[var(--ant-color-primary)] focus-within:[box-shadow:0_0_0_2px_var(--ant-control-outline)]'),
-                error: cs('border-1px border-solid border-[--ant-color-error] bg-[--ant-color-bg-container]', !props.disabled && 'hover:border-[var(--ant-color-error-border-hover)] focus-within:[box-shadow:0_0_0_2px_rgba(255,38,5,.06)]'),
-                warning: cs('border-1px border-solid border-[--ant-color-warning] bg-[--ant-color-bg-container]', !props.disabled && 'hover:border-[var(--ant-color-warning-border-hover)] focus-within:[box-shadow:0_0_0_2px_rgba(255,215,5,.1)]')
-              }[props.status ?? 'default'], props.variant === 'filled' && {
-                default: cs('bg-[--ant-color-fill-tertiary]', !props.disabled && 'hover:bg-[--ant-color-fill-secondary]'),
-                error: cs('bg-[--ant-color-error-bg]', !props.disabled && 'hover:bg-[--ant-color-error-bg-hover]'),
-                warning: cs('bg-[--ant-color-warning-bg]', !props.disabled && 'hover:bg-[--ant-color-warning-bg-hover]')
-              }[props.status ?? 'default']),
-              _v$2 = {
-                small: '24px',
-                middle: '32px',
-                large: '40px'
-              }[size()],
-              _v$3 = {
-                small: '16px',
-                middle: '24px',
-                large: '32px'
-              }[size()],
-              _v$4 = cs('shrink-0 flex justify-end items-center p-[--ant-select-input-addon-after-padding] empty:hidden');
-            _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-            _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("--ant-select-input-height", _v$2) : _el$.style.removeProperty("--ant-select-input-height"));
-            _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$.style.setProperty("--ant-select-multiple-item-height", _v$3) : _el$.style.removeProperty("--ant-select-multiple-item-height"));
-            _v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined,
-            a: undefined,
-            o: undefined
-          });
-          return _el$;
+          })));
         }
       });
     }
   });
 }
-delegateEvents(["click"]);
 
-var _tmpl$$C = /*#__PURE__*/template(`<svg width=64 height=41 viewBox="0 0 64 41"xmlns=http://www.w3.org/2000/svg><g transform="translate(0 1)"fill=none fill-rule=evenodd><ellipse fill=#f5f5f5 cx=32 cy=33 rx=32 ry=7></ellipse><g fill-rule=nonzero stroke=#d9d9d9><path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path><path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"fill=#fafafa>`);
-const EmptySvg$1 = () => _tmpl$$C();
+var _tmpl$$C = ["<svg", " width=\"64\" height=\"41\" viewBox=\"0 0 64 41\" xmlns=\"http://www.w3.org/2000/svg\"><g transform=\"translate(0 1)\" fill=\"none\" fill-rule=\"evenodd\"><ellipse fill=\"#f5f5f5\" cx=\"32\" cy=\"33\" rx=\"32\" ry=\"7\"></ellipse><g fill-rule=\"nonzero\" stroke=\"#d9d9d9\"><path d=\"M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z\"></path><path d=\"M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z\" fill=\"#fafafa\"></path></g></g></svg>"];
+const EmptySvg$1 = () => ssr(_tmpl$$C, ssrHydrationKey());
 
-var _tmpl$$B = /*#__PURE__*/template(`<div class="mb-[var(--ant-margin-xs)] flex justify-center">`),
-  _tmpl$2$m = /*#__PURE__*/template(`<div class="text-[var(--ant-color-text-description)] text-center">`);
+var _tmpl$$B = ["<div", " class=\"mb-[var(--ant-margin-xs)] flex justify-center\">", "</div>"],
+  _tmpl$2$m = ["<div", " class=\"text-[var(--ant-color-text-description)] text-center\">", "</div>"];
 const PRESENTED_IMAGE_SIMPLE = props => {
   return createComponent(Element$1, {
     get ["class"]() {
@@ -2798,24 +2423,16 @@ const PRESENTED_IMAGE_SIMPLE = props => {
       return props.style;
     },
     get children() {
-      return [(() => {
-        var _el$ = _tmpl$$B();
-        insert(_el$, createComponent(EmptySvg$1, {}));
-        return _el$;
-      })(), (() => {
-        var _el$2 = _tmpl$2$m();
-        insert(_el$2, () => props.description ?? '暂无数据');
-        return _el$2;
-      })()];
+      return [ssr(_tmpl$$B, ssrHydrationKey(), escape(createComponent(EmptySvg$1, {}))), ssr(_tmpl$2$m, ssrHydrationKey(), escape(props.description) ?? '暂无数据')];
     }
   });
 };
 
-var _tmpl$$A = /*#__PURE__*/template(`<svg width=184 height=100 viewBox="0 0 184 152"xmlns=http://www.w3.org/2000/svg><g fill=none fill-rule=evenodd><g transform="translate(24 31.67)"><ellipse fill-opacity=.8 fill=#F5F5F7 cx=67.797 cy=106.89 rx=67.797 ry=12.668></ellipse><path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"fill=#AEB8C2></path><path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"fill=url(#linearGradient-1) transform=translate(13.56)></path><path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"fill=#F5F5F7></path><path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"fill=#DCE0E6></path></g><path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"fill=#DCE0E6></path><g transform="translate(149.65 15.383)"fill=#FFF><ellipse cx=20.654 cy=3.167 rx=2.849 ry=2.815></ellipse><path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z">`);
-const EmptySvg = () => _tmpl$$A();
+var _tmpl$$A = ["<svg", " width=\"184\" height=\"100\" viewBox=\"0 0 184 152\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><g transform=\"translate(24 31.67)\"><ellipse fill-opacity=\".8\" fill=\"#F5F5F7\" cx=\"67.797\" cy=\"106.89\" rx=\"67.797\" ry=\"12.668\"></ellipse><path d=\"M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z\" fill=\"#AEB8C2\"></path><path d=\"M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z\" fill=\"url(#linearGradient-1)\" transform=\"translate(13.56)\"></path><path d=\"M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z\" fill=\"#F5F5F7\"></path><path d=\"M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z\" fill=\"#DCE0E6\"></path></g><path d=\"M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z\" fill=\"#DCE0E6\"></path><g transform=\"translate(149.65 15.383)\" fill=\"#FFF\"><ellipse cx=\"20.654\" cy=\"3.167\" rx=\"2.849\" ry=\"2.815\"></ellipse><path d=\"M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z\"></path></g></g></svg>"];
+const EmptySvg = () => ssr(_tmpl$$A, ssrHydrationKey());
 
-var _tmpl$$z = /*#__PURE__*/template(`<div class="mb-[var(--ant-margin-xs)] flex justify-center">`),
-  _tmpl$2$l = /*#__PURE__*/template(`<div class="text-[var(--ant-color-text)] text-center">`);
+var _tmpl$$z = ["<div", " class=\"mb-[var(--ant-margin-xs)] flex justify-center\">", "</div>"],
+  _tmpl$2$l = ["<div", " class=\"text-[var(--ant-color-text)] text-center\">", "</div>"];
 const Empty = props => {
   return createComponent(Element$1, {
     get ["class"]() {
@@ -2825,22 +2442,14 @@ const Empty = props => {
       return props.style;
     },
     get children() {
-      return [(() => {
-        var _el$ = _tmpl$$z();
-        insert(_el$, createComponent(EmptySvg, {}));
-        return _el$;
-      })(), (() => {
-        var _el$2 = _tmpl$2$l();
-        insert(_el$2, () => props.description ?? '暂无数据');
-        return _el$2;
-      })()];
+      return [ssr(_tmpl$$z, ssrHydrationKey(), escape(createComponent(EmptySvg, {}))), ssr(_tmpl$2$l, ssrHydrationKey(), escape(props.description) ?? '暂无数据')];
     }
   });
 };
 Empty.PRESENTED_IMAGE_SIMPLE = PRESENTED_IMAGE_SIMPLE;
 
-var _tmpl$$y = /*#__PURE__*/template(`<div class=p-2px>`),
-  _tmpl$2$k = /*#__PURE__*/template(`<div>`);
+var _tmpl$$y = ["<div", " class=\"p-2px\">", "</div>"],
+  _tmpl$2$k = ["<div", ">", "</div>"];
 function Select(props) {
   const [selectInputProps] = splitProps(props, ['multiple', 'allowClear', 'class', 'style', 'disabled', 'placeholder', 'status', 'size', 'variant', 'suffixIcon', 'placement', 'getPopupContainer']);
   const [value, setValue] = createControllableValue(props);
@@ -2863,45 +2472,16 @@ function Select(props) {
         return createComponent(Empty.PRESENTED_IMAGE_SIMPLE, {});
       },
       get children() {
-        var _el$ = _tmpl$$y();
-        insert(_el$, createComponent(For, {
+        return ssr(_tmpl$$y, ssrHydrationKey(), escape(createComponent(For, {
           get each() {
             return props.options;
           },
-          children: item => (() => {
-            var _el$2 = _tmpl$2$k();
-            _el$2.$$click = () => {
-              if (!props.multiple) {
-                setValue(item.value);
-                close();
-                return;
-              }
-              if (valueArr().includes(item.value)) {
-                setValue(valueArr().filter(v => v !== item.value));
-              } else {
-                setValue([...valueArr(), item.value]);
-              }
-            };
-            insert(_el$2, () => unwrapStringOrJSXElement(item.label));
-            effect(_p$ => {
-              var _v$ = cs('ellipsis box-content px-12px py-5px min-h-22px leading-22px hover:bg-[var(--ant-select-option-active-bg)] cursor-pointer rounded-[var(--ant-border-radius-sm)]', selectedValue(item.value) ? '!bg-[var(--ant-select-option-selected-bg)]' : '', item.class),
-                _v$2 = typeof item.label === 'string' || typeof item.label === 'number' ? item.label.toString() : undefined;
-              _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-              _v$2 !== _p$.t && setAttribute(_el$2, "title", _p$.t = _v$2);
-              return _p$;
-            }, {
-              e: undefined,
-              t: undefined
-            });
-            return _el$2;
-          })()
-        }));
-        return _el$;
+          children: item => ssr(_tmpl$2$k, ssrHydrationKey() + ssrAttribute("class", escape(cs('ellipsis box-content px-12px py-5px min-h-22px leading-22px hover:bg-[var(--ant-select-option-active-bg)] cursor-pointer rounded-[var(--ant-border-radius-sm)]', selectedValue(item.value) ? '!bg-[var(--ant-select-option-selected-bg)]' : '', item.class), true), false) + ssrAttribute("title", typeof item.label === 'string' || typeof item.label === 'number' ? escape(item.label.toString(), true) : escape(undefined, true), false), escape(unwrapStringOrJSXElement(item.label)))
+        })));
       }
     })
   }));
 }
-delegateEvents(["click"]);
 
 const getOptionValue = option => typeof option === 'object' ? option.value : option;
 const Group$1 = props => {
@@ -2935,7 +2515,7 @@ const Group$1 = props => {
             return props.disabled;
           },
           get children() {
-            return [memo(() => typeof option === 'object' ? unwrapStringOrJSXElement(option.label) : option), ' '];
+            return [typeof option === 'object' ? unwrapStringOrJSXElement(option.label) : option, ' '];
           }
         })
       });
@@ -2943,8 +2523,8 @@ const Group$1 = props => {
   });
 };
 
-var _tmpl$$x = /*#__PURE__*/template(`<span><input class="m-0 hidden"type=checkbox>`),
-  _tmpl$2$j = /*#__PURE__*/template(`<span>`);
+var _tmpl$$x = ["<span", "><input class=\"m-0 hidden\" type=\"checkbox\"></span>"],
+  _tmpl$2$j = ["<span", ">", "</span>"];
 const Checkbox = props => {
   const [checked, setChecked] = createControllableValue(props, {
     defaultValue: false,
@@ -2961,33 +2541,20 @@ const Checkbox = props => {
       return props.style;
     },
     get children() {
-      return [(() => {
-        var _el$ = _tmpl$$x(),
-          _el$2 = _el$.firstChild;
-        _el$2.addEventListener("change", e => {
-          if (props.disabled) return;
-          e.target.checked = setChecked(v => !v);
-          props.onChange?.(e);
-        });
-        effect(() => className(_el$, cs('w-16px h-16px rounded-[var(--ant-border-radius-sm)] relative', (() => {
-          if (checked()) {
-            return ['after:content-empty after:block after:absolute after:top-[calc(50%-1px)] after:left-1/2 after:-translate-1/2 after:-rotate-45 after:w-10px after:h-6px', 'after:border-solid after:border-2px after:border-t-0px after:border-r-0px', props.disabled ? 'bg-[var(--ant-color-bg-container-disabled)] [border:1px_solid_var(--ant-color-border)] after:border-[var(--ant-color-text-disabled)]' : 'bg-[var(--ant-color-primary)] after:border-white'];
-          }
-          if (props.indeterminate) {
-            return ['[border:1px_solid_var(--ant-color-border)]', 'after:content-empty after:block after:absolute after:top-1/2 after:left-1/2 after:-translate-1/2 after:w-8px after:h-8px', props.disabled ? 'after:bg-[var(--ant-color-text-disabled)]' : 'after:bg-[var(--ant-color-primary)]'];
-          }
-          return ['[border:1px_solid_var(--ant-color-border)]', props.disabled ? 'bg-[var(--ant-color-bg-container-disabled)]' : 'bg-[--ant-color-bg-container]'];
-        })())));
-        return _el$;
-      })(), createComponent(Show, {
+      return [ssr(_tmpl$$x, ssrHydrationKey() + ssrAttribute("class", escape(cs('w-16px h-16px rounded-[var(--ant-border-radius-sm)] relative', (() => {
+        if (checked()) {
+          return ['after:content-empty after:block after:absolute after:top-[calc(50%-1px)] after:left-1/2 after:-translate-1/2 after:-rotate-45 after:w-10px after:h-6px', 'after:border-solid after:border-2px after:border-t-0px after:border-r-0px', props.disabled ? 'bg-[var(--ant-color-bg-container-disabled)] [border:1px_solid_var(--ant-color-border)] after:border-[var(--ant-color-text-disabled)]' : 'bg-[var(--ant-color-primary)] after:border-white'];
+        }
+        if (props.indeterminate) {
+          return ['[border:1px_solid_var(--ant-color-border)]', 'after:content-empty after:block after:absolute after:top-1/2 after:left-1/2 after:-translate-1/2 after:w-8px after:h-8px', props.disabled ? 'after:bg-[var(--ant-color-text-disabled)]' : 'after:bg-[var(--ant-color-primary)]'];
+        }
+        return ['[border:1px_solid_var(--ant-color-border)]', props.disabled ? 'bg-[var(--ant-color-bg-container-disabled)]' : 'bg-[--ant-color-bg-container]'];
+      })()), true), false)), createComponent(Show, {
         get when() {
           return props.children;
         },
         get children() {
-          var _el$3 = _tmpl$2$j();
-          insert(_el$3, () => props.children);
-          effect(() => className(_el$3, cs('px-8px', props.disabled && 'text-[var(--ant-color-text-disabled)]')));
-          return _el$3;
+          return ssr(_tmpl$2$j, ssrHydrationKey() + ssrAttribute("class", escape(cs('px-8px', props.disabled && 'text-[var(--ant-color-text-disabled)]'), true), false), escape(props.children));
         }
       })];
     }
@@ -2995,9 +2562,9 @@ const Checkbox = props => {
 };
 Checkbox.Group = Group$1;
 
-var _tmpl$$w = /*#__PURE__*/template(`<span class=i-ant-design:caret-down-outlined>`),
-  _tmpl$2$i = /*#__PURE__*/template(`<div><div><div class=flex-shrink-0 aria-label=indent></div><div></div><div>`),
-  _tmpl$3$e = /*#__PURE__*/template(`<span class=i-ant-design:caret-right-outlined>`);
+var _tmpl$$w = ["<span", " class=\"i-ant-design:caret-down-outlined\"></span>"],
+  _tmpl$2$i = ["<div", " style=\"", "\"", "><div", "><div class=\"flex-shrink-0\" aria-label=\"indent\" style=\"", "\"></div><div", ">", "</div><!--$-->", "<!--/--><div", ">", "</div></div></div>"],
+  _tmpl$3$f = ["<span", " class=\"i-ant-design:caret-right-outlined\"></span>"];
 const SingleLevelTree = props => {
   return createComponent(For, {
     get each() {
@@ -3075,198 +2642,38 @@ const SingleLevelTree = props => {
           props.setCheckedKeys(keys => keys.filter(k => !deleteChildDict.has(k)));
         }
       };
-      let dragEnterClientX = 0;
       const [targetIndexes, setTargetIndexes] = createSignal(untrack(indexes));
       const [isTarget, setIsTarget] = createSignal(false);
       const [targetPosition, setTargetPosition] = createSignal('before');
-      const setTargetPositionAndLevelOffset = e => {
-        const middleY = e.target.getBoundingClientRect().top + e.target.clientHeight / 2;
-        const position = e.clientY < middleY ? 'before' : 'after';
-        setTargetPosition(position);
-        if (position === 'after') {
-          if (isExpanded()) {
-            setTargetIndexes([...indexes(), 0]);
-            return;
-          }
-          let isLastNode = props.treeData?.length === i() + 1;
-          if (isLastNode && e.clientX < dragEnterClientX) {
-            const levelOffset = Math.ceil((e.clientX - dragEnterClientX) / props.indentSize);
-            if (levelOffset < 0) {
-              setTargetIndexes(() => {
-                const _indexes = [...indexes()];
-                for (let _i = 0; _i < -levelOffset; _i++) {
-                  if (_i > 0) {
-                    if (_indexes.length < 2) break;
-                    const grandfatherNode = props.getNodeByIndexes(_indexes.slice(0, -1));
-                    isLastNode = grandfatherNode ? props.getChildren(grandfatherNode)?.length === last(_indexes) + 1 : false;
-                    if (!isLastNode) break;
-                  }
-                  _indexes.pop();
-                }
-                _indexes[_indexes.length - 1] = _indexes[_indexes.length - 1] + 1;
-                return _indexes;
-              });
-              return;
-            }
-          }
-          if (isEndNode() && e.clientX > dragEnterClientX) {
-            const levelOffset = (e.clientX - dragEnterClientX) / props.indentSize;
-            if (levelOffset >= 1) {
-              setTargetIndexes([...indexes(), 0]);
-              return;
-            }
-          }
-        } else {
-          // 上一个兄弟节点
-          let prevNode = i() > 0 ? props.treeData?.[i() - 1] : undefined;
-          let isPrevNodeExpanded = prevNode ? !isEmpty(props.getChildren(prevNode)) && props.expandedKeys().includes(props.getKey(prevNode)) : false;
-          if (isPrevNodeExpanded && e.clientX > dragEnterClientX) {
-            const levelOffset = Math.floor((e.clientX - dragEnterClientX) / props.indentSize);
-            if (levelOffset > 0) {
-              setTargetIndexes(() => {
-                const _indexes = [...indexes().slice(0, -1), i() - 1];
-                for (let _i = 0; _i < levelOffset; _i++) {
-                  if (_i > 0) {
-                    prevNode = props.getNodeByIndexes(_indexes);
-                    isPrevNodeExpanded = prevNode ? !isEmpty(props.getChildren(prevNode)) && props.expandedKeys().includes(props.getKey(prevNode)) : false;
-                    if (!isPrevNodeExpanded) break;
-                  }
-                  _indexes.push(props.getChildren(prevNode).length);
-                }
-                return _indexes;
-              });
-              return;
-            }
-          }
+      return [ssr(_tmpl$2$i, ssrHydrationKey() + ssrAttribute("class", escape(cs('p-[var(--ant-tree-node-wrapper-padding)] relative', props.draggableNode() && 'child[]:pointer-events-none', isTarget() && ['before:content-empty before:inline-block before:w-8px before:h-8px before:absolute before:left-[var(--ant-tree-target-node-left)] before:-translate-x-full before:rounded-1/2 before:[border:2px_solid_var(--ant-color-primary)]', 'after:content-empty after:inline-block after:h-2px after:absolute after:left-[var(--ant-tree-target-node-left)] after:right-0 after:bg-[var(--ant-color-primary)]', targetPosition() === 'before' ? 'before:top-0 before:translate-y--1/2 after:top--1px' : 'before:bottom-0 before:translate-y-1/2 after:bottom--1px']), true), false), "--ant-tree-target-node-left:" + `calc(${escape(contentRef?.offsetLeft, true) ?? 0}px + ${"0px"} + ${(escape(targetIndexes().length, true) - escape(indexes().length, true)) * escape(props.indentSize, true)}px)`, ssrAttribute("draggable", escape(props.draggable, true), false), ssrAttribute("class", escape(cs('flex items-center relative', props.isDraggable(item) && 'after:content-empty after:absolute after:inset--1px after:[border:1px_solid_var(--ant-color-primary)]'), true), false), "width:" + `${escape(props.indent, true) * escape(props.indentSize, true)}px`, ssrAttribute("class", escape(cs('flex-shrink-0 w-[var(--ant-tree-expand-icon-width)] flex items-center justify-center cursor-pointer', isEndNode() && 'opacity-0'), true), false), escape(createComponent(Show, {
+        get when() {
+          return isExpanded();
+        },
+        get fallback() {
+          return ssr(_tmpl$3$f, ssrHydrationKey());
+        },
+        get children() {
+          return ssr(_tmpl$$w, ssrHydrationKey());
         }
-        setTargetIndexes(position === 'before' ? indexes() : [...indexes().slice(0, -1), last(indexes()) + 1]);
-      };
-      return [(() => {
-        var _el$ = _tmpl$2$i(),
-          _el$2 = _el$.firstChild,
-          _el$3 = _el$2.firstChild,
-          _el$4 = _el$3.nextSibling,
-          _el$6 = _el$4.nextSibling;
-        _el$.addEventListener("drop", () => {
-          setIsTarget(false);
-          props.onDrop?.({
-            dragNode: props.draggableNode(),
-            dragIndexes: props.draggableIndexes(),
-            targetIndexes: targetIndexes()
+      })), escape(createComponent(Show, {
+        get when() {
+          return props.checkable;
+        },
+        get children() {
+          return createComponent(Checkbox, {
+            "class": "mr-8px mt-2px",
+            get checked() {
+              return props.checkedMap().get(props.getKey(item))?.checked;
+            },
+            get indeterminate() {
+              return props.checkedMap().get(props.getKey(item))?.indeterminate;
+            },
+            onChange: onCheck
           });
-        });
-        _el$.addEventListener("dragleave", () => {
-          setIsTarget(false);
-        });
-        _el$.addEventListener("dragenter", e => {
-          dragEnterClientX = e.clientX;
-          setIsTarget(true);
-          setTargetPositionAndLevelOffset(e);
-        });
-        _el$.addEventListener("dragover", e => {
-          e.preventDefault();
-          setTargetPositionAndLevelOffset(e);
-        });
-        _el$.addEventListener("dragend", () => {
-          props.setDraggableNode(null);
-          props.setDraggableIndexes(null);
-        });
-        _el$.addEventListener("dragstart", () => {
-          props.setDraggableNode(item);
-          props.setDraggableIndexes(indexes());
-        });
-        insert(_el$4, createComponent(Show, {
-          get when() {
-            return isExpanded();
-          },
-          get fallback() {
-            return (() => {
-              var _el$7 = _tmpl$3$e();
-              _el$7.$$click = () => {
-                const key = props.getKey(item);
-                props.setExpandedKeys(l => [...l, key]);
-              };
-              return _el$7;
-            })();
-          },
-          get children() {
-            var _el$5 = _tmpl$$w();
-            _el$5.$$click = () => {
-              const key = props.getKey(item);
-              props.setExpandedKeys(l => l.filter(k => k !== key));
-            };
-            return _el$5;
-          }
-        }));
-        insert(_el$2, createComponent(Show, {
-          get when() {
-            return props.checkable;
-          },
-          get children() {
-            return createComponent(Checkbox, {
-              "class": "mr-8px mt-2px",
-              get checked() {
-                return props.checkedMap().get(props.getKey(item))?.checked;
-              },
-              get indeterminate() {
-                return props.checkedMap().get(props.getKey(item))?.indeterminate;
-              },
-              onChange: onCheck
-            });
-          }
-        }), _el$6);
-        _el$6.$$click = () => {
-          const key = props.getKey(item);
-          if (!props.selectable) return;
-          if (props.multiple) {
-            props.setSelectedKeys(keys => {
-              keys = keys ?? [];
-              if (keys.includes(key)) {
-                return keys.filter(n => n !== key);
-              }
-              return [...keys, key];
-            });
-          } else {
-            props.setSelectedKeys(keys => {
-              return keys?.includes(key) ? [] : [key];
-            });
-          }
-          if (props.checkOnClick) {
-            onCheck();
-          }
-        };
-        var _ref$ = contentRef;
-        typeof _ref$ === "function" ? use(_ref$, _el$6) : contentRef = _el$6;
-        insert(_el$6, () => props.getTitle(item));
-        effect(_p$ => {
-          var _v$ = cs('p-[var(--ant-tree-node-wrapper-padding)] relative', props.draggableNode() && 'child[]:pointer-events-none', isTarget() && ['before:content-empty before:inline-block before:w-8px before:h-8px before:absolute before:left-[var(--ant-tree-target-node-left)] before:-translate-x-full before:rounded-1/2 before:[border:2px_solid_var(--ant-color-primary)]', 'after:content-empty after:inline-block after:h-2px after:absolute after:left-[var(--ant-tree-target-node-left)] after:right-0 after:bg-[var(--ant-color-primary)]', targetPosition() === 'before' ? 'before:top-0 before:translate-y--1/2 after:top--1px' : 'before:bottom-0 before:translate-y-1/2 after:bottom--1px']),
-            _v$2 = `calc(${contentRef?.offsetLeft ?? 0}px + ${contentRef && window.getComputedStyle(contentRef).paddingLeft || '0px'} + ${(targetIndexes().length - indexes().length) * props.indentSize}px)`,
-            _v$3 = props.draggable,
-            _v$4 = cs('flex items-center relative', props.isDraggable(item) && 'after:content-empty after:absolute after:inset--1px after:[border:1px_solid_var(--ant-color-primary)]'),
-            _v$5 = `${props.indent * props.indentSize}px`,
-            _v$6 = cs('flex-shrink-0 w-[var(--ant-tree-expand-icon-width)] flex items-center justify-center cursor-pointer', isEndNode() && 'opacity-0'),
-            _v$7 = cs('rounded-[var(--ant-border-radius-sm)] px-[var(--ant-padding-xxs)] cursor-pointer relative min-w-0', props.blockNode && 'w-full', props.isDraggable(item) || props.selectedKeys()?.includes(props.getKey(item)) ? 'bg-[var(--ant-tree-node-selected-bg)]' : 'hover:bg-[var(--ant-tree-node-hover-bg)]');
-          _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-          _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("--ant-tree-target-node-left", _v$2) : _el$.style.removeProperty("--ant-tree-target-node-left"));
-          _v$3 !== _p$.a && setAttribute(_el$, "draggable", _p$.a = _v$3);
-          _v$4 !== _p$.o && className(_el$2, _p$.o = _v$4);
-          _v$5 !== _p$.i && ((_p$.i = _v$5) != null ? _el$3.style.setProperty("width", _v$5) : _el$3.style.removeProperty("width"));
-          _v$6 !== _p$.n && className(_el$4, _p$.n = _v$6);
-          _v$7 !== _p$.s && className(_el$6, _p$.s = _v$7);
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined,
-          a: undefined,
-          o: undefined,
-          i: undefined,
-          n: undefined,
-          s: undefined
-        });
-        return _el$;
-      })(), createComponent(Show, {
+        }
+      })), ssrAttribute("class", escape(cs('rounded-[var(--ant-border-radius-sm)] px-[var(--ant-padding-xxs)] cursor-pointer relative min-w-0', props.blockNode && 'w-full', props.isDraggable(item) || props.selectedKeys()?.includes(props.getKey(item)) ? 'bg-[var(--ant-tree-node-selected-bg)]' : 'hover:bg-[var(--ant-tree-node-hover-bg)]'), true), false), escape(props.getTitle(item))), createComponent(Show, {
         get when() {
-          return memo(() => !!isExpanded())() && !isEndNode();
+          return isExpanded() && !isEndNode();
         },
         get children() {
           return createComponent(SingleLevelTree, mergeProps$1(props, {
@@ -3285,7 +2692,6 @@ const SingleLevelTree = props => {
     }
   });
 };
-delegateEvents(["click"]);
 
 function Tree(_props) {
   const props = mergeProps({
@@ -3475,29 +2881,20 @@ function Tree(_props) {
   });
 }
 
-var _tmpl$$v = /*#__PURE__*/template(`<div class="mb-8px flex items-center"><span class=font-600>`),
-  _tmpl$2$h = /*#__PURE__*/template(`<div><div>`);
+var _tmpl$$v = ["<div", " class=\"mb-8px flex items-center\"><span class=\"font-600\">", "</span></div>"],
+  _tmpl$2$h = ["<div", "><!--$-->", "<!--/--><div>", "</div></div>"];
 const Popover = props => {
   return createComponent(Tooltip, mergeProps$1({
     plain: true
   }, props, {
-    content: close => (() => {
-      var _el$ = _tmpl$2$h(),
-        _el$4 = _el$.firstChild;
-      insert(_el$, createComponent(Show, {
-        get when() {
-          return props.title;
-        },
-        get children() {
-          var _el$2 = _tmpl$$v(),
-            _el$3 = _el$2.firstChild;
-          insert(_el$3, () => props.title);
-          return _el$2;
-        }
-      }), _el$4);
-      insert(_el$4, () => unwrapContent(props.content, close));
-      return _el$;
-    })()
+    content: close => ssr(_tmpl$2$h, ssrHydrationKey(), escape(createComponent(Show, {
+      get when() {
+        return props.title;
+      },
+      get children() {
+        return ssr(_tmpl$$v, ssrHydrationKey(), escape(props.title));
+      }
+    })), escape(unwrapContent(props.content, close)))
   }));
 };
 
@@ -3599,74 +2996,17 @@ function setupGlobalDrag(onMove, onEnd, cursor) {
   });
 }
 
-var _tmpl$$u = /*#__PURE__*/template(`<div class="h-160px rounded-[--ant-border-radius-sm] cursor-pointer relative overflow-hidden"><div class="absolute border-2px border-solid border-[--ant-color-bg-container] rounded-1/2 w-16px h-16px -translate-1/2">`);
+var _tmpl$$u = ["<div", " class=\"h-160px rounded-[--ant-border-radius-sm] cursor-pointer relative overflow-hidden\" style=\"", "\"><div class=\"absolute border-2px border-solid border-[--ant-color-bg-container] rounded-1/2 w-16px h-16px -translate-1/2\" style=\"", "\"></div></div>"];
 const ColorPickerSelect = () => {
-  let ref;
   const context = useContext(ColorPickerContext);
   const color = createMemo(() => context?.color() ?? new Color());
-  const setColor = (e, completed) => {
-    if (!ref) return;
-    const rect = ref.getBoundingClientRect();
-    const offsetX = e.clientX - rect.x;
-    const offsetY = e.clientY - rect.y;
-    const {
-      clientWidth,
-      clientHeight
-    } = ref;
-    const hsv = color().toHsv();
-    hsv.s = clamp(offsetX / clientWidth, 0, 1);
-    hsv.v = clamp(1 - offsetY / clientHeight, 0, 1);
-    context?.setColor(new Color(hsv), completed);
-  };
-  return (() => {
-    var _el$ = _tmpl$$u(),
-      _el$2 = _el$.firstChild;
-    _el$.$$click = e => {
-      setColor(e, true);
-    };
-    var _ref$ = ref;
-    typeof _ref$ === "function" ? use(_ref$, _el$) : ref = _el$;
-    _el$.style.setProperty("background-image", "linear-gradient(0deg, rgb(0, 0, 0), transparent), linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0))");
-    _el$2.$$mousedown = () => {
-      let isDrag = false;
-      setupGlobalDrag(
-      // eslint-disable-next-line solid/reactivity
-      e => {
-        setColor(e);
-        isDrag = true;
-      },
-      // eslint-disable-next-line solid/reactivity
-      () => {
-        if (isDrag) context?.setColor(color(), true);
-      });
-    };
-    _el$2.style.setProperty("box-shadow", "inset 0 0 1px 0 var(--ant-color-text-quaternary), 0 0 0 1px var(--ant-color-fill-secondary)");
-    effect(_p$ => {
-      var _v$ = color().toHueRgbString(),
-        _v$2 = `${color().toHsv().s * 100}%`,
-        _v$3 = `${(1 - color().toHsv().v) * 100}%`,
-        _v$4 = color().toRgbString();
-      _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("background-color", _v$) : _el$.style.removeProperty("background-color"));
-      _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$2.style.setProperty("left", _v$2) : _el$2.style.removeProperty("left"));
-      _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$2.style.setProperty("top", _v$3) : _el$2.style.removeProperty("top"));
-      _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$2.style.setProperty("background", _v$4) : _el$2.style.removeProperty("background"));
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined,
-      a: undefined,
-      o: undefined
-    });
-    return _el$;
-  })();
+  return ssr(_tmpl$$u, ssrHydrationKey(), "background-color:" + escape(color().toHueRgbString(), true) + (";background-image:" + "linear-gradient(0deg, rgb(0, 0, 0), transparent), linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0))"), "left:" + `${escape(color().toHsv().s, true) * 100}%` + (";top:" + `${(1 - escape(color().toHsv().v, true)) * 100}%`) + (";background:" + escape(color().toRgbString(), true)) + (";box-shadow:" + "inset 0 0 1px 0 var(--ant-color-text-quaternary), 0 0 0 1px var(--ant-color-fill-secondary)"));
 };
-delegateEvents(["click", "mousedown"]);
 
-var _tmpl$$t = /*#__PURE__*/template(`<div>`),
-  _tmpl$2$g = /*#__PURE__*/template(`<div class="absolute top-1/2 -translate-1/2 w-[--ant-slider-handle-size] h-[--ant-slider-handle-size]">`),
-  _tmpl$3$d = /*#__PURE__*/template(`<div><div></div><div></div><div class="absolute left-[calc(var(--ant-slider-handle-size)/2)] right-[calc(var(--ant-slider-handle-size)/2)] top-1/2 -translate-y-1/2">`);
+var _tmpl$$t = ["<div", "></div>"],
+  _tmpl$2$g = ["<div", " class=\"absolute top-1/2 -translate-1/2 w-[--ant-slider-handle-size] h-[--ant-slider-handle-size]\" style=\"", "\">", "</div>"],
+  _tmpl$3$e = ["<div", "><div", " style=\"", "\"></div><div", " style=\"", "\"></div><div class=\"absolute left-[calc(var(--ant-slider-handle-size)/2)] right-[calc(var(--ant-slider-handle-size)/2)] top-1/2 -translate-y-1/2\">", "</div></div>"];
 const Slider = _props => {
-  let containerRef;
   let handleRef;
   const props = mergeProps({
     min: 0,
@@ -3711,10 +3051,6 @@ const Slider = _props => {
     });
   });
   return createComponent(Element$1, {
-    ref(r$) {
-      var _ref$ = containerRef;
-      typeof _ref$ === "function" ? _ref$(r$) : containerRef = r$;
-    },
     get ["class"]() {
       return cs(props.class, 'relative cursor-pointer', props.disabled && 'cursor-not-allowed');
     },
@@ -3733,48 +3069,15 @@ const Slider = _props => {
       };
     },
     get children() {
-      var _el$ = _tmpl$3$d(),
-        _el$2 = _el$.firstChild,
-        _el$3 = _el$2.nextSibling,
-        _el$4 = _el$3.nextSibling;
-      _el$.$$click = e => {
-        const handleWidth = handleRef?.offsetWidth ?? 0;
-        const halfHandleWidth = handleWidth / 2;
-        const offsetX = clamp(e.offsetX - halfHandleWidth, 0, containerRef.offsetWidth - handleWidth);
-        setValue(props.min + offsetX / (containerRef.offsetWidth - handleWidth) * gap());
-      };
-      insert(_el$4, createComponent(Tooltip, {
+      return ssr(_tmpl$3$e, ssrHydrationKey() + ssrAttribute("class", escape(cs(props.disabled && 'pointer-events-none'), true), false), ssrAttribute("class", escape(cs('[background:var(--ant-slider-rail-bg)] h-[--ant-slider-rail-size] rounded-[calc(var(--ant-slider-rail-size)/2)]', !props.disabled && 'hover:[background:var(--ant-slider-rail-hover-bg)]'), true), false), ssrStyle(props.railBgStyle), ssrAttribute("class", escape(cs('absolute left-0 top-1/2 -translate-y-1/2 h-[--ant-slider-rail-size] rounded-[calc(var(--ant-slider-rail-size)/2)]', props.disabled ? 'bg-[var(--ant-slider-track-bg-disabled)]' : ['bg-[var(--ant-slider-track-bg)] hover:bg-[var(--ant-slider-track-hover-bg)]']), true), false), "width:" + `${escape(progress(), true) * 100}%`, escape(createComponent(Tooltip, {
         get open() {
-          return memo(() => !!props.tooltip)() && (isHover() || isFocus() || isDragging());
+          return props.tooltip && (isHover() || isFocus() || isDragging());
         },
         get content() {
-          return memo(() => !!(typeof props.tooltip === 'object' && props.tooltip.formatter))() ? props.tooltip.formatter(value()) : value();
+          return typeof props.tooltip === 'object' && props.tooltip.formatter ? props.tooltip.formatter(value()) : value();
         },
         get children() {
-          var _el$5 = _tmpl$2$g();
-          _el$5.$$mousedown = e => {
-            const startX = e.clientX;
-            const startValue = value();
-            setIsDragging(true);
-            const handleWidth = handleRef.offsetWidth;
-            setupGlobalDrag(
-            // eslint-disable-next-line solid/reactivity
-            _e => {
-              const moveX = _e.clientX - startX;
-              setValue(startValue + moveX / (containerRef.offsetWidth - handleWidth) * gap());
-            },
-            // eslint-disable-next-line solid/reactivity
-            () => {
-              props.onChangeComplete?.(value());
-              setIsDragging(false);
-            });
-          };
-          _el$5.$$click = e => {
-            e.stopPropagation();
-          };
-          var _ref$2 = handleRef;
-          typeof _ref$2 === "function" ? use(_ref$2, _el$5) : handleRef = _el$5;
-          insert(_el$5, createComponent(Show, {
+          return ssr(_tmpl$2$g, ssrHydrationKey(), "left:" + `${escape(progress(), true) * 100}%`, escape(createComponent(Show, {
             get when() {
               return isNil(resolvedHandle());
             },
@@ -3782,48 +3085,14 @@ const Slider = _props => {
               return resolvedHandle();
             },
             get children() {
-              var _el$6 = _tmpl$$t();
-              effect(_p$ => {
-                var _v$ = cs('box-border w-full h-full bg-[--ant-color-bg-container-secondary] rounded-1/2 border-solid border-2px cursor-pointer', props.disabled ? 'border-[var(--ant-slider-handle-color-disabled)]' : ['border-[var(--ant-slider-handle-color)]', 'hover:border-[var(--ant-slider-handle-active-color)] hover:[outline:4px_solid_var(--ant-control-outline)]', 'focus:border-[var(--ant-slider-handle-active-color)] focus:[outline:4px_solid_var(--ant-control-outline)]']),
-                  _v$2 = props.disabled ? undefined : '0';
-                _v$ !== _p$.e && className(_el$6, _p$.e = _v$);
-                _v$2 !== _p$.t && setAttribute(_el$6, "tabindex", _p$.t = _v$2);
-                return _p$;
-              }, {
-                e: undefined,
-                t: undefined
-              });
-              return _el$6;
+              return ssr(_tmpl$$t, ssrHydrationKey() + ssrAttribute("class", escape(cs('box-border w-full h-full bg-[--ant-color-bg-container-secondary] rounded-1/2 border-solid border-2px cursor-pointer', props.disabled ? 'border-[var(--ant-slider-handle-color-disabled)]' : ['border-[var(--ant-slider-handle-color)]', 'hover:border-[var(--ant-slider-handle-active-color)] hover:[outline:4px_solid_var(--ant-control-outline)]', 'focus:border-[var(--ant-slider-handle-active-color)] focus:[outline:4px_solid_var(--ant-control-outline)]']), true), false) + ssrAttribute("tabindex", props.disabled ? escape(undefined, true) : '0', false));
             }
-          }));
-          effect(_$p => (_$p = `${progress() * 100}%`) != null ? _el$5.style.setProperty("left", _$p) : _el$5.style.removeProperty("left"));
-          return _el$5;
+          })));
         }
-      }));
-      effect(_p$ => {
-        var _v$3 = cs(props.disabled && 'pointer-events-none'),
-          _v$4 = cs('[background:var(--ant-slider-rail-bg)] h-[--ant-slider-rail-size] rounded-[calc(var(--ant-slider-rail-size)/2)]', !props.disabled && 'hover:[background:var(--ant-slider-rail-hover-bg)]'),
-          _v$5 = props.railBgStyle,
-          _v$6 = cs('absolute left-0 top-1/2 -translate-y-1/2 h-[--ant-slider-rail-size] rounded-[calc(var(--ant-slider-rail-size)/2)]', props.disabled ? 'bg-[var(--ant-slider-track-bg-disabled)]' : ['bg-[var(--ant-slider-track-bg)] hover:bg-[var(--ant-slider-track-hover-bg)]']),
-          _v$7 = `${progress() * 100}%`;
-        _v$3 !== _p$.e && className(_el$, _p$.e = _v$3);
-        _v$4 !== _p$.t && className(_el$2, _p$.t = _v$4);
-        _p$.a = style(_el$2, _v$5, _p$.a);
-        _v$6 !== _p$.o && className(_el$3, _p$.o = _v$6);
-        _v$7 !== _p$.i && ((_p$.i = _v$7) != null ? _el$3.style.setProperty("width", _v$7) : _el$3.style.removeProperty("width"));
-        return _p$;
-      }, {
-        e: undefined,
-        t: undefined,
-        a: undefined,
-        o: undefined,
-        i: undefined
-      });
-      return _el$;
+      })));
     }
   });
 };
-delegateEvents(["click", "mousedown"]);
 
 const commonStyle = {
   width: '1em',
@@ -3833,136 +3102,90 @@ const commonStyle = {
   'vertical-align': '-0.125em'
 };
 
-var _tmpl$$s = /*#__PURE__*/template(`<svg viewBox="0 0 1024 1024"xmlns=http://www.w3.org/2000/svg><path d="M856.2176 347.904l-90.624 90.624 53.504 53.504a52.3264 52.3264 0 1 1-73.984 73.984l-71.5776-71.6288-444.928 444.9792a25.6 25.6 0 0 1-13.4656 7.0656l-133.1712 24.576a25.6 25.6 0 0 1-29.7984-29.7984l24.576-133.1712a25.6 25.6 0 0 1 7.0656-13.4656l444.928-444.9792-71.68-71.6288a52.3264 52.3264 0 0 1 73.984-73.984l53.504 53.504 90.624-90.624a128 128 0 0 1 181.0432 181.0432z m-291.328 37.888l-439.296 439.3472-16.384 88.7808 88.832-16.384 439.296-439.296-72.448-72.448z">`);
+var _tmpl$$s = ["<svg", " viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\"", " style=\"", "\"><path d=\"M856.2176 347.904l-90.624 90.624 53.504 53.504a52.3264 52.3264 0 1 1-73.984 73.984l-71.5776-71.6288-444.928 444.9792a25.6 25.6 0 0 1-13.4656 7.0656l-133.1712 24.576a25.6 25.6 0 0 1-29.7984-29.7984l24.576-133.1712a25.6 25.6 0 0 1 7.0656-13.4656l444.928-444.9792-71.68-71.6288a52.3264 52.3264 0 0 1 73.984-73.984l53.504 53.504 90.624-90.624a128 128 0 0 1 181.0432 181.0432z m-291.328 37.888l-439.296 439.3472-16.384 88.7808 88.832-16.384 439.296-439.296-72.448-72.448z\"></path></svg>"];
 const ColorPickUpSvg = props => {
-  return (() => {
-    var _el$ = _tmpl$$s();
-    effect(_p$ => {
-      var _v$ = props.class,
-        _v$2 = {
-          ...commonStyle,
-          ...props.style
-        };
-      _v$ !== _p$.e && setAttribute(_el$, "class", _p$.e = _v$);
-      _p$.t = style(_el$, _v$2, _p$.t);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined
-    });
-    return _el$;
-  })();
+  return ssr(_tmpl$$s, ssrHydrationKey(), ssrAttribute("class", escape(props.class, true), false), ssrStyle({
+    ...commonStyle,
+    ...props.style
+  }));
 };
 
-var _tmpl$$r = /*#__PURE__*/template(`<div class="flex gap-[--ant-margin-sm] items-center"><div class="flex flex-col gap-[--ant-margin-sm] w-full"></div><div class="shrink-0 w-28px h-28px rounded-[--ant-border-radius-sm]"><div class="w-full h-full rounded-inherit">`),
-  _tmpl$2$f = /*#__PURE__*/template(`<span class="shrink-0 text-18px cursor-pointer">`),
-  _tmpl$3$c = /*#__PURE__*/template(`<div tabindex=0>`);
+var _tmpl$$r = ["<div", " class=\"flex gap-[--ant-margin-sm] items-center\"><div class=\"flex flex-col gap-[--ant-margin-sm] w-full\"><!--$-->", "<!--/--><!--$-->", "<!--/--></div><div class=\"shrink-0 w-28px h-28px rounded-[--ant-border-radius-sm]\" style=\"", "\"><div class=\"w-full h-full rounded-inherit\" style=\"", "\"></div></div><!--$-->", "<!--/--></div>"],
+  _tmpl$2$f = ["<span", " class=\"shrink-0 text-18px cursor-pointer\">", "</span>"],
+  _tmpl$3$d = ["<div", " style=\"", "\" tabindex=\"0\"></div>"];
 const ColorPickerSlider = () => {
   const context = useContext(ColorPickerContext);
   const color = createMemo(() => context?.color() ?? new Color());
-  return (() => {
-    var _el$ = _tmpl$$r(),
-      _el$2 = _el$.firstChild,
-      _el$3 = _el$2.nextSibling,
-      _el$4 = _el$3.firstChild;
-    insert(_el$2, createComponent(Slider, {
-      get value() {
-        return color().toHsv().h / 3.55;
-      },
-      onChange: v => {
-        const hsv = color().toHsv();
-        hsv.h = Math.round(v * 3.55);
-        context?.setColor(new Color(hsv));
-      },
-      onChangeComplete: () => {
-        context?.setColor(color(), true);
-      },
-      tooltip: false,
-      handle: () => getSliderHandle(color().toHueRgbString()),
-      style: {
-        '--ant-slider-rail-size': '8px',
-        '--ant-slider-handle-size': '10px',
-        '--ant-slider-rail-bg': 'linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)',
-        '--ant-slider-rail-hover-bg': 'var(--ant-slider-rail-bg)',
-        '--ant-slider-track-bg': 'transparent',
-        '--ant-slider-track-hover-bg': 'transparent'
-      },
-      railBgStyle: {
-        'box-shadow': 'inset 0 0 1px 0 var(--ant-color-text-quaternary)'
-      }
-    }), null);
-    insert(_el$2, createComponent(Show, {
-      get when() {
-        return !context?.disabledAlpha();
-      },
-      get children() {
-        return createComponent(Slider, {
-          get value() {
-            return color().a * 100;
-          },
-          onChange: v => {
-            context?.setColor(color().clone().setAlpha(v / 100));
-          },
-          onChangeComplete: () => {
-            context?.setColor(color(), true);
-          },
-          min: 0,
-          step: 1,
-          tooltip: false,
-          handle: () => getSliderHandle(color().toRgbString()),
-          get style() {
-            return {
-              '--ant-slider-rail-size': '8px',
-              '--ant-slider-handle-size': '10px',
-              '--ant-slider-rail-bg': `linear-gradient(90deg, ${color().clone().setAlpha(0).toRgbString()} 0%, ${color().toHexString()} 100%)`,
-              '--ant-slider-rail-hover-bg': 'var(--ant-slider-rail-bg)',
-              '--ant-slider-track-bg': 'transparent',
-              '--ant-slider-track-hover-bg': 'transparent',
-              'background-image': 'conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)',
-              'background-size': '8px 8px'
-            };
-          },
-          railBgStyle: {
-            'box-shadow': 'inset 0 0 1px 0 var(--ant-color-text-quaternary)'
-          }
-        });
-      }
-    }), null);
-    _el$3.style.setProperty("background-image", "conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)");
-    _el$3.style.setProperty("background-size", "50% 50%");
-    _el$3.style.setProperty("box-shadow", "inset 0 0 1px 0 var(--ant-color-text-quaternary)");
-    insert(_el$, (() => {
-      var _c$ = memo(() => !!window.EyeDropper);
-      return () => _c$() && (() => {
-        var _el$5 = _tmpl$2$f();
-        _el$5.$$click = () => {
-          if (!window.EyeDropper) return;
-          const eyeDropper = new window.EyeDropper();
-          eyeDropper.open().then(result => {
-            context?.setColor(new Color(result.sRGBHex), true);
-          }).catch(console.error);
-        };
-        insert(_el$5, createComponent(ColorPickUpSvg, {}));
-        return _el$5;
-      })();
-    })(), null);
-    effect(_$p => (_$p = color().toRgbString()) != null ? _el$4.style.setProperty("background-color", _$p) : _el$4.style.removeProperty("background-color"));
-    return _el$;
-  })();
+  return ssr(_tmpl$$r, ssrHydrationKey(), escape(createComponent(Slider, {
+    get value() {
+      return color().toHsv().h / 3.55;
+    },
+    onChange: v => {
+      const hsv = color().toHsv();
+      hsv.h = Math.round(v * 3.55);
+      context?.setColor(new Color(hsv));
+    },
+    onChangeComplete: () => {
+      context?.setColor(color(), true);
+    },
+    tooltip: false,
+    handle: () => getSliderHandle(color().toHueRgbString()),
+    style: {
+      '--ant-slider-rail-size': '8px',
+      '--ant-slider-handle-size': '10px',
+      '--ant-slider-rail-bg': 'linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)',
+      '--ant-slider-rail-hover-bg': 'var(--ant-slider-rail-bg)',
+      '--ant-slider-track-bg': 'transparent',
+      '--ant-slider-track-hover-bg': 'transparent'
+    },
+    railBgStyle: {
+      'box-shadow': 'inset 0 0 1px 0 var(--ant-color-text-quaternary)'
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return !context?.disabledAlpha();
+    },
+    get children() {
+      return createComponent(Slider, {
+        get value() {
+          return color().a * 100;
+        },
+        onChange: v => {
+          context?.setColor(color().clone().setAlpha(v / 100));
+        },
+        onChangeComplete: () => {
+          context?.setColor(color(), true);
+        },
+        min: 0,
+        step: 1,
+        tooltip: false,
+        handle: () => getSliderHandle(color().toRgbString()),
+        get style() {
+          return {
+            '--ant-slider-rail-size': '8px',
+            '--ant-slider-handle-size': '10px',
+            '--ant-slider-rail-bg': `linear-gradient(90deg, ${color().clone().setAlpha(0).toRgbString()} 0%, ${color().toHexString()} 100%)`,
+            '--ant-slider-rail-hover-bg': 'var(--ant-slider-rail-bg)',
+            '--ant-slider-track-bg': 'transparent',
+            '--ant-slider-track-hover-bg': 'transparent',
+            'background-image': 'conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)',
+            'background-size': '8px 8px'
+          };
+        },
+        railBgStyle: {
+          'box-shadow': 'inset 0 0 1px 0 var(--ant-color-text-quaternary)'
+        }
+      });
+    }
+  })), "background-image:" + "conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)" + (";background-size:" + "50% 50%") + (";box-shadow:" + "inset 0 0 1px 0 var(--ant-color-text-quaternary)"), "background-color:" + escape(color().toRgbString(), true), window.EyeDropper && ssr(_tmpl$2$f, ssrHydrationKey(), escape(createComponent(ColorPickUpSvg, {}))));
 };
 const getSliderHandle = bgColor => {
-  return (() => {
-    var _el$6 = _tmpl$3$c();
-    bgColor != null ? _el$6.style.setProperty("background", bgColor) : _el$6.style.removeProperty("background");
-    effect(() => className(_el$6, cs('box-border w-[--ant-slider-handle-size] h-[--ant-slider-handle-size] rounded-1/2 border-solid border-2px border-[--ant-color-bg-container-secondary] cursor-pointer', '[box-shadow:inset_0_0_1px_0_var(--ant-color-text-quaternary),0_0_0_1px_var(--ant-color-fill-secondary)]', 'focus:[box-shadow:inset_0_0_1px_0_var(--ant-color-text-quaternary),0_0_0_1px_var(--ant-color-primary-active)]')));
-    return _el$6;
-  })();
+  return ssr(_tmpl$3$d, ssrHydrationKey() + ssrAttribute("class", escape(cs('box-border w-[--ant-slider-handle-size] h-[--ant-slider-handle-size] rounded-1/2 border-solid border-2px border-[--ant-color-bg-container-secondary] cursor-pointer', '[box-shadow:inset_0_0_1px_0_var(--ant-color-text-quaternary),0_0_0_1px_var(--ant-color-fill-secondary)]', 'focus:[box-shadow:inset_0_0_1px_0_var(--ant-color-text-quaternary),0_0_0_1px_var(--ant-color-primary-active)]'), true), false), "background:" + escape(bgColor, true));
 };
-delegateEvents(["click"]);
 
-var _tmpl$$q = /*#__PURE__*/template(`<div class="flex grow-1 gap-[var(--ant-margin-xxs)]">`),
-  _tmpl$2$e = /*#__PURE__*/template(`<div class=flex>`),
-  _tmpl$3$b = /*#__PURE__*/template(`<span class=text-[--ant-color-text-placeholder]>#`);
+var _tmpl$$q = ["<div", " class=\"flex grow-1 gap-[var(--ant-margin-xxs)]\"><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"],
+  _tmpl$2$e = ["<div", " class=\"flex\"><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"],
+  _tmpl$3$c = ["<span", " class=\"text-[--ant-color-text-placeholder]\">#</span>"];
 const ColorPickerInput = () => {
   const context = useContext(ColorPickerContext);
   const color = createMemo(() => context?.color() ?? new Color());
@@ -3971,226 +3194,212 @@ const ColorPickerInput = () => {
   createRenderEffect(() => {
     setHexInputValue(color().toHex());
   });
-  return (() => {
-    var _el$ = _tmpl$2$e();
-    insert(_el$, createComponent(Select, {
-      get value() {
-        return type();
-      },
-      onChange: setType,
-      options: [{
-        label: 'HEX',
-        value: 'HEX'
-      }, {
-        label: 'HSV',
-        value: 'HSV'
-      }, {
-        label: 'RGB',
-        value: 'RGB'
-      }],
-      size: "small",
-      variant: "borderless",
-      style: {
-        'margin-right': 'var(--ant-margin-xs)',
-        '--ant-select-font-size': '12px',
-        '--ant-select-input-padding': '0',
-        '--ant-select-input-addon-after-padding': '0 0 0 var(--ant-padding-xxs)',
-        '--ant-select-popup-match-width': '60px'
-      }
-    }), null);
-    insert(_el$, createComponent(Switch$1, {
-      get children() {
-        return [createComponent(Match, {
-          get when() {
-            return type() === 'HEX';
-          },
-          get children() {
-            return createComponent(Input, {
-              size: "small",
-              get value() {
-                return hexInputValue();
-              },
-              onChange: e => {
-                const value = e.target.value.replace(/[^a-zA-Z0-9]/g, '');
-                if (value.length > 6) return;
-                setHexInputValue(value);
-                if (value.length !== 6) return;
-                const c = new Color(value);
-                if (!c.isValid) return;
-                context?.setColor(new Color(value).setAlpha(color().a));
-              },
-              onBlur: () => {
-                setHexInputValue(color().toHex());
-                context?.setColor(color(), true);
-              },
-              get prefix() {
-                return _tmpl$3$b();
-              },
-              style: {
-                '--ant-input-font-size': '12px'
-              }
-            });
-          }
-        }), createComponent(Match, {
-          get when() {
-            return type() === 'HSV';
-          },
-          get children() {
-            var _el$2 = _tmpl$$q();
-            insert(_el$2, createComponent(InputNumber, {
-              size: "small",
-              get value() {
-                return Math.round(color().toHsv().h);
-              },
-              onChange: value => {
-                const hsv = color().toHsv();
-                hsv.h = value ?? 0;
-                context?.setColor(new Color(hsv));
-              },
-              onBlur: () => {
-                context?.setColor(color(), true);
-              },
-              min: 0,
-              max: 359,
-              precision: 0,
-              style: InputNumberStyle
-            }), null);
-            insert(_el$2, createComponent(InputNumber, {
-              size: "small",
-              get value() {
-                return Math.round(color().toHsv().s * 100);
-              },
-              onChange: value => {
-                const hsv = color().toHsv();
-                hsv.s = (value ?? 0) / 100;
-                context?.setColor(new Color(hsv));
-              },
-              onBlur: () => {
-                context?.setColor(color(), true);
-              },
-              min: 0,
-              max: 100,
-              precision: 0,
-              formatter: value => `${value || 0}%`,
-              style: InputNumberStyle
-            }), null);
-            insert(_el$2, createComponent(InputNumber, {
-              size: "small",
-              get value() {
-                return Math.round(color().toHsv().v * 100);
-              },
-              onChange: value => {
-                const hsv = color().toHsv();
-                hsv.v = (value ?? 0) / 100;
-                context?.setColor(new Color(hsv));
-              },
-              onBlur: () => {
-                context?.setColor(color(), true);
-              },
-              min: 0,
-              max: 100,
-              precision: 0,
-              formatter: value => `${value || 0}%`,
-              style: InputNumberStyle
-            }), null);
-            return _el$2;
-          }
-        }), createComponent(Match, {
-          get when() {
-            return type() === 'RGB';
-          },
-          get children() {
-            var _el$3 = _tmpl$$q();
-            insert(_el$3, createComponent(InputNumber, {
-              size: "small",
-              get value() {
-                return Math.round(color().r);
-              },
-              onChange: value => {
-                const rgb = color().toRgb();
-                rgb.r = value ?? 0;
-                context?.setColor(new Color(rgb));
-              },
-              onBlur: () => {
-                context?.setColor(color(), true);
-              },
-              min: 0,
-              max: 255,
-              precision: 0,
-              style: InputNumberStyle
-            }), null);
-            insert(_el$3, createComponent(InputNumber, {
-              size: "small",
-              get value() {
-                return Math.round(color().g);
-              },
-              onChange: value => {
-                const rgb = color().toRgb();
-                rgb.g = value ?? 0;
-                context?.setColor(new Color(rgb));
-              },
-              onBlur: () => {
-                context?.setColor(color(), true);
-              },
-              min: 0,
-              max: 255,
-              precision: 0,
-              style: InputNumberStyle
-            }), null);
-            insert(_el$3, createComponent(InputNumber, {
-              size: "small",
-              get value() {
-                return Math.round(color().b);
-              },
-              onChange: value => {
-                const rgb = color().toRgb();
-                rgb.b = value ?? 0;
-                context?.setColor(new Color(rgb));
-              },
-              onBlur: () => {
-                context?.setColor(color(), true);
-              },
-              min: 0,
-              max: 255,
-              precision: 0,
-              style: InputNumberStyle
-            }), null);
-            return _el$3;
-          }
-        })];
-      }
-    }), null);
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return !context?.disabledAlpha();
-      },
-      get children() {
-        return createComponent(InputNumber, {
-          get value() {
-            return Math.round(color().a * 100);
-          },
-          onChange: value => {
-            context?.setColor(color().clone().setAlpha((value ?? 0) / 100));
-          },
-          onBlur: () => {
-            context?.setColor(color(), true);
-          },
-          size: "small",
-          min: 0,
-          max: 100,
-          precision: 0,
-          formatter: value => `${value || 0}%`,
-          get style() {
-            return {
-              ...InputNumberStyle,
-              'margin-left': 'var(--ant-margin-xxs)'
-            };
-          }
-        });
-      }
-    }), null);
-    return _el$;
-  })();
+  return ssr(_tmpl$2$e, ssrHydrationKey(), escape(createComponent(Select, {
+    get value() {
+      return type();
+    },
+    onChange: setType,
+    options: [{
+      label: 'HEX',
+      value: 'HEX'
+    }, {
+      label: 'HSV',
+      value: 'HSV'
+    }, {
+      label: 'RGB',
+      value: 'RGB'
+    }],
+    size: "small",
+    variant: "borderless",
+    style: {
+      'margin-right': 'var(--ant-margin-xs)',
+      '--ant-select-font-size': '12px',
+      '--ant-select-input-padding': '0',
+      '--ant-select-input-addon-after-padding': '0 0 0 var(--ant-padding-xxs)',
+      '--ant-select-popup-match-width': '60px'
+    }
+  })), escape(createComponent(Switch$1, {
+    get children() {
+      return [createComponent(Match, {
+        get when() {
+          return type() === 'HEX';
+        },
+        get children() {
+          return createComponent(Input, {
+            size: "small",
+            get value() {
+              return hexInputValue();
+            },
+            onChange: e => {
+              const value = e.target.value.replace(/[^a-zA-Z0-9]/g, '');
+              if (value.length > 6) return;
+              setHexInputValue(value);
+              if (value.length !== 6) return;
+              const c = new Color(value);
+              if (!c.isValid) return;
+              context?.setColor(new Color(value).setAlpha(color().a));
+            },
+            onBlur: () => {
+              setHexInputValue(color().toHex());
+              context?.setColor(color(), true);
+            },
+            get prefix() {
+              return ssr(_tmpl$3$c, ssrHydrationKey());
+            },
+            style: {
+              '--ant-input-font-size': '12px'
+            }
+          });
+        }
+      }), createComponent(Match, {
+        get when() {
+          return type() === 'HSV';
+        },
+        get children() {
+          return ssr(_tmpl$$q, ssrHydrationKey(), escape(createComponent(InputNumber, {
+            size: "small",
+            get value() {
+              return Math.round(color().toHsv().h);
+            },
+            onChange: value => {
+              const hsv = color().toHsv();
+              hsv.h = value ?? 0;
+              context?.setColor(new Color(hsv));
+            },
+            onBlur: () => {
+              context?.setColor(color(), true);
+            },
+            min: 0,
+            max: 359,
+            precision: 0,
+            style: InputNumberStyle
+          })), escape(createComponent(InputNumber, {
+            size: "small",
+            get value() {
+              return Math.round(color().toHsv().s * 100);
+            },
+            onChange: value => {
+              const hsv = color().toHsv();
+              hsv.s = (value ?? 0) / 100;
+              context?.setColor(new Color(hsv));
+            },
+            onBlur: () => {
+              context?.setColor(color(), true);
+            },
+            min: 0,
+            max: 100,
+            precision: 0,
+            formatter: value => `${value || 0}%`,
+            style: InputNumberStyle
+          })), escape(createComponent(InputNumber, {
+            size: "small",
+            get value() {
+              return Math.round(color().toHsv().v * 100);
+            },
+            onChange: value => {
+              const hsv = color().toHsv();
+              hsv.v = (value ?? 0) / 100;
+              context?.setColor(new Color(hsv));
+            },
+            onBlur: () => {
+              context?.setColor(color(), true);
+            },
+            min: 0,
+            max: 100,
+            precision: 0,
+            formatter: value => `${value || 0}%`,
+            style: InputNumberStyle
+          })));
+        }
+      }), createComponent(Match, {
+        get when() {
+          return type() === 'RGB';
+        },
+        get children() {
+          return ssr(_tmpl$$q, ssrHydrationKey(), escape(createComponent(InputNumber, {
+            size: "small",
+            get value() {
+              return Math.round(color().r);
+            },
+            onChange: value => {
+              const rgb = color().toRgb();
+              rgb.r = value ?? 0;
+              context?.setColor(new Color(rgb));
+            },
+            onBlur: () => {
+              context?.setColor(color(), true);
+            },
+            min: 0,
+            max: 255,
+            precision: 0,
+            style: InputNumberStyle
+          })), escape(createComponent(InputNumber, {
+            size: "small",
+            get value() {
+              return Math.round(color().g);
+            },
+            onChange: value => {
+              const rgb = color().toRgb();
+              rgb.g = value ?? 0;
+              context?.setColor(new Color(rgb));
+            },
+            onBlur: () => {
+              context?.setColor(color(), true);
+            },
+            min: 0,
+            max: 255,
+            precision: 0,
+            style: InputNumberStyle
+          })), escape(createComponent(InputNumber, {
+            size: "small",
+            get value() {
+              return Math.round(color().b);
+            },
+            onChange: value => {
+              const rgb = color().toRgb();
+              rgb.b = value ?? 0;
+              context?.setColor(new Color(rgb));
+            },
+            onBlur: () => {
+              context?.setColor(color(), true);
+            },
+            min: 0,
+            max: 255,
+            precision: 0,
+            style: InputNumberStyle
+          })));
+        }
+      })];
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return !context?.disabledAlpha();
+    },
+    get children() {
+      return createComponent(InputNumber, {
+        get value() {
+          return Math.round(color().a * 100);
+        },
+        onChange: value => {
+          context?.setColor(color().clone().setAlpha((value ?? 0) / 100));
+        },
+        onBlur: () => {
+          context?.setColor(color(), true);
+        },
+        size: "small",
+        min: 0,
+        max: 100,
+        precision: 0,
+        formatter: value => `${value || 0}%`,
+        get style() {
+          return {
+            ...InputNumberStyle,
+            'margin-left': 'var(--ant-margin-xxs)'
+          };
+        }
+      });
+    }
+  })));
 };
 const InputNumberStyle = {
   width: '43px',
@@ -4201,11 +3410,11 @@ const InputNumberStyle = {
   '--ant-input-font-size': '12px'
 };
 
-var _tmpl$$p = /*#__PURE__*/template(`<div class="flex justify-end mb-[--ant-margin-xs]"><div class="w-24px h-24px rounded-[--ant-border-radius-sm] relative overflow-hidden border-1px border-solid border-[--ant-color-split] cursor-pointer hover:border-[--ant-color-border]"><div class="absolute top-1/2 left-1/2 -translate-1/2 w-200% h-2px bg-[--ant-color-error] rotate-135deg">`),
-  _tmpl$2$d = /*#__PURE__*/template(`<div class="w-234px flex flex-col gap-[--ant-margin-sm]">`),
-  _tmpl$3$a = /*#__PURE__*/template(`<div><div class="w-full h-full">`),
-  _tmpl$4$8 = /*#__PURE__*/template(`<div>`),
-  _tmpl$5$4 = /*#__PURE__*/template(`<div><div class="absolute top-1/2 left-1/2 -translate-1/2 w-200% h-2px bg-[--ant-color-error] rotate-135deg">`);
+var _tmpl$$p = ["<div", " class=\"flex justify-end mb-[--ant-margin-xs]\"><div class=\"w-24px h-24px rounded-[--ant-border-radius-sm] relative overflow-hidden border-1px border-solid border-[--ant-color-split] cursor-pointer hover:border-[--ant-color-border]\"><div class=\"absolute top-1/2 left-1/2 -translate-1/2 w-200% h-2px bg-[--ant-color-error] rotate-135deg\"></div></div></div>"],
+  _tmpl$2$d = ["<div", " class=\"w-234px flex flex-col gap-[--ant-margin-sm]\"><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"],
+  _tmpl$3$b = ["<div", " style=\"", "\"><div class=\"w-full h-full\" style=\"", "\"></div></div>"],
+  _tmpl$4$8 = ["<div", " style=\"", "\">", "</div>"],
+  _tmpl$5$3 = ["<div", "><div class=\"absolute top-1/2 left-1/2 -translate-1/2 w-200% h-2px bg-[--ant-color-error] rotate-135deg\"></div></div>"];
 // TODO 超出范围
 const ColorPicker = props => {
   const isControlled = () => Object.keys(props).includes('value');
@@ -4237,21 +3446,9 @@ const ColorPicker = props => {
           return props.allowClear;
         },
         get children() {
-          var _el$ = _tmpl$$p(),
-            _el$2 = _el$.firstChild;
-          _el$2.$$click = () => {
-            setColor(new Color());
-            close();
-          };
-          return _el$;
+          return ssr(_tmpl$$p, ssrHydrationKey());
         }
-      }), (() => {
-        var _el$3 = _tmpl$2$d();
-        insert(_el$3, createComponent(ColorPickerSelect, {}), null);
-        insert(_el$3, createComponent(ColorPickerSlider, {}), null);
-        insert(_el$3, createComponent(ColorPickerInput, {}), null);
-        return _el$3;
-      })()];
+      }), ssr(_tmpl$2$d, ssrHydrationKey(), escape(createComponent(ColorPickerSelect, {})), escape(createComponent(ColorPickerSlider, {})), escape(createComponent(ColorPickerInput, {})))];
     }
   });
   return createComponent(Popover, {
@@ -4272,65 +3469,31 @@ const ColorPicker = props => {
           return cs('inline-block', props.disabled && 'cursor-not-allowed');
         },
         get children() {
-          var _el$4 = _tmpl$4$8();
-          _el$4.style.setProperty("--border-width", "1px");
-          insert(_el$4, createComponent(Show, {
+          return ssr(_tmpl$4$8, ssrHydrationKey() + ssrAttribute("class", escape(cs('p-[calc(var(--ant-padding-xxs)-var(--border-width))] border-width-[--border-width] border-[--ant-color-border] border-solid rounded-[--ant-border-radius] cursor-pointer hover:border-[--ant-color-primary-hover]', open() && '!border-[--ant-color-primary-active]', props.disabled ? 'pointer-events-none bg-[--ant-color-bg-container-disabled]' : 'bg-[--ant-color-bg-elevated]'), true), false), "--border-width:" + "1px" + (";--inner-size:" + escape({
+            small: '16px',
+            middle: '24px',
+            large: '32px'
+          }[size()], true)), escape(createComponent(Show, {
             get when() {
               return color().isValid;
             },
             get fallback() {
-              return (() => {
-                var _el$7 = _tmpl$5$4();
-                effect(() => className(_el$7, cs('w-[--inner-size] h-[--inner-size] rounded-[--ant-border-radius-sm] relative overflow-hidden border-1px border-solid border-[--ant-color-split]')));
-                return _el$7;
-              })();
+              return ssr(_tmpl$5$3, ssrHydrationKey() + ssrAttribute("class", escape(cs('w-[--inner-size] h-[--inner-size] rounded-[--ant-border-radius-sm] relative overflow-hidden border-1px border-solid border-[--ant-color-split]'), true), false));
             },
             get children() {
-              var _el$5 = _tmpl$3$a(),
-                _el$6 = _el$5.firstChild;
-              _el$5.style.setProperty("box-shadow", "inset 0 0 1px 0 var(--ant-color-text-quaternary)");
-              _el$5.style.setProperty("background-image", "conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)");
-              _el$5.style.setProperty("background-size", "50% 50%");
-              _el$6.style.setProperty("box-shadow", "inset 0 0 0 var(--ant-line-width) var(--ant-color-fill-secondary)");
-              effect(_p$ => {
-                var _v$ = cs('w-[--inner-size] h-[--inner-size] rounded-[--ant-border-radius-sm] overflow-hidden'),
-                  _v$2 = color().toRgbString();
-                _v$ !== _p$.e && className(_el$5, _p$.e = _v$);
-                _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$6.style.setProperty("background-color", _v$2) : _el$6.style.removeProperty("background-color"));
-                return _p$;
-              }, {
-                e: undefined,
-                t: undefined
-              });
-              return _el$5;
+              return ssr(_tmpl$3$b, ssrHydrationKey() + ssrAttribute("class", escape(cs('w-[--inner-size] h-[--inner-size] rounded-[--ant-border-radius-sm] overflow-hidden'), true), false), "box-shadow:" + "inset 0 0 1px 0 var(--ant-color-text-quaternary)" + (";background-image:" + "conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)") + (";background-size:" + "50% 50%"), "box-shadow:" + "inset 0 0 0 var(--ant-line-width) var(--ant-color-fill-secondary)" + (";background-color:" + escape(color().toRgbString(), true)));
             }
-          }));
-          effect(_p$ => {
-            var _v$3 = cs('p-[calc(var(--ant-padding-xxs)-var(--border-width))] border-width-[--border-width] border-[--ant-color-border] border-solid rounded-[--ant-border-radius] cursor-pointer hover:border-[--ant-color-primary-hover]', open() && '!border-[--ant-color-primary-active]', props.disabled ? 'pointer-events-none bg-[--ant-color-bg-container-disabled]' : 'bg-[--ant-color-bg-elevated]'),
-              _v$4 = {
-                small: '16px',
-                middle: '24px',
-                large: '32px'
-              }[size()];
-            _v$3 !== _p$.e && className(_el$4, _p$.e = _v$3);
-            _v$4 !== _p$.t && ((_p$.t = _v$4) != null ? _el$4.style.setProperty("--inner-size", _v$4) : _el$4.style.removeProperty("--inner-size"));
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined
-          });
-          return _el$4;
+          })));
         }
       });
     }
   });
 };
-delegateEvents(["click"]);
 
-var _tmpl$$o = /*#__PURE__*/template(`<div class=mb-24px><span>`),
-  _tmpl$2$c = /*#__PURE__*/template(`<div class="my-8px text-[--ant-color-text-heading] text-24px">`),
-  _tmpl$3$9 = /*#__PURE__*/template(`<div class="text-[--ant-color-text-description] text-14px">`),
-  _tmpl$4$7 = /*#__PURE__*/template(`<div class=mt-24px>`);
+var _tmpl$$o = ["<div", " class=\"mb-24px\"><span", "></span></div>"],
+  _tmpl$2$c = ["<div", " class=\"my-8px text-[--ant-color-text-heading] text-24px\">", "</div>"],
+  _tmpl$3$a = ["<div", " class=\"text-[--ant-color-text-description] text-14px\">", "</div>"],
+  _tmpl$4$7 = ["<div", " class=\"mt-24px\">", "</div>"];
 const statusIconMap = {
   success: '!text-[--ant-color-success] i-ant-design:check-circle-filled',
   info: '!text-[--ant-color-primary] i-ant-design:exclamation-circle-filled',
@@ -4344,36 +3507,15 @@ const Result = _props => {
   return createComponent(Element$1, {
     "class": "text-center px-32px py-48px [font-size:var(--ant-font-size)] text-[--ant-color-text] leading-[--ant-line-height]",
     get children() {
-      return [(() => {
-        var _el$ = _tmpl$$o(),
-          _el$2 = _el$.firstChild;
-        effect(() => className(_el$2, cs(statusIconMap[props.status], 'text-72px')));
-        return _el$;
-      })(), (() => {
-        var _el$3 = _tmpl$2$c();
-        insert(_el$3, () => props.title);
-        return _el$3;
-      })(), (() => {
-        var _el$4 = _tmpl$3$9();
-        insert(_el$4, () => props.subTitle);
-        return _el$4;
-      })(), (() => {
-        var _el$5 = _tmpl$4$7();
-        insert(_el$5, () => props.extra);
-        return _el$5;
-      })(), (() => {
-        var _el$6 = _tmpl$4$7();
-        insert(_el$6, () => props.children);
-        return _el$6;
-      })()];
+      return [ssr(_tmpl$$o, ssrHydrationKey(), ssrAttribute("class", escape(cs(statusIconMap[props.status], 'text-72px'), true), false)), ssr(_tmpl$2$c, ssrHydrationKey(), escape(props.title)), ssr(_tmpl$3$a, ssrHydrationKey(), escape(props.subTitle)), ssr(_tmpl$4$7, ssrHydrationKey(), escape(props.extra)), ssr(_tmpl$4$7, ssrHydrationKey(), escape(props.children))];
     }
   });
 };
 
-var _tmpl$$n = /*#__PURE__*/template(`<svg viewBox="0 0 100 100"role=presentation><circle cx=50 cy=50 stroke-linecap=round></circle><circle cx=50 cy=50 stroke-linecap=round opacity=1>`),
-  _tmpl$2$b = /*#__PURE__*/template(`<span class="i-ant-design:check-outlined text-[var(--ant-color-success)] text-1.1667em">`),
-  _tmpl$3$8 = /*#__PURE__*/template(`<span class="i-ant-design:close-outlined text-[var(--ant-color-error)] text-1.1667em">`),
-  _tmpl$4$6 = /*#__PURE__*/template(`<span class="shrink-0 text-center text-1em absolute top-1/2 left-1/2 -translate-1/2">`);
+var _tmpl$$n = ["<svg", " viewBox=\"0 0 100 100\" role=\"presentation\"><circle", " cx=\"50\" cy=\"50\" stroke-linecap=\"round\"", " style=\"", "\"></circle><circle", " cx=\"50\" cy=\"50\" stroke-linecap=\"round\"", " opacity=\"1\" style=\"", "\"></circle></svg>"],
+  _tmpl$2$b = ["<span", " class=\"i-ant-design:check-outlined text-[var(--ant-color-success)] text-1.1667em\"></span>"],
+  _tmpl$3$9 = ["<span", " class=\"i-ant-design:close-outlined text-[var(--ant-color-error)] text-1.1667em\"></span>"],
+  _tmpl$4$6 = ["<span", " class=\"shrink-0 text-center text-1em absolute top-1/2 left-1/2 -translate-1/2\">", "</span>"];
 const Circle = _props => {
   let ref;
   const props = mergeProps({
@@ -4390,10 +3532,6 @@ const Circle = _props => {
   const perimeter = createMemo(() => radius() * 2 * Math.PI);
   const size = useSize(() => ref);
   return createComponent(Element$1, {
-    ref(r$) {
-      var _ref$ = ref;
-      typeof _ref$ === "function" ? _ref$(r$) : ref = r$;
-    },
     "class": "flex items-center relative",
     get style() {
       return {
@@ -4403,60 +3541,16 @@ const Circle = _props => {
       };
     },
     get children() {
-      return [(() => {
-        var _el$ = _tmpl$$n(),
-          _el$2 = _el$.firstChild,
-          _el$3 = _el$2.nextSibling;
-        _el$2.style.setProperty("stroke", "var(--ant-progress-remaining-color)");
-        _el$2.style.setProperty("stroke-dashoffset", "0");
-        _el$2.style.setProperty("transform", "rotate(-90deg)");
-        _el$2.style.setProperty("transform-origin", "50px 50px");
-        _el$2.style.setProperty("transition", "stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s, stroke-width 0.06s ease 0.3s, opacity 0.3s ease 0s");
-        _el$2.style.setProperty("fill-opacity", "0");
-        _el$3.style.setProperty("transform", "rotate(-90deg)");
-        _el$3.style.setProperty("transform-origin", "50px 50px");
-        _el$3.style.setProperty("transition", "stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s, stroke-width 0.06s ease 0.3s, opacity ease 0s");
-        _el$3.style.setProperty("fill-opacity", "0");
-        effect(_p$ => {
-          var _v$ = radius(),
-            _v$2 = props.strokeWidth,
-            _v$3 = `${perimeter()}px, ${perimeter()}px`,
-            _v$4 = radius(),
-            _v$5 = props.strokeWidth,
-            _v$6 = {
-              normal: 'var(--ant-color-primary)',
-              success: 'var(--ant-color-success)',
-              error: 'var(--ant-color-error)'
-            }[status()],
-            _v$7 = `${perimeter()}px, ${perimeter()}px`,
-            _v$8 = `${perimeter() * (100 - props.percent) / 100}px`;
-          _v$ !== _p$.e && setAttribute(_el$2, "r", _p$.e = _v$);
-          _v$2 !== _p$.t && setAttribute(_el$2, "stroke-width", _p$.t = _v$2);
-          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$2.style.setProperty("stroke-dasharray", _v$3) : _el$2.style.removeProperty("stroke-dasharray"));
-          _v$4 !== _p$.o && setAttribute(_el$3, "r", _p$.o = _v$4);
-          _v$5 !== _p$.i && setAttribute(_el$3, "stroke-width", _p$.i = _v$5);
-          _v$6 !== _p$.n && ((_p$.n = _v$6) != null ? _el$3.style.setProperty("stroke", _v$6) : _el$3.style.removeProperty("stroke"));
-          _v$7 !== _p$.s && ((_p$.s = _v$7) != null ? _el$3.style.setProperty("stroke-dasharray", _v$7) : _el$3.style.removeProperty("stroke-dasharray"));
-          _v$8 !== _p$.h && ((_p$.h = _v$8) != null ? _el$3.style.setProperty("stroke-dashoffset", _v$8) : _el$3.style.removeProperty("stroke-dashoffset"));
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined,
-          a: undefined,
-          o: undefined,
-          i: undefined,
-          n: undefined,
-          s: undefined,
-          h: undefined
-        });
-        return _el$;
-      })(), createComponent(Show, {
+      return [ssr(_tmpl$$n, ssrHydrationKey(), ssrAttribute("r", escape(radius(), true), false), ssrAttribute("stroke-width", escape(props.strokeWidth, true), false), "stroke:" + "var(--ant-progress-remaining-color)" + (";stroke-dasharray:" + `${escape(perimeter(), true)}px, ${escape(perimeter(), true)}px`) + (";stroke-dashoffset:" + "0") + (";transform:" + "rotate(-90deg)") + (";transform-origin:" + "50px 50px") + (";transition:" + "stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s, stroke-width 0.06s ease 0.3s, opacity 0.3s ease 0s") + (";fill-opacity:" + "0"), ssrAttribute("r", escape(radius(), true), false), ssrAttribute("stroke-width", escape(props.strokeWidth, true), false), "stroke:" + escape({
+        normal: 'var(--ant-color-primary)',
+        success: 'var(--ant-color-success)',
+        error: 'var(--ant-color-error)'
+      }[status()], true) + (";stroke-dasharray:" + `${escape(perimeter(), true)}px, ${escape(perimeter(), true)}px`) + (";stroke-dashoffset:" + `${escape(perimeter(), true) * (100 - escape(props.percent, true)) / 100}px`) + (";transform:" + "rotate(-90deg)") + (";transform-origin:" + "50px 50px") + (";transition:" + "stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s, stroke-width 0.06s ease 0.3s, opacity ease 0s") + (";fill-opacity:" + "0")), createComponent(Show, {
         get when() {
           return props.showInfo;
         },
         get children() {
-          var _el$4 = _tmpl$4$6();
-          insert(_el$4, createComponent(Switch$1, {
+          return ssr(_tmpl$4$6, ssrHydrationKey(), escape(createComponent(Switch$1, {
             get fallback() {
               return `${props.percent}%`;
             },
@@ -4466,29 +3560,28 @@ const Circle = _props => {
                   return status() === 'success';
                 },
                 get children() {
-                  return _tmpl$2$b();
+                  return ssr(_tmpl$2$b, ssrHydrationKey());
                 }
               }), createComponent(Match, {
                 get when() {
                   return status() === 'error';
                 },
                 get children() {
-                  return _tmpl$3$8();
+                  return ssr(_tmpl$3$9, ssrHydrationKey());
                 }
               })];
             }
-          }));
-          return _el$4;
+          })));
         }
       })];
     }
   });
 };
 
-var _tmpl$$m = /*#__PURE__*/template(`<div>`),
-  _tmpl$2$a = /*#__PURE__*/template(`<span class="i-ant-design:check-circle-filled text-[var(--ant-color-success)]">`),
-  _tmpl$3$7 = /*#__PURE__*/template(`<span class="i-ant-design:close-circle-filled text-[var(--ant-color-error)]">`),
-  _tmpl$4$5 = /*#__PURE__*/template(`<span class="shrink-0 ml-8px text-center">`);
+var _tmpl$$m = ["<div", " style=\"", "\"></div>"],
+  _tmpl$2$a = ["<span", " class=\"i-ant-design:check-circle-filled text-[var(--ant-color-success)]\"></span>"],
+  _tmpl$3$8 = ["<span", " class=\"i-ant-design:close-circle-filled text-[var(--ant-color-error)]\"></span>"],
+  _tmpl$4$5 = ["<span", " class=\"shrink-0 ml-8px text-center\">", "</span>"];
 const Progress = _props => {
   const props = mergeProps({
     percent: 0,
@@ -4502,39 +3595,16 @@ const Progress = _props => {
   return createComponent(Element$1, {
     "class": "flex items-center",
     get children() {
-      return [(() => {
-        var _el$ = _tmpl$$m();
-        effect(_p$ => {
-          var _v$ = cs('w-full bg-[var(--ant-progress-remaining-color)]', 'before:content-empty before:block before:bg-[var(--color)] before:w-[var(--percent)] before:h-full before:rounded-inherit'),
-            _v$2 = `${props.height}px`,
-            _v$3 = `${props.height / 2}px`,
-            _v$4 = `${props.percent}%`,
-            _v$5 = {
-              normal: 'var(--ant-color-primary)',
-              success: 'var(--ant-color-success)',
-              error: 'var(--ant-color-error)'
-            }[status()];
-          _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-          _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("height", _v$2) : _el$.style.removeProperty("height"));
-          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$.style.setProperty("border-radius", _v$3) : _el$.style.removeProperty("border-radius"));
-          _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$.style.setProperty("--percent", _v$4) : _el$.style.removeProperty("--percent"));
-          _v$5 !== _p$.i && ((_p$.i = _v$5) != null ? _el$.style.setProperty("--color", _v$5) : _el$.style.removeProperty("--color"));
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined,
-          a: undefined,
-          o: undefined,
-          i: undefined
-        });
-        return _el$;
-      })(), createComponent(Show, {
+      return [ssr(_tmpl$$m, ssrHydrationKey() + ssrAttribute("class", escape(cs('w-full bg-[var(--ant-progress-remaining-color)]', 'before:content-empty before:block before:bg-[var(--color)] before:w-[var(--percent)] before:h-full before:rounded-inherit'), true), false), "height:" + `${escape(props.height, true)}px` + (";border-radius:" + `${escape(props.height, true) / 2}px`) + (";--percent:" + `${escape(props.percent, true)}%`) + (";--color:" + escape({
+        normal: 'var(--ant-color-primary)',
+        success: 'var(--ant-color-success)',
+        error: 'var(--ant-color-error)'
+      }[status()], true))), createComponent(Show, {
         get when() {
           return props.showInfo;
         },
         get children() {
-          var _el$2 = _tmpl$4$5();
-          insert(_el$2, createComponent(Switch$1, {
+          return ssr(_tmpl$4$5, ssrHydrationKey(), escape(createComponent(Switch$1, {
             get fallback() {
               return `${props.percent}%`;
             },
@@ -4544,19 +3614,18 @@ const Progress = _props => {
                   return status() === 'success';
                 },
                 get children() {
-                  return _tmpl$2$a();
+                  return ssr(_tmpl$2$a, ssrHydrationKey());
                 }
               }), createComponent(Match, {
                 get when() {
                   return status() === 'error';
                 },
                 get children() {
-                  return _tmpl$3$7();
+                  return ssr(_tmpl$3$8, ssrHydrationKey());
                 }
               })];
             }
-          }));
-          return _el$2;
+          })));
         }
       })];
     }
@@ -4564,7 +3633,7 @@ const Progress = _props => {
 };
 Progress.Circle = Circle;
 
-var _tmpl$$l = /*#__PURE__*/template(`<div><div>`);
+var _tmpl$$l = ["<div", "><div", ">", "</div></div>"];
 const unWarpValue = value => typeof value === 'object' ? value.value : value;
 const Segmented = props => {
   const [value, setValue] = createControllableValue(props, {
@@ -4592,44 +3661,26 @@ const Segmented = props => {
         get each() {
           return props.options;
         },
-        children: item => (() => {
-          var _el$ = _tmpl$$l(),
-            _el$2 = _el$.firstChild;
-          _el$2.$$click = e => {
-            setValue(unWarpValue(item));
-            typeof item === 'object' && item.onClick?.(e);
-          };
-          insert(_el$2, createComponent(Show, {
-            when: typeof item !== 'object',
-            get fallback() {
-              return typeof item === 'object' && unwrapStringOrJSXElement(item.label);
-            },
-            children: item
-          }));
-          effect(_p$ => {
-            var _v$ = cs(props.block && 'basis-0 grow-1', isDisabledValue(item) && 'cursor-not-allowed'),
-              _v$2 = cs('rounded-[var(--ant-border-radius-sm)] px-[var(--ant-padding-sm)] cursor-pointer [white-space:nowrap]', isSelected(unWarpValue(item)) && 'bg-[var(--ant-segmented-item-selected-bg)]', isDisabledValue(item) ? '[pointer-events:none] text-[var(--ant-color-text-disabled)]' : isSelected(unWarpValue(item)) ? 'shadow-[var(--ant-box-shadow-tertiary)] text-[var(--ant-segmented-item-selected-color)]' : 'text-[var(--ant-segmented-item-color)] hover:text-[var(--ant-segmented-item-hover-color)] hover:bg-[var(--ant-segmented-item-hover-bg)] active:bg-[var(--ant-segmented-item-active-bg)]', props.block && 'flex justify-center', {
-                small: 'leading-20px',
-                middle: 'leading-28px',
-                large: 'leading-36px'
-              }[size()]);
-            _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-            _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined
-          });
-          return _el$;
-        })()
+        children: item => ssr(_tmpl$$l, ssrHydrationKey() + ssrAttribute("class", escape(cs(props.block && 'basis-0 grow-1', isDisabledValue(item) && 'cursor-not-allowed'), true), false), ssrAttribute("class", escape(cs('rounded-[var(--ant-border-radius-sm)] px-[var(--ant-padding-sm)] cursor-pointer [white-space:nowrap]', isSelected(unWarpValue(item)) && 'bg-[var(--ant-segmented-item-selected-bg)]', isDisabledValue(item) ? '[pointer-events:none] text-[var(--ant-color-text-disabled)]' : isSelected(unWarpValue(item)) ? 'shadow-[var(--ant-box-shadow-tertiary)] text-[var(--ant-segmented-item-selected-color)]' : 'text-[var(--ant-segmented-item-color)] hover:text-[var(--ant-segmented-item-hover-color)] hover:bg-[var(--ant-segmented-item-hover-bg)] active:bg-[var(--ant-segmented-item-active-bg)]', props.block && 'flex justify-center', {
+          small: 'leading-20px',
+          middle: 'leading-28px',
+          large: 'leading-36px'
+        }[size()]), true), false), escape(createComponent(Show, {
+          when: typeof item !== 'object',
+          get fallback() {
+            return typeof item === 'object' && unwrapStringOrJSXElement(item.label);
+          },
+          children: item
+        })))
       });
     }
   });
 };
-delegateEvents(["click"]);
 
-var _tmpl$$k = /*#__PURE__*/template(`<div>`),
-  _tmpl$2$9 = /*#__PURE__*/template(`<div><div aria-label=selected-bar>`);
+var _tmpl$$k = ["<div", ">", "</div>"],
+  _tmpl$2$9 = ["<div", "><!--$-->", "<!--/--><div aria-label=\"selected-bar\"", " style=\"", "\"></div></div>"],
+  _tmpl$3$7 = ["<div", " style=\"", "\"><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"],
+  _tmpl$4$4 = ["<div", " style=\"", "\">", "</div>"];
 const Tabs = _props => {
   const props = mergeProps({
     type: 'line',
@@ -4648,33 +3699,8 @@ const Tabs = _props => {
     left: '0px',
     width: '0px'
   });
-  let lineNav;
-  const updateSelectedBarStyle = () => {
-    if (!lineNav) return;
-    const el = lineNav.querySelector(':scope > [aria-label="selected"]');
-    if (!el) return;
-    if (props.placement === 'top' || props.placement === 'bottom') {
-      setSelectedBarStyle({
-        left: `${el.offsetLeft}px`,
-        width: `${el.clientWidth}px`
-      });
-    } else {
-      setSelectedBarStyle({
-        top: `${el.offsetTop}px`,
-        height: `${el.clientHeight}px`
-      });
-    }
-  };
   createEffect(on([() => props.type, () => props.placement], () => {
-    if (!lineNav) return;
-    updateSelectedBarStyle();
-    const resizeObserver = new ResizeObserver(() => {
-      updateSelectedBarStyle();
-    });
-    resizeObserver.observe(lineNav);
-    onCleanup(() => {
-      resizeObserver.disconnect();
-    });
+    return;
   }));
   const resolvedAddonBefore = children(() => props.addonBefore);
   const resolvedAddonAfter = children(() => props.addonAfter);
@@ -4690,157 +3716,89 @@ const Tabs = _props => {
       };
     },
     get children() {
-      return [(() => {
-        var _el$ = _tmpl$$k();
-        insert(_el$, createComponent(Show, {
-          get when() {
-            return resolvedAddonBefore();
-          },
-          get children() {
-            var _el$2 = _tmpl$$k();
-            insert(_el$2, resolvedAddonBefore);
-            return _el$2;
-          }
-        }), null);
-        insert(_el$, createComponent(Switch$1, {
-          get children() {
-            return [createComponent(Match, {
-              get when() {
-                return props.type === 'line';
-              },
-              get children() {
-                var _el$3 = _tmpl$2$9(),
-                  _el$4 = _el$3.firstChild;
-                var _ref$ = lineNav;
-                typeof _ref$ === "function" ? use(_ref$, _el$3) : lineNav = _el$3;
-                insert(_el$3, createComponent(For, {
-                  get each() {
-                    return props.items;
-                  },
-                  children: item => (() => {
-                    var _el$7 = _tmpl$$k();
-                    _el$7.$$click = () => {
-                      setActiveKey(item.key);
-                      updateSelectedBarStyle();
-                    };
-                    insert(_el$7, () => unwrapStringOrJSXElement(item.label));
-                    effect(_p$ => {
-                      var _v$6 = cs('cursor-pointer', 'hover:text-[var(--ant-color-primary)]', props.navItemClass, isSelectedItem(item.key) && 'text-[var(--ant-color-primary)]', (props.placement === 'top' || props.placement === 'bottom') && {
-                          small: 'py-[--ant-padding-xs]',
-                          middle: 'py-[--ant-padding-sm]',
-                          large: 'py-[--ant-padding]'
-                        }[size()], (props.placement === 'left' || props.placement === 'right') && 'px-24px py-8px'),
-                        _v$7 = isSelectedItem(item.key) ? 'selected' : undefined;
-                      _v$6 !== _p$.e && className(_el$7, _p$.e = _v$6);
-                      _v$7 !== _p$.t && setAttribute(_el$7, "aria-label", _p$.t = _v$7);
-                      return _p$;
-                    }, {
-                      e: undefined,
-                      t: undefined
-                    });
-                    return _el$7;
-                  })()
-                }), _el$4);
-                effect(_p$ => {
-                  var _v$ = cs('grow flex relative', (props.placement === 'top' || props.placement === 'bottom') && 'gap-32px', (props.placement === 'left' || props.placement === 'right') && 'flex-col gap-16px'),
-                    _v$2 = cs('absolute bg-[var(--ant-color-primary)] transition-left,top', props.placement === 'top' && '-bottom-1px', props.placement === 'bottom' && '-top-1px', props.placement === 'left' && '-right-1px', props.placement === 'right' && '-left-1px', (props.placement === 'top' || props.placement === 'bottom') && 'h-2px', (props.placement === 'left' || props.placement === 'right') && 'w-2px'),
-                    _v$3 = selectedBarStyle();
-                  _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
-                  _v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
-                  _p$.a = style(_el$4, _v$3, _p$.a);
-                  return _p$;
-                }, {
-                  e: undefined,
-                  t: undefined,
-                  a: undefined
-                });
-                return _el$3;
-              }
-            }), createComponent(Match, {
-              get when() {
-                return props.type === 'segment';
-              },
-              get children() {
-                return createComponent(Segmented, {
-                  "class": "grow",
-                  block: true,
-                  get size() {
-                    return size();
-                  },
-                  get disabled() {
-                    return props.disabled;
-                  },
-                  get value() {
-                    return activeKey();
-                  },
-                  onChange: key => {
-                    setActiveKey(key);
-                  },
-                  get options() {
-                    return props.items.map(item => ({
-                      label: item.label,
-                      value: item.key
-                    }));
-                  }
-                });
-              }
-            }), createComponent(Match, {
-              get when() {
-                return props.type === 'card';
-              },
-              get children() {
-                var _el$5 = _tmpl$$k();
-                insert(_el$5, createComponent(For, {
-                  get each() {
-                    return props.items;
-                  },
-                  children: item => (() => {
-                    var _el$8 = _tmpl$$k();
-                    _el$8.$$click = () => {
-                      setActiveKey(item.key);
-                      updateSelectedBarStyle();
-                    };
-                    insert(_el$8, () => unwrapStringOrJSXElement(item.label));
-                    effect(() => className(_el$8, cs({
-                      small: 'py-6px',
-                      middle: 'py-8px',
-                      large: 'py-8px'
-                    }[size()], 'px-16px cursor-pointer border-solid border-[var(--ant-color-border-secondary)] border-1px relative', 'hover:text-[var(--ant-color-primary)]', props.placement === 'top' && 'rounded-t-[var(--ant-border-radius-lg)] !border-b-0px', props.placement === 'bottom' && 'rounded-b-[var(--ant-border-radius-lg)] !border-t-0px', props.placement === 'left' && 'rounded-l-[var(--ant-border-radius-lg)] !border-r-0px', props.placement === 'right' && 'rounded-r-[var(--ant-border-radius-lg)] !border-l-0px', props.navItemClass, isSelectedItem(item.key) ? ['text-[var(--ant-color-primary)] bg-[var(--ant-color-bg-container)]', ['after:content-empty after:block after:absolute after:bg-inherit', props.placement === 'top' && 'after:bottom--1px', props.placement === 'bottom' && 'after:top--1px', props.placement === 'left' && 'after:right--1px', props.placement === 'right' && 'after:left--1px', (props.placement === 'top' || props.placement === 'bottom') && 'after:left-0 after:right-0 after:h-1px', (props.placement === 'left' || props.placement === 'right') && 'after:top-0 after:bottom-0 after:w-1px']] : 'bg-[var(--ant-tabs-card-bg)]')));
-                    return _el$8;
-                  })()
-                }));
-                effect(() => className(_el$5, cs('grow flex gap-2px relative', (props.placement === 'left' || props.placement === 'right') && 'flex-col')));
-                return _el$5;
-              }
-            })];
-          }
-        }), null);
-        insert(_el$, createComponent(Show, {
-          get when() {
-            return resolvedAddonAfter();
-          },
-          get children() {
-            var _el$6 = _tmpl$$k();
-            insert(_el$6, resolvedAddonAfter);
-            return _el$6;
-          }
-        }), null);
-        effect(_p$ => {
-          var _v$4 = cs('shrink-0 flex items-center gap-16px', props.navClass, props.type === 'segment' ? 'mb-[--ant-tabs-gap]' : ['border-solid border-[var(--ant-color-border-secondary)] border-0', props.placement === 'top' && '!border-b-1px mb-[--ant-tabs-gap]', props.placement === 'bottom' && '!border-t-1px mt-[--ant-tabs-gap]', props.placement === 'left' && '!border-r-1px mr-[--ant-tabs-gap]', props.placement === 'right' && '!border-l-1px ml-[--ant-tabs-gap]', (props.placement === 'left' || props.placement === 'right') && 'flex-col'], {
-              small: '[font-size:var(--ant-font-size)]',
-              middle: '[font-size:var(--ant-font-size)]',
-              large: '[font-size:var(--ant-font-size-lg)]'
-            }[size()]),
-            _v$5 = props.tabBarStyle;
-          _v$4 !== _p$.e && className(_el$, _p$.e = _v$4);
-          _p$.t = style(_el$, _v$5, _p$.t);
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined
-        });
-        return _el$;
-      })(), createComponent(For, {
+      return [ssr(_tmpl$3$7, ssrHydrationKey() + ssrAttribute("class", escape(cs('shrink-0 flex items-center gap-16px', props.navClass, props.type === 'segment' ? 'mb-[--ant-tabs-gap]' : ['border-solid border-[var(--ant-color-border-secondary)] border-0', props.placement === 'top' && '!border-b-1px mb-[--ant-tabs-gap]', props.placement === 'bottom' && '!border-t-1px mt-[--ant-tabs-gap]', props.placement === 'left' && '!border-r-1px mr-[--ant-tabs-gap]', props.placement === 'right' && '!border-l-1px ml-[--ant-tabs-gap]', (props.placement === 'left' || props.placement === 'right') && 'flex-col'], {
+        small: '[font-size:var(--ant-font-size)]',
+        middle: '[font-size:var(--ant-font-size)]',
+        large: '[font-size:var(--ant-font-size-lg)]'
+      }[size()]), true), false), ssrStyle(props.tabBarStyle), escape(createComponent(Show, {
+        get when() {
+          return resolvedAddonBefore();
+        },
+        get children() {
+          return ssr(_tmpl$$k, ssrHydrationKey(), escape(resolvedAddonBefore()));
+        }
+      })), escape(createComponent(Switch$1, {
+        get children() {
+          return [createComponent(Match, {
+            get when() {
+              return props.type === 'line';
+            },
+            get children() {
+              return ssr(_tmpl$2$9, ssrHydrationKey() + ssrAttribute("class", escape(cs('grow flex relative', (props.placement === 'top' || props.placement === 'bottom') && 'gap-32px', (props.placement === 'left' || props.placement === 'right') && 'flex-col gap-16px'), true), false), escape(createComponent(For, {
+                get each() {
+                  return props.items;
+                },
+                children: item => ssr(_tmpl$$k, ssrHydrationKey() + ssrAttribute("class", escape(cs('cursor-pointer', 'hover:text-[var(--ant-color-primary)]', props.navItemClass, isSelectedItem(item.key) && 'text-[var(--ant-color-primary)]', (props.placement === 'top' || props.placement === 'bottom') && {
+                  small: 'py-[--ant-padding-xs]',
+                  middle: 'py-[--ant-padding-sm]',
+                  large: 'py-[--ant-padding]'
+                }[size()], (props.placement === 'left' || props.placement === 'right') && 'px-24px py-8px'), true), false) + ssrAttribute("aria-label", isSelectedItem(item.key) ? 'selected' : escape(undefined, true), false), escape(unwrapStringOrJSXElement(item.label)))
+              })), ssrAttribute("class", escape(cs('absolute bg-[var(--ant-color-primary)] transition-left,top', props.placement === 'top' && '-bottom-1px', props.placement === 'bottom' && '-top-1px', props.placement === 'left' && '-right-1px', props.placement === 'right' && '-left-1px', (props.placement === 'top' || props.placement === 'bottom') && 'h-2px', (props.placement === 'left' || props.placement === 'right') && 'w-2px'), true), false), ssrStyle(selectedBarStyle()));
+            }
+          }), createComponent(Match, {
+            get when() {
+              return props.type === 'segment';
+            },
+            get children() {
+              return createComponent(Segmented, {
+                "class": "grow",
+                block: true,
+                get size() {
+                  return size();
+                },
+                get disabled() {
+                  return props.disabled;
+                },
+                get value() {
+                  return activeKey();
+                },
+                onChange: key => {
+                  setActiveKey(key);
+                },
+                get options() {
+                  return props.items.map(item => ({
+                    label: item.label,
+                    value: item.key
+                  }));
+                }
+              });
+            }
+          }), createComponent(Match, {
+            get when() {
+              return props.type === 'card';
+            },
+            get children() {
+              return ssr(_tmpl$$k, ssrHydrationKey() + ssrAttribute("class", escape(cs('grow flex gap-2px relative', (props.placement === 'left' || props.placement === 'right') && 'flex-col'), true), false), escape(createComponent(For, {
+                get each() {
+                  return props.items;
+                },
+                children: item => ssr(_tmpl$$k, ssrHydrationKey() + ssrAttribute("class", escape(cs({
+                  small: 'py-6px',
+                  middle: 'py-8px',
+                  large: 'py-8px'
+                }[size()], 'px-16px cursor-pointer border-solid border-[var(--ant-color-border-secondary)] border-1px relative', 'hover:text-[var(--ant-color-primary)]', props.placement === 'top' && 'rounded-t-[var(--ant-border-radius-lg)] !border-b-0px', props.placement === 'bottom' && 'rounded-b-[var(--ant-border-radius-lg)] !border-t-0px', props.placement === 'left' && 'rounded-l-[var(--ant-border-radius-lg)] !border-r-0px', props.placement === 'right' && 'rounded-r-[var(--ant-border-radius-lg)] !border-l-0px', props.navItemClass, isSelectedItem(item.key) ? ['text-[var(--ant-color-primary)] bg-[var(--ant-color-bg-container)]', ['after:content-empty after:block after:absolute after:bg-inherit', props.placement === 'top' && 'after:bottom--1px', props.placement === 'bottom' && 'after:top--1px', props.placement === 'left' && 'after:right--1px', props.placement === 'right' && 'after:left--1px', (props.placement === 'top' || props.placement === 'bottom') && 'after:left-0 after:right-0 after:h-1px', (props.placement === 'left' || props.placement === 'right') && 'after:top-0 after:bottom-0 after:w-1px']] : 'bg-[var(--ant-tabs-card-bg)]'), true), false), escape(unwrapStringOrJSXElement(item.label)))
+              })));
+            }
+          })];
+        }
+      })), escape(createComponent(Show, {
+        get when() {
+          return resolvedAddonAfter();
+        },
+        get children() {
+          return ssr(_tmpl$$k, ssrHydrationKey(), escape(resolvedAddonAfter()));
+        }
+      }))), createComponent(For, {
         get each() {
           return props.items;
         },
@@ -4852,28 +3810,15 @@ const Tabs = _props => {
             return isSelectedItem(item.key);
           },
           get children() {
-            var _el$9 = _tmpl$$k();
-            insert(_el$9, () => unwrapStringOrJSXElement(item.children));
-            effect(_p$ => {
-              var _v$8 = cs(props.contentClass, 'grow'),
-                _v$9 = isSelectedItem(item.key) ? 'block' : 'none';
-              _v$8 !== _p$.e && className(_el$9, _p$.e = _v$8);
-              _v$9 !== _p$.t && ((_p$.t = _v$9) != null ? _el$9.style.setProperty("display", _v$9) : _el$9.style.removeProperty("display"));
-              return _p$;
-            }, {
-              e: undefined,
-              t: undefined
-            });
-            return _el$9;
+            return ssr(_tmpl$4$4, ssrHydrationKey() + ssrAttribute("class", escape(cs(props.contentClass, 'grow'), true), false), "display:" + (isSelectedItem(item.key) ? "block" : "none"), escape(unwrapStringOrJSXElement(item.children)));
           }
         })
       })];
     }
   });
 };
-delegateEvents(["click"]);
 
-var _tmpl$$j = /*#__PURE__*/template(`<div><div class="mb-8px flex items-center"><span class="i-ant-design:exclamation-circle-fill text-#faad14"></span><span class="ml-8px font-600"></span></div><div class="ml-22px mb-8px"></div><div class=text-right>`);
+var _tmpl$$j = ["<div", "><div class=\"mb-8px flex items-center\"><span class=\"i-ant-design:exclamation-circle-fill text-#faad14\"></span><span class=\"ml-8px font-600\">", "</span></div><div class=\"ml-22px mb-8px\">", "</div><div class=\"text-right\"><!--$-->", "<!--/--><!--$-->", "<!--/--></div></div>"];
 const Popconfirm = props => {
   const mergedProps = mergeProps({
     okText: '确定',
@@ -4888,40 +3833,28 @@ const Popconfirm = props => {
       return open();
     },
     onOpenChange: setOpen,
-    content: () => (() => {
-      var _el$ = _tmpl$$j(),
-        _el$2 = _el$.firstChild,
-        _el$3 = _el$2.firstChild,
-        _el$4 = _el$3.nextSibling,
-        _el$5 = _el$2.nextSibling,
-        _el$6 = _el$5.nextSibling;
-      insert(_el$4, () => mergedProps.title);
-      insert(_el$5, () => mergedProps.content);
-      insert(_el$6, createComponent(Button$1, {
-        "class": "ml-8px",
-        size: "small",
-        onClick: () => {
-          setOpen(false);
-          untrack(() => mergedProps.onCancel?.());
-        },
-        get children() {
-          return mergedProps.cancelText;
-        }
-      }), null);
-      insert(_el$6, createComponent(Button$1, {
-        "class": "ml-8px",
-        type: "primary",
-        size: "small",
-        onClick: () => {
-          setOpen(false);
-          untrack(() => mergedProps.onConfirm?.());
-        },
-        get children() {
-          return mergedProps.okText;
-        }
-      }), null);
-      return _el$;
-    })()
+    content: () => ssr(_tmpl$$j, ssrHydrationKey(), escape(mergedProps.title), escape(mergedProps.content), escape(createComponent(Button$1, {
+      "class": "ml-8px",
+      size: "small",
+      onClick: () => {
+        setOpen(false);
+        untrack(() => mergedProps.onCancel?.());
+      },
+      get children() {
+        return mergedProps.cancelText;
+      }
+    })), escape(createComponent(Button$1, {
+      "class": "ml-8px",
+      type: "primary",
+      size: "small",
+      onClick: () => {
+        setOpen(false);
+        untrack(() => mergedProps.onConfirm?.());
+      },
+      get children() {
+        return mergedProps.okText;
+      }
+    })))
   }, tooltipProps, {
     get children() {
       return mergedProps.children;
@@ -4929,7 +3862,7 @@ const Popconfirm = props => {
   }));
 };
 
-var _tmpl$$i = /*#__PURE__*/template(`<span><input class=hidden type=file>`);
+var _tmpl$$i = ["<span", "><!--$-->", "<!--/--><input class=\"hidden\" type=\"file\"", "", "></span>"];
 /**
  * 根据一个 File 对象创建一个 UploadFile 对象
  * @param file
@@ -4982,7 +3915,6 @@ async function request(uploadFileSignal, customRequest) {
   });
 }
 const Upload = _props => {
-  let input;
   const props = mergeProps({
     customRequest: ({
       file,
@@ -4998,46 +3930,13 @@ const Upload = _props => {
       }).then(onSuccess).catch(onError);
     }
   }, _props);
-  return (() => {
-    var _el$ = _tmpl$$i(),
-      _el$2 = _el$.firstChild;
-    _el$.$$click = () => input?.click();
-    insert(_el$, () => props.children, _el$2);
-    _el$2.$$input = e => {
-      const fileList = [];
-      for (const file of Array.from(e.target.files ?? [])) {
-        // eslint-disable-next-line solid/reactivity
-        const uploadFileSignal = createSignal(createUploadFile(file));
-        request(uploadFileSignal, props.customRequest);
-        fileList.push(uploadFileSignal);
-      }
-      props.onAdd?.(fileList);
-      e.target.value = '';
-    };
-    var _ref$ = input;
-    typeof _ref$ === "function" ? use(_ref$, _el$2) : input = _el$2;
-    effect(_p$ => {
-      var _v$ = props.class,
-        _v$2 = props.accept,
-        _v$3 = props.multiple;
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && setAttribute(_el$2, "accept", _p$.t = _v$2);
-      _v$3 !== _p$.a && (_el$2.multiple = _p$.a = _v$3);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined,
-      a: undefined
-    });
-    return _el$;
-  })();
+  return ssr(_tmpl$$i, ssrHydrationKey() + ssrAttribute("class", escape(props.class, true), false), escape(props.children), ssrAttribute("accept", escape(props.accept, true), false), ssrAttribute("multiple", props.multiple, true));
 };
 Upload.request = request;
 Upload.createUploadFile = createUploadFile;
-delegateEvents(["click", "input"]);
 
-var _tmpl$$h = /*#__PURE__*/template(`<input class=hidden type=radio>`),
-  _tmpl$2$8 = /*#__PURE__*/template(`<span>`);
+var _tmpl$$h = ["<input", " class=\"hidden\"", " type=\"radio\"", ">"],
+  _tmpl$2$8 = ["<span", ">", "</span>"];
 const Button = props => {
   let input;
   const [checked, setChecked] = createControllableValue(props, {
@@ -5080,26 +3979,10 @@ const Button = props => {
       };
     },
     get children() {
-      return [(() => {
-        var _el$ = _tmpl$$h();
-        _el$.$$input = e => {
-          setChecked(e.target.checked);
-          props.onChange?.(e);
-        };
-        var _ref$ = input;
-        typeof _ref$ === "function" ? use(_ref$, _el$) : input = _el$;
-        effect(() => _el$.disabled = props.disabled);
-        effect(() => _el$.checked = checked());
-        return _el$;
-      })(), (() => {
-        var _el$2 = _tmpl$2$8();
-        insert(_el$2, () => props.children);
-        return _el$2;
-      })()];
+      return [ssr(_tmpl$$h, ssrHydrationKey(), ssrAttribute("checked", checked(), true), ssrAttribute("disabled", props.disabled, true)), ssr(_tmpl$2$8, ssrHydrationKey(), escape(props.children))];
     }
   });
 };
-delegateEvents(["input"]);
 
 const Group = _props => {
   const props = mergeProps({
@@ -5149,8 +4032,8 @@ const Group = _props => {
   });
 };
 
-var _tmpl$$g = /*#__PURE__*/template(`<span><input class="m-0 hidden"type=radio><span>`),
-  _tmpl$2$7 = /*#__PURE__*/template(`<span class=px-8px>`);
+var _tmpl$$g = ["<span", "><input class=\"m-0 hidden\"", " type=\"radio\"", "><span", "></span></span>"],
+  _tmpl$2$7 = ["<span", " class=\"px-8px\">", "</span>"];
 const Radio = props => {
   const [checked, setChecked] = createControllableValue(props, {
     defaultValue: false,
@@ -5164,40 +4047,12 @@ const Radio = props => {
       return cs('inline-flex cursor-pointer inline-flex items-center', props.disabled && 'text-[var(--ant-color-text-disabled)] cursor-not-allowed');
     },
     get children() {
-      return [(() => {
-        var _el$ = _tmpl$$g(),
-          _el$2 = _el$.firstChild,
-          _el$3 = _el$2.nextSibling;
-        _el$.$$click = e => {
-          wave(e.currentTarget, 'var(--ant-color-primary)');
-        };
-        _el$2.$$input = e => {
-          setChecked(e.target.checked);
-          props.onChange?.(e);
-        };
-        effect(_p$ => {
-          var _v$ = cs('relative w-16px h-16px rounded-50%'),
-            _v$2 = props.disabled,
-            _v$3 = cs('absolute inset-0 rounded-inherit [border:1px_solid_var(--ant-color-border)] bg-[var(--ant-color-bg-container)]', checked() && (props.disabled ? 'flex justify-center items-center before:content-empty before:block before:w-8px before:h-8px before:bg-[var(--ant-radio-dot-color-disabled)] before:rounded-50%' : '[border:5px_solid_var(--ant-color-primary)]'), props.disabled && 'bg-[var(--ant-color-bg-container-disabled)]');
-          _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-          _v$2 !== _p$.t && (_el$2.disabled = _p$.t = _v$2);
-          _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined,
-          a: undefined
-        });
-        effect(() => _el$2.checked = checked());
-        return _el$;
-      })(), createComponent(Show, {
+      return [ssr(_tmpl$$g, ssrHydrationKey() + ssrAttribute("class", escape(cs('relative w-16px h-16px rounded-50%'), true), false), ssrAttribute("checked", checked(), true), ssrAttribute("disabled", props.disabled, true), ssrAttribute("class", escape(cs('absolute inset-0 rounded-inherit [border:1px_solid_var(--ant-color-border)] bg-[var(--ant-color-bg-container)]', checked() && (props.disabled ? 'flex justify-center items-center before:content-empty before:block before:w-8px before:h-8px before:bg-[var(--ant-radio-dot-color-disabled)] before:rounded-50%' : '[border:5px_solid_var(--ant-color-primary)]'), props.disabled && 'bg-[var(--ant-color-bg-container-disabled)]'), true), false)), createComponent(Show, {
         get when() {
           return props.children;
         },
         get children() {
-          var _el$4 = _tmpl$2$7();
-          insert(_el$4, () => props.children);
-          return _el$4;
+          return ssr(_tmpl$2$7, ssrHydrationKey(), escape(props.children));
         }
       })];
     }
@@ -5205,7 +4060,6 @@ const Radio = props => {
 };
 Radio.Button = Button;
 Radio.Group = Group;
-delegateEvents(["click", "input"]);
 
 const FormContext = createContext({
   layout: () => 'horizontal'
@@ -5287,11 +4141,11 @@ function Form$1(_props) {
   });
 }
 
-var _tmpl$$f = /*#__PURE__*/template(`<label class=mr-4px>`),
-  _tmpl$2$6 = /*#__PURE__*/template(`<span class=text-[var(--ant-color-error)]>*`),
-  _tmpl$3$6 = /*#__PURE__*/template(`<div class="flex items-center"><label>`),
-  _tmpl$4$4 = /*#__PURE__*/template(`<div class="absolute top-[100%] text-[var(--ant-color-error)]">`),
-  _tmpl$5$3 = /*#__PURE__*/template(`<div class="flex flex-col relative flex-grow-1"><div>`);
+var _tmpl$$f = ["<label", " class=\"mr-4px\">", "</label>"],
+  _tmpl$2$6 = ["<span", " class=\"text-[var(--ant-color-error)]\">*</span>"],
+  _tmpl$3$6 = ["<div", " class=\"flex items-center\" style=\"", "\"><label", "><!--$-->", "<!--/--><!--$-->", "<!--/--></label></div>"],
+  _tmpl$4$3 = ["<div", " class=\"absolute top-[100%] text-[var(--ant-color-error)]\">", "</div>"],
+  _tmpl$5$2 = ["<div", " class=\"flex flex-col relative flex-grow-1\" style=\"", "\"><div>", "</div><!--$-->", "<!--/--></div>"];
 const FormItem = props => {
   const {
     formInstance,
@@ -5350,77 +4204,48 @@ const FormItem = props => {
           return props.style;
         },
         get children() {
-          return [(() => {
-            var _el$ = _tmpl$3$6(),
-              _el$2 = _el$.firstChild;
-            var _ref$ = label;
-            typeof _ref$ === "function" ? use(_ref$, _el$2) : label = _el$2;
-            insert(_el$2, createComponent(Show, {
-              get when() {
-                return !isNil(props.label);
-              },
-              get children() {
-                var _el$3 = _tmpl$$f();
-                insert(_el$3, () => props.label);
-                return _el$3;
-              }
-            }), null);
-            insert(_el$2, createComponent(Show, {
-              get when() {
-                return !isNil(props.required);
-              },
-              get children() {
-                return _tmpl$2$6();
-              }
-            }), null);
-            effect(_p$ => {
-              var _v$ = layout() === 'horizontal' && maxItemWidth ? `${maxItemWidth() ?? 0}px` : undefined,
-                _v$2 = cs('shrink-0 leading-32px not[:empty]:h-32px not[:empty]:pr-8px text-right [white-space:nowrap]');
-              _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("width", _v$) : _el$.style.removeProperty("width"));
-              _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-              return _p$;
-            }, {
-              e: undefined,
-              t: undefined
-            });
-            return _el$;
-          })(), (() => {
-            var _el$5 = _tmpl$5$3(),
-              _el$6 = _el$5.firstChild;
-            insert(_el$6, createComponent(Dynamic, {
-              get component() {
-                return props.component;
-              },
-              get value() {
-                return memo(() => !!props.name)() ? formInstance?.getFieldValue(props.name) : undefined;
-              },
-              get status() {
-                return errMsg() ? 'error' : undefined;
-              },
-              onChange: value => {
-                if (!isNil(props.name)) formInstance?.setFieldValue(props.name, value);
-                props.rules?.forEach(rule => {
-                  rule.validate(value).then(() => {
-                    setErrMsg('');
-                  }).catch(err => {
-                    setErrMsg(err.message);
-                  });
+          return [ssr(_tmpl$3$6, ssrHydrationKey(), "width:" + (layout() === 'horizontal' && maxItemWidth ? `${escape(maxItemWidth(), true) ?? 0}px` : escape(undefined, true)), ssrAttribute("class", escape(cs('shrink-0 leading-32px not[:empty]:h-32px not[:empty]:pr-8px text-right [white-space:nowrap]'), true), false), escape(createComponent(Show, {
+            get when() {
+              return !isNil(props.label);
+            },
+            get children() {
+              return ssr(_tmpl$$f, ssrHydrationKey(), escape(props.label));
+            }
+          })), escape(createComponent(Show, {
+            get when() {
+              return !isNil(props.required);
+            },
+            get children() {
+              return ssr(_tmpl$2$6, ssrHydrationKey());
+            }
+          }))), ssr(_tmpl$5$2, ssrHydrationKey(), "width:" + (layout() === 'horizontal' && maxItemWidth ? `calc(100% - ${escape(maxItemWidth(), true) ?? 0}px)` : escape(undefined, true)), escape(createComponent(Dynamic, {
+            get component() {
+              return props.component;
+            },
+            get value() {
+              return props.name ? formInstance?.getFieldValue(props.name) : undefined;
+            },
+            get status() {
+              return errMsg() ? 'error' : undefined;
+            },
+            onChange: value => {
+              if (!isNil(props.name)) formInstance?.setFieldValue(props.name, value);
+              props.rules?.forEach(rule => {
+                rule.validate(value).then(() => {
+                  setErrMsg('');
+                }).catch(err => {
+                  setErrMsg(err.message);
                 });
-              }
-            }));
-            insert(_el$5, createComponent(Show, {
-              get when() {
-                return errMsg();
-              },
-              get children() {
-                var _el$7 = _tmpl$4$4();
-                insert(_el$7, errMsg);
-                return _el$7;
-              }
-            }), null);
-            effect(_$p => (_$p = layout() === 'horizontal' && maxItemWidth ? `calc(100% - ${maxItemWidth() ?? 0}px)` : undefined) != null ? _el$5.style.setProperty("width", _$p) : _el$5.style.removeProperty("width"));
-            return _el$5;
-          })()];
+              });
+            }
+          })), escape(createComponent(Show, {
+            get when() {
+              return errMsg();
+            },
+            get children() {
+              return ssr(_tmpl$4$3, ssrHydrationKey(), escape(errMsg()));
+            }
+          })))];
         }
       });
     }
@@ -5430,7 +4255,7 @@ const FormItem = props => {
 const Form = Form$1;
 Form.Item = FormItem;
 
-var _tmpl$$e = /*#__PURE__*/template(`<div>`);
+var _tmpl$$e = ["<div", "></div>"];
 const Switch = props => {
   const size = useComponentSize(() => props.size);
   const [checked, setChecked] = createControllableValue(props, {
@@ -5453,20 +4278,18 @@ const Switch = props => {
       setChecked(c => !c);
     },
     get children() {
-      var _el$ = _tmpl$$e();
-      effect(() => className(_el$, cs('rounded-50% bg-white absolute top-1/2 -translate-y-1/2 transition-left', {
+      return ssr(_tmpl$$e, ssrHydrationKey() + ssrAttribute("class", escape(cs('rounded-50% bg-white absolute top-1/2 -translate-y-1/2 transition-left', {
         large: 'w-24px h-24px',
         middle: 'w-18px h-18px',
         small: 'w-12px h-12px'
-      }[size()], checked() ? 'right-2px' : 'left-2px')));
-      return _el$;
+      }[size()], checked() ? 'right-2px' : 'left-2px'), true), false));
     }
   });
 };
 
-var _tmpl$$d = /*#__PURE__*/template(`<div class="inline-flex flex-col items-center gap-8px text-[var(--ant-color-primary)]"><span class="i-ant-design:loading keyframes-spin [animation:spin_1s_linear_infinite]">`),
-  _tmpl$2$5 = /*#__PURE__*/template(`<div>`),
-  _tmpl$3$5 = /*#__PURE__*/template(`<div class="absolute inset-0 flex items-center justify-center bg-[var(--ant-color-bg-container)] opacity-40">`);
+var _tmpl$$d = ["<div", " class=\"inline-flex flex-col items-center gap-8px text-[var(--ant-color-primary)]\"><span class=\"i-ant-design:loading keyframes-spin [animation:spin_1s_linear_infinite]\" style=\"", "\"></span><!--$-->", "<!--/--></div>"],
+  _tmpl$2$5 = ["<div", ">", "</div>"],
+  _tmpl$3$5 = ["<div", " class=\"absolute inset-0 flex items-center justify-center bg-[var(--ant-color-bg-container)] opacity-40\">", "</div>"];
 const Spin = _props => {
   const props = mergeProps({
     spinning: true,
@@ -5474,20 +4297,14 @@ const Spin = _props => {
   }, _props);
   const resolvedChildren = children(() => props.children);
   const resolvedTip = children(() => unwrapStringOrJSXElement(props.tip));
-  const spin = (() => {
-    var _el$ = _tmpl$$d(),
-      _el$2 = _el$.firstChild;
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return !isEmptyJSXElement(resolvedTip());
-      },
-      get children() {
-        return resolvedTip();
-      }
-    }), null);
-    effect(_$p => (_$p = `${props.size}px`) != null ? _el$2.style.setProperty("font-size", _$p) : _el$2.style.removeProperty("font-size"));
-    return _el$;
-  })();
+  const spin = ssr(_tmpl$$d, ssrHydrationKey(), "font-size:" + `${escape(props.size, true)}px`, escape(createComponent(Show, {
+    get when() {
+      return !isEmptyJSXElement(resolvedTip());
+    },
+    get children() {
+      return resolvedTip();
+    }
+  })));
   return createComponent(Show, {
     get when() {
       return !isEmptyJSXElement(resolvedChildren());
@@ -5519,18 +4336,12 @@ const Spin = _props => {
           return props.style;
         },
         get children() {
-          return [(() => {
-            var _el$3 = _tmpl$2$5();
-            insert(_el$3, resolvedChildren);
-            return _el$3;
-          })(), createComponent(Show, {
+          return [ssr(_tmpl$2$5, ssrHydrationKey(), escape(resolvedChildren())), createComponent(Show, {
             get when() {
               return props.spinning;
             },
             get children() {
-              var _el$4 = _tmpl$3$5();
-              insert(_el$4, spin);
-              return _el$4;
+              return ssr(_tmpl$3$5, ssrHydrationKey(), escape(spin));
             }
           })];
         }
@@ -5539,43 +4350,23 @@ const Spin = _props => {
   });
 };
 
-var _tmpl$$c = /*#__PURE__*/template(`<div><img>`);
+var _tmpl$$c = ["<div", " style=\"", "\">", "</div>"];
 const Image = props => {
-  return (() => {
-    var _el$ = _tmpl$$c(),
-      _el$2 = _el$.firstChild;
-    spread(_el$2, mergeProps$1(props, {
-      get src() {
-        return props.src ? props.src : props.fallback;
-      },
-      "onError": e => {
-        if (props.fallback) {
-          e.currentTarget.src = props.fallback;
-        }
-      }
-    }), false, false);
-    effect(_p$ => {
-      var _v$ = cs(props.rootClass, 'inline-block'),
-        _v$2 = {
-          width: typeof props.width === 'string' ? props.width : undefined,
-          height: typeof props.height === 'string' ? props.height : undefined,
-          ...props.rootStyle
-        };
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _p$.t = style(_el$, _v$2, _p$.t);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined
-    });
-    return _el$;
-  })();
+  return ssr(_tmpl$$c, ssrHydrationKey() + ssrAttribute("class", escape(cs(props.rootClass, 'inline-block'), true), false), ssrStyle({
+    width: typeof props.width === 'string' ? props.width : undefined,
+    height: typeof props.height === 'string' ? props.height : undefined,
+    ...props.rootStyle
+  }), ssrElement("img", mergeProps$1(props, {
+    get src() {
+      return props.src ? props.src : props.fallback;
+    }
+  }), undefined, false));
 };
 
-var _tmpl$$b = /*#__PURE__*/template(`<table class=w-full><thead><tr></tr></thead><tbody>`),
-  _tmpl$2$4 = /*#__PURE__*/template(`<th>`),
-  _tmpl$3$4 = /*#__PURE__*/template(`<tr class=hover:bg-[var(--ant-table-row-hover-bg)]>`),
-  _tmpl$4$3 = /*#__PURE__*/template(`<td>`);
+var _tmpl$$b = ["<table", " class=\"w-full\"><thead><tr>", "</tr></thead><tbody>", "</tbody></table>"],
+  _tmpl$2$4 = ["<th", ">", "</th>"],
+  _tmpl$3$4 = ["<tr", " class=\"hover:bg-[var(--ant-table-row-hover-bg)]\">", "</tr>"],
+  _tmpl$4$2 = ["<td", ">", "</td>"];
 const sizeClassDict = {
   large: 'p-16px leading-22px',
   middle: 'px-8px py-12px leading-22px',
@@ -5586,44 +4377,22 @@ const Table = props => {
   return createComponent(Element$1, {
     "class": "[font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]",
     get children() {
-      return [(() => {
-        var _el$ = _tmpl$$b(),
-          _el$2 = _el$.firstChild,
-          _el$3 = _el$2.firstChild,
-          _el$4 = _el$2.nextSibling;
-        insert(_el$3, createComponent(For, {
+      return [ssr(_tmpl$$b, ssrHydrationKey(), escape(createComponent(For, {
+        get each() {
+          return props.columns;
+        },
+        children: item => ssr(_tmpl$2$4, ssrHydrationKey() + ssrAttribute("class", escape(cs(sizeClassDict[size()], 'bg-[var(--ant-table-header-bg)] font-bold [border-bottom:1px_solid_var(--ant-table-border-color)] text-left'), true), false), escape(item.title))
+      })), escape(createComponent(For, {
+        get each() {
+          return props.dataSource;
+        },
+        children: (row, i) => ssr(_tmpl$3$4, ssrHydrationKey(), escape(createComponent(For, {
           get each() {
             return props.columns;
           },
-          children: item => (() => {
-            var _el$5 = _tmpl$2$4();
-            insert(_el$5, () => item.title);
-            effect(() => className(_el$5, cs(sizeClassDict[size()], 'bg-[var(--ant-table-header-bg)] font-bold [border-bottom:1px_solid_var(--ant-table-border-color)] text-left')));
-            return _el$5;
-          })()
-        }));
-        insert(_el$4, createComponent(For, {
-          get each() {
-            return props.dataSource;
-          },
-          children: (row, i) => (() => {
-            var _el$6 = _tmpl$3$4();
-            insert(_el$6, createComponent(For, {
-              get each() {
-                return props.columns;
-              },
-              children: item => (() => {
-                var _el$7 = _tmpl$4$3();
-                insert(_el$7, () => item.render(row, i));
-                effect(() => className(_el$7, cs(sizeClassDict[size()], '[border-bottom:1px_solid_var(--ant-table-border-color)]')));
-                return _el$7;
-              })()
-            }));
-            return _el$6;
-          })()
-        }));
-        return _el$;
-      })(), createComponent(Show, {
+          children: item => ssr(_tmpl$4$2, ssrHydrationKey() + ssrAttribute("class", escape(cs(sizeClassDict[size()], '[border-bottom:1px_solid_var(--ant-table-border-color)]'), true), false), escape(item.render(row, i)))
+        })))
+      }))), createComponent(Show, {
         get when() {
           return !props.dataSource.length;
         },
@@ -5710,9 +4479,9 @@ function getElementCssVariables(type, size) {
   };
 }
 
-var _tmpl$$a = /*#__PURE__*/template(`<span>`),
-  _tmpl$2$3 = /*#__PURE__*/template(`<div><span class="inline-flex items-center gap-[--ant-margin-sm]"></span><span class="inline-flex items-center gap-[--ant-margin-sm]">`),
-  _tmpl$3$3 = /*#__PURE__*/template(`<div class=overflow-hidden><div>`);
+var _tmpl$$a = ["<span", "></span>"],
+  _tmpl$2$3 = ["<div", " style=\"", "\"><span class=\"inline-flex items-center gap-[--ant-margin-sm]\"><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></span><span class=\"inline-flex items-center gap-[--ant-margin-sm]\"><!--$-->", "<!--/--><!--$-->", "<!--/--></span></div>"],
+  _tmpl$3$3 = ["<div", " class=\"overflow-hidden\"><div", " style=\"", "\">", "</div></div>"];
 const CollapseItem = _props => {
   const props = mergeProps({
     type: 'line',
@@ -5734,13 +4503,9 @@ const CollapseItem = _props => {
         return !props.disabledChildren && props.expandIcon !== false && props.expandIconPosition === position;
       },
       get children() {
-        return memo(() => typeof props.expandIcon === 'function')() ? props.expandIcon({
+        return typeof props.expandIcon === 'function' ? props.expandIcon({
           isActive: () => !!open()
-        }) : (() => {
-          var _el$ = _tmpl$$a();
-          effect(() => className(_el$, cs('i-ant-design:right-outlined', 'duration-.3s', open() && 'rotate-[90deg]')));
-          return _el$;
-        })();
+        }) : ssr(_tmpl$$a, ssrHydrationKey() + ssrAttribute("class", escape(cs('i-ant-design:right-outlined', 'duration-.3s', open() && 'rotate-[90deg]'), true), false));
       }
     });
   };
@@ -5756,31 +4521,7 @@ const CollapseItem = _props => {
       };
     },
     get children() {
-      return [(() => {
-        var _el$2 = _tmpl$2$3(),
-          _el$3 = _el$2.firstChild,
-          _el$4 = _el$3.nextSibling;
-        _el$2.$$click = () => {
-          if (props.disabledChildren) return;
-          setOpen(!open());
-        };
-        insert(_el$3, () => getExpandIcon('left'), null);
-        insert(_el$3, () => unwrapStringOrJSXElement(props.label), null);
-        insert(_el$3, () => getExpandIcon('right'), null);
-        insert(_el$4, () => unwrapStringOrJSXElement(props.extra), null);
-        insert(_el$4, () => getExpandIcon('end'), null);
-        effect(_p$ => {
-          var _v$ = cs('text-[--ant-color-text-heading] flex justify-between items-center cursor-pointer', props.type === 'card' && 'bg-[var(--ant-collapse-header-bg)] p-[--ant-collapse-header-padding]'),
-            _v$2 = props.headerStyle;
-          _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-          _p$.t = style(_el$2, _v$2, _p$.t);
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined
-        });
-        return _el$2;
-      })(), createComponent(Transition, {
+      return [ssr(_tmpl$2$3, ssrHydrationKey() + ssrAttribute("class", escape(cs('text-[--ant-color-text-heading] flex justify-between items-center cursor-pointer', props.type === 'card' && 'bg-[var(--ant-collapse-header-bg)] p-[--ant-collapse-header-padding]'), true), false), ssrStyle(props.headerStyle), escape(getExpandIcon('left')), escape(unwrapStringOrJSXElement(props.label)), escape(getExpandIcon('right')), escape(unwrapStringOrJSXElement(props.extra)), escape(getExpandIcon('end'))), createComponent(Transition, {
         onEnter: (el, done) => {
           el.animate([{
             height: '0px'
@@ -5805,20 +4546,7 @@ const CollapseItem = _props => {
               return open();
             },
             get children() {
-              var _el$5 = _tmpl$3$3(),
-                _el$6 = _el$5.firstChild;
-              insert(_el$6, () => props.children);
-              effect(_p$ => {
-                var _v$3 = cs('p-[--ant-collapse-content-padding]', props.type === 'card' && '[border-top:1px_solid_var(--ant-color-border)]'),
-                  _v$4 = props.bodyStyle;
-                _v$3 !== _p$.e && className(_el$6, _p$.e = _v$3);
-                _p$.t = style(_el$6, _v$4, _p$.t);
-                return _p$;
-              }, {
-                e: undefined,
-                t: undefined
-              });
-              return _el$5;
+              return ssr(_tmpl$3$3, ssrHydrationKey(), ssrAttribute("class", escape(cs('p-[--ant-collapse-content-padding]', props.type === 'card' && '[border-top:1px_solid_var(--ant-color-border)]'), true), false), ssrStyle(props.bodyStyle), escape(props.children));
             }
           });
         }
@@ -5826,9 +4554,8 @@ const CollapseItem = _props => {
     }
   });
 };
-delegateEvents(["click"]);
 
-var _tmpl$$9 = /*#__PURE__*/template(`<div>`);
+var _tmpl$$9 = ["<div", "></div>"];
 const Collapse = _props => {
   const props = mergeProps({
     divider: true,
@@ -5873,9 +4600,7 @@ const Collapse = _props => {
                     return index() !== 0 && props.divider;
                   },
                   get children() {
-                    var _el$ = _tmpl$$9();
-                    effect(() => className(_el$, cs('h-1px bg-[var(--ant-color-split)]', props.type === 'line' && 'm-[--ant-collapse-divider-margin]')));
-                    return _el$;
+                    return ssr(_tmpl$$9, ssrHydrationKey() + ssrAttribute("class", escape(cs('h-1px bg-[var(--ant-color-split)]', props.type === 'line' && 'm-[--ant-collapse-divider-margin]'), true), false));
                   }
                 }), createComponent(CollapseItem, mergeProps$1(item, {
                   get open() {
@@ -5943,7 +4668,7 @@ const Alert = _props => {
   });
 };
 
-var _tmpl$$8 = /*#__PURE__*/template(`<div class="px-4px py-8px">`);
+var _tmpl$$8 = ["<div", " class=\"px-4px py-8px\">", "</div>"];
 const TreeSelect = props => {
   const [selectInputProps] = splitProps(props, ['multiple', 'allowClear', 'class', 'disabled', 'placeholder', 'status', 'size']);
   const [treeProps] = splitProps(props, ['treeData', 'checkable', 'checkStrategy']);
@@ -5998,8 +4723,7 @@ const TreeSelect = props => {
         return createComponent(Empty.PRESENTED_IMAGE_SIMPLE, {});
       },
       get children() {
-        var _el$ = _tmpl$$8();
-        insert(_el$, createComponent(Tree, mergeProps$1({
+        return ssr(_tmpl$$8, ssrHydrationKey(), escape(createComponent(Tree, mergeProps$1({
           get multiple() {
             return props.multiple;
           },
@@ -6024,14 +4748,13 @@ const TreeSelect = props => {
             setValueArr(selectedKeys);
             if (!props.multiple) close();
           }
-        }, treeProps)));
-        return _el$;
+        }, treeProps))));
       }
     })
   }));
 };
 
-var _tmpl$$7 = /*#__PURE__*/template(`<span class="inline-block px-[var(--ant-divider-text-padding-inline)]">`);
+var _tmpl$$7 = ["<span", " class=\"inline-block px-[var(--ant-divider-text-padding-inline)]\" style=\"", "\">", "</span>"];
 const Divider = _props => {
   const props = mergeProps({
     orientation: 'center',
@@ -6066,10 +4789,6 @@ const Divider = _props => {
     },
     get children() {
       return createComponent(Element$1, {
-        ref(r$) {
-          var _ref$ = container;
-          typeof _ref$ === "function" ? _ref$(r$) : container = r$;
-        },
         get ["class"]() {
           return cs(props.class, 'my-[var(--ant-margin)] flex items-center relative', ['before:content-empty before:block before:absolute before:left-0 before:w-[var(--ant-divider-children-start)] before:border-width-[1px_0_0] before:border-[var(--ant-color-split)]', props.dashed ? 'before:border-dashed' : 'before:border-solid'], ['after:content-empty after:block after:absolute after:left-[var(--ant-divider-children-end)] after:right-0 after:border-width-[1px_0_0] after:border-[var(--ant-color-split)]', props.dashed ? 'after:border-dashed' : 'after:border-solid']);
         },
@@ -6082,37 +4801,19 @@ const Divider = _props => {
           };
         },
         get children() {
-          var _el$ = _tmpl$$7();
-          var _ref$2 = childrenRef;
-          typeof _ref$2 === "function" ? use(_ref$2, _el$) : childrenRef = _el$;
-          insert(_el$, resolvedChildren);
-          effect(_$p => (_$p = `translateX(${childrenStart()}px)`) != null ? _el$.style.setProperty("transform", _$p) : _el$.style.removeProperty("transform"));
-          return _el$;
+          return ssr(_tmpl$$7, ssrHydrationKey(), "transform:" + `translateX(${escape(childrenStart(), true)}px)`, escape(resolvedChildren()));
         }
       });
     }
   });
 };
 
-var _tmpl$$6 = /*#__PURE__*/template(`<svg viewBox="0 0 1024 1024"xmlns=http://www.w3.org/2000/svg><path fill=black stroke=white stroke-width=50 d="M531.2 179.2l130.133333 140.8c4.266667 4.266667 6.4 10.666667 6.4 14.933333-2.133333 4.266667-6.4 6.4-14.933333 6.4h-85.333333v341.333334h85.333333c8.533333 0 12.8 2.133333 14.933333 6.4 2.133333 4.266667 0 8.533333-6.4 14.933333l-130.133333 140.8c-4.266667 6.4-12.8 8.533333-19.2 8.533333s-14.933333-2.133333-19.2-8.533333l-130.133333-140.8c-4.266667-4.266667-6.4-10.666667-6.4-14.933333 2.133333-4.266667 6.4-6.4 14.933333-6.4h85.333333v-341.333334h-85.333333c-8.533333 0-12.8-2.133333-14.933333-6.4-2.133333-4.266667 0-8.533333 6.4-14.933333l130.133333-140.8c4.266667-6.4 12.8-8.533333 19.2-8.533333s14.933333 2.133333 19.2 8.533333z">`);
+var _tmpl$$6 = ["<svg", " viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\"", " style=\"", "\"><path fill=\"black\" stroke=\"white\" stroke-width=\"50\" d=\"M531.2 179.2l130.133333 140.8c4.266667 4.266667 6.4 10.666667 6.4 14.933333-2.133333 4.266667-6.4 6.4-14.933333 6.4h-85.333333v341.333334h85.333333c8.533333 0 12.8 2.133333 14.933333 6.4 2.133333 4.266667 0 8.533333-6.4 14.933333l-130.133333 140.8c-4.266667 6.4-12.8 8.533333-19.2 8.533333s-14.933333-2.133333-19.2-8.533333l-130.133333-140.8c-4.266667-4.266667-6.4-10.666667-6.4-14.933333 2.133333-4.266667 6.4-6.4 14.933333-6.4h85.333333v-341.333334h-85.333333c-8.533333 0-12.8-2.133333-14.933333-6.4-2.133333-4.266667 0-8.533333 6.4-14.933333l130.133333-140.8c4.266667-6.4 12.8-8.533333 19.2-8.533333s14.933333 2.133333 19.2 8.533333z\"></path></svg>"];
 const Resize = props => {
-  return (() => {
-    var _el$ = _tmpl$$6();
-    effect(_p$ => {
-      var _v$ = props.class,
-        _v$2 = {
-          ...commonStyle,
-          ...props.style
-        };
-      _v$ !== _p$.e && setAttribute(_el$, "class", _p$.e = _v$);
-      _p$.t = style(_el$, _v$2, _p$.t);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined
-    });
-    return _el$;
-  })();
+  return ssr(_tmpl$$6, ssrHydrationKey(), ssrAttribute("class", escape(props.class, true), false), ssrStyle({
+    ...commonStyle,
+    ...props.style
+  }));
 };
 
 /**
@@ -6127,68 +4828,34 @@ function radToDeg(radian) {
   return radian / Math.PI * 180;
 }
 
-var _tmpl$$5 = /*#__PURE__*/template(`<svg viewBox="0 0 1000 1000"xmlns=http://www.w3.org/2000/svg><path fill=black stroke-width=50 stroke=white d="M 100,700 l 210,-150 v 105 Q 700,700 655,310 h -105 L 700,100 l 150,210 h -105 Q 745,745 310,745 v 105 L 100,700">`);
+var _tmpl$$5 = ["<path fill=\"black\" stroke-width=\"50\" stroke=\"white\" d=\"", "\"></path>"];
 const RotateArrowSvg = props => {
-  return (() => {
-    var _el$ = _tmpl$$5();
-      _el$.firstChild;
-    spread(_el$, mergeProps$1(props, {
-      get style() {
-        return {
-          ...commonStyle,
-          ...props.style
-        };
-      }
-    }), true, true);
-    return _el$;
-  })();
+  const startX = 100;
+  const startY = 700;
+  const arrowWidth = 300;
+  const halfArrowWidth = arrowWidth / 2;
+  const arrowLength = arrowWidth * 0.7;
+  const curveWidth = arrowWidth * 0.3;
+  const halfCurveWidth = curveWidth / 2;
+  return ssrElement("svg", mergeProps$1({
+    viewBox: "0 0 1000 1000",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    get style() {
+      return {
+        ...commonStyle,
+        ...props.style
+      };
+    }
+  }), () => ssr(_tmpl$$5, `M ${escape(startX, true)},${escape(startY, true)} l ${escape(arrowLength, true)},${-halfArrowWidth} v ${escape(halfArrowWidth, true) - escape(halfCurveWidth, true)} Q ${escape(startY, true)},${escape(startY, true)} ${escape(startY, true) - escape(halfCurveWidth, true)},${escape(startX, true) + escape(arrowLength, true)} h ${escape(halfCurveWidth, true) - escape(halfArrowWidth, true)} L ${escape(startY, true)},${escape(startX, true)} l ${escape(halfArrowWidth, true)},${escape(arrowLength, true)} h ${escape(halfCurveWidth, true) - escape(halfArrowWidth, true)} Q ${escape(startY, true) + escape(halfCurveWidth, true)},${escape(startY, true) + escape(halfCurveWidth, true)} ${escape(startX, true) + escape(arrowLength, true)},${escape(startY, true) + escape(halfCurveWidth, true)} v ${escape(halfArrowWidth, true) - escape(halfCurveWidth, true)} L ${escape(startX, true)},${escape(startY, true)}`), true);
 };
 
-var _tmpl$$4 = /*#__PURE__*/template(`<svg viewBox="0 0 26 26"version=1.1 xmlns=http://www.w3.org/2000/svg><line x1=50% x2=50% y2=100% stroke-width=3></line><line x1=50% x2=50% y2=100% stroke-width=1></line><line x1=100% y1=50% y2=50% stroke-width=3></line><line x1=100% y1=50% y2=50% stroke-width=1></line><circle cx=50% cy=50% r=32.7% fill=none stroke-width=3></circle><circle cx=50% cy=50% r=32.7% fill=none stroke-width=1>`);
+var _tmpl$$4 = ["<svg", " viewBox=\"0 0 26 26\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"", " style=\"", "\"><line x1=\"50%\" x2=\"50%\" y2=\"100%\" stroke-width=\"3\"", "></line><line x1=\"50%\" x2=\"50%\" y2=\"100%\" stroke-width=\"1\"", "></line><line x1=\"100%\" y1=\"50%\" y2=\"50%\" stroke-width=\"3\"", "></line><line x1=\"100%\" y1=\"50%\" y2=\"50%\" stroke-width=\"1\"", "></line><circle cx=\"50%\" cy=\"50%\" r=\"32.7%\" fill=\"none\" stroke-width=\"3\"", "></circle><circle cx=\"50%\" cy=\"50%\" r=\"32.7%\" fill=\"none\" stroke-width=\"1\"", "></circle></svg>"];
 const CrosshairSvg = props => {
-  return (() => {
-    var _el$ = _tmpl$$4(),
-      _el$2 = _el$.firstChild,
-      _el$3 = _el$2.nextSibling,
-      _el$4 = _el$3.nextSibling,
-      _el$5 = _el$4.nextSibling,
-      _el$6 = _el$5.nextSibling,
-      _el$7 = _el$6.nextSibling;
-    var _ref$ = props.ref;
-    typeof _ref$ === "function" ? use(_ref$, _el$) : props.ref = _el$;
-    effect(_p$ => {
-      var _v$ = props.class,
-        _v$2 = {
-          ...commonStyle,
-          ...props.style
-        },
-        _v$3 = props.outerColor,
-        _v$4 = props.innerColor,
-        _v$5 = props.outerColor,
-        _v$6 = props.innerColor,
-        _v$7 = props.outerColor,
-        _v$8 = props.innerColor;
-      _v$ !== _p$.e && setAttribute(_el$, "class", _p$.e = _v$);
-      _p$.t = style(_el$, _v$2, _p$.t);
-      _v$3 !== _p$.a && setAttribute(_el$2, "stroke", _p$.a = _v$3);
-      _v$4 !== _p$.o && setAttribute(_el$3, "stroke", _p$.o = _v$4);
-      _v$5 !== _p$.i && setAttribute(_el$4, "stroke", _p$.i = _v$5);
-      _v$6 !== _p$.n && setAttribute(_el$5, "stroke", _p$.n = _v$6);
-      _v$7 !== _p$.s && setAttribute(_el$6, "stroke", _p$.s = _v$7);
-      _v$8 !== _p$.h && setAttribute(_el$7, "stroke", _p$.h = _v$8);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined,
-      a: undefined,
-      o: undefined,
-      i: undefined,
-      n: undefined,
-      s: undefined,
-      h: undefined
-    });
-    return _el$;
-  })();
+  return ssr(_tmpl$$4, ssrHydrationKey(), ssrAttribute("class", escape(props.class, true), false), ssrStyle({
+    ...commonStyle,
+    ...props.style
+  }), ssrAttribute("stroke", escape(props.outerColor, true), false), ssrAttribute("stroke", escape(props.innerColor, true), false), ssrAttribute("stroke", escape(props.outerColor, true), false), ssrAttribute("stroke", escape(props.innerColor, true), false), ssrAttribute("stroke", escape(props.outerColor, true), false), ssrAttribute("stroke", escape(props.innerColor, true), false));
 };
 
 /**
@@ -6201,17 +4868,12 @@ function subDOMPoint(a, b) {
   return new DOMPoint(a.x - b.x, a.y - b.y);
 }
 
-var _tmpl$$3 = /*#__PURE__*/template(`<svg><foreignObject class=overflow-visible></svg>`, false, true, false),
-  _tmpl$2$2 = /*#__PURE__*/template(`<svg><path class=pointer-events-initial opacity=0>`),
-  _tmpl$3$2 = /*#__PURE__*/template(`<svg><path stroke=var(--ant-color-primary) stroke-width=1></svg>`, false, true, false),
-  _tmpl$4$2 = /*#__PURE__*/template(`<svg><path class="pointer-events-initial cursor-none"opacity=0 stroke=var(--ant-color-primary) stroke-width=3></svg>`, false, true, false),
-  _tmpl$5$2 = /*#__PURE__*/template(`<svg><path class="pointer-events-initial cursor-none"opacity=0 fill=red></svg>`, false, true, false),
-  _tmpl$6$1 = /*#__PURE__*/template(`<svg><path class="pointer-events-initial cursor-none"fill=var(--ant-color-white) stroke=var(--ant-color-primary)></svg>`, false, true, false),
-  _tmpl$7 = /*#__PURE__*/template(`<svg><path class="pointer-events-initial cursor-none"opacity=0 fill=blue></svg>`, false, true, false);
+var _tmpl$$3 = ["<foreignObject", " class=\"overflow-visible\">", "</foreignObject>"],
+  _tmpl$2$2 = ["<svg", "><path class=\"pointer-events-initial\"", " opacity=\"0\"></path><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></svg>"],
+  _tmpl$3$2 = ["<path", " d=\"", "\" stroke=\"var(--ant-color-primary)\" stroke-width=\"1\"></path>"];
 // 判断是否鼠标左键触发
 const isMainButton = e => e.button === 0;
 const Transformer = props => {
-  let ref;
   const adsorbGap = createMemo(() => props.adsorb ? props.adsorb.gap ?? 5 : 0);
   const getTransform = (value, transformOrigin) => new DOMMatrix().translate(value.x, value.y).translate(transformOrigin.x, transformOrigin.y).rotate(value.rotate).translate(-transformOrigin.x, -transformOrigin.y);
   const [_value, setValue] = createControllableValue(props);
@@ -6238,10 +4900,6 @@ const Transformer = props => {
     return point.matrixTransform(getTransform(transformValue, transformOrigin));
   };
   const worldToParent = point => {
-    if (ref) {
-      const rect = ref.getBoundingClientRect();
-      point = new DOMPoint(point.x - rect.x, point.y - rect.y);
-    }
     if (props.worldToParentPoint) return props.worldToParentPoint(point);
     return point;
   };
@@ -6578,16 +5236,9 @@ const Transformer = props => {
     return [x, y, width, height].join(' ');
   });
   return createComponent(Element$1, {
-    ref(r$) {
-      var _ref$ = ref;
-      typeof _ref$ === "function" ? _ref$(r$) : ref = r$;
-    },
     "class": "relative",
     get children() {
-      var _el$ = _tmpl$2$2(),
-        _el$2 = _el$.firstChild;
-      _el$2.$$mousedown = onMoveMouseDown;
-      insert(_el$, createComponent(Edge, {
+      return ssr(_tmpl$2$2, ssrHydrationKey() + ssrAttribute("class", escape(cs('absolute pointer-events-none', !props.viewBox && 'overflow-visible w-1px h-1px'), true), false) + ssrAttribute("viewBox", escape(viewBoxStr(), true), false), ssrAttribute("d", escape(pathD(), true), false), escape(createComponent(Edge, {
         direction: "top",
         get layout() {
           return layoutInWorld();
@@ -6596,8 +5247,7 @@ const Transformer = props => {
           return layoutInWorld().yCenterLine;
         },
         getResizeHandlerProps: getResizeHandlerProps
-      }), null);
-      insert(_el$, createComponent(Edge, {
+      })), escape(createComponent(Edge, {
         direction: "bottom",
         get layout() {
           return layoutInWorld();
@@ -6606,8 +5256,7 @@ const Transformer = props => {
           return layoutInWorld().yCenterLine;
         },
         getResizeHandlerProps: getResizeHandlerProps
-      }), null);
-      insert(_el$, createComponent(Edge, {
+      })), escape(createComponent(Edge, {
         direction: "left",
         get layout() {
           return layoutInWorld();
@@ -6616,8 +5265,7 @@ const Transformer = props => {
           return layoutInWorld().xCenterLine;
         },
         getResizeHandlerProps: getResizeHandlerProps
-      }), null);
-      insert(_el$, createComponent(Edge, {
+      })), escape(createComponent(Edge, {
         direction: "right",
         get layout() {
           return layoutInWorld();
@@ -6626,8 +5274,7 @@ const Transformer = props => {
           return layoutInWorld().xCenterLine;
         },
         getResizeHandlerProps: getResizeHandlerProps
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return layoutInWorld().topLeftPoint instanceof DOMPoint;
         },
@@ -6641,8 +5288,7 @@ const Transformer = props => {
             getRotateHandlerProps: getRotateHandlerProps
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return layoutInWorld().topRightPoint instanceof DOMPoint;
         },
@@ -6656,8 +5302,7 @@ const Transformer = props => {
             getRotateHandlerProps: getRotateHandlerProps
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return layoutInWorld().bottomLeftPoint instanceof DOMPoint;
         },
@@ -6671,8 +5316,7 @@ const Transformer = props => {
             getRotateHandlerProps: getRotateHandlerProps
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return layoutInWorld().bottomRightPoint instanceof DOMPoint;
         },
@@ -6686,8 +5330,7 @@ const Transformer = props => {
             getRotateHandlerProps: getRotateHandlerProps
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return adsorbLine()?.top;
         },
@@ -6699,8 +5342,7 @@ const Transformer = props => {
             }
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return adsorbLine()?.bottom;
         },
@@ -6712,8 +5354,7 @@ const Transformer = props => {
             }
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return adsorbLine()?.left;
         },
@@ -6725,8 +5366,7 @@ const Transformer = props => {
             }
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return adsorbLine()?.right;
         },
@@ -6738,8 +5378,7 @@ const Transformer = props => {
             }
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return adsorbLine()?.centerX;
         },
@@ -6750,8 +5389,7 @@ const Transformer = props => {
             }
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return adsorbLine()?.centerY;
         },
@@ -6762,14 +5400,12 @@ const Transformer = props => {
             }
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
-          return memo(() => !!props.transformOriginIcon)() && transformOrigin();
+          return props.transformOriginIcon && transformOrigin();
         },
         get children() {
-          var _el$3 = _tmpl$$3();
-          insert(_el$3, createComponent(CrosshairSvg, {
+          return ssr(_tmpl$$3, ssrHydrationKey(), escape(createComponent(CrosshairSvg, {
             "class": "absolute [font-size:var(--size)] text-black pointer-events-none",
             get style() {
               return {
@@ -6780,13 +5416,11 @@ const Transformer = props => {
             },
             innerColor: "white",
             outerColor: "black"
-          }));
-          return _el$3;
+          })));
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
-          return memo(() => !!!resizeDirection())() && rotateDirection();
+          return !resizeDirection() && rotateDirection();
         },
         get children() {
           return createComponent(Portal, {
@@ -6804,8 +5438,7 @@ const Transformer = props => {
             }
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return resizeDirection();
         },
@@ -6825,21 +5458,7 @@ const Transformer = props => {
             }
           });
         }
-      }), null);
-      effect(_p$ => {
-        var _v$ = cs('absolute pointer-events-none', !props.viewBox && 'overflow-visible w-1px h-1px'),
-          _v$2 = viewBoxStr(),
-          _v$3 = pathD();
-        _v$ !== _p$.e && setAttribute(_el$, "class", _p$.e = _v$);
-        _v$2 !== _p$.t && setAttribute(_el$, "viewBox", _p$.t = _v$2);
-        _v$3 !== _p$.a && setAttribute(_el$2, "d", _p$.a = _v$3);
-        return _p$;
-      }, {
-        e: undefined,
-        t: undefined,
-        a: undefined
-      });
-      return _el$;
+      })));
     }
   });
 };
@@ -6880,19 +5499,15 @@ const Edge = props => {
     }
     return getAngleOfDOMPoint(subDOMPoint(endPoint(), startPoint()));
   };
-  return [(() => {
-    var _el$4 = _tmpl$3$2();
-    effect(() => setAttribute(_el$4, "d", `M ${startPoint().x},${startPoint().y} L ${endPoint().x},${endPoint().y}`));
-    return _el$4;
-  })(), (() => {
-    var _el$5 = _tmpl$4$2();
-    spread(_el$5, mergeProps$1({
-      get d() {
-        return `M ${startPoint().x},${startPoint().y} L ${endPoint().x},${endPoint().y}`;
-      }
-    }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), true, false);
-    return _el$5;
-  })()];
+  return [ssr(_tmpl$3$2, ssrHydrationKey(), `M ${escape(startPoint().x, true)},${escape(startPoint().y, true)} L ${escape(endPoint().x, true)},${escape(endPoint().y, true)}`), ssrElement("path", mergeProps$1({
+    "class": "pointer-events-initial cursor-none",
+    get d() {
+      return `M ${startPoint().x},${startPoint().y} L ${endPoint().x},${endPoint().y}`;
+    },
+    opacity: 0,
+    stroke: "var(--ant-color-primary)",
+    "stroke-width": 3
+  }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), undefined, true)];
 };
 const Vertex = props => {
   const prevPoint = createMemo(() => {
@@ -7005,31 +5620,28 @@ const Vertex = props => {
     }
     return centerAngle() + Math.PI / 2;
   };
-  return [(() => {
-    var _el$6 = _tmpl$5$2();
-    spread(_el$6, mergeProps$1({
-      get d() {
-        return layoutToPathD(rotateLayout());
-      }
-    }, () => props.getRotateHandlerProps(props.direction, getMouseRotate)), true, false);
-    return _el$6;
-  })(), (() => {
-    var _el$7 = _tmpl$6$1();
-    spread(_el$7, mergeProps$1({
-      get d() {
-        return layoutToPathD(displayLayout());
-      }
-    }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), true, false);
-    return _el$7;
-  })(), (() => {
-    var _el$8 = _tmpl$7();
-    spread(_el$8, mergeProps$1({
-      get d() {
-        return layoutToPathD(reseizLayout());
-      }
-    }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), true, false);
-    return _el$8;
-  })()];
+  return [ssrElement("path", mergeProps$1({
+    "class": "pointer-events-initial cursor-none",
+    get d() {
+      return layoutToPathD(rotateLayout());
+    },
+    opacity: 0,
+    fill: "red"
+  }, () => props.getRotateHandlerProps(props.direction, getMouseRotate)), undefined, true), ssrElement("path", mergeProps$1({
+    "class": "pointer-events-initial cursor-none",
+    get d() {
+      return layoutToPathD(displayLayout());
+    },
+    fill: "var(--ant-color-white)",
+    stroke: "var(--ant-color-primary)"
+  }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), undefined, true), ssrElement("path", mergeProps$1({
+    "class": "pointer-events-initial cursor-none",
+    get d() {
+      return layoutToPathD(reseizLayout());
+    },
+    opacity: 0,
+    fill: "blue"
+  }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), undefined, true)];
 };
 const ParentEdge = props => {
   const startPoint = createMemo(() => {
@@ -7052,27 +5664,19 @@ const ParentEdge = props => {
     }[props.direction];
     return (Array.isArray(p) ? p[0] : p) ?? new DOMPoint();
   });
-  return (() => {
-    var _el$9 = _tmpl$3$2();
-    effect(() => setAttribute(_el$9, "d", `M ${startPoint().x},${startPoint().y} L ${endPoint().x},${endPoint().y}`));
-    return _el$9;
-  })();
+  return ssr(_tmpl$3$2, ssrHydrationKey(), `M ${escape(startPoint().x, true)},${escape(startPoint().y, true)} L ${escape(endPoint().x, true)},${escape(endPoint().y, true)}`);
 };
 const ParentCenterLine = props => {
-  return memo(() => memo(() => !!props.line)() ? (() => {
-    var _el$10 = _tmpl$3$2();
-    effect(() => setAttribute(_el$10, "d", `M ${props.line[0].x},${props.line[0].y} L ${props.line[1].x},${props.line[1].y}`));
-    return _el$10;
-  })() : null);
+  return props.line ? ssr(_tmpl$3$2, ssrHydrationKey(), `M ${escape(props.line[0].x, true)},${escape(props.line[0].y, true)} L ${escape(props.line[1].x, true)},${escape(props.line[1].y, true)}`) : null;
 };
-delegateEvents(["mousedown"]);
 
-var _tmpl$$2 = /*#__PURE__*/template(`<div class="h-1px bg-[var(--ant-color-split)] my-[var(--ant-margin-xxs)]">`),
-  _tmpl$2$1 = /*#__PURE__*/template(`<div><div>`),
-  _tmpl$3$1 = /*#__PURE__*/template(`<div>`),
-  _tmpl$4$1 = /*#__PURE__*/template(`<span class="i-ant-design:right-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2">`),
-  _tmpl$5$1 = /*#__PURE__*/template(`<span class="i-ant-design:up-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2">`),
-  _tmpl$6 = /*#__PURE__*/template(`<span class="i-ant-design:down-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2">`);
+var _tmpl$$2 = ["<div", " class=\"h-1px bg-[var(--ant-color-split)] my-[var(--ant-margin-xxs)]\"></div>"],
+  _tmpl$2$1 = ["<div", "><div", " style=\"", "\"><!--$-->", "<!--/--><!--$-->", "<!--/--></div></div>"],
+  _tmpl$3$1 = ["<div", " style=\"", "\">", "</div>"],
+  _tmpl$4$1 = ["<div", "><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"],
+  _tmpl$5$1 = ["<span", " class=\"i-ant-design:right-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2\"></span>"],
+  _tmpl$6 = ["<span", " class=\"i-ant-design:up-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2\"></span>"],
+  _tmpl$7 = ["<span", " class=\"i-ant-design:down-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2\"></span>"];
 function isMenuDividerType(value) {
   return value.type === 'divider';
 }
@@ -7082,54 +5686,18 @@ function InternalMenu(props) {
       return props.items;
     },
     children: item => {
-      if (isMenuDividerType(item)) return _tmpl$$2();
+      if (isMenuDividerType(item)) return ssr(_tmpl$$2, ssrHydrationKey());
       const keyPath = createMemo(() => [...(props.parentKeys ?? []), item.key]);
       const expanded = createMemo(() => props.expandedKeys?.includes(item.key));
       const hasChildren = createMemo(() => !isEmpty(item.children));
-      const getLabel = options => (() => {
-        var _el$2 = _tmpl$2$1(),
-          _el$3 = _el$2.firstChild;
-        _el$3.$$click = () => {
-          options?.onClick?.();
-          if (!hasChildren()) {
-            const info = {
-              key: item.key,
-              keyPath: keyPath()
-            };
-            item.onClick?.(info);
-            props.onClick?.(info);
-            if (props.selectable) {
-              props.onSelect?.({
-                ...info,
-                selectedKeys: [item.key]
-              });
-            }
-          }
-        };
-        insert(_el$3, () => unwrapStringOrJSXElement(item.label), null);
-        insert(_el$3, createComponent(Show, {
-          get when() {
-            return hasChildren();
-          },
-          get children() {
-            return options?.expandIcon;
-          }
-        }), null);
-        effect(_p$ => {
-          var _v$ = cs(item.disabled && 'cursor-not-allowed'),
-            _v$2 = cs('relative rounded-[var(--ant-border-radius-lg)] cursor-pointer flex items-center m-[--ant-menu-item-margin] min-h-[--ant-menu-item-height]', item.disabled ? 'text-[--ant-color-text-disabled]' : props.selectedKeys.includes(item.key) ? 'bg-[--ant-control-item-bg-active] text-[--ant-color-primary]' : 'text-[--ant-color-text] hover:bg-[var(--ant-color-bg-text-hover)]', !hasChildren() ? ['px-[--ant-padding-sm]', props.selectable && 'active:bg-[var(--ant-control-item-bg-active)]'] : 'pl-[var(--ant-padding)] pr-[calc(var(--ant-padding)+0.7em+var(--ant-margin-xs))]', item.disabled && 'pointer-events-none'),
-            _v$3 = props.mode === 'inline' ? `calc(${keyPath().length} * var(--ant-padding))` : undefined;
-          _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-          _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
-          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$3.style.setProperty("padding-left", _v$3) : _el$3.style.removeProperty("padding-left"));
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined,
-          a: undefined
-        });
-        return _el$2;
-      })();
+      const getLabel = options => ssr(_tmpl$2$1, ssrHydrationKey() + ssrAttribute("class", escape(cs(item.disabled && 'cursor-not-allowed'), true), false), ssrAttribute("class", escape(cs('relative rounded-[var(--ant-border-radius-lg)] cursor-pointer flex items-center m-[--ant-menu-item-margin] min-h-[--ant-menu-item-height]', item.disabled ? 'text-[--ant-color-text-disabled]' : props.selectedKeys.includes(item.key) ? 'bg-[--ant-control-item-bg-active] text-[--ant-color-primary]' : 'text-[--ant-color-text] hover:bg-[var(--ant-color-bg-text-hover)]', !hasChildren() ? ['px-[--ant-padding-sm]', props.selectable && 'active:bg-[var(--ant-control-item-bg-active)]'] : 'pl-[var(--ant-padding)] pr-[calc(var(--ant-padding)+0.7em+var(--ant-margin-xs))]', item.disabled && 'pointer-events-none'), true), false), "padding-left:" + (props.mode === 'inline' ? `calc(${escape(keyPath().length, true)} * var(--ant-padding))` : escape(undefined, true)), escape(unwrapStringOrJSXElement(item.label)), escape(createComponent(Show, {
+        get when() {
+          return hasChildren();
+        },
+        get children() {
+          return options?.expandIcon;
+        }
+      })));
       return createComponent(Show, {
         get when() {
           return hasChildren();
@@ -7160,38 +5728,24 @@ function InternalMenu(props) {
                     },
                     placement: "rightTop",
                     arrow: false,
-                    content: () => (() => {
-                      var _el$6 = _tmpl$3$1();
-                      insert(_el$6, createComponent(InternalMenu, mergeProps$1(props, {
-                        get items() {
-                          return item.children;
-                        },
-                        get parentKeys() {
-                          return keyPath();
-                        },
-                        onClick: info => {
-                          props.onExpandedKeysChange([]);
-                          props.onClick?.(info);
-                        }
-                      })));
-                      effect(_p$ => {
-                        var _v$4 = props.class,
-                          _v$5 = props.style;
-                        _v$4 !== _p$.e && className(_el$6, _p$.e = _v$4);
-                        _p$.t = style(_el$6, _v$5, _p$.t);
-                        return _p$;
-                      }, {
-                        e: undefined,
-                        t: undefined
-                      });
-                      return _el$6;
-                    })(),
+                    content: () => ssr(_tmpl$3$1, ssrHydrationKey() + ssrAttribute("class", escape(props.class, true), false), ssrStyle(props.style), escape(createComponent(InternalMenu, mergeProps$1(props, {
+                      get items() {
+                        return item.children;
+                      },
+                      get parentKeys() {
+                        return keyPath();
+                      },
+                      onClick: info => {
+                        props.onExpandedKeysChange([]);
+                        props.onClick?.(info);
+                      }
+                    })))),
                     contentStyle: {
                       padding: 0
                     },
                     get children() {
                       return getLabel({
-                        expandIcon: _tmpl$4$1()
+                        expandIcon: ssr(_tmpl$5$1, ssrHydrationKey())
                       });
                     }
                   });
@@ -7201,8 +5755,7 @@ function InternalMenu(props) {
                   return props.mode === 'inline';
                 },
                 get children() {
-                  var _el$4 = _tmpl$3$1();
-                  insert(_el$4, () => getLabel({
+                  return ssr(_tmpl$4$1, ssrHydrationKey(), escape(getLabel({
                     onClick() {
                       if (hasChildren()) {
                         if (expanded()) {
@@ -7217,32 +5770,27 @@ function InternalMenu(props) {
                         return expanded();
                       },
                       get fallback() {
-                        return _tmpl$6();
+                        return ssr(_tmpl$7, ssrHydrationKey());
                       },
                       get children() {
-                        return _tmpl$5$1();
+                        return ssr(_tmpl$6, ssrHydrationKey());
                       }
                     })
-                  }), null);
-                  insert(_el$4, createComponent(DelayShow, {
+                  })), escape(createComponent(DelayShow, {
                     get when() {
                       return expanded();
                     },
                     get children() {
-                      var _el$5 = _tmpl$3$1();
-                      insert(_el$5, createComponent(InternalMenu, mergeProps$1(props, {
+                      return ssr(_tmpl$3$1, ssrHydrationKey(), "display:" + (expanded() ? "block" : "none"), escape(createComponent(InternalMenu, mergeProps$1(props, {
                         get items() {
                           return item.children;
                         },
                         get parentKeys() {
                           return keyPath();
                         }
-                      })));
-                      effect(_$p => (_$p = expanded() ? 'block' : 'none') != null ? _el$5.style.setProperty("display", _$p) : _el$5.style.removeProperty("display"));
-                      return _el$5;
+                      }))));
                     }
-                  }), null);
-                  return _el$4;
+                  })));
                 }
               })];
             }
@@ -7252,7 +5800,6 @@ function InternalMenu(props) {
     }
   });
 }
-delegateEvents(["click"]);
 
 function Menu(_props) {
   const props = mergeProps({
@@ -7350,7 +5897,7 @@ const Dropdown = _props => {
   }));
 };
 
-var _tmpl$$1 = /*#__PURE__*/template(`<span class="absolute pointer-events-none z-2000">`);
+var _tmpl$$1 = ["<span", " class=\"absolute pointer-events-none z-2000\" style=\"", "\">", "</span>"];
 const Cursor = props => {
   const resolvedChildren = children(() => props.children);
   const [hover, setHover] = createSignal(false);
@@ -7398,19 +5945,7 @@ const Cursor = props => {
     get children() {
       return createComponent(Portal, {
         get children() {
-          var _el$ = _tmpl$$1();
-          insert(_el$, () => props.cursor);
-          effect(_p$ => {
-            var _v$ = `${cursorPosition().y}px`,
-              _v$2 = `${cursorPosition().x}px`;
-            _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("top", _v$) : _el$.style.removeProperty("top"));
-            _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("left", _v$2) : _el$.style.removeProperty("left"));
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined
-          });
-          return _el$;
+          return ssr(_tmpl$$1, ssrHydrationKey(), "top:" + `${escape(cursorPosition().y, true)}px` + (";left:" + `${escape(cursorPosition().x, true)}px`), escape(props.cursor));
         }
       });
     }
@@ -7421,7 +5956,7 @@ function Space(props) {
   return createComponent(Element$1, {
     get children() {
       return createComponent(For, mergeProps$1(props, {
-        children: (item, index) => [memo(() => memo(() => index() !== 0)() && unwrapStringOrJSXElement(props.split)), memo(() => props.children(item, index))]
+        children: (item, index) => [index() !== 0 && unwrapStringOrJSXElement(props.split), props.children(item, index)]
       }));
     }
   });
@@ -7466,9 +6001,6 @@ const CodeInput = _props => {
             unset(inputRefDict, item);
           });
           return createComponent(Input, {
-            ref: el => {
-              inputRefDict[item] = el;
-            },
             "class": "!w-32px !text-center",
             get value() {
               return value()[item];
@@ -7490,11 +6022,11 @@ const CodeInput = _props => {
   });
 };
 
-var _tmpl$ = /*#__PURE__*/template(`<div>`),
-  _tmpl$2 = /*#__PURE__*/template(`<span class="i-ant-design:info-circle-filled text-[--ant-color-primary] text-18px">`),
-  _tmpl$3 = /*#__PURE__*/template(`<span class="i-ant-design:check-circle-filled text-[--ant-color-success] text-18px">`),
-  _tmpl$4 = /*#__PURE__*/template(`<span class="i-ant-design:close-circle-filled text-[--ant-color-error] text-18px">`),
-  _tmpl$5 = /*#__PURE__*/template(`<span class="i-ant-design:exclamation-circle-filled text-[--ant-color-warning] text-18px">`);
+var _tmpl$ = ["<div", ">", "</div>"],
+  _tmpl$2 = ["<span", " class=\"i-ant-design:info-circle-filled text-[--ant-color-primary] text-18px\"></span>"],
+  _tmpl$3 = ["<span", " class=\"i-ant-design:check-circle-filled text-[--ant-color-success] text-18px\"></span>"],
+  _tmpl$4 = ["<span", " class=\"i-ant-design:close-circle-filled text-[--ant-color-error] text-18px\"></span>"],
+  _tmpl$5 = ["<span", " class=\"i-ant-design:exclamation-circle-filled text-[--ant-color-warning] text-18px\"></span>"];
 const Message = props => {
   onMount(() => {
     const duration = props.duration ?? 3;
@@ -7510,11 +6042,7 @@ const Message = props => {
       '--ant-message-content-padding': '9px 12px'
     },
     get children() {
-      return [memo(() => memo(() => props.type === 'info')() && _tmpl$2()), memo(() => memo(() => props.type === 'success')() && _tmpl$3()), memo(() => memo(() => props.type === 'error')() && _tmpl$4()), memo(() => memo(() => props.type === 'warning')() && _tmpl$5()), (() => {
-        var _el$ = _tmpl$();
-        insert(_el$, () => props.content);
-        return _el$;
-      })()];
+      return [props.type === 'info' && ssr(_tmpl$2, ssrHydrationKey()), props.type === 'success' && ssr(_tmpl$3, ssrHydrationKey()), props.type === 'error' && ssr(_tmpl$4, ssrHydrationKey()), props.type === 'warning' && ssr(_tmpl$5, ssrHydrationKey()), ssr(_tmpl$, ssrHydrationKey(), escape(props.content))];
     }
   });
 };
@@ -7800,7 +6328,7 @@ const ContextMenuCommand = Command.createCommand(props => {
   const [, menuProps] = splitProps(props, ['x', 'y']);
   const [reverse, setReverse] = createSignal(false);
   createEffect(() => {
-    setReverse(props.y + (ref?.clientHeight ?? 0) + offsetY > window.innerHeight);
+    setReverse(props.y + (0) + offsetY > window.innerHeight);
   });
   const {
     dispose
@@ -7824,10 +6352,6 @@ const ContextMenuCommand = Command.createCommand(props => {
     abortController.abort();
   });
   return createComponent(Element$1, {
-    ref(r$) {
-      var _ref$ = ref;
-      typeof _ref$ === "function" ? _ref$(r$) : ref = r$;
-    },
     "class": "z-1000 fixed left-0 top-0 [font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)] bg-[--ant-color-bg-container-tertiary] rounded-[var(--ant-border-radius)]",
     get style() {
       return {
@@ -7923,7 +6447,7 @@ const ConfigProvider = _props => {
 ConfigProvider.useConfig = useConfig;
 
 const Fragment = props => {
-  return memo(() => props.children);
+  return props.children;
 };
 
 function TreeFor(props) {
@@ -7966,9 +6490,9 @@ function TreeFor(props) {
         onChildChange: props.onChildChange
       };
       const isExpanded = createMemo(() => props.expanded ? props.expanded(item, options) : true);
-      return [memo(() => props.children(item, options)), createComponent(Show, {
+      return [props.children(item, options), createComponent(Show, {
         get when() {
-          return memo(() => !!isParent())() && isExpanded();
+          return isParent() && isExpanded();
         },
         get children() {
           return createComponent(TreeFor, {