lynx-console 0.0.1 → 0.1.1

package/src/components/ConsolePanel.css.ts

@@ -33,31 +33,128 @@ export const logHeader = style({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "space-between",
-  marginBottom: 8,
-  paddingBottom: 4,
+  paddingBottom: 3,
+});
+
+export const filterWrapper = style({
+  position: "relative",
+});
+
+export const filterButton = style({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  padding: "3px 6px",
+  backgroundColor: vars.$color.bg.neutralWeak,
+  borderRadius: 4,
+});
+
+export const filterButtonText = style({
+  ...typography("t3", "medium"),
+  color: vars.$color.fg.neutralMuted,
+});
+
+export const filterDropdown = style({
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  marginTop: 4,
+  backgroundColor: vars.$color.bg.layerFloating,
+  borderWidth: 1,
+  borderColor: vars.$color.stroke.neutralSubtle,
+  borderStyle: "solid",
+  borderRadius: 8,
+  padding: "4px 0",
+  zIndex: 100,
+  minWidth: 90,
+});
+
+export const filterOption = style({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 4,
+  padding: "8px 12px",
+});
+
+export const filterCheckbox = recipe({
+  base: {
+    ...typography("t3", "medium"),
+    width: 16,
+  },
+  variants: {
+    level: {
+      log: { color: vars.$color.palette.green600 },
+      info: { color: vars.$color.palette.blue600 },
+      warn: { color: vars.$color.palette.yellow600 },
+      error: { color: vars.$color.palette.red600 },
+    },
+  },
+});
+
+export const filterLabel = recipe({
+  base: {
+    ...typography("t3", "medium"),
+  },
+  variants: {
+    level: {
+      log: { color: vars.$color.palette.green600 },
+      info: { color: vars.$color.palette.blue600 },
+      warn: { color: vars.$color.palette.yellow600 },
+      error: { color: vars.$color.palette.red600 },
+    },
+  },
+});
+
+export const searchWrapper = style({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  flex: 1,
+  marginLeft: 8,
+  marginRight: 8,
   borderBottomWidth: 1,
   borderBottomColor: vars.$color.stroke.neutralSubtle,
   borderBottomStyle: "solid",
+  gap: 8,
+});
+
+export const searchPrompt = style({
+  ...typography("t6", "medium"),
+  color: vars.$color.fg.placeholder,
 });
 
-export const logCount = style({
+export const searchInput = style({
+  flex: 1,
   ...typography("t3", "regular"),
-  color: vars.$color.fg.neutralSubtle,
+  color: vars.$color.fg.neutral,
+  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: "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 logList = style({
   flex: 1,
+  paddingTop: 0,
+  paddingBottom: 0,
 });
 
 export const logItem = recipe({
@@ -221,17 +318,8 @@ export const replInputRow = style({
   flexDirection: "row",
   alignItems: "center",
   gap: 8,
-  paddingTop: 8,
+  paddingTop: 0,
   paddingBottom: 8,
-  marginTop: -1,
-  borderTopWidth: 1,
-  borderTopColor: vars.$color.stroke.neutralSubtle,
-  borderTopStyle: "solid",
-  backgroundImage: `linear-gradient(to bottom, transparent, ${vars.$color.bg.layerDefault})`,
-  backgroundSize: "100% 32px",
-  backgroundRepeat: "no-repeat",
-  backgroundPosition: "top",
-  backgroundColor: vars.$color.bg.layerDefault,
 });
 
 export const replPrompt = style({

package/src/components/ConsolePanel.tsx

@@ -1,6 +1,6 @@
 import { useConsole, useNetwork, usePerformance } from "../hooks";
 import * as css from "./ConsolePanel.css";
-import { LogPanel } from "./LogPanel";
+import { LogPanel, dismissFilterDropdown } from "./LogPanel";
 import { NetworkPanel } from "./NetworkPanel";
 import { PerformancePanel } from "./PerformancePanel";
 import Tabs from "./Tabs";
@@ -13,6 +13,7 @@ export const ConsolePanel = () => {
   return (
     <view className={css.container}>
       <Tabs
+        onTabChange={dismissFilterDropdown}
         items={[
           {
             key: "log",

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.css.ts

@@ -4,18 +4,18 @@ import { vars } from "../styles/vars";
 
 export const wrapper = style({
   position: "fixed",
-  right: "16px",
-  bottom: "84px",
   zIndex: 9999,
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
   gap: "8px",
+  overflow: "visible",
+  transition: `transform ${vars.$duration.d4} cubic-bezier(0.4, 0, 0.2, 1)`,
 });
 
-export const container = style({});
-
 export const button = style({
+  position: "relative",
+  overflow: "hidden",
   paddingLeft: "8px",
   paddingRight: "8px",
   paddingTop: "4px",
@@ -30,6 +30,16 @@ export const button = style({
   boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
 });
 
+export const shineOverlay = style({
+  position: "absolute",
+  top: "-50%",
+  left: "-25%",
+  width: "150%",
+  height: "200%",
+  backgroundColor: "rgba(255, 255, 255, 0.2)",
+  borderRadius: "9999px",
+});
+
 export const title = style({
   ...typography("t4", "regular"),
   color: vars.$color.palette.staticWhite,
@@ -43,6 +53,7 @@ export const subtitle = style({
 });
 
 export const reloadButton = style({
+  overflow: "visible",
   width: "32px",
   height: "32px",
   borderRadius: "16px",

package/src/components/FloatingButton.tsx

@@ -1,18 +1,36 @@
 import type { ReactNode } from "@lynx-js/react";
+import { useLongPressDrag } from "../hooks/useLongPressDrag";
 import * as css from "./FloatingButton.css";
 
 interface FloatingButtonProps {
   bindtap: () => void;
-  isVisible: boolean;
   children: ReactNode;
 }
 
+const SHINE_STYLES = {
+  idle: {
+    transform: "scale(0)",
+    opacity: 0,
+  },
+  dragging: {
+    transform: "scale(1)",
+    opacity: 1,
+    transition: "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)",
+  },
+  releasing: {
+    transform: "scale(1)",
+    opacity: 0,
+    transition: "opacity 300ms cubic-bezier(0.4, 0, 0.2, 1)",
+  },
+} as const;
+
 export const FloatingButton = ({
   bindtap,
-  isVisible,
   children,
 }: FloatingButtonProps) => {
-  if (!isVisible) return null;
+  const { phase, right, bottom, clearTimer, handlers } =
+    useLongPressDrag(bindtap);
+
 
   const handleReload = () => {
     try {
@@ -24,14 +42,32 @@ export const FloatingButton = ({
     }
   };
 
+  const isDragging = phase === "dragging";
+
   return (
-    <view className={css.wrapper}>
-      <view className={css.container} bindtap={bindtap}>
-        <view className={css.button}>{children}</view>
-      </view>
-      <view className={css.reloadButton} bindtap={handleReload}>
-        <text className={css.reloadIcon}>{"\u21BB"}</text>
+    <>
+      <view
+        className={css.wrapper}
+        consume-slide-event={[[-180, 180]]}
+        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}
+        >
+          <text className={css.reloadIcon}>{"\u21BB"}</text>
+        </view>
       </view>
-    </view>
+    </>
   );
 };

package/src/components/LogPanel.tsx

@@ -1,8 +1,17 @@
-import { useEffect, useRef, useState } from "@lynx-js/react";
+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 } from "../types";
+import type { LogEntry, LogLevel } from "../types";
 import * as css from "./ConsolePanel.css";
+import { FadeList } from "./FadeList";
+
+const LOG_LEVELS: LogLevel[] = ["log", "info", "warn", "error"];
+
+let savedEnabledLevels: Set<LogLevel> | null = null;
+let savedSearchQuery = "";
+let closeFilterDropdown: (() => void) | null = null;
+
+export const dismissFilterDropdown = () => closeFilterDropdown?.();
 
 interface LogPanelProps {
   logs: LogEntry[];
@@ -26,10 +35,62 @@ const runCode = (code: string) => {
 export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
   const [expandedArgs, setExpandedArgs] = useState(new Set());
   const [code, setCode] = useState("");
+  const [enabledLevels, setEnabledLevels] = useState<Set<LogLevel>>(
+    () => savedEnabledLevels ?? new Set(LOG_LEVELS),
+  );
+  const [filterOpen, setFilterOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState(savedSearchQuery);
   const inputRef = useRef<NodesRef>(null);
+  const searchInputRef = useRef<NodesRef>(null);
   const listRef = useRef<NodesRef>(null);
-  const logsRef = useRef(logs);
-  logsRef.current = logs;
+
+  useEffect(() => {
+    savedEnabledLevels = enabledLevels;
+  }, [enabledLevels]);
+
+  useEffect(() => {
+    savedSearchQuery = searchQuery;
+  }, [searchQuery]);
+
+  useEffect(() => {
+    if (savedSearchQuery) {
+      searchInputRef.current
+        ?.invoke({ method: "setValue", params: { value: savedSearchQuery } })
+        .exec();
+    }
+  }, []);
+
+  useEffect(() => {
+    closeFilterDropdown = () => setFilterOpen(false);
+    return () => { closeFilterDropdown = null; };
+  }, []);
+
+  const filteredLogs = useMemo(
+    () =>
+      logs.filter((log) => {
+        if (!enabledLevels.has(log.level)) return false;
+        if (searchQuery) {
+          const query = searchQuery.toLowerCase();
+          return log.args.some((arg) => String(arg).toLowerCase().includes(query));
+        }
+        return true;
+      }),
+    [logs, enabledLevels, searchQuery],
+  );
+  const logsRef = useRef(filteredLogs);
+  logsRef.current = filteredLogs;
+
+  const toggleLevel = (level: LogLevel) => {
+    setEnabledLevels((prev) => {
+      const next = new Set(prev);
+      if (next.has(level)) {
+        next.delete(level);
+      } else {
+        next.add(level);
+      }
+      return next;
+    });
+  };
 
   const scrollToBottom = (smooth: boolean) => {
     if (logsRef.current.length === 0) return;
@@ -43,7 +104,7 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
 
   useEffect(() => {
     scrollToBottom(true);
-  }, [logs]);
+  }, [filteredLogs]);
 
   const toggleArg = (key: string) => {
     setExpandedArgs((prev) => {
@@ -165,22 +226,74 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
   };
 
   return (
-    <view className={css.logContainer}>
+    <view
+      className={css.logContainer}
+      bindtap={() => { if (filterOpen) setFilterOpen(false); }}
+    >
       <view className={css.logHeader}>
-        <text className={css.logCount}>Total {logs.length} logs</text>
+        <view className={css.filterWrapper}>
+          <view
+            className={css.filterButton}
+            catchtap={() => setFilterOpen((v) => !v)}
+          >
+            <text className={css.filterButtonText}>Filter  ▼</text>
+          </view>
+          {filterOpen && (
+            <view className={css.filterDropdown} catchtap={() => {}}>
+              {LOG_LEVELS.map((level) => (
+                <view
+                  key={level}
+                  className={css.filterOption}
+                  bindtap={() => toggleLevel(level)}
+                >
+                  <text className={css.filterCheckbox({ level })}>
+                    {enabledLevels.has(level) ? "✅" : "⬜"}
+                  </text>
+                  <text className={css.filterLabel({ level })}>
+                    {level.toUpperCase()}
+                  </text>
+                </view>
+              ))}
+            </view>
+          )}
+        </view>
+        <view className={css.searchWrapper}>
+          <text className={css.searchPrompt}>{"›"}</text>
+          <input
+            ref={searchInputRef}
+            className={css.searchInput}
+            placeholder="Search logs..."
+            bindinput={(e: BaseEvent<"bindinput", InputInputEvent>) =>
+              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>
-      <list
-        ref={listRef}
-        scroll-orientation="vertical"
+      <FadeList
+        listRef={listRef}
         className={css.logList}
-        initial-scroll-index={Math.max(0, logs.length - 1)}
+        preload-buffer-count={10}
+        initial-scroll-index={Math.max(0, filteredLogs.length - 1)}
       >
-        {logs.length === 0 ? (
+        {filteredLogs.length === 0 ? (
           <list-item item-key="empty-state">
             <view className={css.placeholder}>
               <text className={css.placeholderText}>
@@ -189,7 +302,7 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
             </view>
           </list-item>
         ) : (
-          logs.map((log) => {
+          filteredLogs.map((log) => {
             return (
               <list-item key={log.id} item-key={log.id}>
                 <view className={css.logItem({ level: log.level })}>
@@ -220,7 +333,7 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
             );
           })
         )}
-      </list>
+      </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({