@mastra/playground-ui 66.1.0-alpha.2 → 67.0.0

package/dist/domains/chat/activity/components/activity-fold.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity-fold.cjs.js","names":["liveWords","settledWords","callsOutcome","outcomeText","Activity","wordsName","ActivityTimedTrigger","cn","ActivityHeader","ActivityIcon","ActivityLabel","ActivityDetail","X","Txt","ActivityDisclosure"],"sources":["../../../../../src/domains/chat/activity/components/activity-fold.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport type { ActivityCall } from '../model/activity-members';\nimport { callsOutcome, liveWords, outcomeText, settledWords, wordsName } from '../model/activity-words';\nimport { ActivityTimedTrigger } from './activity-timed-trigger';\nimport {\n  Activity,\n  ActivityDetail,\n  ActivityDisclosure,\n  ActivityHeader,\n  ActivityIcon,\n  ActivityLabel,\n} from '@/ds/components/ai/activity';\nimport type { ActivityStatus } from '@/ds/components/ai/activity';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface ActivityFoldProps {\n  calls: readonly ActivityCall[];\n  live: boolean;\n  elapsedMs?: number;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  foldable: boolean;\n  /** Reads at answer size, ruled off from what it folds. */\n  prominent?: boolean;\n  slot?: string;\n  children: ReactNode;\n}\n\nfunction foldStatus(live: boolean, failed: boolean): ActivityStatus {\n  if (live) return 'running';\n  return failed ? 'error' : 'idle';\n}\n\n/** A line that says what its calls are doing, or did, and folds what it summarises. */\nexport function ActivityFold({\n  calls,\n  live,\n  elapsedMs,\n  open,\n  onOpenChange,\n  foldable,\n  prominent = false,\n  slot,\n  children,\n}: ActivityFoldProps) {\n  const words = live ? liveWords(calls) : settledWords(calls, elapsedMs);\n  const outcome = callsOutcome(calls);\n  const failed = !live && outcome.failed > 0;\n  const outcomeLabel = live ? '' : outcomeText(outcome, calls.length);\n\n  return (\n    <Activity\n      data-slot={slot}\n      appearance=\"inline\"\n      status={foldStatus(live, failed)}\n      open={foldable && open}\n      onOpenChange={onOpenChange}\n      foldable={foldable}\n      aria-label={wordsName(words)}\n    >\n      <ActivityTimedTrigger at={calls[0]?.startedAt} className={cn(prominent && 'mb-2 border-b border-border pb-2')}>\n        <ActivityHeader>\n          <ActivityIcon>\n            <words.icon aria-hidden />\n          </ActivityIcon>\n          <ActivityLabel className={cn(prominent && 'text-body', !words.detail && 'min-w-0 shrink')}>\n            {words.label}\n          </ActivityLabel>\n          {words.detail && <ActivityDetail className={cn(prominent && 'text-body-sm')}>{words.detail}</ActivityDetail>}\n          {words.duration && (\n            <ActivityLabel className={cn(prominent && 'text-body', '-ml-1 tabular-nums')}>\n              · {words.duration}\n            </ActivityLabel>\n          )}\n          {failed && <X size={13} role=\"img\" aria-label=\"Failed\" className=\"shrink-0 text-destructive-foreground\" />}\n          {outcomeLabel && (\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"shrink-0 tabular-nums\">\n              {outcomeLabel}\n            </Txt>\n          )}\n          <ActivityDisclosure />\n        </ActivityHeader>\n      </ActivityTimedTrigger>\n      {children}\n    </Activity>\n  );\n}\n"],"mappings":";;;;;;;;;AA+BA,SAAS,WAAW,MAAe,QAAiC;CAClE,IAAI,MAAM,OAAO;CACjB,OAAO,SAAS,UAAU;AAC5B;;AAGA,SAAgB,aAAa,EAC3B,OACA,MACA,WACA,MACA,cACA,UACA,YAAY,OACZ,MACA,YACoB;CACpB,MAAM,QAAQ,OAAOA,mDAAAA,UAAU,KAAK,IAAIC,mDAAAA,aAAa,OAAO,SAAS;CACrE,MAAM,UAAUC,mDAAAA,aAAa,KAAK;CAClC,MAAM,SAAS,CAAC,QAAQ,QAAQ,SAAS;CACzC,MAAM,eAAe,OAAO,KAAKC,mDAAAA,YAAY,SAAS,MAAM,MAAM;CAElE,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,iBAAAA,UAAD;EACE,aAAW;EACX,YAAW;EACX,QAAQ,WAAW,MAAM,MAAM;EAC/B,MAAM,YAAY;EACJ;EACJ;EACV,cAAYC,mDAAAA,UAAU,KAAK;EAP7B,UAAA,CASE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gEAAAA,sBAAD;GAAsB,IAAI,MAAM,EAAE,EAAE;GAAW,WAAWC,cAAAA,GAAG,aAAa,kCAAkC;GAC1G,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,iBAAAA,gBAAD,EAAA,UAAA;IACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,cAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAM,MAAP,EAAY,eAAA,KAAa,CAAA,EACb,CAAA;IACd,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,eAAD;KAAe,WAAWH,cAAAA,GAAG,aAAa,aAAa,CAAC,MAAM,UAAU,gBAAgB;KACrF,UAAA,MAAM;IACM,CAAA;IACd,MAAM,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACI,iBAAAA,gBAAD;KAAgB,WAAWJ,cAAAA,GAAG,aAAa,cAAc;KAAI,UAAA,MAAM;IAAuB,CAAA;IAC1G,MAAM,YACL,iBAAA,GAAA,kBAAA,KAAA,CAACG,iBAAAA,eAAD;KAAe,WAAWH,cAAAA,GAAG,aAAa,aAAa,oBAAoB;KAA3E,UAAA,CAA8E,MACzE,MAAM,QACI;;IAEhB,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACK,aAAAA,GAAD;KAAG,MAAM;KAAI,MAAK;KAAM,cAAW;KAAS,WAAU;IAAwC,CAAA;IACxG,gBACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;KAAK,IAAG;KAAO,SAAQ;KAAO,MAAK;KAAQ,WAAU;KAClD,UAAA;IACE,CAAA;IAEP,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,oBAAD,CAAqB,CAAA;GACP,EAAA,CAAA;EACI,CAAA,GACrB,QACO;;AAEd"}
+{"version":3,"file":"activity-fold.cjs.js","names":["agentGlyph","AgentIndicator","useState","liveWords","settledWords","callsOutcome","outcomeText","stretchPose","useRef","useRelativePaths","Activity","wordsName","ActivityTimedTrigger","ActivityHeader","ActivityIcon","cn","Shimmer","Unwatched","ActivityLabel","ActivityDetail","X","Txt","ActivityDisclosure"],"sources":["../../../../../src/domains/chat/activity/components/activity-fold.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport type { LucideIcon } from 'lucide-react';\nimport { useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\n\nimport type { ActivityCallState } from '../model/activity-members';\nimport { callsOutcome, liveWords, outcomeText, settledWords, stretchPose, wordsName } from '../model/activity-words';\nimport { ActivityTimedTrigger } from './activity-timed-trigger';\nimport { useFadingEdge } from './use-fading-edge';\nimport { useRollingWords } from './use-rolling-words';\nimport { AgentIndicator, agentGlyph } from '@/ds/components/AgentIndicator';\nimport type { AgentIndicatorState } from '@/ds/components/AgentIndicator';\nimport {\n  Activity,\n  ActivityDetail,\n  ActivityDisclosure,\n  ActivityHeader,\n  ActivityIcon,\n  ActivityLabel,\n  useRelativePaths,\n} from '@/ds/components/ai/activity';\nimport type { ActivityStatus } from '@/ds/components/ai/activity';\nimport { Unwatched } from '@/ds/components/Arrival';\nimport { Shimmer } from '@/ds/components/Shimmer';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface ActivityFoldProps {\n  calls: readonly ActivityCallState[];\n  indicator?: boolean;\n  live: boolean;\n  elapsedMs?: number;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  foldable: boolean;\n  /** Reads at answer size. */\n  prominent?: boolean;\n  slot?: string;\n  children: ReactNode;\n}\n\nfunction FoldIcon({\n  pose,\n  animates,\n  live,\n  fallback: Fallback,\n}: {\n  pose?: AgentIndicatorState;\n  animates: boolean;\n  live: boolean;\n  fallback: LucideIcon;\n}) {\n  if (!pose) return <Fallback aria-hidden />;\n  if (!animates) {\n    const Glyph = agentGlyph(pose);\n    return <Glyph />;\n  }\n  return <AgentIndicator state={pose} still={!live} />;\n}\n\nconst UNTRUNCATED = 'shrink-0 whitespace-nowrap text-clip';\n\nfunction foldStatus(live: boolean, failed: boolean): ActivityStatus {\n  if (live) return 'running';\n  return failed ? 'error' : 'idle';\n}\n\n/** A line that says what its calls are doing, or did, and folds what it summarises. */\nexport function ActivityFold({\n  calls,\n  indicator = false,\n  live,\n  elapsedMs,\n  open,\n  onOpenChange,\n  foldable,\n  prominent = false,\n  slot,\n  children,\n}: ActivityFoldProps) {\n  const [animates] = useState(live);\n  const words = live ? liveWords(calls) : settledWords(calls, elapsedMs);\n  const outcome = callsOutcome(calls);\n  const failed = !live && outcome.failed > 0;\n  const outcomeLabel = live ? '' : outcomeText(outcome, calls.length);\n  const spoken = [words.label, words.detail, words.duration, failed, outcomeLabel].join('\\u0000');\n  const pose = indicator ? stretchPose(calls, live) : undefined;\n  const box = useRef<HTMLSpanElement>(null);\n  const said = useRef<HTMLSpanElement>(null);\n  const relative = useRelativePaths();\n  useFadingEdge(said, spoken);\n  useRollingWords(box, said, spoken, animates);\n\n  return (\n    <Activity\n      data-slot={slot}\n      appearance=\"inline\"\n      status={foldStatus(live, failed)}\n      open={foldable && open}\n      onOpenChange={onOpenChange}\n      foldable={foldable}\n      aria-label={wordsName({ ...words, detail: words.detail && relative(words.detail) })}\n    >\n      <ActivityTimedTrigger at={calls[0]?.startedAt}>\n        <ActivityHeader>\n          <ActivityIcon className={cn(pose && '[&_svg]:size-4')}>\n            <FoldIcon pose={pose} animates={animates} live={live} fallback={words.icon} />\n          </ActivityIcon>\n          <span ref={box} className=\"relative flex min-w-0\">\n            <Shimmer ref={said} active={live} className=\"-my-1 flex min-w-0 items-center gap-2 overflow-hidden py-1\">\n              <Unwatched>\n                <ActivityLabel className={cn(prominent && 'text-body font-medium', UNTRUNCATED)}>\n                  {words.label}\n                </ActivityLabel>\n                {words.detail && (\n                  <ActivityDetail className={cn(prominent && 'text-body', UNTRUNCATED)}>{words.detail}</ActivityDetail>\n                )}\n                {words.duration && (\n                  <ActivityLabel className={cn(prominent && 'text-body font-medium', '-ml-1 tabular-nums')}>\n                    · {words.duration}\n                  </ActivityLabel>\n                )}\n                {failed && (\n                  <X size={13} role=\"img\" aria-label=\"Failed\" className=\"shrink-0 text-destructive-foreground\" />\n                )}\n                {outcomeLabel && (\n                  <Txt\n                    as=\"span\"\n                    variant=\"meta\"\n                    tone=\"muted\"\n                    className={cn('shrink-0 tabular-nums', prominent && 'text-body-sm')}\n                  >\n                    {outcomeLabel}\n                  </Txt>\n                )}\n              </Unwatched>\n            </Shimmer>\n          </span>\n          <ActivityDisclosure />\n        </ActivityHeader>\n      </ActivityTimedTrigger>\n      {children}\n    </Activity>\n  );\n}\n"],"mappings":"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"}

package/dist/domains/chat/activity/components/activity-fold.es.js

@@ -1,21 +1,53 @@
 import { t as cn } from "../../../../utils-DQx8TpNT.js";
 import { t as Txt } from "../../../../Txt-BM6TVV_c.js";
-import { d as ActivityHeader, h as ActivityLabel, l as ActivityDetail, p as ActivityIcon$1, s as Activity, u as ActivityDisclosure } from "../../../../activity-ihrl0JtH.js";
-import { callsOutcome, liveWords, outcomeText, settledWords, wordsName } from "../model/activity-words.es.js";
+import { n as AgentIndicator, t as agentGlyph } from "../../../../AgentIndicator-Bs2S8AWJ.js";
+import { S as useRelativePaths, d as ActivityHeader, h as ActivityLabel, l as ActivityDetail, p as ActivityIcon$1, s as Activity, u as ActivityDisclosure } from "../../../../activity-CM34JyW-.js";
+import { i as Unwatched } from "../../../../Arrival-CJFEOXr5.js";
+import { Shimmer } from "../../../../components/Shimmer.es.js";
+import { callsOutcome, liveWords, outcomeText, settledWords, stretchPose, wordsName } from "../model/activity-words.es.js";
 import { ActivityTimedTrigger } from "./activity-timed-trigger.es.js";
+import { useFadingEdge } from "./use-fading-edge.es.js";
+import { useRollingWords } from "./use-rolling-words.es.js";
+import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
 // src/domains/chat/activity/components/activity-fold.tsx
+function FoldIcon({ pose, animates, live, fallback: Fallback }) {
+	if (!pose) return /* @__PURE__ */ jsx(Fallback, { "aria-hidden": true });
+	if (!animates) {
+		const Glyph = agentGlyph(pose);
+		return /* @__PURE__ */ jsx(Glyph, {});
+	}
+	return /* @__PURE__ */ jsx(AgentIndicator, {
+		state: pose,
+		still: !live
+	});
+}
+var UNTRUNCATED = "shrink-0 whitespace-nowrap text-clip";
 function foldStatus(live, failed) {
 	if (live) return "running";
 	return failed ? "error" : "idle";
 }
 /** A line that says what its calls are doing, or did, and folds what it summarises. */
-function ActivityFold({ calls, live, elapsedMs, open, onOpenChange, foldable, prominent = false, slot, children }) {
+function ActivityFold({ calls, indicator = false, live, elapsedMs, open, onOpenChange, foldable, prominent = false, slot, children }) {
+	const [animates] = useState(live);
 	const words = live ? liveWords(calls) : settledWords(calls, elapsedMs);
 	const outcome = callsOutcome(calls);
 	const failed = !live && outcome.failed > 0;
 	const outcomeLabel = live ? "" : outcomeText(outcome, calls.length);
+	const spoken = [
+		words.label,
+		words.detail,
+		words.duration,
+		failed,
+		outcomeLabel
+	].join("\0");
+	const pose = indicator ? stretchPose(calls, live) : void 0;
+	const box = useRef(null);
+	const said = useRef(null);
+	const relative = useRelativePaths();
+	useFadingEdge(said, spoken);
+	useRollingWords(box, said, spoken, animates);
 	return /* @__PURE__ */ jsxs(Activity, {
 		"data-slot": slot,
 		appearance: "inline",
@@ -23,36 +55,57 @@ function ActivityFold({ calls, live, elapsedMs, open, onOpenChange, foldable, pr
 		open: foldable && open,
 		onOpenChange,
 		foldable,
-		"aria-label": wordsName(words),
+		"aria-label": wordsName({
+			...words,
+			detail: words.detail && relative(words.detail)
+		}),
 		children: [/* @__PURE__ */ jsx(ActivityTimedTrigger, {
 			at: calls[0]?.startedAt,
-			className: cn(prominent && "mb-2 border-b border-border pb-2"),
 			children: /* @__PURE__ */ jsxs(ActivityHeader, { children: [
-				/* @__PURE__ */ jsx(ActivityIcon$1, { children: /* @__PURE__ */ jsx(words.icon, { "aria-hidden": true }) }),
-				/* @__PURE__ */ jsx(ActivityLabel, {
-					className: cn(prominent && "text-body", !words.detail && "min-w-0 shrink"),
-					children: words.label
-				}),
-				words.detail && /* @__PURE__ */ jsx(ActivityDetail, {
-					className: cn(prominent && "text-body-sm"),
-					children: words.detail
-				}),
-				words.duration && /* @__PURE__ */ jsxs(ActivityLabel, {
-					className: cn(prominent && "text-body", "-ml-1 tabular-nums"),
-					children: ["· ", words.duration]
-				}),
-				failed && /* @__PURE__ */ jsx(X, {
-					size: 13,
-					role: "img",
-					"aria-label": "Failed",
-					className: "shrink-0 text-destructive-foreground"
+				/* @__PURE__ */ jsx(ActivityIcon$1, {
+					className: cn(pose && "[&_svg]:size-4"),
+					children: /* @__PURE__ */ jsx(FoldIcon, {
+						pose,
+						animates,
+						live,
+						fallback: words.icon
+					})
 				}),
-				outcomeLabel && /* @__PURE__ */ jsx(Txt, {
-					as: "span",
-					variant: "meta",
-					tone: "muted",
-					className: "shrink-0 tabular-nums",
-					children: outcomeLabel
+				/* @__PURE__ */ jsx("span", {
+					ref: box,
+					className: "relative flex min-w-0",
+					children: /* @__PURE__ */ jsx(Shimmer, {
+						ref: said,
+						active: live,
+						className: "-my-1 flex min-w-0 items-center gap-2 overflow-hidden py-1",
+						children: /* @__PURE__ */ jsxs(Unwatched, { children: [
+							/* @__PURE__ */ jsx(ActivityLabel, {
+								className: cn(prominent && "text-body font-medium", UNTRUNCATED),
+								children: words.label
+							}),
+							words.detail && /* @__PURE__ */ jsx(ActivityDetail, {
+								className: cn(prominent && "text-body", UNTRUNCATED),
+								children: words.detail
+							}),
+							words.duration && /* @__PURE__ */ jsxs(ActivityLabel, {
+								className: cn(prominent && "text-body font-medium", "-ml-1 tabular-nums"),
+								children: ["· ", words.duration]
+							}),
+							failed && /* @__PURE__ */ jsx(X, {
+								size: 13,
+								role: "img",
+								"aria-label": "Failed",
+								className: "shrink-0 text-destructive-foreground"
+							}),
+							outcomeLabel && /* @__PURE__ */ jsx(Txt, {
+								as: "span",
+								variant: "meta",
+								tone: "muted",
+								className: cn("shrink-0 tabular-nums", prominent && "text-body-sm"),
+								children: outcomeLabel
+							})
+						] })
+					})
 				}),
 				/* @__PURE__ */ jsx(ActivityDisclosure, {})
 			] })

package/dist/domains/chat/activity/components/activity-fold.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity-fold.es.js","names":["ActivityIcon"],"sources":["../../../../../src/domains/chat/activity/components/activity-fold.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport type { ActivityCall } from '../model/activity-members';\nimport { callsOutcome, liveWords, outcomeText, settledWords, wordsName } from '../model/activity-words';\nimport { ActivityTimedTrigger } from './activity-timed-trigger';\nimport {\n  Activity,\n  ActivityDetail,\n  ActivityDisclosure,\n  ActivityHeader,\n  ActivityIcon,\n  ActivityLabel,\n} from '@/ds/components/ai/activity';\nimport type { ActivityStatus } from '@/ds/components/ai/activity';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface ActivityFoldProps {\n  calls: readonly ActivityCall[];\n  live: boolean;\n  elapsedMs?: number;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  foldable: boolean;\n  /** Reads at answer size, ruled off from what it folds. */\n  prominent?: boolean;\n  slot?: string;\n  children: ReactNode;\n}\n\nfunction foldStatus(live: boolean, failed: boolean): ActivityStatus {\n  if (live) return 'running';\n  return failed ? 'error' : 'idle';\n}\n\n/** A line that says what its calls are doing, or did, and folds what it summarises. */\nexport function ActivityFold({\n  calls,\n  live,\n  elapsedMs,\n  open,\n  onOpenChange,\n  foldable,\n  prominent = false,\n  slot,\n  children,\n}: ActivityFoldProps) {\n  const words = live ? liveWords(calls) : settledWords(calls, elapsedMs);\n  const outcome = callsOutcome(calls);\n  const failed = !live && outcome.failed > 0;\n  const outcomeLabel = live ? '' : outcomeText(outcome, calls.length);\n\n  return (\n    <Activity\n      data-slot={slot}\n      appearance=\"inline\"\n      status={foldStatus(live, failed)}\n      open={foldable && open}\n      onOpenChange={onOpenChange}\n      foldable={foldable}\n      aria-label={wordsName(words)}\n    >\n      <ActivityTimedTrigger at={calls[0]?.startedAt} className={cn(prominent && 'mb-2 border-b border-border pb-2')}>\n        <ActivityHeader>\n          <ActivityIcon>\n            <words.icon aria-hidden />\n          </ActivityIcon>\n          <ActivityLabel className={cn(prominent && 'text-body', !words.detail && 'min-w-0 shrink')}>\n            {words.label}\n          </ActivityLabel>\n          {words.detail && <ActivityDetail className={cn(prominent && 'text-body-sm')}>{words.detail}</ActivityDetail>}\n          {words.duration && (\n            <ActivityLabel className={cn(prominent && 'text-body', '-ml-1 tabular-nums')}>\n              · {words.duration}\n            </ActivityLabel>\n          )}\n          {failed && <X size={13} role=\"img\" aria-label=\"Failed\" className=\"shrink-0 text-destructive-foreground\" />}\n          {outcomeLabel && (\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"shrink-0 tabular-nums\">\n              {outcomeLabel}\n            </Txt>\n          )}\n          <ActivityDisclosure />\n        </ActivityHeader>\n      </ActivityTimedTrigger>\n      {children}\n    </Activity>\n  );\n}\n"],"mappings":";;;;;;;;AA+BA,SAAS,WAAW,MAAe,QAAiC;CAClE,IAAI,MAAM,OAAO;CACjB,OAAO,SAAS,UAAU;AAC5B;;AAGA,SAAgB,aAAa,EAC3B,OACA,MACA,WACA,MACA,cACA,UACA,YAAY,OACZ,MACA,YACoB;CACpB,MAAM,QAAQ,OAAO,UAAU,KAAK,IAAI,aAAa,OAAO,SAAS;CACrE,MAAM,UAAU,aAAa,KAAK;CAClC,MAAM,SAAS,CAAC,QAAQ,QAAQ,SAAS;CACzC,MAAM,eAAe,OAAO,KAAK,YAAY,SAAS,MAAM,MAAM;CAElE,OACE,qBAAC,UAAD;EACE,aAAW;EACX,YAAW;EACX,QAAQ,WAAW,MAAM,MAAM;EAC/B,MAAM,YAAY;EACJ;EACJ;EACV,cAAY,UAAU,KAAK;EAP7B,UAAA,CASE,oBAAC,sBAAD;GAAsB,IAAI,MAAM,EAAE,EAAE;GAAW,WAAW,GAAG,aAAa,kCAAkC;GAC1G,UAAA,qBAAC,gBAAD,EAAA,UAAA;IACE,oBAACA,gBAAD,EAAA,UACE,oBAAC,MAAM,MAAP,EAAY,eAAA,KAAa,CAAA,EACb,CAAA;IACd,oBAAC,eAAD;KAAe,WAAW,GAAG,aAAa,aAAa,CAAC,MAAM,UAAU,gBAAgB;KACrF,UAAA,MAAM;IACM,CAAA;IACd,MAAM,UAAU,oBAAC,gBAAD;KAAgB,WAAW,GAAG,aAAa,cAAc;KAAI,UAAA,MAAM;IAAuB,CAAA;IAC1G,MAAM,YACL,qBAAC,eAAD;KAAe,WAAW,GAAG,aAAa,aAAa,oBAAoB;KAA3E,UAAA,CAA8E,MACzE,MAAM,QACI;;IAEhB,UAAU,oBAAC,GAAD;KAAG,MAAM;KAAI,MAAK;KAAM,cAAW;KAAS,WAAU;IAAwC,CAAA;IACxG,gBACC,oBAAC,KAAD;KAAK,IAAG;KAAO,SAAQ;KAAO,MAAK;KAAQ,WAAU;KAClD,UAAA;IACE,CAAA;IAEP,oBAAC,oBAAD,CAAqB,CAAA;GACP,EAAA,CAAA;EACI,CAAA,GACrB,QACO;;AAEd"}
+{"version":3,"file":"activity-fold.es.js","names":["ActivityIcon"],"sources":["../../../../../src/domains/chat/activity/components/activity-fold.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport type { LucideIcon } from 'lucide-react';\nimport { useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\n\nimport type { ActivityCallState } from '../model/activity-members';\nimport { callsOutcome, liveWords, outcomeText, settledWords, stretchPose, wordsName } from '../model/activity-words';\nimport { ActivityTimedTrigger } from './activity-timed-trigger';\nimport { useFadingEdge } from './use-fading-edge';\nimport { useRollingWords } from './use-rolling-words';\nimport { AgentIndicator, agentGlyph } from '@/ds/components/AgentIndicator';\nimport type { AgentIndicatorState } from '@/ds/components/AgentIndicator';\nimport {\n  Activity,\n  ActivityDetail,\n  ActivityDisclosure,\n  ActivityHeader,\n  ActivityIcon,\n  ActivityLabel,\n  useRelativePaths,\n} from '@/ds/components/ai/activity';\nimport type { ActivityStatus } from '@/ds/components/ai/activity';\nimport { Unwatched } from '@/ds/components/Arrival';\nimport { Shimmer } from '@/ds/components/Shimmer';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface ActivityFoldProps {\n  calls: readonly ActivityCallState[];\n  indicator?: boolean;\n  live: boolean;\n  elapsedMs?: number;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  foldable: boolean;\n  /** Reads at answer size. */\n  prominent?: boolean;\n  slot?: string;\n  children: ReactNode;\n}\n\nfunction FoldIcon({\n  pose,\n  animates,\n  live,\n  fallback: Fallback,\n}: {\n  pose?: AgentIndicatorState;\n  animates: boolean;\n  live: boolean;\n  fallback: LucideIcon;\n}) {\n  if (!pose) return <Fallback aria-hidden />;\n  if (!animates) {\n    const Glyph = agentGlyph(pose);\n    return <Glyph />;\n  }\n  return <AgentIndicator state={pose} still={!live} />;\n}\n\nconst UNTRUNCATED = 'shrink-0 whitespace-nowrap text-clip';\n\nfunction foldStatus(live: boolean, failed: boolean): ActivityStatus {\n  if (live) return 'running';\n  return failed ? 'error' : 'idle';\n}\n\n/** A line that says what its calls are doing, or did, and folds what it summarises. */\nexport function ActivityFold({\n  calls,\n  indicator = false,\n  live,\n  elapsedMs,\n  open,\n  onOpenChange,\n  foldable,\n  prominent = false,\n  slot,\n  children,\n}: ActivityFoldProps) {\n  const [animates] = useState(live);\n  const words = live ? liveWords(calls) : settledWords(calls, elapsedMs);\n  const outcome = callsOutcome(calls);\n  const failed = !live && outcome.failed > 0;\n  const outcomeLabel = live ? '' : outcomeText(outcome, calls.length);\n  const spoken = [words.label, words.detail, words.duration, failed, outcomeLabel].join('\\u0000');\n  const pose = indicator ? stretchPose(calls, live) : undefined;\n  const box = useRef<HTMLSpanElement>(null);\n  const said = useRef<HTMLSpanElement>(null);\n  const relative = useRelativePaths();\n  useFadingEdge(said, spoken);\n  useRollingWords(box, said, spoken, animates);\n\n  return (\n    <Activity\n      data-slot={slot}\n      appearance=\"inline\"\n      status={foldStatus(live, failed)}\n      open={foldable && open}\n      onOpenChange={onOpenChange}\n      foldable={foldable}\n      aria-label={wordsName({ ...words, detail: words.detail && relative(words.detail) })}\n    >\n      <ActivityTimedTrigger at={calls[0]?.startedAt}>\n        <ActivityHeader>\n          <ActivityIcon className={cn(pose && '[&_svg]:size-4')}>\n            <FoldIcon pose={pose} animates={animates} live={live} fallback={words.icon} />\n          </ActivityIcon>\n          <span ref={box} className=\"relative flex min-w-0\">\n            <Shimmer ref={said} active={live} className=\"-my-1 flex min-w-0 items-center gap-2 overflow-hidden py-1\">\n              <Unwatched>\n                <ActivityLabel className={cn(prominent && 'text-body font-medium', UNTRUNCATED)}>\n                  {words.label}\n                </ActivityLabel>\n                {words.detail && (\n                  <ActivityDetail className={cn(prominent && 'text-body', UNTRUNCATED)}>{words.detail}</ActivityDetail>\n                )}\n                {words.duration && (\n                  <ActivityLabel className={cn(prominent && 'text-body font-medium', '-ml-1 tabular-nums')}>\n                    · {words.duration}\n                  </ActivityLabel>\n                )}\n                {failed && (\n                  <X size={13} role=\"img\" aria-label=\"Failed\" className=\"shrink-0 text-destructive-foreground\" />\n                )}\n                {outcomeLabel && (\n                  <Txt\n                    as=\"span\"\n                    variant=\"meta\"\n                    tone=\"muted\"\n                    className={cn('shrink-0 tabular-nums', prominent && 'text-body-sm')}\n                  >\n                    {outcomeLabel}\n                  </Txt>\n                )}\n              </Unwatched>\n            </Shimmer>\n          </span>\n          <ActivityDisclosure />\n        </ActivityHeader>\n      </ActivityTimedTrigger>\n      {children}\n    </Activity>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAyCA,SAAS,SAAS,EAChB,MACA,UACA,MACA,UAAU,YAMT;CACD,IAAI,CAAC,MAAM,OAAO,oBAAC,UAAD,EAAU,eAAA,KAAa,CAAA;CACzC,IAAI,CAAC,UAAU;EACb,MAAM,QAAQ,WAAW,IAAI;EAC7B,OAAO,oBAAC,OAAD,CAAQ,CAAA;CACjB;CACA,OAAO,oBAAC,gBAAD;EAAgB,OAAO;EAAM,OAAO,CAAC;CAAO,CAAA;AACrD;AAEA,IAAM,cAAc;AAEpB,SAAS,WAAW,MAAe,QAAiC;CAClE,IAAI,MAAM,OAAO;CACjB,OAAO,SAAS,UAAU;AAC5B;;AAGA,SAAgB,aAAa,EAC3B,OACA,YAAY,OACZ,MACA,WACA,MACA,cACA,UACA,YAAY,OACZ,MACA,YACoB;CACpB,MAAM,CAAC,YAAY,SAAS,IAAI;CAChC,MAAM,QAAQ,OAAO,UAAU,KAAK,IAAI,aAAa,OAAO,SAAS;CACrE,MAAM,UAAU,aAAa,KAAK;CAClC,MAAM,SAAS,CAAC,QAAQ,QAAQ,SAAS;CACzC,MAAM,eAAe,OAAO,KAAK,YAAY,SAAS,MAAM,MAAM;CAClE,MAAM,SAAS;EAAC,MAAM;EAAO,MAAM;EAAQ,MAAM;EAAU;EAAQ;CAAY,CAAC,CAAC,KAAK,IAAQ;CAC9F,MAAM,OAAO,YAAY,YAAY,OAAO,IAAI,IAAI,KAAA;CACpD,MAAM,MAAM,OAAwB,IAAI;CACxC,MAAM,OAAO,OAAwB,IAAI;CACzC,MAAM,WAAW,iBAAiB;CAClC,cAAc,MAAM,MAAM;CAC1B,gBAAgB,KAAK,MAAM,QAAQ,QAAQ;CAE3C,OACE,qBAAC,UAAD;EACE,aAAW;EACX,YAAW;EACX,QAAQ,WAAW,MAAM,MAAM;EAC/B,MAAM,YAAY;EACJ;EACJ;EACV,cAAY,UAAU;GAAE,GAAG;GAAO,QAAQ,MAAM,UAAU,SAAS,MAAM,MAAM;EAAE,CAAC;EAPpF,UAAA,CASE,oBAAC,sBAAD;GAAsB,IAAI,MAAM,EAAE,EAAE;GAClC,UAAA,qBAAC,gBAAD,EAAA,UAAA;IACE,oBAACA,gBAAD;KAAc,WAAW,GAAG,QAAQ,gBAAgB;KAClD,UAAA,oBAAC,UAAD;MAAgB;MAAgB;MAAgB;MAAM,UAAU,MAAM;KAAO,CAAA;IACjE,CAAA;IACd,oBAAC,QAAD;KAAM,KAAK;KAAK,WAAU;KACxB,UAAA,oBAAC,SAAD;MAAS,KAAK;MAAM,QAAQ;MAAM,WAAU;MAC1C,UAAA,qBAAC,WAAD,EAAA,UAAA;OACE,oBAAC,eAAD;QAAe,WAAW,GAAG,aAAa,yBAAyB,WAAW;QAC3E,UAAA,MAAM;OACM,CAAA;OACd,MAAM,UACL,oBAAC,gBAAD;QAAgB,WAAW,GAAG,aAAa,aAAa,WAAW;QAAI,UAAA,MAAM;OAAuB,CAAA;OAErG,MAAM,YACL,qBAAC,eAAD;QAAe,WAAW,GAAG,aAAa,yBAAyB,oBAAoB;QAAvF,UAAA,CAA0F,MACrF,MAAM,QACI;;OAEhB,UACC,oBAAC,GAAD;QAAG,MAAM;QAAI,MAAK;QAAM,cAAW;QAAS,WAAU;OAAwC,CAAA;OAE/F,gBACC,oBAAC,KAAD;QACE,IAAG;QACH,SAAQ;QACR,MAAK;QACL,WAAW,GAAG,yBAAyB,aAAa,cAAc;QAEjE,UAAA;OACE,CAAA;MAEE,EAAA,CAAA;KACJ,CAAA;IACL,CAAA;IACN,oBAAC,oBAAD,CAAqB,CAAA;GACP,EAAA,CAAA;EACI,CAAA,GACrB,QACO;;AAEd"}

package/dist/domains/chat/activity/components/activity-timed-trigger.cjs.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_utils_date_format = require("../../../../utils/date-format.cjs.js");
 const require_tooltip = require("../../../../tooltip-BiRLT3Th.cjs");
-const require_activity = require("../../../../activity-QyLJcBKc.cjs");
+const require_activity = require("../../../../activity-DAK8tj7r.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/chat/activity/components/activity-timed-trigger.tsx
 /** A line's trigger that names when its work began, on hover and to screen readers. */

package/dist/domains/chat/activity/components/activity-timed-trigger.es.js

@@ -1,6 +1,6 @@
 import { formatMoment, toDate } from "../../../../utils/date-format.es.js";
 import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../../../../tooltip-HzcLyGtV.js";
-import { b as ActivityTrigger } from "../../../../activity-ihrl0JtH.js";
+import { b as ActivityTrigger } from "../../../../activity-CM34JyW-.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/domains/chat/activity/components/activity-timed-trigger.tsx
 /** A line's trigger that names when its work began, on hover and to screen readers. */

package/dist/domains/chat/activity/components/calls-panel.cjs.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_scroll_area = require("../../../../scroll-area-BP4gPZ4G.cjs");
 const require_domains_chat_activity_use_activity_disclosure = require("../use-activity-disclosure.cjs.js");
-const require_activity = require("../../../../activity-QyLJcBKc.cjs");
+const require_activity = require("../../../../activity-DAK8tj7r.cjs");
 const require_domains_chat_activity_components_reading_row = require("./reading-row.cjs.js");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/domains/chat/activity/components/calls-panel.es.js

@@ -1,6 +1,6 @@
 import { n as ScrollAreaViewport, t as ScrollArea } from "../../../../scroll-area-C226l0v0.js";
 import { useDisclosureStore } from "../use-activity-disclosure.es.js";
-import { c as ActivityContent } from "../../../../activity-ihrl0JtH.js";
+import { c as ActivityContent } from "../../../../activity-CM34JyW-.js";
 import { keepFollowing, keepReadingRow, listRow } from "./reading-row.es.js";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/domains/chat/activity/components/stretch-content.cjs.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_activity = require("../../../../activity-QyLJcBKc.cjs");
+const require_activity = require("../../../../activity-DAK8tj7r.cjs");
 const require_domains_chat_activity_components_calls_panel = require("./calls-panel.cjs.js");
 const require_domains_chat_activity_components_stretch_thought = require("./stretch-thought.cjs.js");
 const require_domains_chat_activity_components_stretch_segment = require("./stretch-segment.cjs.js");

package/dist/domains/chat/activity/components/stretch-content.es.js

@@ -1,4 +1,4 @@
-import { c as ActivityContent } from "../../../../activity-ihrl0JtH.js";
+import { c as ActivityContent } from "../../../../activity-CM34JyW-.js";
 import { CallsPanel } from "./calls-panel.es.js";
 import { StretchThought } from "./stretch-thought.es.js";
 import { StretchSegment } from "./stretch-segment.es.js";

package/dist/domains/chat/activity/components/stretch-thought.cjs.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_activity = require("../../../../activity-QyLJcBKc.cjs");
+const require_activity = require("../../../../activity-DAK8tj7r.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/chat/activity/components/stretch-thought.tsx
 /** A thought in an open stretch, read like the answer around it. */

package/dist/domains/chat/activity/components/stretch-thought.es.js

@@ -1,4 +1,4 @@
-import { a as ReasoningText } from "../../../../activity-ihrl0JtH.js";
+import { a as ReasoningText } from "../../../../activity-CM34JyW-.js";
 import { jsx } from "react/jsx-runtime";
 // src/domains/chat/activity/components/stretch-thought.tsx
 /** A thought in an open stretch, read like the answer around it. */

package/dist/domains/chat/activity/components/use-fading-edge.cjs.js

@@ -0,0 +1,26 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react = require("react");
+// src/domains/chat/activity/components/use-fading-edge.ts
+var FADE_PX = 32;
+function fadeHiddenWords(element) {
+	const hidden = element.scrollWidth - element.clientWidth;
+	element.style.maskImage = hidden > 0 ? `linear-gradient(to right, #000 calc(100% - ${Math.min(hidden, FADE_PX)}px), transparent)` : "";
+}
+/**
+* Words wider than their line fade out at its edge instead of ending in an ellipsis. The fade is never wider than
+* what it hides, so a line growing into its full width loses the fade as its last word comes into view.
+*/
+function useFadingEdge(line, words) {
+	(0, react.useLayoutEffect)(() => {
+		const element = line.current;
+		if (!element) return;
+		fadeHiddenWords(element);
+		if (!("ResizeObserver" in globalThis)) return;
+		const observer = new ResizeObserver(() => fadeHiddenWords(element));
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [line, words]);
+}
+exports.useFadingEdge = useFadingEdge;
+
+//# sourceMappingURL=use-fading-edge.cjs.js.map

package/dist/domains/chat/activity/components/use-fading-edge.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-fading-edge.cjs.js","names":[],"sources":["../../../../../src/domains/chat/activity/components/use-fading-edge.ts"],"sourcesContent":["import { useLayoutEffect } from 'react';\nimport type { RefObject } from 'react';\n\nconst FADE_PX = 32;\n\nfunction fadeHiddenWords(element: HTMLElement) {\n  const hidden = element.scrollWidth - element.clientWidth;\n  element.style.maskImage =\n    hidden > 0 ? `linear-gradient(to right, #000 calc(100% - ${Math.min(hidden, FADE_PX)}px), transparent)` : '';\n}\n\n/**\n * Words wider than their line fade out at its edge instead of ending in an ellipsis. The fade is never wider than\n * what it hides, so a line growing into its full width loses the fade as its last word comes into view.\n */\nexport function useFadingEdge(line: RefObject<HTMLElement | null>, words: string) {\n  useLayoutEffect(() => {\n    const element = line.current;\n    if (!element) return;\n    fadeHiddenWords(element);\n    if (!('ResizeObserver' in globalThis)) return;\n    const observer = new ResizeObserver(() => fadeHiddenWords(element));\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [line, words]);\n}\n"],"mappings":";;;AAGA,IAAM,UAAU;AAEhB,SAAS,gBAAgB,SAAsB;CAC7C,MAAM,SAAS,QAAQ,cAAc,QAAQ;CAC7C,QAAQ,MAAM,YACZ,SAAS,IAAI,8CAA8C,KAAK,IAAI,QAAQ,OAAO,EAAE,qBAAqB;AAC9G;;;;;AAMA,SAAgB,cAAc,MAAqC,OAAe;CAChF,CAAA,GAAA,MAAA,gBAAA,OAAsB;EACpB,MAAM,UAAU,KAAK;EACrB,IAAI,CAAC,SAAS;EACd,gBAAgB,OAAO;EACvB,IAAI,EAAE,oBAAoB,aAAa;EACvC,MAAM,WAAW,IAAI,qBAAqB,gBAAgB,OAAO,CAAC;EAClE,SAAS,QAAQ,OAAO;EACxB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,MAAM,KAAK,CAAC;AAClB"}

package/dist/domains/chat/activity/components/use-fading-edge.d.ts

@@ -0,0 +1 @@
+export * from '../../../../src/domains/chat/activity/components/use-fading-edge';

package/dist/domains/chat/activity/components/use-fading-edge.es.js

@@ -0,0 +1,25 @@
+import { useLayoutEffect } from "react";
+// src/domains/chat/activity/components/use-fading-edge.ts
+var FADE_PX = 32;
+function fadeHiddenWords(element) {
+	const hidden = element.scrollWidth - element.clientWidth;
+	element.style.maskImage = hidden > 0 ? `linear-gradient(to right, #000 calc(100% - ${Math.min(hidden, FADE_PX)}px), transparent)` : "";
+}
+/**
+* Words wider than their line fade out at its edge instead of ending in an ellipsis. The fade is never wider than
+* what it hides, so a line growing into its full width loses the fade as its last word comes into view.
+*/
+function useFadingEdge(line, words) {
+	useLayoutEffect(() => {
+		const element = line.current;
+		if (!element) return;
+		fadeHiddenWords(element);
+		if (!("ResizeObserver" in globalThis)) return;
+		const observer = new ResizeObserver(() => fadeHiddenWords(element));
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [line, words]);
+}
+export { useFadingEdge };
+
+//# sourceMappingURL=use-fading-edge.es.js.map

package/dist/domains/chat/activity/components/use-fading-edge.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-fading-edge.es.js","names":[],"sources":["../../../../../src/domains/chat/activity/components/use-fading-edge.ts"],"sourcesContent":["import { useLayoutEffect } from 'react';\nimport type { RefObject } from 'react';\n\nconst FADE_PX = 32;\n\nfunction fadeHiddenWords(element: HTMLElement) {\n  const hidden = element.scrollWidth - element.clientWidth;\n  element.style.maskImage =\n    hidden > 0 ? `linear-gradient(to right, #000 calc(100% - ${Math.min(hidden, FADE_PX)}px), transparent)` : '';\n}\n\n/**\n * Words wider than their line fade out at its edge instead of ending in an ellipsis. The fade is never wider than\n * what it hides, so a line growing into its full width loses the fade as its last word comes into view.\n */\nexport function useFadingEdge(line: RefObject<HTMLElement | null>, words: string) {\n  useLayoutEffect(() => {\n    const element = line.current;\n    if (!element) return;\n    fadeHiddenWords(element);\n    if (!('ResizeObserver' in globalThis)) return;\n    const observer = new ResizeObserver(() => fadeHiddenWords(element));\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [line, words]);\n}\n"],"mappings":";;AAGA,IAAM,UAAU;AAEhB,SAAS,gBAAgB,SAAsB;CAC7C,MAAM,SAAS,QAAQ,cAAc,QAAQ;CAC7C,QAAQ,MAAM,YACZ,SAAS,IAAI,8CAA8C,KAAK,IAAI,QAAQ,OAAO,EAAE,qBAAqB;AAC9G;;;;;AAMA,SAAgB,cAAc,MAAqC,OAAe;CAChF,sBAAsB;EACpB,MAAM,UAAU,KAAK;EACrB,IAAI,CAAC,SAAS;EACd,gBAAgB,OAAO;EACvB,IAAI,EAAE,oBAAoB,aAAa;EACvC,MAAM,WAAW,IAAI,qBAAqB,gBAAgB,OAAO,CAAC;EAClE,SAAS,QAAQ,OAAO;EACxB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,MAAM,KAAK,CAAC;AAClB"}

package/dist/domains/chat/activity/components/use-rolling-words.cjs.js

@@ -0,0 +1,123 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react = require("react");
+// src/domains/chat/activity/components/use-rolling-words.ts
+var EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+var ROLL_MS = 460;
+var LEAVE_MS = 320;
+var WRITE_MS = 640;
+var WRITE_MASK = {
+	maskImage: "linear-gradient(90deg, #000 45%, transparent 55%)",
+	maskSize: "250% 100%",
+	maskRepeat: "no-repeat"
+};
+var IN_PLACE = {
+	opacity: 1,
+	transform: "none",
+	filter: "none"
+};
+function moves(element) {
+	return typeof element.animate === "function" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function running(animation) {
+	return animation?.playState === "running";
+}
+function writeIn(words) {
+	words.animate([{
+		...WRITE_MASK,
+		maskPosition: "100% 0"
+	}, {
+		...WRITE_MASK,
+		maskPosition: "0 0"
+	}], {
+		duration: WRITE_MS,
+		easing: EASE
+	});
+}
+function leave(box, leaving, width, from) {
+	if (!(leaving instanceof HTMLElement)) return;
+	leaving.setAttribute("aria-hidden", "true");
+	Object.assign(leaving.style, {
+		position: "absolute",
+		top: "0",
+		left: "0",
+		width: `${width}px`,
+		pointerEvents: "none"
+	});
+	box.append(leaving);
+	leaving.animate([from, {
+		opacity: 0,
+		transform: "translateY(-70%)",
+		filter: "blur(3px)"
+	}], {
+		duration: LEAVE_MS,
+		easing: EASE,
+		fill: "forwards"
+	}).finished.finally(() => leaving.remove()).catch(() => {});
+}
+/** Rolls to the new words from wherever the last roll had got to, and returns the width they settle at. */
+function roll(box, words, before, motion) {
+	const shownWidth = running(motion.glide) ? box.getBoundingClientRect().width : before.width;
+	const style = getComputedStyle(words);
+	const shown = running(motion.rise) ? {
+		opacity: style.opacity,
+		transform: style.transform,
+		filter: style.filter
+	} : IN_PLACE;
+	motion.glide?.cancel();
+	motion.rise?.cancel();
+	leave(box, before.words, shownWidth, shown);
+	motion.rise = words.animate([{
+		opacity: 0,
+		transform: "translateY(70%)",
+		filter: "blur(3px)"
+	}, IN_PLACE], {
+		duration: ROLL_MS,
+		easing: EASE
+	});
+	const width = box.offsetWidth;
+	if (width !== shownWidth) motion.glide = box.animate([{ width: `${shownWidth}px` }, { width: `${width}px` }], {
+		duration: ROLL_MS,
+		easing: EASE
+	});
+	return width;
+}
+/**
+* What a line says, moved like a thought changing: new words rise into place while the old ones rise and blur
+* away, and the box glides to the new width. Only a line the reader `watched` being written moves: it writes its
+* first words in from the left, and rolls each time `words`, the key of what is said, changes.
+*/
+function useRollingWords(box, said, words, watched) {
+	const before = (0, react.useRef)(void 0);
+	const motion = (0, react.useRef)({});
+	(0, react.useLayoutEffect)(() => {
+		if (!watched) return;
+		const boxElement = box.current;
+		const saidElement = said.current;
+		const previous = before.current;
+		if (!boxElement || !saidElement || previous?.key === words) return;
+		const clone = saidElement.cloneNode(true);
+		const moving = moves(saidElement);
+		if (moving && previous) {
+			before.current = {
+				key: words,
+				words: clone,
+				width: roll(boxElement, saidElement, previous, motion.current)
+			};
+			return;
+		}
+		if (moving) writeIn(saidElement);
+		before.current = {
+			key: words,
+			words: clone,
+			width: boxElement.offsetWidth
+		};
+	}, [
+		box,
+		said,
+		words,
+		watched
+	]);
+}
+exports.useRollingWords = useRollingWords;
+
+//# sourceMappingURL=use-rolling-words.cjs.js.map

package/dist/domains/chat/activity/components/use-rolling-words.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-rolling-words.cjs.js","names":["useRef"],"sources":["../../../../../src/domains/chat/activity/components/use-rolling-words.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nconst EASE = 'cubic-bezier(0.22, 1, 0.36, 1)';\nconst ROLL_MS = 460;\nconst LEAVE_MS = 320;\nconst WRITE_MS = 640;\nconst WRITE_MASK = {\n  maskImage: 'linear-gradient(90deg, #000 45%, transparent 55%)',\n  maskSize: '250% 100%',\n  maskRepeat: 'no-repeat',\n};\nconst IN_PLACE: Keyframe = { opacity: 1, transform: 'none', filter: 'none' };\n\ninterface Said {\n  key: string;\n  words: Node;\n  width: number;\n}\n\ninterface Motion {\n  glide?: Animation;\n  rise?: Animation;\n}\n\nfunction moves(element: HTMLElement): boolean {\n  return typeof element.animate === 'function' && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\nfunction running(animation: Animation | undefined): boolean {\n  return animation?.playState === 'running';\n}\n\nfunction writeIn(words: HTMLElement) {\n  words.animate(\n    [\n      { ...WRITE_MASK, maskPosition: '100% 0' },\n      { ...WRITE_MASK, maskPosition: '0 0' },\n    ],\n    { duration: WRITE_MS, easing: EASE },\n  );\n}\n\nfunction leave(box: HTMLElement, leaving: Node, width: number, from: Keyframe) {\n  if (!(leaving instanceof HTMLElement)) return;\n  leaving.setAttribute('aria-hidden', 'true');\n  Object.assign(leaving.style, {\n    position: 'absolute',\n    top: '0',\n    left: '0',\n    width: `${width}px`,\n    pointerEvents: 'none',\n  });\n  box.append(leaving);\n  leaving\n    .animate([from, { opacity: 0, transform: 'translateY(-70%)', filter: 'blur(3px)' }], {\n      duration: LEAVE_MS,\n      easing: EASE,\n      fill: 'forwards',\n    })\n    .finished.finally(() => leaving.remove())\n    .catch(() => {});\n}\n\n/** Rolls to the new words from wherever the last roll had got to, and returns the width they settle at. */\nfunction roll(box: HTMLElement, words: HTMLElement, before: Said, motion: Motion): number {\n  const shownWidth = running(motion.glide) ? box.getBoundingClientRect().width : before.width;\n  const style = getComputedStyle(words);\n  const shown = running(motion.rise)\n    ? { opacity: style.opacity, transform: style.transform, filter: style.filter }\n    : IN_PLACE;\n  motion.glide?.cancel();\n  motion.rise?.cancel();\n\n  leave(box, before.words, shownWidth, shown);\n  motion.rise = words.animate([{ opacity: 0, transform: 'translateY(70%)', filter: 'blur(3px)' }, IN_PLACE], {\n    duration: ROLL_MS,\n    easing: EASE,\n  });\n  const width = box.offsetWidth;\n  if (width !== shownWidth) {\n    motion.glide = box.animate([{ width: `${shownWidth}px` }, { width: `${width}px` }], {\n      duration: ROLL_MS,\n      easing: EASE,\n    });\n  }\n  return width;\n}\n\n/**\n * What a line says, moved like a thought changing: new words rise into place while the old ones rise and blur\n * away, and the box glides to the new width. Only a line the reader `watched` being written moves: it writes its\n * first words in from the left, and rolls each time `words`, the key of what is said, changes.\n */\nexport function useRollingWords(\n  box: RefObject<HTMLElement | null>,\n  said: RefObject<HTMLElement | null>,\n  words: string,\n  watched: boolean,\n) {\n  const before = useRef<Said | undefined>(undefined);\n  const motion = useRef<Motion>({});\n\n  useLayoutEffect(() => {\n    if (!watched) return;\n    const boxElement = box.current;\n    const saidElement = said.current;\n    const previous = before.current;\n    if (!boxElement || !saidElement || previous?.key === words) return;\n\n    const clone = saidElement.cloneNode(true);\n    const moving = moves(saidElement);\n    if (moving && previous) {\n      before.current = { key: words, words: clone, width: roll(boxElement, saidElement, previous, motion.current) };\n      return;\n    }\n    if (moving) writeIn(saidElement);\n    before.current = { key: words, words: clone, width: boxElement.offsetWidth };\n  }, [box, said, words, watched]);\n}\n"],"mappings":"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"}

package/dist/domains/chat/activity/components/use-rolling-words.d.ts

@@ -0,0 +1 @@
+export * from '../../../../src/domains/chat/activity/components/use-rolling-words';

package/dist/domains/chat/activity/components/use-rolling-words.es.js

@@ -0,0 +1,122 @@
+import { useLayoutEffect, useRef } from "react";
+// src/domains/chat/activity/components/use-rolling-words.ts
+var EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+var ROLL_MS = 460;
+var LEAVE_MS = 320;
+var WRITE_MS = 640;
+var WRITE_MASK = {
+	maskImage: "linear-gradient(90deg, #000 45%, transparent 55%)",
+	maskSize: "250% 100%",
+	maskRepeat: "no-repeat"
+};
+var IN_PLACE = {
+	opacity: 1,
+	transform: "none",
+	filter: "none"
+};
+function moves(element) {
+	return typeof element.animate === "function" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function running(animation) {
+	return animation?.playState === "running";
+}
+function writeIn(words) {
+	words.animate([{
+		...WRITE_MASK,
+		maskPosition: "100% 0"
+	}, {
+		...WRITE_MASK,
+		maskPosition: "0 0"
+	}], {
+		duration: WRITE_MS,
+		easing: EASE
+	});
+}
+function leave(box, leaving, width, from) {
+	if (!(leaving instanceof HTMLElement)) return;
+	leaving.setAttribute("aria-hidden", "true");
+	Object.assign(leaving.style, {
+		position: "absolute",
+		top: "0",
+		left: "0",
+		width: `${width}px`,
+		pointerEvents: "none"
+	});
+	box.append(leaving);
+	leaving.animate([from, {
+		opacity: 0,
+		transform: "translateY(-70%)",
+		filter: "blur(3px)"
+	}], {
+		duration: LEAVE_MS,
+		easing: EASE,
+		fill: "forwards"
+	}).finished.finally(() => leaving.remove()).catch(() => {});
+}
+/** Rolls to the new words from wherever the last roll had got to, and returns the width they settle at. */
+function roll(box, words, before, motion) {
+	const shownWidth = running(motion.glide) ? box.getBoundingClientRect().width : before.width;
+	const style = getComputedStyle(words);
+	const shown = running(motion.rise) ? {
+		opacity: style.opacity,
+		transform: style.transform,
+		filter: style.filter
+	} : IN_PLACE;
+	motion.glide?.cancel();
+	motion.rise?.cancel();
+	leave(box, before.words, shownWidth, shown);
+	motion.rise = words.animate([{
+		opacity: 0,
+		transform: "translateY(70%)",
+		filter: "blur(3px)"
+	}, IN_PLACE], {
+		duration: ROLL_MS,
+		easing: EASE
+	});
+	const width = box.offsetWidth;
+	if (width !== shownWidth) motion.glide = box.animate([{ width: `${shownWidth}px` }, { width: `${width}px` }], {
+		duration: ROLL_MS,
+		easing: EASE
+	});
+	return width;
+}
+/**
+* What a line says, moved like a thought changing: new words rise into place while the old ones rise and blur
+* away, and the box glides to the new width. Only a line the reader `watched` being written moves: it writes its
+* first words in from the left, and rolls each time `words`, the key of what is said, changes.
+*/
+function useRollingWords(box, said, words, watched) {
+	const before = useRef(void 0);
+	const motion = useRef({});
+	useLayoutEffect(() => {
+		if (!watched) return;
+		const boxElement = box.current;
+		const saidElement = said.current;
+		const previous = before.current;
+		if (!boxElement || !saidElement || previous?.key === words) return;
+		const clone = saidElement.cloneNode(true);
+		const moving = moves(saidElement);
+		if (moving && previous) {
+			before.current = {
+				key: words,
+				words: clone,
+				width: roll(boxElement, saidElement, previous, motion.current)
+			};
+			return;
+		}
+		if (moving) writeIn(saidElement);
+		before.current = {
+			key: words,
+			words: clone,
+			width: boxElement.offsetWidth
+		};
+	}, [
+		box,
+		said,
+		words,
+		watched
+	]);
+}
+export { useRollingWords };
+
+//# sourceMappingURL=use-rolling-words.es.js.map