@cossistant/react 0.0.29 → 0.0.30

package/primitives/avatar/avatar.js

@@ -18,7 +18,7 @@ const useAvatarContext = () => {
 * children so consumers can compose initials, images and status rings.
 */
 const Avatar = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false,...props }, ref) => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, ...props }, ref) => {
 		const [imageLoadingStatus, setImageLoadingStatus] = React$1.useState("idle");
 		const contextValue = React$1.useMemo(() => ({
 			imageLoadingStatus,

package/primitives/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":["React","contextValue: AvatarContextValue","state: AvatarState"],"sources":["../../../src/primitives/avatar/avatar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../../utils/use-render-element\";\n\ntype AvatarState = {\n\timageLoadingStatus: \"idle\" | \"loading\" | \"loaded\" | \"error\";\n};\n\nexport type AvatarProps = Omit<\n\tReact.HTMLAttributes<HTMLSpanElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\nexport interface AvatarContextValue extends AvatarState {\n\tonImageLoadingStatusChange: (\n\t\tstatus: AvatarState[\"imageLoadingStatus\"]\n\t) => void;\n}\n\nconst AvatarContext = React.createContext<AvatarContextValue | null>(null);\n\n/**\n * Consumer hook for the `Avatar` compound components. Throws when components are\n * rendered outside of the `Avatar` tree to surface integration errors early.\n */\nexport const useAvatarContext = () => {\n\tconst context = React.useContext(AvatarContext);\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"Avatar compound components cannot be rendered outside the Avatar component\"\n\t\t);\n\t}\n\treturn context;\n};\n\n/**\n * Root avatar wrapper that coordinates image loading state with fallback\n * children so consumers can compose initials, images and status rings.\n */\nexport const Avatar = (() => {\n\tconst Component = React.forwardRef<HTMLSpanElement, AvatarProps>(\n\t\t({ children, className, asChild = false, ...props }, ref) => {\n\t\t\tconst [imageLoadingStatus, setImageLoadingStatus] =\n\t\t\t\tReact.useState<AvatarState[\"imageLoadingStatus\"]>(\"idle\");\n\n\t\t\tconst contextValue: AvatarContextValue = React.useMemo(\n\t\t\t\t() => ({\n\t\t\t\t\timageLoadingStatus,\n\t\t\t\t\tonImageLoadingStatusChange: setImageLoadingStatus,\n\t\t\t\t}),\n\t\t\t\t[imageLoadingStatus]\n\t\t\t);\n\n\t\t\tconst state: AvatarState = {\n\t\t\t\timageLoadingStatus,\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\t<AvatarContext.Provider value={contextValue}>\n\t\t\t\t\t{useRenderElement(\n\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tasChild,\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tref,\n\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t...props,\n\t\t\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}\n\t\t\t\t\t)}\n\t\t\t\t</AvatarContext.Provider>\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"Avatar\";\n\treturn Component;\n})();\n"],"mappings":";;;;;AAsBA,MAAM,gBAAgBA,QAAM,cAAyC,KAAK;;;;;AAM1E,MAAa,yBAAyB;CACrC,MAAM,UAAUA,QAAM,WAAW,cAAc;AAC/C,KAAI,CAAC,QACJ,OAAM,IAAI,MACT,6EACA;AAEF,QAAO;;;;;;AAOR,MAAa,gBAAgB;CAC5B,MAAM,YAAYA,QAAM,YACtB,EAAE,UAAU,WAAW,UAAU,MAAO,GAAG,SAAS,QAAQ;EAC5D,MAAM,CAAC,oBAAoB,yBAC1BA,QAAM,SAA4C,OAAO;EAE1D,MAAMC,eAAmCD,QAAM,eACvC;GACN;GACA,4BAA4B;GAC5B,GACD,CAAC,mBAAmB,CACpB;EAED,MAAME,QAAqB,EAC1B,oBACA;AAED,SACC,oBAAC,cAAc;GAAS,OAAO;aAC7B,iBACA,OACA;IACC;IACA;IACA,EACD;IACC;IACA;IACA,OAAO;KACN,GAAG;KACH;KACA;IACD,CACD;IACuB;GAG3B;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}
+{"version":3,"file":"avatar.js","names":["React","contextValue: AvatarContextValue","state: AvatarState"],"sources":["../../../src/primitives/avatar/avatar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../../utils/use-render-element\";\n\ntype AvatarState = {\n\timageLoadingStatus: \"idle\" | \"loading\" | \"loaded\" | \"error\";\n};\n\nexport type AvatarProps = Omit<\n\tReact.HTMLAttributes<HTMLSpanElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\nexport interface AvatarContextValue extends AvatarState {\n\tonImageLoadingStatusChange: (\n\t\tstatus: AvatarState[\"imageLoadingStatus\"]\n\t) => void;\n}\n\nconst AvatarContext = React.createContext<AvatarContextValue | null>(null);\n\n/**\n * Consumer hook for the `Avatar` compound components. Throws when components are\n * rendered outside of the `Avatar` tree to surface integration errors early.\n */\nexport const useAvatarContext = () => {\n\tconst context = React.useContext(AvatarContext);\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"Avatar compound components cannot be rendered outside the Avatar component\"\n\t\t);\n\t}\n\treturn context;\n};\n\n/**\n * Root avatar wrapper that coordinates image loading state with fallback\n * children so consumers can compose initials, images and status rings.\n */\nexport const Avatar = (() => {\n\tconst Component = React.forwardRef<HTMLSpanElement, AvatarProps>(\n\t\t({ children, className, asChild = false, ...props }, ref) => {\n\t\t\tconst [imageLoadingStatus, setImageLoadingStatus] =\n\t\t\t\tReact.useState<AvatarState[\"imageLoadingStatus\"]>(\"idle\");\n\n\t\t\tconst contextValue: AvatarContextValue = React.useMemo(\n\t\t\t\t() => ({\n\t\t\t\t\timageLoadingStatus,\n\t\t\t\t\tonImageLoadingStatusChange: setImageLoadingStatus,\n\t\t\t\t}),\n\t\t\t\t[imageLoadingStatus]\n\t\t\t);\n\n\t\t\tconst state: AvatarState = {\n\t\t\t\timageLoadingStatus,\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\t<AvatarContext.Provider value={contextValue}>\n\t\t\t\t\t{useRenderElement(\n\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tasChild,\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tref,\n\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t...props,\n\t\t\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}\n\t\t\t\t\t)}\n\t\t\t\t</AvatarContext.Provider>\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"Avatar\";\n\treturn Component;\n})();\n"],"mappings":";;;;;AAsBA,MAAM,gBAAgBA,QAAM,cAAyC,KAAK;;;;;AAM1E,MAAa,yBAAyB;CACrC,MAAM,UAAUA,QAAM,WAAW,cAAc;AAC/C,KAAI,CAAC,QACJ,OAAM,IAAI,MACT,6EACA;AAEF,QAAO;;;;;;AAOR,MAAa,gBAAgB;CAC5B,MAAM,YAAYA,QAAM,YACtB,EAAE,UAAU,WAAW,UAAU,OAAO,GAAG,SAAS,QAAQ;EAC5D,MAAM,CAAC,oBAAoB,yBAC1BA,QAAM,SAA4C,OAAO;EAE1D,MAAMC,eAAmCD,QAAM,eACvC;GACN;GACA,4BAA4B;GAC5B,GACD,CAAC,mBAAmB,CACpB;EAED,MAAME,QAAqB,EAC1B,oBACA;AAED,SACC,oBAAC,cAAc;GAAS,OAAO;aAC7B,iBACA,OACA;IACC;IACA;IACA,EACD;IACC;IACA;IACA,OAAO;KACN,GAAG;KACH;KACA;IACD,CACD;IACuB;GAG3B;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}

package/primitives/avatar/fallback.js

@@ -14,7 +14,7 @@ const getInitials = (name) => {
 * Optional delay avoids flashes when images load instantly.
 */
 const AvatarFallback = (() => {
-	const Component = React$1.forwardRef(({ children, name = "", delayMs = 0, className, asChild = false,...props }, ref) => {
+	const Component = React$1.forwardRef(({ children, name = "", delayMs = 0, className, asChild = false, ...props }, ref) => {
 		const { imageLoadingStatus } = useAvatarContext();
 		const [canRender, setCanRender] = React$1.useState(delayMs === 0);
 		React$1.useEffect(() => {

package/primitives/avatar/fallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"fallback.js","names":["React","state: FallbackState"],"sources":["../../../src/primitives/avatar/fallback.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../../utils/use-render-element\";\nimport { useAvatarContext } from \"./avatar\";\n\ntype FallbackState = {\n\timageLoadingStatus: \"idle\" | \"loading\" | \"loaded\" | \"error\";\n\tinitials?: string;\n};\n\nexport type AvatarFallbackProps = Omit<\n\tReact.HTMLAttributes<HTMLSpanElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tname?: string;\n\tdelayMs?: number;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\nconst getInitials = (name: string): string => {\n\tconst names = name.trim().split(\" \");\n\tif (names.length === 0) {\n\t\treturn \"\";\n\t}\n\n\tif (names.length === 1) {\n\t\treturn names[0]?.charAt(0).toUpperCase() || \"\";\n\t}\n\n\tconst firstInitial = names[0]?.charAt(0) || \"\";\n\tconst lastInitial = names.at(-1)?.charAt(0) || \"\";\n\n\treturn (firstInitial + lastInitial).toUpperCase();\n};\n\n/**\n * Displays initials or custom content while the avatar image loads or fails.\n * Optional delay avoids flashes when images load instantly.\n */\nexport const AvatarFallback = (() => {\n\tconst Component = React.forwardRef<HTMLSpanElement, AvatarFallbackProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tname = \"\",\n\t\t\t\tdelayMs = 0,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst { imageLoadingStatus } = useAvatarContext();\n\t\t\tconst [canRender, setCanRender] = React.useState(delayMs === 0);\n\n\t\t\tReact.useEffect(() => {\n\t\t\t\tif (delayMs > 0) {\n\t\t\t\t\tconst timerId = window.setTimeout(() => setCanRender(true), delayMs);\n\t\t\t\t\treturn () => window.clearTimeout(timerId);\n\t\t\t\t}\n\t\t\t}, [delayMs]);\n\n\t\t\tconst initials = React.useMemo(() => {\n\t\t\t\tif (name) {\n\t\t\t\t\treturn getInitials(name);\n\t\t\t\t}\n\t\t\t\treturn \"\";\n\t\t\t}, [name]);\n\n\t\t\tconst state: FallbackState = {\n\t\t\t\timageLoadingStatus,\n\t\t\t\tinitials,\n\t\t\t};\n\n\t\t\tconst shouldRender =\n\t\t\t\tcanRender &&\n\t\t\t\timageLoadingStatus !== \"loaded\" &&\n\t\t\t\timageLoadingStatus !== \"loading\";\n\n\t\t\tconst content = children || initials;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"span\",\n\t\t\t\t{\n\t\t\t\t\tasChild,\n\t\t\t\t\tclassName,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tstate,\n\t\t\t\t\tenabled: shouldRender,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"AvatarFallback\";\n\treturn Component;\n})();\n"],"mappings":";;;;;AAoBA,MAAM,eAAe,SAAyB;CAC7C,MAAM,QAAQ,KAAK,MAAM,CAAC,MAAM,IAAI;AACpC,KAAI,MAAM,WAAW,EACpB,QAAO;AAGR,KAAI,MAAM,WAAW,EACpB,QAAO,MAAM,IAAI,OAAO,EAAE,CAAC,aAAa,IAAI;AAM7C,UAHqB,MAAM,IAAI,OAAO,EAAE,IAAI,OACxB,MAAM,GAAG,GAAG,EAAE,OAAO,EAAE,IAAI,KAEX,aAAa;;;;;;AAOlD,MAAa,wBAAwB;CACpC,MAAM,YAAYA,QAAM,YAEtB,EACC,UACA,OAAO,IACP,UAAU,GACV,WACA,UAAU,MACV,GAAG,SAEJ,QACI;EACJ,MAAM,EAAE,uBAAuB,kBAAkB;EACjD,MAAM,CAAC,WAAW,gBAAgBA,QAAM,SAAS,YAAY,EAAE;AAE/D,UAAM,gBAAgB;AACrB,OAAI,UAAU,GAAG;IAChB,MAAM,UAAU,OAAO,iBAAiB,aAAa,KAAK,EAAE,QAAQ;AACpE,iBAAa,OAAO,aAAa,QAAQ;;KAExC,CAAC,QAAQ,CAAC;EAEb,MAAM,WAAWA,QAAM,cAAc;AACpC,OAAI,KACH,QAAO,YAAY,KAAK;AAEzB,UAAO;KACL,CAAC,KAAK,CAAC;EAEV,MAAMC,QAAuB;GAC5B;GACA;GACA;EAED,MAAM,eACL,aACA,uBAAuB,YACvB,uBAAuB;EAExB,MAAM,UAAU,YAAY;AAE5B,SAAO,iBACN,QACA;GACC;GACA;GACA,EACD;GACC;GACA;GACA,SAAS;GACT,OAAO;IACN,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}
+{"version":3,"file":"fallback.js","names":["React","state: FallbackState"],"sources":["../../../src/primitives/avatar/fallback.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../../utils/use-render-element\";\nimport { useAvatarContext } from \"./avatar\";\n\ntype FallbackState = {\n\timageLoadingStatus: \"idle\" | \"loading\" | \"loaded\" | \"error\";\n\tinitials?: string;\n};\n\nexport type AvatarFallbackProps = Omit<\n\tReact.HTMLAttributes<HTMLSpanElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tname?: string;\n\tdelayMs?: number;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\nconst getInitials = (name: string): string => {\n\tconst names = name.trim().split(\" \");\n\tif (names.length === 0) {\n\t\treturn \"\";\n\t}\n\n\tif (names.length === 1) {\n\t\treturn names[0]?.charAt(0).toUpperCase() || \"\";\n\t}\n\n\tconst firstInitial = names[0]?.charAt(0) || \"\";\n\tconst lastInitial = names.at(-1)?.charAt(0) || \"\";\n\n\treturn (firstInitial + lastInitial).toUpperCase();\n};\n\n/**\n * Displays initials or custom content while the avatar image loads or fails.\n * Optional delay avoids flashes when images load instantly.\n */\nexport const AvatarFallback = (() => {\n\tconst Component = React.forwardRef<HTMLSpanElement, AvatarFallbackProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tname = \"\",\n\t\t\t\tdelayMs = 0,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst { imageLoadingStatus } = useAvatarContext();\n\t\t\tconst [canRender, setCanRender] = React.useState(delayMs === 0);\n\n\t\t\tReact.useEffect(() => {\n\t\t\t\tif (delayMs > 0) {\n\t\t\t\t\tconst timerId = window.setTimeout(() => setCanRender(true), delayMs);\n\t\t\t\t\treturn () => window.clearTimeout(timerId);\n\t\t\t\t}\n\t\t\t}, [delayMs]);\n\n\t\t\tconst initials = React.useMemo(() => {\n\t\t\t\tif (name) {\n\t\t\t\t\treturn getInitials(name);\n\t\t\t\t}\n\t\t\t\treturn \"\";\n\t\t\t}, [name]);\n\n\t\t\tconst state: FallbackState = {\n\t\t\t\timageLoadingStatus,\n\t\t\t\tinitials,\n\t\t\t};\n\n\t\t\tconst shouldRender =\n\t\t\t\tcanRender &&\n\t\t\t\timageLoadingStatus !== \"loaded\" &&\n\t\t\t\timageLoadingStatus !== \"loading\";\n\n\t\t\tconst content = children || initials;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"span\",\n\t\t\t\t{\n\t\t\t\t\tasChild,\n\t\t\t\t\tclassName,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tstate,\n\t\t\t\t\tenabled: shouldRender,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"AvatarFallback\";\n\treturn Component;\n})();\n"],"mappings":";;;;;AAoBA,MAAM,eAAe,SAAyB;CAC7C,MAAM,QAAQ,KAAK,MAAM,CAAC,MAAM,IAAI;AACpC,KAAI,MAAM,WAAW,EACpB,QAAO;AAGR,KAAI,MAAM,WAAW,EACpB,QAAO,MAAM,IAAI,OAAO,EAAE,CAAC,aAAa,IAAI;AAM7C,UAHqB,MAAM,IAAI,OAAO,EAAE,IAAI,OACxB,MAAM,GAAG,GAAG,EAAE,OAAO,EAAE,IAAI,KAEX,aAAa;;;;;;AAOlD,MAAa,wBAAwB;CACpC,MAAM,YAAYA,QAAM,YAEtB,EACC,UACA,OAAO,IACP,UAAU,GACV,WACA,UAAU,OACV,GAAG,SAEJ,QACI;EACJ,MAAM,EAAE,uBAAuB,kBAAkB;EACjD,MAAM,CAAC,WAAW,gBAAgBA,QAAM,SAAS,YAAY,EAAE;AAE/D,UAAM,gBAAgB;AACrB,OAAI,UAAU,GAAG;IAChB,MAAM,UAAU,OAAO,iBAAiB,aAAa,KAAK,EAAE,QAAQ;AACpE,iBAAa,OAAO,aAAa,QAAQ;;KAExC,CAAC,QAAQ,CAAC;EAEb,MAAM,WAAWA,QAAM,cAAc;AACpC,OAAI,KACH,QAAO,YAAY,KAAK;AAEzB,UAAO;KACL,CAAC,KAAK,CAAC;EAEV,MAAMC,QAAuB;GAC5B;GACA;GACA;EAED,MAAM,eACL,aACA,uBAAuB,YACvB,uBAAuB;EAExB,MAAM,UAAU,YAAY;AAE5B,SAAO,iBACN,QACA;GACC;GACA;GACA,EACD;GACC;GACA;GACA,SAAS;GACT,OAAO;IACN,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}

package/primitives/avatar/image.js

@@ -8,7 +8,7 @@ import * as React$1 from "react";
 * so fallbacks know when to display.
 */
 const AvatarImage = (() => {
-	const Component = React$1.forwardRef(({ src, alt = "", className, asChild = false, onLoadingStatusChange,...props }, ref) => {
+	const Component = React$1.forwardRef(({ src, alt = "", className, asChild = false, onLoadingStatusChange, ...props }, ref) => {
 		const { imageLoadingStatus, onImageLoadingStatusChange } = useAvatarContext();
 		const imageRef = React$1.useRef(null);
 		React$1.useImperativeHandle(ref, () => imageRef.current);

package/primitives/avatar/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","names":["React"],"sources":["../../../src/primitives/avatar/image.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../../utils/use-render-element\";\nimport { useAvatarContext } from \"./avatar\";\n\ntype ImageState = {\n\timageLoadingStatus: \"idle\" | \"loading\" | \"loaded\" | \"error\";\n};\n\nexport type AvatarImageProps = Omit<\n\tReact.ImgHTMLAttributes<HTMLImageElement>,\n\t\"src\" | \"alt\"\n> & {\n\tsrc: string;\n\talt?: string;\n\tasChild?: boolean;\n\tclassName?: string;\n\tonLoadingStatusChange?: (status: ImageState[\"imageLoadingStatus\"]) => void;\n};\n\n/**\n * Controlled `<img>` that syncs its loading status back to the avatar context\n * so fallbacks know when to display.\n */\nexport const AvatarImage = (() => {\n\tconst Component = React.forwardRef<HTMLImageElement, AvatarImageProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tsrc,\n\t\t\t\talt = \"\",\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\tonLoadingStatusChange,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst { imageLoadingStatus, onImageLoadingStatusChange } =\n\t\t\t\tuseAvatarContext();\n\n\t\t\tconst imageRef = React.useRef<HTMLImageElement>(null);\n\t\t\t// biome-ignore lint/style/noNonNullAssertion: ok\n\t\t\tReact.useImperativeHandle(ref, () => imageRef.current!);\n\n\t\t\tconst updateImageLoadingStatus = React.useCallback(\n\t\t\t\t(status: ImageState[\"imageLoadingStatus\"]) => {\n\t\t\t\t\tonImageLoadingStatusChange(status);\n\t\t\t\t\tonLoadingStatusChange?.(status);\n\t\t\t\t},\n\t\t\t\t[onImageLoadingStatusChange, onLoadingStatusChange]\n\t\t\t);\n\n\t\t\tReact.useLayoutEffect(() => {\n\t\t\t\tif (!src) {\n\t\t\t\t\tupdateImageLoadingStatus(\"error\");\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tlet isMounted = true;\n\t\t\t\tconst image = new Image();\n\n\t\t\t\tconst updateStatus = (status: ImageState[\"imageLoadingStatus\"]) => {\n\t\t\t\t\tif (!isMounted) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tupdateImageLoadingStatus(status);\n\t\t\t\t};\n\n\t\t\t\tupdateStatus(\"loading\");\n\n\t\t\t\timage.onload = () => updateStatus(\"loaded\");\n\t\t\t\timage.onerror = () => updateStatus(\"error\");\n\t\t\t\timage.src = src;\n\n\t\t\t\treturn () => {\n\t\t\t\t\tisMounted = false;\n\t\t\t\t};\n\t\t\t}, [src, updateImageLoadingStatus]);\n\n\t\t\tconst state: ImageState = {\n\t\t\t\timageLoadingStatus,\n\t\t\t};\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"img\",\n\t\t\t\t{\n\t\t\t\t\tasChild,\n\t\t\t\t\tclassName,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref: imageRef,\n\t\t\t\t\tstate,\n\t\t\t\t\tenabled: imageLoadingStatus === \"loaded\",\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tsrc,\n\t\t\t\t\t\talt,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"AvatarImage\";\n\treturn Component;\n})();\n"],"mappings":";;;;;;;;;AAuBA,MAAa,qBAAqB;CACjC,MAAM,YAAYA,QAAM,YAEtB,EACC,KACA,MAAM,IACN,WACA,UAAU,OACV,sBACA,GAAG,SAEJ,QACI;EACJ,MAAM,EAAE,oBAAoB,+BAC3B,kBAAkB;EAEnB,MAAM,WAAWA,QAAM,OAAyB,KAAK;AAErD,UAAM,oBAAoB,WAAW,SAAS,QAAS;EAEvD,MAAM,2BAA2BA,QAAM,aACrC,WAA6C;AAC7C,8BAA2B,OAAO;AAClC,2BAAwB,OAAO;KAEhC,CAAC,4BAA4B,sBAAsB,CACnD;AAED,UAAM,sBAAsB;AAC3B,OAAI,CAAC,KAAK;AACT,6BAAyB,QAAQ;AACjC;;GAGD,IAAI,YAAY;GAChB,MAAM,QAAQ,IAAI,OAAO;GAEzB,MAAM,gBAAgB,WAA6C;AAClE,QAAI,CAAC,UACJ;AAED,6BAAyB,OAAO;;AAGjC,gBAAa,UAAU;AAEvB,SAAM,eAAe,aAAa,SAAS;AAC3C,SAAM,gBAAgB,aAAa,QAAQ;AAC3C,SAAM,MAAM;AAEZ,gBAAa;AACZ,gBAAY;;KAEX,CAAC,KAAK,yBAAyB,CAAC;AAMnC,SAAO,iBACN,OACA;GACC;GACA;GACA,EACD;GACC,KAAK;GACL,OAZwB,EACzB,oBACA;GAWC,SAAS,uBAAuB;GAChC,OAAO;IACN,GAAG;IACH;IACA;IACA;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}
+{"version":3,"file":"image.js","names":["React"],"sources":["../../../src/primitives/avatar/image.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../../utils/use-render-element\";\nimport { useAvatarContext } from \"./avatar\";\n\ntype ImageState = {\n\timageLoadingStatus: \"idle\" | \"loading\" | \"loaded\" | \"error\";\n};\n\nexport type AvatarImageProps = Omit<\n\tReact.ImgHTMLAttributes<HTMLImageElement>,\n\t\"src\" | \"alt\"\n> & {\n\tsrc: string;\n\talt?: string;\n\tasChild?: boolean;\n\tclassName?: string;\n\tonLoadingStatusChange?: (status: ImageState[\"imageLoadingStatus\"]) => void;\n};\n\n/**\n * Controlled `<img>` that syncs its loading status back to the avatar context\n * so fallbacks know when to display.\n */\nexport const AvatarImage = (() => {\n\tconst Component = React.forwardRef<HTMLImageElement, AvatarImageProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tsrc,\n\t\t\t\talt = \"\",\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\tonLoadingStatusChange,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst { imageLoadingStatus, onImageLoadingStatusChange } =\n\t\t\t\tuseAvatarContext();\n\n\t\t\tconst imageRef = React.useRef<HTMLImageElement>(null);\n\t\t\t// biome-ignore lint/style/noNonNullAssertion: ok\n\t\t\tReact.useImperativeHandle(ref, () => imageRef.current!);\n\n\t\t\tconst updateImageLoadingStatus = React.useCallback(\n\t\t\t\t(status: ImageState[\"imageLoadingStatus\"]) => {\n\t\t\t\t\tonImageLoadingStatusChange(status);\n\t\t\t\t\tonLoadingStatusChange?.(status);\n\t\t\t\t},\n\t\t\t\t[onImageLoadingStatusChange, onLoadingStatusChange]\n\t\t\t);\n\n\t\t\tReact.useLayoutEffect(() => {\n\t\t\t\tif (!src) {\n\t\t\t\t\tupdateImageLoadingStatus(\"error\");\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tlet isMounted = true;\n\t\t\t\tconst image = new Image();\n\n\t\t\t\tconst updateStatus = (status: ImageState[\"imageLoadingStatus\"]) => {\n\t\t\t\t\tif (!isMounted) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tupdateImageLoadingStatus(status);\n\t\t\t\t};\n\n\t\t\t\tupdateStatus(\"loading\");\n\n\t\t\t\timage.onload = () => updateStatus(\"loaded\");\n\t\t\t\timage.onerror = () => updateStatus(\"error\");\n\t\t\t\timage.src = src;\n\n\t\t\t\treturn () => {\n\t\t\t\t\tisMounted = false;\n\t\t\t\t};\n\t\t\t}, [src, updateImageLoadingStatus]);\n\n\t\t\tconst state: ImageState = {\n\t\t\t\timageLoadingStatus,\n\t\t\t};\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"img\",\n\t\t\t\t{\n\t\t\t\t\tasChild,\n\t\t\t\t\tclassName,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref: imageRef,\n\t\t\t\t\tstate,\n\t\t\t\t\tenabled: imageLoadingStatus === \"loaded\",\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tsrc,\n\t\t\t\t\t\talt,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"AvatarImage\";\n\treturn Component;\n})();\n"],"mappings":";;;;;;;;;AAuBA,MAAa,qBAAqB;CACjC,MAAM,YAAYA,QAAM,YAEtB,EACC,KACA,MAAM,IACN,WACA,UAAU,OACV,uBACA,GAAG,SAEJ,QACI;EACJ,MAAM,EAAE,oBAAoB,+BAC3B,kBAAkB;EAEnB,MAAM,WAAWA,QAAM,OAAyB,KAAK;AAErD,UAAM,oBAAoB,WAAW,SAAS,QAAS;EAEvD,MAAM,2BAA2BA,QAAM,aACrC,WAA6C;AAC7C,8BAA2B,OAAO;AAClC,2BAAwB,OAAO;KAEhC,CAAC,4BAA4B,sBAAsB,CACnD;AAED,UAAM,sBAAsB;AAC3B,OAAI,CAAC,KAAK;AACT,6BAAyB,QAAQ;AACjC;;GAGD,IAAI,YAAY;GAChB,MAAM,QAAQ,IAAI,OAAO;GAEzB,MAAM,gBAAgB,WAA6C;AAClE,QAAI,CAAC,UACJ;AAED,6BAAyB,OAAO;;AAGjC,gBAAa,UAAU;AAEvB,SAAM,eAAe,aAAa,SAAS;AAC3C,SAAM,gBAAgB,aAAa,QAAQ;AAC3C,SAAM,MAAM;AAEZ,gBAAa;AACZ,gBAAY;;KAEX,CAAC,KAAK,yBAAyB,CAAC;AAMnC,SAAO,iBACN,OACA;GACC;GACA;GACA,EACD;GACC,KAAK;GACL,OAZwB,EACzB,oBACA;GAWC,SAAS,uBAAuB;GAChC,OAAO;IACN,GAAG;IACH;IACA;IACA;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}

package/primitives/button.js

@@ -8,7 +8,7 @@ import * as React$1 from "react";
 * semantics.
 */
 const Button = (() => {
-	const Component = React$1.forwardRef(({ className, asChild = false,...props }, ref) => useRenderElement("button", {
+	const Component = React$1.forwardRef(({ className, asChild = false, ...props }, ref) => useRenderElement("button", {
 		className,
 		asChild
 	}, {

package/primitives/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["React"],"sources":["../../src/primitives/button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Thin wrapper over a `<button>` that supports `asChild` composition so the\n * primitives can be slotted into external design systems without losing\n * semantics.\n */\nexport const Button = (() => {\n\tconst Component = React.forwardRef<HTMLButtonElement, ButtonProps>(\n\t\t({ className, asChild = false, ...props }, ref) =>\n\t\t\tuseRenderElement(\n\t\t\t\t\"button\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\ttype: \"button\",\n\t\t\t\t\t\t...props,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t)\n\t);\n\n\tComponent.displayName = \"Button\";\n\treturn Component;\n})();\n"],"mappings":";;;;;;;;;AAaA,MAAa,gBAAgB;CAC5B,MAAM,YAAYA,QAAM,YACtB,EAAE,WAAW,UAAU,MAAO,GAAG,SAAS,QAC1C,iBACC,UACA;EACC;EACA;EACA,EACD;EACC;EACA,OAAO;GACN,MAAM;GACN,GAAG;GACH;EACD,CACD,CACF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}
+{"version":3,"file":"button.js","names":["React"],"sources":["../../src/primitives/button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Thin wrapper over a `<button>` that supports `asChild` composition so the\n * primitives can be slotted into external design systems without losing\n * semantics.\n */\nexport const Button = (() => {\n\tconst Component = React.forwardRef<HTMLButtonElement, ButtonProps>(\n\t\t({ className, asChild = false, ...props }, ref) =>\n\t\t\tuseRenderElement(\n\t\t\t\t\"button\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\ttype: \"button\",\n\t\t\t\t\t\t...props,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t)\n\t);\n\n\tComponent.displayName = \"Button\";\n\treturn Component;\n})();\n"],"mappings":";;;;;;;;;AAaA,MAAa,gBAAgB;CAC5B,MAAM,YAAYA,QAAM,YACtB,EAAE,WAAW,UAAU,OAAO,GAAG,SAAS,QAC1C,iBACC,UACA;EACC;EACA;EACA,EACD;EACC;EACA,OAAO;GACN,MAAM;GACN,GAAG;GACH;EACD,CACD,CACF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}

package/primitives/conversation-timeline.d.ts

@@ -1,4 +1,4 @@
-import { TimelineItem } from "../timeline-item.js";
+import { TimelineItem } from "../packages/types/src/api/timeline-item.js";
 import * as React$1 from "react";
 
 //#region src/primitives/conversation-timeline.d.ts

package/primitives/conversation-timeline.js

@@ -18,7 +18,7 @@ function getLastItemKey(items) {
 * pagination callbacks for displaying timeline items (messages, events, etc.).
 */
 const ConversationTimeline = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false, items = [], isLoading = false, hasMore = false, autoScroll = true, onScrollEnd, onScrollStart,...props }, ref) => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, items = [], isLoading = false, hasMore = false, autoScroll = true, onScrollEnd, onScrollStart, ...props }, ref) => {
 		const internalRef = React$1.useRef(null);
 		const { ref: scrollMaskRef, style: scrollMaskStyle } = useScrollMask({
 			maskHeight: "54px",
@@ -108,7 +108,7 @@ const ConversationTimeline = (() => {
 * padding, backgrounds or transitions without touching the core timeline logic.
 */
 const ConversationTimelineContainer = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false,...props }, ref) => useRenderElement("div", {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, ...props }, ref) => useRenderElement("div", {
 		className,
 		asChild
 	}, {
@@ -126,7 +126,7 @@ const ConversationTimelineContainer = (() => {
 * skeletons or shimmer states without reimplementing ARIA wiring.
 */
 const ConversationTimelineLoading = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false,...props }, ref) => useRenderElement("div", {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, ...props }, ref) => useRenderElement("div", {
 		className,
 		asChild
 	}, {
@@ -146,7 +146,7 @@ const ConversationTimelineLoading = (() => {
 * region so screen readers announce the empty state.
 */
 const ConversationTimelineEmpty = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false,...props }, ref) => useRenderElement("div", {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, ...props }, ref) => useRenderElement("div", {
 		className,
 		asChild
 	}, {

package/primitives/conversation-timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-timeline.js","names":["React","renderProps: ConversationTimelineRenderProps"],"sources":["../../src/primitives/conversation-timeline.tsx"],"sourcesContent":["import type { TimelineItem as TimelineItemType } from \"@cossistant/types/api/timeline-item\";\nimport * as React from \"react\";\nimport { useScrollMask } from \"../hooks/use-scroll-mask\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\n/**\n * High-level state of the timeline handed to render-prop children so they can show\n * skeletons, empty states or pagination affordances.\n */\nexport type ConversationTimelineRenderProps = {\n\titemCount: number;\n\tisLoading?: boolean;\n\thasMore?: boolean;\n\tisEmpty: boolean;\n};\n\nexport type ConversationTimelineProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: ConversationTimelineRenderProps) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\titems?: TimelineItemType[];\n\tisLoading?: boolean;\n\thasMore?: boolean;\n\tautoScroll?: boolean;\n\tonScrollEnd?: () => void;\n\tonScrollStart?: () => void;\n};\n\nconst BOTTOM_THRESHOLD_PX = 12;\nconst TOP_THRESHOLD_PX = 2;\n/** Grace period after mount where all scrolls are instant (avoids animation on first render) */\nconst INITIAL_SCROLL_GRACE_MS = 300;\n\nfunction getLastItemKey(items: TimelineItemType[]): string | number | null {\n\tif (items.length === 0) {\n\t\treturn null;\n\t}\n\n\tconst lastItem = items.at(-1);\n\n\tif (lastItem?.id) {\n\t\treturn lastItem.id;\n\t}\n\n\treturn lastItem?.createdAt ?? null;\n}\n\n/**\n * Scrollable conversation timeline that wires auto-scroll behaviour, live-region semantics and\n * pagination callbacks for displaying timeline items (messages, events, etc.).\n */\nexport const ConversationTimeline = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, ConversationTimelineProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\titems = [],\n\t\t\t\tisLoading = false,\n\t\t\t\thasMore = false,\n\t\t\t\tautoScroll = true,\n\t\t\t\tonScrollEnd,\n\t\t\t\tonScrollStart,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst internalRef = React.useRef<HTMLDivElement>(null);\n\t\t\tconst { ref: scrollMaskRef, style: scrollMaskStyle } = useScrollMask({\n\t\t\t\tmaskHeight: \"54px\",\n\t\t\t\tscrollbarWidth: \"8px\",\n\t\t\t\ttopThreshold: TOP_THRESHOLD_PX,\n\t\t\t\tbottomThreshold: BOTTOM_THRESHOLD_PX,\n\t\t\t});\n\n\t\t\tconst setRefs = React.useCallback(\n\t\t\t\t(node: HTMLDivElement | null) => {\n\t\t\t\t\tinternalRef.current = node;\n\t\t\t\t\t(\n\t\t\t\t\t\tscrollMaskRef as React.MutableRefObject<HTMLDivElement | null>\n\t\t\t\t\t).current = node;\n\t\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\t\tref(node);\n\t\t\t\t\t} else if (ref) {\n\t\t\t\t\t\t(ref as React.MutableRefObject<HTMLDivElement | null>).current =\n\t\t\t\t\t\t\tnode;\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t[ref, scrollMaskRef]\n\t\t\t);\n\n\t\t\t// Track mount time for grace period (instant scroll during initial load)\n\t\t\tconst mountTimeRef = React.useRef(Date.now());\n\t\t\tconst previousItemCount = React.useRef(items.length);\n\t\t\tconst previousLastItemKey = React.useRef<string | number | null>(\n\t\t\t\tgetLastItemKey(items)\n\t\t\t);\n\t\t\tconst isPinnedToBottom = React.useRef(true);\n\t\t\tconst isAtTop = React.useRef(true);\n\n\t\t\tconst renderProps: ConversationTimelineRenderProps = {\n\t\t\t\titemCount: items.length,\n\t\t\t\tisLoading,\n\t\t\t\thasMore,\n\t\t\t\tisEmpty: items.length === 0,\n\t\t\t};\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\" ? children(renderProps) : children;\n\n\t\t\tconst lastItemKey = getLastItemKey(items);\n\n\t\t\t// Auto-scroll to bottom when new timeline items are added\n\t\t\tReact.useEffect(() => {\n\t\t\t\tconst element = internalRef.current;\n\n\t\t\t\tif (!(element && autoScroll)) {\n\t\t\t\t\tpreviousItemCount.current = items.length;\n\t\t\t\t\tpreviousLastItemKey.current = lastItemKey;\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst hasNewItems = items.length > previousItemCount.current;\n\t\t\t\tconst itemsRemoved = items.length < previousItemCount.current;\n\t\t\t\tconst appendedNewItem =\n\t\t\t\t\thasNewItems &&\n\t\t\t\t\tlastItemKey !== null &&\n\t\t\t\t\tlastItemKey !== previousLastItemKey.current;\n\t\t\t\tconst replacedLastItem =\n\t\t\t\t\t!hasNewItems &&\n\t\t\t\t\tlastItemKey !== null &&\n\t\t\t\t\tlastItemKey !== previousLastItemKey.current;\n\n\t\t\t\tconst isWithinGracePeriod =\n\t\t\t\t\tDate.now() - mountTimeRef.current < INITIAL_SCROLL_GRACE_MS;\n\n\t\t\t\tconst shouldSnapToBottom =\n\t\t\t\t\tisWithinGracePeriod ||\n\t\t\t\t\t(itemsRemoved && isPinnedToBottom.current) ||\n\t\t\t\t\t(appendedNewItem && isPinnedToBottom.current) ||\n\t\t\t\t\t(replacedLastItem && isPinnedToBottom.current);\n\n\t\t\t\tif (shouldSnapToBottom) {\n\t\t\t\t\t// Instant scroll during grace period, smooth scroll after\n\t\t\t\t\tif (isWithinGracePeriod) {\n\t\t\t\t\t\telement.scrollTop = element.scrollHeight;\n\t\t\t\t\t} else {\n\t\t\t\t\t\telement.scrollTo({ top: element.scrollHeight, behavior: \"smooth\" });\n\t\t\t\t\t}\n\t\t\t\t\tisPinnedToBottom.current = true;\n\t\t\t\t\tisAtTop.current = false;\n\t\t\t\t}\n\n\t\t\t\tpreviousItemCount.current = items.length;\n\t\t\t\tpreviousLastItemKey.current = lastItemKey;\n\t\t\t}, [autoScroll, items.length, lastItemKey]);\n\n\t\t\t// Handle scroll events for infinite scrolling\n\t\t\tconst handleScroll = React.useCallback(\n\t\t\t\t(e: React.UIEvent<HTMLDivElement>) => {\n\t\t\t\t\tconst element = e.currentTarget;\n\t\t\t\t\tconst { scrollTop, scrollHeight, clientHeight } = element;\n\n\t\t\t\t\tconst distanceFromBottom = scrollHeight - scrollTop - clientHeight;\n\t\t\t\t\tconst pinnedNow = distanceFromBottom <= BOTTOM_THRESHOLD_PX;\n\t\t\t\t\tif (pinnedNow && !isPinnedToBottom.current) {\n\t\t\t\t\t\tonScrollEnd?.();\n\t\t\t\t\t}\n\t\t\t\t\tisPinnedToBottom.current = pinnedNow;\n\n\t\t\t\t\tconst atTop = scrollTop <= TOP_THRESHOLD_PX;\n\t\t\t\t\tif (atTop && !isAtTop.current) {\n\t\t\t\t\t\tonScrollStart?.();\n\t\t\t\t\t}\n\t\t\t\t\tisAtTop.current = atTop;\n\t\t\t\t},\n\t\t\t\t[onScrollStart, onScrollEnd]\n\t\t\t);\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref: setRefs,\n\t\t\t\t\tstate: renderProps,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\trole: \"log\",\n\t\t\t\t\t\t\"aria-label\": \"Conversation timeline\",\n\t\t\t\t\t\t\"aria-live\": \"polite\",\n\t\t\t\t\t\t\"aria-relevant\": \"additions\",\n\t\t\t\t\t\tonScroll: handleScroll,\n\t\t\t\t\t\tstyle: scrollMaskStyle,\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"ConversationTimeline\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineContainerProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Wrapper around the scrollable timeline giving consumers an easy hook to add\n * padding, backgrounds or transitions without touching the core timeline logic.\n */\nexport const ConversationTimelineContainer = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineContainerProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineContainer\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineLoadingProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Accessible status region for loading more timeline items. Lets host apps render\n * skeletons or shimmer states without reimplementing ARIA wiring.\n */\nexport const ConversationTimelineLoading = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineLoadingProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\trole: \"status\",\n\t\t\t\t\t\"aria-label\": \"Loading timeline items\",\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineLoading\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineEmptyProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Placeholder state rendered when no timeline items are present. Uses a polite status\n * region so screen readers announce the empty state.\n */\nexport const ConversationTimelineEmpty = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineEmptyProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\trole: \"status\",\n\t\t\t\t\t\"aria-label\": \"No timeline items\",\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineEmpty\";\n\treturn Component;\n})();\n"],"mappings":"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"}
+{"version":3,"file":"conversation-timeline.js","names":["React","renderProps: ConversationTimelineRenderProps"],"sources":["../../src/primitives/conversation-timeline.tsx"],"sourcesContent":["import type { TimelineItem as TimelineItemType } from \"@cossistant/types/api/timeline-item\";\nimport * as React from \"react\";\nimport { useScrollMask } from \"../hooks/use-scroll-mask\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\n/**\n * High-level state of the timeline handed to render-prop children so they can show\n * skeletons, empty states or pagination affordances.\n */\nexport type ConversationTimelineRenderProps = {\n\titemCount: number;\n\tisLoading?: boolean;\n\thasMore?: boolean;\n\tisEmpty: boolean;\n};\n\nexport type ConversationTimelineProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: ConversationTimelineRenderProps) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\titems?: TimelineItemType[];\n\tisLoading?: boolean;\n\thasMore?: boolean;\n\tautoScroll?: boolean;\n\tonScrollEnd?: () => void;\n\tonScrollStart?: () => void;\n};\n\nconst BOTTOM_THRESHOLD_PX = 12;\nconst TOP_THRESHOLD_PX = 2;\n/** Grace period after mount where all scrolls are instant (avoids animation on first render) */\nconst INITIAL_SCROLL_GRACE_MS = 300;\n\nfunction getLastItemKey(items: TimelineItemType[]): string | number | null {\n\tif (items.length === 0) {\n\t\treturn null;\n\t}\n\n\tconst lastItem = items.at(-1);\n\n\tif (lastItem?.id) {\n\t\treturn lastItem.id;\n\t}\n\n\treturn lastItem?.createdAt ?? null;\n}\n\n/**\n * Scrollable conversation timeline that wires auto-scroll behaviour, live-region semantics and\n * pagination callbacks for displaying timeline items (messages, events, etc.).\n */\nexport const ConversationTimeline = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, ConversationTimelineProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\titems = [],\n\t\t\t\tisLoading = false,\n\t\t\t\thasMore = false,\n\t\t\t\tautoScroll = true,\n\t\t\t\tonScrollEnd,\n\t\t\t\tonScrollStart,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst internalRef = React.useRef<HTMLDivElement>(null);\n\t\t\tconst { ref: scrollMaskRef, style: scrollMaskStyle } = useScrollMask({\n\t\t\t\tmaskHeight: \"54px\",\n\t\t\t\tscrollbarWidth: \"8px\",\n\t\t\t\ttopThreshold: TOP_THRESHOLD_PX,\n\t\t\t\tbottomThreshold: BOTTOM_THRESHOLD_PX,\n\t\t\t});\n\n\t\t\tconst setRefs = React.useCallback(\n\t\t\t\t(node: HTMLDivElement | null) => {\n\t\t\t\t\tinternalRef.current = node;\n\t\t\t\t\t(\n\t\t\t\t\t\tscrollMaskRef as React.MutableRefObject<HTMLDivElement | null>\n\t\t\t\t\t).current = node;\n\t\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\t\tref(node);\n\t\t\t\t\t} else if (ref) {\n\t\t\t\t\t\t(ref as React.MutableRefObject<HTMLDivElement | null>).current =\n\t\t\t\t\t\t\tnode;\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t[ref, scrollMaskRef]\n\t\t\t);\n\n\t\t\t// Track mount time for grace period (instant scroll during initial load)\n\t\t\tconst mountTimeRef = React.useRef(Date.now());\n\t\t\tconst previousItemCount = React.useRef(items.length);\n\t\t\tconst previousLastItemKey = React.useRef<string | number | null>(\n\t\t\t\tgetLastItemKey(items)\n\t\t\t);\n\t\t\tconst isPinnedToBottom = React.useRef(true);\n\t\t\tconst isAtTop = React.useRef(true);\n\n\t\t\tconst renderProps: ConversationTimelineRenderProps = {\n\t\t\t\titemCount: items.length,\n\t\t\t\tisLoading,\n\t\t\t\thasMore,\n\t\t\t\tisEmpty: items.length === 0,\n\t\t\t};\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\" ? children(renderProps) : children;\n\n\t\t\tconst lastItemKey = getLastItemKey(items);\n\n\t\t\t// Auto-scroll to bottom when new timeline items are added\n\t\t\tReact.useEffect(() => {\n\t\t\t\tconst element = internalRef.current;\n\n\t\t\t\tif (!(element && autoScroll)) {\n\t\t\t\t\tpreviousItemCount.current = items.length;\n\t\t\t\t\tpreviousLastItemKey.current = lastItemKey;\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst hasNewItems = items.length > previousItemCount.current;\n\t\t\t\tconst itemsRemoved = items.length < previousItemCount.current;\n\t\t\t\tconst appendedNewItem =\n\t\t\t\t\thasNewItems &&\n\t\t\t\t\tlastItemKey !== null &&\n\t\t\t\t\tlastItemKey !== previousLastItemKey.current;\n\t\t\t\tconst replacedLastItem =\n\t\t\t\t\t!hasNewItems &&\n\t\t\t\t\tlastItemKey !== null &&\n\t\t\t\t\tlastItemKey !== previousLastItemKey.current;\n\n\t\t\t\tconst isWithinGracePeriod =\n\t\t\t\t\tDate.now() - mountTimeRef.current < INITIAL_SCROLL_GRACE_MS;\n\n\t\t\t\tconst shouldSnapToBottom =\n\t\t\t\t\tisWithinGracePeriod ||\n\t\t\t\t\t(itemsRemoved && isPinnedToBottom.current) ||\n\t\t\t\t\t(appendedNewItem && isPinnedToBottom.current) ||\n\t\t\t\t\t(replacedLastItem && isPinnedToBottom.current);\n\n\t\t\t\tif (shouldSnapToBottom) {\n\t\t\t\t\t// Instant scroll during grace period, smooth scroll after\n\t\t\t\t\tif (isWithinGracePeriod) {\n\t\t\t\t\t\telement.scrollTop = element.scrollHeight;\n\t\t\t\t\t} else {\n\t\t\t\t\t\telement.scrollTo({ top: element.scrollHeight, behavior: \"smooth\" });\n\t\t\t\t\t}\n\t\t\t\t\tisPinnedToBottom.current = true;\n\t\t\t\t\tisAtTop.current = false;\n\t\t\t\t}\n\n\t\t\t\tpreviousItemCount.current = items.length;\n\t\t\t\tpreviousLastItemKey.current = lastItemKey;\n\t\t\t}, [autoScroll, items.length, lastItemKey]);\n\n\t\t\t// Handle scroll events for infinite scrolling\n\t\t\tconst handleScroll = React.useCallback(\n\t\t\t\t(e: React.UIEvent<HTMLDivElement>) => {\n\t\t\t\t\tconst element = e.currentTarget;\n\t\t\t\t\tconst { scrollTop, scrollHeight, clientHeight } = element;\n\n\t\t\t\t\tconst distanceFromBottom = scrollHeight - scrollTop - clientHeight;\n\t\t\t\t\tconst pinnedNow = distanceFromBottom <= BOTTOM_THRESHOLD_PX;\n\t\t\t\t\tif (pinnedNow && !isPinnedToBottom.current) {\n\t\t\t\t\t\tonScrollEnd?.();\n\t\t\t\t\t}\n\t\t\t\t\tisPinnedToBottom.current = pinnedNow;\n\n\t\t\t\t\tconst atTop = scrollTop <= TOP_THRESHOLD_PX;\n\t\t\t\t\tif (atTop && !isAtTop.current) {\n\t\t\t\t\t\tonScrollStart?.();\n\t\t\t\t\t}\n\t\t\t\t\tisAtTop.current = atTop;\n\t\t\t\t},\n\t\t\t\t[onScrollStart, onScrollEnd]\n\t\t\t);\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref: setRefs,\n\t\t\t\t\tstate: renderProps,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\trole: \"log\",\n\t\t\t\t\t\t\"aria-label\": \"Conversation timeline\",\n\t\t\t\t\t\t\"aria-live\": \"polite\",\n\t\t\t\t\t\t\"aria-relevant\": \"additions\",\n\t\t\t\t\t\tonScroll: handleScroll,\n\t\t\t\t\t\tstyle: scrollMaskStyle,\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"ConversationTimeline\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineContainerProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Wrapper around the scrollable timeline giving consumers an easy hook to add\n * padding, backgrounds or transitions without touching the core timeline logic.\n */\nexport const ConversationTimelineContainer = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineContainerProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineContainer\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineLoadingProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Accessible status region for loading more timeline items. Lets host apps render\n * skeletons or shimmer states without reimplementing ARIA wiring.\n */\nexport const ConversationTimelineLoading = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineLoadingProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\trole: \"status\",\n\t\t\t\t\t\"aria-label\": \"Loading timeline items\",\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineLoading\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineEmptyProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Placeholder state rendered when no timeline items are present. Uses a polite status\n * region so screen readers announce the empty state.\n */\nexport const ConversationTimelineEmpty = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineEmptyProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\trole: \"status\",\n\t\t\t\t\t\"aria-label\": \"No timeline items\",\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineEmpty\";\n\treturn Component;\n})();\n"],"mappings":"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"}

package/primitives/day-separator.js

@@ -38,7 +38,7 @@ const defaultFormatDate = (date) => {
 * a render prop or rely on slotted children.
 */
 const DaySeparator = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false, date, dateString, formatDate = defaultFormatDate,...restProps }, ref) => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, date, dateString, formatDate = defaultFormatDate, ...restProps }, ref) => {
 		const formattedDate = formatDate(date);
 		const renderProps = {
 			date,
@@ -70,7 +70,7 @@ const DaySeparator = (() => {
 * Typically rendered on either side of the label.
 */
 const DaySeparatorLine = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false,...props }, ref) => useRenderElement("div", {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, ...props }, ref) => useRenderElement("div", {
 		className,
 		asChild
 	}, {
@@ -89,7 +89,7 @@ const DaySeparatorLine = (() => {
 * Displays the formatted date string.
 */
 const DaySeparatorLabel = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false, formattedDate = "",...props }, ref) => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, formattedDate = "", ...props }, ref) => {
 		const content = typeof children === "function" ? children({ formattedDate }) : children ?? formattedDate;
 		return useRenderElement("span", {
 			className,

package/primitives/day-separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"day-separator.js","names":["React","renderProps: DaySeparatorRenderProps"],"sources":["../../src/primitives/day-separator.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\n/**\n * Helper to check if a date is today\n */\nconst isToday = (date: Date): boolean => {\n\tconst now = new Date();\n\tconst today = new Date(now.getFullYear(), now.getMonth(), now.getDate());\n\tconst itemDay = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n\treturn itemDay.getTime() === today.getTime();\n};\n\n/**\n * Helper to check if a date is yesterday\n */\nconst isYesterday = (date: Date): boolean => {\n\tconst now = new Date();\n\tconst today = new Date(now.getFullYear(), now.getMonth(), now.getDate());\n\tconst yesterday = new Date(today);\n\tyesterday.setDate(yesterday.getDate() - 1);\n\tconst itemDay = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n\treturn itemDay.getTime() === yesterday.getTime();\n};\n\n/**\n * Default date formatter that returns \"Today\", \"Yesterday\", or a full date string\n */\nexport const defaultFormatDate = (date: Date): string => {\n\tif (isToday(date)) {\n\t\treturn \"Today\";\n\t}\n\n\tif (isYesterday(date)) {\n\t\treturn \"Yesterday\";\n\t}\n\n\t// Format as \"January 15, 2024\"\n\treturn date.toLocaleDateString(undefined, {\n\t\tyear: \"numeric\",\n\t\tmonth: \"long\",\n\t\tday: \"numeric\",\n\t});\n};\n\n/**\n * Shape returned to render-prop children describing the day separator state\n */\nexport type DaySeparatorRenderProps = {\n\tdate: Date;\n\tdateString: string;\n\tformattedDate: string;\n\tisToday: boolean;\n\tisYesterday: boolean;\n};\n\nexport type DaySeparatorProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: DaySeparatorRenderProps) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\tdate: Date;\n\tdateString: string;\n\tformatDate?: (date: Date) => string;\n};\n\n/**\n * Headless day separator component that marks the boundary between different days\n * in a conversation timeline. Consumers can either render their own layout via\n * a render prop or rely on slotted children.\n */\nexport const DaySeparator = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, DaySeparatorProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\tdate,\n\t\t\t\tdateString,\n\t\t\t\tformatDate = defaultFormatDate,\n\t\t\t\t...restProps\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst formattedDate = formatDate(date);\n\t\t\tconst isTodayValue = isToday(date);\n\t\t\tconst isYesterdayValue = isYesterday(date);\n\n\t\t\tconst renderProps: DaySeparatorRenderProps = {\n\t\t\t\tdate,\n\t\t\t\tdateString,\n\t\t\t\tformattedDate,\n\t\t\t\tisToday: isTodayValue,\n\t\t\t\tisYesterday: isYesterdayValue,\n\t\t\t};\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\" ? children(renderProps) : children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tstate: renderProps,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\trole: \"separator\",\n\t\t\t\t\t\t\"aria-label\": `Day separator: ${formattedDate}`,\n\t\t\t\t\t\t...restProps,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"DaySeparator\";\n\treturn Component;\n})();\n\nexport type DaySeparatorLineProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Decorative line element for the day separator.\n * Typically rendered on either side of the label.\n */\nexport const DaySeparatorLine = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, DaySeparatorLineProps>(\n\t\t({ children, className, asChild = false, ...props }, ref) =>\n\t\t\tuseRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t\"aria-hidden\": true,\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t)\n\t);\n\n\tComponent.displayName = \"DaySeparatorLine\";\n\treturn Component;\n})();\n\nexport type DaySeparatorLabelProps = Omit<\n\tReact.HTMLAttributes<HTMLSpanElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: { formattedDate: string }) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\tformattedDate?: string;\n};\n\n/**\n * Text label element for the day separator.\n * Displays the formatted date string.\n */\nexport const DaySeparatorLabel = (() => {\n\tconst Component = React.forwardRef<HTMLSpanElement, DaySeparatorLabelProps>(\n\t\t(\n\t\t\t{ children, className, asChild = false, formattedDate = \"\", ...props },\n\t\t\tref\n\t\t) => {\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children({ formattedDate })\n\t\t\t\t\t: (children ?? formattedDate);\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"span\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"DaySeparatorLabel\";\n\treturn Component;\n})();\n"],"mappings":";;;;;;;AAMA,MAAM,WAAW,SAAwB;CACxC,MAAM,sBAAM,IAAI,MAAM;CACtB,MAAM,QAAQ,IAAI,KAAK,IAAI,aAAa,EAAE,IAAI,UAAU,EAAE,IAAI,SAAS,CAAC;AAExE,QADgB,IAAI,KAAK,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,CAAC,CAC9D,SAAS,KAAK,MAAM,SAAS;;;;;AAM7C,MAAM,eAAe,SAAwB;CAC5C,MAAM,sBAAM,IAAI,MAAM;CACtB,MAAM,QAAQ,IAAI,KAAK,IAAI,aAAa,EAAE,IAAI,UAAU,EAAE,IAAI,SAAS,CAAC;CACxE,MAAM,YAAY,IAAI,KAAK,MAAM;AACjC,WAAU,QAAQ,UAAU,SAAS,GAAG,EAAE;AAE1C,QADgB,IAAI,KAAK,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,CAAC,CAC9D,SAAS,KAAK,UAAU,SAAS;;;;;AAMjD,MAAa,qBAAqB,SAAuB;AACxD,KAAI,QAAQ,KAAK,CAChB,QAAO;AAGR,KAAI,YAAY,KAAK,CACpB,QAAO;AAIR,QAAO,KAAK,mBAAmB,QAAW;EACzC,MAAM;EACN,OAAO;EACP,KAAK;EACL,CAAC;;;;;;;AAiCH,MAAa,sBAAsB;CAClC,MAAM,YAAYA,QAAM,YAEtB,EACC,UACA,WACA,UAAU,OACV,MACA,YACA,aAAa,kBACb,GAAG,aAEJ,QACI;EACJ,MAAM,gBAAgB,WAAW,KAAK;EAItC,MAAMC,cAAuC;GAC5C;GACA;GACA;GACA,SAPoB,QAAQ,KAAK;GAQjC,aAPwB,YAAY,KAAK;GAQzC;EAED,MAAM,UACL,OAAO,aAAa,aAAa,SAAS,YAAY,GAAG;AAE1D,SAAO,iBACN,OACA;GACC;GACA;GACA,EACD;GACC;GACA,OAAO;GACP,OAAO;IACN,MAAM;IACN,cAAc,kBAAkB;IAChC,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAeJ,MAAa,0BAA0B;CACtC,MAAM,YAAYD,QAAM,YACtB,EAAE,UAAU,WAAW,UAAU,MAAO,GAAG,SAAS,QACpD,iBACC,OACA;EACC;EACA;EACA,EACD;EACC;EACA,OAAO;GACN,eAAe;GACf,GAAG;GACH;GACA;EACD,CACD,CACF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAkBJ,MAAa,2BAA2B;CACvC,MAAM,YAAYA,QAAM,YAEtB,EAAE,UAAU,WAAW,UAAU,OAAO,gBAAgB,GAAI,GAAG,SAC/D,QACI;EACJ,MAAM,UACL,OAAO,aAAa,aACjB,SAAS,EAAE,eAAe,CAAC,GAC1B,YAAY;AAEjB,SAAO,iBACN,QACA;GACC;GACA;GACA,EACD;GACC;GACA,OAAO;IACN,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}
+{"version":3,"file":"day-separator.js","names":["React","renderProps: DaySeparatorRenderProps"],"sources":["../../src/primitives/day-separator.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\n/**\n * Helper to check if a date is today\n */\nconst isToday = (date: Date): boolean => {\n\tconst now = new Date();\n\tconst today = new Date(now.getFullYear(), now.getMonth(), now.getDate());\n\tconst itemDay = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n\treturn itemDay.getTime() === today.getTime();\n};\n\n/**\n * Helper to check if a date is yesterday\n */\nconst isYesterday = (date: Date): boolean => {\n\tconst now = new Date();\n\tconst today = new Date(now.getFullYear(), now.getMonth(), now.getDate());\n\tconst yesterday = new Date(today);\n\tyesterday.setDate(yesterday.getDate() - 1);\n\tconst itemDay = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n\treturn itemDay.getTime() === yesterday.getTime();\n};\n\n/**\n * Default date formatter that returns \"Today\", \"Yesterday\", or a full date string\n */\nexport const defaultFormatDate = (date: Date): string => {\n\tif (isToday(date)) {\n\t\treturn \"Today\";\n\t}\n\n\tif (isYesterday(date)) {\n\t\treturn \"Yesterday\";\n\t}\n\n\t// Format as \"January 15, 2024\"\n\treturn date.toLocaleDateString(undefined, {\n\t\tyear: \"numeric\",\n\t\tmonth: \"long\",\n\t\tday: \"numeric\",\n\t});\n};\n\n/**\n * Shape returned to render-prop children describing the day separator state\n */\nexport type DaySeparatorRenderProps = {\n\tdate: Date;\n\tdateString: string;\n\tformattedDate: string;\n\tisToday: boolean;\n\tisYesterday: boolean;\n};\n\nexport type DaySeparatorProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: DaySeparatorRenderProps) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\tdate: Date;\n\tdateString: string;\n\tformatDate?: (date: Date) => string;\n};\n\n/**\n * Headless day separator component that marks the boundary between different days\n * in a conversation timeline. Consumers can either render their own layout via\n * a render prop or rely on slotted children.\n */\nexport const DaySeparator = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, DaySeparatorProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\tdate,\n\t\t\t\tdateString,\n\t\t\t\tformatDate = defaultFormatDate,\n\t\t\t\t...restProps\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst formattedDate = formatDate(date);\n\t\t\tconst isTodayValue = isToday(date);\n\t\t\tconst isYesterdayValue = isYesterday(date);\n\n\t\t\tconst renderProps: DaySeparatorRenderProps = {\n\t\t\t\tdate,\n\t\t\t\tdateString,\n\t\t\t\tformattedDate,\n\t\t\t\tisToday: isTodayValue,\n\t\t\t\tisYesterday: isYesterdayValue,\n\t\t\t};\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\" ? children(renderProps) : children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tstate: renderProps,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\trole: \"separator\",\n\t\t\t\t\t\t\"aria-label\": `Day separator: ${formattedDate}`,\n\t\t\t\t\t\t...restProps,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"DaySeparator\";\n\treturn Component;\n})();\n\nexport type DaySeparatorLineProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Decorative line element for the day separator.\n * Typically rendered on either side of the label.\n */\nexport const DaySeparatorLine = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, DaySeparatorLineProps>(\n\t\t({ children, className, asChild = false, ...props }, ref) =>\n\t\t\tuseRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t\"aria-hidden\": true,\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t)\n\t);\n\n\tComponent.displayName = \"DaySeparatorLine\";\n\treturn Component;\n})();\n\nexport type DaySeparatorLabelProps = Omit<\n\tReact.HTMLAttributes<HTMLSpanElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: { formattedDate: string }) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\tformattedDate?: string;\n};\n\n/**\n * Text label element for the day separator.\n * Displays the formatted date string.\n */\nexport const DaySeparatorLabel = (() => {\n\tconst Component = React.forwardRef<HTMLSpanElement, DaySeparatorLabelProps>(\n\t\t(\n\t\t\t{ children, className, asChild = false, formattedDate = \"\", ...props },\n\t\t\tref\n\t\t) => {\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children({ formattedDate })\n\t\t\t\t\t: (children ?? formattedDate);\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"span\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"DaySeparatorLabel\";\n\treturn Component;\n})();\n"],"mappings":";;;;;;;AAMA,MAAM,WAAW,SAAwB;CACxC,MAAM,sBAAM,IAAI,MAAM;CACtB,MAAM,QAAQ,IAAI,KAAK,IAAI,aAAa,EAAE,IAAI,UAAU,EAAE,IAAI,SAAS,CAAC;AAExE,QADgB,IAAI,KAAK,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,CAAC,CAC9D,SAAS,KAAK,MAAM,SAAS;;;;;AAM7C,MAAM,eAAe,SAAwB;CAC5C,MAAM,sBAAM,IAAI,MAAM;CACtB,MAAM,QAAQ,IAAI,KAAK,IAAI,aAAa,EAAE,IAAI,UAAU,EAAE,IAAI,SAAS,CAAC;CACxE,MAAM,YAAY,IAAI,KAAK,MAAM;AACjC,WAAU,QAAQ,UAAU,SAAS,GAAG,EAAE;AAE1C,QADgB,IAAI,KAAK,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,CAAC,CAC9D,SAAS,KAAK,UAAU,SAAS;;;;;AAMjD,MAAa,qBAAqB,SAAuB;AACxD,KAAI,QAAQ,KAAK,CAChB,QAAO;AAGR,KAAI,YAAY,KAAK,CACpB,QAAO;AAIR,QAAO,KAAK,mBAAmB,QAAW;EACzC,MAAM;EACN,OAAO;EACP,KAAK;EACL,CAAC;;;;;;;AAiCH,MAAa,sBAAsB;CAClC,MAAM,YAAYA,QAAM,YAEtB,EACC,UACA,WACA,UAAU,OACV,MACA,YACA,aAAa,mBACb,GAAG,aAEJ,QACI;EACJ,MAAM,gBAAgB,WAAW,KAAK;EAItC,MAAMC,cAAuC;GAC5C;GACA;GACA;GACA,SAPoB,QAAQ,KAAK;GAQjC,aAPwB,YAAY,KAAK;GAQzC;EAED,MAAM,UACL,OAAO,aAAa,aAAa,SAAS,YAAY,GAAG;AAE1D,SAAO,iBACN,OACA;GACC;GACA;GACA,EACD;GACC;GACA,OAAO;GACP,OAAO;IACN,MAAM;IACN,cAAc,kBAAkB;IAChC,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAeJ,MAAa,0BAA0B;CACtC,MAAM,YAAYD,QAAM,YACtB,EAAE,UAAU,WAAW,UAAU,OAAO,GAAG,SAAS,QACpD,iBACC,OACA;EACC;EACA;EACA,EACD;EACC;EACA,OAAO;GACN,eAAe;GACf,GAAG;GACH;GACA;EACD,CACD,CACF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAkBJ,MAAa,2BAA2B;CACvC,MAAM,YAAYA,QAAM,YAEtB,EAAE,UAAU,WAAW,UAAU,OAAO,gBAAgB,IAAI,GAAG,SAC/D,QACI;EACJ,MAAM,UACL,OAAO,aAAa,aACjB,SAAS,EAAE,eAAe,CAAC,GAC1B,YAAY;AAEjB,SAAO,iBACN,QACA;GACC;GACA;GACA,EACD;GACC;GACA,OAAO;IACN,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}

package/primitives/multimodal-input.js

@@ -8,7 +8,7 @@ import * as React$1 from "react";
 * `asChild`.
 */
 const MultimodalInput = (() => {
-	const Component = React$1.forwardRef(({ value, onChange, onSubmit, onFileSelect, className, asChild = false, error, disabled,...props }, ref) => {
+	const Component = React$1.forwardRef(({ value, onChange, onSubmit, onFileSelect, className, asChild = false, error, disabled, ...props }, ref) => {
 		const innerRef = React$1.useRef(null);
 		React$1.useImperativeHandle(ref, () => innerRef.current);
 		const handleChange = (e) => {
@@ -74,7 +74,7 @@ const MultimodalInput = (() => {
 * chat UIs want an explicit attachment button.
 */
 const FileInput = (() => {
-	const Component = React$1.forwardRef(({ onFileSelect, asChild = false, className,...props }, ref) => {
+	const Component = React$1.forwardRef(({ onFileSelect, asChild = false, className, ...props }, ref) => {
 		const handleChange = (e) => {
 			const files = Array.from(e.target.files || []);
 			if (files.length > 0 && onFileSelect) {

package/primitives/multimodal-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"multimodal-input.js","names":["React","files: File[]"],"sources":["../../src/primitives/multimodal-input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\nexport type MultimodalInputProps = Omit<\n\tReact.TextareaHTMLAttributes<HTMLTextAreaElement>,\n\t\"value\" | \"onChange\"\n> & {\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tonSubmit?: () => void;\n\tonFileSelect?: (files: File[]) => void;\n\tasChild?: boolean;\n\tclassName?: string;\n\terror?: Error | null;\n\tdisabled?: boolean;\n};\n\n/**\n * Textarea tailored for support conversations. Handles keyboard submit,\n * clipboard uploads and auto-resizing while remaining composable via\n * `asChild`.\n */\nexport const MultimodalInput = (() => {\n\tconst Component = React.forwardRef<HTMLTextAreaElement, MultimodalInputProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tvalue,\n\t\t\t\tonChange,\n\t\t\t\tonSubmit,\n\t\t\t\tonFileSelect,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\terror,\n\t\t\t\tdisabled,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst innerRef = React.useRef<HTMLTextAreaElement | null>(null);\n\n\t\t\tReact.useImperativeHandle(\n\t\t\t\tref,\n\t\t\t\t() => innerRef.current as HTMLTextAreaElement\n\t\t\t);\n\n\t\t\tconst handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n\t\t\t\tonChange(e.target.value);\n\t\t\t};\n\n\t\t\tconst handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n\t\t\t\tif (e.key === \"Enter\" && !e.shiftKey) {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tonSubmit?.();\n\t\t\t\t}\n\t\t\t\tprops.onKeyDown?.(e);\n\t\t\t};\n\n\t\t\t// Handle paste events for images\n\t\t\tconst handlePaste = (e: React.ClipboardEvent<HTMLTextAreaElement>) => {\n\t\t\t\tconst items = Array.from(e.clipboardData.items);\n\t\t\t\tconst files: File[] = [];\n\n\t\t\t\tfor (const item of items) {\n\t\t\t\t\tif (item.kind === \"file\") {\n\t\t\t\t\t\tconst file = item.getAsFile();\n\t\t\t\t\t\tif (file) {\n\t\t\t\t\t\t\tfiles.push(file);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (files.length > 0 && onFileSelect) {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tonFileSelect(files);\n\t\t\t\t}\n\n\t\t\t\tprops.onPaste?.(e);\n\t\t\t};\n\n\t\t\t// Auto-resize\n\t\t\tReact.useLayoutEffect(() => {\n\t\t\t\tconst el = innerRef.current;\n\t\t\t\tif (!el) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\t// Reset height to auto to get the correct scrollHeight\n\t\t\t\tel.style.height = \"auto\";\n\t\t\t\t// Ensure overflow is visible during measurement\n\t\t\t\tconst originalOverflow = el.style.overflow;\n\t\t\t\tel.style.overflow = \"hidden\";\n\t\t\t\t// Set the new height\n\t\t\t\tel.style.height = `${el.scrollHeight}px`;\n\t\t\t\t// Restore original overflow\n\t\t\t\tel.style.overflow = originalOverflow;\n\t\t\t}, [value]);\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"textarea\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref: innerRef,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t\trows: 1,\n\t\t\t\t\t\tonChange: handleChange,\n\t\t\t\t\t\tonKeyDown: handleKeyDown,\n\t\t\t\t\t\tonPaste: handlePaste,\n\t\t\t\t\t\tdisabled,\n\t\t\t\t\t\t\"aria-invalid\": error ? \"true\" : undefined,\n\t\t\t\t\t\t\"aria-describedby\": error ? \"multimodal-input-error\" : undefined,\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t...props.style,\n\t\t\t\t\t\t\tminHeight: \"1.5rem\",\n\t\t\t\t\t\t\toverflow: \"hidden\",\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"MultimodalInput\";\n\treturn Component;\n})();\n\n// File input component for multimodal input\nexport type FileInputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n\tonFileSelect?: (files: File[]) => void;\n\tasChild?: boolean;\n};\n\n/**\n * Hidden file selector that feeds uploads back into the multimodal input when\n * chat UIs want an explicit attachment button.\n */\nexport const FileInput = (() => {\n\tconst Component = React.forwardRef<HTMLInputElement, FileInputProps>(\n\t\t({ onFileSelect, asChild = false, className, ...props }, ref) => {\n\t\t\tconst handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\t\tconst files = Array.from(e.target.files || []);\n\t\t\t\tif (files.length > 0 && onFileSelect) {\n\t\t\t\t\tonFileSelect(files);\n\t\t\t\t\t// Reset input to allow selecting the same file again\n\t\t\t\t\te.target.value = \"\";\n\t\t\t\t}\n\t\t\t\tprops.onChange?.(e);\n\t\t\t};\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"input\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\ttype: \"file\",\n\t\t\t\t\t\tmultiple: true,\n\t\t\t\t\t\tonChange: handleChange,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"FileInput\";\n\treturn Component;\n})();\n\n// Export the old name for backward compatibility\nexport const SupportInput = MultimodalInput;\n"],"mappings":";;;;;;;;;AAsBA,MAAa,yBAAyB;CACrC,MAAM,YAAYA,QAAM,YAEtB,EACC,OACA,UACA,UACA,cACA,WACA,UAAU,OACV,OACA,SACA,GAAG,SAEJ,QACI;EACJ,MAAM,WAAWA,QAAM,OAAmC,KAAK;AAE/D,UAAM,oBACL,WACM,SAAS,QACf;EAED,MAAM,gBAAgB,MAA8C;AACnE,YAAS,EAAE,OAAO,MAAM;;EAGzB,MAAM,iBAAiB,MAAgD;AACtE,OAAI,EAAE,QAAQ,WAAW,CAAC,EAAE,UAAU;AACrC,MAAE,gBAAgB;AAClB,gBAAY;;AAEb,SAAM,YAAY,EAAE;;EAIrB,MAAM,eAAe,MAAiD;GACrE,MAAM,QAAQ,MAAM,KAAK,EAAE,cAAc,MAAM;GAC/C,MAAMC,QAAgB,EAAE;AAExB,QAAK,MAAM,QAAQ,MAClB,KAAI,KAAK,SAAS,QAAQ;IACzB,MAAM,OAAO,KAAK,WAAW;AAC7B,QAAI,KACH,OAAM,KAAK,KAAK;;AAKnB,OAAI,MAAM,SAAS,KAAK,cAAc;AACrC,MAAE,gBAAgB;AAClB,iBAAa,MAAM;;AAGpB,SAAM,UAAU,EAAE;;AAInB,UAAM,sBAAsB;GAC3B,MAAM,KAAK,SAAS;AACpB,OAAI,CAAC,GACJ;AAGD,MAAG,MAAM,SAAS;GAElB,MAAM,mBAAmB,GAAG,MAAM;AAClC,MAAG,MAAM,WAAW;AAEpB,MAAG,MAAM,SAAS,GAAG,GAAG,aAAa;AAErC,MAAG,MAAM,WAAW;KAClB,CAAC,MAAM,CAAC;AAEX,SAAO,iBACN,YACA;GACC;GACA;GACA,EACD;GACC,KAAK;GACL,OAAO;IACN,GAAG;IACH;IACA,MAAM;IACN,UAAU;IACV,WAAW;IACX,SAAS;IACT;IACA,gBAAgB,QAAQ,SAAS;IACjC,oBAAoB,QAAQ,2BAA2B;IACvD,OAAO;KACN,GAAG,MAAM;KACT,WAAW;KACX,UAAU;KACV;IACD;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAYJ,MAAa,mBAAmB;CAC/B,MAAM,YAAYD,QAAM,YACtB,EAAE,cAAc,UAAU,OAAO,UAAW,GAAG,SAAS,QAAQ;EAChE,MAAM,gBAAgB,MAA2C;GAChE,MAAM,QAAQ,MAAM,KAAK,EAAE,OAAO,SAAS,EAAE,CAAC;AAC9C,OAAI,MAAM,SAAS,KAAK,cAAc;AACrC,iBAAa,MAAM;AAEnB,MAAE,OAAO,QAAQ;;AAElB,SAAM,WAAW,EAAE;;AAGpB,SAAO,iBACN,SACA;GACC;GACA;GACA,EACD;GACC;GACA,OAAO;IACN,GAAG;IACH,MAAM;IACN,UAAU;IACV,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;AAGJ,MAAa,eAAe"}
+{"version":3,"file":"multimodal-input.js","names":["React","files: File[]"],"sources":["../../src/primitives/multimodal-input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\nexport type MultimodalInputProps = Omit<\n\tReact.TextareaHTMLAttributes<HTMLTextAreaElement>,\n\t\"value\" | \"onChange\"\n> & {\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tonSubmit?: () => void;\n\tonFileSelect?: (files: File[]) => void;\n\tasChild?: boolean;\n\tclassName?: string;\n\terror?: Error | null;\n\tdisabled?: boolean;\n};\n\n/**\n * Textarea tailored for support conversations. Handles keyboard submit,\n * clipboard uploads and auto-resizing while remaining composable via\n * `asChild`.\n */\nexport const MultimodalInput = (() => {\n\tconst Component = React.forwardRef<HTMLTextAreaElement, MultimodalInputProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tvalue,\n\t\t\t\tonChange,\n\t\t\t\tonSubmit,\n\t\t\t\tonFileSelect,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\terror,\n\t\t\t\tdisabled,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst innerRef = React.useRef<HTMLTextAreaElement | null>(null);\n\n\t\t\tReact.useImperativeHandle(\n\t\t\t\tref,\n\t\t\t\t() => innerRef.current as HTMLTextAreaElement\n\t\t\t);\n\n\t\t\tconst handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n\t\t\t\tonChange(e.target.value);\n\t\t\t};\n\n\t\t\tconst handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n\t\t\t\tif (e.key === \"Enter\" && !e.shiftKey) {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tonSubmit?.();\n\t\t\t\t}\n\t\t\t\tprops.onKeyDown?.(e);\n\t\t\t};\n\n\t\t\t// Handle paste events for images\n\t\t\tconst handlePaste = (e: React.ClipboardEvent<HTMLTextAreaElement>) => {\n\t\t\t\tconst items = Array.from(e.clipboardData.items);\n\t\t\t\tconst files: File[] = [];\n\n\t\t\t\tfor (const item of items) {\n\t\t\t\t\tif (item.kind === \"file\") {\n\t\t\t\t\t\tconst file = item.getAsFile();\n\t\t\t\t\t\tif (file) {\n\t\t\t\t\t\t\tfiles.push(file);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (files.length > 0 && onFileSelect) {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tonFileSelect(files);\n\t\t\t\t}\n\n\t\t\t\tprops.onPaste?.(e);\n\t\t\t};\n\n\t\t\t// Auto-resize\n\t\t\tReact.useLayoutEffect(() => {\n\t\t\t\tconst el = innerRef.current;\n\t\t\t\tif (!el) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\t// Reset height to auto to get the correct scrollHeight\n\t\t\t\tel.style.height = \"auto\";\n\t\t\t\t// Ensure overflow is visible during measurement\n\t\t\t\tconst originalOverflow = el.style.overflow;\n\t\t\t\tel.style.overflow = \"hidden\";\n\t\t\t\t// Set the new height\n\t\t\t\tel.style.height = `${el.scrollHeight}px`;\n\t\t\t\t// Restore original overflow\n\t\t\t\tel.style.overflow = originalOverflow;\n\t\t\t}, [value]);\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"textarea\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref: innerRef,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t\trows: 1,\n\t\t\t\t\t\tonChange: handleChange,\n\t\t\t\t\t\tonKeyDown: handleKeyDown,\n\t\t\t\t\t\tonPaste: handlePaste,\n\t\t\t\t\t\tdisabled,\n\t\t\t\t\t\t\"aria-invalid\": error ? \"true\" : undefined,\n\t\t\t\t\t\t\"aria-describedby\": error ? \"multimodal-input-error\" : undefined,\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t...props.style,\n\t\t\t\t\t\t\tminHeight: \"1.5rem\",\n\t\t\t\t\t\t\toverflow: \"hidden\",\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"MultimodalInput\";\n\treturn Component;\n})();\n\n// File input component for multimodal input\nexport type FileInputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n\tonFileSelect?: (files: File[]) => void;\n\tasChild?: boolean;\n};\n\n/**\n * Hidden file selector that feeds uploads back into the multimodal input when\n * chat UIs want an explicit attachment button.\n */\nexport const FileInput = (() => {\n\tconst Component = React.forwardRef<HTMLInputElement, FileInputProps>(\n\t\t({ onFileSelect, asChild = false, className, ...props }, ref) => {\n\t\t\tconst handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\t\tconst files = Array.from(e.target.files || []);\n\t\t\t\tif (files.length > 0 && onFileSelect) {\n\t\t\t\t\tonFileSelect(files);\n\t\t\t\t\t// Reset input to allow selecting the same file again\n\t\t\t\t\te.target.value = \"\";\n\t\t\t\t}\n\t\t\t\tprops.onChange?.(e);\n\t\t\t};\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"input\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\ttype: \"file\",\n\t\t\t\t\t\tmultiple: true,\n\t\t\t\t\t\tonChange: handleChange,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"FileInput\";\n\treturn Component;\n})();\n\n// Export the old name for backward compatibility\nexport const SupportInput = MultimodalInput;\n"],"mappings":";;;;;;;;;AAsBA,MAAa,yBAAyB;CACrC,MAAM,YAAYA,QAAM,YAEtB,EACC,OACA,UACA,UACA,cACA,WACA,UAAU,OACV,OACA,UACA,GAAG,SAEJ,QACI;EACJ,MAAM,WAAWA,QAAM,OAAmC,KAAK;AAE/D,UAAM,oBACL,WACM,SAAS,QACf;EAED,MAAM,gBAAgB,MAA8C;AACnE,YAAS,EAAE,OAAO,MAAM;;EAGzB,MAAM,iBAAiB,MAAgD;AACtE,OAAI,EAAE,QAAQ,WAAW,CAAC,EAAE,UAAU;AACrC,MAAE,gBAAgB;AAClB,gBAAY;;AAEb,SAAM,YAAY,EAAE;;EAIrB,MAAM,eAAe,MAAiD;GACrE,MAAM,QAAQ,MAAM,KAAK,EAAE,cAAc,MAAM;GAC/C,MAAMC,QAAgB,EAAE;AAExB,QAAK,MAAM,QAAQ,MAClB,KAAI,KAAK,SAAS,QAAQ;IACzB,MAAM,OAAO,KAAK,WAAW;AAC7B,QAAI,KACH,OAAM,KAAK,KAAK;;AAKnB,OAAI,MAAM,SAAS,KAAK,cAAc;AACrC,MAAE,gBAAgB;AAClB,iBAAa,MAAM;;AAGpB,SAAM,UAAU,EAAE;;AAInB,UAAM,sBAAsB;GAC3B,MAAM,KAAK,SAAS;AACpB,OAAI,CAAC,GACJ;AAGD,MAAG,MAAM,SAAS;GAElB,MAAM,mBAAmB,GAAG,MAAM;AAClC,MAAG,MAAM,WAAW;AAEpB,MAAG,MAAM,SAAS,GAAG,GAAG,aAAa;AAErC,MAAG,MAAM,WAAW;KAClB,CAAC,MAAM,CAAC;AAEX,SAAO,iBACN,YACA;GACC;GACA;GACA,EACD;GACC,KAAK;GACL,OAAO;IACN,GAAG;IACH;IACA,MAAM;IACN,UAAU;IACV,WAAW;IACX,SAAS;IACT;IACA,gBAAgB,QAAQ,SAAS;IACjC,oBAAoB,QAAQ,2BAA2B;IACvD,OAAO;KACN,GAAG,MAAM;KACT,WAAW;KACX,UAAU;KACV;IACD;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAYJ,MAAa,mBAAmB;CAC/B,MAAM,YAAYD,QAAM,YACtB,EAAE,cAAc,UAAU,OAAO,WAAW,GAAG,SAAS,QAAQ;EAChE,MAAM,gBAAgB,MAA2C;GAChE,MAAM,QAAQ,MAAM,KAAK,EAAE,OAAO,SAAS,EAAE,CAAC;AAC9C,OAAI,MAAM,SAAS,KAAK,cAAc;AACrC,iBAAa,MAAM;AAEnB,MAAE,OAAO,QAAQ;;AAElB,SAAM,WAAW,EAAE;;AAGpB,SAAO,iBACN,SACA;GACC;GACA;GACA,EACD;GACC;GACA,OAAO;IACN,GAAG;IACH,MAAM;IACN,UAAU;IACV,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;AAGJ,MAAa,eAAe"}

package/primitives/timeline-item-attachments.d.ts

@@ -1,4 +1,4 @@
-import { TimelineItemParts, TimelinePartFile, TimelinePartImage } from "../timeline-item.js";
+import { TimelineItemParts, TimelinePartFile, TimelinePartImage } from "../packages/types/src/api/timeline-item.js";
 import * as React$1 from "react";
 
 //#region src/primitives/timeline-item-attachments.d.ts

package/primitives/timeline-item-attachments.js

@@ -1,6 +1,5 @@
 "use client";
 
-
 import { useRenderElement } from "../utils/use-render-element.js";
 import * as React$1 from "react";
 import { formatFileSize } from "@cossistant/core";
@@ -30,7 +29,7 @@ function hasAttachments(parts) {
 * Supports custom rendering via children render prop.
 */
 const TimelineItemImages = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false, images, onImageClick,...props }, ref) => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, images, onImageClick, ...props }, ref) => {
 		if (images.length === 0) return null;
 		const content = typeof children === "function" ? children(images, onImageClick) : children || /* @__PURE__ */ jsx("div", {
 			className: "flex flex-wrap gap-2",
@@ -39,7 +38,7 @@ const TimelineItemImages = (() => {
 				onClick: () => onImageClick?.(index),
 				type: "button",
 				children: /* @__PURE__ */ jsx("img", {
-					alt: image.fileName || `Image ${index + 1}`,
+					alt: image.filename || `Image ${index + 1}`,
 					className: "max-h-[200px] max-w-[300px] cursor-pointer rounded-lg object-cover transition-transform group-hover:scale-105",
 					loading: "lazy",
 					src: image.url
@@ -74,13 +73,13 @@ function getFileIcon(mediaType) {
 * Supports custom rendering via children render prop.
 */
 const TimelineItemFiles = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false, files,...props }, ref) => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, files, ...props }, ref) => {
 		if (files.length === 0) return null;
 		const content = typeof children === "function" ? children(files) : children || /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col gap-2",
 			children: files.map((file) => /* @__PURE__ */ jsxs("a", {
 				className: "flex items-center gap-2 rounded-lg bg-co-muted/50 px-3 py-2 text-sm transition-colors hover:bg-co-muted",
-				download: file.fileName,
+				download: file.filename,
 				href: file.url,
 				rel: "noopener noreferrer",
 				target: "_blank",
@@ -91,7 +90,7 @@ const TimelineItemFiles = (() => {
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: "flex-1 truncate font-medium",
-						children: file.fileName || "Download file"
+						children: file.filename || "Download file"
 					}),
 					file.size && /* @__PURE__ */ jsx("span", {
 						className: "text-co-muted-foreground text-xs",
@@ -119,7 +118,7 @@ const TimelineItemFiles = (() => {
 * Extracts the appropriate parts and renders them in a single container.
 */
 const TimelineItemAttachments = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false, parts, onImageClick, imagesClassName, filesClassName,...props }, ref) => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, parts, onImageClick, imagesClassName, filesClassName, ...props }, ref) => {
 		const images = extractImageParts(parts);
 		const files = extractFileParts(parts);
 		if (images.length === 0 && files.length === 0) return null;

package/primitives/timeline-item-attachments.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-item-attachments.js","names":["React"],"sources":["../../src/primitives/timeline-item-attachments.tsx"],"sourcesContent":["\"use client\";\n\nimport { formatFileSize } from \"@cossistant/core\";\nimport type {\n\tTimelineItemParts,\n\tTimelinePartFile,\n\tTimelinePartImage,\n} from \"@cossistant/types/api/timeline-item\";\nimport * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\n/**\n * Extract image parts from timeline item parts array.\n */\nexport function extractImageParts(\n\tparts: TimelineItemParts\n): TimelinePartImage[] {\n\treturn parts.filter(\n\t\t(part): part is TimelinePartImage => part.type === \"image\"\n\t);\n}\n\n/**\n * Extract file parts from timeline item parts array.\n */\nexport function extractFileParts(parts: TimelineItemParts): TimelinePartFile[] {\n\treturn parts.filter((part): part is TimelinePartFile => part.type === \"file\");\n}\n\n/**\n * Check if timeline item has any attachments (images or files).\n */\nexport function hasAttachments(parts: TimelineItemParts): boolean {\n\treturn parts.some((part) => part.type === \"image\" || part.type === \"file\");\n}\n\n// ============================================================================\n// TimelineItemImages\n// ============================================================================\n\nexport type TimelineItemImagesProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((\n\t\t\t\timages: TimelinePartImage[],\n\t\t\t\tonImageClick?: (index: number) => void\n\t\t  ) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\timages: TimelinePartImage[];\n\t/**\n\t * Callback when an image is clicked (for lightbox).\n\t */\n\tonImageClick?: (index: number) => void;\n};\n\n/**\n * Renders a grid of image thumbnails from timeline item parts.\n * Supports custom rendering via children render prop.\n */\nexport const TimelineItemImages = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, TimelineItemImagesProps>(\n\t\t(\n\t\t\t{ children, className, asChild = false, images, onImageClick, ...props },\n\t\t\tref\n\t\t) => {\n\t\t\tif (images.length === 0) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children(images, onImageClick)\n\t\t\t\t\t: children || (\n\t\t\t\t\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t\t\t\t\t{images.map((image, index) => (\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tclassName=\"group relative overflow-hidden rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2\"\n\t\t\t\t\t\t\t\t\t\tkey={image.url}\n\t\t\t\t\t\t\t\t\t\tonClick={() => onImageClick?.(index)}\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{/* biome-ignore lint/performance/noImgElement: React package, not Next.js specific */}\n\t\t\t\t\t\t\t\t\t\t{/* biome-ignore lint/nursery/useImageSize: Dynamic image dimensions not known at render time */}\n\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\talt={image.fileName || `Image ${index + 1}`}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"max-h-[200px] max-w-[300px] cursor-pointer rounded-lg object-cover transition-transform group-hover:scale-105\"\n\t\t\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\t\t\t\t\t\tsrc={image.url}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\n\t\t\t// biome-ignore lint/correctness/useHookAtTopLevel: useRenderElement is a utility function, not a hook\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemImages\";\n\treturn Component;\n})();\n\n// ============================================================================\n// TimelineItemFiles\n// ============================================================================\n\nexport type TimelineItemFilesProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode | ((files: TimelinePartFile[]) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\tfiles: TimelinePartFile[];\n};\n\n/**\n * Get file icon based on MIME type.\n */\nfunction getFileIcon(mediaType: string): string {\n\tif (mediaType === \"application/pdf\") {\n\t\treturn \"📄\";\n\t}\n\tif (mediaType === \"application/zip\") {\n\t\treturn \"🗜️\";\n\t}\n\tif (mediaType.startsWith(\"text/\")) {\n\t\treturn \"📝\";\n\t}\n\treturn \"📎\";\n}\n\n/**\n * Renders a list of file attachments from timeline item parts.\n * Supports custom rendering via children render prop.\n */\nexport const TimelineItemFiles = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, TimelineItemFilesProps>(\n\t\t({ children, className, asChild = false, files, ...props }, ref) => {\n\t\t\tif (files.length === 0) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children(files)\n\t\t\t\t\t: children || (\n\t\t\t\t\t\t\t<div className=\"flex flex-col gap-2\">\n\t\t\t\t\t\t\t\t{files.map((file) => (\n\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\tclassName=\"flex items-center gap-2 rounded-lg bg-co-muted/50 px-3 py-2 text-sm transition-colors hover:bg-co-muted\"\n\t\t\t\t\t\t\t\t\t\tdownload={file.fileName}\n\t\t\t\t\t\t\t\t\t\thref={file.url}\n\t\t\t\t\t\t\t\t\t\tkey={file.url}\n\t\t\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-lg\">\n\t\t\t\t\t\t\t\t\t\t\t{getFileIcon(file.mediaType)}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<span className=\"flex-1 truncate font-medium\">\n\t\t\t\t\t\t\t\t\t\t\t{file.fileName || \"Download file\"}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t{file.size && (\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-co-muted-foreground text-xs\">\n\t\t\t\t\t\t\t\t\t\t\t\t{formatFileSize(file.size)}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\n\t\t\t// biome-ignore lint/correctness/useHookAtTopLevel: useRenderElement is a utility function, not a hook\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemFiles\";\n\treturn Component;\n})();\n\n// ============================================================================\n// TimelineItemAttachments (convenience wrapper)\n// ============================================================================\n\nexport type TimelineItemAttachmentsProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n\tparts: TimelineItemParts;\n\t/**\n\t * Callback when an image is clicked (for lightbox).\n\t */\n\tonImageClick?: (index: number) => void;\n\t/**\n\t * Custom className for the images container.\n\t */\n\timagesClassName?: string;\n\t/**\n\t * Custom className for the files container.\n\t */\n\tfilesClassName?: string;\n};\n\n/**\n * Convenience component that renders both images and files from timeline parts.\n * Extracts the appropriate parts and renders them in a single container.\n */\nexport const TimelineItemAttachments = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemAttachmentsProps\n\t>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\tparts,\n\t\t\t\tonImageClick,\n\t\t\t\timagesClassName,\n\t\t\t\tfilesClassName,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst images = extractImageParts(parts);\n\t\t\tconst files = extractFileParts(parts);\n\n\t\t\tif (images.length === 0 && files.length === 0) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst content = children || (\n\t\t\t\t<>\n\t\t\t\t\t{images.length > 0 && (\n\t\t\t\t\t\t<TimelineItemImages\n\t\t\t\t\t\t\tclassName={imagesClassName}\n\t\t\t\t\t\t\timages={images}\n\t\t\t\t\t\t\tonImageClick={onImageClick}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{files.length > 0 && (\n\t\t\t\t\t\t<TimelineItemFiles className={filesClassName} files={files} />\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\n\t\t\t// biome-ignore lint/correctness/useHookAtTopLevel: useRenderElement is a utility function, not a hook\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemAttachments\";\n\treturn Component;\n})();\n"],"mappings":";;;;;;;;;;;;AAcA,SAAgB,kBACf,OACsB;AACtB,QAAO,MAAM,QACX,SAAoC,KAAK,SAAS,QACnD;;;;;AAMF,SAAgB,iBAAiB,OAA8C;AAC9E,QAAO,MAAM,QAAQ,SAAmC,KAAK,SAAS,OAAO;;;;;AAM9E,SAAgB,eAAe,OAAmC;AACjE,QAAO,MAAM,MAAM,SAAS,KAAK,SAAS,WAAW,KAAK,SAAS,OAAO;;;;;;AA8B3E,MAAa,4BAA4B;CACxC,MAAM,YAAYA,QAAM,YAEtB,EAAE,UAAU,WAAW,UAAU,OAAO,QAAQ,aAAc,GAAG,SACjE,QACI;AACJ,MAAI,OAAO,WAAW,EACrB,QAAO;EAGR,MAAM,UACL,OAAO,aAAa,aACjB,SAAS,QAAQ,aAAa,GAC9B,YACA,oBAAC;GAAI,WAAU;aACb,OAAO,KAAK,OAAO,UACnB,oBAAC;IACA,WAAU;IAEV,eAAe,eAAe,MAAM;IACpC,MAAK;cAIL,oBAAC;KACA,KAAK,MAAM,YAAY,SAAS,QAAQ;KACxC,WAAU;KACV,SAAQ;KACR,KAAK,MAAM;MACV;MAXG,MAAM,IAYH,CACR;IACG;AAIV,SAAO,iBACN,OACA;GACC;GACA;GACA,EACD;GACC;GACA,OAAO;IACN,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;AAmBJ,SAAS,YAAY,WAA2B;AAC/C,KAAI,cAAc,kBACjB,QAAO;AAER,KAAI,cAAc,kBACjB,QAAO;AAER,KAAI,UAAU,WAAW,QAAQ,CAChC,QAAO;AAER,QAAO;;;;;;AAOR,MAAa,2BAA2B;CACvC,MAAM,YAAYA,QAAM,YACtB,EAAE,UAAU,WAAW,UAAU,OAAO,MAAO,GAAG,SAAS,QAAQ;AACnE,MAAI,MAAM,WAAW,EACpB,QAAO;EAGR,MAAM,UACL,OAAO,aAAa,aACjB,SAAS,MAAM,GACf,YACA,oBAAC;GAAI,WAAU;aACb,MAAM,KAAK,SACX,qBAAC;IACA,WAAU;IACV,UAAU,KAAK;IACf,MAAM,KAAK;IAEX,KAAI;IACJ,QAAO;;KAEP,oBAAC;MAAK,WAAU;gBACd,YAAY,KAAK,UAAU;OACtB;KACP,oBAAC;MAAK,WAAU;gBACd,KAAK,YAAY;OACZ;KACN,KAAK,QACL,oBAAC;MAAK,WAAU;gBACd,eAAe,KAAK,KAAK;OACpB;;MAbH,KAAK,IAeP,CACH;IACG;AAIV,SAAO,iBACN,OACA;GACC;GACA;GACA,EACD;GACC;GACA,OAAO;IACN,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAgCJ,MAAa,iCAAiC;CAC7C,MAAM,YAAYA,QAAM,YAKtB,EACC,UACA,WACA,UAAU,OACV,OACA,cACA,iBACA,eACA,GAAG,SAEJ,QACI;EACJ,MAAM,SAAS,kBAAkB,MAAM;EACvC,MAAM,QAAQ,iBAAiB,MAAM;AAErC,MAAI,OAAO,WAAW,KAAK,MAAM,WAAW,EAC3C,QAAO;EAGR,MAAM,UAAU,YACf,4CACE,OAAO,SAAS,KAChB,oBAAC;GACA,WAAW;GACH;GACM;IACb,EAEF,MAAM,SAAS,KACf,oBAAC;GAAkB,WAAW;GAAuB;IAAS,IAE7D;AAIJ,SAAO,iBACN,OACA;GACC;GACA;GACA,EACD;GACC;GACA,OAAO;IACN,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}
+{"version":3,"file":"timeline-item-attachments.js","names":["React"],"sources":["../../src/primitives/timeline-item-attachments.tsx"],"sourcesContent":["\"use client\";\n\nimport { formatFileSize } from \"@cossistant/core\";\nimport type {\n\tTimelineItemParts,\n\tTimelinePartFile,\n\tTimelinePartImage,\n} from \"@cossistant/types/api/timeline-item\";\nimport * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\n/**\n * Extract image parts from timeline item parts array.\n */\nexport function extractImageParts(\n\tparts: TimelineItemParts\n): TimelinePartImage[] {\n\treturn parts.filter(\n\t\t(part): part is TimelinePartImage => part.type === \"image\"\n\t);\n}\n\n/**\n * Extract file parts from timeline item parts array.\n */\nexport function extractFileParts(parts: TimelineItemParts): TimelinePartFile[] {\n\treturn parts.filter((part): part is TimelinePartFile => part.type === \"file\");\n}\n\n/**\n * Check if timeline item has any attachments (images or files).\n */\nexport function hasAttachments(parts: TimelineItemParts): boolean {\n\treturn parts.some((part) => part.type === \"image\" || part.type === \"file\");\n}\n\n// ============================================================================\n// TimelineItemImages\n// ============================================================================\n\nexport type TimelineItemImagesProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((\n\t\t\t\timages: TimelinePartImage[],\n\t\t\t\tonImageClick?: (index: number) => void\n\t\t  ) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\timages: TimelinePartImage[];\n\t/**\n\t * Callback when an image is clicked (for lightbox).\n\t */\n\tonImageClick?: (index: number) => void;\n};\n\n/**\n * Renders a grid of image thumbnails from timeline item parts.\n * Supports custom rendering via children render prop.\n */\nexport const TimelineItemImages = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, TimelineItemImagesProps>(\n\t\t(\n\t\t\t{ children, className, asChild = false, images, onImageClick, ...props },\n\t\t\tref\n\t\t) => {\n\t\t\tif (images.length === 0) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children(images, onImageClick)\n\t\t\t\t\t: children || (\n\t\t\t\t\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t\t\t\t\t{images.map((image, index) => (\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tclassName=\"group relative overflow-hidden rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2\"\n\t\t\t\t\t\t\t\t\t\tkey={image.url}\n\t\t\t\t\t\t\t\t\t\tonClick={() => onImageClick?.(index)}\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{/* biome-ignore lint/performance/noImgElement: React package, not Next.js specific */}\n\t\t\t\t\t\t\t\t\t\t{/* biome-ignore lint/nursery/useImageSize: Dynamic image dimensions not known at render time */}\n\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\talt={image.filename || `Image ${index + 1}`}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"max-h-[200px] max-w-[300px] cursor-pointer rounded-lg object-cover transition-transform group-hover:scale-105\"\n\t\t\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\t\t\t\t\t\tsrc={image.url}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\n\t\t\t// biome-ignore lint/correctness/useHookAtTopLevel: useRenderElement is a utility function, not a hook\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemImages\";\n\treturn Component;\n})();\n\n// ============================================================================\n// TimelineItemFiles\n// ============================================================================\n\nexport type TimelineItemFilesProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode | ((files: TimelinePartFile[]) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\tfiles: TimelinePartFile[];\n};\n\n/**\n * Get file icon based on MIME type.\n */\nfunction getFileIcon(mediaType: string): string {\n\tif (mediaType === \"application/pdf\") {\n\t\treturn \"📄\";\n\t}\n\tif (mediaType === \"application/zip\") {\n\t\treturn \"🗜️\";\n\t}\n\tif (mediaType.startsWith(\"text/\")) {\n\t\treturn \"📝\";\n\t}\n\treturn \"📎\";\n}\n\n/**\n * Renders a list of file attachments from timeline item parts.\n * Supports custom rendering via children render prop.\n */\nexport const TimelineItemFiles = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, TimelineItemFilesProps>(\n\t\t({ children, className, asChild = false, files, ...props }, ref) => {\n\t\t\tif (files.length === 0) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children(files)\n\t\t\t\t\t: children || (\n\t\t\t\t\t\t\t<div className=\"flex flex-col gap-2\">\n\t\t\t\t\t\t\t\t{files.map((file) => (\n\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\tclassName=\"flex items-center gap-2 rounded-lg bg-co-muted/50 px-3 py-2 text-sm transition-colors hover:bg-co-muted\"\n\t\t\t\t\t\t\t\t\t\tdownload={file.filename}\n\t\t\t\t\t\t\t\t\t\thref={file.url}\n\t\t\t\t\t\t\t\t\t\tkey={file.url}\n\t\t\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-lg\">\n\t\t\t\t\t\t\t\t\t\t\t{getFileIcon(file.mediaType)}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<span className=\"flex-1 truncate font-medium\">\n\t\t\t\t\t\t\t\t\t\t\t{file.filename || \"Download file\"}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t{file.size && (\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-co-muted-foreground text-xs\">\n\t\t\t\t\t\t\t\t\t\t\t\t{formatFileSize(file.size)}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\n\t\t\t// biome-ignore lint/correctness/useHookAtTopLevel: useRenderElement is a utility function, not a hook\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemFiles\";\n\treturn Component;\n})();\n\n// ============================================================================\n// TimelineItemAttachments (convenience wrapper)\n// ============================================================================\n\nexport type TimelineItemAttachmentsProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n\tparts: TimelineItemParts;\n\t/**\n\t * Callback when an image is clicked (for lightbox).\n\t */\n\tonImageClick?: (index: number) => void;\n\t/**\n\t * Custom className for the images container.\n\t */\n\timagesClassName?: string;\n\t/**\n\t * Custom className for the files container.\n\t */\n\tfilesClassName?: string;\n};\n\n/**\n * Convenience component that renders both images and files from timeline parts.\n * Extracts the appropriate parts and renders them in a single container.\n */\nexport const TimelineItemAttachments = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemAttachmentsProps\n\t>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\tparts,\n\t\t\t\tonImageClick,\n\t\t\t\timagesClassName,\n\t\t\t\tfilesClassName,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst images = extractImageParts(parts);\n\t\t\tconst files = extractFileParts(parts);\n\n\t\t\tif (images.length === 0 && files.length === 0) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst content = children || (\n\t\t\t\t<>\n\t\t\t\t\t{images.length > 0 && (\n\t\t\t\t\t\t<TimelineItemImages\n\t\t\t\t\t\t\tclassName={imagesClassName}\n\t\t\t\t\t\t\timages={images}\n\t\t\t\t\t\t\tonImageClick={onImageClick}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{files.length > 0 && (\n\t\t\t\t\t\t<TimelineItemFiles className={filesClassName} files={files} />\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\n\t\t\t// biome-ignore lint/correctness/useHookAtTopLevel: useRenderElement is a utility function, not a hook\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemAttachments\";\n\treturn Component;\n})();\n"],"mappings":";;;;;;;;;;;AAcA,SAAgB,kBACf,OACsB;AACtB,QAAO,MAAM,QACX,SAAoC,KAAK,SAAS,QACnD;;;;;AAMF,SAAgB,iBAAiB,OAA8C;AAC9E,QAAO,MAAM,QAAQ,SAAmC,KAAK,SAAS,OAAO;;;;;AAM9E,SAAgB,eAAe,OAAmC;AACjE,QAAO,MAAM,MAAM,SAAS,KAAK,SAAS,WAAW,KAAK,SAAS,OAAO;;;;;;AA8B3E,MAAa,4BAA4B;CACxC,MAAM,YAAYA,QAAM,YAEtB,EAAE,UAAU,WAAW,UAAU,OAAO,QAAQ,cAAc,GAAG,SACjE,QACI;AACJ,MAAI,OAAO,WAAW,EACrB,QAAO;EAGR,MAAM,UACL,OAAO,aAAa,aACjB,SAAS,QAAQ,aAAa,GAC9B,YACA,oBAAC;GAAI,WAAU;aACb,OAAO,KAAK,OAAO,UACnB,oBAAC;IACA,WAAU;IAEV,eAAe,eAAe,MAAM;IACpC,MAAK;cAIL,oBAAC;KACA,KAAK,MAAM,YAAY,SAAS,QAAQ;KACxC,WAAU;KACV,SAAQ;KACR,KAAK,MAAM;MACV;MAXG,MAAM,IAYH,CACR;IACG;AAIV,SAAO,iBACN,OACA;GACC;GACA;GACA,EACD;GACC;GACA,OAAO;IACN,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;AAmBJ,SAAS,YAAY,WAA2B;AAC/C,KAAI,cAAc,kBACjB,QAAO;AAER,KAAI,cAAc,kBACjB,QAAO;AAER,KAAI,UAAU,WAAW,QAAQ,CAChC,QAAO;AAER,QAAO;;;;;;AAOR,MAAa,2BAA2B;CACvC,MAAM,YAAYA,QAAM,YACtB,EAAE,UAAU,WAAW,UAAU,OAAO,OAAO,GAAG,SAAS,QAAQ;AACnE,MAAI,MAAM,WAAW,EACpB,QAAO;EAGR,MAAM,UACL,OAAO,aAAa,aACjB,SAAS,MAAM,GACf,YACA,oBAAC;GAAI,WAAU;aACb,MAAM,KAAK,SACX,qBAAC;IACA,WAAU;IACV,UAAU,KAAK;IACf,MAAM,KAAK;IAEX,KAAI;IACJ,QAAO;;KAEP,oBAAC;MAAK,WAAU;gBACd,YAAY,KAAK,UAAU;OACtB;KACP,oBAAC;MAAK,WAAU;gBACd,KAAK,YAAY;OACZ;KACN,KAAK,QACL,oBAAC;MAAK,WAAU;gBACd,eAAe,KAAK,KAAK;OACpB;;MAbH,KAAK,IAeP,CACH;IACG;AAIV,SAAO,iBACN,OACA;GACC;GACA;GACA,EACD;GACC;GACA,OAAO;IACN,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAgCJ,MAAa,iCAAiC;CAC7C,MAAM,YAAYA,QAAM,YAKtB,EACC,UACA,WACA,UAAU,OACV,OACA,cACA,iBACA,gBACA,GAAG,SAEJ,QACI;EACJ,MAAM,SAAS,kBAAkB,MAAM;EACvC,MAAM,QAAQ,iBAAiB,MAAM;AAErC,MAAI,OAAO,WAAW,KAAK,MAAM,WAAW,EAC3C,QAAO;EAGR,MAAM,UAAU,YACf,4CACE,OAAO,SAAS,KAChB,oBAAC;GACA,WAAW;GACH;GACM;IACb,EAEF,MAAM,SAAS,KACf,oBAAC;GAAkB,WAAW;GAAuB;IAAS,IAE7D;AAIJ,SAAO,iBACN,OACA;GACC;GACA;GACA,EACD;GACC;GACA,OAAO;IACN,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}

package/primitives/timeline-item-group.d.ts

@@ -1,4 +1,4 @@
-import { TimelineItem } from "../timeline-item.js";
+import { TimelineItem } from "../packages/types/src/api/timeline-item.js";
 import * as React$1 from "react";
 import { SenderType } from "@cossistant/types";
 

package/primitives/timeline-item-group.js

@@ -9,8 +9,8 @@ import * as React$1 from "react";
 * slotted children. Typically used for MESSAGE-type items; EVENT items are usually rendered separately.
 */
 const TimelineItemGroup = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false, items = [], viewerId, seenByIds = [], lastReadItemIds,...restProps }, ref) => {
-		const { viewerType,...elementProps } = restProps;
+	const Component = React$1.forwardRef(({ children, className, asChild = false, items = [], viewerId, seenByIds = [], lastReadItemIds, ...restProps }, ref) => {
+		const { viewerType, ...elementProps } = restProps;
 		const firstItem = items[0];
 		const lastItem = items.at(-1);
 		let senderId = "";
@@ -72,7 +72,7 @@ const TimelineItemGroup = (() => {
 * badge or any other sender metadata supplied by the consumer UI.
 */
 const TimelineItemGroupAvatar = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false,...props }, ref) => useRenderElement("div", {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, ...props }, ref) => useRenderElement("div", {
 		className,
 		asChild
 	}, {
@@ -91,7 +91,7 @@ const TimelineItemGroupAvatar = (() => {
 * metadata supplied by `TimelineItemGroup`.
 */
 const TimelineItemGroupHeader = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false, name, senderId, senderType,...props }, ref) => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, name, senderId, senderType, ...props }, ref) => {
 		const content = typeof children === "function" ? children({
 			name,
 			senderId,
@@ -117,7 +117,7 @@ const TimelineItemGroupHeader = (() => {
 * parent group.
 */
 const TimelineItemGroupContent = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false,...props }, ref) => useRenderElement("div", {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, ...props }, ref) => useRenderElement("div", {
 		className,
 		asChild
 	}, {
@@ -136,7 +136,7 @@ const TimelineItemGroupContent = (() => {
 * displays.
 */
 const TimelineItemGroupSeenIndicator = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false, seenByIds = [],...props }, ref) => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, seenByIds = [], ...props }, ref) => {
 		const hasBeenSeen = seenByIds.length > 0;
 		const content = typeof children === "function" ? children({
 			seenByIds,
@@ -162,7 +162,7 @@ const TimelineItemGroupSeenIndicator = (() => {
 * basic label.
 */
 const TimelineItemGroupReadIndicator = (() => {
-	const Component = React$1.forwardRef(({ children, className, asChild = false, itemId, lastReadItemIds,...props }, ref) => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, itemId, lastReadItemIds, ...props }, ref) => {
 		const { lastReaderIds, readers } = React$1.useMemo(() => {
 			const _lastReaderIds = [];
 			const _readers = [];

package/primitives/timeline-item-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-item-group.js","names":["React","senderType: SenderType","renderProps: TimelineItemGroupRenderProps","_lastReaderIds: string[]","_readers: Array<{ userId: string; isLastRead: boolean }>"],"sources":["../../src/primitives/timeline-item-group.tsx"],"sourcesContent":["import type { SenderType } from \"@cossistant/types\";\nimport type { TimelineItem as TimelineItemType } from \"@cossistant/types/api/timeline-item\";\nimport * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\n/**\n * Shape returned to render-prop children describing the grouped timeline items state\n * and viewer specific flags.\n */\nexport type TimelineItemGroupRenderProps = {\n\t// Sender information\n\tsenderType: SenderType;\n\tsenderId: string;\n\tviewerType?: SenderType;\n\n\t// POV flags - who is viewing\n\tisSentByViewer: boolean; // True if the current viewer sent these items\n\tisReceivedByViewer: boolean; // True if the current viewer received these items\n\n\t// Sender type flags for convenience\n\tisVisitor: boolean;\n\tisAI: boolean;\n\tisTeamMember: boolean;\n\n\t// Item info\n\titemCount: number;\n\tfirstItemId: string | undefined;\n\tlastItemId: string | undefined;\n\n\t// Seen status\n\thasBeenSeenByViewer?: boolean;\n\tseenByIds?: readonly string[]; // IDs of users who have seen the last item in group\n};\n\nexport type TimelineItemGroupProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: TimelineItemGroupRenderProps) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\titems: TimelineItemType[];\n\n\t// POV context - who is viewing these timeline items\n\tviewerId?: string; // ID of the current viewer\n\tviewerType?: SenderType; // Type of the current viewer\n\n\t// Seen data\n\tseenByIds?: readonly string[]; // IDs of users who have seen these timeline items\n\tlastReadItemIds?: Map<string, string>; // Map of userId -> lastItemId they read\n};\n\n/**\n * Groups sequential timeline items from the same sender and exposes render helpers\n * that describe who sent the batch and whether the active viewer has seen it.\n * Consumers can either render their own layout via a render prop or rely on\n * slotted children. Typically used for MESSAGE-type items; EVENT items are usually rendered separately.\n */\nexport const TimelineItemGroup = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, TimelineItemGroupProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\titems = [],\n\t\t\t\tviewerId,\n\t\t\t\tseenByIds = [] as readonly string[],\n\t\t\t\tlastReadItemIds,\n\t\t\t\t...restProps\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst { viewerType, ...elementProps } = restProps;\n\n\t\t\t// Determine sender type from first timeline item in group\n\t\t\tconst firstItem = items[0];\n\t\t\tconst lastItem = items.at(-1);\n\n\t\t\t// Determine sender info\n\t\t\tlet senderId = \"\";\n\t\t\tlet senderType: SenderType;\n\n\t\t\tif (firstItem?.visitorId) {\n\t\t\t\tsenderId = firstItem.visitorId;\n\t\t\t\tsenderType = \"visitor\" as SenderType;\n\t\t\t} else if (firstItem?.aiAgentId) {\n\t\t\t\tsenderId = firstItem.aiAgentId;\n\t\t\t\tsenderType = \"ai\" as SenderType;\n\t\t\t} else if (firstItem?.userId) {\n\t\t\t\tsenderId = firstItem.userId;\n\t\t\t\tsenderType = \"team_member\" as SenderType;\n\t\t\t} else {\n\t\t\t\t// Fallback\n\t\t\t\tsenderId = firstItem?.id || \"unknown\";\n\t\t\t\tsenderType = \"team_member\" as SenderType;\n\t\t\t}\n\n\t\t\t// Determine POV\n\t\t\tconst isSentByViewer = viewerId\n\t\t\t\t? senderId === viewerId\n\t\t\t\t: viewerType\n\t\t\t\t\t? senderType === viewerType\n\t\t\t\t\t: false;\n\t\t\tconst isReceivedByViewer = viewerId\n\t\t\t\t? senderId !== viewerId\n\t\t\t\t: viewerType\n\t\t\t\t\t? senderType !== viewerType\n\t\t\t\t\t: true;\n\n\t\t\t// Convenience flags\n\t\t\tconst isVisitor = senderType === \"visitor\";\n\t\t\tconst isAI = senderType === \"ai\";\n\t\t\tconst isTeamMember = senderType === \"team_member\";\n\n\t\t\t// Check if viewer has seen these timeline items\n\t\t\tconst hasBeenSeenByViewer = viewerId\n\t\t\t\t? seenByIds.includes(viewerId)\n\t\t\t\t: undefined;\n\n\t\t\tconst renderProps: TimelineItemGroupRenderProps = {\n\t\t\t\tsenderType,\n\t\t\t\tsenderId,\n\t\t\t\tviewerType,\n\t\t\t\tisSentByViewer,\n\t\t\t\tisReceivedByViewer,\n\t\t\t\tisVisitor,\n\t\t\t\tisAI,\n\t\t\t\tisTeamMember,\n\t\t\t\titemCount: items.length,\n\t\t\t\tfirstItemId: firstItem?.id,\n\t\t\t\tlastItemId: lastItem?.id,\n\t\t\t\thasBeenSeenByViewer,\n\t\t\t\tseenByIds,\n\t\t\t};\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\" ? children(renderProps) : children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tstate: renderProps,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\trole: \"group\",\n\t\t\t\t\t\t\"aria-label\": `Timeline item group from ${senderType}`,\n\t\t\t\t\t\t...elementProps,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemGroup\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupAvatarProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Optional slot rendered next to a grouped batch to display an avatar, agent\n * badge or any other sender metadata supplied by the consumer UI.\n */\nexport const TimelineItemGroupAvatar = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupAvatarProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupAvatar\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupHeaderProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: {\n\t\t\t\tname?: string;\n\t\t\t\tsenderId?: string;\n\t\t\t\tsenderType?: SenderType;\n\t\t  }) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\tname?: string;\n\tsenderId?: string;\n\tsenderType?: SenderType;\n};\n\n/**\n * Decorative or semantic wrapper rendered above a timeline item batch. Useful for\n * injecting agent names, timestamps or custom status labels tied to the sender\n * metadata supplied by `TimelineItemGroup`.\n */\nexport const TimelineItemGroupHeader = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupHeaderProps\n\t>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\tname,\n\t\t\t\tsenderId,\n\t\t\t\tsenderType,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children({ name, senderId, senderType })\n\t\t\t\t\t: children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupHeader\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupContentProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Container for the actual timeline items within a batch. Consumers can\n * override the structure while inheriting layout props passed down from the\n * parent group.\n */\nexport const TimelineItemGroupContent = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupContentProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupContent\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupSeenIndicatorProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: {\n\t\t\t\tseenByIds: readonly string[];\n\t\t\t\thasBeenSeen: boolean;\n\t\t  }) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\tseenByIds?: readonly string[];\n};\n\n/**\n * Utility slot for showing who has viewed the most recent timeline item in the\n * group. Works with simple text children or a render prop for advanced\n * displays.\n */\nexport const TimelineItemGroupSeenIndicator = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupSeenIndicatorProps\n\t>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\tseenByIds = [] as readonly string[],\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst hasBeenSeen = seenByIds.length > 0;\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children({ seenByIds, hasBeenSeen })\n\t\t\t\t\t: children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupSeenIndicator\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupReadIndicatorProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: {\n\t\t\t\treaders: Array<{ userId: string; isLastRead: boolean }>;\n\t\t\t\tlastReaderIds: string[];\n\t\t  }) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\titemId: string;\n\tlastReadItemIds?: Map<string, string>;\n};\n\n/**\n * Renders read receipts for the tail timeline item in a group. It surfaces the list\n * of readers and callers can decide whether to render avatars, tooltips or a\n * basic label.\n */\nexport const TimelineItemGroupReadIndicator = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupReadIndicatorProps\n\t>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\titemId,\n\t\t\t\tlastReadItemIds,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\t// Find all users who stopped reading at this timeline item\n\t\t\tconst { lastReaderIds, readers } = React.useMemo(() => {\n\t\t\t\tconst _lastReaderIds: string[] = [];\n\t\t\t\tconst _readers: Array<{ userId: string; isLastRead: boolean }> = [];\n\n\t\t\t\tif (lastReadItemIds) {\n\t\t\t\t\tlastReadItemIds.forEach((lastItemId, userId) => {\n\t\t\t\t\t\tif (lastItemId === itemId) {\n\t\t\t\t\t\t\t_lastReaderIds.push(userId);\n\t\t\t\t\t\t\t_readers.push({ userId, isLastRead: true });\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\treturn { lastReaderIds: _lastReaderIds, readers: _readers };\n\t\t\t}, [itemId, lastReadItemIds]);\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children({ readers, lastReaderIds })\n\t\t\t\t\t: children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupReadIndicator\";\n\treturn Component;\n})();\n"],"mappings":"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"}
+{"version":3,"file":"timeline-item-group.js","names":["React","senderType: SenderType","renderProps: TimelineItemGroupRenderProps","_lastReaderIds: string[]","_readers: Array<{ userId: string; isLastRead: boolean }>"],"sources":["../../src/primitives/timeline-item-group.tsx"],"sourcesContent":["import type { SenderType } from \"@cossistant/types\";\nimport type { TimelineItem as TimelineItemType } from \"@cossistant/types/api/timeline-item\";\nimport * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\n/**\n * Shape returned to render-prop children describing the grouped timeline items state\n * and viewer specific flags.\n */\nexport type TimelineItemGroupRenderProps = {\n\t// Sender information\n\tsenderType: SenderType;\n\tsenderId: string;\n\tviewerType?: SenderType;\n\n\t// POV flags - who is viewing\n\tisSentByViewer: boolean; // True if the current viewer sent these items\n\tisReceivedByViewer: boolean; // True if the current viewer received these items\n\n\t// Sender type flags for convenience\n\tisVisitor: boolean;\n\tisAI: boolean;\n\tisTeamMember: boolean;\n\n\t// Item info\n\titemCount: number;\n\tfirstItemId: string | undefined;\n\tlastItemId: string | undefined;\n\n\t// Seen status\n\thasBeenSeenByViewer?: boolean;\n\tseenByIds?: readonly string[]; // IDs of users who have seen the last item in group\n};\n\nexport type TimelineItemGroupProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: TimelineItemGroupRenderProps) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\titems: TimelineItemType[];\n\n\t// POV context - who is viewing these timeline items\n\tviewerId?: string; // ID of the current viewer\n\tviewerType?: SenderType; // Type of the current viewer\n\n\t// Seen data\n\tseenByIds?: readonly string[]; // IDs of users who have seen these timeline items\n\tlastReadItemIds?: Map<string, string>; // Map of userId -> lastItemId they read\n};\n\n/**\n * Groups sequential timeline items from the same sender and exposes render helpers\n * that describe who sent the batch and whether the active viewer has seen it.\n * Consumers can either render their own layout via a render prop or rely on\n * slotted children. Typically used for MESSAGE-type items; EVENT items are usually rendered separately.\n */\nexport const TimelineItemGroup = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, TimelineItemGroupProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\titems = [],\n\t\t\t\tviewerId,\n\t\t\t\tseenByIds = [] as readonly string[],\n\t\t\t\tlastReadItemIds,\n\t\t\t\t...restProps\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst { viewerType, ...elementProps } = restProps;\n\n\t\t\t// Determine sender type from first timeline item in group\n\t\t\tconst firstItem = items[0];\n\t\t\tconst lastItem = items.at(-1);\n\n\t\t\t// Determine sender info\n\t\t\tlet senderId = \"\";\n\t\t\tlet senderType: SenderType;\n\n\t\t\tif (firstItem?.visitorId) {\n\t\t\t\tsenderId = firstItem.visitorId;\n\t\t\t\tsenderType = \"visitor\" as SenderType;\n\t\t\t} else if (firstItem?.aiAgentId) {\n\t\t\t\tsenderId = firstItem.aiAgentId;\n\t\t\t\tsenderType = \"ai\" as SenderType;\n\t\t\t} else if (firstItem?.userId) {\n\t\t\t\tsenderId = firstItem.userId;\n\t\t\t\tsenderType = \"team_member\" as SenderType;\n\t\t\t} else {\n\t\t\t\t// Fallback\n\t\t\t\tsenderId = firstItem?.id || \"unknown\";\n\t\t\t\tsenderType = \"team_member\" as SenderType;\n\t\t\t}\n\n\t\t\t// Determine POV\n\t\t\tconst isSentByViewer = viewerId\n\t\t\t\t? senderId === viewerId\n\t\t\t\t: viewerType\n\t\t\t\t\t? senderType === viewerType\n\t\t\t\t\t: false;\n\t\t\tconst isReceivedByViewer = viewerId\n\t\t\t\t? senderId !== viewerId\n\t\t\t\t: viewerType\n\t\t\t\t\t? senderType !== viewerType\n\t\t\t\t\t: true;\n\n\t\t\t// Convenience flags\n\t\t\tconst isVisitor = senderType === \"visitor\";\n\t\t\tconst isAI = senderType === \"ai\";\n\t\t\tconst isTeamMember = senderType === \"team_member\";\n\n\t\t\t// Check if viewer has seen these timeline items\n\t\t\tconst hasBeenSeenByViewer = viewerId\n\t\t\t\t? seenByIds.includes(viewerId)\n\t\t\t\t: undefined;\n\n\t\t\tconst renderProps: TimelineItemGroupRenderProps = {\n\t\t\t\tsenderType,\n\t\t\t\tsenderId,\n\t\t\t\tviewerType,\n\t\t\t\tisSentByViewer,\n\t\t\t\tisReceivedByViewer,\n\t\t\t\tisVisitor,\n\t\t\t\tisAI,\n\t\t\t\tisTeamMember,\n\t\t\t\titemCount: items.length,\n\t\t\t\tfirstItemId: firstItem?.id,\n\t\t\t\tlastItemId: lastItem?.id,\n\t\t\t\thasBeenSeenByViewer,\n\t\t\t\tseenByIds,\n\t\t\t};\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\" ? children(renderProps) : children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tstate: renderProps,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\trole: \"group\",\n\t\t\t\t\t\t\"aria-label\": `Timeline item group from ${senderType}`,\n\t\t\t\t\t\t...elementProps,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemGroup\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupAvatarProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Optional slot rendered next to a grouped batch to display an avatar, agent\n * badge or any other sender metadata supplied by the consumer UI.\n */\nexport const TimelineItemGroupAvatar = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupAvatarProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupAvatar\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupHeaderProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: {\n\t\t\t\tname?: string;\n\t\t\t\tsenderId?: string;\n\t\t\t\tsenderType?: SenderType;\n\t\t  }) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\tname?: string;\n\tsenderId?: string;\n\tsenderType?: SenderType;\n};\n\n/**\n * Decorative or semantic wrapper rendered above a timeline item batch. Useful for\n * injecting agent names, timestamps or custom status labels tied to the sender\n * metadata supplied by `TimelineItemGroup`.\n */\nexport const TimelineItemGroupHeader = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupHeaderProps\n\t>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\tname,\n\t\t\t\tsenderId,\n\t\t\t\tsenderType,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children({ name, senderId, senderType })\n\t\t\t\t\t: children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupHeader\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupContentProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Container for the actual timeline items within a batch. Consumers can\n * override the structure while inheriting layout props passed down from the\n * parent group.\n */\nexport const TimelineItemGroupContent = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupContentProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupContent\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupSeenIndicatorProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: {\n\t\t\t\tseenByIds: readonly string[];\n\t\t\t\thasBeenSeen: boolean;\n\t\t  }) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\tseenByIds?: readonly string[];\n};\n\n/**\n * Utility slot for showing who has viewed the most recent timeline item in the\n * group. Works with simple text children or a render prop for advanced\n * displays.\n */\nexport const TimelineItemGroupSeenIndicator = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupSeenIndicatorProps\n\t>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\tseenByIds = [] as readonly string[],\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst hasBeenSeen = seenByIds.length > 0;\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children({ seenByIds, hasBeenSeen })\n\t\t\t\t\t: children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupSeenIndicator\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupReadIndicatorProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: {\n\t\t\t\treaders: Array<{ userId: string; isLastRead: boolean }>;\n\t\t\t\tlastReaderIds: string[];\n\t\t  }) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\titemId: string;\n\tlastReadItemIds?: Map<string, string>;\n};\n\n/**\n * Renders read receipts for the tail timeline item in a group. It surfaces the list\n * of readers and callers can decide whether to render avatars, tooltips or a\n * basic label.\n */\nexport const TimelineItemGroupReadIndicator = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupReadIndicatorProps\n\t>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\titemId,\n\t\t\t\tlastReadItemIds,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\t// Find all users who stopped reading at this timeline item\n\t\t\tconst { lastReaderIds, readers } = React.useMemo(() => {\n\t\t\t\tconst _lastReaderIds: string[] = [];\n\t\t\t\tconst _readers: Array<{ userId: string; isLastRead: boolean }> = [];\n\n\t\t\t\tif (lastReadItemIds) {\n\t\t\t\t\tlastReadItemIds.forEach((lastItemId, userId) => {\n\t\t\t\t\t\tif (lastItemId === itemId) {\n\t\t\t\t\t\t\t_lastReaderIds.push(userId);\n\t\t\t\t\t\t\t_readers.push({ userId, isLastRead: true });\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\treturn { lastReaderIds: _lastReaderIds, readers: _readers };\n\t\t\t}, [itemId, lastReadItemIds]);\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children({ readers, lastReaderIds })\n\t\t\t\t\t: children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupReadIndicator\";\n\treturn Component;\n})();\n"],"mappings":"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"}