@acronis-platform/ui-react 3.0.0 → 4.1.0

package/dist/components/ui/trend-indicator/trend-indicator.js

@@ -1,97 +1,48 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import * as u from "react";
-import { cva as b } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { ArrowRightIcon as I, ArrowTrendDownIcon as N, ArrowTrendUpIcon as T } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as h } from "../../../lib/utils.js";
-import { Tooltip as w, TooltipTrigger as k, TooltipContent as z } from "../tooltip/tooltip.js";
-const R = b(
-  "inline-flex items-center align-middle font-medium [&_svg]:shrink-0",
-  {
-    variants: {
-      sentiment: {
-        positive: "text-[var(--ui-text-on-status-success)]",
-        negative: "text-[var(--ui-text-on-status-danger)]",
-        neutral: "text-[var(--ui-text-on-status-neutral)]"
-      },
-      size: {
-        small: "gap-0.5 text-xs [&_svg]:size-3.5",
-        medium: "gap-1 text-sm [&_svg]:size-4"
-      },
-      variant: {
-        inline: "",
-        badge: "rounded-sm px-1.5 py-0.5"
-      }
-    },
-    // The badge tint pairs with the same status family as the text color.
-    compoundVariants: [
-      {
-        variant: "badge",
-        sentiment: "positive",
-        className: "bg-[var(--ui-background-status-success)]"
-      },
-      {
-        variant: "badge",
-        sentiment: "negative",
-        className: "bg-[var(--ui-background-status-danger)]"
-      },
-      {
-        variant: "badge",
-        sentiment: "neutral",
-        className: "bg-[var(--ui-background-status-neutral)]"
-      }
-    ],
-    defaultVariants: {
-      sentiment: "neutral",
-      size: "medium",
-      variant: "inline"
-    }
-  }
-), _ = {
-  up: T,
-  down: N,
-  flat: I
-}, y = u.forwardRef(
-  ({
-    className: m,
-    direction: e,
-    sentiment: a,
-    size: g,
-    variant: p,
-    value: n,
-    comparisonLabel: r,
-    tooltip: s,
-    showIcon: v = !0,
-    ariaLabel: i,
-    ...x
-  }, o) => {
-    const f = _[e], l = s != null, d = /* @__PURE__ */ c(
-      "span",
-      {
-        "data-direction": e,
-        "data-sentiment": a ?? "neutral",
-        className: h(
-          R({ sentiment: a, size: g, variant: p }),
-          m
-        ),
-        ...i ? { role: "img", "aria-label": i } : {},
-        tabIndex: l ? 0 : void 0,
-        ...x,
-        children: [
-          v && /* @__PURE__ */ t(f, { "aria-hidden": !0, className: "rtl:-scale-x-100" }),
-          n != null && /* @__PURE__ */ t("span", { className: "tabular-nums", children: n }),
-          r != null && /* @__PURE__ */ t("span", { className: "text-[var(--ui-text-on-surface-secondary)]", children: r })
-        ]
-      }
-    );
-    return l ? /* @__PURE__ */ c(w, { children: [
-      /* @__PURE__ */ t(k, { ref: o, render: d }),
-      /* @__PURE__ */ t(z, { children: s })
-    ] }) : u.cloneElement(d, { ref: o });
-  }
-);
-y.displayName = "TrendIndicator";
-export {
-  y as TrendIndicator,
-  R as trendIndicatorVariants
-};
-//# sourceMappingURL=trend-indicator.js.map
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { Tooltip as n, TooltipContent as r, TooltipTrigger as i } from "../tooltip/tooltip.js";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { ArrowRightIcon as c, ArrowTrendDownIcon as l, ArrowTrendUpIcon as u } from "@acronis-platform/icons-react/stroke-mono";
+//#region src/components/ui/trend-indicator/trend-indicator.tsx
+var d = t("inline-flex items-center gap-0.5 align-middle text-xs font-medium [&_svg]:size-3.5 [&_svg]:shrink-0", {
+	variants: { sentiment: {
+		positive: "text-[var(--ui-text-on-status-success)]",
+		negative: "text-[var(--ui-text-on-status-danger)]",
+		neutral: "text-[var(--ui-text-on-status-neutral)]"
+	} },
+	defaultVariants: { sentiment: "neutral" }
+}), f = {
+	up: u,
+	down: l,
+	flat: c
+}, p = a.forwardRef(({ className: t, direction: c, sentiment: l, value: u, tooltip: p, showIcon: m = !0, ariaLabel: h, ...g }, _) => {
+	let v = f[c], y = p != null, b = /* @__PURE__ */ s("span", {
+		"data-direction": c,
+		"data-sentiment": l ?? "neutral",
+		className: e(d({ sentiment: l }), t),
+		...h ? {
+			role: "img",
+			"aria-label": h
+		} : {},
+		tabIndex: y ? 0 : void 0,
+		...g,
+		children: [m && /* @__PURE__ */ o(v, {
+			"aria-hidden": !0,
+			className: "rtl:-scale-x-100"
+		}), u != null && /* @__PURE__ */ o("span", {
+			className: "tabular-nums",
+			children: u
+		})]
+	});
+	return y ? /* @__PURE__ */ s(n, { children: [/* @__PURE__ */ o(i, {
+		ref: _,
+		render: b
+	}), /* @__PURE__ */ o(r, { children: p })] }) : a.cloneElement(b, { ref: _ });
+});
+p.displayName = "TrendIndicator";
+//#endregion
+export { p as TrendIndicator, d as trendIndicatorVariants };
+
+//# sourceMappingURL=trend-indicator.js.map

package/dist/components/ui/trend-indicator/trend-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"trend-indicator.js","sources":["../../../../src/components/ui/trend-indicator/trend-indicator.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  ArrowRightIcon,\n  ArrowTrendDownIcon,\n  ArrowTrendUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A small, presentational trend/delta indicator: a direction glyph + a\n// pre-formatted change value + an optional comparison label. It deliberately\n// separates `direction` (what happened mathematically) from `sentiment`\n// (whether that change is good or bad), because the kit can't assume up = good —\n// revenue ↑ is positive, threats ↑ is negative, MTTR ↓ is positive. The consumer\n// computes both and passes an already-formatted `value`; this component never\n// diffs two numbers, rounds, or interprets domain rules. Sentiment drives the\n// color through the semantic status text tokens (the glyph inherits via\n// `currentColor`), and the `badge` variant adds a matching status tint — no new\n// tokens.\nconst trendIndicatorVariants = cva(\n  'inline-flex items-center align-middle font-medium [&_svg]:shrink-0',\n  {\n    variants: {\n      sentiment: {\n        positive: 'text-[var(--ui-text-on-status-success)]',\n        negative: 'text-[var(--ui-text-on-status-danger)]',\n        neutral: 'text-[var(--ui-text-on-status-neutral)]',\n      },\n      size: {\n        small: 'gap-0.5 text-xs [&_svg]:size-3.5',\n        medium: 'gap-1 text-sm [&_svg]:size-4',\n      },\n      variant: {\n        inline: '',\n        badge: 'rounded-sm px-1.5 py-0.5',\n      },\n    },\n    // The badge tint pairs with the same status family as the text color.\n    compoundVariants: [\n      {\n        variant: 'badge',\n        sentiment: 'positive',\n        className: 'bg-[var(--ui-background-status-success)]',\n      },\n      {\n        variant: 'badge',\n        sentiment: 'negative',\n        className: 'bg-[var(--ui-background-status-danger)]',\n      },\n      {\n        variant: 'badge',\n        sentiment: 'neutral',\n        className: 'bg-[var(--ui-background-status-neutral)]',\n      },\n    ],\n    defaultVariants: {\n      sentiment: 'neutral',\n      size: 'medium',\n      variant: 'inline',\n    },\n  }\n);\n\n// `flat` uses a horizontal arrow (the \"no meaningful change\" glyph); up/down use\n// the trend arrows. All three carry a horizontal direction, so they mirror under\n// `dir=\"rtl\"` (`rtl:-scale-x-100`) to stay aligned with the mirrored text flow.\nconst DIRECTION_ICON = {\n  up: ArrowTrendUpIcon,\n  down: ArrowTrendDownIcon,\n  flat: ArrowRightIcon,\n} as const;\n\nexport interface TrendIndicatorProps\n  extends Omit<React.ComponentProps<'span'>, 'children'>,\n    VariantProps<typeof trendIndicatorVariants> {\n  /** What changed mathematically — selects the direction glyph. */\n  direction: 'up' | 'down' | 'flat';\n  /**\n   * Already-formatted change to display — e.g. `\"12%\"`, `\"3.5 h\"`,\n   * `\"Improving\"`, `\"4.2 h → 2.8 h\"`. The kit does not format or compute it.\n   */\n  value?: React.ReactNode;\n  /** Secondary comparison caption — e.g. `\"vs previous quarter\"`, `\"YoY\"`. */\n  comparisonLabel?: React.ReactNode;\n  /** Contextual hint shown on hover/focus (Base UI Tooltip). */\n  tooltip?: React.ReactNode;\n  /** Show the leading direction glyph. Defaults to `true` — color alone isn't enough. */\n  showIcon?: boolean;\n  /**\n   * Accessible sentence describing the trend (e.g. \"Revenue increased 12%\n   * compared with the previous quarter\"). Applied as the element's label via\n   * `role=\"img\"`, since the kit can't build a correct, localized sentence from\n   * `direction` + `value` alone. Without it, assistive tech reads the visible\n   * `value` / `comparisonLabel` text (the glyph is decorative).\n   */\n  ariaLabel?: string;\n}\n\nconst TrendIndicator = React.forwardRef<HTMLSpanElement, TrendIndicatorProps>(\n  (\n    {\n      className,\n      direction,\n      sentiment,\n      size,\n      variant,\n      value,\n      comparisonLabel,\n      tooltip,\n      showIcon = true,\n      ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const Icon = DIRECTION_ICON[direction];\n    const hasTooltip = tooltip != null;\n\n    const root = (\n      <span\n        data-direction={direction}\n        data-sentiment={sentiment ?? 'neutral'}\n        className={cn(\n          trendIndicatorVariants({ sentiment, size, variant }),\n          className\n        )}\n        // With an explicit sentence, the whole unit is one labelled image and\n        // the inner text/glyph is decorative; otherwise the visible text carries\n        // the meaning and the glyph is hidden.\n        {...(ariaLabel ? { role: 'img', 'aria-label': ariaLabel } : {})}\n        // When it's a tooltip trigger, make it keyboard-reachable so the hint\n        // isn't hover-only.\n        tabIndex={hasTooltip ? 0 : undefined}\n        {...props}\n      >\n        {showIcon && <Icon aria-hidden className=\"rtl:-scale-x-100\" />}\n        {value != null && <span className=\"tabular-nums\">{value}</span>}\n        {comparisonLabel != null && (\n          <span className=\"text-[var(--ui-text-on-surface-secondary)]\">\n            {comparisonLabel}\n          </span>\n        )}\n      </span>\n    );\n\n    if (!hasTooltip) {\n      return React.cloneElement(root, { ref });\n    }\n\n    return (\n      <Tooltip>\n        {/* Base UI's Trigger ref is typed to its default <button>; the trigger\n            here is the span, so the runtime ref is that span. */}\n        <TooltipTrigger ref={ref as React.Ref<HTMLButtonElement>} render={root} />\n        <TooltipContent>{tooltip}</TooltipContent>\n      </Tooltip>\n    );\n  }\n);\nTrendIndicator.displayName = 'TrendIndicator';\n\nexport { TrendIndicator, trendIndicatorVariants };\n"],"names":["trendIndicatorVariants","cva","DIRECTION_ICON","ArrowTrendUpIcon","ArrowTrendDownIcon","ArrowRightIcon","TrendIndicator","React","className","direction","sentiment","size","variant","value","comparisonLabel","tooltip","showIcon","ariaLabel","props","ref","Icon","hasTooltip","root","jsxs","cn","jsx","Tooltip","TooltipTrigger","TooltipContent"],"mappings":";;;;;;AAuBA,MAAMA,IAAyBC;AAAA,EAC7B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,WAAW;AAAA,QACT,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS;AAAA,MAAA;AAAA,MAEX,MAAM;AAAA,QACJ,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA,MAEV,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,MAAA;AAAA,IACT;AAAA;AAAA,IAGF,kBAAkB;AAAA,MAChB;AAAA,QACE,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,MAAA;AAAA,MAEb;AAAA,QACE,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,MAAA;AAAA,MAEb;AAAA,QACE,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,iBAAiB;AAAA,MACf,WAAW;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAKMC,IAAiB;AAAA,EACrB,IAAIC;AAAA,EACJ,MAAMC;AAAA,EACN,MAAMC;AACR,GA4BMC,IAAiBC,EAAM;AAAA,EAC3B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAOlB,EAAeO,CAAS,GAC/BY,IAAaN,KAAW,MAExBO,IACJ,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,kBAAgBd;AAAA,QAChB,kBAAgBC,KAAa;AAAA,QAC7B,WAAWc;AAAA,UACTxB,EAAuB,EAAE,WAAAU,GAAW,MAAAC,GAAM,SAAAC,GAAS;AAAA,UACnDJ;AAAA,QAAA;AAAA,QAKD,GAAIS,IAAY,EAAE,MAAM,OAAO,cAAcA,EAAA,IAAc,CAAA;AAAA,QAG5D,UAAUI,IAAa,IAAI;AAAA,QAC1B,GAAGH;AAAA,QAEH,UAAA;AAAA,UAAAF,KAAY,gBAAAS,EAACL,GAAA,EAAK,eAAW,IAAC,WAAU,oBAAmB;AAAA,UAC3DP,KAAS,QAAQ,gBAAAY,EAAC,QAAA,EAAK,WAAU,gBAAgB,UAAAZ,GAAM;AAAA,UACvDC,KAAmB,QAClB,gBAAAW,EAAC,QAAA,EAAK,WAAU,8CACb,UAAAX,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAKN,WAAKO,sBAKFK,GAAA,EAGC,UAAA;AAAA,MAAA,gBAAAD,EAACE,GAAA,EAAe,KAAAR,GAA0C,QAAQG,EAAA,CAAM;AAAA,MACxE,gBAAAG,EAACG,KAAgB,UAAAb,EAAA,CAAQ;AAAA,IAAA,GAC3B,IATOR,EAAM,aAAae,GAAM,EAAE,KAAAH,GAAK;AAAA,EAW3C;AACF;AACAb,EAAe,cAAc;"}
+{"version":3,"file":"trend-indicator.js","names":[],"sources":["../../../../src/components/ui/trend-indicator/trend-indicator.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  ArrowRightIcon,\n  ArrowTrendDownIcon,\n  ArrowTrendUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A small, presentational trend/delta indicator: a direction glyph + a\n// pre-formatted change value. It deliberately separates `direction` (what\n// happened mathematically) from `sentiment` (whether that change is good or\n// bad), because the kit can't assume up = good — revenue ↑ is positive,\n// threats ↑ is negative, MTTR ↓ is positive. The consumer computes both and\n// passes an already-formatted `value`; this component never diffs two numbers,\n// rounds, or interprets domain rules. Sentiment drives the color through the\n// semantic status text tokens (the glyph inherits via `currentColor`).\nconst trendIndicatorVariants = cva(\n  'inline-flex items-center gap-0.5 align-middle text-xs font-medium [&_svg]:size-3.5 [&_svg]:shrink-0',\n  {\n    variants: {\n      sentiment: {\n        positive: 'text-[var(--ui-text-on-status-success)]',\n        negative: 'text-[var(--ui-text-on-status-danger)]',\n        neutral: 'text-[var(--ui-text-on-status-neutral)]',\n      },\n    },\n    defaultVariants: {\n      sentiment: 'neutral',\n    },\n  }\n);\n\n// `flat` uses a horizontal arrow (the \"no meaningful change\" glyph); up/down use\n// the trend arrows. All three carry a horizontal direction, so they mirror under\n// `dir=\"rtl\"` (`rtl:-scale-x-100`) to stay aligned with the mirrored text flow.\nconst DIRECTION_ICON = {\n  up: ArrowTrendUpIcon,\n  down: ArrowTrendDownIcon,\n  flat: ArrowRightIcon,\n} as const;\n\nexport interface TrendIndicatorProps\n  extends Omit<React.ComponentProps<'span'>, 'children'>,\n    VariantProps<typeof trendIndicatorVariants> {\n  /** What changed mathematically — selects the direction glyph. */\n  direction: 'up' | 'down' | 'flat';\n  /**\n   * Already-formatted change to display — e.g. `\"12%\"`, `\"3.5 h\"`,\n   * `\"Improving\"`. The kit does not format or compute it.\n   */\n  value?: React.ReactNode;\n  /** Contextual hint shown on hover/focus (Base UI Tooltip). */\n  tooltip?: React.ReactNode;\n  /** Show the leading direction glyph. Defaults to `true` — color alone isn't enough. */\n  showIcon?: boolean;\n  /**\n   * Accessible sentence describing the trend (e.g. \"Revenue increased 12%\n   * compared with the previous quarter\"). Applied as the element's label via\n   * `role=\"img\"`, since the kit can't build a correct, localized sentence from\n   * `direction` + `value` alone. Without it, assistive tech reads the visible\n   * `value` text (the glyph is decorative).\n   */\n  ariaLabel?: string;\n}\n\nconst TrendIndicator = React.forwardRef<HTMLSpanElement, TrendIndicatorProps>(\n  (\n    {\n      className,\n      direction,\n      sentiment,\n      value,\n      tooltip,\n      showIcon = true,\n      ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const Icon = DIRECTION_ICON[direction];\n    const hasTooltip = tooltip != null;\n\n    const root = (\n      <span\n        data-direction={direction}\n        data-sentiment={sentiment ?? 'neutral'}\n        className={cn(trendIndicatorVariants({ sentiment }), className)}\n        {...(ariaLabel ? { role: 'img', 'aria-label': ariaLabel } : {})}\n        tabIndex={hasTooltip ? 0 : undefined}\n        {...props}\n      >\n        {showIcon && <Icon aria-hidden className=\"rtl:-scale-x-100\" />}\n        {value != null && <span className=\"tabular-nums\">{value}</span>}\n      </span>\n    );\n\n    if (!hasTooltip) {\n      return React.cloneElement(root, { ref });\n    }\n\n    return (\n      <Tooltip>\n        <TooltipTrigger ref={ref as React.Ref<HTMLButtonElement>} render={root} />\n        <TooltipContent>{tooltip}</TooltipContent>\n      </Tooltip>\n    );\n  }\n);\nTrendIndicator.displayName = 'TrendIndicator';\n\nexport { TrendIndicator, trendIndicatorVariants };\n"],"mappings":";;;;;;;;AAqBA,IAAM,IAAyB,EAC7B,uGACA;CACE,UAAU,EACR,WAAW;EACT,UAAU;EACV,UAAU;EACV,SAAS;CACX,EACF;CACA,iBAAiB,EACf,WAAW,UACb;AACF,CACF,GAKM,IAAiB;CACrB,IAAI;CACJ,MAAM;CACN,MAAM;AACR,GA0BM,IAAiB,EAAM,YAEzB,EACE,cACA,cACA,cACA,UACA,YACA,cAAW,IACX,cACA,GAAG,KAEL,MACG;CACH,IAAM,IAAO,EAAe,IACtB,IAAa,KAAW,MAExB,IACJ,kBAAC,QAAD;EACE,kBAAgB;EAChB,kBAAgB,KAAa;EAC7B,WAAW,EAAG,EAAuB,EAAE,aAAU,CAAC,GAAG,CAAS;EAC9D,GAAK,IAAY;GAAE,MAAM;GAAO,cAAc;EAAU,IAAI,CAAC;EAC7D,UAAU,IAAa,IAAI,KAAA;EAC3B,GAAI;EANN,UAAA,CAQG,KAAY,kBAAC,GAAD;GAAM,eAAA;GAAY,WAAU;EAAoB,CAAA,GAC5D,KAAS,QAAQ,kBAAC,QAAD;GAAM,WAAU;GAAgB,UAAA;EAAY,CAAA,CAC1D;;CAOR,OAJK,IAKH,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EAAqB;EAAqC,QAAQ;CAAO,CAAA,GACzE,kBAAC,GAAD,EAAA,UAAiB,EAAwB,CAAA,CAClC,EAAA,CAAA,IAPF,EAAM,aAAa,GAAM,EAAE,OAAI,CAAC;AAS3C,CACF;AACA,EAAe,cAAc"}

package/dist/components/ui/truncate-text/middle-truncate.js

@@ -1,20 +1,20 @@
-function u(n, c, { measure: l, ellipsis: i = "…" }) {
-  if (c <= 0) return "";
-  if (l(n) <= c) return n;
-  if (l(i) > c) return "";
-  const f = (r) => {
-    if (r <= 0) return i;
-    const t = Math.ceil(r / 2), h = r - t;
-    return h > 0 ? `${n.slice(0, t)}${i}${n.slice(n.length - h)}` : `${n.slice(0, t)}${i}`;
-  };
-  let e = 0, o = n.length;
-  for (; o - e > 1; ) {
-    const r = Math.floor((e + o) / 2);
-    l(f(r)) <= c ? e = r : o = r;
-  }
-  return f(e);
+//#region src/components/ui/truncate-text/middle-truncate.ts
+function e(e, t, { measure: n, ellipsis: r = "…" }) {
+	if (t <= 0) return "";
+	if (n(e) <= t) return e;
+	if (n(r) > t) return "";
+	let i = (t) => {
+		if (t <= 0) return r;
+		let n = Math.ceil(t / 2), i = t - n;
+		return i > 0 ? `${e.slice(0, n)}${r}${e.slice(e.length - i)}` : `${e.slice(0, n)}${r}`;
+	}, a = 0, o = e.length;
+	for (; o - a > 1;) {
+		let e = Math.floor((a + o) / 2);
+		n(i(e)) <= t ? a = e : o = e;
+	}
+	return i(a);
 }
-export {
-  u as middleTruncate
-};
-//# sourceMappingURL=middle-truncate.js.map
+//#endregion
+export { e as middleTruncate };
+
+//# sourceMappingURL=middle-truncate.js.map

package/dist/components/ui/truncate-text/middle-truncate.js.map

@@ -1 +1 @@
-{"version":3,"file":"middle-truncate.js","sources":["../../../../src/components/ui/truncate-text/middle-truncate.ts"],"sourcesContent":["// The pure search behind `<TruncateText mode=\"middle\">`: given a string, a pixel budget, and a\n// way to measure a candidate's rendered width, find the longest start+end slice\n// (joined by an ellipsis) that still fits — preserving both ends of the string\n// rather than just the start, which is what a plain CSS end-ellipsis already does\n// and is useless for a URL, hash or path whose distinguishing part is at the tail.\n//\n// Binary search over \"how many non-ellipsis characters to keep\", not over the split\n// point between start/end — the split is always the same proportion (kept chars\n// divided evenly, the extra one going to the start on an odd count), so there is\n// exactly one candidate per kept-count and `measure` is called O(log n) times\n// rather than O(n). `measure` is injected rather than hard-coded to\n// `canvas.measureText` specifically so this file has no DOM dependency: the real\n// component supplies a canvas-backed measurer (see `truncate-text.tsx`), and\n// these tests supply a deterministic fake — jsdom has no layout engine, so a test\n// asserting real pixel widths would need the browser project for no benefit here,\n// the search logic does not care what \"width\" means.\n\nexport interface MiddleTruncateOptions {\n  /** Returns the rendered width of `candidate`, in the same unit as `maxWidth`. */\n  readonly measure: (candidate: string) => number;\n  /** Inserted between the kept start and end slices. Defaults to `'…'`. */\n  readonly ellipsis?: string;\n}\n\n/**\n * Returns `text` unchanged if it already fits `maxWidth`, otherwise the widest\n * start+ellipsis+end slice that does. Never returns something wider than\n * `maxWidth`, even when nothing meaningful fits — the degenerate result is the\n * bare ellipsis, or `''` if `maxWidth` cannot fit that either.\n */\nexport function middleTruncate(\n  text: string,\n  maxWidth: number,\n  { measure, ellipsis = '…' }: MiddleTruncateOptions\n): string {\n  if (maxWidth <= 0) return '';\n  if (measure(text) <= maxWidth) return text;\n\n  const ellipsisWidth = measure(ellipsis);\n  if (ellipsisWidth > maxWidth) return '';\n\n  const candidateFor = (kept: number): string => {\n    if (kept <= 0) return ellipsis;\n    const startLen = Math.ceil(kept / 2);\n    const endLen = kept - startLen;\n    return endLen > 0\n      ? `${text.slice(0, startLen)}${ellipsis}${text.slice(text.length - endLen)}`\n      : `${text.slice(0, startLen)}${ellipsis}`;\n  };\n\n  // Invariant: `low` is always a kept-count that fits (0 does, by the ellipsis\n  // check above); `high` is always one that does not (`text.length` does not, by\n  // the \"already fits\" check above). The loop halves the gap until they meet,\n  // so `low` ends on the largest fitting count.\n  let low = 0;\n  let high = text.length;\n  while (high - low > 1) {\n    const mid = Math.floor((low + high) / 2);\n    if (measure(candidateFor(mid)) <= maxWidth) {\n      low = mid;\n    } else {\n      high = mid;\n    }\n  }\n  return candidateFor(low);\n}\n"],"names":["middleTruncate","text","maxWidth","measure","ellipsis","candidateFor","kept","startLen","endLen","low","high","mid"],"mappings":"AA8BO,SAASA,EACdC,GACAC,GACA,EAAE,SAAAC,GAAS,UAAAC,IAAW,OACd;AACR,MAAIF,KAAY,EAAG,QAAO;AAC1B,MAAIC,EAAQF,CAAI,KAAKC,EAAU,QAAOD;AAGtC,MADsBE,EAAQC,CAAQ,IAClBF,EAAU,QAAO;AAErC,QAAMG,IAAe,CAACC,MAAyB;AAC7C,QAAIA,KAAQ,EAAG,QAAOF;AACtB,UAAMG,IAAW,KAAK,KAAKD,IAAO,CAAC,GAC7BE,IAASF,IAAOC;AACtB,WAAOC,IAAS,IACZ,GAAGP,EAAK,MAAM,GAAGM,CAAQ,CAAC,GAAGH,CAAQ,GAAGH,EAAK,MAAMA,EAAK,SAASO,CAAM,CAAC,KACxE,GAAGP,EAAK,MAAM,GAAGM,CAAQ,CAAC,GAAGH,CAAQ;AAAA,EAC3C;AAMA,MAAIK,IAAM,GACNC,IAAOT,EAAK;AAChB,SAAOS,IAAOD,IAAM,KAAG;AACrB,UAAME,IAAM,KAAK,OAAOF,IAAMC,KAAQ,CAAC;AACvC,IAAIP,EAAQE,EAAaM,CAAG,CAAC,KAAKT,IAChCO,IAAME,IAEND,IAAOC;AAAA,EAEX;AACA,SAAON,EAAaI,CAAG;AACzB;"}
+{"version":3,"file":"middle-truncate.js","names":[],"sources":["../../../../src/components/ui/truncate-text/middle-truncate.ts"],"sourcesContent":["// The pure search behind `<TruncateText mode=\"middle\">`: given a string, a pixel budget, and a\n// way to measure a candidate's rendered width, find the longest start+end slice\n// (joined by an ellipsis) that still fits — preserving both ends of the string\n// rather than just the start, which is what a plain CSS end-ellipsis already does\n// and is useless for a URL, hash or path whose distinguishing part is at the tail.\n//\n// Binary search over \"how many non-ellipsis characters to keep\", not over the split\n// point between start/end — the split is always the same proportion (kept chars\n// divided evenly, the extra one going to the start on an odd count), so there is\n// exactly one candidate per kept-count and `measure` is called O(log n) times\n// rather than O(n). `measure` is injected rather than hard-coded to\n// `canvas.measureText` specifically so this file has no DOM dependency: the real\n// component supplies a canvas-backed measurer (see `truncate-text.tsx`), and\n// these tests supply a deterministic fake — jsdom has no layout engine, so a test\n// asserting real pixel widths would need the browser project for no benefit here,\n// the search logic does not care what \"width\" means.\n\nexport interface MiddleTruncateOptions {\n  /** Returns the rendered width of `candidate`, in the same unit as `maxWidth`. */\n  readonly measure: (candidate: string) => number;\n  /** Inserted between the kept start and end slices. Defaults to `'…'`. */\n  readonly ellipsis?: string;\n}\n\n/**\n * Returns `text` unchanged if it already fits `maxWidth`, otherwise the widest\n * start+ellipsis+end slice that does. Never returns something wider than\n * `maxWidth`, even when nothing meaningful fits — the degenerate result is the\n * bare ellipsis, or `''` if `maxWidth` cannot fit that either.\n */\nexport function middleTruncate(\n  text: string,\n  maxWidth: number,\n  { measure, ellipsis = '…' }: MiddleTruncateOptions\n): string {\n  if (maxWidth <= 0) return '';\n  if (measure(text) <= maxWidth) return text;\n\n  const ellipsisWidth = measure(ellipsis);\n  if (ellipsisWidth > maxWidth) return '';\n\n  const candidateFor = (kept: number): string => {\n    if (kept <= 0) return ellipsis;\n    const startLen = Math.ceil(kept / 2);\n    const endLen = kept - startLen;\n    return endLen > 0\n      ? `${text.slice(0, startLen)}${ellipsis}${text.slice(text.length - endLen)}`\n      : `${text.slice(0, startLen)}${ellipsis}`;\n  };\n\n  // Invariant: `low` is always a kept-count that fits (0 does, by the ellipsis\n  // check above); `high` is always one that does not (`text.length` does not, by\n  // the \"already fits\" check above). The loop halves the gap until they meet,\n  // so `low` ends on the largest fitting count.\n  let low = 0;\n  let high = text.length;\n  while (high - low > 1) {\n    const mid = Math.floor((low + high) / 2);\n    if (measure(candidateFor(mid)) <= maxWidth) {\n      low = mid;\n    } else {\n      high = mid;\n    }\n  }\n  return candidateFor(low);\n}\n"],"mappings":";AA8BA,SAAgB,EACd,GACA,GACA,EAAE,YAAS,cAAW,OACd;CACR,IAAI,KAAY,GAAG,OAAO;CAC1B,IAAI,EAAQ,CAAI,KAAK,GAAU,OAAO;CAGtC,IADsB,EAAQ,CAC1B,IAAgB,GAAU,OAAO;CAErC,IAAM,KAAgB,MAAyB;EAC7C,IAAI,KAAQ,GAAG,OAAO;EACtB,IAAM,IAAW,KAAK,KAAK,IAAO,CAAC,GAC7B,IAAS,IAAO;EACtB,OAAO,IAAS,IACZ,GAAG,EAAK,MAAM,GAAG,CAAQ,IAAI,IAAW,EAAK,MAAM,EAAK,SAAS,CAAM,MACvE,GAAG,EAAK,MAAM,GAAG,CAAQ,IAAI;CACnC,GAMI,IAAM,GACN,IAAO,EAAK;CAChB,OAAO,IAAO,IAAM,IAAG;EACrB,IAAM,IAAM,KAAK,OAAO,IAAM,KAAQ,CAAC;EACvC,AAAI,EAAQ,EAAa,CAAG,CAAC,KAAK,IAChC,IAAM,IAEN,IAAO;CAEX;CACA,OAAO,EAAa,CAAG;AACzB"}

package/dist/components/ui/truncate-text/text-width.js

@@ -1,12 +1,13 @@
-let e;
-function o() {
-  return e === void 0 && (e = document.createElement("canvas").getContext("2d")), e;
+//#region src/components/ui/truncate-text/text-width.ts
+var e;
+function t() {
+	return e === void 0 && (e = document.createElement("canvas").getContext("2d")), e;
 }
-function u(n, r) {
-  const t = o();
-  return t === null ? n.length * 8 : (t.font = r, t.measureText(n).width);
+function n(e, n) {
+	let r = t();
+	return r === null ? e.length * 8 : (r.font = n, r.measureText(e).width);
 }
-export {
-  u as measureTextWidth
-};
-//# sourceMappingURL=text-width.js.map
+//#endregion
+export { n as measureTextWidth };
+
+//# sourceMappingURL=text-width.js.map

package/dist/components/ui/truncate-text/text-width.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-width.js","sources":["../../../../src/components/ui/truncate-text/text-width.ts"],"sourcesContent":["// A single offscreen canvas, reused across every `<TruncateText mode=\"middle\">` instance and\n// every candidate it measures. `canvas.measureText` is O(1) per call — no layout,\n// no reflow — which is why `middleTruncate`'s binary search calls `measure` a\n// handful of times per resize without it being a performance concern the way a\n// DOM-clone measurement (render, read `offsetWidth`, repeat per candidate) would\n// be for a search space the size of a whole string.\nlet sharedContext: CanvasRenderingContext2D | null | undefined;\n\nfunction getSharedContext(): CanvasRenderingContext2D | null {\n  if (sharedContext === undefined) {\n    sharedContext = document.createElement('canvas').getContext('2d');\n  }\n  return sharedContext;\n}\n\n/**\n * The rendered width of `text` in `font` (a CSS `font` shorthand string, e.g. from\n * `getComputedStyle(el).font`), in CSS pixels.\n *\n * Falls back to a fixed per-character estimate when `canvas` 2D contexts are\n * unavailable (jsdom's default; the real component is exercised by the browser\n * test project instead) — a rough width is enough to keep the search from\n * throwing, and nothing in the unit project renders far enough to compare it\n * against a pixel budget.\n */\nexport function measureTextWidth(text: string, font: string): number {\n  const context = getSharedContext();\n  if (context === null) return text.length * 8;\n  context.font = font;\n  return context.measureText(text).width;\n}\n"],"names":["sharedContext","getSharedContext","measureTextWidth","text","font","context"],"mappings":"AAMA,IAAIA;AAEJ,SAASC,IAAoD;AAC3D,SAAID,MAAkB,WACpBA,IAAgB,SAAS,cAAc,QAAQ,EAAE,WAAW,IAAI,IAE3DA;AACT;AAYO,SAASE,EAAiBC,GAAcC,GAAsB;AACnE,QAAMC,IAAUJ,EAAA;AAChB,SAAII,MAAY,OAAaF,EAAK,SAAS,KAC3CE,EAAQ,OAAOD,GACRC,EAAQ,YAAYF,CAAI,EAAE;AACnC;"}
+{"version":3,"file":"text-width.js","names":[],"sources":["../../../../src/components/ui/truncate-text/text-width.ts"],"sourcesContent":["// A single offscreen canvas, reused across every `<TruncateText mode=\"middle\">` instance and\n// every candidate it measures. `canvas.measureText` is O(1) per call — no layout,\n// no reflow — which is why `middleTruncate`'s binary search calls `measure` a\n// handful of times per resize without it being a performance concern the way a\n// DOM-clone measurement (render, read `offsetWidth`, repeat per candidate) would\n// be for a search space the size of a whole string.\nlet sharedContext: CanvasRenderingContext2D | null | undefined;\n\nfunction getSharedContext(): CanvasRenderingContext2D | null {\n  if (sharedContext === undefined) {\n    sharedContext = document.createElement('canvas').getContext('2d');\n  }\n  return sharedContext;\n}\n\n/**\n * The rendered width of `text` in `font` (a CSS `font` shorthand string, e.g. from\n * `getComputedStyle(el).font`), in CSS pixels.\n *\n * Falls back to a fixed per-character estimate when `canvas` 2D contexts are\n * unavailable (jsdom's default; the real component is exercised by the browser\n * test project instead) — a rough width is enough to keep the search from\n * throwing, and nothing in the unit project renders far enough to compare it\n * against a pixel budget.\n */\nexport function measureTextWidth(text: string, font: string): number {\n  const context = getSharedContext();\n  if (context === null) return text.length * 8;\n  context.font = font;\n  return context.measureText(text).width;\n}\n"],"mappings":";AAMA,IAAI;AAEJ,SAAS,IAAoD;CAI3D,OAHI,MAAkB,KAAA,MACpB,IAAgB,SAAS,cAAc,QAAQ,CAAC,CAAC,WAAW,IAAI,IAE3D;AACT;AAYA,SAAgB,EAAiB,GAAc,GAAsB;CACnE,IAAM,IAAU,EAAiB;CAGjC,OAFI,MAAY,OAAa,EAAK,SAAS,KAC3C,EAAQ,OAAO,GACR,EAAQ,YAAY,CAAI,CAAC,CAAC;AACnC"}

package/dist/components/ui/truncate-text/truncate-text.js

@@ -1,152 +1,92 @@
-import { jsx as l, jsxs as k } from "react/jsx-runtime";
-import * as n from "react";
-import { cn as x } from "../../../lib/utils.js";
-import { middleTruncate as C } from "./middle-truncate.js";
-import { measureTextWidth as E } from "./text-width.js";
-import { Tooltip as W, TooltipTrigger as g, TooltipContent as S } from "../tooltip/tooltip.js";
-const R = n.forwardRef(
-  function({ children: e, mode: f = "end", className: s, side: a = "top", lines: o = 1, defaultOpen: c, portalContainer: r }, u) {
-    return f === "middle" ? /* @__PURE__ */ l(
-      z,
-      {
-        ref: u,
-        text: e,
-        side: a,
-        portalContainer: r,
-        className: s
-      }
-    ) : /* @__PURE__ */ l(
-      O,
-      {
-        ref: u,
-        text: e,
-        side: a,
-        lines: o,
-        defaultOpen: c,
-        portalContainer: r,
-        className: s
-      }
-    );
-  }
-), O = n.forwardRef(
-  function({ text: e, side: f, lines: s, defaultOpen: a, portalContainer: o, className: c }, r) {
-    const u = n.useRef(null), [d, v] = n.useState(!1), m = n.useCallback(
-      (t) => {
-        u.current = t, typeof r == "function" ? r(t) : r && (r.current = t);
-      },
-      [r]
-    );
-    n.useLayoutEffect(() => {
-      const t = u.current;
-      if (!t) return;
-      const p = () => v(
-        s > 1 ? t.scrollHeight > t.clientHeight + 1 : t.scrollWidth > t.clientWidth + 1
-      );
-      p();
-      const b = new ResizeObserver(p);
-      return b.observe(t), () => b.disconnect();
-    }, [e, s, d]);
-    const T = s > 1, h = T ? {
-      display: "-webkit-box",
-      WebkitLineClamp: s,
-      WebkitBoxOrient: "vertical",
-      overflow: "hidden"
-    } : void 0, i = /* @__PURE__ */ l(
-      "span",
-      {
-        ref: m,
-        className: x("block", T ? "overflow-hidden" : "truncate", c),
-        style: h,
-        children: e
-      }
-    );
-    return d ? /* @__PURE__ */ k(W, { defaultOpen: a, children: [
-      /* @__PURE__ */ l(g, { render: i }),
-      /* @__PURE__ */ l(S, { side: f, portalContainer: o, children: e })
-    ] }) : i;
-  }
-), z = n.forwardRef(
-  function({ text: e, side: f, portalContainer: s, className: a }, o) {
-    const [c, r] = n.useState(null), [u, d] = n.useState(e), [v, m] = n.useState(!1), T = n.useCallback(
-      (i) => {
-        r(i), typeof o == "function" ? o(i) : o && (o.current = i);
-      },
-      [o]
-    );
-    n.useLayoutEffect(() => {
-      if (m(!1), c === null || typeof ResizeObserver > "u") {
-        d(e);
-        return;
-      }
-      const i = () => {
-        const p = c.clientWidth;
-        if (p === 0) return;
-        const b = getComputedStyle(c).font;
-        d(
-          C(e, p, {
-            measure: (w) => E(w, b)
-          })
-        ), m(!0);
-      };
-      i();
-      const t = new ResizeObserver(i);
-      return t.observe(c), () => t.disconnect();
-    }, [c, e]);
-    const h = /* @__PURE__ */ l(
-      "span",
-      {
-        ref: T,
-        className: x(
-          // `flex-1` (`flex: 1 1 0%`) only takes effect when the parent this
-          // renders into happens to itself be a flex container — inert
-          // otherwise, so it's safe alongside `block`. It's not decorative:
-          // without it, a `display: block` element with no explicit width
-          // only *auto-fills a plain block parent* — the browser's default
-          // "fill available width" rule for `width: auto` is specific to
-          // block layout. Nested inside a flex parent (a caller's own cell
-          // wrapping this next to an icon button, say), the same element
-          // becomes a flex item instead, where `flex-basis: auto` means
-          // "size to your own content" — and this component's own content
-          // is whatever it truncated itself to *last* time. Once shrunk, it
-          // would then measure its own shrunken self forever, growing back
-          // only if some ancestor's width changed enough to force a reflow
-          // for an unrelated reason — not when the column actually had more
-          // room to give it all along.
-          "block min-w-0 flex-1",
-          // Nowrap + clip only once `measured` — *before* that, this is the
-          // string's first-ever render, and if it already clips and refuses to
-          // wrap, it dictates its own column's width to `table-layout: auto`
-          // before `ResizeObserver` ever gets a turn: nowrap makes an unbroken
-          // string's min-content the string's *entire* rendered width, so the
-          // browser hands the column exactly that much room — measuring
-          // `clientWidth` after the fact just reads back the width this same
-          // element inflated the column to, not the width some other column
-          // needed and this one gave up.
-          //
-          // Left at the browser's own default on the unmeasured pass rather than
-          // forced to `overflow-wrap: anywhere` — tried that first, and it
-          // overcorrects: telling `auto`-layout this column's min-content is a
-          // single character makes it treat the column as free to take almost
-          // nothing, starving it in favor of siblings with a normal (space- and
-          // punctuation-driven) min-content. The browser's own line-breaking
-          // already finds break opportunities in a URL — after `/`, around `?`,
-          // `=`, `_` — without being told everything is breakable, which is
-          // exactly the multi-line wrap this component exists to replace: worse
-          // than what `nowrap` would give it, but a real, usable column width to
-          // hand to the first `ResizeObserver` measurement, not a starved one.
-          v && "overflow-hidden whitespace-nowrap",
-          a
-        ),
-        children: u
-      }
-    );
-    return u === e ? h : /* @__PURE__ */ k(W, { children: [
-      /* @__PURE__ */ l(g, { render: h }),
-      /* @__PURE__ */ l(S, { side: f, portalContainer: s, children: e })
-    ] });
-  }
-);
-export {
-  R as TruncateText
-};
-//# sourceMappingURL=truncate-text.js.map
+import { cn as e } from "../../../lib/utils.js";
+import { Tooltip as t, TooltipContent as n, TooltipTrigger as r } from "../tooltip/tooltip.js";
+import { middleTruncate as i } from "./middle-truncate.js";
+import { measureTextWidth as a } from "./text-width.js";
+import * as o from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/ui/truncate-text/truncate-text.tsx
+var l = o.forwardRef(function({ children: e, mode: t = "end", className: n, side: r = "top", lines: i = 1, defaultOpen: a, portalContainer: o }, c) {
+	return t === "middle" ? /* @__PURE__ */ s(d, {
+		ref: c,
+		text: e,
+		side: r,
+		portalContainer: o,
+		className: n
+	}) : /* @__PURE__ */ s(u, {
+		ref: c,
+		text: e,
+		side: r,
+		lines: i,
+		defaultOpen: a,
+		portalContainer: o,
+		className: n
+	});
+}), u = o.forwardRef(function({ text: i, side: a, lines: l, defaultOpen: u, portalContainer: d, className: f }, p) {
+	let m = o.useRef(null), [h, g] = o.useState(!1), _ = o.useCallback((e) => {
+		m.current = e, typeof p == "function" ? p(e) : p && (p.current = e);
+	}, [p]);
+	o.useLayoutEffect(() => {
+		let e = m.current;
+		if (!e) return;
+		let t = () => g(l > 1 ? e.scrollHeight > e.clientHeight + 1 : e.scrollWidth > e.clientWidth + 1);
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [
+		i,
+		l,
+		h
+	]);
+	let v = l > 1, y = v ? {
+		display: "-webkit-box",
+		WebkitLineClamp: l,
+		WebkitBoxOrient: "vertical",
+		overflow: "hidden"
+	} : void 0, b = /* @__PURE__ */ s("span", {
+		ref: _,
+		className: e("block", v ? "overflow-hidden" : "truncate", f),
+		style: y,
+		children: i
+	});
+	return h ? /* @__PURE__ */ c(t, {
+		defaultOpen: u,
+		children: [/* @__PURE__ */ s(r, { render: b }), /* @__PURE__ */ s(n, {
+			side: a,
+			portalContainer: d,
+			children: i
+		})]
+	}) : b;
+}), d = o.forwardRef(function({ text: l, side: u, portalContainer: d, className: f }, p) {
+	let [m, h] = o.useState(null), [g, _] = o.useState(l), [v, y] = o.useState(!1), b = o.useCallback((e) => {
+		h(e), typeof p == "function" ? p(e) : p && (p.current = e);
+	}, [p]);
+	o.useLayoutEffect(() => {
+		if (y(!1), m === null || typeof ResizeObserver > "u") {
+			_(l);
+			return;
+		}
+		let e = () => {
+			let e = m.clientWidth;
+			if (e === 0) return;
+			let t = getComputedStyle(m).font;
+			_(i(l, e, { measure: (e) => a(e, t) })), y(!0);
+		};
+		e();
+		let t = new ResizeObserver(e);
+		return t.observe(m), () => t.disconnect();
+	}, [m, l]);
+	let x = /* @__PURE__ */ s("span", {
+		ref: b,
+		className: e("block min-w-0 flex-1", v && "overflow-hidden whitespace-nowrap", f),
+		children: g
+	});
+	return g === l ? x : /* @__PURE__ */ c(t, { children: [/* @__PURE__ */ s(r, { render: x }), /* @__PURE__ */ s(n, {
+		side: u,
+		portalContainer: d,
+		children: l
+	})] });
+});
+//#endregion
+export { l as TruncateText };
+
+//# sourceMappingURL=truncate-text.js.map

package/dist/components/ui/truncate-text/truncate-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"truncate-text.js","sources":["../../../../src/components/ui/truncate-text/truncate-text.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\nimport { middleTruncate } from './middle-truncate';\nimport { measureTextWidth } from './text-width';\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipContent>;\n\nexport interface TruncateTextProps {\n  /** The text to display. Also used verbatim as the tooltip body when truncated. */\n  children: string;\n  /**\n   * Where the ellipsis goes. `'end'` (default) is the familiar CSS\n   * `text-overflow: ellipsis` — reach for `'middle'` when the distinguishing\n   * part of the value is at the tail (a URL, a hash) rather than the start.\n   */\n  mode?: 'middle' | 'end';\n  /** Which side the tooltip opens on. Defaults to `top`. */\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  /**\n   * Max lines before truncating, in `'end'` mode only: `1` (default) =\n   * single-line ellipsis; `>1` = a multi-line clamp. Ignored in `'middle'`\n   * mode, which is inherently single-line.\n   */\n  lines?: number;\n  /**\n   * Force the tooltip open on mount (only has effect when the text is truncated).\n   * Mainly for stories / visual review; normal usage reveals it on hover/focus.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Container the tooltip popup portals into. Pass a shadow root (e.g. a\n   * micro-frontend mount point) so the popup inherits the kit's styles; defaults\n   * to the document body.\n   */\n  portalContainer?: TooltipContentProps['portalContainer'];\n  /** Merged onto the rendered `<span>`. */\n  className?: string;\n}\n\n/**\n * Text that truncates with an ellipsis and reveals its full value in a tooltip\n * **only when it's actually clipped** — the tooltip is skipped when everything\n * fits, so short cells don't get a pointless hover target. Ideal for table cells.\n *\n * `'end'`-mode truncation is detected by comparing scroll vs client size and\n * re-checked on resize; `'middle'`-mode measures a real font metric via canvas\n * (there is no native CSS middle-ellipsis) and re-measures the same way.\n */\nexport const TruncateText = React.forwardRef<HTMLSpanElement, TruncateTextProps>(\n  function TruncateText(\n    { children, mode = 'end', className, side = 'top', lines = 1, defaultOpen, portalContainer },\n    forwardedRef\n  ) {\n    if (mode === 'middle') {\n      return (\n        <TruncateTextMiddle\n          ref={forwardedRef}\n          text={children}\n          side={side}\n          portalContainer={portalContainer}\n          className={className}\n        />\n      );\n    }\n\n    return (\n      <TruncateTextEnd\n        ref={forwardedRef}\n        text={children}\n        side={side}\n        lines={lines}\n        defaultOpen={defaultOpen}\n        portalContainer={portalContainer}\n        className={className}\n      />\n    );\n  }\n);\n\ninterface TruncateTextEndProps {\n  text: string;\n  side: 'top' | 'bottom' | 'left' | 'right';\n  lines: number;\n  defaultOpen: boolean | undefined;\n  portalContainer: TooltipContentProps['portalContainer'];\n  className: string | undefined;\n}\n\n/** The CSS end-ellipsis / multi-line-clamp half of `TruncateText`. */\nconst TruncateTextEnd = React.forwardRef<HTMLSpanElement, TruncateTextEndProps>(\n  function TruncateTextEnd(\n    { text, side, lines, defaultOpen, portalContainer, className },\n    forwardedRef\n  ) {\n    const innerRef = React.useRef<HTMLSpanElement | null>(null);\n    const [truncated, setTruncated] = React.useState(false);\n\n    // The component owns a ref for overflow measurement; still forward it so\n    // callers can reach the underlying span.\n    const setRef = React.useCallback(\n      (node: HTMLSpanElement | null) => {\n        innerRef.current = node;\n        if (typeof forwardedRef === 'function') forwardedRef(node);\n        else if (forwardedRef) forwardedRef.current = node;\n      },\n      [forwardedRef]\n    );\n\n    React.useLayoutEffect(() => {\n      const node = innerRef.current;\n      if (!node) return;\n      // +1 guards against sub-pixel rounding falsely reporting overflow.\n      // Genuine DOM-measuring layout effect: overflow can only be read after\n      // layout, so the sync setState here is required, not incidental.\n      const check = () =>\n        setTruncated(\n          lines > 1\n            ? node.scrollHeight > node.clientHeight + 1\n            : node.scrollWidth > node.clientWidth + 1\n        );\n      check();\n      const observer = new ResizeObserver(check);\n      observer.observe(node);\n      return () => observer.disconnect();\n      // `truncated` is a dep so the observer re-attaches to the span after it moves\n      // into / out of the tooltip trigger on the truncation flip.\n    }, [text, lines, truncated]);\n\n    const multiline = lines > 1;\n    const style: React.CSSProperties | undefined = multiline\n      ? {\n          display: '-webkit-box',\n          WebkitLineClamp: lines,\n          WebkitBoxOrient: 'vertical',\n          overflow: 'hidden',\n        }\n      : undefined;\n\n    const span = (\n      <span\n        ref={setRef}\n        className={cn('block', multiline ? 'overflow-hidden' : 'truncate', className)}\n        style={style}\n      >\n        {text}\n      </span>\n    );\n\n    if (!truncated) return span;\n\n    return (\n      <Tooltip defaultOpen={defaultOpen}>\n        <TooltipTrigger render={span} />\n        <TooltipContent side={side} portalContainer={portalContainer}>\n          {text}\n        </TooltipContent>\n      </Tooltip>\n    );\n  }\n);\n\ninterface TruncateTextMiddleProps {\n  text: string;\n  side: 'top' | 'bottom' | 'left' | 'right';\n  portalContainer: TooltipContentProps['portalContainer'];\n  className: string | undefined;\n}\n\n/**\n * The middle-ellipsis half of `TruncateText`. Sizes to the container, not the\n * other way around — it needs no `size`/`maxSize` on a column or wrapper to\n * have something to truncate against: it measures whatever width it is\n * actually rendered at, however that width was arrived at, and re-measures\n * via `ResizeObserver` if it changes.\n */\nconst TruncateTextMiddle = React.forwardRef<HTMLSpanElement, TruncateTextMiddleProps>(\n  function TruncateTextMiddle({ text, side, portalContainer, className }, forwardedRef) {\n    const [node, setNode] = React.useState<HTMLSpanElement | null>(null);\n    const [display, setDisplay] = React.useState(text);\n    // Distinct from `display !== text`: that's also true before the first\n    // measurement (the initial state is the untruncated `text`), and this needs\n    // to tell \"genuinely fits, confirmed by measuring\" apart from \"haven't\n    // measured yet\" — see the class-name comment below for why they can't share\n    // one flag.\n    const [measured, setMeasured] = React.useState(false);\n\n    const setRefs = React.useCallback(\n      (element: HTMLSpanElement | null) => {\n        setNode(element);\n        if (typeof forwardedRef === 'function') forwardedRef(element);\n        else if (forwardedRef) forwardedRef.current = element;\n      },\n      [forwardedRef]\n    );\n\n    // Depends on `node`, not just `text` — the trigger/no-trigger branch below\n    // swaps this span between being `<Tooltip>`'s child and being the whole\n    // return value, which are different positions in the tree, so React remounts\n    // it (a new DOM node) rather than reusing the old one. A `[text]`-only effect\n    // would keep observing the now-detached old node and never see the\n    // replacement, silently going stale the moment truncation state flips.\n    React.useLayoutEffect(() => {\n      setMeasured(false);\n      if (node === null || typeof ResizeObserver === 'undefined') {\n        setDisplay(text);\n        return;\n      }\n\n      const recompute = () => {\n        const width = node.clientWidth;\n        // 0 during the node's first layout tick (or while a hidden ancestor is\n        // still collapsed) — skip rather than truncate against a width that\n        // isn't real yet; the observer fires again once it settles.\n        if (width === 0) return;\n        const font = getComputedStyle(node).font;\n        setDisplay(\n          middleTruncate(text, width, {\n            measure: (candidate) => measureTextWidth(candidate, font),\n          })\n        );\n        setMeasured(true);\n      };\n\n      recompute();\n      const observer = new ResizeObserver(recompute);\n      observer.observe(node);\n      return () => observer.disconnect();\n    }, [node, text]);\n\n    const span = (\n      <span\n        ref={setRefs}\n        className={cn(\n          // `flex-1` (`flex: 1 1 0%`) only takes effect when the parent this\n          // renders into happens to itself be a flex container — inert\n          // otherwise, so it's safe alongside `block`. It's not decorative:\n          // without it, a `display: block` element with no explicit width\n          // only *auto-fills a plain block parent* — the browser's default\n          // \"fill available width\" rule for `width: auto` is specific to\n          // block layout. Nested inside a flex parent (a caller's own cell\n          // wrapping this next to an icon button, say), the same element\n          // becomes a flex item instead, where `flex-basis: auto` means\n          // \"size to your own content\" — and this component's own content\n          // is whatever it truncated itself to *last* time. Once shrunk, it\n          // would then measure its own shrunken self forever, growing back\n          // only if some ancestor's width changed enough to force a reflow\n          // for an unrelated reason — not when the column actually had more\n          // room to give it all along.\n          'block min-w-0 flex-1',\n          // Nowrap + clip only once `measured` — *before* that, this is the\n          // string's first-ever render, and if it already clips and refuses to\n          // wrap, it dictates its own column's width to `table-layout: auto`\n          // before `ResizeObserver` ever gets a turn: nowrap makes an unbroken\n          // string's min-content the string's *entire* rendered width, so the\n          // browser hands the column exactly that much room — measuring\n          // `clientWidth` after the fact just reads back the width this same\n          // element inflated the column to, not the width some other column\n          // needed and this one gave up.\n          //\n          // Left at the browser's own default on the unmeasured pass rather than\n          // forced to `overflow-wrap: anywhere` — tried that first, and it\n          // overcorrects: telling `auto`-layout this column's min-content is a\n          // single character makes it treat the column as free to take almost\n          // nothing, starving it in favor of siblings with a normal (space- and\n          // punctuation-driven) min-content. The browser's own line-breaking\n          // already finds break opportunities in a URL — after `/`, around `?`,\n          // `=`, `_` — without being told everything is breakable, which is\n          // exactly the multi-line wrap this component exists to replace: worse\n          // than what `nowrap` would give it, but a real, usable column width to\n          // hand to the first `ResizeObserver` measurement, not a starved one.\n          measured && 'overflow-hidden whitespace-nowrap',\n          className\n        )}\n      >\n        {display}\n      </span>\n    );\n\n    if (display === text) return span;\n\n    return (\n      <Tooltip>\n        <TooltipTrigger render={span} />\n        <TooltipContent side={side} portalContainer={portalContainer}>\n          {text}\n        </TooltipContent>\n      </Tooltip>\n    );\n  }\n);\n"],"names":["TruncateText","React","children","mode","className","side","lines","defaultOpen","portalContainer","forwardedRef","jsx","TruncateTextMiddle","TruncateTextEnd","text","innerRef","truncated","setTruncated","setRef","node","check","observer","multiline","style","span","cn","jsxs","Tooltip","TooltipTrigger","TooltipContent","setNode","display","setDisplay","measured","setMeasured","setRefs","element","recompute","width","font","middleTruncate","candidate","measureTextWidth"],"mappings":";;;;;;AAmDO,MAAMA,IAAeC,EAAM;AAAA,EAChC,SACE,EAAE,UAAAC,GAAU,MAAAC,IAAO,OAAO,WAAAC,GAAW,MAAAC,IAAO,OAAO,OAAAC,IAAQ,GAAG,aAAAC,GAAa,iBAAAC,EAAA,GAC3EC,GACA;AACA,WAAIN,MAAS,WAET,gBAAAO;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKF;AAAA,QACL,MAAMP;AAAA,QACN,MAAAG;AAAA,QACA,iBAAAG;AAAA,QACA,WAAAJ;AAAA,MAAA;AAAA,IAAA,IAMJ,gBAAAM;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,KAAKH;AAAA,QACL,MAAMP;AAAA,QACN,MAAAG;AAAA,QACA,OAAAC;AAAA,QACA,aAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,WAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF,GAYMQ,IAAkBX,EAAM;AAAA,EAC5B,SACE,EAAE,MAAAY,GAAM,MAAAR,GAAM,OAAAC,GAAO,aAAAC,GAAa,iBAAAC,GAAiB,WAAAJ,EAAA,GACnDK,GACA;AACA,UAAMK,IAAWb,EAAM,OAA+B,IAAI,GACpD,CAACc,GAAWC,CAAY,IAAIf,EAAM,SAAS,EAAK,GAIhDgB,IAAShB,EAAM;AAAA,MACnB,CAACiB,MAAiC;AAChC,QAAAJ,EAAS,UAAUI,GACf,OAAOT,KAAiB,aAAYA,EAAaS,CAAI,IAChDT,QAA2B,UAAUS;AAAA,MAChD;AAAA,MACA,CAACT,CAAY;AAAA,IAAA;AAGf,IAAAR,EAAM,gBAAgB,MAAM;AAC1B,YAAMiB,IAAOJ,EAAS;AACtB,UAAI,CAACI,EAAM;AAIX,YAAMC,IAAQ,MACZH;AAAA,QACEV,IAAQ,IACJY,EAAK,eAAeA,EAAK,eAAe,IACxCA,EAAK,cAAcA,EAAK,cAAc;AAAA,MAAA;AAE9C,MAAAC,EAAA;AACA,YAAMC,IAAW,IAAI,eAAeD,CAAK;AACzC,aAAAC,EAAS,QAAQF,CAAI,GACd,MAAME,EAAS,WAAA;AAAA,IAGxB,GAAG,CAACP,GAAMP,GAAOS,CAAS,CAAC;AAE3B,UAAMM,IAAYf,IAAQ,GACpBgB,IAAyCD,IAC3C;AAAA,MACE,SAAS;AAAA,MACT,iBAAiBf;AAAA,MACjB,iBAAiB;AAAA,MACjB,UAAU;AAAA,IAAA,IAEZ,QAEEiB,IACJ,gBAAAb;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKO;AAAA,QACL,WAAWO,EAAG,SAASH,IAAY,oBAAoB,YAAYjB,CAAS;AAAA,QAC5E,OAAAkB;AAAA,QAEC,UAAAT;AAAA,MAAA;AAAA,IAAA;AAIL,WAAKE,IAGH,gBAAAU,EAACC,KAAQ,aAAAnB,GACP,UAAA;AAAA,MAAA,gBAAAG,EAACiB,GAAA,EAAe,QAAQJ,EAAA,CAAM;AAAA,MAC9B,gBAAAb,EAACkB,GAAA,EAAe,MAAAvB,GAAY,iBAAAG,GACzB,UAAAK,EAAA,CACH;AAAA,IAAA,GACF,IARqBU;AAAA,EAUzB;AACF,GAgBMZ,IAAqBV,EAAM;AAAA,EAC/B,SAA4B,EAAE,MAAAY,GAAM,MAAAR,GAAM,iBAAAG,GAAiB,WAAAJ,EAAA,GAAaK,GAAc;AACpF,UAAM,CAACS,GAAMW,CAAO,IAAI5B,EAAM,SAAiC,IAAI,GAC7D,CAAC6B,GAASC,CAAU,IAAI9B,EAAM,SAASY,CAAI,GAM3C,CAACmB,GAAUC,CAAW,IAAIhC,EAAM,SAAS,EAAK,GAE9CiC,IAAUjC,EAAM;AAAA,MACpB,CAACkC,MAAoC;AACnC,QAAAN,EAAQM,CAAO,GACX,OAAO1B,KAAiB,aAAYA,EAAa0B,CAAO,IACnD1B,QAA2B,UAAU0B;AAAA,MAChD;AAAA,MACA,CAAC1B,CAAY;AAAA,IAAA;AASf,IAAAR,EAAM,gBAAgB,MAAM;AAE1B,UADAgC,EAAY,EAAK,GACbf,MAAS,QAAQ,OAAO,iBAAmB,KAAa;AAC1D,QAAAa,EAAWlB,CAAI;AACf;AAAA,MACF;AAEA,YAAMuB,IAAY,MAAM;AACtB,cAAMC,IAAQnB,EAAK;AAInB,YAAImB,MAAU,EAAG;AACjB,cAAMC,IAAO,iBAAiBpB,CAAI,EAAE;AACpC,QAAAa;AAAA,UACEQ,EAAe1B,GAAMwB,GAAO;AAAA,YAC1B,SAAS,CAACG,MAAcC,EAAiBD,GAAWF,CAAI;AAAA,UAAA,CACzD;AAAA,QAAA,GAEHL,EAAY,EAAI;AAAA,MAClB;AAEA,MAAAG,EAAA;AACA,YAAMhB,IAAW,IAAI,eAAegB,CAAS;AAC7C,aAAAhB,EAAS,QAAQF,CAAI,GACd,MAAME,EAAS,WAAA;AAAA,IACxB,GAAG,CAACF,GAAML,CAAI,CAAC;AAEf,UAAMU,IACJ,gBAAAb;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKwB;AAAA,QACL,WAAWV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAgBT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAsBAQ,KAAY;AAAA,UACZ5B;AAAA,QAAA;AAAA,QAGD,UAAA0B;AAAA,MAAA;AAAA,IAAA;AAIL,WAAIA,MAAYjB,IAAaU,sBAG1BG,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAhB,EAACiB,GAAA,EAAe,QAAQJ,EAAA,CAAM;AAAA,MAC9B,gBAAAb,EAACkB,GAAA,EAAe,MAAAvB,GAAY,iBAAAG,GACzB,UAAAK,EAAA,CACH;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"truncate-text.js","names":[],"sources":["../../../../src/components/ui/truncate-text/truncate-text.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\nimport { middleTruncate } from './middle-truncate';\nimport { measureTextWidth } from './text-width';\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipContent>;\n\nexport interface TruncateTextProps {\n  /** The text to display. Also used verbatim as the tooltip body when truncated. */\n  children: string;\n  /**\n   * Where the ellipsis goes. `'end'` (default) is the familiar CSS\n   * `text-overflow: ellipsis` — reach for `'middle'` when the distinguishing\n   * part of the value is at the tail (a URL, a hash) rather than the start.\n   */\n  mode?: 'middle' | 'end';\n  /** Which side the tooltip opens on. Defaults to `top`. */\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  /**\n   * Max lines before truncating, in `'end'` mode only: `1` (default) =\n   * single-line ellipsis; `>1` = a multi-line clamp. Ignored in `'middle'`\n   * mode, which is inherently single-line.\n   */\n  lines?: number;\n  /**\n   * Force the tooltip open on mount (only has effect when the text is truncated).\n   * Mainly for stories / visual review; normal usage reveals it on hover/focus.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Container the tooltip popup portals into. Pass a shadow root (e.g. a\n   * micro-frontend mount point) so the popup inherits the kit's styles; defaults\n   * to the document body.\n   */\n  portalContainer?: TooltipContentProps['portalContainer'];\n  /** Merged onto the rendered `<span>`. */\n  className?: string;\n}\n\n/**\n * Text that truncates with an ellipsis and reveals its full value in a tooltip\n * **only when it's actually clipped** — the tooltip is skipped when everything\n * fits, so short cells don't get a pointless hover target. Ideal for table cells.\n *\n * `'end'`-mode truncation is detected by comparing scroll vs client size and\n * re-checked on resize; `'middle'`-mode measures a real font metric via canvas\n * (there is no native CSS middle-ellipsis) and re-measures the same way.\n */\nexport const TruncateText = React.forwardRef<HTMLSpanElement, TruncateTextProps>(\n  function TruncateText(\n    { children, mode = 'end', className, side = 'top', lines = 1, defaultOpen, portalContainer },\n    forwardedRef\n  ) {\n    if (mode === 'middle') {\n      return (\n        <TruncateTextMiddle\n          ref={forwardedRef}\n          text={children}\n          side={side}\n          portalContainer={portalContainer}\n          className={className}\n        />\n      );\n    }\n\n    return (\n      <TruncateTextEnd\n        ref={forwardedRef}\n        text={children}\n        side={side}\n        lines={lines}\n        defaultOpen={defaultOpen}\n        portalContainer={portalContainer}\n        className={className}\n      />\n    );\n  }\n);\n\ninterface TruncateTextEndProps {\n  text: string;\n  side: 'top' | 'bottom' | 'left' | 'right';\n  lines: number;\n  defaultOpen: boolean | undefined;\n  portalContainer: TooltipContentProps['portalContainer'];\n  className: string | undefined;\n}\n\n/** The CSS end-ellipsis / multi-line-clamp half of `TruncateText`. */\nconst TruncateTextEnd = React.forwardRef<HTMLSpanElement, TruncateTextEndProps>(\n  function TruncateTextEnd(\n    { text, side, lines, defaultOpen, portalContainer, className },\n    forwardedRef\n  ) {\n    const innerRef = React.useRef<HTMLSpanElement | null>(null);\n    const [truncated, setTruncated] = React.useState(false);\n\n    // The component owns a ref for overflow measurement; still forward it so\n    // callers can reach the underlying span.\n    const setRef = React.useCallback(\n      (node: HTMLSpanElement | null) => {\n        innerRef.current = node;\n        if (typeof forwardedRef === 'function') forwardedRef(node);\n        else if (forwardedRef) forwardedRef.current = node;\n      },\n      [forwardedRef]\n    );\n\n    React.useLayoutEffect(() => {\n      const node = innerRef.current;\n      if (!node) return;\n      // +1 guards against sub-pixel rounding falsely reporting overflow.\n      // Genuine DOM-measuring layout effect: overflow can only be read after\n      // layout, so the sync setState here is required, not incidental.\n      const check = () =>\n        setTruncated(\n          lines > 1\n            ? node.scrollHeight > node.clientHeight + 1\n            : node.scrollWidth > node.clientWidth + 1\n        );\n      check();\n      const observer = new ResizeObserver(check);\n      observer.observe(node);\n      return () => observer.disconnect();\n      // `truncated` is a dep so the observer re-attaches to the span after it moves\n      // into / out of the tooltip trigger on the truncation flip.\n    }, [text, lines, truncated]);\n\n    const multiline = lines > 1;\n    const style: React.CSSProperties | undefined = multiline\n      ? {\n          display: '-webkit-box',\n          WebkitLineClamp: lines,\n          WebkitBoxOrient: 'vertical',\n          overflow: 'hidden',\n        }\n      : undefined;\n\n    const span = (\n      <span\n        ref={setRef}\n        className={cn('block', multiline ? 'overflow-hidden' : 'truncate', className)}\n        style={style}\n      >\n        {text}\n      </span>\n    );\n\n    if (!truncated) return span;\n\n    return (\n      <Tooltip defaultOpen={defaultOpen}>\n        <TooltipTrigger render={span} />\n        <TooltipContent side={side} portalContainer={portalContainer}>\n          {text}\n        </TooltipContent>\n      </Tooltip>\n    );\n  }\n);\n\ninterface TruncateTextMiddleProps {\n  text: string;\n  side: 'top' | 'bottom' | 'left' | 'right';\n  portalContainer: TooltipContentProps['portalContainer'];\n  className: string | undefined;\n}\n\n/**\n * The middle-ellipsis half of `TruncateText`. Sizes to the container, not the\n * other way around — it needs no `size`/`maxSize` on a column or wrapper to\n * have something to truncate against: it measures whatever width it is\n * actually rendered at, however that width was arrived at, and re-measures\n * via `ResizeObserver` if it changes.\n */\nconst TruncateTextMiddle = React.forwardRef<HTMLSpanElement, TruncateTextMiddleProps>(\n  function TruncateTextMiddle({ text, side, portalContainer, className }, forwardedRef) {\n    const [node, setNode] = React.useState<HTMLSpanElement | null>(null);\n    const [display, setDisplay] = React.useState(text);\n    // Distinct from `display !== text`: that's also true before the first\n    // measurement (the initial state is the untruncated `text`), and this needs\n    // to tell \"genuinely fits, confirmed by measuring\" apart from \"haven't\n    // measured yet\" — see the class-name comment below for why they can't share\n    // one flag.\n    const [measured, setMeasured] = React.useState(false);\n\n    const setRefs = React.useCallback(\n      (element: HTMLSpanElement | null) => {\n        setNode(element);\n        if (typeof forwardedRef === 'function') forwardedRef(element);\n        else if (forwardedRef) forwardedRef.current = element;\n      },\n      [forwardedRef]\n    );\n\n    // Depends on `node`, not just `text` — the trigger/no-trigger branch below\n    // swaps this span between being `<Tooltip>`'s child and being the whole\n    // return value, which are different positions in the tree, so React remounts\n    // it (a new DOM node) rather than reusing the old one. A `[text]`-only effect\n    // would keep observing the now-detached old node and never see the\n    // replacement, silently going stale the moment truncation state flips.\n    React.useLayoutEffect(() => {\n      setMeasured(false);\n      if (node === null || typeof ResizeObserver === 'undefined') {\n        setDisplay(text);\n        return;\n      }\n\n      const recompute = () => {\n        const width = node.clientWidth;\n        // 0 during the node's first layout tick (or while a hidden ancestor is\n        // still collapsed) — skip rather than truncate against a width that\n        // isn't real yet; the observer fires again once it settles.\n        if (width === 0) return;\n        const font = getComputedStyle(node).font;\n        setDisplay(\n          middleTruncate(text, width, {\n            measure: (candidate) => measureTextWidth(candidate, font),\n          })\n        );\n        setMeasured(true);\n      };\n\n      recompute();\n      const observer = new ResizeObserver(recompute);\n      observer.observe(node);\n      return () => observer.disconnect();\n    }, [node, text]);\n\n    const span = (\n      <span\n        ref={setRefs}\n        className={cn(\n          // `flex-1` (`flex: 1 1 0%`) only takes effect when the parent this\n          // renders into happens to itself be a flex container — inert\n          // otherwise, so it's safe alongside `block`. It's not decorative:\n          // without it, a `display: block` element with no explicit width\n          // only *auto-fills a plain block parent* — the browser's default\n          // \"fill available width\" rule for `width: auto` is specific to\n          // block layout. Nested inside a flex parent (a caller's own cell\n          // wrapping this next to an icon button, say), the same element\n          // becomes a flex item instead, where `flex-basis: auto` means\n          // \"size to your own content\" — and this component's own content\n          // is whatever it truncated itself to *last* time. Once shrunk, it\n          // would then measure its own shrunken self forever, growing back\n          // only if some ancestor's width changed enough to force a reflow\n          // for an unrelated reason — not when the column actually had more\n          // room to give it all along.\n          'block min-w-0 flex-1',\n          // Nowrap + clip only once `measured` — *before* that, this is the\n          // string's first-ever render, and if it already clips and refuses to\n          // wrap, it dictates its own column's width to `table-layout: auto`\n          // before `ResizeObserver` ever gets a turn: nowrap makes an unbroken\n          // string's min-content the string's *entire* rendered width, so the\n          // browser hands the column exactly that much room — measuring\n          // `clientWidth` after the fact just reads back the width this same\n          // element inflated the column to, not the width some other column\n          // needed and this one gave up.\n          //\n          // Left at the browser's own default on the unmeasured pass rather than\n          // forced to `overflow-wrap: anywhere` — tried that first, and it\n          // overcorrects: telling `auto`-layout this column's min-content is a\n          // single character makes it treat the column as free to take almost\n          // nothing, starving it in favor of siblings with a normal (space- and\n          // punctuation-driven) min-content. The browser's own line-breaking\n          // already finds break opportunities in a URL — after `/`, around `?`,\n          // `=`, `_` — without being told everything is breakable, which is\n          // exactly the multi-line wrap this component exists to replace: worse\n          // than what `nowrap` would give it, but a real, usable column width to\n          // hand to the first `ResizeObserver` measurement, not a starved one.\n          measured && 'overflow-hidden whitespace-nowrap',\n          className\n        )}\n      >\n        {display}\n      </span>\n    );\n\n    if (display === text) return span;\n\n    return (\n      <Tooltip>\n        <TooltipTrigger render={span} />\n        <TooltipContent side={side} portalContainer={portalContainer}>\n          {text}\n        </TooltipContent>\n      </Tooltip>\n    );\n  }\n);\n"],"mappings":"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"}