lynx-console 0.2.2 → 0.3.0

package/src/components/LogPanel.tsx

@@ -2,10 +2,9 @@ import { useEffect, useMemo, useRef, useState } from "@lynx-js/react";
 import type { BaseEvent, InputInputEvent, NodesRef } from "@lynx-js/types";
 import { stringify } from "javascript-stringify";
 import { useThemeColors } from "../styles/ThemeContext";
-import { type ThemeColors, fontWeight } from "../styles/theme";
+import { fontWeight, type ThemeColors } from "../styles/theme";
 import type { LogEntry, LogLevel } from "../types";
 import "./ConsolePanel.css";
-import { FadeList } from "./FadeList";
 
 const LOG_LEVELS: LogLevel[] = ["log", "info", "warn", "error"];
 
@@ -114,7 +113,9 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
 
   useEffect(() => {
     closeFilterDropdown = () => setFilterOpen(false);
-    return () => { closeFilterDropdown = null; };
+    return () => {
+      closeFilterDropdown = null;
+    };
   }, []);
 
   const filteredLogs = useMemo(
@@ -123,7 +124,9 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
         if (!enabledLevels.has(log.level)) return false;
         if (searchQuery) {
           const query = searchQuery.toLowerCase();
-          return log.args.some((arg) => String(arg).toLowerCase().includes(query));
+          return log.args.some((arg) =>
+            String(arg).toLowerCase().includes(query),
+          );
         }
         return true;
       }),
@@ -192,7 +195,12 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
 
     if (arg === null) {
       return (
-        <text style={{ color: colors.fg.neutralSubtle, fontWeight: fontWeight.regular }}>
+        <text
+          style={{
+            color: colors.fg.neutralSubtle,
+            fontWeight: fontWeight.regular,
+          }}
+        >
           null
         </text>
       );
@@ -200,7 +208,12 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
 
     if (arg === undefined) {
       return (
-        <text style={{ color: colors.fg.neutralSubtle, fontWeight: fontWeight.regular }}>
+        <text
+          style={{
+            color: colors.fg.neutralSubtle,
+            fontWeight: fontWeight.regular,
+          }}
+        >
           undefined
         </text>
       );
@@ -214,7 +227,7 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
       if (!shouldTruncate) {
         return (
           <text
-            className={"cp-argString"}
+            className={"cp-argString t3"}
             style={{ color: strColor, fontWeight: fontWeight.regular }}
           >
             {arg}
@@ -226,13 +239,16 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
         <view className={"cp-argObject"}>
           <view className={"cp-argObjectHeader"} bindtap={() => toggleArg(key)}>
             <text
-              className={"cp-toggleIndicator"}
-              style={{ color: colors.fg.neutralSubtle, fontWeight: fontWeight.regular }}
+              className={"cp-toggleIndicator t2"}
+              style={{
+                color: colors.fg.neutralSubtle,
+                fontWeight: fontWeight.regular,
+              }}
             >
               {isExpanded ? "▼" : "▶"}
             </text>
             <text
-              className={"cp-argString"}
+              className={"cp-argString t3"}
               style={{ color: strColor, fontWeight: fontWeight.regular }}
             >
               {isExpanded ? arg : `${arg.slice(0, MAX_LENGTH)}...`}
@@ -245,8 +261,11 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
     if (typeof arg === "number" || typeof arg === "boolean") {
       return (
         <text
-          className={"cp-argPrimitive"}
-          style={{ color: getPrimitiveColor(colors, level), fontWeight: fontWeight.regular }}
+          className={"cp-argPrimitive t3"}
+          style={{
+            color: getPrimitiveColor(colors, level),
+            fontWeight: fontWeight.regular,
+          }}
         >
           {String(arg)}
         </text>
@@ -289,14 +308,20 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
         <view className={"cp-argObject"}>
           <view className={"cp-argObjectHeader"} bindtap={() => toggleArg(key)}>
             <text
-              className={"cp-toggleIndicator"}
-              style={{ color: colors.fg.neutralSubtle, fontWeight: fontWeight.regular }}
+              className={"cp-toggleIndicator t2"}
+              style={{
+                color: colors.fg.neutralSubtle,
+                fontWeight: fontWeight.regular,
+              }}
             >
               {isExpanded ? "▼" : "▶"}
             </text>
             <text
-              className={"cp-argObjectPreview"}
-              style={{ fontWeight: fontWeight.medium, color: colors.fg.neutral }}
+              className={"cp-argObjectPreview t3"}
+              style={{
+                fontWeight: fontWeight.medium,
+                color: colors.fg.neutral,
+              }}
             >
               {preview}
             </text>
@@ -304,8 +329,11 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
           {isExpanded && (
             <view className={"cp-argObjectContent"}>
               <text
-                className={"cp-argObjectJson"}
-                style={{ fontWeight: fontWeight.regular, color: colors.fg.neutral }}
+                className={"cp-argObjectJson t3"}
+                style={{
+                  fontWeight: fontWeight.regular,
+                  color: colors.fg.neutral,
+                }}
               >
                 {jsonString}
               </text>
@@ -317,8 +345,11 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
 
     return (
       <text
-        className={"cp-argPrimitive"}
-        style={{ color: getPrimitiveColor(colors, level), fontWeight: fontWeight.regular }}
+        className={"cp-argPrimitive t3"}
+        style={{
+          color: getPrimitiveColor(colors, level),
+          fontWeight: fontWeight.regular,
+        }}
       >
         {String(arg)}
       </text>
@@ -328,7 +359,9 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
   return (
     <view
       className={"cp-logContainer"}
-      bindtap={() => { if (filterOpen) setFilterOpen(false); }}
+      bindtap={() => {
+        if (filterOpen) setFilterOpen(false);
+      }}
     >
       <view className={"cp-logHeader"}>
         <view className={"cp-filterWrapper"}>
@@ -338,10 +371,13 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
             catchtap={() => setFilterOpen((v) => !v)}
           >
             <text
-              className={"cp-filterButtonText"}
-              style={{ fontWeight: fontWeight.medium, color: colors.fg.neutralMuted }}
+              className={"cp-filterButtonText t3"}
+              style={{
+                fontWeight: fontWeight.medium,
+                color: colors.fg.neutralMuted,
+              }}
             >
-              Filter  ▼
+              Filter ▼
             </text>
           </view>
           {filterOpen && (
@@ -360,14 +396,20 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
                   bindtap={() => toggleLevel(level)}
                 >
                   <text
-                    className={"cp-filterCheckbox"}
-                    style={{ fontWeight: fontWeight.medium, color: getLevelColor(colors, level) }}
+                    className={"cp-filterCheckbox t3"}
+                    style={{
+                      fontWeight: fontWeight.medium,
+                      color: getLevelColor(colors, level),
+                    }}
                   >
                     {enabledLevels.has(level) ? "✅" : "⬜"}
                   </text>
                   <text
-                    className={"cp-filterLabel"}
-                    style={{ fontWeight: fontWeight.medium, color: getLevelColor(colors, level) }}
+                    className={"cp-filterLabel t3"}
+                    style={{
+                      fontWeight: fontWeight.medium,
+                      color: getLevelColor(colors, level),
+                    }}
                   >
                     {level.toUpperCase()}
                   </text>
@@ -381,14 +423,17 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
           style={{ borderBottomColor: colors.stroke.neutralSubtle }}
         >
           <text
-            className={"cp-searchPrompt"}
-            style={{ fontWeight: fontWeight.medium, color: colors.fg.placeholder }}
+            className={"cp-searchPrompt t6"}
+            style={{
+              fontWeight: fontWeight.medium,
+              color: colors.fg.placeholder,
+            }}
           >
             {"›"}
           </text>
           <input
             ref={searchInputRef}
-            className={"cp-searchInput"}
+            className={"cp-searchInput t3"}
             style={{
               fontWeight: fontWeight.regular,
               color: colors.fg.neutral,
@@ -410,8 +455,11 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
               }}
             >
               <text
-                className={"cp-searchClearText"}
-                style={{ fontWeight: fontWeight.medium, color: colors.fg.placeholder }}
+                className={"cp-searchClearText t3"}
+                style={{
+                  fontWeight: fontWeight.medium,
+                  color: colors.fg.placeholder,
+                }}
               >
                 ✕
               </text>
@@ -425,16 +473,20 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
             bindtap={clearLogs}
           >
             <text
-              className={"cp-clearButtonText"}
-              style={{ fontWeight: fontWeight.medium, color: colors.fg.neutralMuted }}
+              className={"cp-clearButtonText t3"}
+              style={{
+                fontWeight: fontWeight.medium,
+                color: colors.fg.neutralMuted,
+              }}
             >
               🗑
             </text>
           </view>
         </view>
       </view>
-      <FadeList
-        listRef={listRef}
+      <list
+        ref={listRef}
+        scroll-orientation="vertical"
         className={"cp-logList"}
         preload-buffer-count={10}
         initial-scroll-index={Math.max(0, filteredLogs.length - 1)}
@@ -443,8 +495,11 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
           <list-item item-key="empty-state">
             <view className={"cp-placeholder"}>
               <text
-                className={"cp-placeholderText"}
-                style={{ fontWeight: fontWeight.regular, color: colors.fg.disabled }}
+                className={"cp-placeholderText t4"}
+                style={{
+                  fontWeight: fontWeight.regular,
+                  color: colors.fg.disabled,
+                }}
               >
                 No logs yet. Try console.log("Hello!")
               </text>
@@ -463,7 +518,7 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
                 >
                   <view className={"cp-logItemHeader"}>
                     <text
-                      className={"cp-logLevel"}
+                      className={"cp-logLevel t2"}
                       style={{
                         fontWeight: fontWeight.bold,
                         color: getLevelColor(colors, log.level),
@@ -472,7 +527,7 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
                       {log.level.toUpperCase()}
                     </text>
                     <text
-                      className={"cp-logTime"}
+                      className={"cp-logTime t2"}
                       style={{
                         fontWeight: fontWeight.regular,
                         color: colors.fg.neutralSubtle,
@@ -501,17 +556,20 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
             );
           })
         )}
-      </FadeList>
+      </list>
       <view className={"cp-replInputRow"}>
         <text
-          className={"cp-replPrompt"}
-          style={{ fontWeight: fontWeight.medium, color: colors.fg.placeholder }}
+          className={"cp-replPrompt t10"}
+          style={{
+            fontWeight: fontWeight.medium,
+            color: colors.fg.placeholder,
+          }}
         >
           {"›"}
         </text>
         <input
           ref={inputRef}
-          className={"cp-replInput"}
+          className={"cp-replInput t5"}
           style={{
             fontWeight: fontWeight.regular,
             color: colors.fg.neutral,
@@ -529,8 +587,11 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
           bindtap={handleRun}
         >
           <text
-            className={"cp-replRunButtonText"}
-            style={{ fontWeight: fontWeight.medium, color: colors.palette.green600 }}
+            className={"cp-replRunButtonText t3"}
+            style={{
+              fontWeight: fontWeight.medium,
+              color: colors.palette.green600,
+            }}
           >
             Run
           </text>

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;
 }