lynx-console 0.2.3 → 0.3.0

package/src/components/ConsolePanel.css

@@ -11,11 +11,6 @@
   height: 100%;
 }
 
-.cp-placeholderText {
-  font-size: 0.875rem;
-  line-height: 1.1875rem;
-}
-
 .cp-logContainer {
   display: flex;
   flex-direction: column;
@@ -43,11 +38,6 @@
   border-radius: 4px;
 }
 
-.cp-filterButtonText {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-}
-
 .cp-filterDropdown {
   position: absolute;
   top: 100%;
@@ -70,16 +60,9 @@
 }
 
 .cp-filterCheckbox {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
   width: 16px;
 }
 
-.cp-filterLabel {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-}
-
 .cp-searchWrapper {
   display: flex;
   flex-direction: row;
@@ -92,36 +75,19 @@
   gap: 8px;
 }
 
-.cp-searchPrompt {
-  font-size: 1.125rem;
-  line-height: 1.5rem;
-}
-
 .cp-searchInput {
   flex: 1;
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
 }
 
 .cp-searchClear {
   padding: 2px 4px;
 }
 
-.cp-searchClearText {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-}
-
 .cp-clearButton {
   padding: 3px 6px;
   border-radius: 4px;
 }
 
-.cp-clearButtonText {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-}
-
 .cp-logList {
   flex: 1;
   padding-top: 0;
@@ -142,26 +108,15 @@
 }
 
 .cp-logLevel {
-  font-size: 0.75rem;
-  line-height: 1rem;
   margin-right: 8px;
 }
 
-.cp-logTime {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
 .cp-toggleIndicator {
-  font-size: 0.75rem;
-  line-height: 1rem;
   margin-left: 4px;
   align-self: flex-start;
 }
 
 .cp-logMessage {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
   word-break: break-all;
 }
 
@@ -172,21 +127,6 @@
   gap: 8px;
 }
 
-.cp-logArgItem {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-}
-
-.cp-argString {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-}
-
-.cp-argPrimitive {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-}
-
 .cp-argObject {
   display: flex;
   flex-direction: column;
@@ -199,11 +139,6 @@
   gap: 4px;
 }
 
-.cp-argObjectPreview {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-}
-
 .cp-argObjectContent {
   margin-top: 4px;
   display: flex;
@@ -217,16 +152,6 @@
   align-items: flex-start;
 }
 
-.cp-argObjectKey {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-}
-
-.cp-argObjectJson {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-}
-
 .cp-replInputRow {
   display: flex;
   flex-direction: row;
@@ -237,15 +162,11 @@
 }
 
 .cp-replPrompt {
-  font-size: 1.625rem;
-  line-height: 2.1875rem;
   padding-bottom: 8px;
 }
 
 .cp-replInput {
   flex: 1;
-  font-size: 1rem;
-  line-height: 1.375rem;
   padding-bottom: 8px;
 }
 
@@ -254,8 +175,3 @@
   border-radius: 4px;
   margin-bottom: 8px;
 }
-
-.cp-replRunButtonText {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-}

package/src/components/ConsolePanel.tsx

@@ -1,7 +1,8 @@
+import type { ReactNode } from "@lynx-js/react";
 import { useConsole, useNetwork, usePerformance } from "../hooks";
 import type { CustomTab } from "../types";
 import "./ConsolePanel.css";
-import { LogPanel, dismissFilterDropdown } from "./LogPanel";
+import { dismissFilterDropdown, LogPanel } from "./LogPanel";
 import { NetworkPanel } from "./NetworkPanel";
 import { PerformancePanel } from "./PerformancePanel";
 import Tabs from "./Tabs";
@@ -20,7 +21,7 @@ export const ConsolePanel = ({ customTabs }: ConsolePanelProps) => {
   const items: Array<{
     key: string;
     label: string;
-    renderContent: () => ReturnType<typeof LogPanel>;
+    renderContent: () => ReactNode;
   }> = [];
 
   if (state?.logs) {

package/src/components/FloatingButton.css

@@ -11,10 +11,7 @@
 .fb-button {
   position: relative;
   overflow: hidden;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 4px;
-  padding-bottom: 4px;
+  padding: 4px 8px;
   border-radius: 12px;
   display: flex;
   flex-direction: column;
@@ -35,14 +32,10 @@
 }
 
 .fb-title {
-  font-size: 0.875rem;
-  line-height: 1.1875rem;
   text-align: center;
 }
 
 .fb-subtitle {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
   text-align: center;
 }
 

package/src/components/FloatingButton.tsx

@@ -26,15 +26,11 @@ const SHINE_STYLES = {
   },
 } as const;
 
-export const FloatingButton = ({
-  bindtap,
-  children,
-}: FloatingButtonProps) => {
+export const FloatingButton = ({ bindtap, children }: FloatingButtonProps) => {
   const colors = useThemeColors();
   const { phase, right, bottom, clearTimer, handlers } =
     useLongPressDrag(bindtap);
 
-
   const handleReload = () => {
     try {
       lynx.reload({}, () => {
@@ -48,39 +44,37 @@ export const FloatingButton = ({
   const isDragging = phase === "dragging";
 
   return (
-    <>
+    <view
+      className={"fb-wrapper"}
+      consume-slide-event={[[-180, 180]]}
+      style={{
+        right: `${right}px`,
+        bottom: `${bottom}px`,
+        transform: isDragging ? "scale(1.05)" : "scale(1)",
+        transition: `transform ${duration.d4} cubic-bezier(0.4, 0, 0.2, 1)`,
+      }}
+      {...handlers}
+    >
       <view
-        className={"fb-wrapper"}
-        consume-slide-event={[[-180, 180]]}
-        style={{
-          right: `${right}px`,
-          bottom: `${bottom}px`,
-          transform: isDragging ? "scale(1.05)" : "scale(1)",
-          transition: `transform ${duration.d4} cubic-bezier(0.4, 0, 0.2, 1)`,
-        }}
-        {...handlers}
+        className={"fb-button"}
+        style={{ backgroundColor: colors.palette.green600 }}
       >
-        <view
-          className={"fb-button"}
-          style={{ backgroundColor: colors.palette.green600 }}
-        >
-          {children}
-          <view className={"fb-shineOverlay"} style={SHINE_STYLES[phase]} />
-        </view>
-        <view
-          className={"fb-reloadButton"}
-          style={{ backgroundColor: colors.palette.green600 }}
-          catchtouchstart={() => clearTimer()}
-          bindtap={handleReload}
+        {children}
+        <view className={"fb-shineOverlay"} style={SHINE_STYLES[phase]} />
+      </view>
+      <view
+        className={"fb-reloadButton"}
+        style={{ backgroundColor: colors.palette.green600 }}
+        catchtouchstart={() => clearTimer()}
+        bindtap={handleReload}
+      >
+        <text
+          className={"fb-reloadIcon"}
+          style={{ color: colors.palette.staticWhite }}
         >
-          <text
-            className={"fb-reloadIcon"}
-            style={{ color: colors.palette.staticWhite }}
-          >
-            {"\u21BB"}
-          </text>
-        </view>
+          {"\u21BB"}
+        </text>
       </view>
-    </>
+    </view>
   );
 };

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>