lynx-console 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lynx-console",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "sideEffects": [
     "**/*.css",

package/src/components/ConsolePanel.css.ts

@@ -36,13 +36,6 @@ export const logHeader = style({
   paddingBottom: 3,
 });
 
-export const fadeTop = style({
-  height: 20,
-  marginBottom: -20,
-  zIndex: 1,
-  background: `linear-gradient(to bottom, ${vars.$color.bg.layerDefault}, #ffffff00)`,
-});
-
 export const filterWrapper = style({
   position: "relative",
 });
@@ -58,7 +51,7 @@ export const filterButton = style({
 
 export const filterButtonText = style({
   ...typography("t3", "medium"),
-  color: vars.$color.fg.neutral,
+  color: vars.$color.fg.neutralMuted,
 });
 
 export const filterDropdown = style({
@@ -66,7 +59,7 @@ export const filterDropdown = style({
   top: "100%",
   left: 0,
   marginTop: 4,
-  backgroundColor: vars.$color.bg.layerDefault,
+  backgroundColor: vars.$color.bg.layerFloating,
   borderWidth: 1,
   borderColor: vars.$color.stroke.neutralSubtle,
   borderStyle: "solid",
@@ -138,6 +131,15 @@ export const searchInput = style({
   caretColor: vars.$color.palette.green600,
 });
 
+export const searchClear = style({
+  padding: "2px 4px",
+});
+
+export const searchClearText = style({
+  ...typography("t3", "medium"),
+  color: vars.$color.fg.placeholder,
+});
+
 export const clearButton = style({
   padding: "3px 6px",
   backgroundColor: vars.$color.bg.neutralWeak,
@@ -146,7 +148,7 @@ export const clearButton = style({
 
 export const clearButtonText = style({
   ...typography("t3", "medium"),
-  color: vars.$color.fg.neutral,
+  color: vars.$color.fg.neutralMuted,
 });
 
 export const logList = style({
@@ -311,13 +313,6 @@ export const argObjectJson = style({
   color: vars.$color.fg.neutral,
 });
 
-export const fadeBottom = style({
-  height: 20,
-  marginTop: -20,
-  zIndex: 1,
-  background: `linear-gradient(to top, ${vars.$color.bg.layerDefault}, #ffffff00)`,
-});
-
 export const replInputRow = style({
   display: "flex",
   flexDirection: "row",

package/src/components/FadeList.css.ts

@@ -0,0 +1,16 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "../styles/vars";
+
+export const fadeTop = style({
+  height: 20,
+  marginBottom: -20,
+  zIndex: 1,
+  background: `linear-gradient(to bottom, ${vars.$color.bg.layerFloating}, #ffffff00)`,
+});
+
+export const fadeBottom = style({
+  height: 20,
+  marginTop: -20,
+  zIndex: 1,
+  background: `linear-gradient(to top, ${vars.$color.bg.layerFloating}, #ffffff00)`,
+});

package/src/components/FadeList.tsx

@@ -0,0 +1,76 @@
+import { useRef, useState } from "@lynx-js/react";
+import type { BaseEvent, NodesRef } from "@lynx-js/types";
+import { vars } from "../styles/vars";
+import * as css from "./FadeList.css";
+
+interface FadeListProps {
+  className?: string;
+  listRef?: React.RefObject<NodesRef>;
+  children: React.ReactNode;
+  "preload-buffer-count"?: number;
+  "initial-scroll-index"?: number;
+}
+
+export const FadeList = ({
+  className,
+  listRef: externalListRef,
+  children,
+  ...listProps
+}: FadeListProps) => {
+  const [fadeState, setFadeState] = useState({ atTop: true, atBottom: true });
+  const fadeRef = useRef({ atTop: true, atBottom: true });
+  const internalListRef = useRef<NodesRef>(null);
+  const listRef = externalListRef ?? internalListRef;
+
+  return (
+    <>
+      <view
+        className={css.fadeTop}
+        style={{
+          background: fadeState.atTop
+            ? "linear-gradient(to bottom, #ffffff00, #ffffff00)"
+            : `linear-gradient(to bottom, ${vars.$color.bg.layerFloating}, #ffffff00)`,
+        }}
+      />
+      <list
+        ref={listRef}
+        scroll-orientation="vertical"
+        className={className}
+        scroll-event-throttle={16}
+        bindscroll={(
+          e: BaseEvent<
+            "bindscroll",
+            {
+              scrollTop: number;
+              scrollHeight: number;
+              listHeight: number;
+            }
+          >,
+        ) => {
+          const { scrollTop, scrollHeight, listHeight } = e.detail;
+          const atTop = scrollTop <= 10;
+          const atBottom = scrollTop + listHeight >= scrollHeight - 10;
+          if (
+            atTop !== fadeRef.current.atTop ||
+            atBottom !== fadeRef.current.atBottom
+          ) {
+            fadeRef.current.atTop = atTop;
+            fadeRef.current.atBottom = atBottom;
+            setFadeState({ atTop, atBottom });
+          }
+        }}
+        {...listProps}
+      >
+        {children}
+      </list>
+      <view
+        className={css.fadeBottom}
+        style={{
+          background: fadeState.atBottom
+            ? "linear-gradient(to top, #ffffff00, #ffffff00)"
+            : `linear-gradient(to top, ${vars.$color.bg.layerFloating}, #ffffff00)`,
+        }}
+      />
+    </>
+  );
+};

package/src/components/FloatingButton.tsx

@@ -45,26 +45,29 @@ export const FloatingButton = ({
   const isDragging = phase === "dragging";
 
   return (
-    <view
-      className={css.wrapper}
-      style={{
-        right: `${right}px`,
-        bottom: `${bottom}px`,
-        transform: isDragging ? "scale(1.05)" : "scale(1)",
-      }}
-      {...handlers}
-    >
-      <view className={css.button}>
-        {children}
-        <view className={css.shineOverlay} style={SHINE_STYLES[phase]} />
-      </view>
+    <>
       <view
-        className={css.reloadButton}
-        catchtouchstart={() => clearTimer()}
-        bindtap={handleReload}
+        className={css.wrapper}
+        consume-slide-event={[[-180, 180]]}
+        style={{
+          right: `${right}px`,
+          bottom: `${bottom}px`,
+          transform: isDragging ? "scale(1.05)" : "scale(1)",
+        }}
+        {...handlers}
       >
-        <text className={css.reloadIcon}>{"\u21BB"}</text>
+        <view className={css.button}>
+          {children}
+          <view className={css.shineOverlay} style={SHINE_STYLES[phase]} />
+        </view>
+        <view
+          className={css.reloadButton}
+          catchtouchstart={() => clearTimer()}
+          bindtap={handleReload}
+        >
+          <text className={css.reloadIcon}>{"\u21BB"}</text>
+        </view>
       </view>
-    </view>
+    </>
   );
 };

package/src/components/LogPanel.tsx

@@ -2,8 +2,8 @@ import { useEffect, useMemo, useRef, useState } from "@lynx-js/react";
 import type { BaseEvent, InputInputEvent, NodesRef } from "@lynx-js/types";
 import { stringify } from "javascript-stringify";
 import type { LogEntry, LogLevel } from "../types";
-import { vars } from "../styles/vars";
 import * as css from "./ConsolePanel.css";
+import { FadeList } from "./FadeList";
 
 const LOG_LEVELS: LogLevel[] = ["log", "info", "warn", "error"];
 
@@ -40,8 +40,6 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
   );
   const [filterOpen, setFilterOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState(savedSearchQuery);
-  const [fadeState, setFadeState] = useState({ atTop: true, atBottom: true });
-  const fadeRef = useRef({ atTop: true, atBottom: true });
   const inputRef = useRef<NodesRef>(null);
   const searchInputRef = useRef<NodesRef>(null);
   const listRef = useRef<NodesRef>(null);
@@ -269,38 +267,31 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
               setSearchQuery(e.detail.value)
             }
           />
+          {searchQuery.length > 0 && (
+            <view
+              className={css.searchClear}
+              bindtap={() => {
+                setSearchQuery("");
+                searchInputRef.current
+                  ?.invoke({ method: "setValue", params: { value: "" } })
+                  .exec();
+              }}
+            >
+              <text className={css.searchClearText}>✕</text>
+            </view>
+          )}
         </view>
         <view style={{ display: "flex", flexDirection: "row", gap: 8 }}>
           <view className={css.clearButton} bindtap={clearLogs}>
-            <text className={css.clearButtonText}>Clear</text>
+            <text className={css.clearButtonText}>🗑</text>
           </view>
         </view>
       </view>
-      <view
-        className={css.fadeTop}
-        style={{
-          background: fadeState.atTop
-            ? `linear-gradient(to bottom, #ffffff00, #ffffff00)`
-            : `linear-gradient(to bottom, ${vars.$color.bg.layerDefault}, #ffffff00)`,
-        }}
-      />
-      <list
-        ref={listRef}
-        scroll-orientation="vertical"
+      <FadeList
+        listRef={listRef}
         className={css.logList}
         preload-buffer-count={10}
         initial-scroll-index={Math.max(0, filteredLogs.length - 1)}
-        scroll-event-throttle={16}
-        bindscroll={(e: BaseEvent<"bindscroll", { scrollTop: number; scrollHeight: number; listHeight: number }>) => {
-          const { scrollTop, scrollHeight, listHeight } = e.detail;
-          const atTop = scrollTop <= 10;
-          const atBottom = scrollTop + listHeight >= scrollHeight - 10;
-          if (atTop !== fadeRef.current.atTop || atBottom !== fadeRef.current.atBottom) {
-            fadeRef.current.atTop = atTop;
-            fadeRef.current.atBottom = atBottom;
-            setFadeState({ atTop, atBottom });
-          }
-        }}
       >
         {filteredLogs.length === 0 ? (
           <list-item item-key="empty-state">
@@ -342,15 +333,7 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
             );
           })
         )}
-      </list>
-      <view
-        className={css.fadeBottom}
-        style={{
-          background: fadeState.atBottom
-            ? `linear-gradient(to top, #ffffff00, #ffffff00)`
-            : `linear-gradient(to top, ${vars.$color.bg.layerDefault}, #ffffff00)`,
-        }}
-      />
+      </FadeList>
       <view className={css.replInputRow}>
         <text className={css.replPrompt}>{"›"}</text>
         <input

package/src/components/NetworkPanel.css.ts

@@ -17,9 +17,6 @@ export const header = style({
   justifyContent: "space-between",
   marginBottom: 8,
   paddingBottom: 4,
-  borderBottomWidth: 1,
-  borderBottomColor: vars.$color.stroke.neutralSubtle,
-  borderBottomStyle: "solid",
 });
 
 export const count = style({
@@ -28,14 +25,14 @@ export const count = style({
 });
 
 export const clearButton = style({
-  padding: "6px 12px",
+  padding: "3px 6px",
   backgroundColor: vars.$color.bg.neutralWeak,
   borderRadius: 4,
 });
 
 export const clearButtonText = style({
   ...typography("t3", "medium"),
-  color: vars.$color.fg.neutral,
+  color: vars.$color.fg.neutralMuted,
 });
 
 export const list = style({

package/src/components/NetworkPanel.tsx

@@ -1,5 +1,6 @@
 import { useState } from "@lynx-js/react";
 import type { NetworkEntry } from "../types";
+import { FadeList } from "./FadeList";
 import { NetworkDetailSection } from "./NetworkDetailSection";
 import * as css from "./NetworkPanel.css";
 
@@ -16,7 +17,6 @@ export const NetworkPanel = ({
 }: NetworkPanelProps) => {
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [activeTab, setActiveTab] = useState<TabType>("general");
-
   const formatDuration = (duration?: number): string => {
     if (!duration) return "-";
     if (duration < 1000) return `${duration}ms`;
@@ -71,7 +71,7 @@ export const NetworkPanel = ({
       <view className={css.header}>
         <text className={css.count}>Total: {networks.length} requests</text>
         <view className={css.clearButton} bindtap={clearNetworks}>
-          <text className={css.clearButtonText}>Clear</text>
+          <text className={css.clearButtonText}>🗑</text>
         </view>
       </view>
 
@@ -80,7 +80,7 @@ export const NetworkPanel = ({
           <text className={css.placeholderText}>No network requests yet</text>
         </view>
       ) : (
-        <list className={css.list}>
+        <FadeList className={css.list}>
           {networks.map((network) => (
             <list-item key={network.id} item-key={network.id}>
               <view className={css.item({ status: network.status })}>
@@ -215,7 +215,7 @@ export const NetworkPanel = ({
               </view>
             </list-item>
           ))}
-        </list>
+        </FadeList>
       )}
     </view>
   );

package/src/components/PerformancePanel.css.ts

@@ -28,14 +28,14 @@ export const count = style({
 });
 
 export const clearButton = style({
-  padding: "6px 12px",
+  padding: "3px 6px",
   backgroundColor: vars.$color.bg.neutralWeak,
   borderRadius: 4,
 });
 
 export const clearButtonText = style({
   ...typography("t3", "medium"),
-  color: vars.$color.fg.neutral,
+  color: vars.$color.fg.neutralMuted,
 });
 
 export const list = style({

package/src/components/PerformancePanel.tsx

@@ -1,6 +1,7 @@
 import { useState } from "@lynx-js/react";
 import { stringify } from "javascript-stringify";
 import type { PerformanceEntryData } from "../types";
+import { FadeList } from "./FadeList";
 import * as css from "./PerformancePanel.css";
 
 interface PerformancePanelProps {
@@ -65,7 +66,6 @@ export const PerformancePanel = ({
   clearPerformances,
 }: PerformancePanelProps) => {
   const [selectedId, setSelectedId] = useState<string | null>(null);
-
   if (performances.length === 0) {
     return (
       <view className={css.container}>
@@ -80,7 +80,7 @@ export const PerformancePanel = ({
             <text>Log</text>
           </view>
           <view bindtap={clearPerformances} className={css.clearButton}>
-            <text className={css.clearButtonText}>Clear</text>
+            <text className={css.clearButtonText}>🗑</text>
           </view>
         </view>
         <view className={css.placeholder}>
@@ -97,11 +97,11 @@ export const PerformancePanel = ({
       <view className={css.header}>
         <text className={css.count}>{performances.length} entries</text>
         <view bindtap={clearPerformances} className={css.clearButton}>
-          <text className={css.clearButtonText}>Clear</text>
+          <text className={css.clearButtonText}>🗑</text>
         </view>
       </view>
 
-      <list className={css.list}>
+      <FadeList className={css.list}>
         {performances.map((perf) => {
           const isMetricFcp = isMetricFcpEntry(perf);
           const fcpMetrics = extractFcpMetrics(perf);
@@ -203,7 +203,7 @@ export const PerformancePanel = ({
             </list-item>
           );
         })}
-      </list>
+      </FadeList>
     </view>
   );
 };

package/src/hooks/useLongPressDrag.ts

@@ -87,9 +87,9 @@ export function useLongPressDrag(onTap: () => void) {
     bottom: isDragging ? tempBottom : bottom,
     clearTimer,
     handlers: {
-      bindtouchstart: handleTouchStart,
-      bindtouchmove: handleTouchMove,
-      bindtouchend: handleTouchEnd,
+      catchtouchstart: handleTouchStart,
+      catchtouchmove: handleTouchMove,
+      catchtouchend: handleTouchEnd,
     },
   };
 }