lynx-console 0.1.0 → 0.1.1

package/dist/index.mjs

@@ -1,10 +1,11 @@
 import "./index.css";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "@lynx-js/react";
 import "./assets/src/components/BottomSheet.css.ts.vanilla-CulwSDhG.css";
-import "./assets/src/components/ConsolePanel.css.ts.vanilla-DFvHPEyg.css";
+import "./assets/src/components/ConsolePanel.css.ts.vanilla-DWdhFBJq.css";
 import { stringify } from "javascript-stringify";
-import "./assets/src/components/NetworkPanel.css.ts.vanilla-DFMduT0T.css";
-import "./assets/src/components/PerformancePanel.css.ts.vanilla-D35LuXlW.css";
+import "./assets/src/components/FadeList.css.ts.vanilla-sppTKMZj.css";
+import "./assets/src/components/NetworkPanel.css.ts.vanilla-BSE4s40D.css";
+import "./assets/src/components/PerformancePanel.css.ts.vanilla-Bb3zG5G8.css";
 import "./assets/src/components/Tabs.css.ts.vanilla-DD7L2oXt.css";
 import "./assets/src/components/FloatingButton.css.ts.vanilla-BaG0OI6p.css";
 
@@ -288,96 +289,94 @@ var createRuntimeFn = (config) => {
 
 //#endregion
 //#region src/components/ConsolePanel.css.ts
-var argNull = "ConsolePanel_argNull__db6kuu17";
-var argObject = "ConsolePanel_argObject__db6kuu1j";
-var argObjectContent = "ConsolePanel_argObjectContent__db6kuu1m";
-var argObjectHeader = "ConsolePanel_argObjectHeader__db6kuu1k";
-var argObjectJson = "ConsolePanel_argObjectJson__db6kuu1p";
-var argObjectPreview = "ConsolePanel_argObjectPreview__db6kuu1l";
+var argNull = "ConsolePanel_argNull__db6kuu18";
+var argObject = "ConsolePanel_argObject__db6kuu1k";
+var argObjectContent = "ConsolePanel_argObjectContent__db6kuu1n";
+var argObjectHeader = "ConsolePanel_argObjectHeader__db6kuu1l";
+var argObjectJson = "ConsolePanel_argObjectJson__db6kuu1q";
+var argObjectPreview = "ConsolePanel_argObjectPreview__db6kuu1m";
 var argPrimitive = createRuntimeFn({
-	defaultClassName: "ConsolePanel_argPrimitive__db6kuu1e",
+	defaultClassName: "ConsolePanel_argPrimitive__db6kuu1f",
 	variantClassNames: { level: {
-		log: "ConsolePanel_argPrimitive_level_log__db6kuu1f",
-		info: "ConsolePanel_argPrimitive_level_info__db6kuu1g",
-		warn: "ConsolePanel_argPrimitive_level_warn__db6kuu1h",
-		error: "ConsolePanel_argPrimitive_level_error__db6kuu1i"
+		log: "ConsolePanel_argPrimitive_level_log__db6kuu1g",
+		info: "ConsolePanel_argPrimitive_level_info__db6kuu1h",
+		warn: "ConsolePanel_argPrimitive_level_warn__db6kuu1i",
+		error: "ConsolePanel_argPrimitive_level_error__db6kuu1j"
 	} },
 	defaultVariants: {},
 	compoundVariants: []
 });
 var argString = createRuntimeFn({
-	defaultClassName: "ConsolePanel_argString__db6kuu19",
+	defaultClassName: "ConsolePanel_argString__db6kuu1a",
 	variantClassNames: { level: {
-		log: "ConsolePanel_argString_level_log__db6kuu1a",
-		info: "ConsolePanel_argString_level_info__db6kuu1b",
-		warn: "ConsolePanel_argString_level_warn__db6kuu1c",
-		error: "ConsolePanel_argString_level_error__db6kuu1d"
+		log: "ConsolePanel_argString_level_log__db6kuu1b",
+		info: "ConsolePanel_argString_level_info__db6kuu1c",
+		warn: "ConsolePanel_argString_level_warn__db6kuu1d",
+		error: "ConsolePanel_argString_level_error__db6kuu1e"
 	} },
 	defaultVariants: {},
 	compoundVariants: []
 });
-var argUndefined = "ConsolePanel_argUndefined__db6kuu18";
-var clearButton$2 = "ConsolePanel_clearButton__db6kuuo";
-var clearButtonText$2 = "ConsolePanel_clearButtonText__db6kuup";
+var argUndefined = "ConsolePanel_argUndefined__db6kuu19";
+var clearButton$2 = "ConsolePanel_clearButton__db6kuup";
+var clearButtonText$2 = "ConsolePanel_clearButtonText__db6kuuq";
 var container$2 = "ConsolePanel_container__db6kuu0";
-var fadeBottom = "ConsolePanel_fadeBottom__db6kuu1q";
-var fadeTop = "ConsolePanel_fadeTop__db6kuu5";
-var filterButton = "ConsolePanel_filterButton__db6kuu7";
-var filterButtonText = "ConsolePanel_filterButtonText__db6kuu8";
+var filterButton = "ConsolePanel_filterButton__db6kuu6";
+var filterButtonText = "ConsolePanel_filterButtonText__db6kuu7";
 var filterCheckbox = createRuntimeFn({
-	defaultClassName: "ConsolePanel_filterCheckbox__db6kuub",
+	defaultClassName: "ConsolePanel_filterCheckbox__db6kuua",
 	variantClassNames: { level: {
-		log: "ConsolePanel_filterCheckbox_level_log__db6kuuc",
-		info: "ConsolePanel_filterCheckbox_level_info__db6kuud",
-		warn: "ConsolePanel_filterCheckbox_level_warn__db6kuue",
-		error: "ConsolePanel_filterCheckbox_level_error__db6kuuf"
+		log: "ConsolePanel_filterCheckbox_level_log__db6kuub",
+		info: "ConsolePanel_filterCheckbox_level_info__db6kuuc",
+		warn: "ConsolePanel_filterCheckbox_level_warn__db6kuud",
+		error: "ConsolePanel_filterCheckbox_level_error__db6kuue"
 	} },
 	defaultVariants: {},
 	compoundVariants: []
 });
-var filterDropdown = "ConsolePanel_filterDropdown__db6kuu9";
+var filterDropdown = "ConsolePanel_filterDropdown__db6kuu8";
 var filterLabel = createRuntimeFn({
-	defaultClassName: "ConsolePanel_filterLabel__db6kuug",
+	defaultClassName: "ConsolePanel_filterLabel__db6kuuf",
 	variantClassNames: { level: {
-		log: "ConsolePanel_filterLabel_level_log__db6kuuh",
-		info: "ConsolePanel_filterLabel_level_info__db6kuui",
-		warn: "ConsolePanel_filterLabel_level_warn__db6kuuj",
-		error: "ConsolePanel_filterLabel_level_error__db6kuuk"
+		log: "ConsolePanel_filterLabel_level_log__db6kuug",
+		info: "ConsolePanel_filterLabel_level_info__db6kuuh",
+		warn: "ConsolePanel_filterLabel_level_warn__db6kuui",
+		error: "ConsolePanel_filterLabel_level_error__db6kuuj"
 	} },
 	defaultVariants: {},
 	compoundVariants: []
 });
-var filterOption = "ConsolePanel_filterOption__db6kuua";
-var filterWrapper = "ConsolePanel_filterWrapper__db6kuu6";
-var logArgItem = "ConsolePanel_logArgItem__db6kuu16";
-var logArgsContainer = "ConsolePanel_logArgsContainer__db6kuu15";
+var filterOption = "ConsolePanel_filterOption__db6kuu9";
+var filterWrapper = "ConsolePanel_filterWrapper__db6kuu5";
+var logArgItem = "ConsolePanel_logArgItem__db6kuu17";
+var logArgsContainer = "ConsolePanel_logArgsContainer__db6kuu16";
 var logContainer = "ConsolePanel_logContainer__db6kuu3";
 var logHeader = "ConsolePanel_logHeader__db6kuu4";
 var logItem = createRuntimeFn({
-	defaultClassName: "ConsolePanel_logItem__db6kuur",
+	defaultClassName: "ConsolePanel_logItem__db6kuus",
 	variantClassNames: { level: {
-		log: "ConsolePanel_logItem_level_log__db6kuus",
-		info: "ConsolePanel_logItem_level_info__db6kuut",
-		warn: "ConsolePanel_logItem_level_warn__db6kuuu",
-		error: "ConsolePanel_logItem_level_error__db6kuuv"
+		log: "ConsolePanel_logItem_level_log__db6kuut",
+		info: "ConsolePanel_logItem_level_info__db6kuuu",
+		warn: "ConsolePanel_logItem_level_warn__db6kuuv",
+		error: "ConsolePanel_logItem_level_error__db6kuuw"
 	} },
 	defaultVariants: {},
 	compoundVariants: []
 });
-var logItemHeader = "ConsolePanel_logItemHeader__db6kuuw";
+var logItemHeader = "ConsolePanel_logItemHeader__db6kuux";
 var logLevel = createRuntimeFn({
-	defaultClassName: "ConsolePanel_logLevel__db6kuux",
+	defaultClassName: "ConsolePanel_logLevel__db6kuuy",
 	variantClassNames: { level: {
-		log: "ConsolePanel_logLevel_level_log__db6kuuy",
-		info: "ConsolePanel_logLevel_level_info__db6kuuz",
-		warn: "ConsolePanel_logLevel_level_warn__db6kuu10",
-		error: "ConsolePanel_logLevel_level_error__db6kuu11"
+		log: "ConsolePanel_logLevel_level_log__db6kuuz",
+		info: "ConsolePanel_logLevel_level_info__db6kuu10",
+		warn: "ConsolePanel_logLevel_level_warn__db6kuu11",
+		error: "ConsolePanel_logLevel_level_error__db6kuu12"
 	} },
 	defaultVariants: {},
 	compoundVariants: []
 });
-var logList = "ConsolePanel_logList__db6kuuq";
-var logTime = "ConsolePanel_logTime__db6kuu12";
+var logList = "ConsolePanel_logList__db6kuur";
+var logTime = "ConsolePanel_logTime__db6kuu13";
 var placeholder$2 = "ConsolePanel_placeholder__db6kuu1";
 var placeholderText$2 = "ConsolePanel_placeholderText__db6kuu2";
 var replInput = "ConsolePanel_replInput__db6kuu1t";
@@ -385,10 +384,12 @@ var replInputRow = "ConsolePanel_replInputRow__db6kuu1r";
 var replPrompt = "ConsolePanel_replPrompt__db6kuu1s";
 var replRunButton = "ConsolePanel_replRunButton__db6kuu1u";
 var replRunButtonText = "ConsolePanel_replRunButtonText__db6kuu1v";
-var searchInput = "ConsolePanel_searchInput__db6kuun";
-var searchPrompt = "ConsolePanel_searchPrompt__db6kuum";
-var searchWrapper = "ConsolePanel_searchWrapper__db6kuul";
-var toggleIndicator = "ConsolePanel_toggleIndicator__db6kuu13";
+var searchClear = "ConsolePanel_searchClear__db6kuun";
+var searchClearText = "ConsolePanel_searchClearText__db6kuuo";
+var searchInput = "ConsolePanel_searchInput__db6kuum";
+var searchPrompt = "ConsolePanel_searchPrompt__db6kuul";
+var searchWrapper = "ConsolePanel_searchWrapper__db6kuuk";
+var toggleIndicator = "ConsolePanel_toggleIndicator__db6kuu14";
 
 //#endregion
 //#region src/styles/vars/color.ts
@@ -778,6 +779,45 @@ const vars = {
 	}
 };
 
+//#endregion
+//#region src/components/FadeList.css.ts
+var fadeBottom = "FadeList_fadeBottom__uvxsyd1";
+var fadeTop = "FadeList_fadeTop__uvxsyd0";
+
+//#endregion
+//#region src/components/FadeList.tsx
+const FadeList = ({ className, listRef: externalListRef, children, ...listProps }) => {
+	const [fadeState, setFadeState] = useState({
+		atTop: true,
+		atBottom: true
+	});
+	const fadeRef = useRef({
+		atTop: true,
+		atBottom: true
+	});
+	const internalListRef = useRef(null);
+	const listRef = externalListRef ?? internalListRef;
+	return <>
+      <view className={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) => {
+		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={fadeBottom} style={{ background: fadeState.atBottom ? "linear-gradient(to top, #ffffff00, #ffffff00)" : `linear-gradient(to top, ${vars.$color.bg.layerFloating}, #ffffff00)` }} />
+    </>;
+};
+
 //#endregion
 //#region src/components/LogPanel.tsx
 const LOG_LEVELS = [
@@ -805,14 +845,6 @@ const LogPanel = ({ logs, clearLogs }) => {
 	const [enabledLevels, setEnabledLevels] = useState(() => 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(null);
 	const searchInputRef = useRef(null);
 	const listRef = useRef(null);
@@ -957,6 +989,15 @@ const LogPanel = ({ logs, clearLogs }) => {
         <view className={searchWrapper}>
           <text className={searchPrompt}>{"›"}</text>
           <input ref={searchInputRef} className={searchInput} placeholder="Search logs..." bindinput={(e) => setSearchQuery(e.detail.value)} />
+          {searchQuery.length > 0 && <view className={searchClear} bindtap={() => {
+		setSearchQuery("");
+		searchInputRef.current?.invoke({
+			method: "setValue",
+			params: { value: "" }
+		}).exec();
+	}}>
+              <text className={searchClearText}>✕</text>
+            </view>}
         </view>
         <view style={{
 		display: "flex",
@@ -964,24 +1005,11 @@ const LogPanel = ({ logs, clearLogs }) => {
 		gap: 8
 	}}>
           <view className={clearButton$2} bindtap={clearLogs}>
-            <text className={clearButtonText$2}>Clear</text>
+            <text className={clearButtonText$2}>🗑</text>
           </view>
         </view>
       </view>
-      <view className={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={logList} preload-buffer-count={10} initial-scroll-index={Math.max(0, filteredLogs.length - 1)} scroll-event-throttle={16} bindscroll={(e) => {
-		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
-			});
-		}
-	}}>
+      <FadeList listRef={listRef} className={logList} preload-buffer-count={10} initial-scroll-index={Math.max(0, filteredLogs.length - 1)}>
         {filteredLogs.length === 0 ? <list-item item-key="empty-state">
             <view className={placeholder$2}>
               <text className={placeholderText$2}>
@@ -1007,8 +1035,7 @@ const LogPanel = ({ logs, clearLogs }) => {
                 </view>
               </list-item>;
 	})}
-      </list>
-      <view className={fadeBottom} style={{ background: fadeState.atBottom ? `linear-gradient(to top, #ffffff00, #ffffff00)` : `linear-gradient(to top, ${vars.$color.bg.layerDefault}, #ffffff00)` }} />
+      </FadeList>
       <view className={replInputRow}>
         <text className={replPrompt}>{"›"}</text>
         <input ref={inputRef} className={replInput} placeholder="enter code..." bindinput={(e) => setCode(e.detail.value)} bindconfirm={handleRun} />
@@ -1173,13 +1200,13 @@ const NetworkPanel = ({ networks, clearNetworks }) => {
       <view className={header$1}>
         <text className={count$1}>Total: {networks.length} requests</text>
         <view className={clearButton$1} bindtap={clearNetworks}>
-          <text className={clearButtonText$1}>Clear</text>
+          <text className={clearButtonText$1}>🗑</text>
         </view>
       </view>
 
       {networks.length === 0 ? <view className={placeholder$1}>
           <text className={placeholderText$1}>No network requests yet</text>
-        </view> : <list className={list$1}>
+        </view> : <FadeList className={list$1}>
           {networks.map((network) => <list-item key={network.id} item-key={network.id}>
               <view className={item$1({ status: network.status })}>
                 <view className={itemHeader$1} bindtap={() => setSelectedId(selectedId === network.id ? null : network.id)}>
@@ -1242,7 +1269,7 @@ const NetworkPanel = ({ networks, clearNetworks }) => {
                   </view>}
               </view>
             </list-item>)}
-        </list>}
+        </FadeList>}
     </view>;
 };
 
@@ -1324,7 +1351,7 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
             <text>Log</text>
           </view>
           <view bindtap={clearPerformances} className={clearButton}>
-            <text className={clearButtonText}>Clear</text>
+            <text className={clearButtonText}>🗑</text>
           </view>
         </view>
         <view className={placeholder}>
@@ -1337,11 +1364,11 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
       <view className={header}>
         <text className={count}>{performances.length} entries</text>
         <view bindtap={clearPerformances} className={clearButton}>
-          <text className={clearButtonText}>Clear</text>
+          <text className={clearButtonText}>🗑</text>
         </view>
       </view>
 
-      <list className={list}>
+      <FadeList className={list}>
         {performances.map((perf) => {
 		const isMetricFcp = isMetricFcpEntry(perf);
 		const fcpMetrics = extractFcpMetrics(perf);
@@ -1417,7 +1444,7 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
               </view>
             </list-item>;
 	})}
-      </list>
+      </FadeList>
     </view>;
 };
 
@@ -1584,9 +1611,9 @@ function useLongPressDrag(onTap) {
 		bottom: isDragging ? tempBottom : bottom,
 		clearTimer,
 		handlers: {
-			bindtouchstart: handleTouchStart,
-			bindtouchmove: handleTouchMove,
-			bindtouchend: handleTouchEnd
+			catchtouchstart: handleTouchStart,
+			catchtouchmove: handleTouchMove,
+			catchtouchend: handleTouchEnd
 		}
 	};
 }
@@ -1621,19 +1648,21 @@ const FloatingButton = ({ bindtap, children }) => {
 		}
 	};
 	const isDragging = phase === "dragging";
-	return <view className={wrapper} style={{
+	return <>
+      <view className={wrapper} consume-slide-event={[[-180, 180]]} style={{
 		right: `${right}px`,
 		bottom: `${bottom}px`,
 		transform: isDragging ? "scale(1.05)" : "scale(1)"
 	}} {...handlers}>
-      <view className={button}>
-        {children}
-        <view className={shineOverlay} style={SHINE_STYLES[phase]} />
-      </view>
-      <view className={reloadButton} catchtouchstart={() => clearTimer()} bindtap={handleReload}>
-        <text className={reloadIcon}>{"↻"}</text>
+        <view className={button}>
+          {children}
+          <view className={shineOverlay} style={SHINE_STYLES[phase]} />
+        </view>
+        <view className={reloadButton} catchtouchstart={() => clearTimer()} bindtap={handleReload}>
+          <text className={reloadIcon}>{"↻"}</text>
+        </view>
       </view>
-    </view>;
+    </>;
 };
 
 //#endregion