@fangxinyan/lumina 0.6.4 → 0.6.6

package/dist/{Tooltip-WI23DSRQ.css → Tooltip-5FSPJWLX.css}

@@ -5,6 +5,8 @@
   align-self: flex-start;
 }
 .tip {
+  display: block;
+  box-sizing: border-box;
   background: var(--bg-sunken);
   color: var(--fg);
   padding: 6px 10px;
@@ -13,7 +15,7 @@
   font-weight: 500;
   white-space: nowrap;
   box-shadow: var(--neu-shadow-control);
-  pointer-events: none;
+  pointer-events: auto;
   animation: fadeIn var(--dur) var(--ease);
   z-index: 1000;
 }

package/dist/Tooltip.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkF3LHLYX6_cjs = require('./chunk-F3LHLYX6.cjs');
+var chunkRIUDYPRB_cjs = require('./chunk-RIUDYPRB.cjs');
 require('./chunk-YB3IWIOJ.cjs');
 
 
 
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
-  get: function () { return chunkF3LHLYX6_cjs.Tooltip; }
+  get: function () { return chunkRIUDYPRB_cjs.Tooltip; }
 });

package/dist/Tooltip.d.cts

@@ -15,6 +15,8 @@ interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "chil
     /** Controlled visibility alias. */
     visible?: boolean;
     onVisibleChange?: (visible: boolean) => void;
+    /** Delay before closing after leaving trigger / bubble. */
+    closeDelay?: number;
     /** Class for the popped-out bubble. */
     overlayClassName?: string;
     /** Alias used by some popup APIs. */

package/dist/Tooltip.d.ts

@@ -15,6 +15,8 @@ interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "chil
     /** Controlled visibility alias. */
     visible?: boolean;
     onVisibleChange?: (visible: boolean) => void;
+    /** Delay before closing after leaving trigger / bubble. */
+    closeDelay?: number;
     /** Class for the popped-out bubble. */
     overlayClassName?: string;
     /** Alias used by some popup APIs. */

package/dist/Tooltip.js

@@ -1,2 +1,2 @@
-export { Tooltip } from './chunk-XHQGMMH7.js';
+export { Tooltip } from './chunk-SFAGHPBT.js';
 import './chunk-DUFRASGO.js';

package/dist/{Typography-GQNIJ4XD.css → Typography-32QQLD4F.css}

@@ -115,7 +115,7 @@
 .typo-link.disabled {
   color: var(--fg-subtle);
   cursor: not-allowed;
-  pointer-events: none;
+  pointer-events: auto;
   text-decoration: none;
 }
 .typo-link-ext {
@@ -132,16 +132,21 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 22px;
-  height: 22px;
-  margin-left: 6px;
-  border-radius: 7px;
+  width: 20px;
+  height: 20px;
+  margin-left: 5px;
+  border-radius: 6px;
   cursor: pointer;
   color: var(--fg-subtle);
+  line-height: 1;
   transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
-  vertical-align: middle;
+  vertical-align: -0.18em;
   user-select: none;
 }
+.typo-action > svg {
+  display: block;
+  flex-shrink: 0;
+}
 .typo-action:hover {
   color: var(--accent-ink);
   background: var(--bg);
@@ -228,6 +233,31 @@
 }
 .typo-expand:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
 
+.typo-ellipsis-tooltip {
+  display: block;
+  box-sizing: border-box;
+  max-width: min(520px, calc(100vw - 32px));
+  padding: 7px 10px;
+  border-radius: var(--r-sm);
+  background: var(--bg-sunken);
+  color: var(--fg);
+  box-shadow: var(--neu-shadow-control);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.55;
+  white-space: normal;
+  line-break: auto;
+  text-wrap: wrap;
+  text-align: justify;
+  text-align-last: left;
+  text-justify: inter-character;
+  word-break: normal;
+  overflow-wrap: anywhere;
+  pointer-events: auto;
+  animation: fadeIn var(--dur) var(--ease);
+  z-index: 1000;
+}
+
 /* In dark mode, mark needs slightly higher contrast */
 [data-theme="dark"] .typo mark {
   background: color-mix(in oklch, var(--warning) 30%, transparent);

package/dist/Typography.cjs

@@ -1,27 +1,28 @@
 'use strict';
 
-var chunk5JPAUQ5H_cjs = require('./chunk-5JPAUQ5H.cjs');
+var chunkYU5JK247_cjs = require('./chunk-YU5JK247.cjs');
+require('./chunk-YB3IWIOJ.cjs');
 require('./chunk-6LARTGLP.cjs');
 
 
 
 Object.defineProperty(exports, "Link", {
   enumerable: true,
-  get: function () { return chunk5JPAUQ5H_cjs.Link; }
+  get: function () { return chunkYU5JK247_cjs.Link; }
 });
 Object.defineProperty(exports, "Paragraph", {
   enumerable: true,
-  get: function () { return chunk5JPAUQ5H_cjs.Paragraph; }
+  get: function () { return chunkYU5JK247_cjs.Paragraph; }
 });
 Object.defineProperty(exports, "Text", {
   enumerable: true,
-  get: function () { return chunk5JPAUQ5H_cjs.Text; }
+  get: function () { return chunkYU5JK247_cjs.Text; }
 });
 Object.defineProperty(exports, "Title", {
   enumerable: true,
-  get: function () { return chunk5JPAUQ5H_cjs.Title; }
+  get: function () { return chunkYU5JK247_cjs.Title; }
 });
 Object.defineProperty(exports, "Typography", {
   enumerable: true,
-  get: function () { return chunk5JPAUQ5H_cjs.Typography; }
+  get: function () { return chunkYU5JK247_cjs.Typography; }
 });

package/dist/Typography.d.cts

@@ -53,7 +53,7 @@ interface EllipsisConfig {
     symbol?: React.ReactNode;
     /** Fired on expand. */
     onExpand?: (event: React.MouseEvent<HTMLElement>) => void;
-    /** Show full text in a `title` attribute. */
+    /** Show full text in a tooltip when truncated. */
     tooltip?: boolean | React.ReactNode;
     /** Optional suffix that should always remain visible (e.g. an em-dash author). */
     suffix?: string;

package/dist/Typography.d.ts

@@ -53,7 +53,7 @@ interface EllipsisConfig {
     symbol?: React.ReactNode;
     /** Fired on expand. */
     onExpand?: (event: React.MouseEvent<HTMLElement>) => void;
-    /** Show full text in a `title` attribute. */
+    /** Show full text in a tooltip when truncated. */
     tooltip?: boolean | React.ReactNode;
     /** Optional suffix that should always remain visible (e.g. an em-dash author). */
     suffix?: string;

package/dist/Typography.js

@@ -1,2 +1,3 @@
-export { Link, Paragraph, Text, Title, Typography } from './chunk-BCFCSVGJ.js';
+export { Link, Paragraph, Text, Title, Typography } from './chunk-5JNDDWFZ.js';
+import './chunk-DUFRASGO.js';
 import './chunk-YT5NLCRC.js';

package/dist/{chunk-BCFCSVGJ.js → chunk-5JNDDWFZ.js}

@@ -1,9 +1,11 @@
+import { useFloating } from './chunk-DUFRASGO.js';
 import { Icon } from './chunk-YT5NLCRC.js';
 import './tokens-EF34LSWI.css';
 import './shared-NJHRNLRH.css';
-import './Typography-GQNIJ4XD.css';
+import './Typography-32QQLD4F.css';
 import * as React from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function toText(node) {
   if (node == null || node === false) return "";
@@ -31,6 +33,122 @@ function buildClass(props, base, extra) {
     props.className
   ].filter(Boolean).join(" ");
 }
+function assignRef(ref, value) {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  ref.current = value;
+}
+var EllipsisTooltip = React.forwardRef(({ content, children }, forwardedRef) => {
+  const [open, setOpen] = React.useState(false);
+  const openTimerRef = React.useRef();
+  const closeTimerRef = React.useRef();
+  const childRef = children.ref;
+  const {
+    triggerRef,
+    floatingRef,
+    floatingStyle,
+    placement
+  } = useFloating({
+    open,
+    placement: "top",
+    panelWidth: 360,
+    panelHeight: 96,
+    alignCross: "center"
+  });
+  React.useEffect(() => {
+    return () => {
+      window.clearTimeout(openTimerRef.current);
+      window.clearTimeout(closeTimerRef.current);
+    };
+  }, []);
+  const show = React.useCallback(() => {
+    window.clearTimeout(closeTimerRef.current);
+    if (open || openTimerRef.current != null) return;
+    openTimerRef.current = window.setTimeout(() => {
+      openTimerRef.current = void 0;
+      setOpen(true);
+    }, 250);
+  }, [open]);
+  const hide = React.useCallback(() => {
+    window.clearTimeout(openTimerRef.current);
+    openTimerRef.current = void 0;
+    window.clearTimeout(closeTimerRef.current);
+    closeTimerRef.current = window.setTimeout(() => setOpen(false), 300);
+  }, []);
+  const setTriggerRef = React.useCallback(
+    (node) => {
+      triggerRef.current = node;
+      assignRef(forwardedRef, node);
+      assignRef(childRef, node);
+    },
+    [childRef, forwardedRef, triggerRef]
+  );
+  const childProps = children.props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    React.cloneElement(children, {
+      ref: setTriggerRef,
+      onMouseEnter: (event) => {
+        childProps.onMouseEnter?.(event);
+        show();
+      },
+      onMouseOver: (event) => {
+        childProps.onMouseOver?.(event);
+        show();
+      },
+      onMouseMove: (event) => {
+        childProps.onMouseMove?.(event);
+        show();
+      },
+      onMouseLeave: (event) => {
+        childProps.onMouseLeave?.(event);
+        hide();
+      },
+      onPointerEnter: (event) => {
+        childProps.onPointerEnter?.(event);
+        show();
+      },
+      onPointerMove: (event) => {
+        childProps.onPointerMove?.(event);
+        show();
+      },
+      onPointerLeave: (event) => {
+        childProps.onPointerLeave?.(event);
+        hide();
+      },
+      onFocus: (event) => {
+        childProps.onFocus?.(event);
+        show();
+      },
+      onBlur: (event) => {
+        childProps.onBlur?.(event);
+        hide();
+      }
+    }),
+    open && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: floatingRef,
+          className: `typo-ellipsis-tooltip ${placement}`,
+          style: floatingStyle,
+          role: "tooltip",
+          onMouseEnter: show,
+          onMouseMove: show,
+          onMouseLeave: hide,
+          onPointerEnter: show,
+          onPointerMove: show,
+          onPointerLeave: hide,
+          children: content
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+EllipsisTooltip.displayName = "Typography.EllipsisTooltip";
 var CopyAction = ({ config, fallbackText }) => {
   const [copied, setCopied] = React.useState(false);
   const timerRef = React.useRef(null);
@@ -230,7 +348,7 @@ function useTypographyBody(props) {
       }
     );
   }
-  const titleAttr = wantClamp && ellConf.tooltip ? typeof ellConf.tooltip === "string" ? ellConf.tooltip : fallbackText : void 0;
+  const tooltipContent = wantClamp && !expanded && ellConf.tooltip ? ellConf.tooltip === true ? fallbackText : ellConf.tooltip : void 0;
   return {
     editing,
     editConf,
@@ -243,7 +361,7 @@ function useTypographyBody(props) {
     expandNode,
     style,
     extraCls,
-    titleAttr
+    tooltipContent
   };
 }
 var Title = React.forwardRef((props, ref) => {
@@ -271,13 +389,12 @@ var Title = React.forwardRef((props, ref) => {
       }
     );
   }
-  return /* @__PURE__ */ jsxs(
+  const element = /* @__PURE__ */ jsxs(
     Tag,
     {
       ref,
       className: buildClass(rest, `typo typo-title h${level}`, body.extraCls),
       style: body.style,
-      title: body.titleAttr,
       children: [
         body.inner,
         body.expandNode,
@@ -286,6 +403,7 @@ var Title = React.forwardRef((props, ref) => {
       ]
     }
   );
+  return body.tooltipContent ? /* @__PURE__ */ jsx(EllipsisTooltip, { ref, content: body.tooltipContent, children: element }) : element;
 });
 Title.displayName = "Typography.Title";
 var Text = React.forwardRef((props, ref) => {
@@ -313,13 +431,12 @@ var Text = React.forwardRef((props, ref) => {
       }
     );
   }
-  return /* @__PURE__ */ jsxs(
+  const element = /* @__PURE__ */ jsxs(
     Tag,
     {
       ref,
       className: buildClass(rest, "typo typo-text", body.extraCls),
       style: body.style,
-      title: body.titleAttr,
       children: [
         body.inner,
         body.expandNode,
@@ -328,6 +445,7 @@ var Text = React.forwardRef((props, ref) => {
       ]
     }
   );
+  return body.tooltipContent ? /* @__PURE__ */ jsx(EllipsisTooltip, { ref, content: body.tooltipContent, children: element }) : element;
 });
 Text.displayName = "Typography.Text";
 var Paragraph = React.forwardRef(
@@ -354,13 +472,12 @@ var Paragraph = React.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ jsxs(
+    const element = /* @__PURE__ */ jsxs(
       "p",
       {
         ref,
         className: buildClass(props, "typo typo-paragraph", body.extraCls),
         style: body.style,
-        title: body.titleAttr,
         children: [
           body.inner,
           body.expandNode,
@@ -369,6 +486,7 @@ var Paragraph = React.forwardRef(
         ]
       }
     );
+    return body.tooltipContent ? /* @__PURE__ */ jsx(EllipsisTooltip, { ref, content: body.tooltipContent, children: element }) : element;
   }
 );
 Paragraph.displayName = "Typography.Paragraph";
@@ -431,13 +549,12 @@ var Link = React.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ jsxs(
+    const element = /* @__PURE__ */ jsxs(
       "a",
       {
         ref,
         className: buildClass(props, "typo typo-link", body.extraCls),
         style: body.style,
-        title: body.titleAttr,
         target,
         rel: safeRel,
         "aria-disabled": disabled || void 0,
@@ -458,6 +575,7 @@ var Link = React.forwardRef(
         ]
       }
     );
+    return body.tooltipContent ? /* @__PURE__ */ jsx(EllipsisTooltip, { ref, content: body.tooltipContent, children: element }) : element;
   }
 );
 Link.displayName = "Typography.Link";

package/dist/{chunk-F3LHLYX6.cjs → chunk-RIUDYPRB.cjs}

@@ -3,7 +3,7 @@
 var chunkYB3IWIOJ_cjs = require('./chunk-YB3IWIOJ.cjs');
 require('./tokens-EF34LSWI.css');
 require('./shared-NJHRNLRH.css');
-require('./Tooltip-WI23DSRQ.css');
+require('./Tooltip-5FSPJWLX.css');
 var React = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
@@ -45,16 +45,20 @@ var Tooltip = React__namespace.forwardRef(({
   onOpenChange,
   visible,
   onVisibleChange,
+  closeDelay = 300,
   overlayClassName = "",
   popupClassName = "",
   onMouseEnter,
   onMouseLeave,
+  onPointerEnter,
+  onPointerLeave,
   onFocus,
   onBlur,
   ...rest
 }, ref) => {
   const [innerShow, setInnerShow] = React__namespace.useState(defaultOpen);
-  const t = React__namespace.useRef();
+  const openTimerRef = React__namespace.useRef();
+  const closeTimerRef = React__namespace.useRef();
   const controlledShow = openProp ?? visible;
   const show = controlledShow ?? innerShow;
   const resolvedContent = content ?? title;
@@ -64,17 +68,41 @@ var Tooltip = React__namespace.forwardRef(({
     onOpenChange?.(next);
     onVisibleChange?.(next);
   }, [controlledShow, onOpenChange, onVisibleChange]);
-  const open = () => {
+  React__namespace.useEffect(() => {
+    return () => {
+      window.clearTimeout(openTimerRef.current);
+      window.clearTimeout(closeTimerRef.current);
+    };
+  }, []);
+  React__namespace.useEffect(() => {
+    if (disabledTooltip && show) setShow(false);
+  }, [disabledTooltip, setShow, show]);
+  const open = React__namespace.useCallback(() => {
     if (disabledTooltip) return;
-    window.clearTimeout(t.current);
-    t.current = window.setTimeout(() => setShow(true), delay);
-  };
-  const close = () => {
-    window.clearTimeout(t.current);
-    setShow(false);
-  };
+    window.clearTimeout(closeTimerRef.current);
+    window.clearTimeout(openTimerRef.current);
+    if (delay <= 0) {
+      setShow(true);
+      return;
+    }
+    openTimerRef.current = window.setTimeout(() => setShow(true), delay);
+  }, [delay, disabledTooltip, setShow]);
+  const close = React__namespace.useCallback(() => {
+    window.clearTimeout(openTimerRef.current);
+    window.clearTimeout(closeTimerRef.current);
+    if (closeDelay <= 0) {
+      setShow(false);
+      return;
+    }
+    closeTimerRef.current = window.setTimeout(() => setShow(false), closeDelay);
+  }, [closeDelay, setShow]);
   const normalized = normalizePlacement(placement);
-  const { triggerRef, floatingStyle, placement: resolved } = chunkYB3IWIOJ_cjs.useFloating({
+  const {
+    triggerRef,
+    floatingRef,
+    floatingStyle,
+    placement: resolved
+  } = chunkYB3IWIOJ_cjs.useFloating({
     open: show,
     placement: normalized.placement,
     panelWidth: 160,
@@ -103,6 +131,14 @@ var Tooltip = React__namespace.forwardRef(({
           onMouseLeave?.(e);
           close();
         },
+        onPointerEnter: (e) => {
+          onPointerEnter?.(e);
+          open();
+        },
+        onPointerLeave: (e) => {
+          onPointerLeave?.(e);
+          close();
+        },
         onFocus: (e) => {
           onFocus?.(e);
           open();
@@ -116,7 +152,20 @@ var Tooltip = React__namespace.forwardRef(({
       }
     ),
     show && typeof document !== "undefined" && reactDom.createPortal(
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `tip ${resolved} ${overlayClassName} ${popupClassName}`, style: floatingStyle, children: resolvedContent }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: floatingRef,
+          className: `tip ${resolved} ${overlayClassName} ${popupClassName}`,
+          style: floatingStyle,
+          role: "tooltip",
+          onMouseEnter: open,
+          onMouseLeave: close,
+          onPointerEnter: open,
+          onPointerLeave: close,
+          children: resolvedContent
+        }
+      ),
       document.body
     )
   ] });

package/dist/{chunk-XHQGMMH7.js → chunk-SFAGHPBT.js}

@@ -1,7 +1,7 @@
 import { useFloating } from './chunk-DUFRASGO.js';
 import './tokens-EF34LSWI.css';
 import './shared-NJHRNLRH.css';
-import './Tooltip-WI23DSRQ.css';
+import './Tooltip-5FSPJWLX.css';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -23,16 +23,20 @@ var Tooltip = React.forwardRef(({
   onOpenChange,
   visible,
   onVisibleChange,
+  closeDelay = 300,
   overlayClassName = "",
   popupClassName = "",
   onMouseEnter,
   onMouseLeave,
+  onPointerEnter,
+  onPointerLeave,
   onFocus,
   onBlur,
   ...rest
 }, ref) => {
   const [innerShow, setInnerShow] = React.useState(defaultOpen);
-  const t = React.useRef();
+  const openTimerRef = React.useRef();
+  const closeTimerRef = React.useRef();
   const controlledShow = openProp ?? visible;
   const show = controlledShow ?? innerShow;
   const resolvedContent = content ?? title;
@@ -42,17 +46,41 @@ var Tooltip = React.forwardRef(({
     onOpenChange?.(next);
     onVisibleChange?.(next);
   }, [controlledShow, onOpenChange, onVisibleChange]);
-  const open = () => {
+  React.useEffect(() => {
+    return () => {
+      window.clearTimeout(openTimerRef.current);
+      window.clearTimeout(closeTimerRef.current);
+    };
+  }, []);
+  React.useEffect(() => {
+    if (disabledTooltip && show) setShow(false);
+  }, [disabledTooltip, setShow, show]);
+  const open = React.useCallback(() => {
     if (disabledTooltip) return;
-    window.clearTimeout(t.current);
-    t.current = window.setTimeout(() => setShow(true), delay);
-  };
-  const close = () => {
-    window.clearTimeout(t.current);
-    setShow(false);
-  };
+    window.clearTimeout(closeTimerRef.current);
+    window.clearTimeout(openTimerRef.current);
+    if (delay <= 0) {
+      setShow(true);
+      return;
+    }
+    openTimerRef.current = window.setTimeout(() => setShow(true), delay);
+  }, [delay, disabledTooltip, setShow]);
+  const close = React.useCallback(() => {
+    window.clearTimeout(openTimerRef.current);
+    window.clearTimeout(closeTimerRef.current);
+    if (closeDelay <= 0) {
+      setShow(false);
+      return;
+    }
+    closeTimerRef.current = window.setTimeout(() => setShow(false), closeDelay);
+  }, [closeDelay, setShow]);
   const normalized = normalizePlacement(placement);
-  const { triggerRef, floatingStyle, placement: resolved } = useFloating({
+  const {
+    triggerRef,
+    floatingRef,
+    floatingStyle,
+    placement: resolved
+  } = useFloating({
     open: show,
     placement: normalized.placement,
     panelWidth: 160,
@@ -81,6 +109,14 @@ var Tooltip = React.forwardRef(({
           onMouseLeave?.(e);
           close();
         },
+        onPointerEnter: (e) => {
+          onPointerEnter?.(e);
+          open();
+        },
+        onPointerLeave: (e) => {
+          onPointerLeave?.(e);
+          close();
+        },
         onFocus: (e) => {
           onFocus?.(e);
           open();
@@ -94,7 +130,20 @@ var Tooltip = React.forwardRef(({
       }
     ),
     show && typeof document !== "undefined" && createPortal(
-      /* @__PURE__ */ jsx("span", { className: `tip ${resolved} ${overlayClassName} ${popupClassName}`, style: floatingStyle, children: resolvedContent }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: floatingRef,
+          className: `tip ${resolved} ${overlayClassName} ${popupClassName}`,
+          style: floatingStyle,
+          role: "tooltip",
+          onMouseEnter: open,
+          onMouseLeave: close,
+          onPointerEnter: open,
+          onPointerLeave: close,
+          children: resolvedContent
+        }
+      ),
       document.body
     )
   ] });

package/dist/{chunk-5JPAUQ5H.cjs → chunk-YU5JK247.cjs}

@@ -1,10 +1,12 @@
 'use strict';
 
+var chunkYB3IWIOJ_cjs = require('./chunk-YB3IWIOJ.cjs');
 var chunk6LARTGLP_cjs = require('./chunk-6LARTGLP.cjs');
 require('./tokens-EF34LSWI.css');
 require('./shared-NJHRNLRH.css');
-require('./Typography-GQNIJ4XD.css');
+require('./Typography-32QQLD4F.css');
 var React = require('react');
+var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -53,6 +55,122 @@ function buildClass(props, base, extra) {
     props.className
   ].filter(Boolean).join(" ");
 }
+function assignRef(ref, value) {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  ref.current = value;
+}
+var EllipsisTooltip = React__namespace.forwardRef(({ content, children }, forwardedRef) => {
+  const [open, setOpen] = React__namespace.useState(false);
+  const openTimerRef = React__namespace.useRef();
+  const closeTimerRef = React__namespace.useRef();
+  const childRef = children.ref;
+  const {
+    triggerRef,
+    floatingRef,
+    floatingStyle,
+    placement
+  } = chunkYB3IWIOJ_cjs.useFloating({
+    open,
+    placement: "top",
+    panelWidth: 360,
+    panelHeight: 96,
+    alignCross: "center"
+  });
+  React__namespace.useEffect(() => {
+    return () => {
+      window.clearTimeout(openTimerRef.current);
+      window.clearTimeout(closeTimerRef.current);
+    };
+  }, []);
+  const show = React__namespace.useCallback(() => {
+    window.clearTimeout(closeTimerRef.current);
+    if (open || openTimerRef.current != null) return;
+    openTimerRef.current = window.setTimeout(() => {
+      openTimerRef.current = void 0;
+      setOpen(true);
+    }, 250);
+  }, [open]);
+  const hide = React__namespace.useCallback(() => {
+    window.clearTimeout(openTimerRef.current);
+    openTimerRef.current = void 0;
+    window.clearTimeout(closeTimerRef.current);
+    closeTimerRef.current = window.setTimeout(() => setOpen(false), 300);
+  }, []);
+  const setTriggerRef = React__namespace.useCallback(
+    (node) => {
+      triggerRef.current = node;
+      assignRef(forwardedRef, node);
+      assignRef(childRef, node);
+    },
+    [childRef, forwardedRef, triggerRef]
+  );
+  const childProps = children.props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    React__namespace.cloneElement(children, {
+      ref: setTriggerRef,
+      onMouseEnter: (event) => {
+        childProps.onMouseEnter?.(event);
+        show();
+      },
+      onMouseOver: (event) => {
+        childProps.onMouseOver?.(event);
+        show();
+      },
+      onMouseMove: (event) => {
+        childProps.onMouseMove?.(event);
+        show();
+      },
+      onMouseLeave: (event) => {
+        childProps.onMouseLeave?.(event);
+        hide();
+      },
+      onPointerEnter: (event) => {
+        childProps.onPointerEnter?.(event);
+        show();
+      },
+      onPointerMove: (event) => {
+        childProps.onPointerMove?.(event);
+        show();
+      },
+      onPointerLeave: (event) => {
+        childProps.onPointerLeave?.(event);
+        hide();
+      },
+      onFocus: (event) => {
+        childProps.onFocus?.(event);
+        show();
+      },
+      onBlur: (event) => {
+        childProps.onBlur?.(event);
+        hide();
+      }
+    }),
+    open && typeof document !== "undefined" && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: floatingRef,
+          className: `typo-ellipsis-tooltip ${placement}`,
+          style: floatingStyle,
+          role: "tooltip",
+          onMouseEnter: show,
+          onMouseMove: show,
+          onMouseLeave: hide,
+          onPointerEnter: show,
+          onPointerMove: show,
+          onPointerLeave: hide,
+          children: content
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+EllipsisTooltip.displayName = "Typography.EllipsisTooltip";
 var CopyAction = ({ config, fallbackText }) => {
   const [copied, setCopied] = React__namespace.useState(false);
   const timerRef = React__namespace.useRef(null);
@@ -252,7 +370,7 @@ function useTypographyBody(props) {
       }
     );
   }
-  const titleAttr = wantClamp && ellConf.tooltip ? typeof ellConf.tooltip === "string" ? ellConf.tooltip : fallbackText : void 0;
+  const tooltipContent = wantClamp && !expanded && ellConf.tooltip ? ellConf.tooltip === true ? fallbackText : ellConf.tooltip : void 0;
   return {
     editing,
     editConf,
@@ -265,7 +383,7 @@ function useTypographyBody(props) {
     expandNode,
     style,
     extraCls,
-    titleAttr
+    tooltipContent
   };
 }
 var Title = React__namespace.forwardRef((props, ref) => {
@@ -293,13 +411,12 @@ var Title = React__namespace.forwardRef((props, ref) => {
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const element = /* @__PURE__ */ jsxRuntime.jsxs(
     Tag,
     {
       ref,
       className: buildClass(rest, `typo typo-title h${level}`, body.extraCls),
       style: body.style,
-      title: body.titleAttr,
       children: [
         body.inner,
         body.expandNode,
@@ -308,6 +425,7 @@ var Title = React__namespace.forwardRef((props, ref) => {
       ]
     }
   );
+  return body.tooltipContent ? /* @__PURE__ */ jsxRuntime.jsx(EllipsisTooltip, { ref, content: body.tooltipContent, children: element }) : element;
 });
 Title.displayName = "Typography.Title";
 var Text = React__namespace.forwardRef((props, ref) => {
@@ -335,13 +453,12 @@ var Text = React__namespace.forwardRef((props, ref) => {
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const element = /* @__PURE__ */ jsxRuntime.jsxs(
     Tag,
     {
       ref,
       className: buildClass(rest, "typo typo-text", body.extraCls),
       style: body.style,
-      title: body.titleAttr,
       children: [
         body.inner,
         body.expandNode,
@@ -350,6 +467,7 @@ var Text = React__namespace.forwardRef((props, ref) => {
       ]
     }
   );
+  return body.tooltipContent ? /* @__PURE__ */ jsxRuntime.jsx(EllipsisTooltip, { ref, content: body.tooltipContent, children: element }) : element;
 });
 Text.displayName = "Typography.Text";
 var Paragraph = React__namespace.forwardRef(
@@ -376,13 +494,12 @@ var Paragraph = React__namespace.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    const element = /* @__PURE__ */ jsxRuntime.jsxs(
       "p",
       {
         ref,
         className: buildClass(props, "typo typo-paragraph", body.extraCls),
         style: body.style,
-        title: body.titleAttr,
         children: [
           body.inner,
           body.expandNode,
@@ -391,6 +508,7 @@ var Paragraph = React__namespace.forwardRef(
         ]
       }
     );
+    return body.tooltipContent ? /* @__PURE__ */ jsxRuntime.jsx(EllipsisTooltip, { ref, content: body.tooltipContent, children: element }) : element;
   }
 );
 Paragraph.displayName = "Typography.Paragraph";
@@ -453,13 +571,12 @@ var Link = React__namespace.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    const element = /* @__PURE__ */ jsxRuntime.jsxs(
       "a",
       {
         ref,
         className: buildClass(props, "typo typo-link", body.extraCls),
         style: body.style,
-        title: body.titleAttr,
         target,
         rel: safeRel,
         "aria-disabled": disabled || void 0,
@@ -480,6 +597,7 @@ var Link = React__namespace.forwardRef(
         ]
       }
     );
+    return body.tooltipContent ? /* @__PURE__ */ jsxRuntime.jsx(EllipsisTooltip, { ref, content: body.tooltipContent, children: element }) : element;
   }
 );
 Link.displayName = "Typography.Link";

package/dist/index.cjs

@@ -3,8 +3,8 @@
 var chunkIHK2FRTS_cjs = require('./chunk-IHK2FRTS.cjs');
 var chunkLFTCK2VM_cjs = require('./chunk-LFTCK2VM.cjs');
 var chunkBJ6WUVEG_cjs = require('./chunk-BJ6WUVEG.cjs');
-var chunkF3LHLYX6_cjs = require('./chunk-F3LHLYX6.cjs');
-var chunk5JPAUQ5H_cjs = require('./chunk-5JPAUQ5H.cjs');
+var chunkRIUDYPRB_cjs = require('./chunk-RIUDYPRB.cjs');
+var chunkYU5JK247_cjs = require('./chunk-YU5JK247.cjs');
 var chunkZWCDB5PP_cjs = require('./chunk-ZWCDB5PP.cjs');
 var chunkSG42F5VB_cjs = require('./chunk-SG42F5VB.cjs');
 var chunkN3OLFKV5_cjs = require('./chunk-N3OLFKV5.cjs');
@@ -51,7 +51,7 @@ var chunkACQSRMLF_cjs = require('./chunk-ACQSRMLF.cjs');
 var chunk6LARTGLP_cjs = require('./chunk-6LARTGLP.cjs');
 
 // src/index.ts
-var VERSION = "0.6.4";
+var VERSION = "0.6.6";
 
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
@@ -75,27 +75,27 @@ Object.defineProperty(exports, "Timeline", {
 });
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
-  get: function () { return chunkF3LHLYX6_cjs.Tooltip; }
+  get: function () { return chunkRIUDYPRB_cjs.Tooltip; }
 });
 Object.defineProperty(exports, "Link", {
   enumerable: true,
-  get: function () { return chunk5JPAUQ5H_cjs.Link; }
+  get: function () { return chunkYU5JK247_cjs.Link; }
 });
 Object.defineProperty(exports, "Paragraph", {
   enumerable: true,
-  get: function () { return chunk5JPAUQ5H_cjs.Paragraph; }
+  get: function () { return chunkYU5JK247_cjs.Paragraph; }
 });
 Object.defineProperty(exports, "Text", {
   enumerable: true,
-  get: function () { return chunk5JPAUQ5H_cjs.Text; }
+  get: function () { return chunkYU5JK247_cjs.Text; }
 });
 Object.defineProperty(exports, "Title", {
   enumerable: true,
-  get: function () { return chunk5JPAUQ5H_cjs.Title; }
+  get: function () { return chunkYU5JK247_cjs.Title; }
 });
 Object.defineProperty(exports, "Typography", {
   enumerable: true,
-  get: function () { return chunk5JPAUQ5H_cjs.Typography; }
+  get: function () { return chunkYU5JK247_cjs.Typography; }
 });
 Object.defineProperty(exports, "Slider", {
   enumerable: true,

package/dist/index.d.cts

@@ -49,6 +49,6 @@ import 'react/jsx-runtime';
 import 'react';
 
 /** Package version — bumped by release scripts. */
-declare const VERSION = "0.6.4";
+declare const VERSION = "0.6.6";
 
 export { VERSION };

package/dist/index.d.ts

@@ -49,6 +49,6 @@ import 'react/jsx-runtime';
 import 'react';
 
 /** Package version — bumped by release scripts. */
-declare const VERSION = "0.6.4";
+declare const VERSION = "0.6.6";
 
 export { VERSION };

package/dist/index.js

@@ -1,8 +1,8 @@
 export { Tabs } from './chunk-TVUBGXWA.js';
 export { THEME_PANEL_DEFAULT_PRESET_OPTIONS, THEME_PANEL_DEFAULT_THEME_PRESETS, ThemePanel } from './chunk-NJCHFXGC.js';
 export { Timeline } from './chunk-OQU3TJCF.js';
-export { Tooltip } from './chunk-XHQGMMH7.js';
-export { Link, Paragraph, Text, Title, Typography } from './chunk-BCFCSVGJ.js';
+export { Tooltip } from './chunk-SFAGHPBT.js';
+export { Link, Paragraph, Text, Title, Typography } from './chunk-5JNDDWFZ.js';
 export { Slider } from './chunk-HU7T64Y3.js';
 export { Spin } from './chunk-Y5F7ZTBH.js';
 export { Splitter } from './chunk-7ZNGHWVS.js';
@@ -49,6 +49,6 @@ export { Calendar } from './chunk-CEZ2DR4R.js';
 export { AimOutlined, AppstoreOutlined, BarChartOutlined, BlockOutlined, BorderOutlined, CameraOutlined, CaretDownOutlined, CaretUpOutlined, CheckCircleFilled, CheckCircleOutlined, CheckOutlined, ClockCircleFilled, CloseCircleOutlined, CloseOutlined, CopyOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, EnvironmentOutlined, ExclamationCircleOutlined, FolderOpenOutlined, ICON_NAMES, Icon, LeftOutlined, LoadingOutlined, MinusCircleOutlined, MinusOutlined, NAMED_ICON_MAP, PictureOutlined, PlusOutlined, QqOutlined, ReloadOutlined, RightOutlined, RobotOutlined, SearchOutlined, SettingOutlined, StarFilled, StarOutlined, SwapOutlined, SwapRightOutlined, SyncOutlined, ThunderboltOutlined, TranslationOutlined, UnorderedListOutlined, UserOutlined, isIconName, renderIconSlot, resolveIconName } from './chunk-YT5NLCRC.js';
 
 // src/index.ts
-var VERSION = "0.6.4";
+var VERSION = "0.6.6";
 
 export { VERSION };

package/dist/styles.css

@@ -1763,6 +1763,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
   align-self: flex-start;
 }
 .tip {
+  display: block;
+  box-sizing: border-box;
   background: var(--bg-sunken);
   color: var(--fg);
   padding: 6px 10px;
@@ -1771,7 +1773,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   font-weight: 500;
   white-space: nowrap;
   box-shadow: var(--neu-shadow-control);
-  pointer-events: none;
+  pointer-events: auto;
   animation: fadeIn var(--dur) var(--ease);
   z-index: 1000;
 }
@@ -2986,7 +2988,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .typo-link.disabled {
   color: var(--fg-subtle);
   cursor: not-allowed;
-  pointer-events: none;
+  pointer-events: auto;
   text-decoration: none;
 }
 .typo-link-ext {
@@ -3002,16 +3004,21 @@ input, textarea, select { font-family: inherit; color: inherit; }
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 22px;
-  height: 22px;
-  margin-left: 6px;
-  border-radius: 7px;
+  width: 20px;
+  height: 20px;
+  margin-left: 5px;
+  border-radius: 6px;
   cursor: pointer;
   color: var(--fg-subtle);
+  line-height: 1;
   transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
-  vertical-align: middle;
+  vertical-align: -0.18em;
   user-select: none;
 }
+.typo-action > svg {
+  display: block;
+  flex-shrink: 0;
+}
 .typo-action:hover {
   color: var(--accent-ink);
   background: var(--bg);
@@ -3092,6 +3099,30 @@ input, textarea, select { font-family: inherit; color: inherit; }
   user-select: none;
 }
 .typo-expand:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
+.typo-ellipsis-tooltip {
+  display: block;
+  box-sizing: border-box;
+  max-width: min(520px, calc(100vw - 32px));
+  padding: 7px 10px;
+  border-radius: var(--r-sm);
+  background: var(--bg-sunken);
+  color: var(--fg);
+  box-shadow: var(--neu-shadow-control);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.55;
+  white-space: normal;
+  line-break: auto;
+  text-wrap: wrap;
+  text-align: justify;
+  text-align-last: left;
+  text-justify: inter-character;
+  word-break: normal;
+  overflow-wrap: anywhere;
+  pointer-events: auto;
+  animation: fadeIn var(--dur) var(--ease);
+  z-index: 1000;
+}
 /* In dark mode, mark needs slightly higher contrast */
 [data-theme="dark"] .typo mark {
   background: color-mix(in oklch, var(--warning) 30%, transparent);

package/docs/llms/tooltip.md

@@ -42,6 +42,7 @@ title 与 content 等价,也支持 bottomLeft 等细分位置。
 | title | `ReactNode` | — | content 的等价别名 |
 | placement | `"top" | "bottom" | "left" | "right" | ...` | `"top"` | 位置,支持 bottomLeft 等细分方向 |
 | delay | `number` | `250` | 悬浮延时 (ms) |
+| closeDelay | `number` | `300` | 离开触发器或提示浮层后的关闭延时 (ms) |
 | disabled | `boolean` | `false` | 禁用提示 |
 | open / visible | `boolean` | — | 受控显示状态 |
 | overlayClassName / popupClassName | `string` | — | 浮层 className |

package/docs/llms/typography.md

@@ -57,10 +57,10 @@ import { Typography } from "@fangxinyan/lumina";
 
 ### 省略截断
 
-多行截断并支持「展开」。
+多行截断支持「展开」，悬停时可查看完整内容。
 
 ```tsx
-<Typography.Paragraph ellipsis={{ rows: 2, expandable: true }}>{long}</Typography.Paragraph>
+<Typography.Paragraph ellipsis={{ rows: 2, expandable: true, tooltip: true }}>{long}</Typography.Paragraph>
 ```
 
 ### 链接
@@ -90,6 +90,16 @@ import { Typography } from "@fangxinyan/lumina";
 | ellipsis | `boolean | EllipsisConfig` | — | 截断省略 |
 
 
+**EllipsisConfig**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| rows | `number` | `1` | 截断行数 |
+| expandable | `boolean` | `false` | 显示展开入口 |
+| tooltip | `boolean | ReactNode` | `false` | 悬停显示完整内容 |
+| symbol | `ReactNode` | `"展开"` | 自定义展开文案 |
+
+
 **Typography.Link**
 
 | Prop | 类型 | 默认 | 说明 |

package/docs/llms.md

@@ -3,7 +3,7 @@
 > 拟态风格的 React 18 组件库,目标是 Electron 桌面应用。**写给 AI 编程助手**的按需文档 —— 每个组件单独一个 `.md`,避免一次性读取全部。示例源自 playground 的 demo,可直接复制运行。
 
 - **包名**: `@fangxinyan/lumina`
-- **版本**: `0.6.4`
+- **版本**: `0.6.6`
 - **React 最低版本**: 18
 - **环境**: 带打包器的 React 工程(Vite / Next.js / Webpack / Remix / Electron + Vite 等)
 - **零运行时依赖**: 只依赖 `react` / `react-dom` (peer deps)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fangxinyan/lumina",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "description": "Lumina — Neumorphic component library for Electron & React apps",
   "type": "module",
   "main": "./dist/index.cjs",