canvas-ui-sdk 0.3.8 → 0.3.10

package/dist/index.js

@@ -82,7 +82,7 @@ function AvatarFallback({
   );
 }
 var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]",
   {
     variants: {
       variant: {
@@ -554,7 +554,7 @@ function DialogContent({
       {
         "data-slot": "dialog-content",
         className: cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-[var(--canvas-border)] p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
           className
         ),
         ...props,
@@ -657,7 +657,7 @@ function DropdownMenuContent({
       "data-slot": "dropdown-menu-content",
       sideOffset,
       className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-[var(--canvas-border)] p-1 shadow-md",
         className
       ),
       ...props
@@ -828,7 +828,7 @@ function DropdownMenuSubContent({
     {
       "data-slot": "dropdown-menu-sub-content",
       className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border border-[var(--canvas-border)] p-1 shadow-lg",
         className
       ),
       ...props
@@ -1355,7 +1355,7 @@ function LineTabs({
           {
             onClick: () => handleTabClick(tab.id),
             className: cn(
-              "flex items-center justify-center h-full px-0 transition-colors",
+              "flex items-center justify-center h-full px-0 transition-colors cursor-pointer",
               isActive ? "border-b-2 border-[var(--canvas-primary)] text-[var(--canvas-primary)]" : "border-b border-[var(--canvas-border)] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)]"
             ),
             children: /* @__PURE__ */ jsx("span", { className: "text-base font-medium leading-6", children: tab.label })
@@ -1569,7 +1569,7 @@ function PopoverContent({
       align,
       sideOffset,
       className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border border-[var(--canvas-border)] p-4 shadow-md outline-hidden",
         className
       ),
       ...props
@@ -1883,7 +1883,7 @@ function SelectContent({
     {
       "data-slot": "select-content",
       className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-[var(--canvas-border)] shadow-md",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
       ),
@@ -2054,7 +2054,7 @@ var SelectablePills = React13.forwardRef(
               onClick: () => handlePillClick(option.id),
               disabled,
               className: cn(
-                "inline-flex items-center justify-center rounded-[var(--radius-xs)] border transition-colors",
+                "inline-flex items-center justify-center rounded-[var(--radius-xs)] border transition-colors cursor-pointer",
                 "font-medium whitespace-nowrap",
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)] focus-visible:ring-offset-2",
                 "disabled:cursor-not-allowed disabled:opacity-50",
@@ -2140,10 +2140,10 @@ function SheetContent({
         "data-slot": "sheet-content",
         className: cn(
           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-          side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
-          side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-          side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
-          side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l border-[var(--canvas-border)] sm:max-w-sm",
+          side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r border-[var(--canvas-border)] sm:max-w-sm",
+          side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b border-[var(--canvas-border)]",
+          side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t border-[var(--canvas-border)]",
           className
         ),
         ...props,
@@ -3032,7 +3032,7 @@ function TabsTrigger({
     {
       "data-slot": "tabs-trigger",
       className: cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] cursor-pointer focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -3761,7 +3761,7 @@ function Header({
           "button",
           {
             onClick: () => onRemoveCartItem?.(item.id),
-            className: "text-left mt-[var(--spacing-xs)] hover:underline",
+            className: "cursor-pointer text-left mt-[var(--spacing-xs)] hover:underline",
             style: {
               fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
               fontSize: "var(--typo-body-s-size)",
@@ -3844,7 +3844,7 @@ function Header({
             "button",
             {
               onClick: onMarkAsRead,
-              className: "hover:underline",
+              className: "cursor-pointer hover:underline",
               style: {
                 fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
                 fontSize: "var(--typo-body-s-size)",
@@ -3920,7 +3920,7 @@ function Header({
           "button",
           {
             onClick: onViewMoreMessages,
-            className: "hover:underline",
+            className: "cursor-pointer hover:underline",
             style: {
               fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
               fontSize: "var(--typo-body-s-size)",
@@ -3957,7 +3957,7 @@ function Header({
             "button",
             {
               onClick: onMarkNotificationsAsRead,
-              className: "hover:underline",
+              className: "cursor-pointer hover:underline",
               style: {
                 fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
                 fontSize: "var(--typo-body-s-size)",
@@ -4034,7 +4034,7 @@ function Header({
           "button",
           {
             onClick: onViewMoreNotifications,
-            className: "hover:underline",
+            className: "cursor-pointer hover:underline",
             style: {
               fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
               fontSize: "var(--typo-body-s-size)",
@@ -4107,7 +4107,7 @@ function Header({
             /* @__PURE__ */ jsx(
               "button",
               {
-                className: `transition-colors ${isDark ? "text-white/60 hover:text-white" : "text-[var(--canvas-neutral-text)] hover:text-[var(--canvas-text)]"}`,
+                className: `cursor-pointer transition-colors ${isDark ? "text-white/60 hover:text-white" : "text-[var(--canvas-neutral-text)] hover:text-[var(--canvas-text)]"}`,
                 "aria-label": "Search",
                 children: /* @__PURE__ */ jsx(Search, { className: "size-4" })
               }
@@ -4116,7 +4116,7 @@ function Header({
               /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                 "button",
                 {
-                  className: `transition-colors ${isDark ? "text-white/60 hover:text-white" : "text-[var(--canvas-neutral-text)] hover:text-[var(--canvas-text)]"}`,
+                  className: `cursor-pointer transition-colors ${isDark ? "text-white/60 hover:text-white" : "text-[var(--canvas-neutral-text)] hover:text-[var(--canvas-text)]"}`,
                   "aria-label": "Notifications",
                   children: /* @__PURE__ */ jsx(Bell, { className: "size-4" })
                 }
@@ -4127,7 +4127,7 @@ function Header({
               /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                 "button",
                 {
-                  className: `transition-colors ${isDark ? "text-white/60 hover:text-white" : "text-[var(--canvas-neutral-text)] hover:text-[var(--canvas-text)]"}`,
+                  className: `cursor-pointer transition-colors ${isDark ? "text-white/60 hover:text-white" : "text-[var(--canvas-neutral-text)] hover:text-[var(--canvas-text)]"}`,
                   "aria-label": "Messages",
                   children: /* @__PURE__ */ jsx(MessageSquare, { className: "size-4" })
                 }
@@ -4138,7 +4138,7 @@ function Header({
               /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                 "button",
                 {
-                  className: `transition-colors ${isDark ? "text-white/60 hover:text-white" : "text-[var(--canvas-neutral-text)] hover:text-[var(--canvas-text)]"}`,
+                  className: `cursor-pointer transition-colors ${isDark ? "text-white/60 hover:text-white" : "text-[var(--canvas-neutral-text)] hover:text-[var(--canvas-text)]"}`,
                   "aria-label": "Cart",
                   children: /* @__PURE__ */ jsx(ShoppingCart, { className: "size-4" })
                 }
@@ -4166,7 +4166,7 @@ function Header({
               )
             ] }),
             /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-              /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "rounded-full focus:outline-none focus:ring-2 focus:ring-[var(--canvas-primary)] focus:ring-offset-2", children: /* @__PURE__ */ jsxs(Avatar, { className: `size-10 border cursor-pointer ${isDark ? "border-[var(--canvas-sidebar-dark-border)]" : "border-[var(--canvas-neutral-border)]"}`, children: [
+              /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "cursor-pointer rounded-full focus:outline-none focus:ring-2 focus:ring-[var(--canvas-primary)] focus:ring-offset-2", children: /* @__PURE__ */ jsxs(Avatar, { className: `size-10 border cursor-pointer ${isDark ? "border-[var(--canvas-sidebar-dark-border)]" : "border-[var(--canvas-neutral-border)]"}`, children: [
                 /* @__PURE__ */ jsx(AvatarImage, { src: avatarUrl, alt: "User avatar" }),
                 /* @__PURE__ */ jsx(
                   AvatarFallback,
@@ -4238,7 +4238,7 @@ function Header({
                     }
                     setIsMobileMenuOpen(false);
                   },
-                  className: "flex items-center gap-[var(--spacing-lg)] w-full py-[var(--spacing-lg)] text-left hover:bg-[var(--canvas-neutral-surface)] rounded-[var(--radius-md)] transition-colors",
+                  className: "cursor-pointer flex items-center gap-[var(--spacing-lg)] w-full py-[var(--spacing-lg)] text-left hover:bg-[var(--canvas-neutral-surface)] rounded-[var(--radius-md)] transition-colors",
                   children: [
                     Icon2 && /* @__PURE__ */ jsx(
                       "div",
@@ -4367,7 +4367,7 @@ function SidebarNav({ sections, variant = "dark", onItemClick }) {
               }
             },
             className: cn(
-              "flex items-center gap-[var(--spacing-md)] h-11 px-[var(--spacing-xl)] rounded-[var(--radius-nav)] w-full text-left transition-colors",
+              "cursor-pointer flex items-center gap-[var(--spacing-md)] h-11 px-[var(--spacing-xl)] rounded-[var(--radius-nav)] w-full text-left transition-colors",
               // Dark variant (desktop sidebar)
               isDark && isActive && !hasChildren && "bg-[var(--canvas-sidebar-dark-active-bg)] text-[var(--canvas-sidebar-dark-active-text)]",
               isDark && !isActive && "text-[var(--canvas-sidebar-dark-text)] hover:bg-[var(--canvas-sidebar-dark-active-bg)]/50",
@@ -4426,7 +4426,7 @@ function SidebarNav({ sections, variant = "dark", onItemClick }) {
             {
               onClick: () => onItemClick?.(child),
               className: cn(
-                "flex items-center h-9 pl-12 pr-[var(--spacing-xl)] rounded-[var(--radius-nav)] w-full text-left transition-colors",
+                "cursor-pointer flex items-center h-9 pl-12 pr-[var(--spacing-xl)] rounded-[var(--radius-nav)] w-full text-left transition-colors",
                 // Dark variant
                 isDark && isChildActive && "bg-[var(--canvas-sidebar-dark-active-bg)] text-[var(--canvas-sidebar-dark-active-text)]",
                 isDark && !isChildActive && "text-[var(--canvas-sidebar-dark-text)] hover:bg-[var(--canvas-sidebar-dark-active-bg)]/50",
@@ -4793,7 +4793,7 @@ function IconNavItem({ item, variant = "dark", onClick }) {
     {
       onClick,
       className: cn(
-        "relative flex flex-col items-center justify-center gap-1 w-16 h-16 rounded-[var(--radius-nav)] transition-colors",
+        "cursor-pointer relative flex flex-col items-center justify-center gap-1 w-16 h-16 rounded-[var(--radius-nav)] transition-colors",
         // Dark variant
         isDark && isActive && "bg-[var(--canvas-sidebar-dark-active-bg)]",
         isDark && !isActive && "hover:bg-[var(--canvas-sidebar-dark-active-bg)]/50",
@@ -5127,7 +5127,7 @@ function IconColumnItem({ section, isActive, variant, onClick }) {
     {
       onClick,
       className: cn(
-        "relative flex flex-col items-center justify-center gap-1 w-11 h-11 rounded-[var(--radius-nav)] transition-colors",
+        "cursor-pointer relative flex flex-col items-center justify-center gap-1 w-11 h-11 rounded-[var(--radius-nav)] transition-colors",
         // Dark variant
         isDark && isActive && "bg-[var(--canvas-sidebar-dark-active-bg)]",
         isDark && !isActive && "hover:bg-[var(--canvas-sidebar-dark-active-bg)]/50",
@@ -5160,7 +5160,7 @@ function NavTabItem({ tab, isActive, variant, onClick }) {
     {
       onClick,
       className: cn(
-        "flex items-center gap-[var(--spacing-md)] h-11 px-[var(--spacing-xl)] rounded-[var(--radius-nav)] w-full text-left transition-colors",
+        "cursor-pointer flex items-center gap-[var(--spacing-md)] h-11 px-[var(--spacing-xl)] rounded-[var(--radius-nav)] w-full text-left transition-colors",
         // Dark variant
         isDark && isActive && "bg-[var(--canvas-sidebar-dark-active-bg)] text-[var(--canvas-sidebar-dark-active-text)]",
         isDark && !isActive && "text-[var(--canvas-sidebar-dark-text)] hover:bg-[var(--canvas-sidebar-dark-active-bg)]/50",
@@ -5549,7 +5549,7 @@ function MobileNavTab({ item, variant = "light", onClick }) {
       onClick,
       className: cn(
         // Match icon-sidebar dimensions: 64px × 64px
-        "relative flex flex-col items-center justify-center gap-1 w-16 h-16 rounded-[var(--radius-nav)] transition-colors",
+        "cursor-pointer relative flex flex-col items-center justify-center gap-1 w-16 h-16 rounded-[var(--radius-nav)] transition-colors",
         // Dark variant
         isDark && isActive && "bg-[var(--canvas-sidebar-dark-active-bg)]",
         isDark && !isActive && "hover:bg-[var(--canvas-sidebar-dark-active-bg)]/50",
@@ -6376,7 +6376,7 @@ function LinksCard({
           "a",
           {
             href: link.href,
-            className: "flex items-center gap-1.5 hover:opacity-80 transition-opacity",
+            className: "cursor-pointer flex items-center gap-1.5 hover:opacity-80 transition-opacity",
             children: content
           },
           link.id
@@ -6387,7 +6387,7 @@ function LinksCard({
         {
           type: "button",
           onClick: link.onClick,
-          className: "flex items-center gap-1.5 hover:opacity-80 transition-opacity",
+          className: "cursor-pointer flex items-center gap-1.5 hover:opacity-80 transition-opacity",
           children: content
         },
         link.id
@@ -6985,7 +6985,7 @@ function ProjectContextShell({
           {
             onClick: () => onTabChange(tab.id),
             className: cn(
-              "w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors mb-1",
+              "cursor-pointer w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors mb-1",
               isActive ? "bg-[var(--canvas-surface-brand)] text-[var(--canvas-primary)]" : "text-[var(--canvas-text-muted)] hover:bg-[var(--canvas-surface)] hover:text-[var(--canvas-text)]"
             ),
             children: [
@@ -7292,7 +7292,7 @@ function MessengerSidebar({
                 /* @__PURE__ */ jsx(
                   "button",
                   {
-                    className: "flex items-center justify-center size-8 rounded-[var(--radius-xs)] border transition-colors hover:opacity-80",
+                    className: "cursor-pointer flex items-center justify-center size-8 rounded-[var(--radius-xs)] border transition-colors hover:opacity-80",
                     style: {
                       backgroundColor: "var(--canvas-background)",
                       borderColor: "var(--canvas-border)"
@@ -7310,7 +7310,7 @@ function MessengerSidebar({
                 /* @__PURE__ */ jsx(
                   "button",
                   {
-                    className: "flex items-center justify-center size-8 rounded-[var(--radius-xs)] border transition-colors hover:opacity-80",
+                    className: "cursor-pointer flex items-center justify-center size-8 rounded-[var(--radius-xs)] border transition-colors hover:opacity-80",
                     style: {
                       backgroundColor: "var(--canvas-background)",
                       borderColor: "var(--canvas-border)"
@@ -7356,7 +7356,7 @@ function ThreadRow({ thread, isSelected, onSelect }) {
     "button",
     {
       onClick: onSelect,
-      className: "w-full flex items-center gap-[var(--spacing-xl)] px-4 lg:px-[var(--spacing-5xl)] py-[var(--spacing-xl)] transition-colors text-left border-b",
+      className: "cursor-pointer w-full flex items-center gap-[var(--spacing-xl)] px-4 lg:px-[var(--spacing-5xl)] py-[var(--spacing-xl)] transition-colors text-left border-b",
       style: {
         backgroundColor: isSelected ? "var(--canvas-surface)" : "var(--canvas-background)",
         borderColor: "var(--canvas-border)"
@@ -8127,7 +8127,7 @@ function MenuSectionItem({
       {
         type: "button",
         onClick: () => setExpanded(!expanded),
-        className: "w-full flex items-center gap-4 py-6 text-left group",
+        className: "cursor-pointer w-full flex items-center gap-4 py-6 text-left group",
         children: [
           /* @__PURE__ */ jsx(
             "div",
@@ -8220,7 +8220,7 @@ function PillTabs({
       {
         onClick: () => onTabChange?.(tab.id),
         className: cn(
-          "flex items-center gap-[var(--spacing-md)] h-10 px-[var(--spacing-xl)] rounded-full transition-colors",
+          "cursor-pointer flex items-center gap-[var(--spacing-md)] h-10 px-[var(--spacing-xl)] rounded-full transition-colors",
           "bg-[var(--canvas-border)]",
           isActive && "bg-[var(--canvas-surface-brand)]"
         ),
@@ -10162,7 +10162,7 @@ function CommentInput({
             "button",
             {
               type: "button",
-              className: "absolute right-3 top-1/2 -translate-y-1/2",
+              className: "cursor-pointer absolute right-3 top-1/2 -translate-y-1/2",
               style: { color: "var(--canvas-text-placeholder)" },
               children: /* @__PURE__ */ jsx(Paperclip, { className: "w-5 h-5" })
             }
@@ -10194,7 +10194,7 @@ function CommentActions({
           {
             type: "button",
             onClick: onReply,
-            className: "flex items-center",
+            className: "cursor-pointer flex items-center",
             style: {
               gap: "var(--spacing-sm)",
               fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
@@ -10211,7 +10211,7 @@ function CommentActions({
           {
             type: "button",
             onClick: onLike,
-            className: "flex items-center",
+            className: "cursor-pointer flex items-center",
             style: {
               gap: "var(--spacing-sm)",
               fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
@@ -10411,6 +10411,7 @@ function PostCommentItem({
                 {
                   type: "button",
                   onClick: () => setShowReplies(!showReplies),
+                  className: "cursor-pointer",
                   style: {
                     fontFamily: "var(--typo-body-xs-font, var(--typo-global-font))",
                     fontSize: "var(--typo-body-xs-size)",
@@ -10458,7 +10459,7 @@ function PostCard({
                   {
                     type: "button",
                     onClick: onUpvote,
-                    className: "flex items-center justify-center",
+                    className: "cursor-pointer flex items-center justify-center",
                     style: {
                       width: 40,
                       height: 40,
@@ -10602,7 +10603,7 @@ function PostCard({
                       "button",
                       {
                         type: "button",
-                        className: "flex items-center",
+                        className: "cursor-pointer flex items-center",
                         style: {
                           gap: "var(--spacing-sm)",
                           fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
@@ -11351,7 +11352,7 @@ function FaqsTable({
                   "button",
                   {
                     onClick: () => toggleItem(item.id),
-                    className: "flex items-center justify-between w-full text-left",
+                    className: "cursor-pointer flex items-center justify-between w-full text-left",
                     style: { gap: "var(--spacing-xl)" },
                     "aria-expanded": isExpanded,
                     "aria-controls": `faq-answer-${item.id}`,
@@ -11475,7 +11476,7 @@ function ProfileCard({
             "button",
             {
               onClick: onMenuClick,
-              className: "absolute top-4 right-0 flex items-center justify-center size-7 rounded-[var(--radius-xs)] border border-[var(--canvas-border)] bg-[var(--canvas-background)] hover:bg-[var(--canvas-surface)] transition-colors",
+              className: "cursor-pointer absolute top-4 right-0 flex items-center justify-center size-7 rounded-[var(--radius-xs)] border border-[var(--canvas-border)] bg-[var(--canvas-background)] hover:bg-[var(--canvas-surface)] transition-colors",
               "aria-label": "More options",
               children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4 text-[var(--canvas-text-muted)]" })
             }
@@ -11530,7 +11531,7 @@ function ProfileCard({
             "a",
             {
               href: link.href || "#",
-              className: "flex items-center gap-[var(--spacing-sm)] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] transition-colors",
+              className: "cursor-pointer flex items-center gap-[var(--spacing-sm)] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] transition-colors",
               children: [
                 /* @__PURE__ */ jsx(IconComponent, { className: "size-4" }),
                 /* @__PURE__ */ jsx(Typography, { variant: "body-s", color: "muted", as: "span", children: link.label })
@@ -13648,9 +13649,9 @@ function PostComposer({ placeholder = "What's on your mind?", imagePreview, onPo
             },
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "var(--spacing-lg)" }, children: [
-                /* @__PURE__ */ jsx("button", { type: "button", style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(Paperclip, { className: "w-5 h-5" }) }),
-                /* @__PURE__ */ jsx("button", { type: "button", style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(Video, { className: "w-5 h-5" }) }),
-                /* @__PURE__ */ jsx("button", { type: "button", style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(Link2, { className: "w-5 h-5" }) })
+                /* @__PURE__ */ jsx("button", { type: "button", className: "cursor-pointer", style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(Paperclip, { className: "w-5 h-5" }) }),
+                /* @__PURE__ */ jsx("button", { type: "button", className: "cursor-pointer", style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(Video, { className: "w-5 h-5" }) }),
+                /* @__PURE__ */ jsx("button", { type: "button", className: "cursor-pointer", style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(Link2, { className: "w-5 h-5" }) })
               ] }),
               /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", onClick: handlePost, children: "Post" })
             ]
@@ -13672,6 +13673,7 @@ function ActionIconsRow({ isLiked, onLike, onComment, onRepost, onShare }) {
           {
             type: "button",
             onClick: onLike,
+            className: "cursor-pointer",
             style: { color: isLiked ? "var(--canvas-destructive)" : "var(--canvas-text)" },
             children: /* @__PURE__ */ jsx(
               Heart$1,
@@ -13684,9 +13686,9 @@ function ActionIconsRow({ isLiked, onLike, onComment, onRepost, onShare }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx("button", { type: "button", onClick: onComment, style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(MessageCircle, { className: "w-5 h-5" }) }),
-        /* @__PURE__ */ jsx("button", { type: "button", onClick: onRepost, style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(RefreshCw, { className: "w-5 h-5" }) }),
-        /* @__PURE__ */ jsx("button", { type: "button", onClick: onShare, style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(Send, { className: "w-5 h-5" }) })
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: onComment, className: "cursor-pointer", style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(MessageCircle, { className: "w-5 h-5" }) }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: onRepost, className: "cursor-pointer", style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(RefreshCw, { className: "w-5 h-5" }) }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: onShare, className: "cursor-pointer", style: { color: "var(--canvas-text)" }, children: /* @__PURE__ */ jsx(Send, { className: "w-5 h-5" }) })
       ]
     }
   );
@@ -13930,7 +13932,7 @@ function RepostCard({ repost, onLike, onComment, onRepost, onShare }) {
               "button",
               {
                 type: "button",
-                className: "flex items-center justify-center",
+                className: "cursor-pointer flex items-center justify-center",
                 style: {
                   width: 32,
                   height: 32,
@@ -14055,7 +14057,7 @@ function PostCell({ post, onLike, onComment, onRepost, onShare, onMenuClick }) {
               {
                 type: "button",
                 onClick: onMenuClick,
-                className: "flex items-center justify-center",
+                className: "cursor-pointer flex items-center justify-center",
                 style: {
                   width: 32,
                   height: 32,
@@ -15459,7 +15461,7 @@ function CategorySection({ category, components, defaultExpanded = true }) {
       "button",
       {
         onClick: () => setIsExpanded(!isExpanded),
-        className: "flex items-center gap-2 w-full px-3 py-2 text-left hover:bg-[var(--canvas-surface)] rounded-md transition-colors",
+        className: "cursor-pointer flex items-center gap-2 w-full px-3 py-2 text-left hover:bg-[var(--canvas-surface)] rounded-md transition-colors",
         children: [
           isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-[var(--canvas-text-muted)]" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-[var(--canvas-text-muted)]" }),
           /* @__PURE__ */ jsx(
@@ -16323,7 +16325,7 @@ function ComponentSearch({
             "button",
             {
               onClick: () => removeComponent(component.id),
-              className: "p-0.5 rounded-full hover:bg-[var(--canvas-primary)]/20 transition-colors",
+              className: "cursor-pointer p-0.5 rounded-full hover:bg-[var(--canvas-primary)]/20 transition-colors",
               children: /* @__PURE__ */ jsx(X, { className: "size-3" })
             }
           )
@@ -16375,7 +16377,7 @@ function ComponentSearch({
               "button",
               {
                 onClick: () => toggleCategory(category),
-                className: "w-full flex items-center justify-between px-3 py-2 bg-[var(--canvas-surface)] border-b border-[var(--canvas-border)] font-semibold text-[var(--canvas-text-muted)] uppercase tracking-wide hover:bg-[var(--canvas-surface-brand)]/50",
+                className: "cursor-pointer w-full flex items-center justify-between px-3 py-2 bg-[var(--canvas-surface)] border-b border-[var(--canvas-border)] font-semibold text-[var(--canvas-text-muted)] uppercase tracking-wide hover:bg-[var(--canvas-surface-brand)]/50",
                 style: { fontSize: "var(--typo-body-xs-size)" },
                 children: [
                   /* @__PURE__ */ jsxs("span", { children: [
@@ -16397,7 +16399,7 @@ function ComponentSearch({
                 {
                   onClick: () => toggleComponent(component),
                   className: cn(
-                    "w-full flex items-start gap-3 px-3 py-2.5 text-left transition-colors border-b border-[var(--canvas-border)]/50 last:border-b-0",
+                    "cursor-pointer w-full flex items-start gap-3 px-3 py-2.5 text-left transition-colors border-b border-[var(--canvas-border)]/50 last:border-b-0",
                     isSelected ? "bg-[var(--canvas-surface-brand)]/50" : "hover:bg-[var(--canvas-surface)]"
                   ),
                   children: [
@@ -16582,7 +16584,7 @@ function CustomComponentHelper({ className }) {
         {
           onClick: () => setComponentType(type.id),
           className: cn(
-            "px-4 py-2 rounded-lg font-medium transition-all",
+            "cursor-pointer px-4 py-2 rounded-lg font-medium transition-all",
             componentType === type.id ? "bg-[var(--canvas-primary)] text-[var(--canvas-primary-foreground)]" : "bg-[var(--canvas-surface)] text-[var(--canvas-text-muted)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)] hover:text-[var(--canvas-primary)]"
           ),
           style: { fontSize: "var(--typo-body-s-size)" },
@@ -16660,7 +16662,7 @@ function CustomComponentHelper({ className }) {
             onClick: handleCopy,
             disabled: !generatedPrompt,
             className: cn(
-              "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md font-medium transition-all",
+              "cursor-pointer flex items-center gap-1.5 px-2.5 py-1.5 rounded-md font-medium transition-all",
               copied ? "bg-[var(--canvas-success-surface)] text-[var(--canvas-success)]" : "bg-[var(--canvas-background)] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)]"
             ),
             style: { fontSize: "var(--typo-body-xs-size)" },
@@ -16802,7 +16804,7 @@ function TileCard({ item, onSave, onClick }) {
                   "button",
                   {
                     onClick: handlePrevImage,
-                    className: "flex items-center justify-center shrink-0 transition-transform hover:scale-105",
+                    className: "cursor-pointer flex items-center justify-center shrink-0 transition-transform hover:scale-105",
                     style: {
                       width: "32px",
                       height: "32px",
@@ -16824,7 +16826,7 @@ function TileCard({ item, onSave, onClick }) {
                   "button",
                   {
                     onClick: handleNextImage,
-                    className: "flex items-center justify-center shrink-0 transition-transform hover:scale-105",
+                    className: "cursor-pointer flex items-center justify-center shrink-0 transition-transform hover:scale-105",
                     style: {
                       width: "32px",
                       height: "32px",
@@ -16847,7 +16849,7 @@ function TileCard({ item, onSave, onClick }) {
                 "button",
                 {
                   onClick: handleSave,
-                  className: "flex items-center transition-transform hover:scale-105",
+                  className: "cursor-pointer flex items-center transition-transform hover:scale-105",
                   style: {
                     height: "var(--spacing-5xl, 40px)",
                     paddingLeft: "var(--spacing-xl, 16px)",
@@ -20126,7 +20128,7 @@ function PaginationButton({
       type: "button",
       onClick,
       className: cn(
-        "flex items-center justify-center shrink-0 transition-colors",
+        "cursor-pointer flex items-center justify-center shrink-0 transition-colors",
         "font-semibold",
         "size-[32px] rounded-[var(--radius-xs)]",
         "border bg-[var(--canvas-background)]",
@@ -20169,7 +20171,7 @@ function NavigationButton({
         "h-[32px] rounded-[var(--radius-xs)]",
         "border bg-[var(--canvas-background)] border-[var(--canvas-border)]",
         isIconOnly ? "w-[32px]" : "px-[var(--spacing-md)] gap-[var(--spacing-xs)]",
-        disabled ? "text-[var(--canvas-text-placeholder)] cursor-not-allowed" : "text-[var(--canvas-text)] hover:bg-[var(--canvas-surface)]",
+        disabled ? "text-[var(--canvas-text-placeholder)] cursor-not-allowed" : "cursor-pointer text-[var(--canvas-text)] hover:bg-[var(--canvas-surface)]",
         className
       ),
       "aria-label": type,
@@ -20404,7 +20406,7 @@ function PromptTemplate({
             {
               onClick: handleCopy,
               className: cn(
-                "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md font-medium transition-all",
+                "cursor-pointer flex items-center gap-1.5 px-2.5 py-1.5 rounded-md font-medium transition-all",
                 copied ? "bg-[var(--canvas-success-surface)] text-[var(--canvas-success)]" : "bg-[var(--canvas-background)] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)]"
               ),
               style: { fontSize: "var(--typo-body-xs-size)" },
@@ -20435,7 +20437,7 @@ function MiniPromptChip({ label, prompt }) {
     {
       onClick: handleCopy,
       className: cn(
-        "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full font-medium transition-all",
+        "cursor-pointer inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full font-medium transition-all",
         copied ? "bg-[var(--canvas-success-surface)] text-[var(--canvas-success)]" : "bg-[var(--canvas-surface)] text-[var(--canvas-text-muted)] hover:bg-[var(--canvas-surface-hover)] hover:text-[var(--canvas-text)] border border-[var(--canvas-border)]"
       ),
       style: { fontSize: "var(--typo-body-xs-size)" },
@@ -20532,7 +20534,7 @@ function ScreenPromptTemplate() {
           {
             onClick: () => setPromptType(type),
             className: cn(
-              "flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all",
+              "cursor-pointer flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all",
               isActive ? "bg-[var(--canvas-primary)] text-[var(--canvas-primary-foreground)] shadow-sm" : "bg-[var(--canvas-background)] text-[var(--canvas-text-muted)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)] hover:text-[var(--canvas-primary)]"
             ),
             style: { fontSize: "var(--typo-body-s-size)" },
@@ -20557,7 +20559,7 @@ function ScreenPromptTemplate() {
         {
           onClick: handleCopy,
           className: cn(
-            "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md font-medium transition-all",
+            "cursor-pointer flex items-center gap-1.5 px-2.5 py-1.5 rounded-md font-medium transition-all",
             copied ? "bg-[var(--canvas-success-surface)] text-[var(--canvas-success)]" : "bg-[var(--canvas-background)] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)]"
           ),
           style: { fontSize: "var(--typo-body-xs-size)" },
@@ -20746,7 +20748,7 @@ function ScreenPromptBuilder({ className }) {
             onClick: handleCopy,
             disabled: !generatedPrompt,
             className: cn(
-              "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md font-medium transition-all",
+              "cursor-pointer flex items-center gap-1.5 px-2.5 py-1.5 rounded-md font-medium transition-all",
               copied ? "bg-[var(--canvas-success-surface)] text-[var(--canvas-success)]" : "bg-[var(--canvas-background)] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)]"
             ),
             style: { fontSize: "var(--typo-body-xs-size)" },
@@ -20923,7 +20925,7 @@ function ScreenFlowchart({
       "button",
       {
         onClick: onOpenFullscreen,
-        className: "absolute top-3 right-3 z-10 flex items-center gap-1.5 px-3 py-1.5 rounded-md font-medium bg-[var(--canvas-background)] text-[var(--canvas-text-muted)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)] hover:text-[var(--canvas-primary)] transition-colors",
+        className: "cursor-pointer absolute top-3 right-3 z-10 flex items-center gap-1.5 px-3 py-1.5 rounded-md font-medium bg-[var(--canvas-background)] text-[var(--canvas-text-muted)] border border-[var(--canvas-border)] hover:border-[var(--canvas-primary)] hover:text-[var(--canvas-primary)] transition-colors",
         style: { fontSize: "var(--typo-body-xs-size)" },
         children: [
           /* @__PURE__ */ jsx(ExternalLink, { className: "size-3" }),
@@ -23726,7 +23728,7 @@ function PricingCards() {
               "button",
               {
                 onClick: () => setIsAnnual(!isAnnual),
-                className: "relative w-20 h-11 rounded-full transition-colors",
+                className: "cursor-pointer relative w-20 h-11 rounded-full transition-colors",
                 style: {
                   backgroundColor: isAnnual ? "var(--canvas-primary)" : "var(--canvas-border)"
                 },