@hanzo/ui 8.27.90 → 8.28.0

package/dist/backends/gui/toggle-group.cjs

@@ -66,6 +66,11 @@ const REST = {
         borderColor: '$borderColor',
         hoverStyle: { backgroundColor: '$hover' },
     },
+    tile: {
+        backgroundColor: 'transparent',
+        borderColor: '$borderColor',
+        hoverStyle: { backgroundColor: '$hover' },
+    },
 };
 /**
  * The ON treatment. gui merges `activeStyle` into hover and focus as well as
@@ -77,6 +82,7 @@ const REST = {
 const ON = {
     default: { backgroundColor: '$rim', borderColor: '$bound' },
     outline: { backgroundColor: '$raised', borderColor: '$bound' },
+    tile: { backgroundColor: 'transparent', borderColor: 'var(--primary)' },
 };
 const GroupContext = /* @__PURE__ */ (0, react_1.createContext)({
     type: 'multiple',
@@ -102,6 +108,13 @@ function ToggleGroupItem({ variant, size, disabled, children, value, ...props })
     const s = group.size ?? size ?? 'default';
     const on = group.selected.includes(value);
     const off = disabled || group.disabled;
+    if (v === 'tile')
+        return ((0, jsx_runtime_1.jsx)(gui_1.ToggleGroup.Item, { value: value, ...(0, slot_1.slot)('toggle-group-item'), "data-variant": "tile", role: group.type === 'single' ? 'radio' : undefined, "aria-checked": group.type === 'single' ? on : undefined, unstyled: true, flexDirection: "column", items: "center", justify: "center", width: "100%", minH: 32, px: "$1", py: "$1.5", gap: "$1", borderWidth: 1, rounded: "$xs", select: "none", disabled: off, cursor: off ? 'default' : 'pointer', focusVisibleStyle: press_1.RING, ...REST.tile, ...(off ? { backgroundColor: '$panel', hoverStyle: { backgroundColor: '$panel' } } : null), activeStyle: ON.tile, animation: "75ms", ...(0, gesture_1.touch)(32, 44, 'y'), ...props, children: (0, ink_1.ink)(children, undefined, {
+                size: '$1',
+                fontWeight: '600',
+                numberOfLines: 1,
+                color: off ? 'var(--text-faint)' : on ? 'var(--primary)' : '$hint',
+            }) }));
     return ((0, jsx_runtime_1.jsx)(gui_1.ToggleGroup.Item, { value: value, ...(0, slot_1.slot)('toggle-group-item'), "data-variant": v, "data-size": s, 
         // The two Radix semantics gui drops in `single` mode. `aria-pressed` is
         // left alone for `multiple`, where gui already sets it from the same state.

package/dist/backends/gui/toggle-group.d.ts

@@ -40,7 +40,13 @@
  */
 import { ToggleGroup as GuiToggleGroup } from '@hanzo/gui';
 import { type CSSProperties, type ComponentProps, type ReactNode } from 'react';
-export type ToggleGroupVariant = 'default' | 'outline';
+/**
+ * `tile` is the picker tile (twenty-ui's MenuPicker, MIT, NOTICE): an icon over
+ * a small label in a 4px-cornered box that fills its grid cell — a chart type,
+ * a view layout. The chosen tile takes the accent edge and label; the label is
+ * 12px semibold and truncates.
+ */
+export type ToggleGroupVariant = 'default' | 'outline' | 'tile';
 export type ToggleGroupSize = 'default' | 'sm' | 'lg';
 /**
  * Written out rather than derived from gui's, which cannot be used here.

package/dist/backends/gui/toggle-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/toggle-group.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,OAAO,EAAE,WAAW,IAAI,cAAc,EAAwB,MAAM,YAAY,CAAA;AAChF,OAAO,EAA6B,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAM1G,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,CAAA;AACtD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAuDrD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,KAAK,eAAe,GAAG;IACrB,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,2EAA2E;IAC3E,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAAG;IAC/C,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAChC;;;;;;;;;OASG;IACH,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAA;CAC/C,CAAA;AAED,iBAAS,WAAW,CAAC,EACnB,IAAe,EACf,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAA0B,EAC1B,mBAAmB,EACnB,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAoClB;AAED,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,EAC1C,MAAM,CACP,GAAG;IACF,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,IAAI,CAAC,EAAE,eAAe,CAAA;CACvB,CAAA;AAED,iBAAS,eAAe,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,+BA+CpG;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/toggle-group.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,OAAO,EAAE,WAAW,IAAI,cAAc,EAAwB,MAAM,YAAY,CAAA;AAChF,OAAO,EAA6B,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAM1G;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;AAC/D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AA6DrD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,KAAK,eAAe,GAAG;IACrB,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,2EAA2E;IAC3E,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAAG;IAC/C,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAChC;;;;;;;;;OASG;IACH,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAA;CAC/C,CAAA;AAED,iBAAS,WAAW,CAAC,EACnB,IAAe,EACf,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAA0B,EAC1B,mBAAmB,EACnB,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAoClB;AAED,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,EAC1C,MAAM,CACP,GAAG;IACF,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,IAAI,CAAC,EAAE,eAAe,CAAA;CACvB,CAAA;AAED,iBAAS,eAAe,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,+BAsFpG;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAA"}

package/dist/backends/gui/toggle-group.js

@@ -62,6 +62,11 @@ const REST = {
         borderColor: '$borderColor',
         hoverStyle: { backgroundColor: '$hover' },
     },
+    tile: {
+        backgroundColor: 'transparent',
+        borderColor: '$borderColor',
+        hoverStyle: { backgroundColor: '$hover' },
+    },
 };
 /**
  * The ON treatment. gui merges `activeStyle` into hover and focus as well as
@@ -73,6 +78,7 @@ const REST = {
 const ON = {
     default: { backgroundColor: '$rim', borderColor: '$bound' },
     outline: { backgroundColor: '$raised', borderColor: '$bound' },
+    tile: { backgroundColor: 'transparent', borderColor: 'var(--primary)' },
 };
 const GroupContext = /* @__PURE__ */ createContext({
     type: 'multiple',
@@ -98,6 +104,13 @@ function ToggleGroupItem({ variant, size, disabled, children, value, ...props })
     const s = group.size ?? size ?? 'default';
     const on = group.selected.includes(value);
     const off = disabled || group.disabled;
+    if (v === 'tile')
+        return (_jsx(GuiToggleGroup.Item, { value: value, ...slot('toggle-group-item'), "data-variant": "tile", role: group.type === 'single' ? 'radio' : undefined, "aria-checked": group.type === 'single' ? on : undefined, unstyled: true, flexDirection: "column", items: "center", justify: "center", width: "100%", minH: 32, px: "$1", py: "$1.5", gap: "$1", borderWidth: 1, rounded: "$xs", select: "none", disabled: off, cursor: off ? 'default' : 'pointer', focusVisibleStyle: RING, ...REST.tile, ...(off ? { backgroundColor: '$panel', hoverStyle: { backgroundColor: '$panel' } } : null), activeStyle: ON.tile, animation: "75ms", ...touch(32, 44, 'y'), ...props, children: ink(children, undefined, {
+                size: '$1',
+                fontWeight: '600',
+                numberOfLines: 1,
+                color: off ? 'var(--text-faint)' : on ? 'var(--primary)' : '$hint',
+            }) }));
     return (_jsx(GuiToggleGroup.Item, { value: value, ...slot('toggle-group-item'), "data-variant": v, "data-size": s, 
         // The two Radix semantics gui drops in `single` mode. `aria-pressed` is
         // left alone for `multiple`, where gui already sets it from the same state.

package/dist/backends/gui/toggle-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.js","sourceRoot":"","sources":["../../../src/backends/gui/toggle-group.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"toggle-group.js","sourceRoot":"","sources":["../../../src/backends/gui/toggle-group.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/tooltip.cjs

@@ -9,25 +9,48 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * gui keeps the offset on the tooltip ROOT while the compound API spells it on
  * Content, as `sideOffset`. One value, one owner: the root holds it, Content
  * publishes into it — the same split `popover` resolves, for the same reason.
+ *
+ * The panel FOLLOWS THE THEME — a dark hint on a dark page, a light one on a
+ * light page (Hanzo's decision; twenty-ui's is a dark slab in both). It did not
+ * before, measured: gui's Tooltip frame carries a `t_Tooltip` sub-theme that
+ * inverts the ground, so on the dark page the hint was a light-grey slab
+ * (`--background` 85% lightness under glass) with near-black text, and on the
+ * light page a dark one. Naming the frame's component `Hint`, which no theme
+ * table carries, leaves it in the theme it was opened from. It takes twenty-ui's
+ * geometry (MIT, NOTICE): 4×6 padding, 12px text on
+ * a 16px line, 10px clear of its anchor, at most 300 wide, opening after 600ms.
+ * A title may lead with a 14px icon and carry a quieter description under it,
+ * line breaks kept.
  */
 const gui_1 = require("@hanzo/gui");
 const react_1 = require("react");
 const portal_theme_1 = require("../../product/menu/portal-theme.cjs");
 const ink_1 = require("./ink.cjs");
 const slot_1 = require("./slot.cjs");
-const DEFAULT_OFFSET = 4;
+const DEFAULT_OFFSET = 10;
+/** How long a pointer rests before the hint opens, ms. */
+const DEFAULT_DELAY = 600;
+const MAX_W = 300;
 const Publish = /* @__PURE__ */ (0, react_1.createContext)(null);
-const Tooltip = ({ offset = DEFAULT_OFFSET, ...props }) => {
+/**
+ * Whether a tooltip sits in a `TooltipProvider`. gui lets a tooltip's own
+ * `delay` override its group's, so a tooltip in a group must leave the delay
+ * unsaid for the group's to hold; one standing alone takes the 600ms default.
+ */
+const Grouped = /* @__PURE__ */ (0, react_1.createContext)(false);
+const Tooltip = ({ offset = DEFAULT_OFFSET, delay, ...props }) => {
     const [placed, setPlaced] = (0, react_1.useState)({});
     const publish = (0, react_1.useCallback)((p) => setPlaced((prev) => ({ ...prev, ...p })), []);
-    return ((0, jsx_runtime_1.jsx)(Publish.Provider, { value: publish, children: (0, jsx_runtime_1.jsx)(gui_1.Tooltip, { offset: placed.offset ?? offset, ...props }) }));
+    const grouped = (0, react_1.useContext)(Grouped);
+    return ((0, jsx_runtime_1.jsx)(Publish.Provider, { value: publish, children: (0, jsx_runtime_1.jsx)(gui_1.Tooltip, { offset: placed.offset ?? offset, delay: delay ?? (grouped ? undefined : DEFAULT_DELAY), ...props }) }));
 };
 exports.Tooltip = Tooltip;
 const TooltipTrigger = gui_1.Tooltip.Trigger;
 exports.TooltipTrigger = TooltipTrigger;
-const TooltipProvider = gui_1.TooltipGroup;
+/** gui's `TooltipGroup`: the tooltips in it share one delay, 600ms unless told otherwise. */
+const TooltipProvider = ({ delay = DEFAULT_DELAY, ...props }) => ((0, jsx_runtime_1.jsx)(Grouped.Provider, { value: true, children: (0, jsx_runtime_1.jsx)(gui_1.TooltipGroup, { delay: delay, ...props }) }));
 exports.TooltipProvider = TooltipProvider;
-const TooltipContent = ({ sideOffset, children, ...props }) => {
+const TooltipContent = ({ sideOffset, startIcon, description, children, ...props }) => {
     const themeName = (0, portal_theme_1.useThemeName)();
     const publish = (0, react_1.useContext)(Publish);
     // Only a Content that names an offset has anything to say about it; an absent
@@ -36,6 +59,6 @@ const TooltipContent = ({ sideOffset, children, ...props }) => {
         if (sideOffset !== undefined)
             publish?.({ offset: sideOffset });
     }, [publish, sideOffset]);
-    return ((0, jsx_runtime_1.jsx)(portal_theme_1.PortalTheme, { name: themeName, children: (0, jsx_runtime_1.jsx)(gui_1.Tooltip.Content, { ...(0, slot_1.slot)('tooltip-content'), bg: "$panel", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", px: "$3", py: "$1.5", ...props, children: (0, ink_1.ink)(children, undefined, { size: '$1' }) }) }));
+    return ((0, jsx_runtime_1.jsx)(portal_theme_1.PortalTheme, { name: themeName, children: (0, jsx_runtime_1.jsx)(gui_1.Tooltip.Content, { ...(0, slot_1.slot)('tooltip-content'), componentName: "Hint", bg: "$panel", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", px: "$1.5", py: "$1", maxW: MAX_W, ...props, children: startIcon || description ? ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$0.5", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$1", children: [startIcon ? (0, jsx_runtime_1.jsx)(gui_1.XStack, { shrink: 0, children: startIcon }) : null, (0, ink_1.ink)(children, undefined, { size: '$1', fontWeight: '500' })] }), description ? (typeof description === 'string' ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.slot)('tooltip-description'), fontSize: "$1", lineHeight: "$1", color: "$aside", style: { whiteSpace: 'pre-line' }, children: description })) : (description)) : null] })) : ((0, ink_1.ink)(children, undefined, { size: '$1' })) }) }));
 };
 exports.TooltipContent = TooltipContent;

package/dist/backends/gui/tooltip.d.ts

@@ -4,18 +4,37 @@
  * gui keeps the offset on the tooltip ROOT while the compound API spells it on
  * Content, as `sideOffset`. One value, one owner: the root holds it, Content
  * publishes into it — the same split `popover` resolves, for the same reason.
+ *
+ * The panel FOLLOWS THE THEME — a dark hint on a dark page, a light one on a
+ * light page (Hanzo's decision; twenty-ui's is a dark slab in both). It did not
+ * before, measured: gui's Tooltip frame carries a `t_Tooltip` sub-theme that
+ * inverts the ground, so on the dark page the hint was a light-grey slab
+ * (`--background` 85% lightness under glass) with near-black text, and on the
+ * light page a dark one. Naming the frame's component `Hint`, which no theme
+ * table carries, leaves it in the theme it was opened from. It takes twenty-ui's
+ * geometry (MIT, NOTICE): 4×6 padding, 12px text on
+ * a 16px line, 10px clear of its anchor, at most 300 wide, opening after 600ms.
+ * A title may lead with a 14px icon and carry a quieter description under it,
+ * line breaks kept.
  */
 import { Tooltip as GuiTooltip, TooltipGroup } from '@hanzo/gui';
-import { type ComponentProps } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
 export type TooltipProps = Omit<ComponentProps<typeof GuiTooltip>, 'offset'> & {
     offset?: number;
 };
 export type TooltipContentProps = ComponentProps<typeof GuiTooltip.Content> & {
     sideOffset?: number;
+    /** A 14px icon before the title. */
+    startIcon?: ReactNode;
+    /** A quieter line under the title, line breaks kept. */
+    description?: ReactNode;
 };
-declare const Tooltip: ({ offset, ...props }: TooltipProps) => import("react").JSX.Element;
+declare const Tooltip: ({ offset, delay, ...props }: TooltipProps) => import("react").JSX.Element;
 declare const TooltipTrigger: typeof GuiTooltip.Trigger;
-declare const TooltipProvider: typeof TooltipGroup;
-declare const TooltipContent: ({ sideOffset, children, ...props }: TooltipContentProps) => import("react").JSX.Element;
+/** gui's `TooltipGroup`: the tooltips in it share one delay, 600ms unless told otherwise. */
+declare const TooltipProvider: ({ delay, ...props }: Omit<ComponentProps<typeof TooltipGroup>, 'delay'> & {
+    delay?: ComponentProps<typeof TooltipGroup>['delay'];
+}) => import("react").JSX.Element;
+declare const TooltipContent: ({ sideOffset, startIcon, description, children, ...props }: TooltipContentProps) => import("react").JSX.Element;
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
 //# sourceMappingURL=tooltip.d.ts.map

package/dist/backends/gui/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/tooltip.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAChE,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,OAAO,CAAA;AAYd,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,QAAQ,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAClG,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,GAAG;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAErG,QAAA,MAAM,OAAO,yBAA2C,YAAY,gCAQnE,CAAA;AACD,QAAA,MAAM,cAAc,EAAE,OAAO,UAAU,CAAC,OAA4B,CAAA;AACpE,QAAA,MAAM,eAAe,EAAE,OAAO,YAA2B,CAAA;AAEzD,QAAA,MAAM,cAAc,uCAAwC,mBAAmB,gCAwB9E,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/tooltip.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAQ,OAAO,IAAI,UAAU,EAAE,YAAY,EAAkB,MAAM,YAAY,CAAA;AACtF,OAAO,EAML,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAed,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,QAAQ,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAClG,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,GAAG;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,oCAAoC;IACpC,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,wDAAwD;IACxD,WAAW,CAAC,EAAE,SAAS,CAAA;CACxB,CAAA;AASD,QAAA,MAAM,OAAO,gCAAkD,YAAY,gCAS1E,CAAA;AACD,QAAA,MAAM,cAAc,EAAE,OAAO,UAAU,CAAC,OAA4B,CAAA;AAEpE,6FAA6F;AAC7F,QAAA,MAAM,eAAe,wBAAyC,IAAI,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,EAAE,OAAO,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,OAAO,CAAC,CAAA;CAAE,gCAI1K,CAAA;AAED,QAAA,MAAM,cAAc,+DAAgE,mBAAmB,gCA4CtG,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}

package/dist/backends/gui/tooltip.js

@@ -1,27 +1,50 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Tooltip — hover/focus hint. `TooltipProvider` is gui's `TooltipGroup`.
  *
  * gui keeps the offset on the tooltip ROOT while the compound API spells it on
  * Content, as `sideOffset`. One value, one owner: the root holds it, Content
  * publishes into it — the same split `popover` resolves, for the same reason.
+ *
+ * The panel FOLLOWS THE THEME — a dark hint on a dark page, a light one on a
+ * light page (Hanzo's decision; twenty-ui's is a dark slab in both). It did not
+ * before, measured: gui's Tooltip frame carries a `t_Tooltip` sub-theme that
+ * inverts the ground, so on the dark page the hint was a light-grey slab
+ * (`--background` 85% lightness under glass) with near-black text, and on the
+ * light page a dark one. Naming the frame's component `Hint`, which no theme
+ * table carries, leaves it in the theme it was opened from. It takes twenty-ui's
+ * geometry (MIT, NOTICE): 4×6 padding, 12px text on
+ * a 16px line, 10px clear of its anchor, at most 300 wide, opening after 600ms.
+ * A title may lead with a 14px icon and carry a quieter description under it,
+ * line breaks kept.
  */
-import { Tooltip as GuiTooltip, TooltipGroup } from '@hanzo/gui';
+import { Text, Tooltip as GuiTooltip, TooltipGroup, XStack, YStack } from '@hanzo/gui';
 import { createContext, useCallback, useContext, useEffect, useState, } from 'react';
 import { PortalTheme, useThemeName } from '../../product/menu/portal-theme.js';
 import { ink } from './ink.js';
 import { slot } from './slot.js';
-const DEFAULT_OFFSET = 4;
+const DEFAULT_OFFSET = 10;
+/** How long a pointer rests before the hint opens, ms. */
+const DEFAULT_DELAY = 600;
+const MAX_W = 300;
 const Publish = /* @__PURE__ */ createContext(null);
-const Tooltip = ({ offset = DEFAULT_OFFSET, ...props }) => {
+/**
+ * Whether a tooltip sits in a `TooltipProvider`. gui lets a tooltip's own
+ * `delay` override its group's, so a tooltip in a group must leave the delay
+ * unsaid for the group's to hold; one standing alone takes the 600ms default.
+ */
+const Grouped = /* @__PURE__ */ createContext(false);
+const Tooltip = ({ offset = DEFAULT_OFFSET, delay, ...props }) => {
     const [placed, setPlaced] = useState({});
     const publish = useCallback((p) => setPlaced((prev) => ({ ...prev, ...p })), []);
-    return (_jsx(Publish.Provider, { value: publish, children: _jsx(GuiTooltip, { offset: placed.offset ?? offset, ...props }) }));
+    const grouped = useContext(Grouped);
+    return (_jsx(Publish.Provider, { value: publish, children: _jsx(GuiTooltip, { offset: placed.offset ?? offset, delay: delay ?? (grouped ? undefined : DEFAULT_DELAY), ...props }) }));
 };
 const TooltipTrigger = GuiTooltip.Trigger;
-const TooltipProvider = TooltipGroup;
-const TooltipContent = ({ sideOffset, children, ...props }) => {
+/** gui's `TooltipGroup`: the tooltips in it share one delay, 600ms unless told otherwise. */
+const TooltipProvider = ({ delay = DEFAULT_DELAY, ...props }) => (_jsx(Grouped.Provider, { value: true, children: _jsx(TooltipGroup, { delay: delay, ...props }) }));
+const TooltipContent = ({ sideOffset, startIcon, description, children, ...props }) => {
     const themeName = useThemeName();
     const publish = useContext(Publish);
     // Only a Content that names an offset has anything to say about it; an absent
@@ -30,7 +53,7 @@ const TooltipContent = ({ sideOffset, children, ...props }) => {
         if (sideOffset !== undefined)
             publish?.({ offset: sideOffset });
     }, [publish, sideOffset]);
-    return (_jsx(PortalTheme, { name: themeName, children: _jsx(GuiTooltip.Content, { ...slot('tooltip-content'), bg: "$panel", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", px: "$3", py: "$1.5", ...props, children: ink(children, undefined, { size: '$1' }) }) }));
+    return (_jsx(PortalTheme, { name: themeName, children: _jsx(GuiTooltip.Content, { ...slot('tooltip-content'), componentName: "Hint", bg: "$panel", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", px: "$1.5", py: "$1", maxW: MAX_W, ...props, children: startIcon || description ? (_jsxs(YStack, { gap: "$0.5", children: [_jsxs(XStack, { items: "center", gap: "$1", children: [startIcon ? _jsx(XStack, { shrink: 0, children: startIcon }) : null, ink(children, undefined, { size: '$1', fontWeight: '500' })] }), description ? (typeof description === 'string' ? (_jsx(Text, { ...slot('tooltip-description'), fontSize: "$1", lineHeight: "$1", color: "$aside", style: { whiteSpace: 'pre-line' }, children: description })) : (description)) : null] })) : (ink(children, undefined, { size: '$1' })) }) }));
 };
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
 //# sourceMappingURL=tooltip.js.map

package/dist/backends/gui/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/backends/gui/tooltip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;GAMG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAChE,OAAO,EACL,aAAa,EACb,WAAW,EACX,UAAU,EACV,SAAS,EACT,QAAQ,GAET,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC3E,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,cAAc,GAAG,CAAC,CAAA;AAKxB,MAAM,OAAO,GAAG,eAAe,CAAC,aAAa,CAA+B,IAAI,CAAC,CAAA;AAKjF,MAAM,OAAO,GAAG,CAAC,EAAE,MAAM,GAAG,cAAc,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IACtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAA;IAChD,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAS,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;IACxF,OAAO,CACL,KAAC,OAAO,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YAC9B,KAAC,UAAU,IAAC,MAAM,EAAE,MAAM,CAAC,MAAM,IAAI,MAAM,KAAM,KAAK,GAAI,GACzC,CACpB,CAAA;AACH,CAAC,CAAA;AACD,MAAM,cAAc,GAA8B,UAAU,CAAC,OAAO,CAAA;AACpE,MAAM,eAAe,GAAwB,YAAY,CAAA;AAEzD,MAAM,cAAc,GAAG,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAuB,EAAE,EAAE;IACjF,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IACnC,8EAA8E;IAC9E,mDAAmD;IACnD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,KAAK,SAAS;YAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,CAAA;IACjE,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAA;IACzB,OAAO,CACL,KAAC,WAAW,IAAC,IAAI,EAAE,SAAS,YAC1B,KAAC,UAAU,CAAC,OAAO,OACb,IAAI,CAAC,iBAAiB,CAAC,EAC3B,EAAE,EAAC,QAAQ,EACX,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,OAAO,EAAC,IAAI,EACZ,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,MAAM,KACL,KAAK,YAER,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GACtB,GACT,CACf,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/backends/gui/tooltip.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/truncated-text.cjs

@@ -0,0 +1,102 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.overflows = void 0;
+exports.TruncatedTextProvider = TruncatedTextProvider;
+exports.TruncatedText = TruncatedText;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * TruncatedText — one line with an ellipsis, or N lines clamped, that shows the
+ * whole text in a tooltip only when it was actually cut.
+ *
+ * Every cell, chip label, navigation item and view name in a record surface is
+ * one of these, so the tooltip has to cost nothing when it is not needed: it
+ * measures (scroll size past client size) when the pointer enters or focus
+ * arrives, and the tooltip opens only if that measurement found an overflow. A
+ * text that fits never shows one. `TruncatedTextProvider` lets a host change the
+ * rule for a subtree — a table turns it `disabled` while it scrolls or edits, so
+ * a thousand cells carry no listeners at all.
+ *
+ * Re-expressed from twenty-ui's OverflowingTextWithTooltip and its mode provider
+ * (MIT, see NOTICE): 500ms delay, bottom placement, a 300px cap on the hint,
+ * focusable on request, `alwaysShowTooltip` for a hint that is wanted anyway.
+ * The tooltip is this package's own `Tooltip`; its look is the Tooltip's.
+ *
+ * Anchored, not triggered: a tooltip trigger stamps `aria-expanded` on its
+ * child, which a run of text may not carry (axe, aria-allowed-attr), and the
+ * hint discloses nothing — it repeats the text. So the text is the tooltip's
+ * ANCHOR and this component opens it itself, after the delay, on hover or focus.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const tooltip_1 = require("./tooltip.cjs");
+const slot_1 = require("./slot.cjs");
+const ModeContext = /* @__PURE__ */ (0, react_1.createContext)('measure-on-hover');
+function TruncatedTextProvider({ mode, children }) {
+    return (0, jsx_runtime_1.jsx)(ModeContext.Provider, { value: mode, children: children });
+}
+/** Whether a rendered node holds more than it shows. False off the web, where there is no node to ask. */
+const overflows = (node) => {
+    const el = node;
+    if (!el || typeof el.scrollWidth !== 'number')
+        return false;
+    return el.scrollWidth > (el.clientWidth ?? 0) || (el.scrollHeight ?? 0) > (el.clientHeight ?? 0);
+};
+exports.overflows = overflows;
+const DELAY = 500;
+const MAX_W = 300;
+function TruncatedText({ text, lineClamp, tooltipContent, tooltipDelay = DELAY, tooltipPlace = 'bottom', isTooltipMultiline = false, alwaysShowTooltip = false, isFocusable = false, ...props }) {
+    const mode = (0, react_1.useContext)(ModeContext);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [cut, setCut] = (0, react_1.useState)(false);
+    const node = (0, react_1.useRef)(null);
+    const timer = (0, react_1.useRef)(null);
+    const held = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => () => {
+        if (timer.current)
+            clearTimeout(timer.current);
+    }, []);
+    const lines = lineClamp && Number.isInteger(lineClamp) && lineClamp > 0 ? lineClamp : 1;
+    const host = (extra) => ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('truncated-text'), numberOfLines: lines, maxW: "100%", minW: 0, ...(lines > 1 ? { style: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' } } : null), ...props, ...extra, children: text }));
+    if (mode === 'disabled' && !alwaysShowTooltip)
+        return host({});
+    const measure = (target) => {
+        node.current = target;
+        const over = (0, exports.overflows)(target);
+        setCut(over);
+        return over;
+    };
+    /** Arm the hint: measured now (hover mode) or when it opens (open mode), shown after the delay. */
+    const arm = (target, wait) => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        const now = mode === 'measure-on-hover' ? measure(target) : ((node.current = target), false);
+        timer.current = setTimeout(() => {
+            const over = mode === 'measure-on-open' ? measure(node.current) : now;
+            if (alwaysShowTooltip || over)
+                setOpen(true);
+        }, wait);
+    };
+    const disarm = () => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = null;
+        if (!held.current)
+            setOpen(false);
+    };
+    return ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { open: open, onOpenChange: (next) => !next && setOpen(false), placement: tooltipPlace, children: [(0, jsx_runtime_1.jsx)(gui_1.Tooltip.Anchor, { asChild: true, children: host({
+                    onPointerEnter: (e) => arm(e?.currentTarget, tooltipDelay),
+                    onPointerLeave: disarm,
+                    // Focus opens at once; the hint stays while the text holds focus.
+                    onFocus: (e) => {
+                        held.current = true;
+                        arm(e?.currentTarget, 0);
+                    },
+                    onBlur: () => {
+                        held.current = false;
+                        disarm();
+                    },
+                    ...(isFocusable ? { tabIndex: 0, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' } } : null),
+                    ...(cut ? { cursor: 'pointer' } : null),
+                }) }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { maxW: MAX_W, children: isTooltipMultiline && typeof (tooltipContent ?? text) === 'string' ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", style: { whiteSpace: 'pre-wrap' }, children: tooltipContent ?? text })) : ((tooltipContent ?? text)) })] }));
+}

package/dist/backends/gui/truncated-text.d.ts

@@ -0,0 +1,55 @@
+/**
+ * TruncatedText — one line with an ellipsis, or N lines clamped, that shows the
+ * whole text in a tooltip only when it was actually cut.
+ *
+ * Every cell, chip label, navigation item and view name in a record surface is
+ * one of these, so the tooltip has to cost nothing when it is not needed: it
+ * measures (scroll size past client size) when the pointer enters or focus
+ * arrives, and the tooltip opens only if that measurement found an overflow. A
+ * text that fits never shows one. `TruncatedTextProvider` lets a host change the
+ * rule for a subtree — a table turns it `disabled` while it scrolls or edits, so
+ * a thousand cells carry no listeners at all.
+ *
+ * Re-expressed from twenty-ui's OverflowingTextWithTooltip and its mode provider
+ * (MIT, see NOTICE): 500ms delay, bottom placement, a 300px cap on the hint,
+ * focusable on request, `alwaysShowTooltip` for a hint that is wanted anyway.
+ * The tooltip is this package's own `Tooltip`; its look is the Tooltip's.
+ *
+ * Anchored, not triggered: a tooltip trigger stamps `aria-expanded` on its
+ * child, which a run of text may not carry (axe, aria-allowed-attr), and the
+ * hint discloses nothing — it repeats the text. So the text is the tooltip's
+ * ANCHOR and this component opens it itself, after the delay, on hover or focus.
+ */
+import { SizableText } from '@hanzo/gui';
+import { type ComponentProps, type ReactNode } from 'react';
+/**
+ * `measure-on-hover` (default): the hint is armed by the last hover or focus
+ * that measured an overflow. `measure-on-open`: measured when it tries to open.
+ * `disabled`: no tooltip and no listeners.
+ */
+export type TruncateMode = 'measure-on-hover' | 'measure-on-open' | 'disabled';
+export declare function TruncatedTextProvider({ mode, children }: {
+    mode: TruncateMode;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** Whether a rendered node holds more than it shows. False off the web, where there is no node to ask. */
+export declare const overflows: (node: unknown) => boolean;
+export type TruncatedTextProps = Omit<ComponentProps<typeof SizableText>, 'children'> & {
+    /** What is shown. A node needs `tooltipContent`, since the hint cannot be read off it. */
+    text: ReactNode;
+    /** Clamp to N lines (wrapping, breaking long words) instead of one line with an ellipsis. */
+    lineClamp?: number;
+    /** The hint, when it should say more or other than `text`. */
+    tooltipContent?: ReactNode;
+    /** Milliseconds before the hint opens. */
+    tooltipDelay?: number;
+    tooltipPlace?: 'top' | 'right' | 'bottom' | 'left';
+    /** Keep the hint's line breaks. */
+    isTooltipMultiline?: boolean;
+    /** Show the hint whether or not the text was cut. */
+    alwaysShowTooltip?: boolean;
+    /** A tab stop: focus measures and opens the hint, as a hover does. */
+    isFocusable?: boolean;
+};
+export declare function TruncatedText({ text, lineClamp, tooltipContent, tooltipDelay, tooltipPlace, isTooltipMultiline, alwaysShowTooltip, isFocusable, ...props }: TruncatedTextProps): import("react").JSX.Element;
+//# sourceMappingURL=truncated-text.d.ts.map

package/dist/backends/gui/truncated-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncated-text.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/truncated-text.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,WAAW,EAAyB,MAAM,YAAY,CAAA;AAC/D,OAAO,EAA0D,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAInH;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,UAAU,CAAA;AAI9E,wBAAgB,qBAAqB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAErG;AAED,0GAA0G;AAC1G,eAAO,MAAM,SAAS,SAAU,OAAO,KAAG,OAIzC,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,UAAU,CAAC,GAAG;IACtF,0FAA0F;IAC1F,IAAI,EAAE,SAAS,CAAA;IACf,6FAA6F;IAC7F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAClD,mCAAmC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,sEAAsE;IACtE,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAKD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,SAAS,EACT,cAAc,EACd,YAAoB,EACpB,YAAuB,EACvB,kBAA0B,EAC1B,iBAAyB,EACzB,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAgFpB"}

package/dist/backends/gui/truncated-text.js

@@ -0,0 +1,97 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * TruncatedText — one line with an ellipsis, or N lines clamped, that shows the
+ * whole text in a tooltip only when it was actually cut.
+ *
+ * Every cell, chip label, navigation item and view name in a record surface is
+ * one of these, so the tooltip has to cost nothing when it is not needed: it
+ * measures (scroll size past client size) when the pointer enters or focus
+ * arrives, and the tooltip opens only if that measurement found an overflow. A
+ * text that fits never shows one. `TruncatedTextProvider` lets a host change the
+ * rule for a subtree — a table turns it `disabled` while it scrolls or edits, so
+ * a thousand cells carry no listeners at all.
+ *
+ * Re-expressed from twenty-ui's OverflowingTextWithTooltip and its mode provider
+ * (MIT, see NOTICE): 500ms delay, bottom placement, a 300px cap on the hint,
+ * focusable on request, `alwaysShowTooltip` for a hint that is wanted anyway.
+ * The tooltip is this package's own `Tooltip`; its look is the Tooltip's.
+ *
+ * Anchored, not triggered: a tooltip trigger stamps `aria-expanded` on its
+ * child, which a run of text may not carry (axe, aria-allowed-attr), and the
+ * hint discloses nothing — it repeats the text. So the text is the tooltip's
+ * ANCHOR and this component opens it itself, after the delay, on hover or focus.
+ */
+import { SizableText, Tooltip as GuiTooltip } from '@hanzo/gui';
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { Tooltip, TooltipContent } from './tooltip.js';
+import { slot } from './slot.js';
+const ModeContext = /* @__PURE__ */ createContext('measure-on-hover');
+export function TruncatedTextProvider({ mode, children }) {
+    return _jsx(ModeContext.Provider, { value: mode, children: children });
+}
+/** Whether a rendered node holds more than it shows. False off the web, where there is no node to ask. */
+export const overflows = (node) => {
+    const el = node;
+    if (!el || typeof el.scrollWidth !== 'number')
+        return false;
+    return el.scrollWidth > (el.clientWidth ?? 0) || (el.scrollHeight ?? 0) > (el.clientHeight ?? 0);
+};
+const DELAY = 500;
+const MAX_W = 300;
+export function TruncatedText({ text, lineClamp, tooltipContent, tooltipDelay = DELAY, tooltipPlace = 'bottom', isTooltipMultiline = false, alwaysShowTooltip = false, isFocusable = false, ...props }) {
+    const mode = useContext(ModeContext);
+    const [open, setOpen] = useState(false);
+    const [cut, setCut] = useState(false);
+    const node = useRef(null);
+    const timer = useRef(null);
+    const held = useRef(false);
+    useEffect(() => () => {
+        if (timer.current)
+            clearTimeout(timer.current);
+    }, []);
+    const lines = lineClamp && Number.isInteger(lineClamp) && lineClamp > 0 ? lineClamp : 1;
+    const host = (extra) => (_jsx(SizableText, { ...slot('truncated-text'), numberOfLines: lines, maxW: "100%", minW: 0, ...(lines > 1 ? { style: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' } } : null), ...props, ...extra, children: text }));
+    if (mode === 'disabled' && !alwaysShowTooltip)
+        return host({});
+    const measure = (target) => {
+        node.current = target;
+        const over = overflows(target);
+        setCut(over);
+        return over;
+    };
+    /** Arm the hint: measured now (hover mode) or when it opens (open mode), shown after the delay. */
+    const arm = (target, wait) => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        const now = mode === 'measure-on-hover' ? measure(target) : ((node.current = target), false);
+        timer.current = setTimeout(() => {
+            const over = mode === 'measure-on-open' ? measure(node.current) : now;
+            if (alwaysShowTooltip || over)
+                setOpen(true);
+        }, wait);
+    };
+    const disarm = () => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = null;
+        if (!held.current)
+            setOpen(false);
+    };
+    return (_jsxs(Tooltip, { open: open, onOpenChange: (next) => !next && setOpen(false), placement: tooltipPlace, children: [_jsx(GuiTooltip.Anchor, { asChild: true, children: host({
+                    onPointerEnter: (e) => arm(e?.currentTarget, tooltipDelay),
+                    onPointerLeave: disarm,
+                    // Focus opens at once; the hint stays while the text holds focus.
+                    onFocus: (e) => {
+                        held.current = true;
+                        arm(e?.currentTarget, 0);
+                    },
+                    onBlur: () => {
+                        held.current = false;
+                        disarm();
+                    },
+                    ...(isFocusable ? { tabIndex: 0, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' } } : null),
+                    ...(cut ? { cursor: 'pointer' } : null),
+                }) }), _jsx(TooltipContent, { maxW: MAX_W, children: isTooltipMultiline && typeof (tooltipContent ?? text) === 'string' ? (_jsx(SizableText, { size: "$1", style: { whiteSpace: 'pre-wrap' }, children: tooltipContent ?? text })) : ((tooltipContent ?? text)) })] }));
+}
+//# sourceMappingURL=truncated-text.js.map

package/dist/backends/gui/truncated-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncated-text.js","sourceRoot":"","sources":["../../../src/backends/gui/truncated-text.tsx"],"names":[],"mappings":"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"}