@mastra/playground-ui 41.1.0-alpha.2 → 42.0.0-alpha.4

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @mastra/playground-ui
 
+## 42.0.0-alpha.4
+
+### Patch Changes
+
+- Updated dependencies [[`4cfdd64`](https://github.com/mastra-ai/mastra/commit/4cfdd645794feaea0c4ea711e70ecdfbef0c5b8e)]:
+  - @mastra/core@1.52.0-alpha.4
+  - @mastra/client-js@1.33.0-alpha.4
+  - @mastra/react@1.2.6-alpha.4
+
+## 42.0.0-alpha.3
+
+### Minor Changes
+
+- Added ClampedText, a design-system component that clamps text to a number of lines and shows a "Read more" toggle only when the clamp actually cuts content. Detection is based on the rendered layout (element measurement, re-checked on resize and after fonts load), not on character count. ([#19565](https://github.com/mastra-ai/mastra/pull/19565))
+
+### Patch Changes
+
+- Fixed the ClampedText read-more button to announce its expanded state to screen readers, and fixed clamp measurement so font-load re-measure and effect cleanup still run in browsers without ResizeObserver. ([#19582](https://github.com/mastra-ai/mastra/pull/19582))
+
+- Updated dependencies [[`1426af2`](https://github.com/mastra-ai/mastra/commit/1426af24975879c000d13ac75673f630fcc970c1), [`4696604`](https://github.com/mastra-ai/mastra/commit/4696604a8db7517459e7075ed4a6924114cdbdfb), [`975295d`](https://github.com/mastra-ai/mastra/commit/975295d418552f0d46a59edfef4c3ee555f9930a), [`85e4fb5`](https://github.com/mastra-ai/mastra/commit/85e4fb50087a81c74df3a762f53b56373db0b912), [`22c7ca8`](https://github.com/mastra-ai/mastra/commit/22c7ca85b893ebc9bf0113309e13d238a896bdaf), [`85e4fb5`](https://github.com/mastra-ai/mastra/commit/85e4fb50087a81c74df3a762f53b56373db0b912), [`ef03c0c`](https://github.com/mastra-ai/mastra/commit/ef03c0cfc62367a458e4cc56462e2148b35681c5), [`4fb4d88`](https://github.com/mastra-ai/mastra/commit/4fb4d881bc107acee13890ad4d78661016c510ed), [`4eba27a`](https://github.com/mastra-ai/mastra/commit/4eba27adcf60f991df0e62f94b3e75b4e67f3b4b), [`c701be3`](https://github.com/mastra-ai/mastra/commit/c701be32d7d9aa94a66da8c6cc38dcac6856f464), [`50e0ec5`](https://github.com/mastra-ai/mastra/commit/50e0ec5a1b2f3dec9eb1333487be733ac499173c)]:
+  - @mastra/core@1.52.0-alpha.3
+  - @mastra/client-js@1.33.0-alpha.3
+  - @mastra/react@1.2.6-alpha.3
+
 ## 41.1.0-alpha.2
 
 ### Patch Changes

package/dist/{Txt-p33XTnu8.js → Txt-Df42XG5p.js}

@@ -18,9 +18,9 @@ const variants = {
 const fonts = {
   mono: "font-mono"
 };
-const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
-  return /* @__PURE__ */ jsx(Root, { className: cn(variants[variant], font && fonts[font], className), ...props });
+const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ref, ...props }) => {
+  return /* @__PURE__ */ jsx(Root, { ref, className: cn(variants[variant], font && fonts[font], className), ...props });
 };
 
 export { Txt as T };
-//# sourceMappingURL=Txt-p33XTnu8.js.map
+//# sourceMappingURL=Txt-Df42XG5p.js.map

package/dist/Txt-Df42XG5p.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Txt-Df42XG5p.js","sources":["../src/ds/components/Txt/Txt.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode, Ref } from 'react';\n\nimport type { FontSizes } from '../../tokens';\nimport { cn } from '@/lib/utils';\n\nexport interface TxtProps extends HTMLAttributes<HTMLDivElement | HTMLLabelElement> {\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'div';\n  ref?: Ref<HTMLElement>;\n  variant?: keyof typeof FontSizes;\n  font?: 'mono';\n  htmlFor?: string;\n  className?: string;\n  title?: string;\n  children?: ReactNode;\n}\n\nconst variants = {\n  // UI text sizes\n  'ui-xs': 'text-ui-xs leading-ui-xs',\n  'ui-sm': 'text-ui-sm leading-ui-sm',\n  'ui-smd': 'text-ui-smd leading-ui-smd',\n  'ui-md': 'text-ui-md leading-ui-md',\n  'ui-lg': 'text-ui-lg leading-ui-lg',\n  // Header sizes\n  'header-xs': 'text-header-xs leading-header-xs',\n  'header-sm': 'text-header-sm leading-header-sm',\n  'header-md': 'text-header-md leading-header-md',\n  'header-lg': 'text-header-lg leading-header-lg',\n  'header-xl': 'text-header-xl leading-header-xl',\n};\n\nconst fonts = {\n  mono: 'font-mono',\n};\n\nexport const Txt = ({ as: Root = 'p', className, variant = 'ui-md', font, ref, ...props }: TxtProps) => {\n  // Cast needed: `Root` is polymorphic, so TS narrows the expected ref to a single element type.\n  return <Root ref={ref as never} className={cn(variants[variant], font && fonts[font], className)} {...props} />;\n};\n"],"names":[],"mappings":";;;AAgBA,MAAM,QAAA,GAAW;AAAA;AAAA,EAEf,OAAA,EAAS,0BAAA;AAAA,EACT,OAAA,EAAS,0BAAA;AAAA,EACT,QAAA,EAAU,4BAAA;AAAA,EACV,OAAA,EAAS,0BAAA;AAAA,EACT,OAAA,EAAS,0BAAA;AAAA;AAAA,EAET,WAAA,EAAa,kCAAA;AAAA,EACb,WAAA,EAAa,kCAAA;AAAA,EACb,WAAA,EAAa,kCAAA;AAAA,EACb,WAAA,EAAa,kCAAA;AAAA,EACb,WAAA,EAAa;AACf,CAAA;AAEA,MAAM,KAAA,GAAQ;AAAA,EACZ,IAAA,EAAM;AACR,CAAA;AAEO,MAAM,GAAA,GAAM,CAAC,EAAE,EAAA,EAAI,IAAA,GAAO,GAAA,EAAK,SAAA,EAAW,OAAA,GAAU,OAAA,EAAS,IAAA,EAAM,GAAA,EAAK,GAAG,OAAM,KAAgB;AAEtG,EAAA,uBAAO,GAAA,CAAC,IAAA,EAAA,EAAK,GAAA,EAAmB,SAAA,EAAW,GAAG,QAAA,CAAS,OAAO,CAAA,EAAG,IAAA,IAAQ,MAAM,IAAI,CAAA,EAAG,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC/G;;;;"}

package/dist/{Txt-BT8_EkuZ.cjs → Txt-I5lK8zy7.cjs}

@@ -20,9 +20,9 @@ const variants = {
 const fonts = {
   mono: "font-mono"
 };
-const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Root, { className: utils_cn.cn(variants[variant], font && fonts[font], className), ...props });
+const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ref, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Root, { ref, className: utils_cn.cn(variants[variant], font && fonts[font], className), ...props });
 };
 
 exports.Txt = Txt;
-//# sourceMappingURL=Txt-BT8_EkuZ.cjs.map
+//# sourceMappingURL=Txt-I5lK8zy7.cjs.map

package/dist/Txt-I5lK8zy7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Txt-I5lK8zy7.cjs","sources":["../src/ds/components/Txt/Txt.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode, Ref } from 'react';\n\nimport type { FontSizes } from '../../tokens';\nimport { cn } from '@/lib/utils';\n\nexport interface TxtProps extends HTMLAttributes<HTMLDivElement | HTMLLabelElement> {\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'div';\n  ref?: Ref<HTMLElement>;\n  variant?: keyof typeof FontSizes;\n  font?: 'mono';\n  htmlFor?: string;\n  className?: string;\n  title?: string;\n  children?: ReactNode;\n}\n\nconst variants = {\n  // UI text sizes\n  'ui-xs': 'text-ui-xs leading-ui-xs',\n  'ui-sm': 'text-ui-sm leading-ui-sm',\n  'ui-smd': 'text-ui-smd leading-ui-smd',\n  'ui-md': 'text-ui-md leading-ui-md',\n  'ui-lg': 'text-ui-lg leading-ui-lg',\n  // Header sizes\n  'header-xs': 'text-header-xs leading-header-xs',\n  'header-sm': 'text-header-sm leading-header-sm',\n  'header-md': 'text-header-md leading-header-md',\n  'header-lg': 'text-header-lg leading-header-lg',\n  'header-xl': 'text-header-xl leading-header-xl',\n};\n\nconst fonts = {\n  mono: 'font-mono',\n};\n\nexport const Txt = ({ as: Root = 'p', className, variant = 'ui-md', font, ref, ...props }: TxtProps) => {\n  // Cast needed: `Root` is polymorphic, so TS narrows the expected ref to a single element type.\n  return <Root ref={ref as never} className={cn(variants[variant], font && fonts[font], className)} {...props} />;\n};\n"],"names":["jsx","cn"],"mappings":";;;;;AAgBA,MAAM,QAAA,GAAW;AAAA;AAAA,EAEf,OAAA,EAAS,0BAAA;AAAA,EACT,OAAA,EAAS,0BAAA;AAAA,EACT,QAAA,EAAU,4BAAA;AAAA,EACV,OAAA,EAAS,0BAAA;AAAA,EACT,OAAA,EAAS,0BAAA;AAAA;AAAA,EAET,WAAA,EAAa,kCAAA;AAAA,EACb,WAAA,EAAa,kCAAA;AAAA,EACb,WAAA,EAAa,kCAAA;AAAA,EACb,WAAA,EAAa,kCAAA;AAAA,EACb,WAAA,EAAa;AACf,CAAA;AAEA,MAAM,KAAA,GAAQ;AAAA,EACZ,IAAA,EAAM;AACR,CAAA;AAEO,MAAM,GAAA,GAAM,CAAC,EAAE,EAAA,EAAI,IAAA,GAAO,GAAA,EAAK,SAAA,EAAW,OAAA,GAAU,OAAA,EAAS,IAAA,EAAM,GAAA,EAAK,GAAG,OAAM,KAAgB;AAEtG,EAAA,uBAAOA,cAAA,CAAC,IAAA,EAAA,EAAK,GAAA,EAAmB,SAAA,EAAWC,YAAG,QAAA,CAAS,OAAO,CAAA,EAAG,IAAA,IAAQ,MAAM,IAAI,CAAA,EAAG,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC/G;;;;"}

package/dist/components/Avatar.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const Txt = require('../Txt-BT8_EkuZ.cjs');
+const Txt = require('../Txt-I5lK8zy7.cjs');
 const primitives_transitions = require('../primitives/transitions.cjs.js');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 

package/dist/components/Avatar.es.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { T as Txt } from '../Txt-p33XTnu8.js';
+import { T as Txt } from '../Txt-Df42XG5p.js';
 import { transitions } from '../primitives/transitions.es.js';
 import { c as cn } from '../cn-BakJzhuv.js';
 

package/dist/components/ClampedText.cjs.js

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const Button = require('../Button-B5RnKrGb.cjs');
+const Txt = require('../Txt-I5lK8zy7.cjs');
+const icons_ChevronIcon = require('../icons/ChevronIcon.cjs.js');
+const hooks_useIsClamped = require('../hooks/use-is-clamped.cjs.js');
+const utils_cn = require('../cn-vA5sWo9W.cjs');
+
+const clampClasses = {
+  1: "line-clamp-1",
+  2: "line-clamp-2",
+  3: "line-clamp-3",
+  4: "line-clamp-4",
+  5: "line-clamp-5",
+  6: "line-clamp-6"
+};
+function ClampedText({
+  children,
+  lines = 2,
+  readMoreLabel = "Read more",
+  showLessLabel = "Show less",
+  className,
+  ...txtProps
+}) {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const { ref, isClamped } = hooks_useIsClamped.useIsClamped({ enabled: !isExpanded });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { ...txtProps, className: utils_cn.cn(!isExpanded && clampClasses[lines], className), ref, children }),
+    (isClamped || isExpanded) && /* @__PURE__ */ jsxRuntime.jsxs(
+      Button.Button,
+      {
+        variant: "ghost",
+        size: "xs",
+        className: "mt-1 -ml-[.8em] self-start justify-self-start",
+        "aria-expanded": isExpanded,
+        onClick: () => setIsExpanded((v) => !v),
+        children: [
+          isExpanded ? showLessLabel : readMoreLabel,
+          /* @__PURE__ */ jsxRuntime.jsx(icons_ChevronIcon.ChevronIcon, { className: utils_cn.cn("transition-transform", isExpanded && "rotate-180") })
+        ]
+      }
+    )
+  ] });
+}
+
+exports.ClampedText = ClampedText;
+//# sourceMappingURL=ClampedText.cjs.js.map

package/dist/components/ClampedText.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClampedText.cjs.js","sources":["../../src/ds/components/ClampedText/clamped-text.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport type { TxtProps } from '@/ds/components/Txt';\nimport { Txt } from '@/ds/components/Txt';\nimport { ChevronIcon } from '@/ds/icons/ChevronIcon';\nimport { useIsClamped } from '@/hooks/use-is-clamped';\nimport { cn } from '@/lib/utils';\n\n// Tailwind needs static class names — map instead of interpolating.\nconst clampClasses = {\n  1: 'line-clamp-1',\n  2: 'line-clamp-2',\n  3: 'line-clamp-3',\n  4: 'line-clamp-4',\n  5: 'line-clamp-5',\n  6: 'line-clamp-6',\n} as const;\n\nexport type ClampedTextLines = keyof typeof clampClasses;\n\nexport interface ClampedTextProps extends Omit<TxtProps, 'children' | 'ref'> {\n  children: string;\n  /** Number of lines to clamp to (default: 2) */\n  lines?: ClampedTextLines;\n  readMoreLabel?: string;\n  showLessLabel?: string;\n}\n\n/** Text clamped to a number of lines, with a \"read more\" toggle shown only when the clamp actually cuts content. */\nexport function ClampedText({\n  children,\n  lines = 2,\n  readMoreLabel = 'Read more',\n  showLessLabel = 'Show less',\n  className,\n  ...txtProps\n}: ClampedTextProps) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const { ref, isClamped } = useIsClamped({ enabled: !isExpanded });\n\n  return (\n    <>\n      <Txt {...txtProps} className={cn(!isExpanded && clampClasses[lines], className)} ref={ref}>\n        {children}\n      </Txt>\n      {(isClamped || isExpanded) && (\n        <Button\n          variant=\"ghost\"\n          size=\"xs\"\n          className=\"mt-1 -ml-[.8em] self-start justify-self-start\"\n          aria-expanded={isExpanded}\n          onClick={() => setIsExpanded(v => !v)}\n        >\n          {isExpanded ? showLessLabel : readMoreLabel}\n          <ChevronIcon className={cn('transition-transform', isExpanded && 'rotate-180')} />\n        </Button>\n      )}\n    </>\n  );\n}\n"],"names":["useState","useIsClamped","jsxs","Fragment","jsx","Txt","cn","Button","ChevronIcon"],"mappings":";;;;;;;;;;;;AASA,MAAM,YAAA,GAAe;AAAA,EACnB,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG;AACL,CAAA;AAaO,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,aAAA,GAAgB,WAAA;AAAA,EAChB,aAAA,GAAgB,WAAA;AAAA,EAChB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqB;AACnB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAAS,KAAK,CAAA;AAClD,EAAA,MAAM,EAAE,KAAK,SAAA,EAAU,GAAIC,gCAAa,EAAE,OAAA,EAAS,CAAC,UAAA,EAAY,CAAA;AAEhE,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,OAAA,EAAA,EAAK,GAAG,QAAA,EAAU,SAAA,EAAWC,WAAA,CAAG,CAAC,UAAA,IAAc,YAAA,CAAa,KAAK,CAAA,EAAG,SAAS,CAAA,EAAG,KAC9E,QAAA,EACH,CAAA;AAAA,IAAA,CACE,aAAa,UAAA,qBACbJ,eAAA;AAAA,MAACK,aAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,OAAA;AAAA,QACR,IAAA,EAAK,IAAA;AAAA,QACL,SAAA,EAAU,+CAAA;AAAA,QACV,eAAA,EAAe,UAAA;AAAA,QACf,OAAA,EAAS,MAAM,aAAA,CAAc,CAAA,CAAA,KAAK,CAAC,CAAC,CAAA;AAAA,QAEnC,QAAA,EAAA;AAAA,UAAA,UAAA,GAAa,aAAA,GAAgB,aAAA;AAAA,yCAC7BC,6BAAA,EAAA,EAAY,SAAA,EAAWF,YAAG,sBAAA,EAAwB,UAAA,IAAc,YAAY,CAAA,EAAG;AAAA;AAAA;AAAA;AAClF,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/components/ClampedText.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/ds/components/ClampedText/index'
+export {}

package/dist/components/ClampedText.es.js

@@ -0,0 +1,47 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { B as Button } from '../Button-Dh5CZ6Ir.js';
+import { T as Txt } from '../Txt-Df42XG5p.js';
+import { ChevronIcon } from '../icons/ChevronIcon.es.js';
+import { useIsClamped } from '../hooks/use-is-clamped.es.js';
+import { c as cn } from '../cn-BakJzhuv.js';
+
+const clampClasses = {
+  1: "line-clamp-1",
+  2: "line-clamp-2",
+  3: "line-clamp-3",
+  4: "line-clamp-4",
+  5: "line-clamp-5",
+  6: "line-clamp-6"
+};
+function ClampedText({
+  children,
+  lines = 2,
+  readMoreLabel = "Read more",
+  showLessLabel = "Show less",
+  className,
+  ...txtProps
+}) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const { ref, isClamped } = useIsClamped({ enabled: !isExpanded });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Txt, { ...txtProps, className: cn(!isExpanded && clampClasses[lines], className), ref, children }),
+    (isClamped || isExpanded) && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "xs",
+        className: "mt-1 -ml-[.8em] self-start justify-self-start",
+        "aria-expanded": isExpanded,
+        onClick: () => setIsExpanded((v) => !v),
+        children: [
+          isExpanded ? showLessLabel : readMoreLabel,
+          /* @__PURE__ */ jsx(ChevronIcon, { className: cn("transition-transform", isExpanded && "rotate-180") })
+        ]
+      }
+    )
+  ] });
+}
+
+export { ClampedText };
+//# sourceMappingURL=ClampedText.es.js.map

package/dist/components/ClampedText.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClampedText.es.js","sources":["../../src/ds/components/ClampedText/clamped-text.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport type { TxtProps } from '@/ds/components/Txt';\nimport { Txt } from '@/ds/components/Txt';\nimport { ChevronIcon } from '@/ds/icons/ChevronIcon';\nimport { useIsClamped } from '@/hooks/use-is-clamped';\nimport { cn } from '@/lib/utils';\n\n// Tailwind needs static class names — map instead of interpolating.\nconst clampClasses = {\n  1: 'line-clamp-1',\n  2: 'line-clamp-2',\n  3: 'line-clamp-3',\n  4: 'line-clamp-4',\n  5: 'line-clamp-5',\n  6: 'line-clamp-6',\n} as const;\n\nexport type ClampedTextLines = keyof typeof clampClasses;\n\nexport interface ClampedTextProps extends Omit<TxtProps, 'children' | 'ref'> {\n  children: string;\n  /** Number of lines to clamp to (default: 2) */\n  lines?: ClampedTextLines;\n  readMoreLabel?: string;\n  showLessLabel?: string;\n}\n\n/** Text clamped to a number of lines, with a \"read more\" toggle shown only when the clamp actually cuts content. */\nexport function ClampedText({\n  children,\n  lines = 2,\n  readMoreLabel = 'Read more',\n  showLessLabel = 'Show less',\n  className,\n  ...txtProps\n}: ClampedTextProps) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const { ref, isClamped } = useIsClamped({ enabled: !isExpanded });\n\n  return (\n    <>\n      <Txt {...txtProps} className={cn(!isExpanded && clampClasses[lines], className)} ref={ref}>\n        {children}\n      </Txt>\n      {(isClamped || isExpanded) && (\n        <Button\n          variant=\"ghost\"\n          size=\"xs\"\n          className=\"mt-1 -ml-[.8em] self-start justify-self-start\"\n          aria-expanded={isExpanded}\n          onClick={() => setIsExpanded(v => !v)}\n        >\n          {isExpanded ? showLessLabel : readMoreLabel}\n          <ChevronIcon className={cn('transition-transform', isExpanded && 'rotate-180')} />\n        </Button>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AASA,MAAM,YAAA,GAAe;AAAA,EACnB,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG,cAAA;AAAA,EACH,CAAA,EAAG;AACL,CAAA;AAaO,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,aAAA,GAAgB,WAAA;AAAA,EAChB,aAAA,GAAgB,WAAA;AAAA,EAChB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqB;AACnB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAClD,EAAA,MAAM,EAAE,KAAK,SAAA,EAAU,GAAI,aAAa,EAAE,OAAA,EAAS,CAAC,UAAA,EAAY,CAAA;AAEhE,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,GAAA,EAAA,EAAK,GAAG,QAAA,EAAU,SAAA,EAAW,EAAA,CAAG,CAAC,UAAA,IAAc,YAAA,CAAa,KAAK,CAAA,EAAG,SAAS,CAAA,EAAG,KAC9E,QAAA,EACH,CAAA;AAAA,IAAA,CACE,aAAa,UAAA,qBACb,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,OAAA;AAAA,QACR,IAAA,EAAK,IAAA;AAAA,QACL,SAAA,EAAU,+CAAA;AAAA,QACV,eAAA,EAAe,UAAA;AAAA,QACf,OAAA,EAAS,MAAM,aAAA,CAAc,CAAA,CAAA,KAAK,CAAC,CAAC,CAAA;AAAA,QAEnC,QAAA,EAAA;AAAA,UAAA,UAAA,GAAa,aAAA,GAAgB,aAAA;AAAA,8BAC7B,WAAA,EAAA,EAAY,SAAA,EAAW,GAAG,sBAAA,EAAwB,UAAA,IAAc,YAAY,CAAA,EAAG;AAAA;AAAA;AAAA;AAClF,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/components/Entity.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const Txt = require('../Txt-BT8_EkuZ.cjs');
+const Txt = require('../Txt-I5lK8zy7.cjs');
 const icons_Icon = require('../icons/Icon.cjs.js');
 require('lucide-react');
 const utils_cn = require('../cn-vA5sWo9W.cjs');

package/dist/components/Entity.es.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { T as Txt } from '../Txt-p33XTnu8.js';
+import { T as Txt } from '../Txt-Df42XG5p.js';
 import { Icon } from '../icons/Icon.es.js';
 import 'lucide-react';
 import { c as cn } from '../cn-BakJzhuv.js';

package/dist/components/EntityHeader.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const skeleton = require('../skeleton-C0zXt2_f.cjs');
-const Txt = require('../Txt-BT8_EkuZ.cjs');
+const Txt = require('../Txt-I5lK8zy7.cjs');
 const icons_Icon = require('../icons/Icon.cjs.js');
 require('lucide-react');
 

package/dist/components/EntityHeader.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { S as Skeleton } from '../skeleton-C5-7V8Ni.js';
-import { T as Txt } from '../Txt-p33XTnu8.js';
+import { T as Txt } from '../Txt-Df42XG5p.js';
 import { Icon } from '../icons/Icon.es.js';
 import 'lucide-react';
 

package/dist/components/Entry.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const Txt = require('../Txt-BT8_EkuZ.cjs');
+const Txt = require('../Txt-I5lK8zy7.cjs');
 
 const Entry = ({ label, children }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [

package/dist/components/Entry.es.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { T as Txt } from '../Txt-p33XTnu8.js';
+import { T as Txt } from '../Txt-Df42XG5p.js';
 
 const Entry = ({ label, children }) => {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [

package/dist/components/EnvironmentVariablesEditor.cjs.js

@@ -9,7 +9,7 @@ const React = require('react');
 const Button = require('../Button-B5RnKrGb.cjs');
 const Notice = require('../Notice-WhHdy89l.cjs');
 const envFile = require('../env-file-BU2hStkm.cjs');
-const Txt = require('../Txt-BT8_EkuZ.cjs');
+const Txt = require('../Txt-I5lK8zy7.cjs');
 const dataList = require('../data-list-BwGRWaNd.cjs');
 const hooks_useCopyToClipboard = require('../hooks/use-copy-to-clipboard.cjs.js');
 const fieldBlock = require('../field-block-Dx-fDIP9.cjs');

package/dist/components/EnvironmentVariablesEditor.es.js

@@ -5,7 +5,7 @@ import { createContext, use, useState, useMemo } from 'react';
 import { B as Button } from '../Button-Dh5CZ6Ir.js';
 import { N as Notice } from '../Notice-jmHNt3gS.js';
 import { D as DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE } from '../env-file-BITYowCx.js';
-import { T as Txt } from '../Txt-p33XTnu8.js';
+import { T as Txt } from '../Txt-Df42XG5p.js';
 import { D as DataList } from '../data-list-By3xmGvT.js';
 import { useCopyToClipboard } from '../hooks/use-copy-to-clipboard.es.js';
 import { F as FieldBlock } from '../field-block-CC_EYPWe.js';

package/dist/components/Header.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const Txt = require('../Txt-BT8_EkuZ.cjs');
+const Txt = require('../Txt-I5lK8zy7.cjs');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 
 const Header = ({ children, border = true, className }) => {

package/dist/components/Header.es.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { T as Txt } from '../Txt-p33XTnu8.js';
+import { T as Txt } from '../Txt-Df42XG5p.js';
 import { c as cn } from '../cn-BakJzhuv.js';
 
 const Header = ({ children, border = true, className }) => {

package/dist/components/Table.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 const icons_Icon = require('../icons/Icon.cjs.js');
-const Txt = require('../Txt-BT8_EkuZ.cjs');
+const Txt = require('../Txt-I5lK8zy7.cjs');
 
 const rowSize = {
   default: "[&>tbody>tr]:h-table-row",

package/dist/components/Table.es.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useRef, useEffect, useState, useCallback } from 'react';
 import { c as cn } from '../cn-BakJzhuv.js';
 import { Icon } from '../icons/Icon.es.js';
-import { T as Txt } from '../Txt-p33XTnu8.js';
+import { T as Txt } from '../Txt-Df42XG5p.js';
 
 const rowSize = {
   default: "[&>tbody>tr]:h-table-row",

package/dist/components/ThreadList.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 const Button = require('../Button-B5RnKrGb.cjs');
-const Txt = require('../Txt-BT8_EkuZ.cjs');
+const Txt = require('../Txt-I5lK8zy7.cjs');
 
 const ThreadList = ({ children, "aria-label": ariaLabel = "Threads", embedded = false }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("size-full", !embedded && "pb-2 pl-2"), children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/ThreadList.es.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { X } from 'lucide-react';
 import { c as cn } from '../cn-BakJzhuv.js';
 import { B as Button } from '../Button-Dh5CZ6Ir.js';
-import { T as Txt } from '../Txt-p33XTnu8.js';
+import { T as Txt } from '../Txt-Df42XG5p.js';
 
 const ThreadList = ({ children, "aria-label": ariaLabel = "Threads", embedded = false }) => {
   return /* @__PURE__ */ jsx("div", { className: cn("size-full", !embedded && "pb-2 pl-2"), children: /* @__PURE__ */ jsx(

package/dist/components/Truncate.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const copyButton = require('../copy-button-DNR760m7.cjs');
 const tooltip = require('../tooltip-VGyJcEoE.cjs');
-const Txt = require('../Txt-BT8_EkuZ.cjs');
+const Txt = require('../Txt-I5lK8zy7.cjs');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 
 function Truncate({

package/dist/components/Truncate.es.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { C as CopyButton } from '../copy-button-BuIpvUI7.js';
 import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../tooltip-Ch06EF_U.js';
-import { T as Txt } from '../Txt-p33XTnu8.js';
+import { T as Txt } from '../Txt-Df42XG5p.js';
 import { c as cn } from '../cn-BakJzhuv.js';
 
 function Truncate({

package/dist/components/Txt.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const Txt = require('../Txt-BT8_EkuZ.cjs');
+const Txt = require('../Txt-I5lK8zy7.cjs');
 
 
 

package/dist/components/Txt.es.js

@@ -1,2 +1,2 @@
-export { T as Txt } from '../Txt-p33XTnu8.js';
+export { T as Txt } from '../Txt-Df42XG5p.js';
 //# sourceMappingURL=Txt.es.js.map

package/dist/components/ai/plan.cjs.js

@@ -8,7 +8,7 @@ const React = require('react');
 const Badge = require('../../Badge-BlJpI3fY.cjs');
 const Button = require('../../Button-B5RnKrGb.cjs');
 const markdownRenderer = require('../../markdown-renderer-DRnUrMmF.cjs');
-const Txt = require('../../Txt-BT8_EkuZ.cjs');
+const Txt = require('../../Txt-I5lK8zy7.cjs');
 const icons_Icon = require('../../icons/Icon.cjs.js');
 const hooks_useCopyToClipboard = require('../../hooks/use-copy-to-clipboard.cjs.js');
 const utils_cn = require('../../cn-vA5sWo9W.cjs');

package/dist/components/ai/plan.es.js

@@ -4,7 +4,7 @@ import { useState, createContext, useContext } from 'react';
 import { B as Badge } from '../../Badge-woV6OD8k.js';
 import { B as Button } from '../../Button-Dh5CZ6Ir.js';
 import { M as MarkdownRenderer } from '../../markdown-renderer-ZzJcwfS3.js';
-import { T as Txt } from '../../Txt-p33XTnu8.js';
+import { T as Txt } from '../../Txt-Df42XG5p.js';
 import { Icon } from '../../icons/Icon.es.js';
 import { useCopyToClipboard } from '../../hooks/use-copy-to-clipboard.es.js';
 import { c as cn } from '../../cn-BakJzhuv.js';

package/dist/domains/memory/components/memory-studio-panel.cjs.js

@@ -7,7 +7,7 @@ const lucideReact = require('lucide-react');
 const React = require('react');
 const Button = require('../../../Button-B5RnKrGb.cjs');
 const skeleton = require('../../../skeleton-C0zXt2_f.cjs');
-const Txt = require('../../../Txt-BT8_EkuZ.cjs');
+const Txt = require('../../../Txt-I5lK8zy7.cjs');
 const icons_MemoryIcon = require('../../../icons/MemoryIcon.cjs.js');
 const domains_memory_lib_extractMarkers = require('../lib/extract-markers.cjs.js');
 const domains_memory_lib_replaySelection = require('../lib/replay-selection.cjs.js');

package/dist/domains/memory/components/memory-studio-panel.es.js

@@ -3,7 +3,7 @@ import { ArrowLeftIcon } from 'lucide-react';
 import { useState, useMemo, useEffect } from 'react';
 import { B as Button } from '../../../Button-Dh5CZ6Ir.js';
 import { S as Skeleton } from '../../../skeleton-C5-7V8Ni.js';
-import { T as Txt } from '../../../Txt-p33XTnu8.js';
+import { T as Txt } from '../../../Txt-Df42XG5p.js';
 import { MemoryIcon } from '../../../icons/MemoryIcon.es.js';
 import { extractOmMarkers } from '../lib/extract-markers.es.js';
 import { getObservationTimestampMs, findRecordIdAtOrBefore } from '../lib/replay-selection.es.js';

package/dist/hooks/use-is-clamped.cjs.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+const hooks_useIsomorphicLayoutEffect = require('./use-isomorphic-layout-effect.cjs.js');
+
+function useIsClamped({
+  enabled = true
+} = {}) {
+  const [element, setElement] = React.useState(null);
+  const [isClamped, setIsClamped] = React.useState(false);
+  hooks_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    if (!element || !enabled) return;
+    let stopped = false;
+    const measure = () => {
+      if (!stopped) setIsClamped(element.scrollHeight > element.clientHeight);
+    };
+    measure();
+    let observer;
+    if (typeof ResizeObserver !== "undefined") {
+      observer = new ResizeObserver(measure);
+      observer.observe(element);
+    }
+    document.fonts?.ready.then(measure).catch(() => {
+    });
+    return () => {
+      stopped = true;
+      observer?.disconnect();
+    };
+  }, [element, enabled]);
+  return { ref: setElement, isClamped };
+}
+
+exports.useIsClamped = useIsClamped;
+//# sourceMappingURL=use-is-clamped.cjs.js.map

package/dist/hooks/use-is-clamped.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-is-clamped.cjs.js","sources":["../../src/hooks/use-is-clamped.ts"],"sourcesContent":["import { useState } from 'react';\nimport type { RefCallback } from 'react';\n\nimport { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';\n\nexport interface UseIsClampedOptions {\n  /** Set false while the clamp is lifted (e.g. text expanded) to freeze the last measurement. */\n  enabled?: boolean;\n}\n\nexport interface UseIsClampedResult<TElement extends HTMLElement> {\n  ref: RefCallback<TElement>;\n  isClamped: boolean;\n}\n\n/** Measures whether a clamped element has content cut off (`scrollHeight > clientHeight`), re-measuring on resize and font load. */\nexport function useIsClamped<TElement extends HTMLElement = HTMLElement>({\n  enabled = true,\n}: UseIsClampedOptions = {}): UseIsClampedResult<TElement> {\n  const [element, setElement] = useState<TElement | null>(null);\n  const [isClamped, setIsClamped] = useState(false);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!element || !enabled) return;\n\n    let stopped = false;\n    const measure = () => {\n      if (!stopped) setIsClamped(element.scrollHeight > element.clientHeight);\n    };\n\n    measure();\n\n    let observer: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== 'undefined') {\n      observer = new ResizeObserver(measure);\n      observer.observe(element);\n    }\n    // Font swaps change line wrapping without resizing the observed box.\n    document.fonts?.ready.then(measure).catch(() => {});\n\n    return () => {\n      stopped = true;\n      observer?.disconnect();\n    };\n  }, [element, enabled]);\n\n  return { ref: setElement, isClamped };\n}\n"],"names":["useState","useIsomorphicLayoutEffect"],"mappings":";;;;;;;AAgBO,SAAS,YAAA,CAAyD;AAAA,EACvE,OAAA,GAAU;AACZ,CAAA,GAAyB,EAAC,EAAiC;AACzD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAA0B,IAAI,CAAA;AAC5D,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,KAAK,CAAA;AAEhD,EAAAC,yDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,OAAA,IAAW,CAAC,OAAA,EAAS;AAE1B,IAAA,IAAI,OAAA,GAAU,KAAA;AACd,IAAA,MAAM,UAAU,MAAM;AACpB,MAAA,IAAI,CAAC,OAAA,EAAS,YAAA,CAAa,OAAA,CAAQ,YAAA,GAAe,QAAQ,YAAY,CAAA;AAAA,IACxE,CAAA;AAEA,IAAA,OAAA,EAAQ;AAER,IAAA,IAAI,QAAA;AACJ,IAAA,IAAI,OAAO,mBAAmB,WAAA,EAAa;AACzC,MAAA,QAAA,GAAW,IAAI,eAAe,OAAO,CAAA;AACrC,MAAA,QAAA,CAAS,QAAQ,OAAO,CAAA;AAAA,IAC1B;AAEA,IAAA,QAAA,CAAS,OAAO,KAAA,CAAM,IAAA,CAAK,OAAO,CAAA,CAAE,MAAM,MAAM;AAAA,IAAC,CAAC,CAAA;AAElD,IAAA,OAAO,MAAM;AACX,MAAA,OAAA,GAAU,IAAA;AACV,MAAA,QAAA,EAAU,UAAA,EAAW;AAAA,IACvB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,OAAA,EAAS,OAAO,CAAC,CAAA;AAErB,EAAA,OAAO,EAAE,GAAA,EAAK,UAAA,EAAY,SAAA,EAAU;AACtC;;;;"}

package/dist/hooks/use-is-clamped.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/hooks/use-is-clamped'
+export {}

package/dist/hooks/use-is-clamped.es.js

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.es.js';
+
+function useIsClamped({
+  enabled = true
+} = {}) {
+  const [element, setElement] = useState(null);
+  const [isClamped, setIsClamped] = useState(false);
+  useIsomorphicLayoutEffect(() => {
+    if (!element || !enabled) return;
+    let stopped = false;
+    const measure = () => {
+      if (!stopped) setIsClamped(element.scrollHeight > element.clientHeight);
+    };
+    measure();
+    let observer;
+    if (typeof ResizeObserver !== "undefined") {
+      observer = new ResizeObserver(measure);
+      observer.observe(element);
+    }
+    document.fonts?.ready.then(measure).catch(() => {
+    });
+    return () => {
+      stopped = true;
+      observer?.disconnect();
+    };
+  }, [element, enabled]);
+  return { ref: setElement, isClamped };
+}
+
+export { useIsClamped };
+//# sourceMappingURL=use-is-clamped.es.js.map

package/dist/hooks/use-is-clamped.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-is-clamped.es.js","sources":["../../src/hooks/use-is-clamped.ts"],"sourcesContent":["import { useState } from 'react';\nimport type { RefCallback } from 'react';\n\nimport { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';\n\nexport interface UseIsClampedOptions {\n  /** Set false while the clamp is lifted (e.g. text expanded) to freeze the last measurement. */\n  enabled?: boolean;\n}\n\nexport interface UseIsClampedResult<TElement extends HTMLElement> {\n  ref: RefCallback<TElement>;\n  isClamped: boolean;\n}\n\n/** Measures whether a clamped element has content cut off (`scrollHeight > clientHeight`), re-measuring on resize and font load. */\nexport function useIsClamped<TElement extends HTMLElement = HTMLElement>({\n  enabled = true,\n}: UseIsClampedOptions = {}): UseIsClampedResult<TElement> {\n  const [element, setElement] = useState<TElement | null>(null);\n  const [isClamped, setIsClamped] = useState(false);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!element || !enabled) return;\n\n    let stopped = false;\n    const measure = () => {\n      if (!stopped) setIsClamped(element.scrollHeight > element.clientHeight);\n    };\n\n    measure();\n\n    let observer: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== 'undefined') {\n      observer = new ResizeObserver(measure);\n      observer.observe(element);\n    }\n    // Font swaps change line wrapping without resizing the observed box.\n    document.fonts?.ready.then(measure).catch(() => {});\n\n    return () => {\n      stopped = true;\n      observer?.disconnect();\n    };\n  }, [element, enabled]);\n\n  return { ref: setElement, isClamped };\n}\n"],"names":[],"mappings":";;;AAgBO,SAAS,YAAA,CAAyD;AAAA,EACvE,OAAA,GAAU;AACZ,CAAA,GAAyB,EAAC,EAAiC;AACzD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAA0B,IAAI,CAAA;AAC5D,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAEhD,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,OAAA,IAAW,CAAC,OAAA,EAAS;AAE1B,IAAA,IAAI,OAAA,GAAU,KAAA;AACd,IAAA,MAAM,UAAU,MAAM;AACpB,MAAA,IAAI,CAAC,OAAA,EAAS,YAAA,CAAa,OAAA,CAAQ,YAAA,GAAe,QAAQ,YAAY,CAAA;AAAA,IACxE,CAAA;AAEA,IAAA,OAAA,EAAQ;AAER,IAAA,IAAI,QAAA;AACJ,IAAA,IAAI,OAAO,mBAAmB,WAAA,EAAa;AACzC,MAAA,QAAA,GAAW,IAAI,eAAe,OAAO,CAAA;AACrC,MAAA,QAAA,CAAS,QAAQ,OAAO,CAAA;AAAA,IAC1B;AAEA,IAAA,QAAA,CAAS,OAAO,KAAA,CAAM,IAAA,CAAK,OAAO,CAAA,CAAE,MAAM,MAAM;AAAA,IAAC,CAAC,CAAA;AAElD,IAAA,OAAO,MAAM;AACX,MAAA,OAAA,GAAU,IAAA;AACV,MAAA,QAAA,EAAU,UAAA,EAAW;AAAA,IACvB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,OAAA,EAAS,OAAO,CAAC,CAAA;AAErB,EAAA,OAAO,EAAE,GAAA,EAAK,UAAA,EAAY,SAAA,EAAU;AACtC;;;;"}

package/dist/src/ds/components/ClampedText/clamped-text.d.ts

@@ -0,0 +1,20 @@
+import { TxtProps } from '../Txt';
+declare const clampClasses: {
+    readonly 1: "line-clamp-1";
+    readonly 2: "line-clamp-2";
+    readonly 3: "line-clamp-3";
+    readonly 4: "line-clamp-4";
+    readonly 5: "line-clamp-5";
+    readonly 6: "line-clamp-6";
+};
+export type ClampedTextLines = keyof typeof clampClasses;
+export interface ClampedTextProps extends Omit<TxtProps, 'children' | 'ref'> {
+    children: string;
+    /** Number of lines to clamp to (default: 2) */
+    lines?: ClampedTextLines;
+    readMoreLabel?: string;
+    showLessLabel?: string;
+}
+/** Text clamped to a number of lines, with a "read more" toggle shown only when the clamp actually cuts content. */
+export declare function ClampedText({ children, lines, readMoreLabel, showLessLabel, className, ...txtProps }: ClampedTextProps): import("react").JSX.Element;
+export {};

package/dist/src/ds/components/ClampedText/clamped-text.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ClampedText } from './clamped-text';
+declare const meta: Meta<typeof ClampedText>;
+export default meta;
+type Story = StoryObj<typeof ClampedText>;
+export declare const Default: Story;
+export declare const ShortTextNoToggle: Story;
+export declare const ThreeLines: Story;

package/dist/src/ds/components/ClampedText/index.d.ts

@@ -0,0 +1 @@
+export * from './clamped-text';

package/dist/src/ds/components/Txt/Txt.d.ts

@@ -1,7 +1,8 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, Ref } from 'react';
 import { FontSizes } from '../../tokens';
 export interface TxtProps extends HTMLAttributes<HTMLDivElement | HTMLLabelElement> {
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'div';
+    ref?: Ref<HTMLElement>;
     variant?: keyof typeof FontSizes;
     font?: 'mono';
     htmlFor?: string;
@@ -9,4 +10,4 @@ export interface TxtProps extends HTMLAttributes<HTMLDivElement | HTMLLabelEleme
     title?: string;
     children?: ReactNode;
 }
-export declare const Txt: ({ as: Root, className, variant, font, ...props }: TxtProps) => import("react").JSX.Element;
+export declare const Txt: ({ as: Root, className, variant, font, ref, ...props }: TxtProps) => import("react").JSX.Element;

package/dist/src/hooks/use-is-clamped.d.ts

@@ -0,0 +1,11 @@
+import { RefCallback } from 'react';
+export interface UseIsClampedOptions {
+    /** Set false while the clamp is lifted (e.g. text expanded) to freeze the last measurement. */
+    enabled?: boolean;
+}
+export interface UseIsClampedResult<TElement extends HTMLElement> {
+    ref: RefCallback<TElement>;
+    isClamped: boolean;
+}
+/** Measures whether a clamped element has content cut off (`scrollHeight > clientHeight`), re-measuring on resize and font load. */
+export declare function useIsClamped<TElement extends HTMLElement = HTMLElement>({ enabled, }?: UseIsClampedOptions): UseIsClampedResult<TElement>;

package/dist/style.css

@@ -1162,6 +1162,10 @@
     margin-left: calc(var(--spacing-5) * -1);
   }
 
+  .-ml-\[\.8em\] {
+    margin-left: -.8em;
+  }
+
   .-ml-px {
     margin-left: -1px;
     margin-left: calc(var(--spacing-px) * -1);
@@ -1203,6 +1207,13 @@
     box-sizing: border-box;
   }
 
+  .line-clamp-1 {
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
   .line-clamp-2 {
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
@@ -1217,6 +1228,27 @@
     overflow: hidden;
   }
 
+  .line-clamp-4 {
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  .line-clamp-5 {
+    -webkit-line-clamp: 5;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  .line-clamp-6 {
+    -webkit-line-clamp: 6;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
   .block {
     display: block;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "41.1.0-alpha.2",
+  "version": "42.0.0-alpha.4",
   "description": "Mastra Playground components",
   "sideEffects": [
     "**/*.css"
@@ -150,8 +150,8 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": "^4.0.0",
-    "@mastra/client-js": "^1.32.1-alpha.2",
-    "@mastra/react": "1.2.6-alpha.2"
+    "@mastra/client-js": "^1.33.0-alpha.4",
+    "@mastra/react": "1.2.6-alpha.4"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.4.1",
@@ -190,10 +190,10 @@
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "4.1.10",
     "@internal/lint": "0.0.114",
-    "@mastra/core": "1.52.0-alpha.2",
-    "@mastra/client-js": "^1.32.1-alpha.2",
+    "@mastra/client-js": "^1.33.0-alpha.4",
     "@mastra/memory": "1.23.1-alpha.0",
-    "@mastra/react": "1.2.6-alpha.2"
+    "@mastra/core": "1.52.0-alpha.4",
+    "@mastra/react": "1.2.6-alpha.4"
   },
   "homepage": "https://mastra.ai",
   "repository": {

package/dist/Txt-BT8_EkuZ.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Txt-BT8_EkuZ.cjs","sources":["../src/ds/components/Txt/Txt.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport type { FontSizes } from '../../tokens';\nimport { cn } from '@/lib/utils';\n\nexport interface TxtProps extends HTMLAttributes<HTMLDivElement | HTMLLabelElement> {\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'div';\n  variant?: keyof typeof FontSizes;\n  font?: 'mono';\n  htmlFor?: string;\n  className?: string;\n  title?: string;\n  children?: ReactNode;\n}\n\nconst variants = {\n  // UI text sizes\n  'ui-xs': 'text-ui-xs leading-ui-xs',\n  'ui-sm': 'text-ui-sm leading-ui-sm',\n  'ui-smd': 'text-ui-smd leading-ui-smd',\n  'ui-md': 'text-ui-md leading-ui-md',\n  'ui-lg': 'text-ui-lg leading-ui-lg',\n  // Header sizes\n  'header-xs': 'text-header-xs leading-header-xs',\n  'header-sm': 'text-header-sm leading-header-sm',\n  'header-md': 'text-header-md leading-header-md',\n  'header-lg': 'text-header-lg leading-header-lg',\n  'header-xl': 'text-header-xl leading-header-xl',\n};\n\nconst fonts = {\n  mono: 'font-mono',\n};\n\nexport const Txt = ({ as: Root = 'p', className, variant = 'ui-md', font, ...props }: TxtProps) => {\n  return <Root className={cn(variants[variant], font && fonts[font], className)} {...props} />;\n};\n"],"names":["jsx","cn"],"mappings":";;;;;AAeA,MAAM,QAAA,GAAW;AAAA;AAAA,EAEf,OAAA,EAAS,0BAAA;AAAA,EACT,OAAA,EAAS,0BAAA;AAAA,EACT,QAAA,EAAU,4BAAA;AAAA,EACV,OAAA,EAAS,0BAAA;AAAA,EACT,OAAA,EAAS,0BAAA;AAAA;AAAA,EAET,WAAA,EAAa,kCAAA;AAAA,EACb,WAAA,EAAa,kCAAA;AAAA,EACb,WAAA,EAAa,kCAAA;AAAA,EACb,WAAA,EAAa,kCAAA;AAAA,EACb,WAAA,EAAa;AACf,CAAA;AAEA,MAAM,KAAA,GAAQ;AAAA,EACZ,IAAA,EAAM;AACR,CAAA;AAEO,MAAM,GAAA,GAAM,CAAC,EAAE,EAAA,EAAI,IAAA,GAAO,GAAA,EAAK,SAAA,EAAW,OAAA,GAAU,OAAA,EAAS,IAAA,EAAM,GAAG,KAAA,EAAM,KAAgB;AACjG,EAAA,uBAAOA,cAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAWC,WAAA,CAAG,SAAS,OAAO,CAAA,EAAG,IAAA,IAAQ,KAAA,CAAM,IAAI,CAAA,EAAG,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC5F;;;;"}

package/dist/Txt-p33XTnu8.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Txt-p33XTnu8.js","sources":["../src/ds/components/Txt/Txt.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport type { FontSizes } from '../../tokens';\nimport { cn } from '@/lib/utils';\n\nexport interface TxtProps extends HTMLAttributes<HTMLDivElement | HTMLLabelElement> {\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'div';\n  variant?: keyof typeof FontSizes;\n  font?: 'mono';\n  htmlFor?: string;\n  className?: string;\n  title?: string;\n  children?: ReactNode;\n}\n\nconst variants = {\n  // UI text sizes\n  'ui-xs': 'text-ui-xs leading-ui-xs',\n  'ui-sm': 'text-ui-sm leading-ui-sm',\n  'ui-smd': 'text-ui-smd leading-ui-smd',\n  'ui-md': 'text-ui-md leading-ui-md',\n  'ui-lg': 'text-ui-lg leading-ui-lg',\n  // Header sizes\n  'header-xs': 'text-header-xs leading-header-xs',\n  'header-sm': 'text-header-sm leading-header-sm',\n  'header-md': 'text-header-md leading-header-md',\n  'header-lg': 'text-header-lg leading-header-lg',\n  'header-xl': 'text-header-xl leading-header-xl',\n};\n\nconst fonts = {\n  mono: 'font-mono',\n};\n\nexport const Txt = ({ as: Root = 'p', className, variant = 'ui-md', font, ...props }: TxtProps) => {\n  return <Root className={cn(variants[variant], font && fonts[font], className)} {...props} />;\n};\n"],"names":[],"mappings":";;;AAeA,MAAM,QAAA,GAAW;AAAA;AAAA,EAEf,OAAA,EAAS,0BAAA;AAAA,EACT,OAAA,EAAS,0BAAA;AAAA,EACT,QAAA,EAAU,4BAAA;AAAA,EACV,OAAA,EAAS,0BAAA;AAAA,EACT,OAAA,EAAS,0BAAA;AAAA;AAAA,EAET,WAAA,EAAa,kCAAA;AAAA,EACb,WAAA,EAAa,kCAAA;AAAA,EACb,WAAA,EAAa,kCAAA;AAAA,EACb,WAAA,EAAa,kCAAA;AAAA,EACb,WAAA,EAAa;AACf,CAAA;AAEA,MAAM,KAAA,GAAQ;AAAA,EACZ,IAAA,EAAM;AACR,CAAA;AAEO,MAAM,GAAA,GAAM,CAAC,EAAE,EAAA,EAAI,IAAA,GAAO,GAAA,EAAK,SAAA,EAAW,OAAA,GAAU,OAAA,EAAS,IAAA,EAAM,GAAG,KAAA,EAAM,KAAgB;AACjG,EAAA,uBAAO,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,EAAA,CAAG,SAAS,OAAO,CAAA,EAAG,IAAA,IAAQ,KAAA,CAAM,IAAI,CAAA,EAAG,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC5F;;;;"}