lynx-console 0.2.3 → 0.3.1

package/dist/index.cjs

@@ -166,7 +166,7 @@ function BottomSheet({ children, title, footer, onClose, isOpen, shouldClose = f
             <view className="bs-handle" style={{ backgroundColor: colors.palette.gray400 }} />
           </view>
           <view className="bs-header">
-            {title && <text className="bs-title" style={{
+            {title && <text className="bs-title t7" style={{
 		fontWeight: fontWeight.bold,
 		color: colors.fg.neutral
 	}}>
@@ -270,16 +270,6 @@ const usePerformance = () => {
 	};
 };
 
-//#endregion
-//#region src/components/FadeList.tsx
-const FadeList = ({ className, listRef: externalListRef, children, ...listProps }) => {
-	const internalListRef = (0, _lynx_js_react.useRef)(null);
-	const listRef = externalListRef ?? internalListRef;
-	return <list ref={listRef} scroll-orientation="vertical" className={className} {...listProps}>
-      {children}
-    </list>;
-};
-
 //#endregion
 //#region src/components/LogPanel.tsx
 const LOG_LEVELS = [
@@ -410,7 +400,6 @@ const LogPanel = ({ logs, clearLogs }) => {
 			params: { value: "" }
 		}).exec();
 		runCode(trimmed);
-		setTimeout(() => scrollToBottom(false), 100);
 	};
 	const renderArg = (arg, parentKey, level) => {
 		const key = parentKey;
@@ -431,7 +420,7 @@ const LogPanel = ({ logs, clearLogs }) => {
 			const MAX_LENGTH = 80;
 			const shouldTruncate = arg.length > MAX_LENGTH;
 			const strColor = getStringColor(colors, level);
-			if (!shouldTruncate) return <text className={"cp-argString"} style={{
+			if (!shouldTruncate) return <text className={"cp-argString t3"} style={{
 				color: strColor,
 				fontWeight: fontWeight.regular
 			}}>
@@ -439,13 +428,13 @@ const LogPanel = ({ logs, clearLogs }) => {
           </text>;
 			return <view className={"cp-argObject"}>
           <view className={"cp-argObjectHeader"} bindtap={() => toggleArg(key)}>
-            <text className={"cp-toggleIndicator"} style={{
+            <text className={"cp-toggleIndicator t2"} style={{
 				color: colors.fg.neutralSubtle,
 				fontWeight: fontWeight.regular
 			}}>
               {isExpanded ? "▼" : "▶"}
             </text>
-            <text className={"cp-argString"} style={{
+            <text className={"cp-argString t3"} style={{
 				color: strColor,
 				fontWeight: fontWeight.regular
 			}}>
@@ -454,7 +443,7 @@ const LogPanel = ({ logs, clearLogs }) => {
           </view>
         </view>;
 		}
-		if (typeof arg === "number" || typeof arg === "boolean") return <text className={"cp-argPrimitive"} style={{
+		if (typeof arg === "number" || typeof arg === "boolean") return <text className={"cp-argPrimitive t3"} style={{
 			color: getPrimitiveColor(colors, level),
 			fontWeight: fontWeight.regular
 		}}>
@@ -475,13 +464,13 @@ const LogPanel = ({ logs, clearLogs }) => {
 			else jsonString = (0, javascript_stringify.stringify)(arg, null, 2, { references: true }) ?? String(arg);
 			return <view className={"cp-argObject"}>
           <view className={"cp-argObjectHeader"} bindtap={() => toggleArg(key)}>
-            <text className={"cp-toggleIndicator"} style={{
+            <text className={"cp-toggleIndicator t2"} style={{
 				color: colors.fg.neutralSubtle,
 				fontWeight: fontWeight.regular
 			}}>
               {isExpanded ? "▼" : "▶"}
             </text>
-            <text className={"cp-argObjectPreview"} style={{
+            <text className={"cp-argObjectPreview t3"} style={{
 				fontWeight: fontWeight.medium,
 				color: colors.fg.neutral
 			}}>
@@ -489,7 +478,7 @@ const LogPanel = ({ logs, clearLogs }) => {
             </text>
           </view>
           {isExpanded && <view className={"cp-argObjectContent"}>
-              <text className={"cp-argObjectJson"} style={{
+              <text className={"cp-argObjectJson t3"} style={{
 				fontWeight: fontWeight.regular,
 				color: colors.fg.neutral
 			}}>
@@ -498,7 +487,7 @@ const LogPanel = ({ logs, clearLogs }) => {
             </view>}
         </view>;
 		}
-		return <text className={"cp-argPrimitive"} style={{
+		return <text className={"cp-argPrimitive t3"} style={{
 			color: getPrimitiveColor(colors, level),
 			fontWeight: fontWeight.regular
 		}}>
@@ -511,11 +500,11 @@ const LogPanel = ({ logs, clearLogs }) => {
       <view className={"cp-logHeader"}>
         <view className={"cp-filterWrapper"}>
           <view className={"cp-filterButton"} style={{ backgroundColor: colors.bg.neutralWeak }} catchtap={() => setFilterOpen((v) => !v)}>
-            <text className={"cp-filterButtonText"} style={{
+            <text className={"cp-filterButtonText t3"} style={{
 		fontWeight: fontWeight.medium,
 		color: colors.fg.neutralMuted
 	}}>
-              Filter  ▼
+              Filter ▼
             </text>
           </view>
           {filterOpen && <view className={"cp-filterDropdown"} style={{
@@ -523,13 +512,13 @@ const LogPanel = ({ logs, clearLogs }) => {
 		borderColor: colors.stroke.neutralSubtle
 	}} catchtap={() => {}}>
               {LOG_LEVELS.map((level) => <view key={level} className={"cp-filterOption"} bindtap={() => toggleLevel(level)}>
-                  <text className={"cp-filterCheckbox"} style={{
+                  <text className={"cp-filterCheckbox t3"} style={{
 		fontWeight: fontWeight.medium,
 		color: getLevelColor(colors, level)
 	}}>
                     {enabledLevels.has(level) ? "✅" : "⬜"}
                   </text>
-                  <text className={"cp-filterLabel"} style={{
+                  <text className={"cp-filterLabel t3"} style={{
 		fontWeight: fontWeight.medium,
 		color: getLevelColor(colors, level)
 	}}>
@@ -539,13 +528,13 @@ const LogPanel = ({ logs, clearLogs }) => {
             </view>}
         </view>
         <view className={"cp-searchWrapper"} style={{ borderBottomColor: colors.stroke.neutralSubtle }}>
-          <text className={"cp-searchPrompt"} style={{
+          <text className={"cp-searchPrompt t6"} style={{
 		fontWeight: fontWeight.medium,
 		color: colors.fg.placeholder
 	}}>
             {"›"}
           </text>
-          <input ref={searchInputRef} className={"cp-searchInput"} style={{
+          <input ref={searchInputRef} className={"cp-searchInput t3"} style={{
 		fontWeight: fontWeight.regular,
 		color: colors.fg.neutral,
 		caretColor: colors.palette.green600
@@ -557,7 +546,7 @@ const LogPanel = ({ logs, clearLogs }) => {
 			params: { value: "" }
 		}).exec();
 	}}>
-              <text className={"cp-searchClearText"} style={{
+              <text className={"cp-searchClearText t3"} style={{
 		fontWeight: fontWeight.medium,
 		color: colors.fg.placeholder
 	}}>
@@ -571,7 +560,7 @@ const LogPanel = ({ logs, clearLogs }) => {
 		gap: 8
 	}}>
           <view className={"cp-clearButton"} style={{ backgroundColor: colors.bg.neutralWeak }} bindtap={clearLogs}>
-            <text className={"cp-clearButtonText"} style={{
+            <text className={"cp-clearButtonText t3"} style={{
 		fontWeight: fontWeight.medium,
 		color: colors.fg.neutralMuted
 	}}>
@@ -580,10 +569,10 @@ const LogPanel = ({ logs, clearLogs }) => {
           </view>
         </view>
       </view>
-      <FadeList listRef={listRef} className={"cp-logList"} preload-buffer-count={10} initial-scroll-index={Math.max(0, filteredLogs.length - 1)}>
+      <list ref={listRef} scroll-orientation="vertical" className={"cp-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={"cp-placeholder"}>
-              <text className={"cp-placeholderText"} style={{
+              <text className={"cp-placeholderText t4"} style={{
 		fontWeight: fontWeight.regular,
 		color: colors.fg.disabled
 	}}>
@@ -597,13 +586,13 @@ const LogPanel = ({ logs, clearLogs }) => {
 			borderBottomColor: colors.stroke.neutralWeak
 		}}>
                   <view className={"cp-logItemHeader"}>
-                    <text className={"cp-logLevel"} style={{
+                    <text className={"cp-logLevel t2"} style={{
 			fontWeight: fontWeight.bold,
 			color: getLevelColor(colors, log.level)
 		}}>
                       {log.level.toUpperCase()}
                     </text>
-                    <text className={"cp-logTime"} style={{
+                    <text className={"cp-logTime t2"} style={{
 			fontWeight: fontWeight.regular,
 			color: colors.fg.neutralSubtle
 		}}>
@@ -618,21 +607,21 @@ const LogPanel = ({ logs, clearLogs }) => {
                 </view>
               </list-item>;
 	})}
-      </FadeList>
+      </list>
       <view className={"cp-replInputRow"}>
-        <text className={"cp-replPrompt"} style={{
+        <text className={"cp-replPrompt t10"} style={{
 		fontWeight: fontWeight.medium,
 		color: colors.fg.placeholder
 	}}>
           {"›"}
         </text>
-        <input ref={inputRef} className={"cp-replInput"} style={{
+        <input ref={inputRef} className={"cp-replInput t5"} style={{
 		fontWeight: fontWeight.regular,
 		color: colors.fg.neutral,
 		caretColor: colors.palette.green600
 	}} placeholder="enter code..." bindinput={(e) => setCode(e.detail.value)} bindconfirm={handleRun} />
         <view className={"cp-replRunButton"} style={{ backgroundColor: colors.palette.green100 }} bindtap={handleRun}>
-          <text className={"cp-replRunButtonText"} style={{
+          <text className={"cp-replRunButtonText t3"} style={{
 		fontWeight: fontWeight.medium,
 		color: colors.palette.green600
 	}}>
@@ -650,7 +639,7 @@ const NetworkDetailSection = ({ headers = {}, body = "", error = "" }) => {
 	return <>
       {}
       <view className={"np-detailSection"}>
-        <text className={"np-detailSectionTitle"} style={{
+        <text className={"np-detailSectionTitle t3"} style={{
 		fontWeight: fontWeight.bold,
 		color: colors.fg.neutral
 	}}>
@@ -658,20 +647,20 @@ const NetworkDetailSection = ({ headers = {}, body = "", error = "" }) => {
         </text>
         {headers && Object.keys(headers).length > 0 ? <view className={"np-table"}>
             {Object.entries(headers).map(([key, value]) => <view key={key} className={"np-tableRow"} style={{ backgroundColor: colors.bg.neutralWeak }}>
-                <text className={"np-tableKey"} style={{
+                <text className={"np-tableKey t3"} style={{
 		fontWeight: fontWeight.bold,
 		color: colors.fg.neutralSubtle
 	}}>
                   {key}
                 </text>
-                <text className={"np-tableValue"} style={{
+                <text className={"np-tableValue t3"} style={{
 		fontWeight: fontWeight.regular,
 		color: colors.fg.neutral
 	}}>
                   {value}
                 </text>
               </view>)}
-          </view> : <text className={"np-emptyText"} style={{
+          </view> : <text className={"np-emptyText t3"} style={{
 		fontWeight: fontWeight.regular,
 		color: colors.fg.disabled
 	}}>
@@ -681,27 +670,27 @@ const NetworkDetailSection = ({ headers = {}, body = "", error = "" }) => {
 
       {}
       <view className={"np-detailSection"}>
-        <text className={"np-detailSectionTitle"} style={{
+        <text className={"np-detailSectionTitle t3"} style={{
 		fontWeight: fontWeight.bold,
 		color: colors.fg.neutral
 	}}>
           Body
         </text>
-        {error && <text className={"np-errorText"} style={{
+        {error && <text className={"np-errorText t3"} style={{
 		fontWeight: fontWeight.regular,
 		color: colors.palette.red600,
 		backgroundColor: colors.palette.red100
 	}}>
             {error}
           </text>}
-        {body && <text className={"np-bodyText"} style={{
+        {body && <text className={"np-bodyText t3"} style={{
 		fontWeight: fontWeight.regular,
 		color: colors.fg.neutral,
 		backgroundColor: colors.bg.neutralWeak
 	}}>
             {body}
           </text>}
-        {!error && !body && <text className={"np-emptyText"} style={{
+        {!error && !body && <text className={"np-emptyText t3"} style={{
 		fontWeight: fontWeight.regular,
 		color: colors.fg.disabled
 	}}>
@@ -805,14 +794,14 @@ const NetworkPanel = ({ networks, clearNetworks }) => {
 	};
 	return <view className={"np-container"}>
       <view className={"np-header"}>
-        <text className={"np-count"} style={{
+        <text className={"np-count t3"} style={{
 		fontWeight: fontWeight.regular,
 		color: colors.fg.neutralSubtle
 	}}>
           Total: {networks.length} requests
         </text>
         <view className={"np-clearButton"} style={{ backgroundColor: colors.bg.neutralWeak }} bindtap={clearNetworks}>
-          <text className={"np-clearButtonText"} style={{
+          <text className={"np-clearButtonText t3"} style={{
 		fontWeight: fontWeight.medium,
 		color: colors.fg.neutralMuted
 	}}>
@@ -822,44 +811,44 @@ const NetworkPanel = ({ networks, clearNetworks }) => {
       </view>
 
       {networks.length === 0 ? <view className={"np-placeholder"}>
-          <text className={"np-placeholderText"} style={{
+          <text className={"np-placeholderText t4"} style={{
 		fontWeight: fontWeight.regular,
 		color: colors.fg.disabled
 	}}>
             No network requests yet
           </text>
-        </view> : <FadeList className={"np-list"}>
+        </view> : <list scroll-orientation="vertical" className={"np-list"}>
           {networks.map((network) => <list-item key={network.id} item-key={network.id}>
               <view className={"np-item"} style={{
 		backgroundColor: getItemBg(colors, network.status),
 		borderBottomColor: colors.stroke.neutralWeak
 	}}>
                 <view className={"np-itemHeader"} bindtap={() => setSelectedId(selectedId === network.id ? null : network.id)}>
-                  <text className={"np-method"} style={{
+                  <text className={"np-method t2"} style={{
 		fontWeight: fontWeight.bold,
 		...getMethodColors(colors, network.method)
 	}}>
                     {network.method}
                   </text>
-                  {network.statusCode && <text className={"np-statusCode"} style={{
+                  {network.statusCode && <text className={"np-statusCode t2"} style={{
 		fontWeight: fontWeight.bold,
 		color: getStatusCodeColor(colors, getStatusCodeVariant(network.status, network.statusCode))
 	}}>
                       {network.statusCode}
                     </text>}
-                  {network.status === "pending" && <text className={"np-statusCode"} style={{
+                  {network.status === "pending" && <text className={"np-statusCode t2"} style={{
 		fontWeight: fontWeight.bold,
 		color: colors.fg.neutralSubtle
 	}}>
                       Pending...
                     </text>}
-                  <text className={"np-time"} style={{
+                  <text className={"np-time t2"} style={{
 		fontWeight: fontWeight.regular,
 		color: colors.fg.neutralSubtle
 	}}>
                     {formatDuration(network.duration)}
                   </text>
-                  <text className={"np-time"} style={{
+                  <text className={"np-time t2"} style={{
 		fontWeight: fontWeight.regular,
 		color: colors.fg.neutralSubtle
 	}}>
@@ -867,7 +856,7 @@ const NetworkPanel = ({ networks, clearNetworks }) => {
                   </text>
                 </view>
 
-                <text className={"np-path"} style={{
+                <text className={"np-path t3"} style={{
 		fontWeight: fontWeight.regular,
 		color: colors.fg.neutral
 	}} bindtap={() => setSelectedId(selectedId === network.id ? null : network.id)}>
@@ -878,7 +867,7 @@ const NetworkPanel = ({ networks, clearNetworks }) => {
                     {}
                     <view className={"np-tabs"}>
                       <view className={"np-tab"} style={{ backgroundColor: activeTab === "general" ? colors.bg.neutralWeak : void 0 }} bindtap={() => setActiveTab("general")}>
-                        <text className={"np-tabText"} style={{
+                        <text className={"np-tabText t4"} style={{
 		fontWeight: fontWeight.medium,
 		color: activeTab === "general" ? colors.fg.neutral : colors.fg.neutralSubtle
 	}}>
@@ -886,7 +875,7 @@ const NetworkPanel = ({ networks, clearNetworks }) => {
                         </text>
                       </view>
                       <view className={"np-tab"} style={{ backgroundColor: activeTab === "request" ? colors.bg.neutralWeak : void 0 }} bindtap={() => setActiveTab("request")}>
-                        <text className={"np-tabText"} style={{
+                        <text className={"np-tabText t4"} style={{
 		fontWeight: fontWeight.medium,
 		color: activeTab === "request" ? colors.fg.neutral : colors.fg.neutralSubtle
 	}}>
@@ -894,7 +883,7 @@ const NetworkPanel = ({ networks, clearNetworks }) => {
                         </text>
                       </view>
                       <view className={"np-tab"} style={{ backgroundColor: activeTab === "response" ? colors.bg.neutralWeak : void 0 }} bindtap={() => setActiveTab("response")}>
-                        <text className={"np-tabText"} style={{
+                        <text className={"np-tabText t4"} style={{
 		fontWeight: fontWeight.medium,
 		color: activeTab === "response" ? colors.fg.neutral : colors.fg.neutralSubtle
 	}}>
@@ -907,13 +896,13 @@ const NetworkPanel = ({ networks, clearNetworks }) => {
                     <view className={"np-tabContent"}>
                       {activeTab === "general" && <view className={"np-table"}>
                           {getGeneralInfo(network).map((item) => <view key={item.key} className={"np-tableRow"} style={{ backgroundColor: colors.bg.neutralWeak }}>
-                              <text className={"np-tableKey"} style={{
+                              <text className={"np-tableKey t3"} style={{
 		fontWeight: fontWeight.bold,
 		color: colors.fg.neutralSubtle
 	}}>
                                 {item.key}
                               </text>
-                              <text className={"np-tableValue"} style={{
+                              <text className={"np-tableValue t3"} style={{
 		fontWeight: fontWeight.regular,
 		color: colors.fg.neutral
 	}}>
@@ -929,7 +918,7 @@ const NetworkPanel = ({ networks, clearNetworks }) => {
                   </view>}
               </view>
             </list-item>)}
-        </FadeList>}
+        </list>}
     </view>;
 };
 
@@ -989,14 +978,14 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
 	const [selectedId, setSelectedId] = (0, _lynx_js_react.useState)(null);
 	if (performances.length === 0) return <view className={"pp-container"}>
         <view className={"pp-header"} style={{ borderBottomColor: colors.stroke.neutralSubtle }}>
-          <text className={"pp-count"} style={{
+          <text className={"pp-count t3"} style={{
 		fontWeight: fontWeight.regular,
 		color: colors.fg.neutralSubtle
 	}}>
             0 entries
           </text>
           <view bindtap={clearPerformances} className={"pp-clearButton"} style={{ backgroundColor: colors.bg.neutralWeak }}>
-            <text className={"pp-clearButtonText"} style={{
+            <text className={"pp-clearButtonText t3"} style={{
 		fontWeight: fontWeight.medium,
 		color: colors.fg.neutralMuted
 	}}>
@@ -1005,7 +994,7 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
           </view>
         </view>
         <view className={"pp-placeholder"}>
-          <text className={"pp-placeholderText"} style={{
+          <text className={"pp-placeholderText t4"} style={{
 		fontWeight: fontWeight.regular,
 		color: colors.fg.disabled
 	}}>
@@ -1015,14 +1004,14 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
       </view>;
 	return <view className={"pp-container"}>
       <view className={"pp-header"} style={{ borderBottomColor: colors.stroke.neutralSubtle }}>
-        <text className={"pp-count"} style={{
+        <text className={"pp-count t3"} style={{
 		fontWeight: fontWeight.regular,
 		color: colors.fg.neutralSubtle
 	}}>
           {performances.length} entries
         </text>
         <view bindtap={clearPerformances} className={"pp-clearButton"} style={{ backgroundColor: colors.bg.neutralWeak }}>
-          <text className={"pp-clearButtonText"} style={{
+          <text className={"pp-clearButtonText t3"} style={{
 		fontWeight: fontWeight.medium,
 		color: colors.fg.neutralMuted
 	}}>
@@ -1031,7 +1020,7 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
         </view>
       </view>
 
-      <FadeList className={"pp-list"}>
+      <list scroll-orientation="vertical" className={"pp-list"}>
         {performances.map((perf) => {
 		const isMetricFcp = isMetricFcpEntry(perf);
 		const fcpMetrics = extractFcpMetrics(perf);
@@ -1040,19 +1029,19 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
 		return <list-item key={perf.id} item-key={perf.id}>
               <view className={"pp-item"} style={{ borderBottomColor: colors.stroke.neutralWeak }}>
                 <view className={"pp-itemHeader"} bindtap={() => setSelectedId(selectedId === perf.id ? null : perf.id)}>
-                  <text className={"pp-entryType"} style={{
+                  <text className={"pp-entryType t2"} style={{
 			fontWeight: fontWeight.bold,
 			...getEntryTypeColors(colors, perf.entryType)
 		}}>
                     {perf.entryType}
                   </text>
-                  <text className={"pp-entryName"} style={{
+                  <text className={"pp-entryName t2"} style={{
 			fontWeight: fontWeight.medium,
 			color: colors.fg.neutral
 		}}>
                     {perf.name}
                   </text>
-                  <text className={"pp-timestamp"} style={{
+                  <text className={"pp-timestamp t2"} style={{
 			fontWeight: fontWeight.regular,
 			color: colors.fg.neutralSubtle
 		}}>
@@ -1061,7 +1050,7 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
                 </view>
 
                 <view bindtap={() => setSelectedId(selectedId === perf.id ? null : perf.id)}>
-                  {isMetricFcp && primaryFcp && <text className={"pp-fcpHighlight"} style={{
+                  {isMetricFcp && primaryFcp && <text className={"pp-fcpHighlight t3"} style={{
 			fontWeight: fontWeight.bold,
 			color: colors.palette.blue600,
 			backgroundColor: colors.palette.blue100
@@ -1074,20 +1063,20 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
                     {isMetricFcp && fcpMetrics && <view className={"pp-fcpSection"}>
                         {totalFcp !== void 0 && <view className={"pp-fcpMetric"} style={{ backgroundColor: colors.bg.layerDefault }}>
                             <view className={"pp-fcpMetricHeader"}>
-                              <text className={"pp-fcpMetricName"} style={{
+                              <text className={"pp-fcpMetricName t2"} style={{
 			fontWeight: fontWeight.bold,
 			color: colors.fg.neutral
 		}}>
                                 전체 FCP
                               </text>
-                              <text className={"pp-fcpMetricValue"} style={{
+                              <text className={"pp-fcpMetricValue t1"} style={{
 			fontWeight: fontWeight.bold,
 			color: colors.palette.blue600
 		}}>
                                 {formatDuration(totalFcp.duration)}
                               </text>
                             </view>
-                            <text className={"pp-fcpMetricDescription"} style={{
+                            <text className={"pp-fcpMetricDescription t3"} style={{
 			fontWeight: fontWeight.regular,
 			color: colors.fg.neutralSubtle
 		}}>
@@ -1098,20 +1087,20 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
 
                         {lynxFcp !== void 0 && <view className={"pp-fcpMetric"} style={{ backgroundColor: colors.bg.layerDefault }}>
                             <view className={"pp-fcpMetricHeader"}>
-                              <text className={"pp-fcpMetricName"} style={{
+                              <text className={"pp-fcpMetricName t2"} style={{
 			fontWeight: fontWeight.bold,
 			color: colors.fg.neutral
 		}}>
                                 LynxFCP
                               </text>
-                              <text className={"pp-fcpMetricValue"} style={{
+                              <text className={"pp-fcpMetricValue t1"} style={{
 			fontWeight: fontWeight.bold,
 			color: colors.palette.blue600
 		}}>
                                 {formatDuration(lynxFcp.duration)}
                               </text>
                             </view>
-                            <text className={"pp-fcpMetricDescription"} style={{
+                            <text className={"pp-fcpMetricDescription t3"} style={{
 			fontWeight: fontWeight.regular,
 			color: colors.fg.neutralSubtle
 		}}>
@@ -1121,20 +1110,20 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
 
                         {fcp !== void 0 && <view className={"pp-fcpMetric"} style={{ backgroundColor: colors.bg.layerDefault }}>
                             <view className={"pp-fcpMetricHeader"}>
-                              <text className={"pp-fcpMetricName"} style={{
+                              <text className={"pp-fcpMetricName t2"} style={{
 			fontWeight: fontWeight.bold,
 			color: colors.fg.neutral
 		}}>
                                 렌더링 FCP
                               </text>
-                              <text className={"pp-fcpMetricValue"} style={{
+                              <text className={"pp-fcpMetricValue t1"} style={{
 			fontWeight: fontWeight.bold,
 			color: colors.palette.blue600
 		}}>
                                 {formatDuration(fcp.duration)}
                               </text>
                             </view>
-                            <text className={"pp-fcpMetricDescription"} style={{
+                            <text className={"pp-fcpMetricDescription t3"} style={{
 			fontWeight: fontWeight.regular,
 			color: colors.fg.neutralSubtle
 		}}>
@@ -1144,13 +1133,13 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
                       </view>}
 
                     {!!perf.rawEntry && <view className={"pp-rawEntrySection"} style={{ backgroundColor: colors.bg.neutralWeak }}>
-                        <text className={"pp-detailTitle"} style={{
+                        <text className={"pp-detailTitle t3"} style={{
 			fontWeight: fontWeight.bold,
 			color: colors.fg.neutral
 		}}>
                           Raw Entry
                         </text>
-                        <text className={"pp-rawEntry"} style={{
+                        <text className={"pp-rawEntry t3"} style={{
 			fontWeight: fontWeight.regular,
 			color: colors.fg.neutralSubtle
 		}}>
@@ -1161,7 +1150,7 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
               </view>
             </list-item>;
 	})}
-      </FadeList>
+      </list>
     </view>;
 };
 
@@ -1185,7 +1174,7 @@ function Tabs(props) {
 			}
 		}).exec();
 	}}>
-            <text className={`tabs-triggerButtonText${tabSize ? ` tabs-triggerButtonText--${tabSize}` : ""}`} style={{
+            <text className={`tabs-triggerButtonText${tabSize ? ` ${tabSize}` : ""}`} style={{
 		fontWeight: fontWeight.bold,
 		color: i === activeIndex ? colors.fg.neutral : colors.fg.neutralSubtle
 	}}>
@@ -1352,24 +1341,22 @@ const FloatingButton = ({ bindtap, children }) => {
 		}
 	};
 	const isDragging = phase === "dragging";
-	return <>
-      <view className={"fb-wrapper"} consume-slide-event={[[-180, 180]]} style={{
+	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-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}>
-          <text className={"fb-reloadIcon"} style={{ color: colors.palette.staticWhite }}>
-            {"↻"}
-          </text>
-        </view>
+      <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}>
+        <text className={"fb-reloadIcon"} style={{ color: colors.palette.staticWhite }}>
+          {"↻"}
+        </text>
+      </view>
+    </view>;
 };
 
 //#endregion
@@ -1413,11 +1400,13 @@ const LynxConsole = (0, _lynx_js_react.forwardRef)(({ theme = "light", safeAreaI
 		color: colors.fg.neutral
 	}}>
           <FloatingButton bindtap={handleOpenBottomSheet}>
-            <text className="fb-title" style={{
+            <text className="fb-title t4" style={{
 		fontWeight: "400",
 		color: colors.palette.staticWhite
-	}}>LynxConsole</text>
-            <text className="fb-subtitle" style={{
+	}}>
+              LynxConsole
+            </text>
+            <text className="fb-subtitle t3" style={{
 		fontWeight: "400",
 		color: colors.palette.staticWhite
 	}}>