lynx-console 0.0.1 → 0.1.0

package/src/components/ConsolePanel.css.ts

@@ -33,20 +33,113 @@ export const logHeader = style({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "space-between",
-  marginBottom: 8,
-  paddingBottom: 4,
+  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",
+});
+
+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.neutral,
+});
+
+export const filterDropdown = style({
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  marginTop: 4,
+  backgroundColor: vars.$color.bg.layerDefault,
+  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 clearButton = style({
-  padding: "6px 12px",
+  padding: "3px 6px",
   backgroundColor: vars.$color.bg.neutralWeak,
   borderRadius: 4,
 });
@@ -58,6 +151,8 @@ export const clearButtonText = style({
 
 export const logList = style({
   flex: 1,
+  paddingTop: 0,
+  paddingBottom: 0,
 });
 
 export const logItem = recipe({
@@ -216,22 +311,20 @@ 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",
   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/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,12 +42,27 @@ 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
+      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} bindtap={handleReload}>
+      <view
+        className={css.reloadButton}
+        catchtouchstart={() => clearTimer()}
+        bindtap={handleReload}
+      >
         <text className={css.reloadIcon}>{"\u21BB"}</text>
       </view>
     </view>

package/src/components/LogPanel.tsx

@@ -1,9 +1,18 @@
-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 { vars } from "../styles/vars";
 import * as css from "./ConsolePanel.css";
 
+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[];
   clearLogs: () => void;
@@ -26,10 +35,64 @@ 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 [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);
-  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 +106,7 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
 
   useEffect(() => {
     scrollToBottom(true);
-  }, [logs]);
+  }, [filteredLogs]);
 
   const toggleArg = (key: string) => {
     setExpandedArgs((prev) => {
@@ -165,22 +228,81 @@ 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)
+            }
+          />
+        </view>
         <view style={{ display: "flex", flexDirection: "row", gap: 8 }}>
           <view className={css.clearButton} bindtap={clearLogs}>
             <text className={css.clearButtonText}>Clear</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"
         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)}
+        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 });
+          }
+        }}
       >
-        {logs.length === 0 ? (
+        {filteredLogs.length === 0 ? (
           <list-item item-key="empty-state">
             <view className={css.placeholder}>
               <text className={css.placeholderText}>
@@ -189,7 +311,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 })}>
@@ -221,6 +343,14 @@ 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)`,
+        }}
+      />
       <view className={css.replInputRow}>
         <text className={css.replPrompt}>{"›"}</text>
         <input

package/src/components/Tabs.tsx

@@ -8,6 +8,7 @@ type TabsProps = {
     label: string;
     renderContent: () => ReactNode;
   }>;
+  onTabChange?: () => void;
 };
 
 export default function Tabs(props: TabsProps) {
@@ -23,6 +24,7 @@ export default function Tabs(props: TabsProps) {
             className={css.tabTriggerButton}
             bindtap={() => {
               setActiveIndex(i);
+              props.onTabChange?.();
 
               tabContentsRef.current
                 ?.invoke({
@@ -59,6 +61,7 @@ export default function Tabs(props: TabsProps) {
         className={css.tabContents}
         scroll-orientation="horizontal"
         item-snap={{ factor: 0, offset: 0 }}
+        bindscroll={() => props.onTabChange?.()}
         bindsnap={(e: ListSnapEvent) => {
           setActiveIndex(e.detail.position);
         }}

package/src/hooks/useLongPressDrag.ts

@@ -0,0 +1,95 @@
+import { useRef, useState } from "@lynx-js/react";
+import type { BaseTouchEvent, Target } from "@lynx-js/types";
+
+const LONG_PRESS_DURATION = 400;
+const MOVE_THRESHOLD = 5;
+
+const DEFAULT_RIGHT = 16;
+const DEFAULT_BOTTOM = 84;
+
+let savedRight = DEFAULT_RIGHT;
+let savedBottom = DEFAULT_BOTTOM;
+
+export function useLongPressDrag(onTap: () => void) {
+  const [right, setRight] = useState(savedRight);
+  const [bottom, setBottom] = useState(savedBottom);
+  const [phase, setPhase] = useState<"idle" | "dragging" | "releasing">("idle");
+  const [tempRight, setTempRight] = useState(savedRight);
+  const [tempBottom, setTempBottom] = useState(savedBottom);
+
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const draggingRef = useRef(false);
+  const startRef = useRef({ x: 0, y: 0, r: 0, b: 0 });
+
+  const clearTimer = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  };
+
+  const handleTouchStart = (e: BaseTouchEvent<Target>) => {
+    startRef.current = {
+      x: e.detail.x,
+      y: e.detail.y,
+      r: right,
+      b: bottom,
+    };
+    draggingRef.current = false;
+
+    timerRef.current = setTimeout(() => {
+      draggingRef.current = true;
+      setPhase("dragging");
+      setTempRight(right);
+      setTempBottom(bottom);
+    }, LONG_PRESS_DURATION);
+  };
+
+  const handleTouchMove = (e: BaseTouchEvent<Target>) => {
+    const dx = e.detail.x - startRef.current.x;
+    const dy = e.detail.y - startRef.current.y;
+
+    if (
+      !draggingRef.current &&
+      (Math.abs(dx) > MOVE_THRESHOLD || Math.abs(dy) > MOVE_THRESHOLD)
+    ) {
+      clearTimer();
+    }
+
+    if (!draggingRef.current) return;
+
+    // right/bottom 기준이므로 방향 반전
+    setTempRight(startRef.current.r - dx);
+    setTempBottom(startRef.current.b - dy);
+  };
+
+  const handleTouchEnd = () => {
+    clearTimer();
+
+    if (draggingRef.current) {
+      setRight(tempRight);
+      setBottom(tempBottom);
+      savedRight = tempRight;
+      savedBottom = tempBottom;
+      setPhase("releasing");
+      draggingRef.current = false;
+      setTimeout(() => setPhase("idle"), 300);
+    } else {
+      onTap();
+    }
+  };
+
+  const isDragging = phase === "dragging";
+
+  return {
+    phase,
+    right: isDragging ? tempRight : right,
+    bottom: isDragging ? tempBottom : bottom,
+    clearTimer,
+    handlers: {
+      bindtouchstart: handleTouchStart,
+      bindtouchmove: handleTouchMove,
+      bindtouchend: handleTouchEnd,
+    },
+  };
+}

package/src/index.tsx

@@ -85,7 +85,7 @@ const LynxConsole = forwardRef<LynxConsoleHandle, LynxConsoleProps>(
 
     return (
       <view className={themeClass}>
-        <FloatingButton bindtap={handleOpenBottomSheet} isVisible={!isOpen}>
+        <FloatingButton bindtap={handleOpenBottomSheet}>
           <text className={floatingButtonCss.title}>LynxConsole</text>
           <text className={floatingButtonCss.subtitle}>
             {`${latestFcp?.name ?? "FCP"}: ${latestFcp?.duration ? latestFcp.duration.toFixed(2) : "--"}ms`}