@agentiffai/design 1.3.4 → 1.3.6

package/dist/index.js

@@ -611,7 +611,6 @@ var ChatInput = ({
       if (inputRef.current) {
         inputRef.current.style.height = "auto";
       }
-      inputRef.current?.focus();
     }
   };
   const handleSuggestionClick = (suggestionText) => {
@@ -1158,6 +1157,30 @@ var Container3 = styled11.nav`
   @media (max-width: ${tokens.breakpoints.tablet}px) {
     width: 60px; /* Match MainPane left offset on mobile */
   }
+
+  /* Mobile landscape: allow content to overflow and scroll with thin scrollbar */
+  @media (orientation: landscape) and (max-height: 500px) {
+    width: 60px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: thin; /* Firefox - show thin scrollbar */
+
+    /* Show thin scrollbar for Chrome, Safari */
+    &::-webkit-scrollbar {
+      display: block;
+      width: 3px;
+      height: 3px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: ${tokens.colors.border.default};
+      border-radius: 2px;
+    }
+  }
 `;
 var TopSection = styled11.div`
   display: flex;
@@ -1188,6 +1211,7 @@ var BackButton = styled11.button`
   align-items: center;
   justify-content: center;
   transition: all ${tokens.transitions.normal};
+  -webkit-tap-highlight-color: transparent;
 
   &:hover {
     background-color: ${tokens.colors.primary};
@@ -1195,6 +1219,7 @@ var BackButton = styled11.button`
 
   &:active {
     transform: translate(-50%, -50%) scale(0.95);
+    opacity: 0.8;
   }
 
   &:focus {
@@ -1245,6 +1270,12 @@ var FolderGroupsSlot = styled11.div`
   @media (max-width: ${tokens.breakpoints.tablet}px) {
     padding: 0 6px ${tokens.spacing.md} 96px; /* Reduce horizontal padding on mobile */
   }
+
+  /* Mobile landscape: remove extra padding since BottomSection flows with content */
+  @media (orientation: landscape) and (max-height: 500px) {
+    padding-bottom: ${tokens.spacing.md};
+    flex: 0 0 auto; /* Don't flex-grow, allow natural height */
+  }
 `;
 var BottomSection = styled11.div`
   position: absolute;
@@ -1261,11 +1292,19 @@ var BottomSection = styled11.div`
   @media (prefers-color-scheme: dark) {
     background-color: ${tokens.colors.background.darkest};
   }
+
+  /* Mobile landscape: make bottom section flow with content instead of fixed */
+  @media (orientation: landscape) and (max-height: 500px) {
+    position: relative;
+    bottom: auto;
+    margin-top: auto; /* Push to bottom of flex container */
+    flex-shrink: 0;
+  }
 `;
 var BottomButton = styled11.button`
   width: 40px;
   height: 40px;
-  border-radius: 0;
+  border-radius: ${tokens.borderRadius.full};
   border: none;
   background-color: transparent;
   color: white;
@@ -1274,6 +1313,7 @@ var BottomButton = styled11.button`
   align-items: center;
   justify-content: center;
   transition: all ${tokens.transitions.normal};
+  -webkit-tap-highlight-color: transparent;
 
   &:hover {
     opacity: 0.7;
@@ -1281,6 +1321,7 @@ var BottomButton = styled11.button`
 
   &:active {
     transform: scale(0.95);
+    opacity: 0.8;
   }
 
   &:focus {
@@ -1290,6 +1331,7 @@ var BottomButton = styled11.button`
   &:focus-visible {
     outline: 2px solid ${tokens.colors.border.focus};
     outline-offset: 2px;
+    border-radius: ${tokens.borderRadius.full};
   }
 `;
 function NavVertical({
@@ -1365,6 +1407,7 @@ var BackgroundPane = styled11.div`
   bottom: 52px; /* Height of horizontal nav */
   background-color: transparent;
   overflow: auto;
+  scrollbar-gutter: stable; /* Reserve space for scrollbar to prevent layout shift */
   z-index: ${tokens.zIndex.base}; /* Lower than MainPane */
 
   /* Custom scrollbar styling */
@@ -1403,6 +1446,7 @@ var MainPane = styled11.main`
   bottom: 52px; /* Height of horizontal nav */
   background-color: ${tokens.colors.surface.overlay};
   overflow: auto;
+  scrollbar-gutter: stable; /* Reserve space for scrollbar to prevent layout shift */
   z-index: ${tokens.zIndex.base + 1}; /* Higher than BackgroundPane */
 
   /* Custom scrollbar styling */
@@ -1479,7 +1523,7 @@ var ActionButton = styled11.button`
   height: ${({ $size = 32 }) => $size}px;
   min-width: ${({ $size = 32 }) => $size}px;
   min-height: ${({ $size = 32 }) => $size}px;
-  border-radius: ${({ $isPrimary }) => $isPrimary ? tokens.borderRadius.full : tokens.borderRadius.sm};
+  border-radius: ${({ $isPrimary }) => $isPrimary ? tokens.borderRadius.full : tokens.borderRadius.md};
   border: none;
   background-color: ${({ $isPrimary }) => $isPrimary ? tokens.colors.primary : "transparent"};
   color: ${({ $isPrimary }) => $isPrimary ? tokens.colors.text.primary : tokens.colors.text.secondary};
@@ -1489,6 +1533,7 @@ var ActionButton = styled11.button`
   justify-content: center;
   transition: all ${tokens.transitions.fast};
   font-size: ${tokens.typography.fontSize.base};
+  -webkit-tap-highlight-color: transparent;
 
   &:hover {
     background-color: ${({ $isPrimary }) => $isPrimary ? tokens.colors.secondary : tokens.colors.surface.overlayHover};
@@ -1497,6 +1542,7 @@ var ActionButton = styled11.button`
 
   &:active {
     transform: scale(0.95);
+    opacity: 0.8;
   }
 
   ${({ $isActive, $isPrimary }) => $isActive && !$isPrimary && css`
@@ -2155,6 +2201,7 @@ var TabPanelWrapper = styled11.div`
   padding: ${tokens.spacing.lg};
   overflow-y: auto;
   overflow-x: hidden; // Prevent horizontal overflow
+  scrollbar-gutter: stable; // Always reserve space for scrollbar to prevent width jump
   background-color: ${tokens.colors.surface.overlay};
   min-height: 0; // Enable proper flex shrinking and scrolling
 
@@ -3748,6 +3795,7 @@ var StyledUserMessage = styled11.button`
   user-select: none;
   white-space: pre-wrap;
   word-wrap: break-word;
+  word-break: break-word;
   position: relative;
   text-align: left;
 
@@ -3921,12 +3969,23 @@ var darkTheme = {
   breakpoints: tokens.breakpoints
 };
 var GlobalStyle = createGlobalStyle`
+  /* Universal tap highlight removal - nuclear option for Android WebKit */
+  * {
+    -webkit-tap-highlight-color: transparent !important;
+  }
+
   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
 
+  html {
+    /* Ensure tap highlight is disabled at root level */
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+  }
+
   body {
     margin: 0;
     padding: 0;
@@ -3935,10 +3994,34 @@ var GlobalStyle = createGlobalStyle`
     background-color: ${({ theme }) => theme.colors.surface};
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    /* Disable tap highlight on body as well */
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  /* Remove mobile tap highlight for ALL interactive elements */
+  a,
+  button,
+  input,
+  select,
+  textarea,
+  label,
+  [role="button"],
+  [role="link"],
+  [role="tab"],
+  [role="menuitem"],
+  [role="option"],
+  [tabindex]:not([tabindex="-1"]),
+  [onclick] {
+    -webkit-tap-highlight-color: transparent !important;
+    -webkit-touch-callout: none;
+    touch-action: manipulation;
   }
 
   button {
     font-family: inherit;
+    /* Prevent text selection flash on tap */
+    user-select: none;
+    -webkit-user-select: none;
   }
 `;
 
@@ -5343,7 +5426,7 @@ var Input2 = ({
   ] }) });
 };
 var Container12 = styled11.div`
-  font-family: ${(props) => props.variant === "code" ? tokens.typography.fontFamily.monospace : tokens.typography.fontFamily.primary};
+  font-family: ${(props) => props.$variant === "code" ? tokens.typography.fontFamily.monospace : tokens.typography.fontFamily.primary};
   white-space: pre-wrap;
   word-break: break-word;
   line-height: ${tokens.typography.lineHeight.normal};
@@ -5396,7 +5479,7 @@ var StreamingTextBase = ({
     wasStreamingRef.current = isStreaming;
   }, [content, isStreaming, onStreamComplete]);
   const showCursor = isStreaming && cursor;
-  return /* @__PURE__ */ jsxs(Container12, { variant, className, children: [
+  return /* @__PURE__ */ jsxs(Container12, { $variant: variant, className, children: [
     displayedText,
     showCursor && /* @__PURE__ */ jsx(Cursor, {})
   ] });
@@ -8181,7 +8264,7 @@ PostPreviewCard.displayName = "PostPreviewCard";
 var fadeIn2 = keyframes`
   from {
     opacity: 0;
-    transform: translateY(-4px);
+    transform: translate(2px, 2px);
   }
   to {
     opacity: 1;
@@ -8543,6 +8626,9 @@ var ContentContainer2 = styled11.div`
   position: relative;
   min-height: 200px;
   overflow: hidden;
+  /* Padding to prevent card borders/shadows from being clipped */
+  padding: 0 ${tokens.spacing.xs};
+  margin: 0 -${tokens.spacing.xs};
 `;
 var Slide = styled11.div`
   position: ${({ $isActive }) => $isActive ? "relative" : "absolute"};
@@ -8685,7 +8771,7 @@ var Container14 = styled11.div`
   flex-direction: column;
   height: 100%;
   width: 100%;
-  padding: ${tokens.spacing.md} ${tokens.spacing.md} 0 ${tokens.spacing.md};
+  padding: 0;
   box-sizing: border-box;
   background: linear-gradient(
     180deg,
@@ -8710,12 +8796,12 @@ var Header3 = styled11.div`
     position: absolute;
     left: 0;
     right: 0;
-    top: 87%;
-    height: 24px;
+    top: 100%;
+    height: 16px;
     background: linear-gradient(
       to bottom,
       ${tokens.colors.backdrop} 0%,
-      ${tokens.colors.backdrop}00 100%
+      transparent 100%
     );
     pointer-events: none;
   }
@@ -8767,7 +8853,8 @@ var Content4 = styled11.div`
   flex: 1;
   display: flex;
   flex-direction: column;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   /* Extra top padding to account for header fade overlay */
   padding-top: ${tokens.spacing.md};
 `;