@tutti-os/ui-system 0.0.227 → 0.0.228

package/dist/{chunk-FQWIOPDU.js → chunk-GYBECSSN.js}

@@ -23,6 +23,8 @@ import {
 // src/components/avatar/avatar.tsx
 import { Avatar as AvatarPrimitive } from "radix-ui";
 import {
+  useEffect,
+  useRef,
   useState
 } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -32,15 +34,52 @@ var sizeClassNames = {
   md: "size-8",
   lg: "size-10"
 };
+var sizePixels = {
+  xs: 16,
+  sm: 24,
+  md: 32,
+  lg: 40
+};
+var avatarDeliveryBuckets = [32, 48, 64, 96, 128, 192, 256, 384, 512];
 function avatarInitial(label, initial) {
   const value = initial?.trim() || label.trim();
   return Array.from(value)[0]?.toLocaleUpperCase() || "?";
 }
+function avatarSizePixels(size) {
+  return typeof size === "number" && Number.isFinite(size) && size > 0 ? size : typeof size === "number" ? sizePixels.md : sizePixels[size];
+}
+function avatarDeliveryDimension(value) {
+  const desiredSize = Math.ceil(value * 2);
+  return avatarDeliveryBuckets.find((bucket) => bucket >= desiredSize) ?? avatarDeliveryBuckets.at(-1) ?? desiredSize;
+}
+function avatarTransformUrl(src, dimensions) {
+  let url;
+  try {
+    url = new URL(src);
+  } catch {
+    return src;
+  }
+  if (url.protocol !== "http:" && url.protocol !== "https:") {
+    return src;
+  }
+  const fragmentIndex = src.indexOf("#");
+  const sourceWithoutFragment = fragmentIndex >= 0 ? src.slice(0, fragmentIndex) : src;
+  const fragment = fragmentIndex >= 0 ? src.slice(fragmentIndex) : "";
+  const separator = sourceWithoutFragment.includes("?") ? sourceWithoutFragment.endsWith("?") || sourceWithoutFragment.endsWith("&") ? "" : "&" : "?";
+  const transformQuery = new URLSearchParams({
+    width: String(avatarDeliveryDimension(dimensions.width)),
+    height: String(avatarDeliveryDimension(dimensions.height)),
+    format: "webp",
+    fit: "inside"
+  });
+  return `${sourceWithoutFragment}${separator}${transformQuery}${fragment}`;
+}
 function Avatar({
   children,
   className,
   fallback = "initial",
   fallbackColor,
+  fallbackSrc,
   imageClassName,
   imageProps,
   initial,
@@ -50,10 +89,24 @@ function Avatar({
   src,
   style,
   surfaceClassName,
+  transform = false,
   ...rootProps
 }) {
   const normalizedSrc = src?.trim() ?? "";
-  const effectiveImageSrc = loading ? "" : normalizedSrc;
+  const normalizedFallbackSrc = fallbackSrc?.trim() ?? "";
+  const initialSize = avatarSizePixels(size);
+  const surfaceRef = useRef(null);
+  const [renderedDimensions, setRenderedDimensions] = useState(null);
+  const [failedTransformUrl, setFailedTransformUrl] = useState("");
+  const [failedOriginalUrl, setFailedOriginalUrl] = useState("");
+  const transformedImageSrc = transform ? avatarTransformUrl(
+    normalizedSrc,
+    renderedDimensions ?? { height: initialSize, width: initialSize }
+  ) : normalizedSrc;
+  const shouldRetryOriginal = transformedImageSrc !== normalizedSrc && failedTransformUrl === transformedImageSrc;
+  const originalCandidateSrc = shouldRetryOriginal ? normalizedSrc : transformedImageSrc;
+  const shouldUseFallback = normalizedSrc.length > 0 && originalCandidateSrc === normalizedSrc && failedOriginalUrl === normalizedSrc;
+  const effectiveImageSrc = loading ? "" : shouldUseFallback ? normalizedFallbackSrc : originalCandidateSrc;
   const [imageState, setImageState] = useState({ src: "", status: "idle" });
   const imageStatus = imageState.src === effectiveImageSrc ? imageState.status : effectiveImageSrc ? "loading" : "error";
   const showImage = imageStatus === "loaded" && effectiveImageSrc.length > 0;
@@ -61,6 +114,46 @@ function Avatar({
   const imageSrcForPrimitive = imageStatus === "error" ? void 0 : effectiveImageSrc || void 0;
   const avatarState = loading ? "loading" : effectiveImageSrc.length === 0 ? fallback : imageStatus === "loading" || imageStatus === "idle" ? "loading" : showImage ? "image" : fallback;
   const numericSizeStyle = typeof size === "number" ? { height: `${size}px`, width: `${size}px`, ...style } : style;
+  useEffect(() => {
+    setFailedTransformUrl("");
+    setFailedOriginalUrl("");
+  }, [normalizedFallbackSrc, normalizedSrc, transform]);
+  useEffect(() => {
+    const surface = surfaceRef.current;
+    if (!surface) {
+      return;
+    }
+    const updateDimensions = (width, height) => {
+      if (width <= 0 || height <= 0) {
+        return;
+      }
+      setRenderedDimensions(
+        (current) => current?.width === width && current.height === height ? current : { height, width }
+      );
+    };
+    const rect = surface.getBoundingClientRect();
+    updateDimensions(rect.width, rect.height);
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry) {
+        updateDimensions(entry.contentRect.width, entry.contentRect.height);
+      }
+    });
+    observer.observe(surface);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  const markImageError = () => {
+    if (transformedImageSrc !== normalizedSrc && effectiveImageSrc === transformedImageSrc && shouldRetryOriginal === false) {
+      setFailedTransformUrl(transformedImageSrc);
+    } else if (effectiveImageSrc === normalizedSrc) {
+      setFailedOriginalUrl(normalizedSrc);
+    }
+    setImageState({ src: effectiveImageSrc, status: "error" });
+  };
   return /* @__PURE__ */ jsxs(
     AvatarPrimitive.Root,
     {
@@ -84,6 +177,7 @@ function Avatar({
               surfaceClassName
             ),
             "data-slot": "avatar-surface",
+            ref: surfaceRef,
             style: fallback === "initial" && fallbackColor && !showImage && !loading && !imagePending ? { backgroundColor: fallbackColor } : void 0,
             children: [
               /* @__PURE__ */ jsx(
@@ -97,11 +191,15 @@ function Avatar({
                   ),
                   src: imageSrcForPrimitive,
                   onError: (event) => {
-                    setImageState({ src: effectiveImageSrc, status: "error" });
+                    markImageError();
                     imageProps?.onError?.(event);
                   },
                   onLoadingStatusChange: (status) => {
-                    setImageState({ src: effectiveImageSrc, status });
+                    if (status === "error") {
+                      markImageError();
+                    } else {
+                      setImageState({ src: effectiveImageSrc, status });
+                    }
                     imageProps?.onLoadingStatusChange?.(status);
                   }
                 }
@@ -3125,7 +3223,7 @@ function SectionTabs({
 }
 
 // src/components/segment-bar/segment-bar.tsx
-import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState8 } from "react";
+import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState8 } from "react";
 import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 function SegmentBar({
   segments,
@@ -3135,8 +3233,8 @@ function SegmentBar({
   className,
   testId
 }) {
-  const containerRef = useRef4(null);
-  const buttonRefs = useRef4({});
+  const containerRef = useRef5(null);
+  const buttonRefs = useRef5({});
   const [indicator, setIndicator] = useState8({
     left: 0,
     width: 0,
@@ -3159,7 +3257,7 @@ function SegmentBar({
       (current) => current.left === next.left && current.width === next.width && current.ready === next.ready ? current : next
     );
   }, [segments, value]);
-  useEffect5(() => {
+  useEffect6(() => {
     const container = containerRef.current;
     if (!container || typeof ResizeObserver === "undefined") {
       return;
@@ -4110,7 +4208,7 @@ function ToastViewport({
 }
 
 // src/components/underline-tabs/underline-tabs.tsx
-import { useEffect as useEffect7, useLayoutEffect as useLayoutEffect4, useRef as useRef5, useState as useState10 } from "react";
+import { useEffect as useEffect8, useLayoutEffect as useLayoutEffect4, useRef as useRef6, useState as useState10 } from "react";
 import { jsx as jsx36, jsxs as jsxs18 } from "react/jsx-runtime";
 function UnderlineTabs({
   tabs,
@@ -4126,9 +4224,9 @@ function UnderlineTabs({
   scrollRightTestId,
   preventMouseDownDefault = false
 }) {
-  const viewportRef = useRef5(null);
-  const rowRef = useRef5(null);
-  const buttonRefs = useRef5({});
+  const viewportRef = useRef6(null);
+  const rowRef = useRef6(null);
+  const buttonRefs = useRef6({});
   const [indicatorStyle, setIndicatorStyle] = useState10({ left: 0, width: 0 });
   const [overflow, setOverflow] = useState10({
     canScrollLeft: false,
@@ -4151,7 +4249,7 @@ function UnderlineTabs({
       (current) => current.left === nextStyle.left && current.width === nextStyle.width ? current : nextStyle
     );
   }, [tabs, value]);
-  useEffect7(() => {
+  useEffect8(() => {
     const viewport = viewportRef.current;
     if (!viewport) {
       return;
@@ -4743,4 +4841,4 @@ export {
   UnderlineTabs,
   ViewportMenuSurface
 };
-//# sourceMappingURL=chunk-FQWIOPDU.js.map
+//# sourceMappingURL=chunk-GYBECSSN.js.map