@tutti-os/ui-system 0.0.124 → 0.0.125

package/dist/{chunk-XKU7P7UM.js → chunk-R7ZLHOKX.js}

@@ -1475,6 +1475,9 @@ function Input({
   );
 }
 
+// src/components/mention-pill/mention-pill.tsx
+import * as React7 from "react";
+
 // src/components/mention-pill/truncating-pill-label.tsx
 import * as React6 from "react";
 
@@ -1609,12 +1612,15 @@ function MentionPill({
   className,
   fileKind = "file",
   iconUrl,
+  iconContainerProps,
+  fallbackIconProps,
   kind,
   label,
   removable = kind === "file",
   removeButtonProps,
   style,
   summary,
+  tooltipEnabled = true,
   withTooltipProvider = true,
   ...props
 }) {
@@ -1623,6 +1629,7 @@ function MentionPill({
   const color = isFile && fileKind === "folder" ? "var(--folder)" : mentionPillTokenByKind[kind];
   const dataKind = mentionPillDataKindByKind[kind];
   const normalizedIconUrl = iconUrl?.trim() ?? "";
+  const [failedIconUrl, setFailedIconUrl] = React7.useState(null);
   const iconSizeClassName = "size-4";
   const iconShellClassName = isFile || kind === "session" ? "size-4" : "size-[18px]";
   const tooltipText = [label, summary].filter(
@@ -1648,35 +1655,44 @@ function MentionPill({
         /* @__PURE__ */ jsxs8(
           "span",
           {
+            ...iconContainerProps,
             "aria-hidden": removable ? void 0 : true,
             className: cn(
               "relative grid shrink-0 place-items-center",
-              iconShellClassName
+              iconShellClassName,
+              iconContainerProps?.className
             ),
             children: [
-              normalizedIconUrl ? /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx16(
+                Icon,
+                {
+                  ...fallbackIconProps,
+                  className: cn(
+                    "col-start-1 row-start-1 text-current transition-opacity",
+                    removable && "group-hover:opacity-0 group-focus-within:opacity-0",
+                    iconSizeClassName,
+                    fallbackIconProps?.className
+                  ),
+                  "data-mention-pill-fallback-icon": "true"
+                }
+              ),
+              normalizedIconUrl && failedIconUrl !== normalizedIconUrl ? /* @__PURE__ */ jsx16(
                 "img",
                 {
                   src: normalizedIconUrl,
                   alt: "",
                   className: cn(
-                    "size-full rounded-[3px] object-cover transition-opacity",
+                    "col-start-1 row-start-1 size-full rounded-[3px] object-cover transition-opacity",
                     removable && "group-hover:opacity-0 group-focus-within:opacity-0"
                   ),
                   decoding: "async",
                   loading: "lazy",
-                  draggable: false
-                }
-              ) : /* @__PURE__ */ jsx16(
-                Icon,
-                {
-                  className: cn(
-                    "text-current transition-opacity",
-                    removable && "group-hover:opacity-0 group-focus-within:opacity-0",
-                    iconSizeClassName
-                  )
+                  draggable: false,
+                  onError: () => {
+                    setFailedIconUrl(normalizedIconUrl);
+                  }
                 }
-              ),
+              ) : null,
               removable ? /* @__PURE__ */ jsx16(
                 "button",
                 {
@@ -1696,7 +1712,7 @@ function MentionPill({
         /* @__PURE__ */ jsxs8(
           TruncatingPillLabel,
           {
-            tooltip: tooltipText,
+            tooltip: tooltipEnabled ? tooltipText : "",
             withTooltipProvider,
             children: [
               /* @__PURE__ */ jsx16("span", { children: label }),
@@ -1839,7 +1855,7 @@ function ResizableHandle({
 }
 
 // src/components/scroll-area/scroll-area.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 var MIN_THUMB_SIZE_PX = 24;
 function ScrollArea({
@@ -1935,9 +1951,9 @@ function CustomScrollArea({
   viewportTestId,
   ...props
 }) {
-  const localViewportRef = React7.useRef(null);
-  const contentRef = React7.useRef(null);
-  const [active, setActive] = React7.useState(false);
+  const localViewportRef = React8.useRef(null);
+  const contentRef = React8.useRef(null);
+  const [active, setActive] = React8.useState(false);
   const alwaysVisible = type === "always" || type === "scroll" || hasAlwaysVisibleScrollbarSelector(className);
   return /* @__PURE__ */ jsxs9(
     ScrollAreaFrame,
@@ -2045,15 +2061,15 @@ function ScrollAreaScrollbar({
   orientation,
   viewportRef
 }) {
-  const trackRef = React7.useRef(null);
-  const thumbRef = React7.useRef(null);
-  const dragStateRef = React7.useRef(null);
-  const frameRef = React7.useRef(null);
-  const scrollableRef = React7.useRef(false);
-  const [dragging, setDragging] = React7.useState(false);
-  const [scrollable, setScrollable] = React7.useState(false);
-  const [trackActive, setTrackActive] = React7.useState(false);
-  const syncScrollbarState = React7.useCallback(() => {
+  const trackRef = React8.useRef(null);
+  const thumbRef = React8.useRef(null);
+  const dragStateRef = React8.useRef(null);
+  const frameRef = React8.useRef(null);
+  const scrollableRef = React8.useRef(false);
+  const [dragging, setDragging] = React8.useState(false);
+  const [scrollable, setScrollable] = React8.useState(false);
+  const [trackActive, setTrackActive] = React8.useState(false);
+  const syncScrollbarState = React8.useCallback(() => {
     const viewport = viewportRef.current;
     const track = trackRef.current;
     const thumb = thumbRef.current;
@@ -2092,7 +2108,7 @@ function ScrollAreaScrollbar({
     }
     updateScrollable(true, scrollableRef, setScrollable);
   }, [orientation, viewportRef]);
-  const scheduleSync = React7.useCallback(() => {
+  const scheduleSync = React8.useCallback(() => {
     if (frameRef.current !== null) {
       return;
     }
@@ -2101,7 +2117,7 @@ function ScrollAreaScrollbar({
       syncScrollbarState();
     });
   }, [syncScrollbarState]);
-  const scrollViewportToThumbOffset = React7.useCallback(
+  const scrollViewportToThumbOffset = React8.useCallback(
     (thumbOffset) => {
       const viewport = viewportRef.current;
       const track = trackRef.current;
@@ -2128,7 +2144,7 @@ function ScrollAreaScrollbar({
     },
     [orientation, syncScrollbarState, viewportRef]
   );
-  const handleTrackPointerDown = React7.useCallback(
+  const handleTrackPointerDown = React8.useCallback(
     (event) => {
       if (event.button !== 0 || !scrollableRef.current) {
         return;
@@ -2148,7 +2164,7 @@ function ScrollAreaScrollbar({
     },
     [orientation, scrollViewportToThumbOffset]
   );
-  const handleThumbPointerDown = React7.useCallback(
+  const handleThumbPointerDown = React8.useCallback(
     (event) => {
       if (event.button !== 0 || !scrollableRef.current) {
         return;
@@ -2180,7 +2196,7 @@ function ScrollAreaScrollbar({
     },
     [orientation, viewportRef]
   );
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (!dragging) {
       return;
     }
@@ -2211,7 +2227,7 @@ function ScrollAreaScrollbar({
       window.removeEventListener("pointerup", handlePointerUp);
     };
   }, [dragging, orientation, syncScrollbarState, viewportRef]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) {
       updateScrollable(false, scrollableRef, setScrollable);
@@ -2233,7 +2249,7 @@ function ScrollAreaScrollbar({
       resizeObserver?.disconnect();
     };
   }, [contentRef, scheduleSync, syncScrollbarState, viewportRef]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     scheduleSync();
   });
   return /* @__PURE__ */ jsx20(
@@ -2945,7 +2961,7 @@ function Textarea({ className, ...props }) {
 }
 
 // src/components/toast/toast.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import { Toast as ToastPrimitive } from "radix-ui";
 import { cva as cva5 } from "class-variance-authority";
 import { jsx as jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -2956,7 +2972,7 @@ function ToastProvider({
 }) {
   return /* @__PURE__ */ jsx30(ToastPrimitive.Provider, { duration, ...props });
 }
-var ToastVisualContext = React8.createContext(null);
+var ToastVisualContext = React9.createContext(null);
 var toastStatusIconByVariant = {
   destructive: FailedFilledIcon,
   success: SuccessFilledIcon
@@ -2980,7 +2996,7 @@ function formatToastText(children) {
   if (typeof children === "string") {
     return stripToastTrailingSentencePunctuation(children);
   }
-  const flatChildren = React8.Children.toArray(children);
+  const flatChildren = React9.Children.toArray(children);
   if (flatChildren.length === 1 && typeof flatChildren[0] === "string") {
     return stripToastTrailingSentencePunctuation(flatChildren[0]);
   }
@@ -3038,7 +3054,7 @@ function ToastTitle({
   children,
   ...props
 }) {
-  const toastVisual = React8.useContext(ToastVisualContext);
+  const toastVisual = React9.useContext(ToastVisualContext);
   const StatusIcon = toastVisual?.variant && hasToastStatusIcon(toastVisual.variant) ? toastStatusIconByVariant[toastVisual.variant] : null;
   return /* @__PURE__ */ jsxs12(
     ToastPrimitive.Title,
@@ -3117,7 +3133,7 @@ function ToastViewport({
 }
 
 // src/components/underline-tabs/underline-tabs.tsx
-import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState5 } from "react";
+import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState6 } from "react";
 import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
 function UnderlineTabs({
   tabs,
@@ -3136,8 +3152,8 @@ function UnderlineTabs({
   const viewportRef = useRef4(null);
   const rowRef = useRef4(null);
   const buttonRefs = useRef4({});
-  const [indicatorStyle, setIndicatorStyle] = useState5({ left: 0, width: 0 });
-  const [overflow, setOverflow] = useState5({
+  const [indicatorStyle, setIndicatorStyle] = useState6({ left: 0, width: 0 });
+  const [overflow, setOverflow] = useState6({
     canScrollLeft: false,
     canScrollRight: false
   });
@@ -3316,7 +3332,7 @@ function UnderlineTabs({
 }
 
 // src/components/viewport-menu-surface/viewport-menu-surface.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { jsx as jsx32 } from "react/jsx-runtime";
 var VIEWPORT_MENU_PADDING = 12;
@@ -3430,7 +3446,7 @@ function assignRef(ref, value) {
 function callHandler(handler, event) {
   handler?.(event);
 }
-var ViewportMenuSurface = React9.forwardRef(function ViewportMenuSurface2({
+var ViewportMenuSurface = React10.forwardRef(function ViewportMenuSurface2({
   open,
   placement,
   children,
@@ -3446,16 +3462,16 @@ var ViewportMenuSurface = React9.forwardRef(function ViewportMenuSurface2({
   className,
   ...rest
 }, forwardedRef) {
-  const surfaceRef = React9.useRef(null);
-  const [measuredSize, setMeasuredSize] = React9.useState(null);
-  const setRefs2 = React9.useCallback(
+  const surfaceRef = React10.useRef(null);
+  const [measuredSize, setMeasuredSize] = React10.useState(null);
+  const setRefs2 = React10.useCallback(
     (node) => {
       surfaceRef.current = node;
       assignRef(forwardedRef, node);
     },
     [forwardedRef]
   );
-  React9.useLayoutEffect(() => {
+  React10.useLayoutEffect(() => {
     if (!open) {
       setMeasuredSize(null);
       return;
@@ -3479,7 +3495,7 @@ var ViewportMenuSurface = React9.forwardRef(function ViewportMenuSurface2({
     observer.observe(element);
     return () => observer.disconnect();
   }, [open, placement]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (!open) {
       return;
     }
@@ -3536,7 +3552,7 @@ var ViewportMenuSurface = React9.forwardRef(function ViewportMenuSurface2({
     onDismiss,
     open
   ]);
-  const resolvedPlacement = React9.useMemo(() => {
+  const resolvedPlacement = React10.useMemo(() => {
     if (placement.type === "absolute") {
       const boundary2 = resolveMenuBoundaryFromPoint(
         placement.boundaryPoint ?? {
@@ -3737,4 +3753,4 @@ export {
   UnderlineTabs,
   ViewportMenuSurface
 };
-//# sourceMappingURL=chunk-XKU7P7UM.js.map
+//# sourceMappingURL=chunk-R7ZLHOKX.js.map