lynx-console 0.2.2 → 0.3.0

package/dist/index.mjs

@@ -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 = 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 = [
@@ -431,7 +421,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 +429,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 +444,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 +465,13 @@ const LogPanel = ({ logs, clearLogs }) => {
 			else jsonString = 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 +479,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 +488,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 +501,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 +513,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 +529,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 +547,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 +561,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 +570,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 +587,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 +608,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 +640,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 +648,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 +671,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 +795,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 +812,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 +857,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 +868,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 +876,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 +884,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 +897,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 +919,7 @@ const NetworkPanel = ({ networks, clearNetworks }) => {
                   </view>}
               </view>
             </list-item>)}
-        </FadeList>}
+        </list>}
     </view>;
 };
 
@@ -989,22 +979,14 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
 	const [selectedId, setSelectedId] = 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={() => {
-		console.log("[PerformancePanel] performances", performances);
-	}} style={{
-		padding: "10px",
-		backgroundColor: "red"
-	}}>
-            <text>Log</text>
-          </view>
           <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
 	}}>
@@ -1013,7 +995,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
 	}}>
@@ -1023,14 +1005,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
 	}}>
@@ -1039,7 +1021,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);
@@ -1048,19 +1030,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
 		}}>
@@ -1069,7 +1051,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
@@ -1082,20 +1064,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
 		}}>
@@ -1106,20 +1088,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
 		}}>
@@ -1129,20 +1111,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
 		}}>
@@ -1152,13 +1134,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
 		}}>
@@ -1169,7 +1151,7 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
               </view>
             </list-item>;
 	})}
-      </FadeList>
+      </list>
     </view>;
 };
 
@@ -1193,7 +1175,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
 	}}>
@@ -1360,24 +1342,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
@@ -1421,11 +1401,13 @@ const LynxConsole = forwardRef(({ theme = "light", safeAreaInsetBottom = "50px",
 		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
 	}}>