lynx-console 0.2.3 → 0.3.0

package/src/components/NetworkDetailSection.tsx

@@ -20,7 +20,7 @@ export const NetworkDetailSection = ({
       {/* Headers */}
       <view className={"np-detailSection"}>
         <text
-          className={"np-detailSectionTitle"}
+          className={"np-detailSectionTitle t3"}
           style={{ fontWeight: fontWeight.bold, color: colors.fg.neutral }}
         >
           Headers
@@ -34,14 +34,20 @@ export const NetworkDetailSection = ({
                 style={{ backgroundColor: colors.bg.neutralWeak }}
               >
                 <text
-                  className={"np-tableKey"}
-                  style={{ fontWeight: fontWeight.bold, color: colors.fg.neutralSubtle }}
+                  className={"np-tableKey t3"}
+                  style={{
+                    fontWeight: fontWeight.bold,
+                    color: colors.fg.neutralSubtle,
+                  }}
                 >
                   {key}
                 </text>
                 <text
-                  className={"np-tableValue"}
-                  style={{ fontWeight: fontWeight.regular, color: colors.fg.neutral }}
+                  className={"np-tableValue t3"}
+                  style={{
+                    fontWeight: fontWeight.regular,
+                    color: colors.fg.neutral,
+                  }}
                 >
                   {value}
                 </text>
@@ -50,8 +56,11 @@ export const NetworkDetailSection = ({
           </view>
         ) : (
           <text
-            className={"np-emptyText"}
-            style={{ fontWeight: fontWeight.regular, color: colors.fg.disabled }}
+            className={"np-emptyText t3"}
+            style={{
+              fontWeight: fontWeight.regular,
+              color: colors.fg.disabled,
+            }}
           >
             No headers
           </text>
@@ -61,14 +70,14 @@ export const NetworkDetailSection = ({
       {/* Body */}
       <view className={"np-detailSection"}>
         <text
-          className={"np-detailSectionTitle"}
+          className={"np-detailSectionTitle t3"}
           style={{ fontWeight: fontWeight.bold, color: colors.fg.neutral }}
         >
           Body
         </text>
         {error && (
           <text
-            className={"np-errorText"}
+            className={"np-errorText t3"}
             style={{
               fontWeight: fontWeight.regular,
               color: colors.palette.red600,
@@ -80,7 +89,7 @@ export const NetworkDetailSection = ({
         )}
         {body && (
           <text
-            className={"np-bodyText"}
+            className={"np-bodyText t3"}
             style={{
               fontWeight: fontWeight.regular,
               color: colors.fg.neutral,
@@ -92,8 +101,11 @@ export const NetworkDetailSection = ({
         )}
         {!error && !body && (
           <text
-            className={"np-emptyText"}
-            style={{ fontWeight: fontWeight.regular, color: colors.fg.disabled }}
+            className={"np-emptyText t3"}
+            style={{
+              fontWeight: fontWeight.regular,
+              color: colors.fg.disabled,
+            }}
           >
             No body
           </text>

package/src/components/NetworkPanel.css

@@ -14,21 +14,11 @@
   padding-bottom: 4px;
 }
 
-.np-count {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-}
-
 .np-clearButton {
   padding: 3px 6px;
   border-radius: 4px;
 }
 
-.np-clearButtonText {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-}
-
 .np-list {
   flex: 1;
 }
@@ -40,11 +30,6 @@
   height: 100%;
 }
 
-.np-placeholderText {
-  font-size: 0.875rem;
-  line-height: 1.1875rem;
-}
-
 .np-item {
   padding: 8px;
   border-bottom-width: 1px;
@@ -60,43 +45,22 @@
 }
 
 .np-method {
-  font-size: 0.75rem;
-  line-height: 1rem;
   padding: 0 4px;
   border-radius: 2px;
 }
 
-.np-statusCode {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
-.np-time {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
 .np-url {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
   word-break: break-all;
   margin-bottom: 4px;
 }
 
 .np-path {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
   word-break: break-all;
   white-space: pre-wrap;
   overflow: visible;
   margin-bottom: 4px;
 }
 
-.np-details {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-}
-
 .np-detailsContainer {
   margin-top: 12px;
   padding-top: 12px;
@@ -117,11 +81,6 @@
   cursor: pointer;
 }
 
-.np-tabText {
-  font-size: 0.875rem;
-  line-height: 1.1875rem;
-}
-
 .np-tabContent {
   padding-top: 8px;
 }
@@ -131,8 +90,6 @@
 }
 
 .np-detailSectionTitle {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
   margin-bottom: 8px;
 }
 
@@ -151,22 +108,16 @@
 }
 
 .np-tableKey {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
   min-width: 70px;
   flex-shrink: 0;
 }
 
 .np-tableValue {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
   word-break: break-all;
   flex: 1;
 }
 
 .np-bodyText {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
   padding: 8px;
   border-radius: 4px;
   word-break: break-all;
@@ -174,16 +125,12 @@
 }
 
 .np-errorText {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
   padding: 8px;
   border-radius: 4px;
   word-break: break-all;
 }
 
 .np-emptyText {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
   text-align: center;
   padding: 16px 0;
 }

package/src/components/NetworkPanel.tsx

@@ -1,8 +1,7 @@
 import { useState } from "@lynx-js/react";
 import { useThemeColors } from "../styles/ThemeContext";
-import { type ThemeColors, fontWeight } from "../styles/theme";
+import { fontWeight, type ThemeColors } from "../styles/theme";
 import type { NetworkEntry } from "../types";
-import { FadeList } from "./FadeList";
 import { NetworkDetailSection } from "./NetworkDetailSection";
 import "./NetworkPanel.css";
 
@@ -16,17 +15,35 @@ type TabType = "general" | "request" | "response";
 function getMethodColors(colors: ThemeColors, method: string) {
   switch (method) {
     case "GET":
-      return { color: colors.palette.blue600, backgroundColor: colors.palette.blue100 };
+      return {
+        color: colors.palette.blue600,
+        backgroundColor: colors.palette.blue100,
+      };
     case "POST":
-      return { color: colors.palette.green600, backgroundColor: colors.palette.green100 };
+      return {
+        color: colors.palette.green600,
+        backgroundColor: colors.palette.green100,
+      };
     case "PUT":
-      return { color: colors.palette.yellow600, backgroundColor: colors.palette.yellow100 };
+      return {
+        color: colors.palette.yellow600,
+        backgroundColor: colors.palette.yellow100,
+      };
     case "PATCH":
-      return { color: colors.palette.purple600, backgroundColor: colors.palette.purple100 };
+      return {
+        color: colors.palette.purple600,
+        backgroundColor: colors.palette.purple100,
+      };
     case "DELETE":
-      return { color: colors.palette.red600, backgroundColor: colors.palette.red100 };
+      return {
+        color: colors.palette.red600,
+        backgroundColor: colors.palette.red100,
+      };
     default:
-      return { color: colors.fg.neutral, backgroundColor: colors.bg.neutralWeak };
+      return {
+        color: colors.fg.neutral,
+        backgroundColor: colors.bg.neutralWeak,
+      };
   }
 }
 
@@ -115,8 +132,11 @@ export const NetworkPanel = ({
     <view className={"np-container"}>
       <view className={"np-header"}>
         <text
-          className={"np-count"}
-          style={{ fontWeight: fontWeight.regular, color: colors.fg.neutralSubtle }}
+          className={"np-count t3"}
+          style={{
+            fontWeight: fontWeight.regular,
+            color: colors.fg.neutralSubtle,
+          }}
         >
           Total: {networks.length} requests
         </text>
@@ -126,8 +146,11 @@ export const NetworkPanel = ({
           bindtap={clearNetworks}
         >
           <text
-            className={"np-clearButtonText"}
-            style={{ fontWeight: fontWeight.medium, color: colors.fg.neutralMuted }}
+            className={"np-clearButtonText t3"}
+            style={{
+              fontWeight: fontWeight.medium,
+              color: colors.fg.neutralMuted,
+            }}
           >
             🗑
           </text>
@@ -137,14 +160,17 @@ export const NetworkPanel = ({
       {networks.length === 0 ? (
         <view className={"np-placeholder"}>
           <text
-            className={"np-placeholderText"}
-            style={{ fontWeight: fontWeight.regular, color: colors.fg.disabled }}
+            className={"np-placeholderText t4"}
+            style={{
+              fontWeight: fontWeight.regular,
+              color: colors.fg.disabled,
+            }}
           >
             No network requests yet
           </text>
         </view>
       ) : (
-        <FadeList className={"np-list"}>
+        <list scroll-orientation="vertical" className={"np-list"}>
           {networks.map((network) => (
             <list-item key={network.id} item-key={network.id}>
               <view
@@ -161,7 +187,7 @@ export const NetworkPanel = ({
                   }
                 >
                   <text
-                    className={"np-method"}
+                    className={"np-method t2"}
                     style={{
                       fontWeight: fontWeight.bold,
                       ...getMethodColors(colors, network.method),
@@ -171,12 +197,15 @@ export const NetworkPanel = ({
                   </text>
                   {network.statusCode && (
                     <text
-                      className={"np-statusCode"}
+                      className={"np-statusCode t2"}
                       style={{
                         fontWeight: fontWeight.bold,
                         color: getStatusCodeColor(
                           colors,
-                          getStatusCodeVariant(network.status, network.statusCode),
+                          getStatusCodeVariant(
+                            network.status,
+                            network.statusCode,
+                          ),
                         ),
                       }}
                     >
@@ -185,7 +214,7 @@ export const NetworkPanel = ({
                   )}
                   {network.status === "pending" && (
                     <text
-                      className={"np-statusCode"}
+                      className={"np-statusCode t2"}
                       style={{
                         fontWeight: fontWeight.bold,
                         color: colors.fg.neutralSubtle,
@@ -195,22 +224,31 @@ export const NetworkPanel = ({
                     </text>
                   )}
                   <text
-                    className={"np-time"}
-                    style={{ fontWeight: fontWeight.regular, color: colors.fg.neutralSubtle }}
+                    className={"np-time t2"}
+                    style={{
+                      fontWeight: fontWeight.regular,
+                      color: colors.fg.neutralSubtle,
+                    }}
                   >
                     {formatDuration(network.duration)}
                   </text>
                   <text
-                    className={"np-time"}
-                    style={{ fontWeight: fontWeight.regular, color: colors.fg.neutralSubtle }}
+                    className={"np-time t2"}
+                    style={{
+                      fontWeight: fontWeight.regular,
+                      color: colors.fg.neutralSubtle,
+                    }}
                   >
                     {new Date(network.startTime).toISOString()}
                   </text>
                 </view>
 
                 <text
-                  className={"np-path"}
-                  style={{ fontWeight: fontWeight.regular, color: colors.fg.neutral }}
+                  className={"np-path t3"}
+                  style={{
+                    fontWeight: fontWeight.regular,
+                    color: colors.fg.neutral,
+                  }}
                   bindtap={() =>
                     setSelectedId(selectedId === network.id ? null : network.id)
                   }
@@ -229,12 +267,14 @@ export const NetworkPanel = ({
                         className={"np-tab"}
                         style={{
                           backgroundColor:
-                            activeTab === "general" ? colors.bg.neutralWeak : undefined,
+                            activeTab === "general"
+                              ? colors.bg.neutralWeak
+                              : undefined,
                         }}
                         bindtap={() => setActiveTab("general")}
                       >
                         <text
-                          className={"np-tabText"}
+                          className={"np-tabText t4"}
                           style={{
                             fontWeight: fontWeight.medium,
                             color:
@@ -250,12 +290,14 @@ export const NetworkPanel = ({
                         className={"np-tab"}
                         style={{
                           backgroundColor:
-                            activeTab === "request" ? colors.bg.neutralWeak : undefined,
+                            activeTab === "request"
+                              ? colors.bg.neutralWeak
+                              : undefined,
                         }}
                         bindtap={() => setActiveTab("request")}
                       >
                         <text
-                          className={"np-tabText"}
+                          className={"np-tabText t4"}
                           style={{
                             fontWeight: fontWeight.medium,
                             color:
@@ -271,12 +313,14 @@ export const NetworkPanel = ({
                         className={"np-tab"}
                         style={{
                           backgroundColor:
-                            activeTab === "response" ? colors.bg.neutralWeak : undefined,
+                            activeTab === "response"
+                              ? colors.bg.neutralWeak
+                              : undefined,
                         }}
                         bindtap={() => setActiveTab("response")}
                       >
                         <text
-                          className={"np-tabText"}
+                          className={"np-tabText t4"}
                           style={{
                             fontWeight: fontWeight.medium,
                             color:
@@ -301,7 +345,7 @@ export const NetworkPanel = ({
                               style={{ backgroundColor: colors.bg.neutralWeak }}
                             >
                               <text
-                                className={"np-tableKey"}
+                                className={"np-tableKey t3"}
                                 style={{
                                   fontWeight: fontWeight.bold,
                                   color: colors.fg.neutralSubtle,
@@ -310,7 +354,7 @@ export const NetworkPanel = ({
                                 {item.key}
                               </text>
                               <text
-                                className={"np-tableValue"}
+                                className={"np-tableValue t3"}
                                 style={{
                                   fontWeight: fontWeight.regular,
                                   color: colors.fg.neutral,
@@ -343,7 +387,7 @@ export const NetworkPanel = ({
               </view>
             </list-item>
           ))}
-        </FadeList>
+        </list>
       )}
     </view>
   );

package/src/components/PerformancePanel.css

@@ -16,21 +16,11 @@
   border-bottom-style: solid;
 }
 
-.pp-count {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-}
-
 .pp-clearButton {
   padding: 3px 6px;
   border-radius: 4px;
 }
 
-.pp-clearButtonText {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-}
-
 .pp-list {
   flex: 1;
 }
@@ -42,11 +32,6 @@
   height: 100%;
 }
 
-.pp-placeholderText {
-  font-size: 0.875rem;
-  line-height: 1.1875rem;
-}
-
 .pp-item {
   padding: 8px;
   border-bottom-width: 1px;
@@ -62,22 +47,10 @@
 }
 
 .pp-entryType {
-  font-size: 0.75rem;
-  line-height: 1rem;
   padding: 0 6px;
   border-radius: 2px;
 }
 
-.pp-entryName {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
-.pp-timestamp {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
 .pp-fcpMetricHeader {
   display: flex;
   flex-direction: row;
@@ -86,8 +59,6 @@
 }
 
 .pp-fcpHighlight {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
   padding: 4px 8px;
   border-radius: 4px;
   margin-top: 4px;
@@ -110,15 +81,11 @@
 }
 
 .pp-metricName {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
   min-width: 100px;
   flex-shrink: 0;
 }
 
 .pp-metricValue {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
   flex: 1;
 }
 
@@ -135,12 +102,6 @@
   gap: 8px;
 }
 
-.pp-fcpSectionDescription {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-  margin-bottom: 4px;
-}
-
 .pp-fcpMetric {
   border-radius: 4px;
   display: flex;
@@ -148,24 +109,7 @@
   gap: 4px;
 }
 
-.pp-fcpMetricName {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
-.pp-fcpMetricValue {
-  font-size: 0.6875rem;
-  line-height: 0.9375rem;
-}
-
-.pp-fcpMetricDescription {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-}
-
 .pp-fcpMetricFormula {
-  font-size: 0.875rem;
-  line-height: 1.1875rem;
   font-family: monospace;
 }
 
@@ -174,15 +118,7 @@
   border-radius: 4px;
 }
 
-.pp-detailTitle {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-  margin-bottom: 8px;
-}
-
 .pp-rawEntry {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
   font-family: monospace;
   white-space: pre-wrap;
   word-break: break-all;