@agentiffai/design 1.3.3 → 1.3.4

package/dist/index.js

@@ -1082,12 +1082,16 @@ var ContentWrapper = styled11.div`
   align-items: center;
   /* Fixed height for actual navbar content - keeps vertical centering */
   height: 52px;
-  padding: 0 ${tokens.spacing.sm};
+  /* Left padding aligns WorkflowStatusCard icon with NavVertical icons (center at 36px) */
+  /* Icon is 36px with 6px card padding, so card edge at 12px, icon center at 12+6+18=36px */
+  padding: 0 ${tokens.spacing.xs} 0 12px;
+  gap: ${tokens.spacing.xs}; /* 4px gap between status card and action buttons */
   max-width: 100%;
 
-  /* Responsive padding */
-  @media (min-width: ${tokens.breakpoints.tablet}px) {
-    padding: 0 ${tokens.spacing.md};
+  /* Responsive padding - adjust for mobile nav width (60px, center at 30px) */
+  @media (max-width: ${tokens.breakpoints.tablet}px) {
+    /* Card edge at 6px, icon center at 6+6+18=30px to match 60px nav */
+    padding: 0 ${tokens.spacing.xs} 0 6px;
   }
 `;
 var UserStatusSlot = styled11.div`
@@ -1577,9 +1581,9 @@ var Container6 = styled11.button`
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
-  gap: ${tokens.spacing.xs};
+  gap: ${tokens.spacing.sm};
   padding: 6px;
-  margin: ${tokens.spacing.sm};
+  margin: 0; /* No margin - positioning handled by parent slot */
   border-radius: ${tokens.borderRadius.md};
   border: none;
   background: ${tokens.colors.surface.subtle};
@@ -1589,19 +1593,27 @@ var Container6 = styled11.button`
   cursor: ${(props) => props.$isDisabled ? "default" : "pointer"};
   opacity: ${(props) => props.$isDisabled ? 0.7 : 1};
   text-align: left;
-  width: calc(100% - ${tokens.spacing.lg});
+  width: 100%; /* Fill available slot width */
+  /* Remove mobile tap highlight that causes blue flash */
+  -webkit-tap-highlight-color: transparent;
 
   &:hover:not(:disabled) {
     background-color: ${(props) => props.$isDisabled ? tokens.colors.surface.subtle : tokens.colors.surface.overlay};
   }
 
+  &:focus {
+    outline: none;
+  }
+
   &:focus-visible {
-    outline: ${(props) => props.$isDisabled ? "none" : `2px solid ${tokens.colors.border.focus}`};
-    outline-offset: 2px;
+    outline: none;
+    /* Subtle focus ring instead of bright color */
+    box-shadow: inset 0 0 0 1px ${tokens.colors.border.default};
   }
 
   &:active:not(:disabled) {
-    background-color: ${(props) => props.$isDisabled ? tokens.colors.surface.subtle : tokens.colors.surface.overlayActive};
+    /* Subtle press feedback - no color flash */
+    opacity: 0.9;
   }
 `;
 var IconWrapper2 = styled11.div`
@@ -1637,6 +1649,16 @@ var WorkflowStatus = styled11.span`
   line-height: ${tokens.typography.lineHeight.tight};
   text-transform: capitalize;
 `;
+var WorkflowSubtitle = styled11.span`
+  color: ${tokens.colors.text.tertiary};
+  font-size: ${tokens.typography.fontSize.xs};
+  font-weight: ${tokens.typography.fontWeight.regular};
+  line-height: ${tokens.typography.lineHeight.tight};
+  opacity: 0.7;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
 var StatusIndicatorOuter = styled11.span`
   position: absolute;
   bottom: -2px;
@@ -1660,6 +1682,7 @@ function WorkflowStatusCard({
   workflowName,
   status = "offline",
   statusText,
+  subtitle,
   className,
   onClick,
   onPress,
@@ -1688,7 +1711,8 @@ function WorkflowStatusCard({
     ] }),
     /* @__PURE__ */ jsxs(WorkflowInfo, { children: [
       /* @__PURE__ */ jsx(WorkflowName, { children: workflowName }),
-      /* @__PURE__ */ jsx(WorkflowStatus, { children: displayStatus })
+      /* @__PURE__ */ jsx(WorkflowStatus, { children: displayStatus }),
+      subtitle && /* @__PURE__ */ jsx(WorkflowSubtitle, { children: subtitle })
     ] })
   ] });
 }
@@ -2771,8 +2795,8 @@ function WorkflowGroupItem({
   return /* @__PURE__ */ jsxs(CategoryDisclosure, { id: groupId, children: [
     /* @__PURE__ */ jsx(Heading, { level: 4, children: /* @__PURE__ */ jsxs(CategoryHeader, { slot: "trigger", style: { paddingLeft: "8px" }, children: [
       /* @__PURE__ */ jsxs(CategoryTitle, { children: [
-        /* @__PURE__ */ jsx("span", { style: { fontSize: tokens.typography.fontSize.base, fontWeight: 500 }, children: group.workflowName }),
-        /* @__PURE__ */ jsxs("span", { style: { fontSize: tokens.typography.fontSize.sm, color: tokens.colors.text.tertiary, marginLeft: "8px" }, children: [
+        /* @__PURE__ */ jsx("span", { style: { fontSize: tokens.typography.fontSize.sm, fontWeight: 400 }, children: group.workflowName }),
+        /* @__PURE__ */ jsxs("span", { style: { fontSize: tokens.typography.fontSize.xs, color: tokens.colors.text.tertiary, marginLeft: "8px" }, children: [
           "(",
           group.runs.length,
           ")"
@@ -5915,6 +5939,11 @@ var MessageBubble = styled11.div`
   /* Smooth transitions */
   transition: all ${tokens.transitions.fast};
 
+  /* Ensure long strings don't overflow */
+  overflow: hidden;
+  overflow-wrap: break-word;
+  word-break: break-word;
+
   /* Username styling */
   strong {
     font-size: ${tokens.typography.fontSize.xs};
@@ -5928,6 +5957,8 @@ var MessageContent2 = styled11.p`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
   white-space: pre-wrap;
 `;
 var MessageTime2 = styled11.time`
@@ -8150,7 +8181,7 @@ PostPreviewCard.displayName = "PostPreviewCard";
 var fadeIn2 = keyframes`
   from {
     opacity: 0;
-    transform: translateY(4px);
+    transform: translateY(-4px);
   }
   to {
     opacity: 1;
@@ -8667,32 +8698,66 @@ var Header3 = styled11.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: ${tokens.spacing.md};
-  padding-bottom: ${tokens.spacing.sm};
-  border-bottom: 1px solid ${tokens.colors.border.default};
+  gap: ${tokens.spacing.sm};
+  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
+  position: relative;
+  z-index: 1;
+  background: ${tokens.colors.backdrop};
+
+  /* Gradient fade from solid to transparent (blends into content below) */
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 87%;
+    height: 24px;
+    background: linear-gradient(
+      to bottom,
+      ${tokens.colors.backdrop} 0%,
+      ${tokens.colors.backdrop}00 100%
+    );
+    pointer-events: none;
+  }
 `;
 var Title = styled11.h2`
   margin: 0;
-  font-size: ${tokens.typography.fontSize.lg};
+  font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
   color: ${tokens.colors.text.primary};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
 `;
 var ViewToggle = styled11.div`
   display: flex;
-  gap: ${tokens.spacing.sm};
+  gap: ${tokens.spacing.xs};
+  flex-shrink: 0;
 `;
 var ToggleButton = styled11.button`
-  padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
+  padding: ${tokens.spacing.xs};
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border: none;
   border-radius: ${tokens.borderRadius.md};
-  font-size: ${tokens.typography.fontSize.sm};
-  font-weight: ${tokens.typography.fontWeight.medium};
   cursor: pointer;
   transition: all ${tokens.transitions.fast};
   background: ${({ $active }) => $active ? `${tokens.colors.primary}33` : tokens.colors.surface.overlay};
   color: ${({ $active }) => $active ? tokens.colors.primary : tokens.colors.text.secondary};
   border: 1px solid
     ${({ $active }) => $active ? tokens.colors.primary : tokens.colors.border.default};
+  /* Remove mobile tap highlight */
+  -webkit-tap-highlight-color: transparent;
+
+  svg {
+    width: 18px;
+    height: 18px;
+    fill: currentColor;
+  }
 
   &:hover {
     background: ${({ $active }) => $active ? `${tokens.colors.primary}4D` : tokens.colors.surface.overlayHover};
@@ -8703,6 +8768,8 @@ var Content4 = styled11.div`
   display: flex;
   flex-direction: column;
   overflow: auto;
+  /* Extra top padding to account for header fade overlay */
+  padding-top: ${tokens.spacing.md};
 `;
 var EmptyState3 = styled11.div`
   display: flex;
@@ -8784,7 +8851,9 @@ var SocialMediaCanvas = ({
             $active: viewMode === "carousel",
             onClick: () => setViewMode("carousel"),
             type: "button",
-            children: "Carousel"
+            "aria-label": "Carousel view",
+            title: "Carousel view",
+            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 6h4v12H2V6zm7 0h6v12H9V6zm9 0h4v12h-4V6z" }) })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -8793,7 +8862,9 @@ var SocialMediaCanvas = ({
             $active: viewMode === "grid",
             onClick: () => setViewMode("grid"),
             type: "button",
-            children: "Grid"
+            "aria-label": "Grid view",
+            title: "Grid view",
+            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z" }) })
           }
         )
       ] })
@@ -8920,16 +8991,19 @@ function TokenUsageCard({
 var Card2 = styled11.div`
   display: flex;
   flex-direction: column;
-  gap: ${tokens.spacing.md};
-  padding: ${tokens.spacing.md};
-  background: ${tokens.colors.background.dark};
+  background: ${tokens.colors.background.darker};
   border-radius: ${tokens.borderRadius.xl};
   border: 1px solid ${tokens.colors.border.default};
+  overflow: hidden;
 `;
 var Header4 = styled11.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
+  background: ${tokens.colors.background.darker};
+  border-bottom: 1px solid ${tokens.colors.border.default};
+  min-height: 48px;
 `;
 var Title2 = styled11.h3`
   margin: 0;
@@ -8947,6 +9021,7 @@ var UsageSection = styled11.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
+  padding: ${tokens.spacing.md};
 `;
 var UsageStats = styled11.div`
   display: flex;
@@ -8992,7 +9067,8 @@ var TransactionsSection = styled11.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
-  padding-top: ${tokens.spacing.md};
+  padding: ${tokens.spacing.md};
+  padding-top: ${tokens.spacing.sm};
   border-top: 1px solid ${tokens.colors.border.subtle};
 `;
 var TransactionsHeader = styled11.h4`
@@ -9053,13 +9129,13 @@ var TransactionTokens = styled11.span`
 `;
 var EmptyState4 = styled11.div`
   text-align: center;
-  padding: ${tokens.spacing.lg};
+  padding: ${tokens.spacing.lg} ${tokens.spacing.md};
   font-size: ${tokens.typography.fontSize.sm};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.tertiary};
 `;
 var ViewAllButton = styled11.button`
-  width: 100%;
+  margin: 0 ${tokens.spacing.md} ${tokens.spacing.md};
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   background: transparent;
   border: 1px solid ${tokens.colors.border.default};