weifuwu 0.38.2 → 0.40.0

package/dist/components/index.js

@@ -1,5 +1,6 @@
 // src/client/vnode.ts
 var Fragment = /* @__PURE__ */ Symbol("Fragment");
+var Portal = /* @__PURE__ */ Symbol("Portal");
 function h(type, props, ...children) {
   const p = normalizeProps(props ?? {});
   if (children.length > 0) {
@@ -16,9 +17,16 @@ function normalizeProps(props) {
   }
   return result;
 }
+function createPortal(children, portalKey) {
+  return {
+    type: Portal,
+    props: { children, portalKey },
+    key: portalKey ?? void 0
+  };
+}
 
 // src/components/Button/Button.ts
-var Button = (props, ctx) => {
+var Button = (_init, ctx) => (props) => {
   const { variant = "primary", size = "md", block, loading, disabled, type, onClick, children } = props;
   const cls = [
     "wf-btn",
@@ -38,7 +46,7 @@ var Button = (props, ctx) => {
 };
 
 // src/components/Input/Input.ts
-var Input = (props) => {
+var Input = (_init) => (props) => {
   const { label, type = "text", value, placeholder, required, disabled, error, hint, onInput, onChange } = props;
   const inputEl = h("input", {
     class: "wf-input",
@@ -64,7 +72,7 @@ var Input = (props) => {
 };
 
 // src/components/Textarea/Textarea.ts
-var Textarea = (props, _ctx) => {
+var Textarea = (_init, _ctx) => (props) => {
   const { label, value, placeholder, required, disabled, error, hint, rows = 3, onInput } = props;
   const textareaEl = h("textarea", {
     class: "wf-textarea",
@@ -88,7 +96,7 @@ var Textarea = (props, _ctx) => {
 };
 
 // src/components/Select/Select.ts
-var Select = (props, _ctx) => {
+var Select = (_init, _ctx) => (props) => {
   const { label, value, options, placeholder, required, disabled, error, onChange, children } = props;
   const optionEls = [];
   if (placeholder) {
@@ -118,7 +126,7 @@ var Select = (props, _ctx) => {
 };
 
 // src/components/Checkbox/Checkbox.ts
-var Checkbox = (props, _ctx) => {
+var Checkbox = (_init, _ctx) => (props) => {
   const { label, checked, disabled, onChange } = props;
   const input = h("input", {
     type: "checkbox",
@@ -137,7 +145,7 @@ var Checkbox = (props, _ctx) => {
 };
 
 // src/components/Switch/Switch.ts
-var Switch = (props, ctx) => {
+var Switch = (_init, ctx) => (props) => {
   const { label, checked, disabled, onChange } = props;
   const input = h("input", {
     type: "checkbox",
@@ -159,7 +167,7 @@ var Switch = (props, ctx) => {
 };
 
 // src/components/RadioGroup/RadioGroup.ts
-var RadioGroup = (props, _ctx) => {
+var RadioGroup = (_init, _ctx) => (props) => {
   const { name, value, options = [], inline, onChange } = props;
   const radios = options.map((opt) => {
     const input = h("input", {
@@ -184,7 +192,7 @@ var RadioGroup = (props, _ctx) => {
 };
 
 // src/components/Table/Table.ts
-var Table = (props, _ctx) => {
+var Table = (_init, _ctx) => (props) => {
   const { data = [], columns, onRowClick } = props;
   const headerCells = columns.map(
     (col) => h("th", {
@@ -281,69 +289,51 @@ function trapFocus(container) {
 }
 
 // src/components/Modal/Modal.ts
-var Modal = (props, ctx) => {
-  const { open, title, onClose, children, footer } = props;
-  const $ = ctx.ui.$;
-  if (!ctx.ui.ready) {
-    $.exiting = false;
-    $.prevOpen = open;
-  }
-  if ($.prevOpen !== open) {
-    $.prevOpen = open;
-    if (open && $.exiting) $.exiting = false;
-  }
-  const startClose = () => {
-    $.exiting = true;
-  };
-  const onExitEnd = () => {
-    $.exiting = false;
-    onClose?.();
-  };
-  if (!open && !$.exiting) return null;
-  const isClosing = $.exiting;
-  const handleKeyDown = (e) => {
-    if (e.key === "Escape" && !isClosing) startClose();
-  };
-  const modalRef = (el) => {
-    if (!el) return;
+var Modal = (_props, ctx) => {
+  let prevOpen;
+  ctx.ui.onmounted((el) => {
     lockScroll();
     const cleanupFocus = trapFocus(el);
     return () => {
       unlockScroll();
       cleanupFocus();
     };
-  };
-  const overlay = h("div", {
-    class: "wf-modal-overlay",
-    onClick: isClosing ? void 0 : startClose
   });
-  const closeBtn = h("button", {
-    class: "wf-modal-close",
-    onClick: isClosing ? void 0 : startClose,
-    type: "button"
-  }, "\u2715");
-  const titleEl = title ? h("div", { class: "wf-modal-header" }, [title, closeBtn]) : null;
-  const bodyEl = h("div", { class: "wf-modal-body" }, children);
-  const footerEl = footer ? h("div", { class: "wf-modal-footer" }, footer) : null;
-  const content = h("div", {
-    class: "wf-modal-content",
-    onClick: (e) => e.stopPropagation()
-  }, [titleEl, bodyEl, footerEl].filter(Boolean));
-  const ML = ctx?.i18n?.components?.Modal ?? {};
-  const cls = isClosing ? "wf-modal wf-modal--exit" : "wf-modal wf-modal--enter";
-  return h("div", {
-    class: cls,
-    role: "dialog",
-    "aria-modal": "true",
-    "aria-label": title ?? (ML.ariaLabel ?? "\u5F39\u7A97"),
-    onKeyDown: handleKeyDown,
-    onAnimationEnd: isClosing ? onExitEnd : void 0,
-    ref: modalRef
-  }, [overlay, content]);
+  return (props) => {
+    const { open, title, onClose, children, footer } = props;
+    const ML = ctx?.i18n?.components?.Modal ?? {};
+    if (prevOpen !== open) {
+      prevOpen = open;
+    }
+    if (!open) return null;
+    const overlay = h("div", {
+      class: "wf-modal-overlay",
+      onClick: onClose
+    });
+    const closeBtn = h("button", {
+      class: "wf-modal-close",
+      onClick: onClose,
+      type: "button"
+    }, "\u2715");
+    const titleEl = title ? h("div", { class: "wf-modal-header" }, [title, closeBtn]) : null;
+    const bodyEl = h("div", { class: "wf-modal-body" }, children);
+    const footerEl = footer ? h("div", { class: "wf-modal-footer" }, footer) : null;
+    const content = h("div", {
+      class: "wf-modal-content",
+      onClick: (e) => e.stopPropagation()
+    }, [titleEl, bodyEl, footerEl].filter(Boolean));
+    const root = h("div", {
+      class: "wf-modal wf-modal--enter",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": title ?? (ML.ariaLabel ?? "\u5F39\u7A97")
+    }, [overlay, content]);
+    return createPortal(root, "modal");
+  };
 };
 
 // src/components/Toast/Toast.ts
-var Toast = (props, _ctx) => {
+var Toast = (_init, ctx) => (props) => {
   const { toasts = [], onRemove } = props;
   if (toasts.length === 0) return null;
   const items = toasts.map(
@@ -356,7 +346,10 @@ var Toast = (props, _ctx) => {
       h("span", { class: "wf-toast-msg" }, t.message)
     ])
   );
-  return h("div", { class: "wf-toast-container" }, items);
+  return createPortal(
+    h("div", { class: "wf-toast-container" }, items),
+    "toast"
+  );
 };
 function iconFor(type) {
   switch (type) {
@@ -372,7 +365,7 @@ function iconFor(type) {
 }
 
 // src/components/Alert/Alert.ts
-var Alert = (props, _ctx) => {
+var Alert = (_init, _ctx) => (props) => {
   const { variant = "info", closable, onClose, children } = props;
   if (!children) return null;
   const icon = h("span", { class: "wf-alert-icon" }, iconFor2(variant));
@@ -394,7 +387,7 @@ function iconFor2(variant) {
 }
 
 // src/components/Loading/Loading.ts
-var Loading = (props, _ctx) => {
+var Loading = (_init, _ctx) => (props) => {
   const { text = "\u52A0\u8F7D\u4E2D..." } = props;
   return h("div", { class: "wf-loading", role: "status", "aria-live": "polite" }, [
     h("div", { class: "wf-loading-spinner" }),
@@ -403,7 +396,7 @@ var Loading = (props, _ctx) => {
 };
 
 // src/components/EmptyState/EmptyState.ts
-var EmptyState = (props, _ctx) => {
+var EmptyState = (_init, _ctx) => (props) => {
   const { icon = "\u{1F4E6}", text = "\u6682\u65E0\u6570\u636E", hint, children } = props;
   const parts = [
     h("div", { class: "wf-empty-icon" }, icon),
@@ -415,7 +408,7 @@ var EmptyState = (props, _ctx) => {
 };
 
 // src/components/Tabs/Tabs.ts
-var Tabs = (props, _ctx) => {
+var Tabs = (_init, _ctx) => (props) => {
   const { items = [], active, onChange } = props;
   if (items.length === 0) return null;
   const activeKey = active ?? items[0].key;
@@ -437,26 +430,42 @@ var Tabs = (props, _ctx) => {
 };
 
 // src/components/Dropdown/Dropdown.ts
-var Dropdown = (props, _ctx) => {
-  const { trigger, items = [], open } = props;
-  const menuItems = items.map(
-    (item, i) => h("button", {
-      class: `wf-dropdown-item${item.variant === "danger" ? " wf-dropdown-item--danger" : ""}`,
-      key: item.value ?? i,
-      disabled: item.disabled || void 0,
-      role: "menuitem",
-      onClick: item.onClick
-    }, item.label)
-  );
-  const menu = open ? h("div", { class: "wf-dropdown-menu", role: "menu" }, menuItems) : null;
-  return h("div", { class: `wf-dropdown${open ? " wf-dropdown--open" : ""}` }, [
-    trigger,
-    menu
-  ].filter(Boolean));
+var Dropdown = (_init, ctx) => {
+  let wrapEl;
+  ctx.ui.onmounted((el) => {
+    wrapEl = el;
+  });
+  return (props) => {
+    const { trigger, items = [], open } = props;
+    const pos = (() => {
+      if (!open) return { top: 0, left: 0 };
+      if (!wrapEl) return { top: 0, left: 0 };
+      const r = wrapEl.getBoundingClientRect();
+      return { top: r.bottom + 4, left: r.left };
+    })();
+    const menuItems = items.map(
+      (item, i) => h("button", {
+        class: `wf-dropdown-item${item.variant === "danger" ? " wf-dropdown-item--danger" : ""}`,
+        key: item.value ?? i,
+        disabled: item.disabled || void 0,
+        role: "menuitem",
+        onClick: item.onClick
+      }, item.label)
+    );
+    const menu = open ? h("div", {
+      class: "wf-dropdown-menu",
+      role: "menu",
+      style: { top: pos.top, left: pos.left }
+    }, menuItems) : null;
+    const portalContent = open ? createPortal(menu, "dropdown") : null;
+    return h("div", {
+      class: `wf-dropdown${open ? " wf-dropdown--open" : ""}`
+    }, [trigger, portalContent].filter(Boolean));
+  };
 };
 
 // src/components/Pagination/Pagination.ts
-var Pagination = (props, ctx) => {
+var Pagination = (_init, ctx) => (props) => {
   const { total, page = 1, pageSize = 20, onChange } = props;
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   if (totalPages <= 1) return null;
@@ -499,7 +508,7 @@ function getPageRange(current, total) {
 }
 
 // src/components/Card/Card.ts
-var Card = (props, _ctx) => {
+var Card = (_init, _ctx) => (props) => {
   const { variant = "default", padding = "md", clickable, onClick, children } = props;
   const cls = [
     "wf-card",
@@ -511,7 +520,7 @@ var Card = (props, _ctx) => {
 };
 
 // src/components/Badge/Badge.ts
-var Badge = (props, _ctx) => {
+var Badge = (_init, _ctx) => (props) => {
   const { variant = "default", dot, children } = props;
   if (dot) {
     return h("span", { class: `wf-badge-dot wf-badge-dot--${variant}` });
@@ -526,7 +535,7 @@ function hashColor(name) {
   for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
   return COLORS[Math.abs(hash) % COLORS.length];
 }
-var Avatar = (props, _ctx) => {
+var Avatar = (_init, _ctx) => (props) => {
   const { name = "", src, size = "md" } = props;
   const initial = name.trim()[0]?.toUpperCase() ?? "?";
   if (src) {
@@ -543,7 +552,7 @@ var Avatar = (props, _ctx) => {
 };
 
 // src/components/Tag/Tag.ts
-var Tag = (props, _ctx) => {
+var Tag = (_init, _ctx) => (props) => {
   const { closable, onClose, variant = "default", children } = props;
   const closeBtn = closable ? h("button", { class: "wf-tag-close", onClick: onClose, type: "button" }, "\u2715") : null;
   return h("span", { class: `wf-tag wf-tag--${variant}` }, [
@@ -553,7 +562,7 @@ var Tag = (props, _ctx) => {
 };
 
 // src/components/StatCard/StatCard.ts
-var StatCard = (props, _ctx) => {
+var StatCard = (_init, _ctx) => (props) => {
   const { label, value, trend, trendLabel, icon } = props;
   const children = [];
   if (icon) children.push(h("div", { class: "wf-stat-icon" }, icon));
@@ -571,7 +580,7 @@ var StatCard = (props, _ctx) => {
 };
 
 // src/components/Steps/Steps.ts
-var Steps = (props, _ctx) => {
+var Steps = (_init, _ctx) => (props) => {
   const { items = [], active, current = 0 } = props;
   const activeKey = active ?? items[current]?.key;
   const steps = items.map((item, i) => {
@@ -598,7 +607,7 @@ var Steps = (props, _ctx) => {
 };
 
 // src/components/Form/Form.ts
-var Form = (props, _ctx) => {
+var Form = (_init, _ctx) => (props) => {
   const { onSubmit, children } = props;
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -611,7 +620,7 @@ var Form = (props, _ctx) => {
 };
 
 // src/components/Field/Field.ts
-var Field = (props, _ctx) => {
+var Field = (_init, _ctx) => (props) => {
   const { label, required, error, hint, children } = props;
   const parts = [];
   if (label) {
@@ -626,7 +635,7 @@ var Field = (props, _ctx) => {
 };
 
 // src/components/Slider/Slider.ts
-var Slider = (props, _ctx) => {
+var Slider = (_init, _ctx) => (props) => {
   const { label, value = 0, min = 0, max = 100, step = 1, onChange } = props;
   const numVal = Number(value);
   const input = h("input", {
@@ -647,7 +656,7 @@ var Slider = (props, _ctx) => {
 };
 
 // src/components/SearchInput/SearchInput.ts
-var SearchInput = (props, _ctx) => {
+var SearchInput = (_init, _ctx) => (props) => {
   const { value = "", placeholder = "\u641C\u7D22...", onInput, onClear } = props;
   const clearBtn = value && onClear ? h("button", {
     class: "wf-search-clear",
@@ -669,7 +678,7 @@ var SearchInput = (props, _ctx) => {
 };
 
 // src/components/ProgressBar/ProgressBar.ts
-var ProgressBar = (props, ctx) => {
+var ProgressBar = (_init, ctx) => (props) => {
   const { value = 0, max = 100, label, showValue } = props;
   const pct = Math.min(100, Math.max(0, value / max * 100));
   const PBL = ctx?.i18n?.components?.ProgressBar ?? {};
@@ -695,7 +704,7 @@ var ProgressBar = (props, ctx) => {
 };
 
 // src/components/Accordion/Accordion.ts
-var Accordion = (props, _ctx) => {
+var Accordion = (_init, _ctx) => (props) => {
   const { items = [], multiple } = props;
   if (items.length === 0) return null;
   const panels = items.map(
@@ -708,7 +717,7 @@ var Accordion = (props, _ctx) => {
 };
 
 // src/components/PageHeader/PageHeader.ts
-var PageHeader = (props, _ctx) => {
+var PageHeader = (_init, _ctx) => (props) => {
   const { title, sub, children } = props;
   return h("div", { class: "wf-page-head" }, [
     h("div", { class: "wf-page-head-left" }, [
@@ -720,7 +729,7 @@ var PageHeader = (props, _ctx) => {
 };
 
 // src/components/Breadcrumb/Breadcrumb.ts
-var Breadcrumb = (props, ctx) => {
+var Breadcrumb = (_init, _ctx) => (props) => {
   const { items } = props;
   const children = items.flatMap((item, i) => {
     const isLast = i === items.length - 1;
@@ -728,12 +737,12 @@ var Breadcrumb = (props, ctx) => {
     if (isLast) return el;
     return [el, h("span", { class: "wf-breadcrumb-sep", "aria-hidden": "true" }, "/")];
   });
-  const BL = ctx?.i18n?.components?.Breadcrumb ?? {};
+  const BL = _ctx?.i18n?.components?.Breadcrumb ?? {};
   return h("nav", { class: "wf-breadcrumb", "aria-label": BL.ariaLabel ?? "\u9762\u5305\u5C51" }, children);
 };
 
 // src/components/Divider/Divider.ts
-var Divider = (props, _ctx) => {
+var Divider = (_init, _ctx) => (props) => {
   const { vertical, children } = props;
   if (vertical) {
     return h("div", { class: "wf-divider wf-divider--vertical", role: "separator" });
@@ -752,238 +761,266 @@ function formatSize(bytes) {
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
 }
-var FileUpload = (props, ctx) => {
-  const { accept, multiple, maxSize, disabled, error, hint, value, onChange, children } = props;
+var FileUpload = (_init, ctx) => {
   const FL = ctx?.i18n?.components?.FileUpload ?? {};
-  const files = value ?? [];
-  let dragOver = false;
-  const handleChange = (e) => {
-    const input = e.target;
-    const selected = Array.from(input.files ?? []);
-    if (maxSize) {
-      const oversized = selected.filter((f) => f.size > maxSize);
-      if (oversized.length > 0) return;
-    }
-    onChange?.(selected);
-    input.value = "";
-  };
-  const handleDrop = (e) => {
-    e.preventDefault();
-    dragOver = false;
-    if (disabled) return;
-    const dropped = Array.from(e.dataTransfer?.files ?? []);
-    if (maxSize) {
-      const oversized = dropped.filter((f) => f.size > maxSize);
-      if (oversized.length > 0) return;
-    }
-    onChange?.(dropped);
-  };
-  const handleDragOver = (e) => {
-    e.preventDefault();
-    dragOver = true;
-  };
-  const handleDragLeave = () => {
-    dragOver = false;
-  };
-  const handleRemove = (i) => {
-    const updated = files.filter((_, idx) => idx !== i);
-    onChange?.(updated);
-  };
-  const inputEl = h("input", {
-    type: "file",
-    class: "wf-upload-input",
-    accept: accept || void 0,
-    multiple: multiple || void 0,
-    disabled: disabled || void 0,
-    onChange: handleChange,
-    style: { display: "none" }
-  });
-  const dropZone = h("div", {
-    class: `wf-upload-zone${disabled ? " wf-upload-zone--disabled" : ""}${error ? " wf-upload-zone--err" : ""}`,
-    onClick: disabled ? void 0 : () => {
-      const input = document.querySelector(".wf-upload-input");
-      input?.click();
-    },
-    onDrop: handleDrop,
-    onDragOver: handleDragOver,
-    onDragLeave: handleDragLeave
-  }, children ?? h("div", { class: "wf-upload-placeholder" }, [
-    h("span", { class: "wf-upload-icon" }, "\u{1F4C1}"),
-    h("span", { class: "wf-upload-text" }, FL.placeholder ?? "\u70B9\u51FB\u6216\u62D6\u62FD\u4E0A\u4F20\u6587\u4EF6"),
-    accept ? h("span", { class: "wf-upload-hint" }, `${FL.supportedFormats ?? "\u652F\u6301\u683C\u5F0F: "}${accept}`) : null,
-    maxSize ? h("span", { class: "wf-upload-hint" }, `${FL.maxSize ?? "\u6700\u5927 "}${formatSize(maxSize)}`) : null
-  ].filter(Boolean)));
-  const fileList = files.length > 0 ? h(
-    "ul",
-    { class: "wf-upload-list" },
-    files.map(
-      (f, i) => h(
-        "li",
-        { class: "wf-upload-item", key: f.name + f.size },
-        h("span", { class: "wf-upload-item-info" }, [
-          h("span", { class: "wf-upload-item-name" }, f.name),
-          h("span", { class: "wf-upload-item-size" }, formatSize(f.size))
-        ]),
-        h("button", {
-          class: "wf-upload-item-remove",
-          "aria-label": `${FL.remove ?? "\u5220\u9664"} ${f.name}`,
-          onClick: () => handleRemove(i)
-        }, "\u2715")
+  return (props) => {
+    const { accept, multiple, maxSize, disabled, error, hint, value, onChange, children } = props;
+    const files = value ?? [];
+    const handleChange = (e) => {
+      const input = e.target;
+      const selected = Array.from(input.files ?? []);
+      if (maxSize) {
+        const oversized = selected.filter((f) => f.size > maxSize);
+        if (oversized.length > 0) return;
+      }
+      onChange?.(selected);
+      input.value = "";
+    };
+    const dragRef = (el) => {
+      if (!el || disabled) return;
+      const onDrop = (e) => {
+        e.preventDefault();
+        el.classList.remove("wf-upload-zone--drag");
+        if (disabled) return;
+        const dropped = Array.from(e.dataTransfer?.files ?? []);
+        if (maxSize) {
+          const oversized = dropped.filter((f) => f.size > maxSize);
+          if (oversized.length > 0) return;
+        }
+        onChange?.(dropped);
+      };
+      const onDragOver = (e) => {
+        e.preventDefault();
+        el.classList.add("wf-upload-zone--drag");
+      };
+      const onDragLeave = () => el.classList.remove("wf-upload-zone--drag");
+      el.addEventListener("drop", onDrop);
+      el.addEventListener("dragover", onDragOver);
+      el.addEventListener("dragleave", onDragLeave);
+      return () => {
+        el.removeEventListener("drop", onDrop);
+        el.removeEventListener("dragover", onDragOver);
+        el.removeEventListener("dragleave", onDragLeave);
+      };
+    };
+    const handleRemove = (i) => {
+      const updated = files.filter((_, idx) => idx !== i);
+      onChange?.(updated);
+    };
+    const inputEl = h("input", {
+      type: "file",
+      class: "wf-upload-input",
+      accept: accept || void 0,
+      multiple: multiple || void 0,
+      disabled: disabled || void 0,
+      onChange: handleChange,
+      style: { display: "none" }
+    });
+    const dropZone = h("div", {
+      class: `wf-upload-zone${disabled ? " wf-upload-zone--disabled" : ""}${error ? " wf-upload-zone--err" : ""}`,
+      onClick: disabled ? void 0 : () => {
+        const input = document.querySelector(".wf-upload-input");
+        input?.click();
+      },
+      ref: dragRef
+    }, children ?? h("div", { class: "wf-upload-placeholder" }, [
+      h("span", { class: "wf-upload-icon" }, "\u{1F4C1}"),
+      h("span", { class: "wf-upload-text" }, FL.placeholder ?? "\u70B9\u51FB\u6216\u62D6\u62FD\u4E0A\u4F20\u6587\u4EF6"),
+      accept ? h("span", { class: "wf-upload-hint" }, `${FL.supportedFormats ?? "\u652F\u6301\u683C\u5F0F: "}${accept}`) : null,
+      maxSize ? h("span", { class: "wf-upload-hint" }, `${FL.maxSize ?? "\u6700\u5927 "}${formatSize(maxSize)}`) : null
+    ].filter(Boolean)));
+    const fileList = files.length > 0 ? h(
+      "ul",
+      { class: "wf-upload-list" },
+      files.map(
+        (f, i) => h(
+          "li",
+          { class: "wf-upload-item", key: f.name + f.size },
+          h("span", { class: "wf-upload-item-info" }, [
+            h("span", { class: "wf-upload-item-name" }, f.name),
+            h("span", { class: "wf-upload-item-size" }, formatSize(f.size))
+          ]),
+          h("button", {
+            class: "wf-upload-item-remove",
+            "aria-label": `${FL.remove ?? "\u5220\u9664"} ${f.name}`,
+            onClick: () => handleRemove(i)
+          }, "\u2715")
+        )
       )
-    )
-  ) : null;
-  const parts = [inputEl, dropZone, fileList];
-  if (error) parts.push(h("div", { class: "wf-upload-err" }, error));
-  if (hint && !error) parts.push(h("div", { class: "wf-upload-hint" }, hint));
-  return h("div", { class: "wf-upload" }, parts);
+    ) : null;
+    const parts = [inputEl, dropZone, fileList];
+    if (error) parts.push(h("div", { class: "wf-upload-err" }, error));
+    if (hint && !error) parts.push(h("div", { class: "wf-upload-hint" }, hint));
+    return h("div", { class: "wf-upload" }, parts);
+  };
 };
 
-// src/components/Tooltip/Tooltip.ts
-var Tooltip = (props, ctx) => {
-  const { content, position = "top", children, disabled } = props;
-  const $ = ctx.ui.$;
-  if (!ctx.ui.ready) {
-    $.show = false;
+// src/client/popup.ts
+function computeFixedPos(el, placement = "bottom", gap = 6, center = true) {
+  const rect = el.getBoundingClientRect();
+  switch (placement) {
+    case "bottom":
+      return {
+        top: rect.bottom + gap,
+        left: center ? rect.left + rect.width / 2 : rect.left
+      };
+    case "top":
+      return {
+        top: rect.top - gap,
+        left: center ? rect.left + rect.width / 2 : rect.left
+      };
+    case "left":
+      return {
+        top: center ? rect.top + rect.height / 2 : rect.top,
+        left: rect.left - gap
+      };
+    case "right":
+      return {
+        top: center ? rect.top + rect.height / 2 : rect.top,
+        left: rect.right + gap
+      };
   }
-  const show = () => {
-    $.show = true;
-  };
-  const hide = () => {
-    $.show = false;
+}
+
+// src/components/Tooltip/Tooltip.ts
+var Tooltip = (_props, ctx) => {
+  let show = false;
+  let pos = { top: 0, left: 0 };
+  return (props) => {
+    const { content, position = "top", children, disabled } = props;
+    const showe = (e) => {
+      pos = computeFixedPos(e.currentTarget, position, 6, true);
+      show = true;
+      ctx.ui.render();
+    };
+    const hide = () => {
+      show = false;
+      ctx.ui.render();
+    };
+    const p = pos;
+    const tip = !disabled ? h("div", {
+      class: `wf-tooltip wf-tooltip--${position}${show ? "" : " wf-tooltip--hidden"}`,
+      style: { top: p.top, left: p.left },
+      role: "tooltip"
+    }, [h("div", { class: "wf-tooltip-arrow" }), h("div", { class: "wf-tooltip-content" }, content)]) : null;
+    const portalContent = !disabled ? createPortal(tip, "tooltip") : null;
+    return h("div", {
+      class: "wf-tooltip-wrap",
+      onMouseEnter: showe,
+      onMouseLeave: hide,
+      onFocus: showe,
+      onBlur: hide
+    }, [children, portalContent].filter(Boolean));
   };
-  const tip = $.show && !disabled ? h("div", {
-    class: `wf-tooltip wf-tooltip--${position}`,
-    role: "tooltip"
-  }, [
-    h("div", { class: "wf-tooltip-arrow" }),
-    h("div", { class: "wf-tooltip-content" }, content)
-  ]) : null;
-  return h("div", {
-    class: "wf-tooltip-wrap",
-    onMouseEnter: show,
-    onMouseLeave: hide,
-    onFocus: show,
-    onBlur: hide
-  }, [children, tip].filter(Boolean));
 };
 
 // src/components/Drawer/Drawer.ts
-var Drawer = (props, ctx) => {
-  const { open, title, position = "right", onClose, children, footer } = props;
-  const $ = ctx.ui.$;
-  if (!ctx.ui.ready) {
-    $.exiting = false;
-    $.prevOpen = open;
-  }
-  if ($.prevOpen !== open) {
-    $.prevOpen = open;
-    if (open && $.exiting) $.exiting = false;
-  }
-  const startClose = () => {
-    $.exiting = true;
-  };
-  const onExitEnd = () => {
-    $.exiting = false;
-    onClose?.();
-  };
-  if (!open && !$.exiting) return null;
-  const isClosing = $.exiting;
-  const handleKeyDown = (e) => {
-    if (e.key === "Escape" && !isClosing) startClose();
-  };
-  const drawerRef = (el) => {
-    if (!el) return;
+var Drawer = (_props, ctx) => {
+  let prevOpen;
+  ctx.ui.onmounted((el) => {
     lockScroll();
     const cleanupFocus = trapFocus(el);
     return () => {
       unlockScroll();
       cleanupFocus();
     };
-  };
-  const overlay = h("div", {
-    class: "wf-drawer-overlay",
-    onClick: isClosing ? void 0 : startClose
   });
-  const closeBtn = h("button", {
-    class: "wf-drawer-close",
-    onClick: isClosing ? void 0 : startClose,
-    type: "button",
-    "aria-label": "\u5173\u95ED"
-  }, "\u2715");
-  const titleEl = title ? h("div", { class: "wf-drawer-header" }, [title, closeBtn]) : null;
-  const bodyEl = h("div", { class: "wf-drawer-body" }, children);
-  const footerEl = footer ? h("div", { class: "wf-drawer-footer" }, footer) : null;
-  const panel = h("div", {
-    class: `wf-drawer-panel wf-drawer-panel--${position}`,
-    onClick: (e) => e.stopPropagation(),
-    onAnimationEnd: isClosing ? onExitEnd : void 0
-  }, [titleEl, bodyEl, footerEl].filter(Boolean));
-  const DL = ctx?.i18n?.components?.Drawer ?? {};
-  const cls = isClosing ? `wf-drawer wf-drawer--${position} wf-drawer--exit` : `wf-drawer wf-drawer--${position} wf-drawer--enter`;
-  return h("div", {
-    class: cls,
-    role: "dialog",
-    "aria-modal": "true",
-    "aria-label": title ?? (DL.ariaLabel ?? "\u4FA7\u8FB9\u9762\u677F"),
-    onKeyDown: handleKeyDown,
-    ref: drawerRef
-  }, [overlay, panel]);
+  return (props) => {
+    const { open, title, position = "right", onClose, children, footer } = props;
+    const DL = ctx?.i18n?.components?.Drawer ?? {};
+    if (prevOpen !== open) {
+      prevOpen = open;
+    }
+    if (!open) return null;
+    const overlay = h("div", {
+      class: "wf-drawer-overlay",
+      onClick: onClose
+    });
+    const closeBtn = h("button", {
+      class: "wf-drawer-close",
+      onClick: onClose,
+      type: "button",
+      "aria-label": "\u5173\u95ED"
+    }, "\u2715");
+    const titleEl = title ? h("div", { class: "wf-drawer-header" }, [title, closeBtn]) : null;
+    const bodyEl = h("div", { class: "wf-drawer-body" }, children);
+    const footerEl = footer ? h("div", { class: "wf-drawer-footer" }, footer) : null;
+    const panel = h("div", {
+      class: `wf-drawer-panel wf-drawer-panel--${position}`,
+      onClick: (e) => e.stopPropagation()
+    }, [titleEl, bodyEl, footerEl].filter(Boolean));
+    const root = h("div", {
+      class: `wf-drawer wf-drawer--${position} wf-drawer--enter`,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": title ?? (DL.ariaLabel ?? "\u4FA7\u8FB9\u9762\u677F")
+    }, [overlay, panel]);
+    return createPortal(root, "drawer");
+  };
 };
 
 // src/components/Popover/Popover.ts
-var Popover = (props, ctx) => {
-  const {
-    content,
-    trigger = "click",
-    position = "bottom",
-    open,
-    onOpenChange,
-    disabled,
-    children
-  } = props;
-  const $ = ctx.ui.$;
-  if (!ctx.ui.ready) {
-    $.show = false;
-  }
-  const isOpen = open !== void 0 ? open : $.show;
-  const setOpen = (v) => {
-    if (open === void 0) $.show = v;
-    onOpenChange?.(v);
+var Popover = (_props, ctx) => {
+  let show = false;
+  let pos = { top: 0, left: 0 };
+  return (props) => {
+    const { content, trigger = "click", position = "bottom", open, onOpenChange, disabled, children } = props;
+    const isOpen = open !== void 0 ? open : show;
+    const setOpen = (v) => {
+      if (open === void 0) {
+        show = v;
+        ctx.ui.render();
+      }
+      onOpenChange?.(v);
+    };
+    const updatePos = (e) => {
+      pos = computeFixedPos(e.currentTarget, position, 6, true);
+      ctx.ui.render();
+    };
+    const onClick = trigger === "click" && !disabled ? (e) => {
+      updatePos(e);
+      setOpen(!isOpen);
+    } : void 0;
+    const hoverProps = {};
+    if (trigger === "hover" && !disabled) {
+      hoverProps.onMouseEnter = (e) => {
+        updatePos(e);
+        setOpen(true);
+      };
+      hoverProps.onMouseLeave = () => setOpen(false);
+      hoverProps.onFocus = (e) => {
+        updatePos(e);
+        setOpen(true);
+      };
+      hoverProps.onBlur = () => setOpen(false);
+    }
+    const p = pos;
+    const overlay = isOpen && trigger === "click" ? h("div", {
+      class: "wf-popover-overlay",
+      onMouseDown: (e) => {
+        e.stopPropagation();
+        setOpen(false);
+      }
+    }) : null;
+    const popover = isOpen ? h("div", {
+      class: "wf-popover wf-popover--enter",
+      style: { top: p.top, left: p.left },
+      role: "tooltip"
+    }, [
+      h("div", { class: "wf-popover-arrow" }),
+      h("div", { class: "wf-popover-content" }, content)
+    ]) : null;
+    const portalContent = isOpen ? createPortal([overlay, popover].filter(Boolean), "popover") : null;
+    return h("div", {
+      class: `wf-popover-wrap${isOpen ? " wf-popover-wrap--open" : ""}`,
+      ...hoverProps,
+      onClick
+    }, [children, portalContent].filter(Boolean));
   };
-  const onClick = trigger === "click" && !disabled ? () => setOpen(!isOpen) : void 0;
-  const hoverProps = {};
-  if (trigger === "hover" && !disabled) {
-    hoverProps.onMouseEnter = () => setOpen(true);
-    hoverProps.onMouseLeave = () => setOpen(false);
-    hoverProps.onFocus = () => setOpen(true);
-    hoverProps.onBlur = () => setOpen(false);
-  }
-  const overlay = isOpen ? h("div", {
-    class: "wf-popover-overlay",
-    onMouseDown: () => setOpen(false)
-  }) : null;
-  const panel = isOpen ? h("div", {
-    class: `wf-popover wf-popover--${position}`,
-    role: "dialog",
-    "aria-modal": "true",
-    "aria-label": "\u5F39\u51FA\u9762\u677F",
-    onMouseDown: (e) => e.stopPropagation()
-  }, [
-    h("div", { class: "wf-popover-arrow" }),
-    h("div", { class: "wf-popover-content" }, content)
-  ]) : null;
-  return h("div", {
-    class: `wf-popover-wrap${isOpen ? " wf-popover-wrap--open" : ""}`,
-    ...hoverProps
-  }, [
-    h("div", { class: "wf-popover-trigger", onClick }, children),
-    overlay,
-    panel
-  ].filter(Boolean));
 };
 
 // src/components/Skeleton/Skeleton.ts
-var Skeleton = (props) => {
+var Skeleton = (_init) => (props) => {
   const { variant = "text", lines = 1, width, height, className } = props;
   const style = {};
   if (width !== void 0) style.width = typeof width === "number" ? `${width}px` : width;
@@ -1004,7 +1041,7 @@ var Skeleton = (props) => {
 };
 
 // src/components/Img/Img.ts
-var Img = (props) => {
+var Img = (_init) => (props) => {
   const { src, alt = "", fallback, loading, width, height, className, style } = props;
   const imgProps = {
     class: ["wf-image", className].filter(Boolean).join(" "),
@@ -1025,47 +1062,1267 @@ var Img = (props) => {
 };
 
 // src/components/InView/InView.ts
-var InView = (props, ctx) => {
-  const {
-    once = true,
-    threshold = 0,
-    rootMargin = "0px",
-    placeholder,
-    onEnter,
-    children
-  } = props;
-  const $ = ctx.ui.$;
-  if (!ctx.ui.ready) {
-    $.inView = false;
+var InView = (_props, ctx) => {
+  let inView = false;
+  let entered = false;
+  let io;
+  ctx.ui.onmounted((el) => {
+    const sentinel = el.querySelector(".wf-inview-pending");
+    if (!sentinel) return;
+    io = new IntersectionObserver((entries) => {
+      if (entries[0]?.isIntersecting) {
+        inView = true;
+        ctx.ui.render();
+      }
+    }, { threshold: _props.threshold ?? 0, rootMargin: _props.rootMargin ?? "0px" });
+    io.observe(sentinel);
+    return () => {
+      io?.disconnect();
+    };
+  });
+  return (props) => {
+    if (inView) {
+      if (!entered) {
+        entered = true;
+        const once = props.once !== false;
+        if (once) io?.disconnect();
+        props.onEnter?.();
+      }
+      return h("div", { class: "wf-inview wf-inview--loaded" }, props.children);
+    }
+    const placeholderEl = props.placeholder !== void 0 ? props.placeholder : h("div", { class: "wf-inview-placeholder" });
+    return h("div", {
+      class: "wf-inview wf-inview--pending"
+    }, [
+      h("div", { class: "wf-inview-pending", style: { width: "1px", height: "1px", opacity: 0, pointerEvents: "none" } }),
+      placeholderEl
+    ]);
+  };
+};
+
+// src/components/DatePicker/calendar-utils.ts
+var WEEKDAYS = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
+function getWeekdays() {
+  return WEEKDAYS;
+}
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getFirstDayOfMonth(year, month) {
+  return new Date(year, month, 1).getDay();
+}
+function getCalendarGrid(year, month) {
+  const days = [];
+  const totalDays = getDaysInMonth(year, month);
+  const firstDay = getFirstDayOfMonth(year, month);
+  const prevMonth = month === 0 ? 11 : month - 1;
+  const prevYear = month === 0 ? year - 1 : year;
+  const prevMonthDays = getDaysInMonth(prevYear, prevMonth);
+  const today = /* @__PURE__ */ new Date();
+  let row = [];
+  for (let i = firstDay - 1; i >= 0; i--) {
+    const d = prevMonthDays - i;
+    row.push({
+      year: prevYear,
+      month: prevMonth,
+      day: d,
+      isOtherMonth: true,
+      isToday: prevYear === today.getFullYear() && prevMonth === today.getMonth() && d === today.getDate()
+    });
+  }
+  for (let d = 1; d <= totalDays; d++) {
+    row.push({
+      year,
+      month,
+      day: d,
+      isOtherMonth: false,
+      isToday: year === today.getFullYear() && month === today.getMonth() && d === today.getDate()
+    });
+    if (row.length === 7) {
+      days.push(row);
+      row = [];
+    }
+  }
+  const nextMonth = month === 11 ? 0 : month + 1;
+  const nextYear = month === 11 ? year + 1 : year;
+  let nextDay = 1;
+  while (days.length < 6) {
+    while (row.length < 7) {
+      row.push({
+        year: nextYear,
+        month: nextMonth,
+        day: nextDay++,
+        isOtherMonth: true,
+        isToday: nextYear === today.getFullYear() && nextMonth === today.getMonth() && nextDay - 1 === today.getDate()
+      });
+    }
+    days.push(row);
+    row = [];
   }
-  const sentinelRef = (el) => {
-    if (!el) return;
-    if ($.inView && once) return;
-    const io = new IntersectionObserver(
-      (entries) => {
-        if (entries[0]?.isIntersecting) {
-          $.inView = true;
-          onEnter?.();
-          if (once) io.disconnect();
-        } else if (!once) {
-          $.inView = false;
+  return days;
+}
+function formatDate(year, month, day) {
+  return `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+}
+function formatTime(hour, minute) {
+  return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+}
+function formatDateTime(year, month, day, hour, minute) {
+  return `${formatDate(year, month, day)} ${formatTime(hour, minute)}`;
+}
+function hourOptions() {
+  return Array.from({ length: 24 }, (_, i) => i);
+}
+function minuteOptions() {
+  return Array.from({ length: 12 }, (_, i) => i * 5);
+}
+
+// src/components/DatePicker/DatePicker.ts
+var DatePicker = (_props, ctx) => {
+  const L = ctx?.i18n?.components?.DatePicker ?? {};
+  let show = false;
+  let selectedValue = "";
+  const now = /* @__PURE__ */ new Date();
+  let viewYear = now.getFullYear();
+  let viewMonth = now.getMonth();
+  let hour = now.getHours();
+  let minute = Math.round(now.getMinutes() / 5) * 5;
+  let selYear = now.getFullYear();
+  let selMonth = now.getMonth();
+  let selDay = now.getDate();
+  let rangeStart = null;
+  let rangeEnd = null;
+  let inputEl;
+  ctx.ui.onmounted((el) => {
+    inputEl = el.querySelector(".wf-datepicker-input");
+  });
+  return (props) => {
+    const { mode = "date", value, onChange, placeholder = L.placeholder ?? "\u9009\u62E9\u65E5\u671F", disabled } = props;
+    const isOpen = show;
+    const setOpen = (v) => {
+      show = v;
+      ctx.ui.render();
+    };
+    const toggle = (e) => {
+      if (disabled) return;
+      setOpen(!show);
+    };
+    const pos = (() => {
+      if (!isOpen) return { top: 0, left: 0 };
+      if (!inputEl) return { top: 0, left: 0 };
+      const r = inputEl.getBoundingClientRect();
+      return { top: r.bottom + 4, left: r.left, width: r.width };
+    })();
+    const selectDate = (day) => {
+      if (mode === "datetime") {
+        selYear = day.year;
+        selMonth = day.month;
+        selDay = day.day;
+        viewYear = day.year;
+        viewMonth = day.month;
+        ctx.ui.render();
+      } else if (mode === "range") {
+        if (!rangeStart || rangeStart && rangeEnd) {
+          rangeStart = formatDate(day.year, day.month, day.day);
+          rangeEnd = null;
+          ctx.ui.render();
+        } else {
+          rangeEnd = formatDate(day.year, day.month, day.day);
+          const ds = rangeStart < rangeEnd ? rangeStart : rangeEnd;
+          const de = rangeStart < rangeEnd ? rangeEnd : rangeStart;
+          selectedValue = `${ds} ~ ${de}`;
+          onChange?.(selectedValue);
+          setOpen(false);
         }
-      },
-      { threshold, rootMargin }
+      } else {
+        selectedValue = formatDate(day.year, day.month, day.day);
+        onChange?.(selectedValue);
+        setOpen(false);
+      }
+    };
+    const prevMonth = () => {
+      if (viewMonth === 0) {
+        viewYear--;
+        viewMonth = 11;
+      } else viewMonth--;
+      ctx.ui.render();
+    };
+    const nextMonth = () => {
+      if (viewMonth === 11) {
+        viewYear++;
+        viewMonth = 0;
+      } else viewMonth++;
+      ctx.ui.render();
+    };
+    const confirmTime = () => {
+      selectedValue = formatTime(hour, minute);
+      onChange?.(selectedValue);
+      setOpen(false);
+    };
+    const confirmDateTime = () => {
+      selectedValue = formatDateTime(selYear, selMonth, selDay, hour, minute);
+      onChange?.(selectedValue);
+      setOpen(false);
+    };
+    const grid = getCalendarGrid(viewYear, viewMonth);
+    const weekdays = [L.w0, L.w1, L.w2, L.w3, L.w4, L.w5, L.w6].some((v) => v) ? [L.w0, L.w1, L.w2, L.w3, L.w4, L.w5, L.w6] : getWeekdays();
+    const headerBtn = (label, onClick) => h("button", { class: "wf-datepicker-header-btn", type: "button", onClick }, label);
+    const header = h("div", { class: "wf-datepicker-header" }, [
+      headerBtn("\u2039", prevMonth),
+      h("span", { class: "wf-datepicker-header-title" }, `${viewYear}\u5E74${viewMonth + 1}\u6708`),
+      headerBtn("\u203A", nextMonth)
+    ]);
+    const weekdayRow = h(
+      "div",
+      { class: "wf-datepicker-weekdays" },
+      weekdays.map((w) => h("span", { class: "wf-datepicker-weekday" }, w))
     );
-    io.observe(el);
-    return () => {
-      io.disconnect();
+    const gridRows = grid.map((row, ri) => h(
+      "div",
+      { class: "wf-datepicker-grid", key: `row-${ri}` },
+      row.map((cell, ci) => {
+        const classes = ["wf-datepicker-cell"];
+        if (cell.isOtherMonth) classes.push("wf-datepicker-cell--other-month");
+        if (cell.isToday) classes.push("wf-datepicker-cell--today");
+        const dateStr = formatDate(cell.year, cell.month, cell.day);
+        if (mode === "range") {
+          if (dateStr === rangeStart || dateStr === rangeEnd) classes.push("wf-datepicker-cell--range-edge");
+          else if (rangeStart && rangeEnd && dateStr > rangeStart && dateStr < rangeEnd) classes.push("wf-datepicker-cell--in-range");
+        } else if (mode === "datetime") {
+          if (selYear === cell.year && selMonth === cell.month && selDay === cell.day) classes.push("wf-datepicker-cell--selected");
+        } else {
+          if (dateStr === selectedValue) classes.push("wf-datepicker-cell--selected");
+        }
+        return h("button", {
+          class: classes.join(" "),
+          key: `${cell.year}-${cell.month}-${cell.day}`,
+          type: "button",
+          onClick: () => selectDate(cell)
+        }, String(cell.day));
+      })
+    ));
+    const calendarPanel = h("div", { class: "wf-datepicker-range-panel" }, [
+      header,
+      weekdayRow,
+      ...gridRows
+    ]);
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    const overlay = h("div", { class: "wf-datepicker-overlay", onMouseDown: () => setOpen(false) });
+    let panel = null;
+    if (isOpen) {
+      if (mode === "time") {
+        const hours = hourOptions();
+        const minutes = minuteOptions();
+        const timePanel = h("div", {
+          style: { top: pos.top, left: pos.left, width: pos.width },
+          class: "wf-time-picker",
+          role: "dialog",
+          onKeyDown: handleKeyDown,
+          onMouseDown: (e) => e.stopPropagation()
+        }, [
+          h("div", { class: "wf-time-body" }, [
+            h("div", { class: "wf-time-col" }, [
+              h("div", { class: "wf-time-col-label" }, L.hour ?? "\u65F6"),
+              h(
+                "div",
+                { class: "wf-time-opt-list" },
+                hours.map((hv) => h("button", {
+                  class: `wf-time-opt${hv === hour ? " wf-time-opt--selected" : ""}`,
+                  type: "button",
+                  key: hv,
+                  onClick: () => {
+                    hour = hv;
+                    ctx.ui.render();
+                  }
+                }, String(hv).padStart(2, "0")))
+              )
+            ]),
+            h("div", { class: "wf-time-col" }, [
+              h("div", { class: "wf-time-col-label" }, L.minute ?? "\u5206"),
+              h(
+                "div",
+                { class: "wf-time-opt-list" },
+                minutes.map((mv) => h("button", {
+                  class: `wf-time-opt${mv === minute ? " wf-time-opt--selected" : ""}`,
+                  type: "button",
+                  key: mv,
+                  onClick: () => {
+                    minute = mv;
+                    ctx.ui.render();
+                  }
+                }, String(mv).padStart(2, "0")))
+              )
+            ])
+          ]),
+          h("div", { class: "wf-time-footer" }, [
+            h("button", { class: "wf-datepicker-footer-btn", type: "button", onClick: () => setOpen(false) }, L.cancel ?? "\u53D6\u6D88"),
+            h("button", { class: "wf-datepicker-footer-btn", type: "button", onClick: confirmTime }, L.confirm ?? "\u786E\u5B9A")
+          ])
+        ]);
+        panel = [overlay, timePanel];
+      } else if (mode === "range") {
+        const nextM = viewMonth === 11 ? 0 : viewMonth + 1;
+        const nextY = viewMonth === 11 ? viewYear + 1 : viewYear;
+        const nextGrid = getCalendarGrid(nextY, nextM);
+        const rangeWrap = h("div", {
+          style: { top: pos.top, left: pos.left },
+          class: "wf-datepicker-range-wrap",
+          onMouseDown: (e) => e.stopPropagation()
+        }, [
+          h("div", { class: "wf-datepicker-range-panel" }, [
+            h("div", { class: "wf-datepicker-header" }, [
+              headerBtn("\u2039", prevMonth),
+              h("span", { class: "wf-datepicker-header-title" }, `${viewYear}\u5E74${viewMonth + 1}\u6708`),
+              h("span", { class: "wf-datepicker-header-title" })
+            ]),
+            weekdayRow,
+            ...gridRows
+          ]),
+          h("div", { class: "wf-datepicker-range-panel" }, [
+            h("div", { class: "wf-datepicker-header" }, [
+              h("span", { class: "wf-datepicker-header-title" }),
+              h("span", { class: "wf-datepicker-header-title" }, `${nextY}\u5E74${nextM + 1}\u6708`),
+              headerBtn("\u203A", nextMonth)
+            ]),
+            h("div", { class: "wf-datepicker-weekdays" }, weekdays.map((w) => h("span", { class: "wf-datepicker-weekday" }, w))),
+            ...nextGrid.map((row, ri) => h(
+              "div",
+              { class: "wf-datepicker-grid", key: `row-${ri}` },
+              row.map((cell) => {
+                const dateStr = formatDate(cell.year, cell.month, cell.day);
+                const cls = ["wf-datepicker-cell"];
+                if (cell.isOtherMonth) cls.push("wf-datepicker-cell--other-month");
+                if (cell.isToday) cls.push("wf-datepicker-cell--today");
+                if (dateStr === rangeStart || dateStr === rangeEnd) cls.push("wf-datepicker-cell--range-edge");
+                else if (rangeStart && rangeEnd && dateStr > rangeStart && dateStr < rangeEnd) cls.push("wf-datepicker-cell--in-range");
+                return h("button", {
+                  class: cls.join(" "),
+                  key: dateStr,
+                  type: "button",
+                  onClick: () => selectDate(cell)
+                }, String(cell.day));
+              })
+            ))
+          ])
+        ]);
+        panel = [overlay, rangeWrap];
+      } else {
+        const content = [calendarPanel];
+        if (mode === "datetime") {
+          content.push(h("div", { class: "wf-datetime-time" }, [
+            h("span", { class: "wf-datetime-time-label" }, (L.time ?? "\u65F6\u95F4") + "\uFF1A"),
+            h("div", { class: "wf-datetime-time-select" }, [
+              h("select", {
+                class: "wf-datetime-select",
+                value: hour,
+                onChange: (e) => {
+                  hour = parseInt(e.target.value);
+                  ctx.ui.render();
+                }
+              }, hourOptions().map((hv) => h("option", { value: hv, key: hv }, String(hv).padStart(2, "0")))),
+              h("span", { class: "wf-datetime-sep" }, ":"),
+              h("select", {
+                class: "wf-datetime-select",
+                value: minute,
+                onChange: (e) => {
+                  minute = parseInt(e.target.value);
+                  ctx.ui.render();
+                }
+              }, minuteOptions().map((mv) => h("option", { value: mv, key: mv }, String(mv).padStart(2, "0"))))
+            ])
+          ]));
+          content.push(h("div", { class: "wf-time-footer" }, [
+            h("button", { class: "wf-datepicker-footer-btn", type: "button", onClick: confirmDateTime }, L.confirm ?? "\u786E\u5B9A")
+          ]));
+        }
+        const dp = h("div", {
+          style: { top: pos.top, left: pos.left, width: pos.width },
+          class: "wf-datepicker-dropdown",
+          role: "dialog",
+          onKeyDown: handleKeyDown,
+          onMouseDown: (e) => e.stopPropagation()
+        }, content);
+        panel = [overlay, dp];
+      }
+    }
+    const portalContent = isOpen ? createPortal(panel, "dp-calendar") : null;
+    const displayValue = value ?? selectedValue ?? "";
+    return h("div", { class: `wf-datepicker${disabled ? " wf-datepicker--disabled" : ""}` }, [
+      h("input", {
+        class: "wf-datepicker-input",
+        type: "text",
+        placeholder,
+        value: displayValue || "",
+        readonly: true,
+        disabled,
+        onClick: toggle
+      }),
+      portalContent
+    ].filter(Boolean));
+  };
+};
+
+// src/components/Chart/chart-utils.ts
+function scaleLinear(domain, range) {
+  const fn = ((v) => {
+    const t = (v - domain[0]) / (domain[1] - domain[0]);
+    return range[0] + t * (range[1] - range[0]);
+  });
+  fn.domain = domain;
+  fn.range = range;
+  fn.invert = (v) => {
+    const t = (v - range[0]) / (range[1] - range[0]);
+    return domain[0] + t * (domain[1] - domain[0]);
+  };
+  return fn;
+}
+function linePath(data, xScale, yScale) {
+  if (data.length === 0) return "";
+  return data.map((d, i) => {
+    const x = xScale(i);
+    const y = yScale(d.value);
+    return i === 0 ? `M${x},${y}` : `L${x},${y}`;
+  }).join(" ");
+}
+function areaPath(data, xScale, yScale, yBase) {
+  if (data.length === 0) return "";
+  const pts = data.map((d, i) => {
+    const x = xScale(i);
+    const y = yScale(d.value);
+    return `${x},${y}`;
+  });
+  const firstX = xScale(0);
+  const lastX = xScale(data.length - 1);
+  return `M${firstX},${yBase}L${pts.join("L")}L${lastX},${yBase}Z`;
+}
+function barRects(data, xScale, yScale, barWidth) {
+  const bw = barWidth ?? Math.max(4, (xScale.range[1] - xScale.range[0]) / data.length * 0.6);
+  return data.map((d, i) => ({
+    x: xScale(i) - bw / 2,
+    y: yScale(Math.max(0, d.value)),
+    width: bw,
+    height: Math.abs(yScale(d.value) - yScale(0)),
+    color: d.color ?? getDefaultColor(i),
+    label: d.label,
+    value: d.value
+  }));
+}
+function pieArcs(data, cx, cy, radius) {
+  const total = data.reduce((s, d) => s + Math.abs(d.value), 0);
+  if (total === 0) return [];
+  let startAngle = -Math.PI / 2;
+  return data.map((d, i) => {
+    const angle = Math.abs(d.value) / total * Math.PI * 2;
+    const endAngle = startAngle + angle;
+    const arc = createArc(cx, cy, radius, startAngle, endAngle);
+    const midAngle = startAngle + angle / 2;
+    startAngle = endAngle;
+    return {
+      d: arc,
+      color: d.color ?? getDefaultColor(i),
+      label: d.label,
+      value: d.value,
+      centroid: {
+        x: cx + Math.cos(midAngle) * radius * 0.6,
+        y: cy + Math.sin(midAngle) * radius * 0.6
+      }
+    };
+  });
+}
+function createArc(cx, cy, r, start, end) {
+  const x1 = cx + r * Math.cos(start);
+  const y1 = cy + r * Math.sin(start);
+  const x2 = cx + r * Math.cos(end);
+  const y2 = cy + r * Math.sin(end);
+  const large = end - start > Math.PI ? 1 : 0;
+  return `M${cx},${cy}L${x1},${y1}A${r},${r} 0 ${large} 1 ${x2},${y2}Z`;
+}
+var COLORS2 = ["#3b82f6", "#ef4444", "#22c55e", "#f59e0b", "#8b5cf6", "#ec4899", "#06b6d4", "#84cc16"];
+function getDefaultColor(index) {
+  return COLORS2[index % COLORS2.length];
+}
+function getYTicks(yScale, tickCount = 5) {
+  const [d0, d1] = yScale.domain;
+  const step = (d1 - d0) / tickCount;
+  const ticks = [];
+  for (let i = 0; i <= tickCount; i++) {
+    const v = d0 + step * i;
+    ticks.push({ value: v, y: yScale(v), label: formatTick(v) });
+  }
+  return ticks;
+}
+function formatTick(v) {
+  if (Math.abs(v) >= 1e6) return (v / 1e6).toFixed(1) + "M";
+  if (Math.abs(v) >= 1e3) return (v / 1e3).toFixed(1) + "k";
+  return String(Math.round(v));
+}
+
+// src/components/Chart/Chart.ts
+var Chart = (_props, ctx) => {
+  let tooltip = null;
+  return (props) => {
+    const { type = "line", data, options = {}, title, area, className } = props;
+    const W = options.width ?? 320;
+    const H = options.height ?? 200;
+    const pad = options.padding ?? 32;
+    const cw = W - pad * 2;
+    const ch = H - pad * 2;
+    const values = data.map((d) => d.value);
+    const minVal = Math.min(0, ...values);
+    const maxVal = Math.max(...values);
+    const valRange = maxVal - minVal || 1;
+    const renderLine = () => {
+      const n = Math.max(1, data.length - 1);
+      const xScale = scaleLinear([-0.5, n + 0.5], [0, cw]);
+      const yScale = scaleLinear([minVal, maxVal], [ch, 0]);
+      const ticks = getYTicks(yScale);
+      const lineD = linePath(data, xScale, yScale);
+      const areaD = area ? areaPath(data, xScale, yScale, yScale(0)) : null;
+      const dots = data.map((d, i) => {
+        const cx = xScale(i) + pad;
+        const cy = yScale(d.value) + pad;
+        return h("circle", {
+          key: `dot-${i}`,
+          cx,
+          cy,
+          r: 3,
+          fill: d.color ?? getDefaultColor(i),
+          stroke: "#fff",
+          "stroke-width": 1.5,
+          style: { cursor: "pointer" },
+          onMouseEnter: (e) => {
+            const r = e.target.getBoundingClientRect();
+            tooltip = { x: r.left, y: r.top - 8, label: d.label, value: d.value };
+            ctx.ui.render();
+          },
+          onMouseLeave: () => {
+            tooltip = null;
+            ctx.ui.render();
+          }
+        });
+      });
+      return h("svg", { style: { width: "100%" }, height: H, viewBox: `0 0 ${W} ${H}` }, [
+        ...ticks.map((t, i) => h("g", { key: `tick-${i}` }, [
+          h("line", {
+            x1: pad,
+            y1: t.y + pad,
+            x2: W - pad,
+            y2: t.y + pad,
+            stroke: "#e5e7eb",
+            "stroke-width": 1
+          }),
+          h("text", {
+            x: pad - 6,
+            y: t.y + pad + 4,
+            "text-anchor": "end",
+            fill: "#6b7280",
+            "font-size": "11",
+            "font-family": "var(--wf-font-sans)"
+          }, t.label)
+        ])),
+        ...areaD ? [h("path", {
+          key: "area",
+          d: areaD,
+          fill: "#3b82f620",
+          stroke: "none",
+          transform: `translate(${pad},${pad})`
+        })] : [],
+        h("path", {
+          key: "line",
+          d: lineD,
+          fill: "none",
+          stroke: "#3b82f6",
+          "stroke-width": 2,
+          "stroke-linejoin": "round",
+          "stroke-linecap": "round",
+          transform: `translate(${pad},${pad})`
+        }),
+        ...data.map((d, i) => {
+          const x = xScale(i) + pad;
+          return h("text", {
+            key: `xlabel-${i}`,
+            x,
+            y: H - pad + 14,
+            "text-anchor": "middle",
+            fill: "#6b7280",
+            "font-size": "10",
+            "font-family": "var(--wf-font-sans)"
+          }, d.label);
+        }),
+        ...dots
+      ]);
+    };
+    const renderBar = () => {
+      const n = Math.max(1, data.length - 1);
+      const xScale = scaleLinear([-0.5, n + 0.5], [0, cw]);
+      const yScale = scaleLinear([minVal, maxVal], [ch, 0]);
+      const ticks = getYTicks(yScale);
+      const rects = barRects(data, xScale, yScale);
+      return h("svg", { style: { width: "100%" }, height: H, viewBox: `0 0 ${W} ${H}` }, [
+        ...ticks.map((t, i) => h("g", { key: `tick-${i}` }, [
+          h("line", {
+            x1: pad,
+            y1: t.y + pad,
+            x2: W - pad,
+            y2: t.y + pad,
+            stroke: "#e5e7eb",
+            "stroke-width": 1
+          }),
+          h("text", {
+            x: pad - 6,
+            y: t.y + pad + 4,
+            "text-anchor": "end",
+            fill: "#6b7280",
+            "font-size": "11",
+            "font-family": "var(--wf-font-sans)"
+          }, t.label)
+        ])),
+        ...rects.map((r, i) => h("rect", {
+          key: `bar-${i}`,
+          x: r.x + pad,
+          y: r.y + pad,
+          width: r.width,
+          height: r.height,
+          fill: r.color,
+          rx: 2,
+          onMouseEnter: (e) => {
+            const rect = e.target.getBoundingClientRect();
+            tooltip = { x: rect.left + rect.width / 2, y: rect.top - 8, label: r.label, value: r.value };
+            ctx.ui.render();
+          },
+          onMouseLeave: () => {
+            tooltip = null;
+            ctx.ui.render();
+          }
+        })),
+        ...data.map((d, i) => {
+          const x = xScale(i) + pad;
+          return h("text", {
+            key: `xlabel-${i}`,
+            x,
+            y: H - pad + 14,
+            "text-anchor": "middle",
+            fill: "#6b7280",
+            "font-size": "10",
+            "font-family": "var(--wf-font-sans)"
+          }, d.label);
+        })
+      ]);
     };
+    const renderPie = () => {
+      const cx = W / 2;
+      const cy = H / 2;
+      const radius = Math.min(cw, ch) / 2 - 4;
+      const arcs = pieArcs(data, cx, cy, radius);
+      return h("svg", { style: { width: "100%" }, height: H, viewBox: `0 0 ${W} ${H}` }, [
+        ...arcs.map((a, i) => h("g", { key: `arc-${i}` }, [
+          h("path", {
+            d: a.d,
+            fill: a.color,
+            stroke: "#fff",
+            "stroke-width": 1.5,
+            onMouseEnter: (e) => {
+              const r = e.target.getBoundingClientRect();
+              tooltip = { x: r.left + r.width / 2, y: r.top - 8, label: a.label, value: a.value };
+              ctx.ui.render();
+            },
+            onMouseLeave: () => {
+              tooltip = null;
+              ctx.ui.render();
+            }
+          }),
+          ...a.value / data.reduce((s, d) => s + Math.abs(d.value), 0) > 0.05 ? [h("text", {
+            x: a.centroid.x,
+            y: a.centroid.y + 3,
+            "text-anchor": "middle",
+            fill: "#fff",
+            "font-size": "11",
+            "font-weight": "bold",
+            "font-family": "var(--wf-font-sans)"
+          }, `${Math.round(a.value / data.reduce((s, d) => s + Math.abs(d.value), 0) * 100)}%`)] : []
+        ]))
+      ]);
+    };
+    let chartContent;
+    if (type === "bar") chartContent = renderBar();
+    else if (type === "pie") chartContent = renderPie();
+    else chartContent = renderLine();
+    const legend = data.length > 1 ? h(
+      "div",
+      { class: "wf-chart-legend" },
+      data.map((d, i) => h("span", { class: "wf-chart-legend-item", key: `leg-${i}` }, [
+        h("span", { class: "wf-chart-legend-dot", style: { background: d.color ?? getDefaultColor(i) } }),
+        h("span", { class: "wf-chart-legend-label" }, d.label)
+      ]))
+    ) : null;
+    const tip = tooltip ? h("div", {
+      class: "wf-chart-tooltip",
+      style: { left: tooltip.x, top: tooltip.y }
+    }, [
+      h("div", { class: "wf-chart-tooltip-label" }, tooltip.label),
+      h("div", { class: "wf-chart-tooltip-value" }, String(tooltip.value))
+    ]) : null;
+    return h("div", { class: `wf-chart${className ? " " + className : ""}` }, [
+      title ? h("div", { class: "wf-chart-title" }, title) : null,
+      chartContent,
+      legend,
+      tip
+    ].filter(Boolean));
   };
-  if ($.inView) {
-    return h("div", { class: "wf-inview wf-inview--loaded" }, children);
+};
+
+// src/components/Editor/tools/format.ts
+function queryFormats() {
+  const f = {};
+  try {
+    f.bold = document.queryCommandState("bold");
+    f.italic = document.queryCommandState("italic");
+    f.underline = document.queryCommandState("underline");
+    const block = document.queryCommandValue("formatBlock");
+    f.h1 = block === "h1" || block === "H1";
+    f.h2 = block === "h2" || block === "H2";
+    f.h3 = block === "h3" || block === "H3";
+    f.blockquote = block === "blockquote" || block === "BLOCKQUOTE";
+    f.alignLeft = document.queryCommandState("justifyLeft");
+    f.alignCenter = document.queryCommandState("justifyCenter");
+    f.alignRight = document.queryCommandState("justifyRight");
+  } catch {
+  }
+  return f;
+}
+function exec(cmd, value) {
+  try {
+    document.execCommand(cmd, false, value);
+  } catch {
+  }
+}
+function execFormat(item) {
+  switch (item) {
+    case "bold":
+      exec("bold");
+      break;
+    case "italic":
+      exec("italic");
+      break;
+    case "underline":
+      exec("underline");
+      break;
+    case "h1":
+      exec("formatBlock", "<h1>");
+      break;
+    case "h2":
+      exec("formatBlock", "<h2>");
+      break;
+    case "h3":
+      exec("formatBlock", "<h3>");
+      break;
+    case "ul":
+      exec("insertUnorderedList");
+      break;
+    case "ol":
+      exec("insertOrderedList");
+      break;
+    case "blockquote":
+      exec("formatBlock", "<blockquote>");
+      break;
+    case "alignLeft":
+      exec("justifyLeft");
+      break;
+    case "alignCenter":
+      exec("justifyCenter");
+      break;
+    case "alignRight":
+      exec("justifyRight");
+      break;
+    case "hr":
+      exec("insertHorizontalRule");
+      break;
+    case "image":
+      break;
+    case "link":
+      break;
+    case "clear":
+      exec("removeFormat");
+      exec("formatBlock", "<div>");
+      break;
+    case "source":
+      break;
+  }
+}
+
+// src/components/Editor/tools/toolbar.ts
+var DEFAULT_TOOLBAR = [
+  "bold",
+  "italic",
+  "underline",
+  "h1",
+  "h2",
+  "h3",
+  "ul",
+  "ol",
+  "blockquote",
+  "alignLeft",
+  "alignCenter",
+  "alignRight",
+  "hr",
+  "image",
+  "table",
+  "link",
+  "clear",
+  "source"
+];
+var TOOLBAR_LABELS = {
+  bold: "B",
+  italic: "I",
+  underline: "U",
+  h1: "H1",
+  h2: "H2",
+  h3: "H3",
+  ul: "\u25A1",
+  ol: "1.",
+  blockquote: "\u275D",
+  alignLeft: "\u21E4",
+  alignCenter: "\u21D4",
+  alignRight: "\u21E5",
+  hr: "\u2014",
+  image: "\u{1F5BC}",
+  table: "\u229E",
+  link: "\u{1F517}",
+  clear: "\u2715",
+  source: "</>"
+};
+var TOOLBAR_TITLES = {
+  bold: "\u52A0\u7C97 (Ctrl+B)",
+  italic: "\u659C\u4F53 (Ctrl+I)",
+  underline: "\u4E0B\u5212\u7EBF (Ctrl+U)",
+  h1: "\u6807\u9898 1",
+  h2: "\u6807\u9898 2",
+  h3: "\u6807\u9898 3",
+  ul: "\u65E0\u5E8F\u5217\u8868",
+  ol: "\u6709\u5E8F\u5217\u8868",
+  blockquote: "\u5F15\u7528",
+  alignLeft: "\u5DE6\u5BF9\u9F50",
+  alignCenter: "\u5C45\u4E2D",
+  alignRight: "\u53F3\u5BF9\u9F50",
+  hr: "\u5206\u5272\u7EBF",
+  image: "\u63D2\u5165\u56FE\u7247",
+  table: "\u63D2\u5165\u8868\u683C",
+  link: "\u63D2\u5165\u94FE\u63A5",
+  clear: "\u6E05\u9664\u683C\u5F0F",
+  source: "\u6E90\u7801"
+};
+var GRP_FORMAT = ["bold", "italic", "underline"];
+var GRP_HEADING = ["h1", "h2", "h3"];
+var GRP_LIST = ["ul", "ol"];
+var GRP_BLOCK = ["blockquote", "alignLeft", "alignCenter", "alignRight", "hr"];
+var GRP_INSERT = ["image", "table", "link", "clear"];
+function needsSeparator(prev, item) {
+  return GRP_FORMAT.includes(prev) && GRP_HEADING.includes(item) || GRP_HEADING.includes(prev) && GRP_LIST.includes(item) || GRP_LIST.includes(prev) && GRP_BLOCK.includes(item) || GRP_BLOCK.includes(prev) && GRP_INSERT.includes(item) || ["link", "clear"].includes(prev) && item === "source";
+}
+function renderToolbar(items, active, isSource, onItem, customRender) {
+  const buttons = items.map((item) => {
+    if (customRender?.[item]) return customRender[item](item);
+    const isActive = item === "source" ? isSource : !!active[item];
+    const isLink = item === "link";
+    const cls = [
+      "wf-editor-tb-btn",
+      isActive && "wf-editor-tb-btn--active",
+      isLink && "wf-editor-tb-btn--link"
+    ].filter(Boolean).join(" ");
+    return h("button", {
+      key: item,
+      class: cls,
+      type: "button",
+      title: TOOLBAR_TITLES[item],
+      "aria-label": TOOLBAR_TITLES[item],
+      "data-item": item,
+      onClick: () => onItem(item)
+    }, TOOLBAR_LABELS[item]);
+  });
+  const withSeparators = [];
+  items.forEach((item, i) => {
+    if (i > 0 && needsSeparator(items[i - 1], item)) {
+      withSeparators.push(h("span", { class: "wf-editor-tb-sep", key: `sep-${i}` }));
+    }
+    withSeparators.push(buttons[i]);
+  });
+  return h("div", { class: "wf-editor-toolbar", role: "toolbar", "aria-label": "\u7F16\u8F91\u683C\u5F0F" }, withSeparators);
+}
+
+// src/components/Editor/tools/table.ts
+var MAX = 6;
+function insertTable(rows, cols) {
+  const tds = Array.from(
+    { length: cols },
+    (_, ci) => `<td${ci === 0 ? ' style="font-weight:var(--wf-font-weight-semibold,600)"' : ""}>&nbsp;</td>`
+  ).join("");
+  const rowsHtml = Array.from(
+    { length: rows },
+    (_, ri) => `<tr>${ri === 0 ? tds : tds.replace(/ style="[^"]*"/, "")}</tr>`
+  ).join("");
+  const html = `<div><table class="wf-editor-table"><tbody>${rowsHtml}</tbody></table></div>`;
+  try {
+    document.execCommand("insertHTML", false, html);
+  } catch {
   }
-  const placeholderEl = placeholder !== void 0 ? placeholder : h("div", { class: "wf-inview-placeholder" });
+}
+function renderTableGrid(hoverRow, hoverCol, onSelect, onHover, onLeave) {
+  const grid = h("div", {
+    class: "wf-editor-table-grid",
+    onMouseLeave: onLeave
+  }, Array.from(
+    { length: MAX },
+    (_, ri) => h(
+      "div",
+      { class: "wf-editor-table-grid-row", key: `r${ri}` },
+      Array.from({ length: MAX }, (_2, ci) => {
+        const isHighlighted = ri <= hoverRow && ci <= hoverCol;
+        return h("div", {
+          class: `wf-editor-table-grid-cell${isHighlighted ? " wf-editor-table-grid-cell--active" : ""}`,
+          key: `${ri}-${ci}`,
+          onMouseEnter: () => onHover(ri, ci),
+          onClick: () => onSelect(ri + 1, ci + 1)
+        });
+      })
+    )
+  ));
+  const label = hoverRow >= 0 && hoverCol >= 0 ? `${hoverRow + 1} \xD7 ${hoverCol + 1} \u8868\u683C` : "\u9009\u62E9\u8868\u683C\u5927\u5C0F";
   return h("div", {
-    class: "wf-inview wf-inview--pending",
-    ref: sentinelRef
-  }, placeholderEl);
+    class: "wf-editor-table-picker",
+    onMouseDown: (e) => e.stopPropagation()
+  }, [
+    grid,
+    h("div", { class: "wf-editor-table-picker-label" }, label)
+  ]);
+}
+
+// src/components/Editor/Editor.ts
+var Editor = (_props, ctx) => {
+  let activeFormats = {};
+  let showLinkInput = false;
+  let linkUrl = "";
+  let mode = "rich";
+  let showImageInput = false;
+  let imageUrl = "";
+  let imageUploading = false;
+  let showTableGrid = false;
+  let tableHoverRow = -1;
+  let tableHoverCol = -1;
+  let sourceText = "";
+  let editorEl;
+  return (props) => {
+    const { value = "", onChange, onUpload, placeholder = "", disabled = false, minHeight = "200px" } = props;
+    const toolbarItems = props.toolbar ?? DEFAULT_TOOLBAR;
+    const isRichMode = mode === "rich";
+    const emitChange = (html) => {
+      onChange?.(html);
+    };
+    const handleToolbarItem = (item) => {
+      if (disabled) return;
+      if (item === "source") {
+        if (isRichMode) {
+          sourceText = editorEl?.innerHTML ?? value;
+          mode = "source";
+          ctx.ui.render();
+        } else {
+          mode = "rich";
+          activeFormats = {};
+          ctx.ui.render();
+          onChange?.(value);
+        }
+        return;
+      }
+      if (!isRichMode) return;
+      if (item === "image") {
+        showImageInput = true;
+        imageUrl = "";
+        ctx.ui.render();
+        return;
+      }
+      if (item === "link") {
+        const sel = window.getSelection();
+        if (!sel || sel.isCollapsed) {
+          showLinkInput = true;
+          linkUrl = "";
+          ctx.ui.render();
+          return;
+        }
+        const existing = document.queryCommandState("createLink");
+        if (existing) {
+          exec("unlink");
+          activeFormats = queryFormats();
+          ctx.ui.render();
+        } else {
+          showLinkInput = true;
+          linkUrl = "";
+          ctx.ui.render();
+        }
+        return;
+      }
+      execFormat(item);
+      activeFormats = queryFormats();
+      ctx.ui.render();
+      if (editorEl && onChange) emitChange(editorEl.innerHTML);
+    };
+    const confirmLink = (url) => {
+      showLinkInput = false;
+      ctx.ui.render();
+      if (!url) return;
+      if (editorEl) editorEl.focus();
+      exec("createLink", url);
+      activeFormats = queryFormats();
+      if (editorEl && onChange) emitChange(editorEl.innerHTML);
+    };
+    const cancelLink = () => {
+      showLinkInput = false;
+      linkUrl = "";
+      ctx.ui.render();
+    };
+    const insertImageFn = (url) => {
+      if (!url) return;
+      exec("insertImage", url);
+      activeFormats = queryFormats();
+      if (editorEl && onChange) emitChange(editorEl.innerHTML);
+    };
+    const handleImageFile = async (files) => {
+      const file = files[0];
+      if (!file) return;
+      imageUploading = true;
+      ctx.ui.render();
+      try {
+        const url = await onUpload(file);
+        insertImageFn(url);
+        showImageInput = false;
+        imageUrl = "";
+        ctx.ui.render();
+      } catch {
+      } finally {
+        imageUploading = false;
+        ctx.ui.render();
+      }
+    };
+    const confirmImageUrl = (url) => {
+      showImageInput = false;
+      imageUrl = "";
+      ctx.ui.render();
+      if (editorEl) editorEl.focus();
+      insertImageFn(url);
+    };
+    const cancelImage = () => {
+      showImageInput = false;
+      imageUrl = "";
+      ctx.ui.render();
+    };
+    const handleTableSelect = (rows, cols) => {
+      showTableGrid = false;
+      tableHoverRow = -1;
+      tableHoverCol = -1;
+      ctx.ui.render();
+      if (editorEl) editorEl.focus();
+      insertTable(rows, cols);
+      if (editorEl && onChange) emitChange(editorEl.innerHTML);
+    };
+    const handleTableHover = (row, col) => {
+      tableHoverRow = row;
+      tableHoverCol = col;
+      ctx.ui.render();
+    };
+    const handleTableLeave = () => {
+      tableHoverRow = -1;
+      tableHoverCol = -1;
+      ctx.ui.render();
+    };
+    const tableButton = h("button", {
+      key: "table",
+      class: "wf-editor-tb-btn",
+      type: "button",
+      title: "\u63D2\u5165\u8868\u683C",
+      "aria-label": "\u63D2\u5165\u8868\u683C",
+      "data-item": "table"
+    }, "\u229E");
+    const tableGrid = showTableGrid ? renderTableGrid(
+      tableHoverRow,
+      tableHoverCol,
+      handleTableSelect,
+      handleTableHover,
+      handleTableLeave
+    ) : null;
+    const tablePopover = h(Popover, {
+      key: "table",
+      open: isRichMode && !!showTableGrid,
+      onOpenChange: (v) => {
+        showTableGrid = v;
+        ctx.ui.render();
+      },
+      content: tableGrid
+    }, tableButton);
+    const handleRichInput = (e) => {
+      if (disabled) return;
+      emitChange(e.currentTarget.innerHTML);
+    };
+    const handleSourceInput = (e) => {
+      const val = e.target.value;
+      onChange?.(val);
+    };
+    const editorRef = (el) => {
+      if (el) editorEl = el;
+      return () => {
+        editorEl = void 0;
+      };
+    };
+    const handleKeyUp = (e) => {
+      if (disabled || !isRichMode) return;
+      const isFormatShortcut = (e.ctrlKey || e.metaKey) && ["b", "i", "u"].includes(e.key.toLowerCase());
+      if (isFormatShortcut) {
+        activeFormats = queryFormats();
+        ctx.ui.render();
+        if (editorEl && onChange) emitChange(editorEl.innerHTML);
+      }
+    };
+    const handleMouseUp = () => {
+      if (!isRichMode) return;
+      activeFormats = queryFormats();
+      ctx.ui.render();
+    };
+    const handleMouseDown = () => {
+      let needsRender = false;
+      if (showLinkInput) {
+        showLinkInput = false;
+        needsRender = true;
+      }
+      if (showImageInput) {
+        showImageInput = false;
+        needsRender = true;
+      }
+      if (needsRender) ctx.ui.render();
+    };
+    const linkModal = isRichMode && showLinkInput ? h(
+      Modal,
+      {
+        open: true,
+        title: "\u63D2\u5165\u94FE\u63A5",
+        onClose: cancelLink,
+        footer: [
+          h("button", { class: "wf-btn wf-btn--ghost wf-btn--sm", type: "button", onClick: cancelLink }, "\u53D6\u6D88"),
+          h("button", {
+            class: "wf-btn wf-btn--primary wf-btn--sm",
+            type: "button",
+            onClick: () => {
+              const input = document.querySelector("[data-editor-link-input]");
+              confirmLink(input?.value ?? "");
+            }
+          }, "\u786E\u5B9A")
+        ]
+      },
+      h("input", {
+        type: "url",
+        class: "wf-editor-link-input",
+        placeholder: "https://...",
+        value: linkUrl,
+        "data-editor-link-input": true,
+        onInput: (e) => {
+          linkUrl = e.target.value;
+          ctx.ui.render();
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") confirmLink(e.target.value);
+          if (e.key === "Escape") cancelLink();
+        }
+      })
+    ) : null;
+    const imageBodyChildren = [];
+    if (onUpload) {
+      imageBodyChildren.push(h(FileUpload, {
+        accept: "image/*",
+        multiple: false,
+        disabled: imageUploading,
+        onChange: handleImageFile
+      }, h("div", { class: "wf-editor-img-zone" }, [
+        h("span", { class: "wf-editor-img-zone-icon" }, "\u{1F5BC}"),
+        h("span", { class: "wf-editor-img-zone-text" }, imageUploading ? "\u4E0A\u4F20\u4E2D..." : "\u70B9\u51FB\u6216\u62D6\u62FD\u4E0A\u4F20\u56FE\u7247")
+      ])));
+      imageBodyChildren.push(h("span", { class: "wf-editor-img-or" }, "\u6216"));
+    }
+    imageBodyChildren.push(h("input", {
+      type: "url",
+      class: "wf-editor-link-input",
+      placeholder: onUpload ? "\u7C98\u8D34\u56FE\u7247\u94FE\u63A5" : "https://...",
+      value: imageUrl,
+      "data-image-input": true,
+      disabled: imageUploading || void 0,
+      onInput: (e) => {
+        imageUrl = e.target.value;
+        ctx.ui.render();
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter") confirmImageUrl(e.target.value);
+        if (e.key === "Escape") cancelImage();
+      }
+    }));
+    const imageModal = isRichMode && showImageInput ? h(
+      Modal,
+      {
+        open: true,
+        title: "\u63D2\u5165\u56FE\u7247",
+        onClose: cancelImage,
+        footer: [
+          h("button", { class: "wf-btn wf-btn--ghost wf-btn--sm", type: "button", disabled: imageUploading || void 0, onClick: cancelImage }, "\u53D6\u6D88"),
+          h("button", {
+            class: "wf-btn wf-btn--primary wf-btn--sm",
+            type: "button",
+            disabled: imageUploading || void 0,
+            onClick: () => {
+              const input = document.querySelector("[data-image-input]");
+              confirmImageUrl(input?.value ?? "");
+            }
+          }, onUpload ? "\u63D2\u5165" : "\u786E\u5B9A")
+        ]
+      },
+      h("div", { class: "wf-stack", style: "gap:8px" }, imageBodyChildren)
+    ) : null;
+    let editorBody = null;
+    if (isRichMode) {
+      const editorClass = [
+        "wf-editor-content",
+        disabled && "wf-editor-content--disabled",
+        placeholder && "wf-editor-content--has-placeholder"
+      ].filter(Boolean).join(" ");
+      editorBody = h("div", {
+        class: editorClass,
+        contentEditable: !disabled,
+        innerHTML: isRichMode ? value : sourceText,
+        "data-placeholder": placeholder || void 0,
+        style: { minHeight },
+        onInput: handleRichInput,
+        onKeyUp: handleKeyUp,
+        onMouseUp: handleMouseUp,
+        onMouseDown: handleMouseDown,
+        ref: editorRef
+      });
+    } else {
+      editorBody = h("textarea", {
+        class: "wf-editor-source",
+        value,
+        disabled,
+        style: { minHeight },
+        onInput: handleSourceInput
+      });
+    }
+    const customRender = {
+      table: () => tablePopover
+    };
+    return h("div", {
+      class: `wf-editor${disabled ? " wf-editor--disabled" : ""}`
+    }, [
+      !disabled && toolbarItems.length > 0 ? renderToolbar(toolbarItems, activeFormats, !isRichMode, handleToolbarItem, customRender) : null,
+      linkModal,
+      imageModal,
+      editorBody,
+      h("input", { type: "hidden", value, "aria-hidden": "true" })
+    ]);
+  };
 };
 export {
   Accordion,
@@ -1075,10 +2332,13 @@ export {
   Breadcrumb,
   Button,
   Card,
+  Chart,
   Checkbox,
+  DatePicker,
   Divider,
   Drawer,
   Dropdown,
+  Editor,
   EmptyState,
   Field,
   FileUpload,