@sia.soul/sia-react-ui 0.1.22 → 0.1.24

package/dist/chart.css

@@ -1034,3 +1034,24 @@
 .sia-chart__mark:focus > .sia-chart__mixed-hollow-symbol {
   stroke-width: 4;
 }
+
+/* src/title-tooltip.css */
+body > .sia-title-tooltip[data-sia-popup-layer] {
+  position: fixed;
+  z-index: 1800;
+  display: block;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(320px, calc(100vw - 16px));
+  max-height: calc(100vh - 16px);
+  padding: 7px 10px;
+  color: var(--sia-color-text, #1f2329);
+  background: var(--sia-color-surface, #fff);
+  border: 1px solid var(--sia-color-border, #d9d9d9);
+  border-radius: var(--sia-radius, 6px);
+  box-shadow: var(--sia-shadow-popup, 0 4px 16px rgb(0 0 0 / 12%));
+  font: 400 13px/1.5 system-ui, sans-serif;
+  pointer-events: none;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}

package/dist/chart.js

@@ -56,10 +56,10 @@ import {
   smoothSvgPath,
   svgArcPath,
   transferCompositeValue
-} from "./chunk-OKP4DIQH.js";
-import "./chunk-YT6E3X2K.js";
-import "./chunk-TZGUBGA4.js";
-import "./chunk-3VJ4CZDQ.js";
+} from "./chunk-GUXAWU63.js";
+import "./chunk-OH6YILJW.js";
+import "./chunk-6WBABNAX.js";
+import "./chunk-NSSPGXNM.js";
 export {
   BarChart,
   CHART_VIEWBOX_HEIGHT,

package/dist/{chunk-3TRRBMXY.js → chunk-6R7JY7IY.js}

@@ -1,18 +1,19 @@
 import {
   Dropdown,
   Icon,
-  Input,
-  PopupPortal
-} from "./chunk-KLI65JVD.js";
+  Input
+} from "./chunk-LRPQ5FGE.js";
 import {
   Button
-} from "./chunk-TZGUBGA4.js";
+} from "./chunk-6WBABNAX.js";
 import {
   ControlSizeContext,
+  PopupPortal,
   useControlSize,
   useControllableState,
-  useFloatingPlaceholder
-} from "./chunk-3VJ4CZDQ.js";
+  useFloatingPlaceholder,
+  withTitleTooltip
+} from "./chunk-NSSPGXNM.js";
 
 // src/components/Checkbox.tsx
 import { createContext, forwardRef, useContext, useEffect, useId, useMemo, useRef } from "react";
@@ -37,7 +38,7 @@ var CheckboxRoot = forwardRef(function Checkbox({ value, size: sizeProp, indeter
     /* @__PURE__ */ jsx(
       "input",
       {
-        ...props,
+        ...withTitleTooltip(props),
         ref: setRef,
         id: props.id ?? fallbackId,
         className: "sia-checkbox__input",
@@ -289,7 +290,7 @@ function Popover({ title, content, trigger = "click", overlayClassName = "", ...
 function Timeline({ items = [], mode = "left", pending = false, pendingDot, reverse = false, className = "", ...props }) {
   const values = [...items, ...pending ? [{ children: pending === true ? "\u52A0\u8F7D\u4E2D..." : pending, dot: pendingDot ?? /* @__PURE__ */ jsx2(Icon, { name: "loader", className: "sia-spin-icon" }) }] : []];
   if (reverse) values.reverse();
-  return /* @__PURE__ */ jsx2("ul", { className: `sia-timeline sia-timeline--${mode} ${className}`.trim(), ...props, children: values.map((item, index) => {
+  return /* @__PURE__ */ jsx2("ul", { className: `sia-timeline sia-timeline--${mode} ${className}`.trim(), ...withTitleTooltip(props), children: values.map((item, index) => {
     const position = item.position ?? (mode === "alternate" ? index % 2 ? "right" : "left" : mode);
     return /* @__PURE__ */ jsxs2("li", { className: `sia-timeline__item sia-timeline__item--${position}`, children: [
       item.label ? /* @__PURE__ */ jsx2("span", { className: "sia-timeline__label", children: item.label }) : null,
@@ -478,7 +479,7 @@ function Tree({
         /* @__PURE__ */ jsx2(
           "div",
           {
-            ...rowProps,
+            ...withTitleTooltip(rowProps),
             className: `sia-tree__row${blockNode ? " sia-tree__row--block" : ""}${sticky ? " sia-tree__row--sticky" : ""} ${rowClassName}`.trim(),
             style: {
               ...rowStyle,
@@ -538,7 +539,7 @@ function Tree({
       ] }, node.key);
     });
   }
-  return /* @__PURE__ */ jsx2("div", { className: `sia-tree${showLine ? " sia-tree--line" : ""}${stickyAncestors ? " sia-tree--sticky-ancestors" : ""} ${className}`.trim(), role: "tree", "aria-multiselectable": multiple || void 0, ...props, children: render(treeData) });
+  return /* @__PURE__ */ jsx2("div", { className: `sia-tree${showLine ? " sia-tree--line" : ""}${stickyAncestors ? " sia-tree--sticky-ancestors" : ""} ${className}`.trim(), role: "tree", "aria-multiselectable": multiple || void 0, ...withTitleTooltip(props), children: render(treeData) });
 }
 
 // src/components/Modal.tsx
@@ -653,6 +654,7 @@ var ModalRoot = forwardRef2(function Modal({
   keyboard = true,
   centered = false,
   width = 520,
+  height,
   zIndex = 1e3,
   getContainer,
   onOk,
@@ -728,6 +730,7 @@ var ModalRoot = forwardRef2(function Modal({
   useOverlayLifecycle(rendered, localRef, requestClose, keyboard);
   if (!rendered) return null;
   const mergedStyle = {
+    ...height !== void 0 ? { display: "flex", flexDirection: "column", height, maxHeight: "calc(100dvh - 48px)" } : {},
     ...style,
     "--sia-modal-width": typeof width === "number" ? `${width}px` : width
   };
@@ -755,17 +758,17 @@ var ModalRoot = forwardRef2(function Modal({
           "aria-modal": "true",
           "aria-labelledby": title ? titleId : void 0,
           tabIndex: -1,
-          ...props,
+          ...withTitleTooltip(props),
           children: [
-            /* @__PURE__ */ jsxs3("div", { className: "sia-modal__header", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "sia-modal__header", style: height !== void 0 ? { flexShrink: 0 } : void 0, children: [
               /* @__PURE__ */ jsxs3("div", { className: "sia-modal__heading", children: [
                 typeIcons[type] ? /* @__PURE__ */ jsx3("span", { className: "sia-modal__type-icon", "aria-hidden": "true", children: typeIcons[type] }) : null,
                 title ? /* @__PURE__ */ jsx3("strong", { id: titleId, children: title }) : null
               ] }),
               closable ? /* @__PURE__ */ jsx3("button", { type: "button", className: "sia-modal__close", "aria-label": "\u5173\u95ED\u5BF9\u8BDD\u6846", onClick: requestClose, children: /* @__PURE__ */ jsx3(Icon, { name: "close", size: 17 }) }) : null
             ] }),
-            children !== void 0 ? /* @__PURE__ */ jsx3("div", { className: "sia-modal__body", children }) : null,
-            footer !== null ? /* @__PURE__ */ jsxs3("div", { className: "sia-modal__footer", children: [
+            children !== void 0 ? /* @__PURE__ */ jsx3("div", { className: "sia-modal__body", style: height !== void 0 ? { flex: 1, minHeight: 0, overflow: "auto" } : void 0, children }) : null,
+            footer !== null ? /* @__PURE__ */ jsxs3("div", { className: "sia-modal__footer", style: height !== void 0 ? { flexShrink: 0 } : void 0, children: [
               footer === void 0 && footerExtra != null ? /* @__PURE__ */ jsx3("div", { style: { marginRight: "auto" }, children: footerExtra }) : null,
               footer ?? defaultFooter
             ] }) : null
@@ -1521,6 +1524,8 @@ var Select = forwardRef3(function Select2({
   const [openedMode, setOpenedMode] = useState5(automaticMode);
   const popupMode = open ? openedMode : automaticMode;
   const [modalValues, setModalValues] = useState5([]);
+  const [modalSubmitting, setModalSubmitting] = useState5(false);
+  const modalSubmitLock = useRef7(false);
   const [selectedOnly, setSelectedOnly] = useState5(false);
   const [query, setQuery] = useState5("");
   const [activeIndex, setActiveIndex] = useState5(-1);
@@ -1541,9 +1546,10 @@ var Select = forwardRef3(function Select2({
     }
   });
   const selectedValues = useMemo4(() => {
+    if (currentValue == null || currentValue === "" && !options.some((option) => option.value === "")) return [];
     if (mode === "multiple") return Array.isArray(currentValue) ? currentValue : currentValue === null ? [] : [currentValue];
     return Array.isArray(currentValue) ? currentValue.slice(0, 1) : currentValue === null ? [] : [currentValue];
-  }, [currentValue, mode]);
+  }, [currentValue, mode, options]);
   const selectedValueSet = useMemo4(() => new Set(selectedValues), [selectedValues]);
   const availableOptions = useMemo4(() => {
     if (!allowInput) return options;
@@ -1589,6 +1595,24 @@ var Select = forwardRef3(function Select2({
     setQuery("");
     setScrollTop(0);
   }
+  async function confirmModalSelection() {
+    if (disabled || loading || modalSubmitLock.current) return;
+    modalSubmitLock.current = true;
+    const nextValue = multiple ? [...modalValues] : modalValues[0] ?? null;
+    const selected = modalValues.map((selectedValue) => availableOptions.find((option) => option.value === selectedValue) ?? (allowInput ? { value: selectedValue, label: String(selectedValue) } : void 0)).filter((option) => option !== void 0);
+    const extraValues = { ...modalConfig?.extraValues };
+    setModalSubmitting(true);
+    try {
+      const result = await modalConfig?.onConfirm?.(nextValue, multiple ? selected : selected[0] ?? null, extraValues);
+      if (result === false) return;
+      setCurrentValue(nextValue);
+      closeDropdown();
+    } catch {
+    } finally {
+      modalSubmitLock.current = false;
+      setModalSubmitting(false);
+    }
+  }
   function openDropdown() {
     if (disabled || loading) return;
     setOpenedMode(automaticMode);
@@ -1742,7 +1766,7 @@ var Select = forwardRef3(function Select2({
     /* @__PURE__ */ jsxs6(
       "button",
       {
-        ...props,
+        ...withTitleTooltip(props),
         ref: forwardedRef,
         className: `sia-select__trigger${floating.className}`,
         id: selectId,
@@ -1813,6 +1837,7 @@ var Select = forwardRef3(function Select2({
         open,
         title: modalConfig?.title ?? placeholder,
         width: modalConfig?.width ?? 900,
+        confirmLoading: modalSubmitting,
         onOpenChange: (next) => {
           if (!next) closeDropdown();
         },
@@ -1820,14 +1845,12 @@ var Select = forwardRef3(function Select2({
         footer: /* @__PURE__ */ jsxs6("div", { className: "sia-select-modal__footer", children: [
           /* @__PURE__ */ jsx6("div", { children: modalConfig?.footerExtra }),
           /* @__PURE__ */ jsxs6("div", { children: [
-            /* @__PURE__ */ jsx6(Button, { onClick: closeDropdown, children: "\u53D6\u6D88" }),
-            /* @__PURE__ */ jsx6(Button, { variant: "primary", disabled: disabled || loading, onClick: () => {
-              setCurrentValue(multiple ? modalValues : modalValues[0] ?? null);
-              closeDropdown();
-            }, children: "\u786E\u5B9A" })
+            /* @__PURE__ */ jsx6(Button, { disabled: modalSubmitting, onClick: closeDropdown, children: "\u53D6\u6D88" }),
+            /* @__PURE__ */ jsx6(Button, { variant: "primary", loading: modalSubmitting, disabled: disabled || loading, onClick: confirmModalSelection, children: "\u786E\u5B9A" })
           ] })
         ] }),
         children: open ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
+          modalConfig?.headerExtra != null && modalConfig.headerExtra !== false ? /* @__PURE__ */ jsx6("div", { className: "sia-select-modal__header-extra", children: modalConfig.headerExtra }) : null,
           /* @__PURE__ */ jsxs6("div", { className: "sia-select-modal__heading", children: [
             /* @__PURE__ */ jsxs6("div", { role: "tablist", "aria-label": "\u9009\u9879\u8303\u56F4", children: [
               /* @__PURE__ */ jsx6(Button, { role: "tab", "aria-selected": !selectedOnly, variant: "link", onClick: () => setSelectedOnly(false), children: "\u5168\u90E8" }),

package/dist/{chunk-TZGUBGA4.js → chunk-6WBABNAX.js}

@@ -1,6 +1,7 @@
 import {
-  useControlSize
-} from "./chunk-3VJ4CZDQ.js";
+  useControlSize,
+  withTitleTooltip
+} from "./chunk-NSSPGXNM.js";
 
 // src/components/Button.tsx
 import { forwardRef, useRef } from "react";
@@ -49,7 +50,7 @@ var Button = forwardRef(function Button2({
       disabled: disabled || loading,
       onClick: handleClick,
       style: mergedStyle,
-      ...props,
+      ...withTitleTooltip(props),
       children: [
         loading ? /* @__PURE__ */ jsx("span", { className: "sia-button__spinner", "aria-hidden": "true" }) : icon && iconPosition === "start" ? /* @__PURE__ */ jsx("span", { className: "sia-button__icon", children: icon }) : null,
         children !== void 0 && children !== null ? /* @__PURE__ */ jsx("span", { children }) : null,

package/dist/{chunk-OKP4DIQH.js → chunk-GUXAWU63.js}

@@ -1,9 +1,12 @@
 import {
   TextArea
-} from "./chunk-YT6E3X2K.js";
+} from "./chunk-OH6YILJW.js";
 import {
   Button
-} from "./chunk-TZGUBGA4.js";
+} from "./chunk-6WBABNAX.js";
+import {
+  withTitleTooltip
+} from "./chunk-NSSPGXNM.js";
 
 // src/components/ChartWhirlingLoading.tsx
 import { useEffect, useState } from "react";
@@ -73,7 +76,7 @@ function ChartBrush({ bounds, onSelect, onCancel, selectionShape = "band", selec
         tabIndex: 0,
         role: "group",
         "aria-label": "\u62D6\u52A8\u6846\u9009\u7F29\u653E\uFF0CEscape\u53D6\u6D88",
-        ...bounds,
+        ...withTitleTooltip(bounds),
         fill: "transparent",
         style: { cursor: "crosshair", touchAction: "none", pointerEvents: "all" },
         onKeyDown: (event) => {
@@ -327,27 +330,27 @@ function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, p
     return nearestTimelineIndex(ratios, (p.x - start) / (end - start));
   };
   return /* @__PURE__ */ jsxs3("g", { "data-chart-node-timeline": "", "aria-label": "\u56FE\u8868\u65F6\u95F4\u8F74", fontSize: 12, fill: "#666", children: [
-    /* @__PURE__ */ jsxs3("g", { role: "button", tabIndex: 0, "aria-label": "\u4E0A\u4E00\u5E74", ...activate(() => step(-1)), children: [
+    /* @__PURE__ */ jsxs3("g", { role: "button", tabIndex: 0, "aria-label": "\u4E0A\u4E00\u5E74", ...withTitleTooltip(activate(() => step(-1))), children: [
       /* @__PURE__ */ jsx4("rect", { x, y: y - 14, width: 24, height: 28, fill: "transparent" }),
       /* @__PURE__ */ jsx4("path", { d: `M${x + 17} ${y - 7} L${x + 7} ${y} L${x + 17} ${y + 7}`, fill: "none", stroke: "#666", strokeWidth: 2 })
     ] }),
-    /* @__PURE__ */ jsxs3("g", { role: "button", tabIndex: 0, "aria-label": playing ? "\u6682\u505C\u65F6\u95F4\u8F74" : "\u64AD\u653E\u65F6\u95F4\u8F74", ...activate(() => {
+    /* @__PURE__ */ jsxs3("g", { role: "button", tabIndex: 0, "aria-label": playing ? "\u6682\u505C\u65F6\u95F4\u8F74" : "\u64AD\u653E\u65F6\u95F4\u8F74", ...withTitleTooltip(activate(() => {
       cancelPending();
       if (playing) setPlaying(false);
       else {
         onChange((shown + 1) % labels.length);
         setPlaying(true);
       }
-    }), children: [
+    })), children: [
       /* @__PURE__ */ jsx4("rect", { x: x + 30, y: y - 14, width: 24, height: 28, fill: "transparent" }),
       playing ? /* @__PURE__ */ jsx4("path", { d: `M${x + 37} ${y - 7} V${y + 7} M${x + 47} ${y - 7} V${y + 7}`, fill: "none", stroke: "#666", strokeWidth: 3 }) : /* @__PURE__ */ jsx4("path", { d: `M${x + 36} ${y - 8} L${x + 50} ${y} L${x + 36} ${y + 8} Z` })
     ] }),
-    /* @__PURE__ */ jsxs3("g", { role: "button", tabIndex: 0, "aria-label": "\u4E0B\u4E00\u5E74", ...activate(() => step(1)), children: [
+    /* @__PURE__ */ jsxs3("g", { role: "button", tabIndex: 0, "aria-label": "\u4E0B\u4E00\u5E74", ...withTitleTooltip(activate(() => step(1))), children: [
       /* @__PURE__ */ jsx4("rect", { x: x + 60, y: y - 14, width: 24, height: 28, fill: "transparent" }),
       /* @__PURE__ */ jsx4("path", { d: `M${x + 67} ${y - 7} L${x + 77} ${y} L${x + 67} ${y + 7}`, fill: "none", stroke: "#666", strokeWidth: 2 })
     ] }),
     /* @__PURE__ */ jsx4("line", { x1: start, x2: end, y1: y, y2: y, stroke: "#666", strokeWidth: 1, strokeDasharray: "5 5" }),
-    labels.map((label, index) => /* @__PURE__ */ jsxs3("g", { role: "button", tabIndex: 0, "aria-label": `\u5E74\u4EFD ${label}`, "aria-pressed": value === index, ...activate(() => select(index)), children: [
+    labels.map((label, index) => /* @__PURE__ */ jsxs3("g", { role: "button", tabIndex: 0, "aria-label": `\u5E74\u4EFD ${label}`, "aria-pressed": value === index, ...withTitleTooltip(activate(() => select(index))), children: [
       /* @__PURE__ */ jsx4("rect", { x: position(index) - 20, y: y - 12, width: 40, height: 40, fill: "transparent" }),
       /* @__PURE__ */ jsx4("path", { "data-timeline-node": index, d: `M${position(index)} ${y - 4} L${position(index) + 4} ${y} L${position(index)} ${y + 4} L${position(index) - 4} ${y} Z`, fill: "#fff", stroke: "#666" }),
       /* @__PURE__ */ jsx4("text", { x: position(index), y: y + 24, textAnchor: "middle", children: label })
@@ -489,10 +492,10 @@ function ChartVerticalRange({ min, max, x, y, length, thickness, colors, range,
     /* @__PURE__ */ jsx5("text", { x, y: y - 5, children: endLabels?.[1] ?? max }),
     /* @__PURE__ */ jsx5("rect", { x, y, width: thickness, height: Math.max(0, position(high) - y), fill: "#ccc", pointerEvents: "none" }),
     /* @__PURE__ */ jsx5("rect", { x, y: position(low), width: thickness, height: Math.max(0, y + length - position(low)), fill: "#ccc", pointerEvents: "none" }),
-    /* @__PURE__ */ jsx5("rect", { "data-range-selection": "", x, y: position(high), width: thickness, height: Math.max(0, position(low) - position(high)), fill: "transparent", style: { cursor: readOnly ? "default" : "move" }, ...handlers(2) }),
+    /* @__PURE__ */ jsx5("rect", { "data-range-selection": "", x, y: position(high), width: thickness, height: Math.max(0, position(low) - position(high)), fill: "transparent", style: { cursor: readOnly ? "default" : "move" }, ...withTitleTooltip(handlers(2)) }),
     !readOnly && [0, 1].map((index) => {
       const value = index === 0 ? low : high, py = position(value), direction = index === 0 ? 1 : -1;
-      return /* @__PURE__ */ jsxs4("g", { role: "slider", "aria-label": `\u503C\u57DF${index === 0 ? "\u4E0B\u9650" : "\u4E0A\u9650"}`, "aria-valuemin": index === 0 ? min : low, "aria-valuemax": index === 0 ? high : max, "aria-valuenow": value, "aria-orientation": "vertical", tabIndex: 0, style: { cursor: "ns-resize", pointerEvents: "all" }, ...handlers(index), onKeyDown: (event) => {
+      return /* @__PURE__ */ jsxs4("g", { role: "slider", "aria-label": `\u503C\u57DF${index === 0 ? "\u4E0B\u9650" : "\u4E0A\u9650"}`, "aria-valuemin": index === 0 ? min : low, "aria-valuemax": index === 0 ? high : max, "aria-valuenow": value, "aria-orientation": "vertical", tabIndex: 0, style: { cursor: "ns-resize", pointerEvents: "all" }, ...withTitleTooltip(handlers(index)), onKeyDown: (event) => {
         const step = span / 100;
         const next = event.key === "Home" ? min : event.key === "End" ? max : ["ArrowUp", "ArrowRight"].includes(event.key) ? value + step : ["ArrowDown", "ArrowLeft"].includes(event.key) ? value - step : void 0;
         if (next !== void 0) {
@@ -579,10 +582,10 @@ function ChartHorizontalRange({ min, max, x, y, length, thickness, colors, range
     /* @__PURE__ */ jsx6("text", { x: x + length + 10, y: y + thickness / 2, dominantBaseline: "central", children: endLabels?.[0] ?? min }),
     /* @__PURE__ */ jsx6("rect", { x, y, width: Math.max(0, position(high) - x), height: thickness, fill: "#ccc", pointerEvents: "none" }),
     /* @__PURE__ */ jsx6("rect", { x: position(low), y, width: Math.max(0, x + length - position(low)), height: thickness, fill: "#ccc", pointerEvents: "none" }),
-    /* @__PURE__ */ jsx6("rect", { "data-range-selection": "", x: position(high), y, width: Math.max(0, position(low) - position(high)), height: thickness, fill: "transparent", style: { cursor: "move" }, ...handlers(2) }),
+    /* @__PURE__ */ jsx6("rect", { "data-range-selection": "", x: position(high), y, width: Math.max(0, position(low) - position(high)), height: thickness, fill: "transparent", style: { cursor: "move" }, ...withTitleTooltip(handlers(2)) }),
     [0, 1].map((index) => {
       const value = index === 0 ? low : high, px = position(value), direction = index === 0 ? 1 : -1;
-      return /* @__PURE__ */ jsxs5("g", { role: "slider", "aria-label": "\u503C\u57DF" + (index === 0 ? "\u4E0B\u9650" : "\u4E0A\u9650"), "aria-valuemin": index === 0 ? min : low, "aria-valuemax": index === 0 ? high : max, "aria-valuenow": value, "aria-orientation": "horizontal", tabIndex: 0, style: { cursor: "ew-resize", pointerEvents: "all" }, ...handlers(index), onKeyDown: (event) => {
+      return /* @__PURE__ */ jsxs5("g", { role: "slider", "aria-label": "\u503C\u57DF" + (index === 0 ? "\u4E0B\u9650" : "\u4E0A\u9650"), "aria-valuemin": index === 0 ? min : low, "aria-valuemax": index === 0 ? high : max, "aria-valuenow": value, "aria-orientation": "horizontal", tabIndex: 0, style: { cursor: "ew-resize", pointerEvents: "all" }, ...withTitleTooltip(handlers(index)), onKeyDown: (event) => {
         const step = span / 100, next = event.key === "Home" ? min : event.key === "End" ? max : ["ArrowUp", "ArrowLeft"].includes(event.key) ? value + step : ["ArrowDown", "ArrowRight"].includes(event.key) ? value - step : void 0;
         if (next !== void 0) {
           event.preventDefault();
@@ -744,7 +747,7 @@ function toCssSize(value, fallback) {
 var ChartComposite = forwardRef(function ChartComposite2({ layers, width = "100%", height = 320, ariaLabel = "\u7EC4\u5408\u56FE\u8868", className = "", style, ...props }, ref) {
   const host = useRef6(null);
   useImperativeHandle(ref, () => ({ toSvgString: () => host.current ? serializeChartComposite(host.current) : null, saveAsImage: (filename) => saveCompositeImage(host.current ? serializeChartComposite(host.current) : null, filename) }), []);
-  return /* @__PURE__ */ jsx7("div", { ...props, ref: host, className: `sia-chart-composite${className ? ` ${className}` : ""}`, style: { ...style, width: toCssSize(width, "100%"), height: toCssSize(height, "320px") }, role: "group", "aria-label": ariaLabel, children: layers.map((layer, index) => /* @__PURE__ */ jsx7("div", { className: "sia-chart-composite__layer", style: { left: layer.left ?? 0, top: layer.top ?? 0, width: layer.width ?? "100%", height: layer.height ?? "100%", zIndex: layer.zIndex ?? index, pointerEvents: layer.pointerEvents }, children: layer.content }, layer.key ?? index)) });
+  return /* @__PURE__ */ jsx7("div", { ...withTitleTooltip(props), ref: host, className: `sia-chart-composite${className ? ` ${className}` : ""}`, style: { ...style, width: toCssSize(width, "100%"), height: toCssSize(height, "320px") }, role: "group", "aria-label": ariaLabel, children: layers.map((layer, index) => /* @__PURE__ */ jsx7("div", { className: "sia-chart-composite__layer", style: { left: layer.left ?? 0, top: layer.top ?? 0, width: layer.width ?? "100%", height: layer.height ?? "100%", zIndex: layer.zIndex ?? index, pointerEvents: layer.pointerEvents }, children: layer.content }, layer.key ?? index)) });
 });
 var useTooltipLayoutEffect = typeof window === "undefined" ? useEffect6 : useLayoutEffect;
 function ChartTooltip({ open, left, top, children, enterable = false, inheritTextStyle = false, placement = "above", className = "", style, ...props }) {
@@ -767,7 +770,7 @@ function ChartTooltip({ open, left, top, children, enterable = false, inheritTex
   return /* @__PURE__ */ jsx7(
     "div",
     {
-      ...props,
+      ...withTitleTooltip(props),
       ref: elementRef,
       className: `sia-chart__tooltip${inheritTextStyle ? " sia-chart__tooltip--inherit-text" : ""}${className ? ` ${className}` : ""}`,
       role: "tooltip",
@@ -846,7 +849,7 @@ function ChartToolbox({
         {
           type: "button",
           className: "sia-chart-toolbox__button",
-          title: TOOLBOX_LABELS[feature],
+          ...withTitleTooltip({ title: TOOLBOX_LABELS[feature] }),
           "aria-label": TOOLBOX_LABELS[feature],
           "aria-pressed": feature === "mark" ? markActive : feature === "dataZoom" ? zoomActive : void 0,
           onClick: featureActions[feature],
@@ -854,9 +857,9 @@ function ChartToolbox({
         }
       ),
       feature === "mark" ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
-        /* @__PURE__ */ jsx7("button", { type: "button", className: "sia-chart-toolbox__button", "aria-label": "\u64A4\u9500\u6807\u7EBF", title: "\u64A4\u9500\u6807\u7EBF", disabled: !markCount, onClick: onMarkUndo, children: /* @__PURE__ */ jsx7(ToolboxIcon, { children: /* @__PURE__ */ jsx7("path", { d: "M4 8h10a6 6 0 0 1 0 12M4 8l5-5M4 8l5 5" }) }) }),
-        /* @__PURE__ */ jsx7("button", { type: "button", className: "sia-chart-toolbox__button", "aria-label": "\u6E05\u7A7A\u6807\u7EBF", title: "\u6E05\u7A7A\u6807\u7EBF", disabled: !markCount, onClick: onMarkClear, children: /* @__PURE__ */ jsx7(ToolboxIcon, { children: /* @__PURE__ */ jsx7("path", { d: "M4 6h16M9 6V3h6v3M6 6l1 15h10l1-15M10 10v7M14 10v7" }) }) })
-      ] }) : feature === "dataZoom" && onZoomBack ? /* @__PURE__ */ jsx7("button", { type: "button", className: "sia-chart-toolbox__button", "aria-label": "\u533A\u57DF\u7F29\u653E\u540E\u9000", title: "\u533A\u57DF\u7F29\u653E\u540E\u9000", disabled: zoomBackDisabled, onClick: onZoomBack, children: /* @__PURE__ */ jsx7(ToolboxIcon, { children: /* @__PURE__ */ jsx7("path", { d: "M4 8h10a6 6 0 0 1 0 12M4 8l5-5M4 8l5 5" }) }) }) : null
+        /* @__PURE__ */ jsx7("button", { type: "button", className: "sia-chart-toolbox__button", "aria-label": "\u64A4\u9500\u6807\u7EBF", ...withTitleTooltip({ title: "\u64A4\u9500\u6807\u7EBF" }), disabled: !markCount, onClick: onMarkUndo, children: /* @__PURE__ */ jsx7(ToolboxIcon, { children: /* @__PURE__ */ jsx7("path", { d: "M4 8h10a6 6 0 0 1 0 12M4 8l5-5M4 8l5 5" }) }) }),
+        /* @__PURE__ */ jsx7("button", { type: "button", className: "sia-chart-toolbox__button", "aria-label": "\u6E05\u7A7A\u6807\u7EBF", ...withTitleTooltip({ title: "\u6E05\u7A7A\u6807\u7EBF" }), disabled: !markCount, onClick: onMarkClear, children: /* @__PURE__ */ jsx7(ToolboxIcon, { children: /* @__PURE__ */ jsx7("path", { d: "M4 6h16M9 6V3h6v3M6 6l1 15h10l1-15M10 10v7M14 10v7" }) }) })
+      ] }) : feature === "dataZoom" && onZoomBack ? /* @__PURE__ */ jsx7("button", { type: "button", className: "sia-chart-toolbox__button", "aria-label": "\u533A\u57DF\u7F29\u653E\u540E\u9000", ...withTitleTooltip({ title: "\u533A\u57DF\u7F29\u653E\u540E\u9000" }), disabled: zoomBackDisabled, onClick: onZoomBack, children: /* @__PURE__ */ jsx7(ToolboxIcon, { children: /* @__PURE__ */ jsx7("path", { d: "M4 8h10a6 6 0 0 1 0 12M4 8l5-5M4 8l5 5" }) }) }) : null
     ] }, feature)),
     magicTypes.map((type) => /* @__PURE__ */ jsx7(
       "button",
@@ -865,7 +868,7 @@ function ChartToolbox({
         className: "sia-chart-toolbox__button sia-chart-toolbox__magic",
         "aria-pressed": activeMagicTypes ? activeMagicTypes.includes(type) : activeMagicType === type,
         "aria-label": `\u5207\u6362\u4E3A${{ line: "\u6298\u7EBF\u56FE", bar: "\u67F1\u72B6\u56FE", stack: "\u5806\u79EF", tiled: "\u5E73\u94FA" }[type] ?? type}`,
-        title: `\u5207\u6362\u4E3A${type}`,
+        ...withTitleTooltip({ title: `\u5207\u6362\u4E3A${type}` }),
         onClick: () => onMagicTypeChange?.(type),
         children: ["line", "bar", "stack", "tiled"].includes(type) ? /* @__PURE__ */ jsx7(ToolboxIcon, { children: type === "line" ? /* @__PURE__ */ jsx7("path", { d: "M3 3v18h18M5 16l4-9 5 6 6-10" }) : type === "bar" ? /* @__PURE__ */ jsx7("path", { d: "M3 3v18h18M7 18V10h2v8M12 18V5h2v13M17 18V8h2v10" }) : type === "stack" ? /* @__PURE__ */ jsx7("path", { d: "M4 4h16v4H4zM4 10h16v4H4zM4 16h16v4H4z" }) : /* @__PURE__ */ jsx7("path", { d: "M4 4h4v16H4zM10 4h4v16h-4zM16 4h4v16h-4z" }) }) : type
       },
@@ -1034,7 +1037,7 @@ var SiaChart = forwardRef(function SiaChart2({
   return /* @__PURE__ */ jsx7(ChartContext.Provider, { value: context, children: /* @__PURE__ */ jsxs6(
     "div",
     {
-      ...rest,
+      ...withTitleTooltip(rest),
       ref: hostRef,
       className: `sia-chart${loading ? " sia-chart--loading" : ""}${animation ? " sia-chart--animated" : ""}${className ? ` ${className}` : ""}`,
       style: rootStyle,
@@ -1043,7 +1046,7 @@ var SiaChart = forwardRef(function SiaChart2({
         /* @__PURE__ */ jsxs6(
           "svg",
           {
-            ...svgProps,
+            ...withTitleTooltip(svgProps),
             ref: svgRef,
             className: `sia-chart__svg${svgProps?.className ? ` ${svgProps.className}` : ""}`,
             viewBox: `0 0 ${viewBoxSize[0]} ${viewBoxSize[1]}`,
@@ -1187,7 +1190,7 @@ function ChartMark({ tooltip, tooltipPoint, label, onPointerMove, onPointerLeave
   return /* @__PURE__ */ jsx7(
     "g",
     {
-      ...props,
+      ...withTitleTooltip(props),
       className: `sia-chart__mark${props.className ? ` ${props.className}` : ""}`,
       tabIndex: props.tabIndex ?? 0,
       role: "graphics-symbol",
@@ -1456,7 +1459,7 @@ function ChartTimeline({ labels, value, onChange, autoPlay = false, playInterval
     }, Math.max(120, playInterval));
     return () => window.clearInterval(timer);
   }, [labels.length, loop, onChange, playInterval, playing, value]);
-  return /* @__PURE__ */ jsxs6("div", { ...props, className: `sia-chart-timeline${className ? ` ${className}` : ""}`, children: [
+  return /* @__PURE__ */ jsxs6("div", { ...withTitleTooltip(props), className: `sia-chart-timeline${className ? ` ${className}` : ""}`, children: [
     /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": playing ? "\u6682\u505C\u65F6\u95F4\u8F74" : "\u64AD\u653E\u65F6\u95F4\u8F74", onClick: () => setPlaying((current) => !current), children: playing ? "\u2161" : "\u25B6" }),
     /* @__PURE__ */ jsx7("input", { "aria-label": "\u56FE\u8868\u65F6\u95F4\u8F74", type: "range", min: 0, max: Math.max(0, labels.length - 1), value: Math.min(value, Math.max(0, labels.length - 1)), onChange: (event) => onChange(Number(event.target.value)) }),
     /* @__PURE__ */ jsx7("output", { children: labels[value] ?? "" })
@@ -1828,7 +1831,7 @@ function SvgMapPlot({ source, name, data, x, y, width, height, domain, range = d
   const scale = Math.min(width / map.width, height / map.height), left = x + (width - map.width * scale) / 2, top = y + (height - map.height * scale) / 2;
   const project = (point) => [left + (point[0] - map.x) * scale, top + (point[1] - map.y) * scale];
   const markColor = (value) => chartColorRamp(colors, (Math.max(domain[0], Math.min(domain[1], value)) - domain[0]) / Math.max(1, domain[1] - domain[0]));
-  return /* @__PURE__ */ jsxs9("g", { ref: control.host, ...control.handlers, "data-svg-map": name, tabIndex: roam ? 0 : void 0, role: "group", "aria-label": `${name}\u6F2B\u6E38`, style: { touchAction: "none" }, children: [
+  return /* @__PURE__ */ jsxs9("g", { ref: control.host, ...withTitleTooltip(control.handlers), "data-svg-map": name, tabIndex: roam ? 0 : void 0, role: "group", "aria-label": `${name}\u6F2B\u6E38`, style: { touchAction: "none" }, children: [
     roam ? /* @__PURE__ */ jsx12("rect", { x, y, width, height, fill: "transparent" }) : null,
     /* @__PURE__ */ jsxs9("g", { "data-svg-map-transform": "", transform: `translate(${control.view.x} ${control.view.y}) scale(${control.view.scale})`, children: [
       /* @__PURE__ */ jsxs9("g", { transform: `translate(${left} ${top}) scale(${scale}) translate(${-map.x} ${-map.y})`, children: [
@@ -4290,7 +4293,7 @@ var LineChart = forwardRef2(function LineChart2({ calculableMode = "resize", onT
   const PLOT2 = plot;
   const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
   const [zoomValue, setZoomValue] = useZoom(zoom, defaultZoom, onZoomChange);
-  const inlineZoom = dataZoom && zoomControlBounds ? /* @__PURE__ */ jsx30("foreignObject", { className: "sia-chart__inline-zoom sia-chart__inline-zoom--compact", ...zoomControlBounds, children: /* @__PURE__ */ jsx30(ChartDataZoom, { handleLabels: [categories[Math.min(categories.length - 1, Math.floor(Math.min(...zoomValue) / 100 * categories.length))] ?? "", categories[Math.max(0, Math.ceil(Math.max(...zoomValue) / 100 * categories.length) - 1)] ?? ""], shadowBounds: zoomControlBounds, panEnabled: zoomPan, value: zoomValue, dataShadow: series[0]?.data.map(lineValue), onChange: setZoomValue }) }) : null;
+  const inlineZoom = dataZoom && zoomControlBounds ? /* @__PURE__ */ jsx30("foreignObject", { className: "sia-chart__inline-zoom sia-chart__inline-zoom--compact", ...withTitleTooltip(zoomControlBounds), children: /* @__PURE__ */ jsx30(ChartDataZoom, { handleLabels: [categories[Math.min(categories.length - 1, Math.floor(Math.min(...zoomValue) / 100 * categories.length))] ?? "", categories[Math.max(0, Math.ceil(Math.max(...zoomValue) / 100 * categories.length) - 1)] ?? ""], shadowBounds: zoomControlBounds, panEnabled: zoomPan, value: zoomValue, dataShadow: series[0]?.data.map(lineValue), onChange: setZoomValue }) }) : null;
   const [zoomBrushActive, setZoomBrushActive] = useState28(false);
   const [zoomHistory, setZoomHistory] = useState28(() => dataZoom ? [defaultZoom ?? zoom ?? [0, 100]] : []);
   const zoomBrush = dataZoom && zoomBrushActive ? { minSelectionSize: zoomMinSelectionSize, selectionStyle: zoomSelectionStyle, selectionShape: zoomSelectionShape, bounds: PLOT2, onCancel: () => setZoomBrushActive(false), onSelect: (range) => {
@@ -5917,7 +5920,7 @@ var MapChart = forwardRef2(function MapChart2({ overlayProjection, bundledLines,
     ];
   };
   return /* @__PURE__ */ jsxs21(SiaChart, { ...props, ref, toolbox: chartToolbox, empty: !collection?.features.length && !overlayProjection, ariaLabel: props.ariaLabel ?? "\u5730\u56FE", children: [
-    /* @__PURE__ */ jsxs21("g", { ref: roamControl.host, ...roamControl.handlers, "data-map-viewport": true, tabIndex: roam ? 0 : void 0, role: roam ? "group" : void 0, "aria-label": roam ? "\u5730\u56FE\u6F2B\u6E38\uFF1A\u62D6\u52A8\u5E73\u79FB\u3001\u6EDA\u8F6E\u7F29\u653E\u3001Home \u8FD8\u539F" : void 0, style: { touchAction: roam ? "none" : void 0 }, children: [
+    /* @__PURE__ */ jsxs21("g", { ref: roamControl.host, ...withTitleTooltip(roamControl.handlers), "data-map-viewport": true, tabIndex: roam ? 0 : void 0, role: roam ? "group" : void 0, "aria-label": roam ? "\u5730\u56FE\u6F2B\u6E38\uFF1A\u62D6\u52A8\u5E73\u79FB\u3001\u6EDA\u8F6E\u7F29\u653E\u3001Home \u8FD8\u539F" : void 0, style: { touchAction: roam ? "none" : void 0 }, children: [
       roam ? /* @__PURE__ */ jsx30("rect", { x: 0, y: 0, width: props.viewBoxSize?.[0] ?? 720, height: props.viewBoxSize?.[1] ?? 360, fill: "transparent", className: "sia-chart__map-roam-surface" }) : null,
       /* @__PURE__ */ jsxs21("g", { "data-map-transform": true, style: { display: showMap ? void 0 : "none" }, transform: `translate(${view.x} ${view.y}) scale(${view.scale})`, children: [
         collection?.features.map((feature, featureIndex) => {

package/dist/{chunk-QJ4OQNQ4.js → chunk-LA7O3PN4.js}

@@ -1,6 +1,7 @@
 import {
-  useFloatingPlaceholder
-} from "./chunk-3VJ4CZDQ.js";
+  useFloatingPlaceholder,
+  withTitleTooltip
+} from "./chunk-NSSPGXNM.js";
 
 // src/components/MarkdownEditor.tsx
 import { useEffect, useRef, useState } from "react";
@@ -378,7 +379,7 @@ function MarkdownEditor({
       className: ["sia-markdown-editor", floating.className, disabled ? "is-disabled" : "", className].filter(Boolean).join(" "),
       style: editorStyle,
       "data-ready": ready ? "true" : "false",
-      ...props,
+      ...withTitleTooltip(props),
       onBlurCapture: (event) => {
         props.onBlurCapture?.(event);
         const current = editorRef.current?.getValue();