@agentiffai/design 1.3.3 → 1.3.4

package/dist/layout/index.d.cts

@@ -133,10 +133,12 @@ interface WorkflowStatusCardProps extends Omit<AriaButtonProps, 'children'> {
     workflowName: string;
     status?: 'online' | 'idle' | 'busy' | 'offline';
     statusText?: string;
+    /** Optional subtitle shown below status (e.g., time triggered) */
+    subtitle?: string;
     className?: string;
     onClick?: () => void;
 }
-declare function WorkflowStatusCard({ icon, workflowName, status, statusText, className, onClick, onPress, isDisabled, ...ariaProps }: WorkflowStatusCardProps): react_jsx_runtime.JSX.Element;
+declare function WorkflowStatusCard({ icon, workflowName, status, statusText, subtitle, className, onClick, onPress, isDisabled, ...ariaProps }: WorkflowStatusCardProps): react_jsx_runtime.JSX.Element;
 declare namespace WorkflowStatusCard {
     var displayName: string;
 }

package/dist/layout/index.d.ts

@@ -133,10 +133,12 @@ interface WorkflowStatusCardProps extends Omit<AriaButtonProps, 'children'> {
     workflowName: string;
     status?: 'online' | 'idle' | 'busy' | 'offline';
     statusText?: string;
+    /** Optional subtitle shown below status (e.g., time triggered) */
+    subtitle?: string;
     className?: string;
     onClick?: () => void;
 }
-declare function WorkflowStatusCard({ icon, workflowName, status, statusText, className, onClick, onPress, isDisabled, ...ariaProps }: WorkflowStatusCardProps): react_jsx_runtime.JSX.Element;
+declare function WorkflowStatusCard({ icon, workflowName, status, statusText, subtitle, className, onClick, onPress, isDisabled, ...ariaProps }: WorkflowStatusCardProps): react_jsx_runtime.JSX.Element;
 declare namespace WorkflowStatusCard {
     var displayName: string;
 }

package/dist/layout/index.js

@@ -502,12 +502,16 @@ var ContentWrapper = styled9.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 = styled9.div`
@@ -997,9 +1001,9 @@ var Container5 = styled9.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};
@@ -1009,19 +1013,27 @@ var Container5 = styled9.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 = styled9.div`
@@ -1057,6 +1069,16 @@ var WorkflowStatus = styled9.span`
   line-height: ${tokens.typography.lineHeight.tight};
   text-transform: capitalize;
 `;
+var WorkflowSubtitle = styled9.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 = styled9.span`
   position: absolute;
   bottom: -2px;
@@ -1080,6 +1102,7 @@ function WorkflowStatusCard({
   workflowName,
   status = "offline",
   statusText,
+  subtitle,
   className,
   onClick,
   onPress,
@@ -1108,7 +1131,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 })
     ] })
   ] });
 }
@@ -2191,8 +2215,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,
           ")"