@cossistant/react 0.0.3 → 0.0.5

package/schemas.d.ts

@@ -10,10 +10,11 @@ declare const conversationSchema: z.ZodObject<{
   visitorId: z.ZodString;
   websiteId: z.ZodString;
   status: z.ZodDefault<z.ZodEnum<{
-    resolved: "resolved";
     open: "open";
+    resolved: "resolved";
     spam: "spam";
   }>>;
+  deletedAt: z.ZodDefault<z.ZodNullable<z.ZodString>>;
   lastTimelineItem: z.ZodOptional<z.ZodObject<{
     id: z.ZodOptional<z.ZodString>;
     conversationId: z.ZodString;
@@ -25,8 +26,10 @@ declare const conversationSchema: z.ZodObject<{
     type: z.ZodEnum<{
       message: "message";
       event: "event";
+      identification: "identification";
     }>;
     text: z.ZodNullable<z.ZodString>;
+    tool: z.ZodOptional<z.ZodNullable<z.ZodString>>;
     parts: z.ZodArray<z.ZodUnion<readonly [z.ZodObject<{
       type: z.ZodLiteral<"text">;
       text: z.ZodString;
@@ -44,6 +47,9 @@ declare const conversationSchema: z.ZodObject<{
         tag_removed: "tag_removed";
         resolved: "resolved";
         reopened: "reopened";
+        visitor_blocked: "visitor_blocked";
+        visitor_unblocked: "visitor_unblocked";
+        visitor_identified: "visitor_identified";
       }>;
       actorUserId: z.ZodNullable<z.ZodString>;
       actorAiAgentId: z.ZodNullable<z.ZodString>;

package/schemas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schemas.d.ts","names":[],"sources":["../../types/src/schemas.ts"],"sourcesContent":[],"mappings":";;;;cAkBa,oBAAkB,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAAA,SAAA,aAAA;IAAA,SAAA,eAAA,cAAA,YAAA,CAAA,CAAA;EAiBnB,CAAA,eAAY,CAAA,CAAA;CAAA,eAAA,CAAA;AAAkB,KAA9B,YAAA,GAAe,CAAA,CAAE,KAAa,CAAA,OAAA,kBAAA,CAAA;AAAf,cAEd,sBAFgB,EAEM,CAAA,CAAA,SAFN,CAAA;EAAK,EAAA,aAAA;EAErB,cAAA,aAUX;EAAA,MAAA,eAAA,YAAA,CAAA;;;;;;;;KAEU,gBAAA,GAAmB,CAAA,CAAE,aAAa"}
+{"version":3,"file":"schemas.d.ts","names":[],"sources":["../../types/src/schemas.ts"],"sourcesContent":[],"mappings":";;;;cAkBa,oBAAkB,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAAA,SAAA,eAAA,YAAA,CAAA;IAAA,SAAA,aAAA;IAkBnB,SAAA,eAA8B,cAAA,YAAb,CAAA,CAAK;EAErB,CAAA,eAAA,CAAA,CAAA;;KAFD,YAAA,GAAe,CAAA,CAAE,aAAa;cAE7B,wBAAsB,CAAA,CAAA;;;;;;;;;;;KAYvB,gBAAA,GAAmB,CAAA,CAAE,aAAa"}

package/support/components/avatar-stack.d.ts

@@ -1,4 +1,4 @@
-import * as react0 from "react";
+import { ReactElement, ReactNode } from "react";
 import { AvailableAIAgent, AvailableHumanAgent } from "@cossistant/types";
 
 //#region src/support/components/avatar-stack.d.ts
@@ -23,13 +23,17 @@ declare const AvatarStackItem: ({
   gapWidth,
   className
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   index: number;
   size?: number;
   spacing?: number;
   gapWidth?: number;
   className?: string;
-}) => react0.ReactElement<unknown, string | react0.JSXElementConstructor<any>> | null;
+}) => ReactElement | null;
+/**
+ * Displays a compact row of agent avatars with optional branding and overflow
+ * counts.
+ */
 declare function AvatarStack({
   humanAgents,
   aiAgents,
@@ -39,7 +43,7 @@ declare function AvatarStack({
   size,
   spacing,
   gapWidth
-}: AvatarStackProps): react0.ReactElement<unknown, string | react0.JSXElementConstructor<any>> | null;
+}: AvatarStackProps): ReactElement | null;
 //#endregion
 export { AvatarStack, AvatarStackItem };
 //# sourceMappingURL=avatar-stack.d.ts.map

package/support/components/avatar-stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-stack.d.ts","names":[],"sources":["../../../src/support/components/avatar-stack.tsx"],"sourcesContent":[],"mappings":";;;;KAMK,gBAAA;eACS;YACH;EAFN,YAAA,CAAA,EAAA,OAAgB;EAAA,kBAAA,CAAA,EAAA,OAAA;WACP,CAAA,EAAA,MAAA;;EACa,IAAA,CAAA,EAAA,MAAA;EAYd;EA8CZ,OAAA,CAAA,EAAA,MAAA;;UA9C+B,CAAA,EAAA,MAAA;;AAAA,cAAnB,eAAmB,EAAA,CAAA;EAAA,QAAA;EAAA,KAAA;EAAA,IAAA;EAAA,OAAA;EAAA,QAAA;EAAA;AAgDhC,CAhDgC,EAAA;UAAA,EAQrB,KAAA,CAAM,SARe;OAAA,EAAA,MAAA;MAQrB,CAAA,EAAA,MAAM;SAAS,CAAA,EAMzB,MAAA;UAAA,CAAA,EAAA,MAAA;EAAA,SAAA,CAAA,EAAA,MAAA;AAkCD,CAAA,EAAA,GAlCC,MAAA,CAAA,YAkC0B,CAAA,OAAA,EAAA,MAAA,GAxCD,MAAA,CAMzB,qBAkC0B,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA;AAAA,iBAAX,WAAA,CAAW;EAAA,WAAA;EAAA,QAAA;EAAA,YAAA;EAAA,kBAAA;EAAA,SAAA;EAAA,IAAA;EAAA,OAAA;EAAA;AAAA,CAAA,EASxB,gBATwB,CAAA,EASR,MAAA,CAAA,YATQ,CAAA,OAAA,EAAA,MAAA,GASR,MAAA,CAAA,qBATQ,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA"}
+{"version":3,"file":"avatar-stack.d.ts","names":[],"sources":["../../../src/support/components/avatar-stack.tsx"],"sourcesContent":[],"mappings":";;;;KAOK,gBAAA;eACS;EADT,QAAA,EAEM,gBAFU,EAAA;EAcR,YAAA,CAAA,EAAA,OA8CZ;EA9C+B,kBAAA,CAAA,EAAA,OAAA;EAAA,SAAA,CAAA,EAAA,MAAA;EAAA;EAAA,IAAA,CAAA,EAAA,MAAA;EAAA;EAAA,OAAA,CAAA,EAAA,MAAA;EAQrB;EAMP,QAAA,CAAA,EAAA,MAAA;CAAY;AAsCA,cApDH,eAoDc,EAAA,CAAA;EAAA,QAAA;EAAA,KAAA;EAAA,IAAA;EAAA,OAAA;EAAA,QAAA;EAAA;CAAA,EAAA;EAC1B,QAAA,EA7CU,SA6CV;EACA,KAAA,EAAA,MAAA;EACA,IAAA,CAAA,EAAA,MAAA;EACA,OAAA,CAAA,EAAA,MAAA;EACA,QAAA,CAAA,EAAA,MAAA;EACA,SAAA,CAAA,EAAA,MAAA;CACA,EAAA,GA7CG,YA6CH,GAAA,IAAA;;;;;iBAPe,WAAA;;;;;;;;;GASb,mBAAmB"}

package/support/components/avatar-stack.js

@@ -23,6 +23,10 @@ const AvatarStackItem = ({ children, index, size = 44, spacing = 28, gapWidth =
 		children
 	} });
 };
+/**
+* Displays a compact row of agent avatars with optional branding and overflow
+* counts.
+*/
 function AvatarStack({ humanAgents, aiAgents, hideBranding = false, hideDefaultAIAgent = true, className, size = 44, spacing = 28, gapWidth = 3 }) {
 	const displayedHumanAgents = humanAgents.slice(0, 2);
 	const remainingHumanAgentsCount = Math.max(0, humanAgents.length - 2);

package/support/components/avatar-stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-stack.js","names":[],"sources":["../../../src/support/components/avatar-stack.tsx"],"sourcesContent":["import type { AvailableAIAgent, AvailableHumanAgent } from \"@cossistant/types\";\nimport { useRenderElement } from \"../../utils/use-render-element\";\nimport { cn } from \"../utils\";\nimport { Avatar } from \"./avatar\";\nimport { CossistantLogo } from \"./cossistant-branding\";\n\ntype AvatarStackProps = {\n\thumanAgents: AvailableHumanAgent[];\n\taiAgents: AvailableAIAgent[];\n\thideBranding?: boolean;\n\thideDefaultAIAgent?: boolean;\n\tclassName?: string;\n\t/** Size of avatars (default: 44px) */\n\tsize?: number;\n\t/** Space between avatars (default: 28px) */\n\tspacing?: number;\n\t/** Gap width between avatars (default: 2px) */\n\tgapWidth?: number;\n};\n\nexport const AvatarStackItem = ({\n\tchildren,\n\tindex,\n\tsize = 44,\n\tspacing = 28,\n\tgapWidth = 2,\n\tclassName,\n}: {\n\tchildren: React.ReactNode;\n\tindex: number;\n\tsize?: number;\n\tspacing?: number;\n\tgapWidth?: number;\n\tclassName?: string;\n}) => {\n\tconst isFirst = index === 0;\n\n\t// Calculate the circle radius for the mask cutout\n\tconst circleRadius = size * 0.5;\n\tconst cutoutRadius = circleRadius + gapWidth; // Add gap width to create visible border\n\tconst cutoutPosition = `${circleRadius - spacing}px`;\n\n\treturn useRenderElement(\n\t\t\"div\",\n\t\t{ className },\n\t\t{\n\t\t\tprops: {\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"relative grid place-items-center\",\n\t\t\t\t\t!isFirst && \"[mask-repeat:no-repeat] [mask-size:100%_100%]\"\n\t\t\t\t),\n\t\t\t\tstyle: {\n\t\t\t\t\twidth: `${size}px`,\n\t\t\t\t\theight: `${size}px`,\n\t\t\t\t\t// Apply mask only to non-first items\n\t\t\t\t\t...(isFirst\n\t\t\t\t\t\t? {}\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\tmask: `radial-gradient(${cutoutRadius}px ${cutoutRadius}px at ${cutoutPosition} 50%, transparent ${cutoutRadius}px, white ${cutoutRadius}px)`,\n\t\t\t\t\t\t\t\tWebkitMask: `radial-gradient(${cutoutRadius}px ${cutoutRadius}px at ${cutoutPosition} 50%, transparent ${cutoutRadius}px, white ${cutoutRadius}px)`,\n\t\t\t\t\t\t\t}),\n\t\t\t\t},\n\t\t\t\tchildren,\n\t\t\t},\n\t\t}\n\t);\n};\n\nexport function AvatarStack({\n\thumanAgents,\n\taiAgents,\n\thideBranding = false,\n\thideDefaultAIAgent = true,\n\tclassName,\n\tsize = 44,\n\tspacing = 28,\n\tgapWidth = 3,\n}: AvatarStackProps) {\n\tconst displayedHumanAgents = humanAgents.slice(0, 2);\n\tconst remainingHumanAgentsCount = Math.max(0, humanAgents.length - 2);\n\n\t// Create array of all items to display\n\tconst items = [\n\t\t...displayedHumanAgents.map((agent) => ({\n\t\t\ttype: \"human\" as const,\n\t\t\tagent,\n\t\t})),\n\t\t...(remainingHumanAgentsCount > 0\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: \"count\" as const,\n\t\t\t\t\t\tcount: remainingHumanAgentsCount,\n\t\t\t\t\t},\n\t\t\t\t]\n\t\t\t: []),\n\t\t...(hideDefaultAIAgent\n\t\t\t? []\n\t\t\t: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: \"ai\" as const,\n\t\t\t\t\t\tagent: aiAgents[0],\n\t\t\t\t\t},\n\t\t\t\t]),\n\t];\n\n\treturn useRenderElement(\n\t\t\"div\",\n\t\t{ className },\n\t\t{\n\t\t\tprops: {\n\t\t\t\tclassName: \"inline-grid items-center\",\n\t\t\t\tstyle: {\n\t\t\t\t\tgridTemplateColumns: `repeat(${items.length}, ${spacing}px)`,\n\t\t\t\t},\n\t\t\t\tchildren: items.map((item, index) => (\n\t\t\t\t\t<AvatarStackItem\n\t\t\t\t\t\tgapWidth={gapWidth}\n\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\tkey={`avatar-${index}`}\n\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\tspacing={spacing}\n\t\t\t\t\t>\n\t\t\t\t\t\t{item.type === \"human\" && (\n\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\tclassName={cn(\"size-full\")}\n\t\t\t\t\t\t\t\timage={item.agent.image}\n\t\t\t\t\t\t\t\tname={item.agent.name}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{item.type === \"count\" && (\n\t\t\t\t\t\t\t<div className=\"flex size-full items-center justify-center rounded-full bg-co-background-200 font-medium text-co-text-900 text-sm dark:bg-co-background-500\">\n\t\t\t\t\t\t\t\t+{item.count}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{item.type === \"ai\" && (\n\t\t\t\t\t\t\t<div className=\"flex size-full items-center justify-center rounded-full bg-co-background-200 dark:bg-co-background-600\">\n\t\t\t\t\t\t\t\t<CossistantLogo className=\"h-[50%] min-h-4 w-[50%] min-w-4\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AvatarStackItem>\n\t\t\t\t)),\n\t\t\t},\n\t\t}\n\t);\n}\n"],"mappings":";;;;;;;AAoBA,MAAa,mBAAmB,EAC/B,UACA,OACA,OAAO,IACP,UAAU,IACV,WAAW,GACX,gBAQK;CACL,MAAM,UAAU,UAAU;CAG1B,MAAM,eAAe,OAAO;CAC5B,MAAM,eAAe,eAAe;CACpC,MAAM,iBAAiB,GAAG,eAAe,QAAQ;AAEjD,QAAO,iBACN,OACA,EAAE,WAAW,EACb,EACC,OAAO;EACN,WAAW,GACV,oCACA,CAAC,WAAW,gDACZ;EACD,OAAO;GACN,OAAO,GAAG,KAAK;GACf,QAAQ,GAAG,KAAK;GAEhB,GAAI,UACD,EAAE,GACF;IACA,MAAM,mBAAmB,aAAa,KAAK,aAAa,QAAQ,eAAe,oBAAoB,aAAa,YAAY,aAAa;IACzI,YAAY,mBAAmB,aAAa,KAAK,aAAa,QAAQ,eAAe,oBAAoB,aAAa,YAAY,aAAa;IAC/I;GACH;EACD;EACA,EACD,CACD;;AAGF,SAAgB,YAAY,EAC3B,aACA,UACA,eAAe,OACf,qBAAqB,MACrB,WACA,OAAO,IACP,UAAU,IACV,WAAW,KACS;CACpB,MAAM,uBAAuB,YAAY,MAAM,GAAG,EAAE;CACpD,MAAM,4BAA4B,KAAK,IAAI,GAAG,YAAY,SAAS,EAAE;CAGrE,MAAM,QAAQ;EACb,GAAG,qBAAqB,KAAK,WAAW;GACvC,MAAM;GACN;GACA,EAAE;EACH,GAAI,4BAA4B,IAC7B,CACA;GACC,MAAM;GACN,OAAO;GACP,CACD,GACA,EAAE;EACL,GAAI,qBACD,EAAE,GACF,CACA;GACC,MAAM;GACN,OAAO,SAAS;GAChB,CACD;EACH;AAED,QAAO,iBACN,OACA,EAAE,WAAW,EACb,EACC,OAAO;EACN,WAAW;EACX,OAAO,EACN,qBAAqB,UAAU,MAAM,OAAO,IAAI,QAAQ,MACxD;EACD,UAAU,MAAM,KAAK,MAAM,UAC1B,qBAAC;GACU;GACH;GAED;GACG;;IAER,KAAK,SAAS,WACd,oBAAC;KACA,WAAW,GAAG,YAAY;KAC1B,OAAO,KAAK,MAAM;KAClB,MAAM,KAAK,MAAM;MAChB;IAEF,KAAK,SAAS,WACd,qBAAC;KAAI,WAAU;gBAA8I,KAC1J,KAAK;MACF;IAEN,KAAK,SAAS,QACd,oBAAC;KAAI,WAAU;eACd,oBAAC,kBAAe,WAAU,oCAAoC;MACzD;;KAnBF,UAAU,QAqBE,CACjB;EACF,EACD,CACD"}
+{"version":3,"file":"avatar-stack.js","names":[],"sources":["../../../src/support/components/avatar-stack.tsx"],"sourcesContent":["import type { AvailableAIAgent, AvailableHumanAgent } from \"@cossistant/types\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { useRenderElement } from \"../../utils/use-render-element\";\nimport { cn } from \"../utils\";\nimport { Avatar } from \"./avatar\";\nimport { CossistantLogo } from \"./cossistant-branding\";\n\ntype AvatarStackProps = {\n\thumanAgents: AvailableHumanAgent[];\n\taiAgents: AvailableAIAgent[];\n\thideBranding?: boolean;\n\thideDefaultAIAgent?: boolean;\n\tclassName?: string;\n\t/** Size of avatars (default: 44px) */\n\tsize?: number;\n\t/** Space between avatars (default: 28px) */\n\tspacing?: number;\n\t/** Gap width between avatars (default: 2px) */\n\tgapWidth?: number;\n};\n\nexport const AvatarStackItem = ({\n\tchildren,\n\tindex,\n\tsize = 44,\n\tspacing = 28,\n\tgapWidth = 2,\n\tclassName,\n}: {\n\tchildren: ReactNode;\n\tindex: number;\n\tsize?: number;\n\tspacing?: number;\n\tgapWidth?: number;\n\tclassName?: string;\n}): ReactElement | null => {\n\tconst isFirst = index === 0;\n\n\t// Calculate the circle radius for the mask cutout\n\tconst circleRadius = size * 0.5;\n\tconst cutoutRadius = circleRadius + gapWidth; // Add gap width to create visible border\n\tconst cutoutPosition = `${circleRadius - spacing}px`;\n\n\treturn useRenderElement(\n\t\t\"div\",\n\t\t{ className },\n\t\t{\n\t\t\tprops: {\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"relative grid place-items-center\",\n\t\t\t\t\t!isFirst && \"[mask-repeat:no-repeat] [mask-size:100%_100%]\"\n\t\t\t\t),\n\t\t\t\tstyle: {\n\t\t\t\t\twidth: `${size}px`,\n\t\t\t\t\theight: `${size}px`,\n\t\t\t\t\t// Apply mask only to non-first items\n\t\t\t\t\t...(isFirst\n\t\t\t\t\t\t? {}\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\tmask: `radial-gradient(${cutoutRadius}px ${cutoutRadius}px at ${cutoutPosition} 50%, transparent ${cutoutRadius}px, white ${cutoutRadius}px)`,\n\t\t\t\t\t\t\t\tWebkitMask: `radial-gradient(${cutoutRadius}px ${cutoutRadius}px at ${cutoutPosition} 50%, transparent ${cutoutRadius}px, white ${cutoutRadius}px)`,\n\t\t\t\t\t\t\t}),\n\t\t\t\t},\n\t\t\t\tchildren,\n\t\t\t},\n\t\t}\n\t);\n};\n\n/**\n * Displays a compact row of agent avatars with optional branding and overflow\n * counts.\n */\nexport function AvatarStack({\n\thumanAgents,\n\taiAgents,\n\thideBranding = false,\n\thideDefaultAIAgent = true,\n\tclassName,\n\tsize = 44,\n\tspacing = 28,\n\tgapWidth = 3,\n}: AvatarStackProps): ReactElement | null {\n\tconst displayedHumanAgents = humanAgents.slice(0, 2);\n\tconst remainingHumanAgentsCount = Math.max(0, humanAgents.length - 2);\n\n\t// Create array of all items to display\n\tconst items = [\n\t\t...displayedHumanAgents.map((agent) => ({\n\t\t\ttype: \"human\" as const,\n\t\t\tagent,\n\t\t})),\n\t\t...(remainingHumanAgentsCount > 0\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: \"count\" as const,\n\t\t\t\t\t\tcount: remainingHumanAgentsCount,\n\t\t\t\t\t},\n\t\t\t\t]\n\t\t\t: []),\n\t\t...(hideDefaultAIAgent\n\t\t\t? []\n\t\t\t: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: \"ai\" as const,\n\t\t\t\t\t\tagent: aiAgents[0],\n\t\t\t\t\t},\n\t\t\t\t]),\n\t];\n\n\treturn useRenderElement(\n\t\t\"div\",\n\t\t{ className },\n\t\t{\n\t\t\tprops: {\n\t\t\t\tclassName: \"inline-grid items-center\",\n\t\t\t\tstyle: {\n\t\t\t\t\tgridTemplateColumns: `repeat(${items.length}, ${spacing}px)`,\n\t\t\t\t},\n\t\t\t\tchildren: items.map((item, index) => (\n\t\t\t\t\t<AvatarStackItem\n\t\t\t\t\t\tgapWidth={gapWidth}\n\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\tkey={`avatar-${index}`}\n\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\tspacing={spacing}\n\t\t\t\t\t>\n\t\t\t\t\t\t{item.type === \"human\" && (\n\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\tclassName={cn(\"size-full\")}\n\t\t\t\t\t\t\t\timage={item.agent.image}\n\t\t\t\t\t\t\t\tname={item.agent.name}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{item.type === \"count\" && (\n\t\t\t\t\t\t\t<div className=\"flex size-full items-center justify-center rounded-full bg-co-background-200 font-medium text-co-text-900 text-sm dark:bg-co-background-500\">\n\t\t\t\t\t\t\t\t+{item.count}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{item.type === \"ai\" && (\n\t\t\t\t\t\t\t<div className=\"flex size-full items-center justify-center rounded-full bg-co-background-200 dark:bg-co-background-600\">\n\t\t\t\t\t\t\t\t<CossistantLogo className=\"h-[50%] min-h-4 w-[50%] min-w-4\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AvatarStackItem>\n\t\t\t\t)),\n\t\t\t},\n\t\t}\n\t);\n}\n"],"mappings":";;;;;;;AAqBA,MAAa,mBAAmB,EAC/B,UACA,OACA,OAAO,IACP,UAAU,IACV,WAAW,GACX,gBAQ0B;CAC1B,MAAM,UAAU,UAAU;CAG1B,MAAM,eAAe,OAAO;CAC5B,MAAM,eAAe,eAAe;CACpC,MAAM,iBAAiB,GAAG,eAAe,QAAQ;AAEjD,QAAO,iBACN,OACA,EAAE,WAAW,EACb,EACC,OAAO;EACN,WAAW,GACV,oCACA,CAAC,WAAW,gDACZ;EACD,OAAO;GACN,OAAO,GAAG,KAAK;GACf,QAAQ,GAAG,KAAK;GAEhB,GAAI,UACD,EAAE,GACF;IACA,MAAM,mBAAmB,aAAa,KAAK,aAAa,QAAQ,eAAe,oBAAoB,aAAa,YAAY,aAAa;IACzI,YAAY,mBAAmB,aAAa,KAAK,aAAa,QAAQ,eAAe,oBAAoB,aAAa,YAAY,aAAa;IAC/I;GACH;EACD;EACA,EACD,CACD;;;;;;AAOF,SAAgB,YAAY,EAC3B,aACA,UACA,eAAe,OACf,qBAAqB,MACrB,WACA,OAAO,IACP,UAAU,IACV,WAAW,KAC8B;CACzC,MAAM,uBAAuB,YAAY,MAAM,GAAG,EAAE;CACpD,MAAM,4BAA4B,KAAK,IAAI,GAAG,YAAY,SAAS,EAAE;CAGrE,MAAM,QAAQ;EACb,GAAG,qBAAqB,KAAK,WAAW;GACvC,MAAM;GACN;GACA,EAAE;EACH,GAAI,4BAA4B,IAC7B,CACA;GACC,MAAM;GACN,OAAO;GACP,CACD,GACA,EAAE;EACL,GAAI,qBACD,EAAE,GACF,CACA;GACC,MAAM;GACN,OAAO,SAAS;GAChB,CACD;EACH;AAED,QAAO,iBACN,OACA,EAAE,WAAW,EACb,EACC,OAAO;EACN,WAAW;EACX,OAAO,EACN,qBAAqB,UAAU,MAAM,OAAO,IAAI,QAAQ,MACxD;EACD,UAAU,MAAM,KAAK,MAAM,UAC1B,qBAAC;GACU;GACH;GAED;GACG;;IAER,KAAK,SAAS,WACd,oBAAC;KACA,WAAW,GAAG,YAAY;KAC1B,OAAO,KAAK,MAAM;KAClB,MAAM,KAAK,MAAM;MAChB;IAEF,KAAK,SAAS,WACd,qBAAC;KAAI,WAAU;gBAA8I,KAC1J,KAAK;MACF;IAEN,KAAK,SAAS,QACd,oBAAC;KAAI,WAAU;eACd,oBAAC,kBAAe,WAAU,oCAAoC;MACzD;;KAnBF,UAAU,QAqBE,CACjB;EACF,EACD,CACD"}

package/support/components/avatar.d.ts

@@ -1,15 +1,20 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import { ReactElement } from "react";
 
 //#region src/support/components/avatar.d.ts
+type AvatarProps = {
+  className?: string;
+  image?: string | null;
+  name: string;
+};
+/**
+ * Renders a circular avatar with graceful fallbacks when no image is
+ * available.
+ */
 declare function Avatar({
   className,
   image,
   name
-}: {
-  className?: string;
-  image?: string | null;
-  name: string;
-}): react_jsx_runtime3.JSX.Element;
+}: AvatarProps): ReactElement;
 //#endregion
 export { Avatar };
 //# sourceMappingURL=avatar.d.ts.map

package/support/components/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","names":[],"sources":["../../../src/support/components/avatar.tsx"],"sourcesContent":[],"mappings":";;;iBAOgB,MAAA;;;;;;;EAAA,IAAA,EAAA,MAAM;CAAA,CAAA,EAQrB,kBAAA,CAAA,GAAA,CAAA,OARqB"}
+{"version":3,"file":"avatar.d.ts","names":[],"sources":["../../../src/support/components/avatar.tsx"],"sourcesContent":[],"mappings":";;;KASK,WAAA;;EAAA,KAAA,CAAA,EAAA,MAAW,GAAA,IAAA;EAUA,IAAA,EAAA,MAAM;CAAG;;;;;AAAoD,iBAA7D,MAAA,CAA6D;EAAA,SAAA;EAAA,KAAA;EAAA;AAAA,CAAA,EAA1B,WAA0B,CAAA,EAAZ,YAAY"}

package/support/components/avatar.js

@@ -5,6 +5,10 @@ import { AvatarImage } from "../../primitives/avatar/image.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/support/components/avatar.tsx
+/**
+* Renders a circular avatar with graceful fallbacks when no image is
+* available.
+*/
 function Avatar({ className, image, name }) {
 	return /* @__PURE__ */ jsxs(Avatar$1, {
 		className: cn("flex size-9 items-center justify-center overflow-clip rounded-full bg-co-background-200 dark:bg-co-background-500", className),

package/support/components/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":["AvatarPrimitive"],"sources":["../../../src/support/components/avatar.tsx"],"sourcesContent":["import {\n\tAvatarFallback,\n\tAvatarImage,\n\tAvatar as AvatarPrimitive,\n} from \"../../primitives/avatar\";\nimport { cn } from \"../utils\";\n\nexport function Avatar({\n\tclassName,\n\timage,\n\tname,\n}: {\n\tclassName?: string;\n\timage?: string | null;\n\tname: string;\n}) {\n\treturn (\n\t\t<AvatarPrimitive\n\t\t\tclassName={cn(\n\t\t\t\t\"flex size-9 items-center justify-center overflow-clip rounded-full bg-co-background-200 dark:bg-co-background-500\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{image && <AvatarImage alt={name} src={image} />}\n\t\t\t<AvatarFallback className=\"font-medium text-xs\" name={name} />\n\t\t</AvatarPrimitive>\n\t);\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,OAAO,EACtB,WACA,OACA,QAKE;AACF,QACC,qBAACA;EACA,WAAW,GACV,qHACA,UACA;aAEA,SAAS,oBAAC;GAAY,KAAK;GAAM,KAAK;IAAS,EAChD,oBAAC;GAAe,WAAU;GAA4B;IAAQ;GAC7C"}
+{"version":3,"file":"avatar.js","names":["AvatarPrimitive"],"sources":["../../../src/support/components/avatar.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\nimport {\n\tAvatarFallback,\n\tAvatarImage,\n\tAvatar as AvatarPrimitive,\n} from \"../../primitives/avatar\";\nimport { cn } from \"../utils\";\n\ntype AvatarProps = {\n\tclassName?: string;\n\timage?: string | null;\n\tname: string;\n};\n\n/**\n * Renders a circular avatar with graceful fallbacks when no image is\n * available.\n */\nexport function Avatar({ className, image, name }: AvatarProps): ReactElement {\n\treturn (\n\t\t<AvatarPrimitive\n\t\t\tclassName={cn(\n\t\t\t\t\"flex size-9 items-center justify-center overflow-clip rounded-full bg-co-background-200 dark:bg-co-background-500\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{image && <AvatarImage alt={name} src={image} />}\n\t\t\t<AvatarFallback className=\"font-medium text-xs\" name={name} />\n\t\t</AvatarPrimitive>\n\t);\n}\n"],"mappings":";;;;;;;;;;;AAmBA,SAAgB,OAAO,EAAE,WAAW,OAAO,QAAmC;AAC7E,QACC,qBAACA;EACA,WAAW,GACV,qHACA,UACA;aAEA,SAAS,oBAAC;GAAY,KAAK;GAAM,KAAK;IAAS,EAChD,oBAAC;GAAe,WAAU;GAA4B;IAAQ;GAC7C"}

package/support/components/bubble.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bubble.d.ts","names":[],"sources":["../../../src/support/components/bubble.tsx"],"sourcesContent":[],"mappings":";;;KAQY,WAAA;;AAAZ,CAAA;AAIa,cAAA,MAiEZ,EAjEoB,KAAA,CAAM,EAiE1B,CAjE6B,WAiE7B,CAAA"}
+{"version":3,"file":"bubble.d.ts","names":[],"sources":["../../../src/support/components/bubble.tsx"],"sourcesContent":[],"mappings":";;;KASY,WAAA;;AAAZ,CAAA;AAIa,cAAA,MAAiB,EAAT,KAAA,CAAM,EAAG,CAAA,WAAD,CAAA"}

package/support/components/bubble.js

@@ -2,6 +2,7 @@
 
 
 import { cn } from "../utils/index.js";
+import { BouncingDots } from "./typing-indicator.js";
 import { SupportBubble } from "../../primitives/bubble.js";
 import icons_default from "./icons.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -10,7 +11,7 @@ import { AnimatePresence, motion } from "motion/react";
 //#region src/support/components/bubble.tsx
 const Bubble = ({ className }) => /* @__PURE__ */ jsx(SupportBubble, {
 	className: cn("relative flex size-12 cursor-pointer items-center justify-center rounded-full bg-co-primary text-co-primary-foreground transition-colors hover:bg-co-primary/90 data-[open=true]:bg-co-primary/90", className),
-	children: ({ isOpen, unreadCount }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AnimatePresence, {
+	children: ({ isOpen, unreadCount, isTyping }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AnimatePresence, {
 		mode: "wait",
 		children: isOpen ? /* @__PURE__ */ jsx(motion.div, {
 			animate: {
@@ -41,7 +42,30 @@ const Bubble = ({ className }) => /* @__PURE__ */ jsx(SupportBubble, {
 				className: "h-5 w-5",
 				name: "chevron-down"
 			})
-		}, "chevron") : /* @__PURE__ */ jsx(motion.div, {
+		}, "chevron") : isTyping ? /* @__PURE__ */ jsx(motion.span, {
+			animate: {
+				opacity: 1,
+				scale: 1,
+				transition: {
+					duration: .2,
+					ease: "easeOut"
+				}
+			},
+			className: "pointer-events-none flex items-center rounded-full text-primary",
+			exit: {
+				opacity: 0,
+				scale: .9,
+				transition: {
+					duration: .1,
+					ease: "easeIn"
+				}
+			},
+			initial: {
+				opacity: 0,
+				scale: .9
+			},
+			children: /* @__PURE__ */ jsx(BouncingDots, { className: "bg-co-primary-foreground" })
+		}, "typing-indicator") : /* @__PURE__ */ jsx(motion.div, {
 			animate: {
 				scale: 1,
 				rotate: 0,
@@ -72,12 +96,12 @@ const Bubble = ({ className }) => /* @__PURE__ */ jsx(SupportBubble, {
 				variant: "filled"
 			})
 		}, "chat")
-	}), unreadCount > 0 && /* @__PURE__ */ jsx(motion.span, {
+	}), unreadCount > 0 && /* @__PURE__ */ jsx(motion.div, {
 		animate: {
 			scale: 1,
 			opacity: 1
 		},
-		className: "-top-1 -right-1 absolute flex h-4 w-4 items-center justify-center rounded-full bg-co-destructive font-medium text-co-destructive-foreground text-xs",
+		className: "-top-0 -right-0 absolute flex h-3 w-3 items-center justify-center rounded-full bg-co-destructive font-medium text-[10px] text-co-destructive-foreground text-white text-xs",
 		exit: {
 			scale: 0,
 			opacity: 0
@@ -85,8 +109,7 @@ const Bubble = ({ className }) => /* @__PURE__ */ jsx(SupportBubble, {
 		initial: {
 			scale: 0,
 			opacity: 0
-		},
-		children: unreadCount
+		}
 	})] })
 });
 

package/support/components/bubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"bubble.js","names":["Bubble: React.FC<BubbleProps>","Primitive.Bubble","Icon"],"sources":["../../../src/support/components/bubble.tsx"],"sourcesContent":["\"use client\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\nimport type React from \"react\";\nimport * as Primitive from \"../../primitives\";\nimport { cn } from \"../utils\";\nimport Icon from \"./icons\";\n\nexport type BubbleProps = {\n\tclassName?: string;\n};\n\nexport const Bubble: React.FC<BubbleProps> = ({ className }) => (\n\t<Primitive.Bubble\n\t\tclassName={cn(\n\t\t\t\"relative flex size-12 cursor-pointer items-center justify-center rounded-full bg-co-primary text-co-primary-foreground transition-colors hover:bg-co-primary/90 data-[open=true]:bg-co-primary/90\",\n\t\t\tclassName\n\t\t)}\n\t>\n\t\t{({ isOpen, unreadCount }) => (\n\t\t\t<>\n\t\t\t\t<AnimatePresence mode=\"wait\">\n\t\t\t\t\t{isOpen ? (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\tscale: 1,\n\t\t\t\t\t\t\t\trotate: 0,\n\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\ttransition: { duration: 0.2, ease: \"easeOut\" },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tclassName=\"flex items-center justify-center\"\n\t\t\t\t\t\t\texit={{\n\t\t\t\t\t\t\t\tscale: 0.9,\n\t\t\t\t\t\t\t\trotate: -45,\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\ttransition: { duration: 0.1, ease: \"easeIn\" },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tinitial={{ scale: 0.9, rotate: 45, opacity: 0 }}\n\t\t\t\t\t\t\tkey=\"chevron\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon className=\"h-5 w-5\" name=\"chevron-down\" />\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\tscale: 1,\n\t\t\t\t\t\t\t\trotate: 0,\n\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\ttransition: { duration: 0.2, ease: \"easeOut\" },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tclassName=\"flex items-center justify-center\"\n\t\t\t\t\t\t\texit={{\n\t\t\t\t\t\t\t\tscale: 0.9,\n\t\t\t\t\t\t\t\trotate: 45,\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\ttransition: { duration: 0.1, ease: \"easeIn\" },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tinitial={{ scale: 0.9, rotate: -45, opacity: 0 }}\n\t\t\t\t\t\t\tkey=\"chat\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon className=\"h-6 w-6\" name=\"chat\" variant=\"filled\" />\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t)}\n\t\t\t\t</AnimatePresence>\n\t\t\t\t{unreadCount > 0 && (\n\t\t\t\t\t<motion.span\n\t\t\t\t\t\tanimate={{ scale: 1, opacity: 1 }}\n\t\t\t\t\t\tclassName=\"-top-1 -right-1 absolute flex h-4 w-4 items-center justify-center rounded-full bg-co-destructive font-medium text-co-destructive-foreground text-xs\"\n\t\t\t\t\t\texit={{ scale: 0, opacity: 0 }}\n\t\t\t\t\t\tinitial={{ scale: 0, opacity: 0 }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{unreadCount}\n\t\t\t\t\t</motion.span>\n\t\t\t\t)}\n\t\t\t</>\n\t\t)}\n\t</Primitive.Bubble>\n);\n"],"mappings":";;;;;;;;;;AAYA,MAAaA,UAAiC,EAAE,gBAC/C,oBAACC;CACA,WAAW,GACV,qMACA,UACA;YAEC,EAAE,QAAQ,kBACX,4CACC,oBAAC;EAAgB,MAAK;YACpB,SACA,oBAAC,OAAO;GACP,SAAS;IACR,OAAO;IACP,QAAQ;IACR,SAAS;IACT,YAAY;KAAE,UAAU;KAAK,MAAM;KAAW;IAC9C;GACD,WAAU;GACV,MAAM;IACL,OAAO;IACP,QAAQ;IACR,SAAS;IACT,YAAY;KAAE,UAAU;KAAK,MAAM;KAAU;IAC7C;GACD,SAAS;IAAE,OAAO;IAAK,QAAQ;IAAI,SAAS;IAAG;aAG/C,oBAACC;IAAK,WAAU;IAAU,MAAK;KAAiB;KAF5C,UAGQ,GAEb,oBAAC,OAAO;GACP,SAAS;IACR,OAAO;IACP,QAAQ;IACR,SAAS;IACT,YAAY;KAAE,UAAU;KAAK,MAAM;KAAW;IAC9C;GACD,WAAU;GACV,MAAM;IACL,OAAO;IACP,QAAQ;IACR,SAAS;IACT,YAAY;KAAE,UAAU;KAAK,MAAM;KAAU;IAC7C;GACD,SAAS;IAAE,OAAO;IAAK,QAAQ;IAAK,SAAS;IAAG;aAGhD,oBAACA;IAAK,WAAU;IAAU,MAAK;IAAO,SAAQ;KAAW;KAFrD,OAGQ;GAEG,EACjB,cAAc,KACd,oBAAC,OAAO;EACP,SAAS;GAAE,OAAO;GAAG,SAAS;GAAG;EACjC,WAAU;EACV,MAAM;GAAE,OAAO;GAAG,SAAS;GAAG;EAC9B,SAAS;GAAE,OAAO;GAAG,SAAS;GAAG;YAEhC;GACY,IAEb;EAEc"}
+{"version":3,"file":"bubble.js","names":["Bubble: React.FC<BubbleProps>","Primitive.Bubble","Icon"],"sources":["../../../src/support/components/bubble.tsx"],"sourcesContent":["\"use client\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\nimport type React from \"react\";\nimport * as Primitive from \"../../primitives\";\nimport { cn } from \"../utils\";\nimport Icon from \"./icons\";\nimport { BouncingDots } from \"./typing-indicator\";\n\nexport type BubbleProps = {\n\tclassName?: string;\n};\n\nexport const Bubble: React.FC<BubbleProps> = ({ className }) => (\n\t<Primitive.Bubble\n\t\tclassName={cn(\n\t\t\t\"relative flex size-12 cursor-pointer items-center justify-center rounded-full bg-co-primary text-co-primary-foreground transition-colors hover:bg-co-primary/90 data-[open=true]:bg-co-primary/90\",\n\t\t\tclassName\n\t\t)}\n\t>\n\t\t{({ isOpen, unreadCount, isTyping }) => (\n\t\t\t<>\n\t\t\t\t<AnimatePresence mode=\"wait\">\n\t\t\t\t\t{isOpen ? (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\tscale: 1,\n\t\t\t\t\t\t\t\trotate: 0,\n\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\ttransition: { duration: 0.2, ease: \"easeOut\" },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tclassName=\"flex items-center justify-center\"\n\t\t\t\t\t\t\texit={{\n\t\t\t\t\t\t\t\tscale: 0.9,\n\t\t\t\t\t\t\t\trotate: -45,\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\ttransition: { duration: 0.1, ease: \"easeIn\" },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tinitial={{ scale: 0.9, rotate: 45, opacity: 0 }}\n\t\t\t\t\t\t\tkey=\"chevron\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon className=\"h-5 w-5\" name=\"chevron-down\" />\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t) : isTyping ? (\n\t\t\t\t\t\t<motion.span\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\tscale: 1,\n\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\tduration: 0.2,\n\t\t\t\t\t\t\t\t\tease: \"easeOut\",\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tclassName=\"pointer-events-none flex items-center rounded-full text-primary\"\n\t\t\t\t\t\t\texit={{\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\tscale: 0.9,\n\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\tduration: 0.1,\n\t\t\t\t\t\t\t\t\tease: \"easeIn\",\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tinitial={{ opacity: 0, scale: 0.9 }}\n\t\t\t\t\t\t\tkey=\"typing-indicator\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<BouncingDots className=\"bg-co-primary-foreground\" />\n\t\t\t\t\t\t</motion.span>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\tscale: 1,\n\t\t\t\t\t\t\t\trotate: 0,\n\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\ttransition: { duration: 0.2, ease: \"easeOut\" },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tclassName=\"flex items-center justify-center\"\n\t\t\t\t\t\t\texit={{\n\t\t\t\t\t\t\t\tscale: 0.9,\n\t\t\t\t\t\t\t\trotate: 45,\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\ttransition: { duration: 0.1, ease: \"easeIn\" },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tinitial={{ scale: 0.9, rotate: -45, opacity: 0 }}\n\t\t\t\t\t\t\tkey=\"chat\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon className=\"h-6 w-6\" name=\"chat\" variant=\"filled\" />\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t)}\n\t\t\t\t</AnimatePresence>\n\n\t\t\t\t{unreadCount > 0 && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tanimate={{ scale: 1, opacity: 1 }}\n\t\t\t\t\t\tclassName=\"-top-0 -right-0 absolute flex h-3 w-3 items-center justify-center rounded-full bg-co-destructive font-medium text-[10px] text-co-destructive-foreground text-white text-xs\"\n\t\t\t\t\t\texit={{ scale: 0, opacity: 0 }}\n\t\t\t\t\t\tinitial={{ scale: 0, opacity: 0 }}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</>\n\t\t)}\n\t</Primitive.Bubble>\n);\n"],"mappings":";;;;;;;;;;;AAaA,MAAaA,UAAiC,EAAE,gBAC/C,oBAACC;CACA,WAAW,GACV,qMACA,UACA;YAEC,EAAE,QAAQ,aAAa,eACxB,4CACC,oBAAC;EAAgB,MAAK;YACpB,SACA,oBAAC,OAAO;GACP,SAAS;IACR,OAAO;IACP,QAAQ;IACR,SAAS;IACT,YAAY;KAAE,UAAU;KAAK,MAAM;KAAW;IAC9C;GACD,WAAU;GACV,MAAM;IACL,OAAO;IACP,QAAQ;IACR,SAAS;IACT,YAAY;KAAE,UAAU;KAAK,MAAM;KAAU;IAC7C;GACD,SAAS;IAAE,OAAO;IAAK,QAAQ;IAAI,SAAS;IAAG;aAG/C,oBAACC;IAAK,WAAU;IAAU,MAAK;KAAiB;KAF5C,UAGQ,GACV,WACH,oBAAC,OAAO;GACP,SAAS;IACR,SAAS;IACT,OAAO;IACP,YAAY;KACX,UAAU;KACV,MAAM;KACN;IACD;GACD,WAAU;GACV,MAAM;IACL,SAAS;IACT,OAAO;IACP,YAAY;KACX,UAAU;KACV,MAAM;KACN;IACD;GACD,SAAS;IAAE,SAAS;IAAG,OAAO;IAAK;aAGnC,oBAAC,gBAAa,WAAU,6BAA6B;KAFjD,mBAGS,GAEd,oBAAC,OAAO;GACP,SAAS;IACR,OAAO;IACP,QAAQ;IACR,SAAS;IACT,YAAY;KAAE,UAAU;KAAK,MAAM;KAAW;IAC9C;GACD,WAAU;GACV,MAAM;IACL,OAAO;IACP,QAAQ;IACR,SAAS;IACT,YAAY;KAAE,UAAU;KAAK,MAAM;KAAU;IAC7C;GACD,SAAS;IAAE,OAAO;IAAK,QAAQ;IAAK,SAAS;IAAG;aAGhD,oBAACA;IAAK,WAAU;IAAU,MAAK;IAAO,SAAQ;KAAW;KAFrD,OAGQ;GAEG,EAEjB,cAAc,KACd,oBAAC,OAAO;EACP,SAAS;GAAE,OAAO;GAAG,SAAS;GAAG;EACjC,WAAU;EACV,MAAM;GAAE,OAAO;GAAG,SAAS;GAAG;EAC9B,SAAS;GAAE,OAAO;GAAG,SAAS;GAAG;GAChC,IAED;EAEc"}

package/support/components/button.d.ts

@@ -1,20 +1,23 @@
 import * as React$1 from "react";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
-import * as class_variance_authority_types0 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_dist_types0 from "class-variance-authority/dist/types";
 
 //#region src/support/components/button.d.ts
 declare const coButtonVariants: (props?: ({
-  variant?: "default" | "tab" | "secondary" | "ghost" | "outline" | "tab-selected" | null | undefined;
+  variant?: "tab" | "default" | "secondary" | "ghost" | "outline" | "tab-selected" | null | undefined;
   size?: "default" | "large" | "icon" | null | undefined;
-} & class_variance_authority_types0.ClassProp) | undefined) => string;
+} & class_variance_authority_dist_types0.ClassProp) | undefined) => string;
 type CossistantButtonProps = React$1.ComponentProps<"button"> & VariantProps<typeof coButtonVariants>;
+/**
+ * Styled button primitive that forwards variant and size props to the shared
+ * design tokens.
+ */
 declare function Button({
   className,
   variant,
   size,
   ...props
-}: CossistantButtonProps): react_jsx_runtime5.JSX.Element;
+}: CossistantButtonProps): React$1.ReactElement;
 //#endregion
 export { Button, CossistantButtonProps, coButtonVariants };
 //# sourceMappingURL=button.d.ts.map

package/support/components/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","names":[],"sources":["../../../src/support/components/button.tsx"],"sourcesContent":[],"mappings":";;;;;;cAKa;;;IA4BZ,+BAAA,CAAA;AA5BY,KA8BD,qBAAA,GAAwB,OAAA,CAAM,cAFzC,CAAA,QAAA,CAAA,GAGA,YAHA,CAAA,OAGoB,gBAHpB,CAAA;AAEW,iBAGI,MAAA,CAHiB;EAAA,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,GAAA;AAAA,CAAA,EAQ9B,qBAR8B,CAAA,EAQT,kBAAA,CAAA,GAAA,CAAA,OARS"}
+{"version":3,"file":"button.d.ts","names":[],"sources":["../../../src/support/components/button.tsx"],"sourcesContent":[],"mappings":";;;;;cAKa,wBA4BZ;;;AA5BD,CAAA,GA4BC,oCAAA,CAAA,SAAA,CAAA,GAAA,SAAA,EAAA,GAAA,MAAA;AAEW,KAAA,qBAAA,GAAwB,OAAA,CAAM,cAAT,CAAA,QAAA,CAAA,GAChC,YADgC,CAAA,OACZ,gBADY,CAAA;;;;;AAOjB,iBAAA,MAAA,CAAM;EAAA,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,GAAA;AAAA,CAAA,EAKnB,qBALmB,CAAA,EAKK,OAAA,CAAM,YALX"}

package/support/components/button.js

@@ -1,7 +1,7 @@
 import { cn } from "../utils/index.js";
 import { Button as Button$1 } from "../../primitives/button.js";
-import { cva } from "../../node_modules/class-variance-authority/dist/index.js";
 import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
 
 //#region src/support/components/button.tsx
 const coButtonVariants = cva("group/btn inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md border font-medium text-sm outline-none transition-all hover:cursor-pointer focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
@@ -25,6 +25,10 @@ const coButtonVariants = cva("group/btn inline-flex shrink-0 items-center justif
 		size: "default"
 	}
 });
+/**
+* Styled button primitive that forwards variant and size props to the shared
+* design tokens.
+*/
 function Button({ className, variant, size,...props }) {
 	return /* @__PURE__ */ jsx(Button$1, {
 		className: cn(coButtonVariants({

package/support/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["ButtonPrimitive"],"sources":["../../../src/support/components/button.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { Button as ButtonPrimitive } from \"../../primitives/button\";\nimport { cn } from \"../utils\";\n\nexport const coButtonVariants = cva(\n\t\"group/btn inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md border font-medium text-sm outline-none transition-all hover:cursor-pointer focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault:\n\t\t\t\t\t\"bg-co-primary text-co-primary-foreground hover:bg-co-primary/90\",\n\t\t\t\tsecondary:\n\t\t\t\t\t\"border-co-border/50 bg-co-background-50 hover:bg-co-background-100 hover:text-co-foreground dark:bg-co-background-300 dark:hover:bg-co-background-400\",\n\t\t\t\tghost:\n\t\t\t\t\t\"border-transparent hover:bg-co-background-200 hover:text-co-foreground dark:hover:bg-co-background-300\",\n\t\t\t\toutline:\n\t\t\t\t\t\"border border-co-border bg-co-background hover:bg-co-background-100 dark:bg-co-background-200 dark:hover:bg-co-background-300\",\n\t\t\t\ttab: \"opacity-40 hover:bg-co-background-100 hover:text-co-foreground hover:opacity-90 dark:hover:bg-co-background-200\",\n\t\t\t\t\"tab-selected\":\n\t\t\t\t\t\"hover:bg-co-background-100 hover:text-co-foreground dark:hover:bg-co-background-200\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-8 px-4 py-2 has-[>svg]:px-3\",\n\t\t\t\tlarge: \"h-14 px-6 has-[>svg]:px-4\",\n\t\t\t\ticon: \"size-6\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t},\n\t}\n);\n\nexport type CossistantButtonProps = React.ComponentProps<\"button\"> &\n\tVariantProps<typeof coButtonVariants>;\n\nexport function Button({\n\tclassName,\n\tvariant,\n\tsize,\n\t...props\n}: CossistantButtonProps) {\n\treturn (\n\t\t<ButtonPrimitive\n\t\t\tclassName={cn(coButtonVariants({ variant, size, className }))}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;AAKA,MAAa,mBAAmB,IAC/B,qeACA;CACC,UAAU;EACT,SAAS;GACR,SACC;GACD,WACC;GACD,OACC;GACD,SACC;GACD,KAAK;GACL,gBACC;GACD;EACD,MAAM;GACL,SAAS;GACT,OAAO;GACP,MAAM;GACN;EACD;CACD,iBAAiB;EAChB,SAAS;EACT,MAAM;EACN;CACD,CACD;AAKD,SAAgB,OAAO,EACtB,WACA,SACA,KACA,GAAG,SACsB;AACzB,QACC,oBAACA;EACA,WAAW,GAAG,iBAAiB;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC;EAC7D,GAAI;GACH"}
+{"version":3,"file":"button.js","names":["ButtonPrimitive"],"sources":["../../../src/support/components/button.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { Button as ButtonPrimitive } from \"../../primitives/button\";\nimport { cn } from \"../utils\";\n\nexport const coButtonVariants = cva(\n\t\"group/btn inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md border font-medium text-sm outline-none transition-all hover:cursor-pointer focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault:\n\t\t\t\t\t\"bg-co-primary text-co-primary-foreground hover:bg-co-primary/90\",\n\t\t\t\tsecondary:\n\t\t\t\t\t\"border-co-border/50 bg-co-background-50 hover:bg-co-background-100 hover:text-co-foreground dark:bg-co-background-300 dark:hover:bg-co-background-400\",\n\t\t\t\tghost:\n\t\t\t\t\t\"border-transparent hover:bg-co-background-200 hover:text-co-foreground dark:hover:bg-co-background-300\",\n\t\t\t\toutline:\n\t\t\t\t\t\"border border-co-border bg-co-background hover:bg-co-background-100 dark:bg-co-background-200 dark:hover:bg-co-background-300\",\n\t\t\t\ttab: \"opacity-40 hover:bg-co-background-100 hover:text-co-foreground hover:opacity-90 dark:hover:bg-co-background-200\",\n\t\t\t\t\"tab-selected\":\n\t\t\t\t\t\"hover:bg-co-background-100 hover:text-co-foreground dark:hover:bg-co-background-200\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-8 px-4 py-2 has-[>svg]:px-3\",\n\t\t\t\tlarge: \"h-14 px-6 has-[>svg]:px-4\",\n\t\t\t\ticon: \"size-6\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t},\n\t}\n);\n\nexport type CossistantButtonProps = React.ComponentProps<\"button\"> &\n\tVariantProps<typeof coButtonVariants>;\n\n/**\n * Styled button primitive that forwards variant and size props to the shared\n * design tokens.\n */\nexport function Button({\n\tclassName,\n\tvariant,\n\tsize,\n\t...props\n}: CossistantButtonProps): React.ReactElement {\n\treturn (\n\t\t<ButtonPrimitive\n\t\t\tclassName={cn(coButtonVariants({ variant, size, className }))}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;AAKA,MAAa,mBAAmB,IAC/B,qeACA;CACC,UAAU;EACT,SAAS;GACR,SACC;GACD,WACC;GACD,OACC;GACD,SACC;GACD,KAAK;GACL,gBACC;GACD;EACD,MAAM;GACL,SAAS;GACT,OAAO;GACP,MAAM;GACN;EACD;CACD,iBAAiB;EAChB,SAAS;EACT,MAAM;EACN;CACD,CACD;;;;;AASD,SAAgB,OAAO,EACtB,WACA,SACA,KACA,GAAG,SAC0C;AAC7C,QACC,oBAACA;EACA,WAAW,GAAG,iBAAiB;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC;EAC7D,GAAI;GACH"}

package/support/components/container.d.ts

@@ -4,7 +4,6 @@ import React from "react";
 type ContainerProps = {
   className?: string;
   children: React.ReactNode;
-  mode?: "floating" | "responsive";
   position?: "top" | "bottom";
   align?: "right" | "left";
 };

package/support/components/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","names":[],"sources":["../../../src/support/components/container.tsx"],"sourcesContent":[],"mappings":";;;KAQY,cAAA;;EAAA,QAAA,EAED,KAAA,CAAM,SAFS;EAQb,IAAA,CAAA,EAAA,UAwIZ,GAAA,YAAA;EAAA,QAAA,CAAA,EAAA,KAAA,GAAA,QAAA;OAxIgC,CAAA,EAAA,OAAA,GAAA,MAAA;;AAAD,cAAnB,SAAmB,EAAR,KAAA,CAAM,EAAE,CAAC,cAAD,CAAA"}
+{"version":3,"file":"container.d.ts","names":[],"sources":["../../../src/support/components/container.tsx"],"sourcesContent":[],"mappings":";;;KAQY,cAAA;;EAAA,QAAA,EAED,KAAA,CAAM,SAFS;EAOb,QAAA,CAAA,EAAA,KA6HZ,GAAA,QA7HgC;;;cAApB,WAAW,KAAA,CAAM,GAAG"}

package/support/components/container.js

@@ -8,7 +8,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion } from "motion/react";
 
 //#region src/support/components/container.tsx
-const Container = ({ className, children, mode = "floating", position = "bottom", align = "right" }) => {
+const Container = ({ className, children, position = "bottom", align = "right" }) => {
 	const [showScrollIndicator, setShowScrollIndicator] = useState(false);
 	const containerRef = useRef(null);
 	const checkScroll = useCallback(() => {
@@ -49,13 +49,7 @@ const Container = ({ className, children, mode = "floating", position = "bottom"
 		asChild: true,
 		children: /* @__PURE__ */ jsx(motion.div, {
 			animate: "visible",
-			className: cn("flex flex-col overflow-hidden overscroll-none bg-co-background", mode === "floating" ? "max-md:fixed max-md:inset-0" : "max-md:relative max-md:h-full max-md:w-full", mode === "floating" && [
-				"z-[9999] md:absolute md:z-[9900] md:aspect-[9/18] md:max-h-[calc(100vh-6rem)] md:w-[400px] md:rounded-lg md:border md:border-co-border md:shadow-xl md:dark:shadow-co-background-600/50",
-				position === "bottom" && "md:bottom-16",
-				position === "top" && "md:top-16",
-				align === "right" && "md:right-0",
-				align === "left" && "md:left-0"
-			], mode === "responsive" && "md:relative md:h-full md:w-full md:rounded-none md:border-0 md:shadow-none", className),
+			className: cn("flex flex-col overflow-hidden overscroll-none bg-co-background max-md:fixed max-md:inset-0", "z-[9999] md:absolute md:z-[9900] md:aspect-[9/18] md:max-h-[calc(100vh-6rem)] md:w-[400px] md:rounded-lg md:border md:border-co-border md:shadow-xl md:dark:shadow-co-background-600/50", position === "bottom" && "md:bottom-16", position === "top" && "md:top-16", align === "right" && "md:right-0", align === "left" && "md:left-0", className),
 			exit: "exit",
 			initial: "hidden",
 			transition: {

package/support/components/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","names":["Container: React.FC<ContainerProps>","Primitive.Window"],"sources":["../../../src/support/components/container.tsx"],"sourcesContent":["\"use client\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport * as Primitive from \"../../primitives\";\nimport { cn } from \"../utils\";\n\nexport type ContainerProps = {\n\tclassName?: string;\n\tchildren: React.ReactNode;\n\tmode?: \"floating\" | \"responsive\";\n\tposition?: \"top\" | \"bottom\";\n\talign?: \"right\" | \"left\";\n};\n\nexport const Container: React.FC<ContainerProps> = ({\n\tclassName,\n\tchildren,\n\tmode = \"floating\",\n\tposition = \"bottom\",\n\talign = \"right\",\n}) => {\n\tconst [showScrollIndicator, setShowScrollIndicator] = useState(false);\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\n\tconst checkScroll = useCallback(() => {\n\t\tconst container = containerRef.current;\n\t\tif (!container) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { scrollTop, scrollHeight, clientHeight } = container;\n\t\tconst isScrollable = scrollHeight > clientHeight;\n\t\tconst isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 5; // 5px threshold\n\n\t\tsetShowScrollIndicator(isScrollable && !isAtBottom);\n\t}, []);\n\n\tuseEffect(() => {\n\t\tconst container = containerRef.current;\n\t\tif (!container) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Instant initial check\n\t\tcheckScroll();\n\n\t\t// Direct scroll listener on the container\n\t\tconst handleScroll = () => {\n\t\t\tcheckScroll();\n\t\t};\n\n\t\tcontainer.addEventListener(\"scroll\", handleScroll, { passive: true });\n\n\t\t// Use ResizeObserver to detect content changes instantly\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\tcheckScroll();\n\t\t});\n\n\t\tresizeObserver.observe(container);\n\n\t\t// Also observe all child elements for dynamic content\n\t\tconst mutationObserver = new MutationObserver(() => {\n\t\t\tcheckScroll();\n\t\t});\n\n\t\tmutationObserver.observe(container, {\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t\tcharacterData: true,\n\t\t});\n\n\t\treturn () => {\n\t\t\tcontainer.removeEventListener(\"scroll\", handleScroll);\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver.disconnect();\n\t\t};\n\t}, [checkScroll]);\n\n\treturn (\n\t\t<Primitive.Window asChild>\n\t\t\t<motion.div\n\t\t\t\tanimate=\"visible\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t// Common base styles\n\t\t\t\t\t\"flex flex-col overflow-hidden overscroll-none bg-co-background\",\n\n\t\t\t\t\tmode === \"floating\"\n\t\t\t\t\t\t? \"max-md:fixed max-md:inset-0\"\n\t\t\t\t\t\t: \"max-md:relative max-md:h-full max-md:w-full\",\n\n\t\t\t\t\t// Desktop floating mode\n\t\t\t\t\tmode === \"floating\" && [\n\t\t\t\t\t\t\"z-[9999] md:absolute md:z-[9900] md:aspect-[9/18] md:max-h-[calc(100vh-6rem)] md:w-[400px] md:rounded-lg md:border md:border-co-border md:shadow-xl md:dark:shadow-co-background-600/50\",\n\t\t\t\t\t\tposition === \"bottom\" && \"md:bottom-16\",\n\t\t\t\t\t\tposition === \"top\" && \"md:top-16\",\n\t\t\t\t\t\talign === \"right\" && \"md:right-0\",\n\t\t\t\t\t\talign === \"left\" && \"md:left-0\",\n\t\t\t\t\t],\n\n\t\t\t\t\t// Desktop responsive mode\n\t\t\t\t\tmode === \"responsive\" &&\n\t\t\t\t\t\t\"md:relative md:h-full md:w-full md:rounded-none md:border-0 md:shadow-none\",\n\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\texit=\"exit\"\n\t\t\t\tinitial=\"hidden\"\n\t\t\t\ttransition={{\n\t\t\t\t\tdefault: { ease: \"anticipate\" },\n\t\t\t\t\tlayout: { duration: 0.3 },\n\t\t\t\t}}\n\t\t\t\tvariants={{\n\t\t\t\t\thidden: { opacity: 0, y: 10, filter: \"blur(6px)\" },\n\t\t\t\t\tvisible: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n\t\t\t\t\texit: { opacity: 0, y: 10, filter: \"blur(6px)\" },\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className=\"relative flex h-full w-full flex-col\">\n\t\t\t\t\t{/* Scrollable content area */}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"flex flex-1 flex-col overflow-y-auto pt-18\"\n\t\t\t\t\t\tref={containerRef}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t{showScrollIndicator && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t\t\t\tclassName=\"pointer-events-none absolute inset-x-0 bottom-0 z-5 h-32 bg-gradient-to-t from-co-background via-co-background/70 to-transparent\"\n\t\t\t\t\t\t\t\t\texit={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\ttransition={{ duration: 0.3, ease: \"easeInOut\" }}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tanimate={{ opacity: 0.6 }}\n\t\t\t\t\t\t\t\t\tclassName=\"pointer-events-none absolute inset-x-0 bottom-0 z-5 h-48 bg-gradient-to-t from-co-background/80 via-co-background/30 to-transparent\"\n\t\t\t\t\t\t\t\t\texit={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\ttransition={{ duration: 0.4, ease: \"easeInOut\", delay: 0.05 }}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t</div>\n\t\t\t</motion.div>\n\t\t</Primitive.Window>\n\t);\n};\n"],"mappings":";;;;;;;;;;AAgBA,MAAaA,aAAuC,EACnD,WACA,UACA,OAAO,YACP,WAAW,UACX,QAAQ,cACH;CACL,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,MAAM;CACrE,MAAM,eAAe,OAAuB,KAAK;CAEjD,MAAM,cAAc,kBAAkB;EACrC,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UACJ;EAGD,MAAM,EAAE,WAAW,cAAc,iBAAiB;EAClD,MAAM,eAAe,eAAe;EACpC,MAAM,aAAa,KAAK,IAAI,eAAe,YAAY,aAAa,GAAG;AAEvE,yBAAuB,gBAAgB,CAAC,WAAW;IACjD,EAAE,CAAC;AAEN,iBAAgB;EACf,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UACJ;AAID,eAAa;EAGb,MAAM,qBAAqB;AAC1B,gBAAa;;AAGd,YAAU,iBAAiB,UAAU,cAAc,EAAE,SAAS,MAAM,CAAC;EAGrE,MAAM,iBAAiB,IAAI,qBAAqB;AAC/C,gBAAa;IACZ;AAEF,iBAAe,QAAQ,UAAU;EAGjC,MAAM,mBAAmB,IAAI,uBAAuB;AACnD,gBAAa;IACZ;AAEF,mBAAiB,QAAQ,WAAW;GACnC,WAAW;GACX,SAAS;GACT,eAAe;GACf,CAAC;AAEF,eAAa;AACZ,aAAU,oBAAoB,UAAU,aAAa;AACrD,kBAAe,YAAY;AAC3B,oBAAiB,YAAY;;IAE5B,CAAC,YAAY,CAAC;AAEjB,QACC,oBAACC;EAAiB;YACjB,oBAAC,OAAO;GACP,SAAQ;GACR,WAAW,GAEV,kEAEA,SAAS,aACN,gCACA,+CAGH,SAAS,cAAc;IACtB;IACA,aAAa,YAAY;IACzB,aAAa,SAAS;IACtB,UAAU,WAAW;IACrB,UAAU,UAAU;IACpB,EAGD,SAAS,gBACR,8EAED,UACA;GACD,MAAK;GACL,SAAQ;GACR,YAAY;IACX,SAAS,EAAE,MAAM,cAAc;IAC/B,QAAQ,EAAE,UAAU,IAAK;IACzB;GACD,UAAU;IACT,QAAQ;KAAE,SAAS;KAAG,GAAG;KAAI,QAAQ;KAAa;IAClD,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG,QAAQ;KAAa;IAClD,MAAM;KAAE,SAAS;KAAG,GAAG;KAAI,QAAQ;KAAa;IAChD;aAED,qBAAC;IAAI,WAAU;eAEd,oBAAC;KACA,WAAU;KACV,KAAK;KAEJ;MACI,EAEN,oBAAC,6BACC,uBACA,4CACC,oBAAC,OAAO;KACP,SAAS,EAAE,SAAS,GAAG;KACvB,WAAU;KACV,MAAM,EAAE,SAAS,GAAG;KACpB,SAAS,EAAE,SAAS,GAAG;KACvB,YAAY;MAAE,UAAU;MAAK,MAAM;MAAa;MAC/C,EACF,oBAAC,OAAO;KACP,SAAS,EAAE,SAAS,IAAK;KACzB,WAAU;KACV,MAAM,EAAE,SAAS,GAAG;KACpB,SAAS,EAAE,SAAS,GAAG;KACvB,YAAY;MAAE,UAAU;MAAK,MAAM;MAAa,OAAO;MAAM;MAC5D,IACA,GAEa;KACb;IACM;GACK"}
+{"version":3,"file":"container.js","names":["Container: React.FC<ContainerProps>","Primitive.Window"],"sources":["../../../src/support/components/container.tsx"],"sourcesContent":["\"use client\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport * as Primitive from \"../../primitives\";\nimport { cn } from \"../utils\";\n\nexport type ContainerProps = {\n\tclassName?: string;\n\tchildren: React.ReactNode;\n\tposition?: \"top\" | \"bottom\";\n\talign?: \"right\" | \"left\";\n};\n\nexport const Container: React.FC<ContainerProps> = ({\n\tclassName,\n\tchildren,\n\tposition = \"bottom\",\n\talign = \"right\",\n}) => {\n\tconst [showScrollIndicator, setShowScrollIndicator] = useState(false);\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\n\tconst checkScroll = useCallback(() => {\n\t\tconst container = containerRef.current;\n\t\tif (!container) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { scrollTop, scrollHeight, clientHeight } = container;\n\t\tconst isScrollable = scrollHeight > clientHeight;\n\t\tconst isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 5; // 5px threshold\n\n\t\tsetShowScrollIndicator(isScrollable && !isAtBottom);\n\t}, []);\n\n\tuseEffect(() => {\n\t\tconst container = containerRef.current;\n\t\tif (!container) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Instant initial check\n\t\tcheckScroll();\n\n\t\t// Direct scroll listener on the container\n\t\tconst handleScroll = () => {\n\t\t\tcheckScroll();\n\t\t};\n\n\t\tcontainer.addEventListener(\"scroll\", handleScroll, { passive: true });\n\n\t\t// Use ResizeObserver to detect content changes instantly\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\tcheckScroll();\n\t\t});\n\n\t\tresizeObserver.observe(container);\n\n\t\t// Also observe all child elements for dynamic content\n\t\tconst mutationObserver = new MutationObserver(() => {\n\t\t\tcheckScroll();\n\t\t});\n\n\t\tmutationObserver.observe(container, {\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t\tcharacterData: true,\n\t\t});\n\n\t\treturn () => {\n\t\t\tcontainer.removeEventListener(\"scroll\", handleScroll);\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver.disconnect();\n\t\t};\n\t}, [checkScroll]);\n\n\treturn (\n\t\t<Primitive.Window asChild>\n\t\t\t<motion.div\n\t\t\t\tanimate=\"visible\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t// Common base styles\n\t\t\t\t\t\"flex flex-col overflow-hidden overscroll-none bg-co-background max-md:fixed max-md:inset-0\",\n\n\t\t\t\t\t// Desktop floating mode\n\t\t\t\t\t\"z-[9999] md:absolute md:z-[9900] md:aspect-[9/18] md:max-h-[calc(100vh-6rem)] md:w-[400px] md:rounded-lg md:border md:border-co-border md:shadow-xl md:dark:shadow-co-background-600/50\",\n\t\t\t\t\tposition === \"bottom\" && \"md:bottom-16\",\n\t\t\t\t\tposition === \"top\" && \"md:top-16\",\n\t\t\t\t\talign === \"right\" && \"md:right-0\",\n\t\t\t\t\talign === \"left\" && \"md:left-0\",\n\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\texit=\"exit\"\n\t\t\t\tinitial=\"hidden\"\n\t\t\t\ttransition={{\n\t\t\t\t\tdefault: { ease: \"anticipate\" },\n\t\t\t\t\tlayout: { duration: 0.3 },\n\t\t\t\t}}\n\t\t\t\tvariants={{\n\t\t\t\t\thidden: { opacity: 0, y: 10, filter: \"blur(6px)\" },\n\t\t\t\t\tvisible: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n\t\t\t\t\texit: { opacity: 0, y: 10, filter: \"blur(6px)\" },\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className=\"relative flex h-full w-full flex-col\">\n\t\t\t\t\t{/* Scrollable content area */}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"flex flex-1 flex-col overflow-y-auto pt-18\"\n\t\t\t\t\t\tref={containerRef}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t{showScrollIndicator && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t\t\t\tclassName=\"pointer-events-none absolute inset-x-0 bottom-0 z-5 h-32 bg-gradient-to-t from-co-background via-co-background/70 to-transparent\"\n\t\t\t\t\t\t\t\t\texit={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\ttransition={{ duration: 0.3, ease: \"easeInOut\" }}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tanimate={{ opacity: 0.6 }}\n\t\t\t\t\t\t\t\t\tclassName=\"pointer-events-none absolute inset-x-0 bottom-0 z-5 h-48 bg-gradient-to-t from-co-background/80 via-co-background/30 to-transparent\"\n\t\t\t\t\t\t\t\t\texit={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\ttransition={{ duration: 0.4, ease: \"easeInOut\", delay: 0.05 }}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t</div>\n\t\t\t</motion.div>\n\t\t</Primitive.Window>\n\t);\n};\n"],"mappings":";;;;;;;;;;AAeA,MAAaA,aAAuC,EACnD,WACA,UACA,WAAW,UACX,QAAQ,cACH;CACL,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,MAAM;CACrE,MAAM,eAAe,OAAuB,KAAK;CAEjD,MAAM,cAAc,kBAAkB;EACrC,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UACJ;EAGD,MAAM,EAAE,WAAW,cAAc,iBAAiB;EAClD,MAAM,eAAe,eAAe;EACpC,MAAM,aAAa,KAAK,IAAI,eAAe,YAAY,aAAa,GAAG;AAEvE,yBAAuB,gBAAgB,CAAC,WAAW;IACjD,EAAE,CAAC;AAEN,iBAAgB;EACf,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UACJ;AAID,eAAa;EAGb,MAAM,qBAAqB;AAC1B,gBAAa;;AAGd,YAAU,iBAAiB,UAAU,cAAc,EAAE,SAAS,MAAM,CAAC;EAGrE,MAAM,iBAAiB,IAAI,qBAAqB;AAC/C,gBAAa;IACZ;AAEF,iBAAe,QAAQ,UAAU;EAGjC,MAAM,mBAAmB,IAAI,uBAAuB;AACnD,gBAAa;IACZ;AAEF,mBAAiB,QAAQ,WAAW;GACnC,WAAW;GACX,SAAS;GACT,eAAe;GACf,CAAC;AAEF,eAAa;AACZ,aAAU,oBAAoB,UAAU,aAAa;AACrD,kBAAe,YAAY;AAC3B,oBAAiB,YAAY;;IAE5B,CAAC,YAAY,CAAC;AAEjB,QACC,oBAACC;EAAiB;YACjB,oBAAC,OAAO;GACP,SAAQ;GACR,WAAW,GAEV,8FAGA,2LACA,aAAa,YAAY,gBACzB,aAAa,SAAS,aACtB,UAAU,WAAW,cACrB,UAAU,UAAU,aAEpB,UACA;GACD,MAAK;GACL,SAAQ;GACR,YAAY;IACX,SAAS,EAAE,MAAM,cAAc;IAC/B,QAAQ,EAAE,UAAU,IAAK;IACzB;GACD,UAAU;IACT,QAAQ;KAAE,SAAS;KAAG,GAAG;KAAI,QAAQ;KAAa;IAClD,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG,QAAQ;KAAa;IAClD,MAAM;KAAE,SAAS;KAAG,GAAG;KAAI,QAAQ;KAAa;IAChD;aAED,qBAAC;IAAI,WAAU;eAEd,oBAAC;KACA,WAAU;KACV,KAAK;KAEJ;MACI,EAEN,oBAAC,6BACC,uBACA,4CACC,oBAAC,OAAO;KACP,SAAS,EAAE,SAAS,GAAG;KACvB,WAAU;KACV,MAAM,EAAE,SAAS,GAAG;KACpB,SAAS,EAAE,SAAS,GAAG;KACvB,YAAY;MAAE,UAAU;MAAK,MAAM;MAAa;MAC/C,EACF,oBAAC,OAAO;KACP,SAAS,EAAE,SAAS,IAAK;KACzB,WAAU;KACV,MAAM,EAAE,SAAS,GAAG;KACpB,SAAS,EAAE,SAAS,GAAG;KACvB,YAAY;MAAE,UAAU;MAAK,MAAM;MAAa,OAAO;MAAM;MAC5D,IACA,GAEa;KACb;IACM;GACK"}

package/support/components/conversation-button-link.d.ts

@@ -5,30 +5,17 @@ import { Conversation } from "@cossistant/types";
 type ConversationButtonLinkProps = {
   conversation: Conversation;
   onClick?: () => void;
-  className?: string | ((state: ConversationButtonLinkState) => string);
-  render?: (props: React.HTMLProps<HTMLButtonElement>, state: ConversationButtonLinkState) => React.ReactElement;
-};
-type ConversationButtonLinkAgent = {
-  name: string;
-  image: string | null;
-  type: "human" | "ai" | "fallback";
-};
-type ConversationButtonLinkState = {
-  conversation: Conversation;
-  lastMessage: {
-    content: string;
-    time: string;
-    isFromVisitor: boolean;
-    senderName?: string;
-    senderImage?: string | null;
-  } | null;
-  assignedAgent: ConversationButtonLinkAgent;
+  className?: string;
 };
+/**
+ * Renders a navigable preview card for a conversation including assigned agent
+ * details, last message snippets and typing indicators.
+ */
 declare function ConversationButtonLink({
   conversation,
   onClick,
-  ...props
-}: ConversationButtonLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+  className
+}: ConversationButtonLinkProps): React.ReactElement | null;
 //#endregion
-export { ConversationButtonLink, ConversationButtonLinkAgent, ConversationButtonLinkProps, ConversationButtonLinkState };
+export { ConversationButtonLink, ConversationButtonLinkProps };
 //# sourceMappingURL=conversation-button-link.d.ts.map

package/support/components/conversation-button-link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-button-link.d.ts","names":[],"sources":["../../../src/support/components/conversation-button-link.tsx"],"sourcesContent":[],"mappings":";;;;KAkBY,2BAAA;gBACG;EADH,OAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAA2B,SAAA,CAAA,EAAA,MAAA,GAAA,CAAA,CAAA,KAAA,EAGR,2BAHQ,EAAA,GAAA,MAAA,CAAA;QACxB,CAAA,EAAA,CAAA,KAAA,EAIN,KAAA,CAAM,SAJA,CAIU,iBAJV,CAAA,EAAA,KAAA,EAKN,2BALM,EAAA,GAMT,KAAA,CAAM,YANG;;AAIU,KAKb,2BAAA,GALa;MAAhB,EAAA,MAAM;OACN,EAAA,MAAA,GAAA,IAAA;MACH,EAAA,OAAM,GAAA,IAAA,GAAA,UAAA;CAAY;AAGZ,KAMA,2BAAA,GAN2B;EAM3B,YAAA,EACG,YADH;EAA2B,WAAA,EAAA;IACxB,OAAA,EAAA,MAAA;IAQC,IAAA,EAAA,MAAA;IAA2B,aAAA,EAAA,OAAA;IA+C3B,UAAA,CAAA,EAAA,MAAA;IAAsB,WAAA,CAAA,EAAA,MAAA,GAAA,IAAA;MACrC,IAAA;eACA,EAjDe,2BAiDf;;AAE6B,iBAJd,sBAAA,CAIc;EAAA,YAAA;EAAA,OAAA;EAAA,GAAA;AAAA,CAAA,EAA3B,2BAA2B,CAAA,EAAA,KAAA,CAAA,YAAA,CAAA,OAAA,EAAA,MAAA,GAAA,KAAA,CAAA,qBAAA,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA"}
+{"version":3,"file":"conversation-button-link.d.ts","names":[],"sources":["../../../src/support/components/conversation-button-link.tsx"],"sourcesContent":[],"mappings":";;;;KAUY,2BAAA;gBACG;EADH,OAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EA0BI,SAAA,CAAA,EAAA,MAAA;CACf;;;;;AAGkD,iBAJnC,sBAAA,CAImC;EAAA,YAAA;EAAA,OAAA;EAAA;AAAA,CAAA,EAAhD,2BAAgD,CAAA,EAAlB,KAAA,CAAM,YAAY,GAAA,IAAA"}