lynx-console 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -1,49 +1,14 @@
 import "./index.css";
-//#region \0rolldown/runtime.js
-var __defProp = Object.defineProperty;
-var __exportAll = (all, no_symbols) => {
-	let target = {};
-	for (var name in all) {
-		__defProp(target, name, {
-			get: all[name],
-			enumerable: true
-		});
-	}
-	if (!no_symbols) {
-		__defProp(target, Symbol.toStringTag, { value: "Module" });
-	}
-	return target;
-};
-
-//#endregion
 let _lynx_js_react = require("@lynx-js/react");
-require("./assets/src/components/BottomSheet.css.ts.vanilla-CulwSDhG.css");
-require("./assets/src/components/ConsolePanel.css.ts.vanilla-DFvHPEyg.css");
 let javascript_stringify = require("javascript-stringify");
-require("./assets/src/components/NetworkPanel.css.ts.vanilla-DFMduT0T.css");
-require("./assets/src/components/PerformancePanel.css.ts.vanilla-D35LuXlW.css");
-require("./assets/src/components/Tabs.css.ts.vanilla-DD7L2oXt.css");
-require("./assets/src/components/FloatingButton.css.ts.vanilla-BaG0OI6p.css");
-
-//#region src/components/BottomSheet.css.ts
-var backdrop = "BottomSheet_backdrop__5pjw6y1";
-var body = "BottomSheet_body__5pjw6y7";
-var content = "BottomSheet_content__5pjw6y2";
-var footer = "BottomSheet_footer__5pjw6y8";
-var handle = "BottomSheet_handle__5pjw6y4";
-var handleContainer = "BottomSheet_handleContainer__5pjw6y3";
-var header$2 = "BottomSheet_header__5pjw6y5";
-var overlay = "BottomSheet_overlay__5pjw6y0";
-var title$1 = "BottomSheet_title__5pjw6y6";
 
-//#endregion
 //#region src/components/BottomSheet.tsx
 const MIN_HEIGHT = 200;
 const MAX_HEIGHT = 700;
 const DEFAULT_HEIGHT = 500;
 const CLOSE_DRAG_THRESHOLD = 30;
 let savedHeight = null;
-function BottomSheet({ children, title, footer: footer$1, onClose, isOpen, shouldClose = false, safeAreaInsetBottom = "25px" }) {
+function BottomSheet({ children, title, footer, onClose, isOpen, shouldClose = false, safeAreaInsetBottom = "25px" }) {
 	const [sheetHeight, setSheetHeight] = (0, _lynx_js_react.useState)(savedHeight ?? DEFAULT_HEIGHT);
 	const [tempHeight, setTempHeight] = (0, _lynx_js_react.useState)(savedHeight ?? DEFAULT_HEIGHT);
 	const [isDragging, setIsDragging] = (0, _lynx_js_react.useState)(false);
@@ -86,24 +51,24 @@ function BottomSheet({ children, title, footer: footer$1, onClose, isOpen, shoul
 		setSheetHeight(tempHeight);
 		if (dragDistance > CLOSE_DRAG_THRESHOLD) handleClose();
 	};
-	return <scroll-view className={backdrop} style={{ opacity: isOpening || isClosing ? 0 : 1 }}>
-      <view className={overlay} bindtap={handleClose}>
-        <view className={content} catchtap={() => {}} style={{
+	return <scroll-view className="bs-backdrop" style={{ opacity: isOpening || isClosing ? 0 : 1 }}>
+      <view className="bs-overlay" bindtap={handleClose}>
+        <view className="bs-content" catchtap={() => {}} style={{
 		height: `${isDragging ? tempHeight : sheetHeight}px`,
 		transform: isOpening || isClosing ? "translateY(100%)" : "translateY(0)",
 		transition: isDragging ? "none" : void 0
 	}}>
           {}
-          <view className={handleContainer} bindtouchstart={handleTouchStart} bindtouchmove={handleTouchMove} bindtouchend={handleTouchEnd}>
-            <view className={handle} />
+          <view className="bs-handleContainer" bindtouchstart={handleTouchStart} bindtouchmove={handleTouchMove} bindtouchend={handleTouchEnd}>
+            <view className="bs-handle" />
           </view>
-          <view className={header$2}>
-            {title && <text className={title$1}>{title}</text>}
+          <view className="bs-header">
+            {title && <text className="bs-title">{title}</text>}
           </view>
-          <view className={body} style={{ paddingBottom: safeAreaInsetBottom }}>
+          <view className="bs-body" style={{ paddingBottom: safeAreaInsetBottom }}>
             {children}
           </view>
-          {footer$1 && <view className={footer}>{footer$1}</view>}
+          {footer && <view className="bs-footer">{footer}</view>}
         </view>
       </view>
     </scroll-view>;
@@ -198,584 +163,13 @@ const usePerformance = () => {
 };
 
 //#endregion
-//#region ../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js
-function toPrimitive(t, r) {
-	if ("object" != typeof t || !t) return t;
-	var e = t[Symbol.toPrimitive];
-	if (void 0 !== e) {
-		var i = e.call(t, r || "default");
-		if ("object" != typeof i) return i;
-		throw new TypeError("@@toPrimitive must return a primitive value.");
-	}
-	return ("string" === r ? String : Number)(t);
-}
-function toPropertyKey(t) {
-	var i = toPrimitive(t, "string");
-	return "symbol" == typeof i ? i : String(i);
-}
-function _defineProperty(obj, key, value) {
-	key = toPropertyKey(key);
-	if (key in obj) Object.defineProperty(obj, key, {
-		value,
-		enumerable: true,
-		configurable: true,
-		writable: true
-	});
-	else obj[key] = value;
-	return obj;
-}
-function ownKeys(e, r) {
-	var t = Object.keys(e);
-	if (Object.getOwnPropertySymbols) {
-		var o = Object.getOwnPropertySymbols(e);
-		r && (o = o.filter(function(r) {
-			return Object.getOwnPropertyDescriptor(e, r).enumerable;
-		})), t.push.apply(t, o);
-	}
-	return t;
-}
-function _objectSpread2(e) {
-	for (var r = 1; r < arguments.length; r++) {
-		var t = null != arguments[r] ? arguments[r] : {};
-		r % 2 ? ownKeys(Object(t), !0).forEach(function(r) {
-			_defineProperty(e, r, t[r]);
-		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r) {
-			Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
-		});
-	}
-	return e;
-}
-function mapValues(input, fn) {
-	var result = {};
-	for (var _key in input) result[_key] = fn(input[_key], _key);
-	return result;
-}
-var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
-	for (var key of Object.keys(compoundCheck)) {
-		var _selections$key;
-		if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) return false;
-	}
-	return true;
-};
-var createRuntimeFn = (config) => {
-	var runtimeFn = (options) => {
-		var className = config.defaultClassName;
-		var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
-		for (var variantName in selections) {
-			var _selections$variantNa;
-			var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
-			if (variantSelection != null) {
-				var selection = variantSelection;
-				if (typeof selection === "boolean") selection = selection === true ? "true" : "false";
-				var selectionClassName = config.variantClassNames[variantName][selection];
-				if (selectionClassName) className += " " + selectionClassName;
-			}
-		}
-		for (var [compoundCheck, compoundClassName] of config.compoundVariants) if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) className += " " + compoundClassName;
-		return className;
-	};
-	runtimeFn.variants = () => Object.keys(config.variantClassNames);
-	runtimeFn.classNames = {
-		get base() {
-			return config.defaultClassName.split(" ")[0];
-		},
-		get variants() {
-			return mapValues(config.variantClassNames, (classNames) => mapValues(classNames, (className) => className.split(" ")[0]));
-		}
-	};
-	return runtimeFn;
-};
-
-//#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 argPrimitive = createRuntimeFn({
-	defaultClassName: "ConsolePanel_argPrimitive__db6kuu1e",
-	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"
-	} },
-	defaultVariants: {},
-	compoundVariants: []
-});
-var argString = createRuntimeFn({
-	defaultClassName: "ConsolePanel_argString__db6kuu19",
-	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"
-	} },
-	defaultVariants: {},
-	compoundVariants: []
-});
-var argUndefined = "ConsolePanel_argUndefined__db6kuu18";
-var clearButton$2 = "ConsolePanel_clearButton__db6kuuo";
-var clearButtonText$2 = "ConsolePanel_clearButtonText__db6kuup";
-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 filterCheckbox = createRuntimeFn({
-	defaultClassName: "ConsolePanel_filterCheckbox__db6kuub",
-	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"
-	} },
-	defaultVariants: {},
-	compoundVariants: []
-});
-var filterDropdown = "ConsolePanel_filterDropdown__db6kuu9";
-var filterLabel = createRuntimeFn({
-	defaultClassName: "ConsolePanel_filterLabel__db6kuug",
-	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"
-	} },
-	defaultVariants: {},
-	compoundVariants: []
-});
-var filterOption = "ConsolePanel_filterOption__db6kuua";
-var filterWrapper = "ConsolePanel_filterWrapper__db6kuu6";
-var logArgItem = "ConsolePanel_logArgItem__db6kuu16";
-var logArgsContainer = "ConsolePanel_logArgsContainer__db6kuu15";
-var logContainer = "ConsolePanel_logContainer__db6kuu3";
-var logHeader = "ConsolePanel_logHeader__db6kuu4";
-var logItem = createRuntimeFn({
-	defaultClassName: "ConsolePanel_logItem__db6kuur",
-	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"
-	} },
-	defaultVariants: {},
-	compoundVariants: []
-});
-var logItemHeader = "ConsolePanel_logItemHeader__db6kuuw";
-var logLevel = createRuntimeFn({
-	defaultClassName: "ConsolePanel_logLevel__db6kuux",
-	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"
-	} },
-	defaultVariants: {},
-	compoundVariants: []
-});
-var logList = "ConsolePanel_logList__db6kuuq";
-var logTime = "ConsolePanel_logTime__db6kuu12";
-var placeholder$2 = "ConsolePanel_placeholder__db6kuu1";
-var placeholderText$2 = "ConsolePanel_placeholderText__db6kuu2";
-var replInput = "ConsolePanel_replInput__db6kuu1t";
-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";
-
-//#endregion
-//#region src/styles/vars/color.ts
-var color_exports = /* @__PURE__ */ __exportAll({
-	bg: () => bg,
-	fg: () => fg,
-	mannerTemp: () => mannerTemp,
-	palette: () => palette,
-	stroke: () => stroke
-});
-const palette = {
-	blue100: "var(--seed-color-palette-blue-100)",
-	blue200: "var(--seed-color-palette-blue-200)",
-	blue300: "var(--seed-color-palette-blue-300)",
-	blue400: "var(--seed-color-palette-blue-400)",
-	blue500: "var(--seed-color-palette-blue-500)",
-	blue600: "var(--seed-color-palette-blue-600)",
-	blue700: "var(--seed-color-palette-blue-700)",
-	blue800: "var(--seed-color-palette-blue-800)",
-	blue900: "var(--seed-color-palette-blue-900)",
-	blue1000: "var(--seed-color-palette-blue-1000)",
-	carrot100: "var(--seed-color-palette-carrot-100)",
-	carrot200: "var(--seed-color-palette-carrot-200)",
-	carrot300: "var(--seed-color-palette-carrot-300)",
-	carrot400: "var(--seed-color-palette-carrot-400)",
-	carrot500: "var(--seed-color-palette-carrot-500)",
-	carrot600: "var(--seed-color-palette-carrot-600)",
-	carrot700: "var(--seed-color-palette-carrot-700)",
-	carrot800: "var(--seed-color-palette-carrot-800)",
-	carrot900: "var(--seed-color-palette-carrot-900)",
-	carrot1000: "var(--seed-color-palette-carrot-1000)",
-	gray00: "var(--seed-color-palette-gray-00)",
-	gray100: "var(--seed-color-palette-gray-100)",
-	gray200: "var(--seed-color-palette-gray-200)",
-	gray300: "var(--seed-color-palette-gray-300)",
-	gray400: "var(--seed-color-palette-gray-400)",
-	gray500: "var(--seed-color-palette-gray-500)",
-	gray600: "var(--seed-color-palette-gray-600)",
-	gray700: "var(--seed-color-palette-gray-700)",
-	gray800: "var(--seed-color-palette-gray-800)",
-	gray900: "var(--seed-color-palette-gray-900)",
-	gray1000: "var(--seed-color-palette-gray-1000)",
-	green100: "var(--seed-color-palette-green-100)",
-	green200: "var(--seed-color-palette-green-200)",
-	green300: "var(--seed-color-palette-green-300)",
-	green400: "var(--seed-color-palette-green-400)",
-	green500: "var(--seed-color-palette-green-500)",
-	green600: "var(--seed-color-palette-green-600)",
-	green700: "var(--seed-color-palette-green-700)",
-	green800: "var(--seed-color-palette-green-800)",
-	green900: "var(--seed-color-palette-green-900)",
-	green1000: "var(--seed-color-palette-green-1000)",
-	purple100: "var(--seed-color-palette-purple-100)",
-	purple200: "var(--seed-color-palette-purple-200)",
-	purple300: "var(--seed-color-palette-purple-300)",
-	purple400: "var(--seed-color-palette-purple-400)",
-	purple500: "var(--seed-color-palette-purple-500)",
-	purple600: "var(--seed-color-palette-purple-600)",
-	purple700: "var(--seed-color-palette-purple-700)",
-	purple800: "var(--seed-color-palette-purple-800)",
-	purple900: "var(--seed-color-palette-purple-900)",
-	purple1000: "var(--seed-color-palette-purple-1000)",
-	red100: "var(--seed-color-palette-red-100)",
-	red200: "var(--seed-color-palette-red-200)",
-	red300: "var(--seed-color-palette-red-300)",
-	red400: "var(--seed-color-palette-red-400)",
-	red500: "var(--seed-color-palette-red-500)",
-	red600: "var(--seed-color-palette-red-600)",
-	red700: "var(--seed-color-palette-red-700)",
-	red800: "var(--seed-color-palette-red-800)",
-	red900: "var(--seed-color-palette-red-900)",
-	red1000: "var(--seed-color-palette-red-1000)",
-	staticBlack: "var(--seed-color-palette-static-black)",
-	staticWhite: "var(--seed-color-palette-static-white)",
-	staticBlackAlpha100: "var(--seed-color-palette-static-black-alpha-100)",
-	staticBlackAlpha200: "var(--seed-color-palette-static-black-alpha-200)",
-	staticBlackAlpha300: "var(--seed-color-palette-static-black-alpha-300)",
-	staticBlackAlpha400: "var(--seed-color-palette-static-black-alpha-400)",
-	staticBlackAlpha500: "var(--seed-color-palette-static-black-alpha-500)",
-	staticBlackAlpha600: "var(--seed-color-palette-static-black-alpha-600)",
-	staticBlackAlpha700: "var(--seed-color-palette-static-black-alpha-700)",
-	staticBlackAlpha800: "var(--seed-color-palette-static-black-alpha-800)",
-	staticBlackAlpha900: "var(--seed-color-palette-static-black-alpha-900)",
-	staticBlackAlpha1000: "var(--seed-color-palette-static-black-alpha-1000)",
-	staticWhiteAlpha50: "var(--seed-color-palette-static-white-alpha-50)",
-	staticWhiteAlpha100: "var(--seed-color-palette-static-white-alpha-100)",
-	staticWhiteAlpha200: "var(--seed-color-palette-static-white-alpha-200)",
-	staticWhiteAlpha300: "var(--seed-color-palette-static-white-alpha-300)",
-	staticWhiteAlpha400: "var(--seed-color-palette-static-white-alpha-400)",
-	staticWhiteAlpha500: "var(--seed-color-palette-static-white-alpha-500)",
-	staticWhiteAlpha600: "var(--seed-color-palette-static-white-alpha-600)",
-	staticWhiteAlpha700: "var(--seed-color-palette-static-white-alpha-700)",
-	staticWhiteAlpha800: "var(--seed-color-palette-static-white-alpha-800)",
-	staticWhiteAlpha900: "var(--seed-color-palette-static-white-alpha-900)",
-	staticWhiteAlpha1000: "var(--seed-color-palette-static-white-alpha-1000)",
-	yellow100: "var(--seed-color-palette-yellow-100)",
-	yellow200: "var(--seed-color-palette-yellow-200)",
-	yellow300: "var(--seed-color-palette-yellow-300)",
-	yellow400: "var(--seed-color-palette-yellow-400)",
-	yellow500: "var(--seed-color-palette-yellow-500)",
-	yellow600: "var(--seed-color-palette-yellow-600)",
-	yellow700: "var(--seed-color-palette-yellow-700)",
-	yellow800: "var(--seed-color-palette-yellow-800)",
-	yellow900: "var(--seed-color-palette-yellow-900)",
-	yellow1000: "var(--seed-color-palette-yellow-1000)"
-};
-const fg = {
-	neutral: "var(--seed-color-fg-neutral)",
-	placeholder: "var(--seed-color-fg-placeholder)",
-	disabled: "var(--seed-color-fg-disabled)",
-	brand: "var(--seed-color-fg-brand)",
-	informative: "var(--seed-color-fg-informative)",
-	critical: "var(--seed-color-fg-critical)",
-	positive: "var(--seed-color-fg-positive)",
-	warning: "var(--seed-color-fg-warning)",
-	brandContrast: "var(--seed-color-fg-brand-contrast)",
-	criticalContrast: "var(--seed-color-fg-critical-contrast)",
-	informativeContrast: "var(--seed-color-fg-informative-contrast)",
-	neutralMuted: "var(--seed-color-fg-neutral-muted)",
-	neutralSubtle: "var(--seed-color-fg-neutral-subtle)",
-	neutralInverted: "var(--seed-color-fg-neutral-inverted)",
-	positiveContrast: "var(--seed-color-fg-positive-contrast)",
-	warningContrast: "var(--seed-color-fg-warning-contrast)"
-};
-const bg = {
-	overlay: "var(--seed-color-bg-overlay)",
-	disabled: "var(--seed-color-bg-disabled)",
-	brandWeak: "var(--seed-color-bg-brand-weak)",
-	brandSolid: "var(--seed-color-bg-brand-solid)",
-	brandSolidPressed: "var(--seed-color-bg-brand-solid-pressed)",
-	brandWeakPressed: "var(--seed-color-bg-brand-weak-pressed)",
-	criticalWeak: "var(--seed-color-bg-critical-weak)",
-	criticalSolid: "var(--seed-color-bg-critical-solid)",
-	criticalSolidPressed: "var(--seed-color-bg-critical-solid-pressed)",
-	criticalWeakPressed: "var(--seed-color-bg-critical-weak-pressed)",
-	informativeWeak: "var(--seed-color-bg-informative-weak)",
-	informativeSolid: "var(--seed-color-bg-informative-solid)",
-	informativeSolidPressed: "var(--seed-color-bg-informative-solid-pressed)",
-	informativeWeakPressed: "var(--seed-color-bg-informative-weak-pressed)",
-	layerBasement: "var(--seed-color-bg-layer-basement)",
-	layerDefault: "var(--seed-color-bg-layer-default)",
-	layerFill: "var(--seed-color-bg-layer-fill)",
-	layerFloating: "var(--seed-color-bg-layer-floating)",
-	layerDefaultPressed: "var(--seed-color-bg-layer-default-pressed)",
-	layerFloatingPressed: "var(--seed-color-bg-layer-floating-pressed)",
-	magicWeak: "var(--seed-color-bg-magic-weak)",
-	neutralWeak: "var(--seed-color-bg-neutral-weak)",
-	neutralInverted: "var(--seed-color-bg-neutral-inverted)",
-	neutralSolid: "var(--seed-color-bg-neutral-solid)",
-	neutralInvertedPressed: "var(--seed-color-bg-neutral-inverted-pressed)",
-	neutralSolidMuted: "var(--seed-color-bg-neutral-solid-muted)",
-	neutralSolidMutedPressed: "var(--seed-color-bg-neutral-solid-muted-pressed)",
-	neutralWeakPressed: "var(--seed-color-bg-neutral-weak-pressed)",
-	overlayMuted: "var(--seed-color-bg-overlay-muted)",
-	positiveWeak: "var(--seed-color-bg-positive-weak)",
-	positiveSolid: "var(--seed-color-bg-positive-solid)",
-	positiveSolidPressed: "var(--seed-color-bg-positive-solid-pressed)",
-	positiveWeakPressed: "var(--seed-color-bg-positive-weak-pressed)",
-	warningWeak: "var(--seed-color-bg-warning-weak)",
-	warningSolid: "var(--seed-color-bg-warning-solid)",
-	warningSolidPressed: "var(--seed-color-bg-warning-solid-pressed)",
-	warningWeakPressed: "var(--seed-color-bg-warning-weak-pressed)"
-};
-const stroke = {
-	brandWeak: "var(--seed-color-stroke-brand-weak)",
-	brandSolid: "var(--seed-color-stroke-brand-solid)",
-	criticalWeak: "var(--seed-color-stroke-critical-weak)",
-	criticalSolid: "var(--seed-color-stroke-critical-solid)",
-	informativeWeak: "var(--seed-color-stroke-informative-weak)",
-	informativeSolid: "var(--seed-color-stroke-informative-solid)",
-	neutralContrast: "var(--seed-color-stroke-neutral-contrast)",
-	neutralSolid: "var(--seed-color-stroke-neutral-solid)",
-	neutralWeak: "var(--seed-color-stroke-neutral-weak)",
-	neutralMuted: "var(--seed-color-stroke-neutral-muted)",
-	neutralSubtle: "var(--seed-color-stroke-neutral-subtle)",
-	positiveWeak: "var(--seed-color-stroke-positive-weak)",
-	positiveSolid: "var(--seed-color-stroke-positive-solid)",
-	warningWeak: "var(--seed-color-stroke-warning-weak)",
-	warningSolid: "var(--seed-color-stroke-warning-solid)"
-};
-const mannerTemp = {
-	l1: {
-		text: "var(--seed-color-manner-temp-l1-text)",
-		bg: "var(--seed-color-manner-temp-l1-bg)"
-	},
-	l2: {
-		text: "var(--seed-color-manner-temp-l2-text)",
-		bg: "var(--seed-color-manner-temp-l2-bg)"
-	},
-	l3: {
-		text: "var(--seed-color-manner-temp-l3-text)",
-		bg: "var(--seed-color-manner-temp-l3-bg)"
-	},
-	l4: {
-		text: "var(--seed-color-manner-temp-l4-text)",
-		bg: "var(--seed-color-manner-temp-l4-bg)"
-	},
-	l5: {
-		text: "var(--seed-color-manner-temp-l5-text)",
-		bg: "var(--seed-color-manner-temp-l5-bg)"
-	},
-	l6: {
-		text: "var(--seed-color-manner-temp-l6-text)",
-		bg: "var(--seed-color-manner-temp-l6-bg)"
-	},
-	l7: {
-		text: "var(--seed-color-manner-temp-l7-text)",
-		bg: "var(--seed-color-manner-temp-l7-bg)"
-	},
-	l8: {
-		text: "var(--seed-color-manner-temp-l8-text)",
-		bg: "var(--seed-color-manner-temp-l8-bg)"
-	},
-	l9: {
-		text: "var(--seed-color-manner-temp-l9-text)",
-		bg: "var(--seed-color-manner-temp-l9-bg)"
-	},
-	l10: {
-		text: "var(--seed-color-manner-temp-l10-text)",
-		bg: "var(--seed-color-manner-temp-l10-bg)"
-	}
-};
-
-//#endregion
-//#region src/styles/vars/dimension.ts
-var dimension_exports = /* @__PURE__ */ __exportAll({
-	lineHeight: () => lineHeight,
-	spacingX: () => spacingX,
-	spacingY: () => spacingY,
-	t1: () => t1,
-	t10: () => t10,
-	t10Static: () => t10Static,
-	t1Static: () => t1Static,
-	t2: () => t2,
-	t2Static: () => t2Static,
-	t3: () => t3,
-	t3Static: () => t3Static,
-	t4: () => t4,
-	t4Static: () => t4Static,
-	t5: () => t5,
-	t5Static: () => t5Static,
-	t6: () => t6,
-	t6Static: () => t6Static,
-	t7: () => t7,
-	t7Static: () => t7Static,
-	t8: () => t8,
-	t8Static: () => t8Static,
-	t9: () => t9,
-	t9Static: () => t9Static,
-	x0_5: () => x0_5,
-	x1: () => x1,
-	x10: () => x10,
-	x12: () => x12,
-	x13: () => x13,
-	x14: () => x14,
-	x16: () => x16,
-	x1_5: () => x1_5,
-	x2: () => x2,
-	x2_5: () => x2_5,
-	x3: () => x3,
-	x3_5: () => x3_5,
-	x4: () => x4,
-	x4_5: () => x4_5,
-	x5: () => x5,
-	x6: () => x6,
-	x7: () => x7,
-	x8: () => x8,
-	x9: () => x9
-});
-const x0_5 = "var(--seed-dimension-x0_5)";
-const x1 = "var(--seed-dimension-x1)";
-const x1_5 = "var(--seed-dimension-x1_5)";
-const x2 = "var(--seed-dimension-x2)";
-const x2_5 = "var(--seed-dimension-x2_5)";
-const x3 = "var(--seed-dimension-x3)";
-const x3_5 = "var(--seed-dimension-x3_5)";
-const x4 = "var(--seed-dimension-x4)";
-const x4_5 = "var(--seed-dimension-x4_5)";
-const x5 = "var(--seed-dimension-x5)";
-const x6 = "var(--seed-dimension-x6)";
-const x7 = "var(--seed-dimension-x7)";
-const x8 = "var(--seed-dimension-x8)";
-const x9 = "var(--seed-dimension-x9)";
-const x10 = "var(--seed-dimension-x10)";
-const x12 = "var(--seed-dimension-x12)";
-const x13 = "var(--seed-dimension-x13)";
-const x14 = "var(--seed-dimension-x14)";
-const x16 = "var(--seed-dimension-x16)";
-const spacingX = {
-	betweenChips: "var(--seed-dimension-spacing-x-between-chips)",
-	globalGutter: "var(--seed-dimension-spacing-x-global-gutter)"
-};
-const spacingY = {
-	componentDefault: "var(--seed-dimension-spacing-y-component-default)",
-	navToTitle: "var(--seed-dimension-spacing-y-nav-to-title)",
-	screenBottom: "var(--seed-dimension-spacing-y-screen-bottom)",
-	betweenText: "var(--seed-dimension-spacing-y-between-text)"
-};
-const t1 = "var(--seed-font-size-t1)";
-const t2 = "var(--seed-font-size-t2)";
-const t3 = "var(--seed-font-size-t3)";
-const t4 = "var(--seed-font-size-t4)";
-const t5 = "var(--seed-font-size-t5)";
-const t6 = "var(--seed-font-size-t6)";
-const t7 = "var(--seed-font-size-t7)";
-const t8 = "var(--seed-font-size-t8)";
-const t9 = "var(--seed-font-size-t9)";
-const t10 = "var(--seed-font-size-t10)";
-const t1Static = "var(--seed-font-size-t1-static)";
-const t2Static = "var(--seed-font-size-t2-static)";
-const t3Static = "var(--seed-font-size-t3-static)";
-const t4Static = "var(--seed-font-size-t4-static)";
-const t5Static = "var(--seed-font-size-t5-static)";
-const t6Static = "var(--seed-font-size-t6-static)";
-const t7Static = "var(--seed-font-size-t7-static)";
-const t8Static = "var(--seed-font-size-t8-static)";
-const t9Static = "var(--seed-font-size-t9-static)";
-const t10Static = "var(--seed-font-size-t10-static)";
-const lineHeight = {
-	t1: "var(--seed-line-height-t1)",
-	t2: "var(--seed-line-height-t2)",
-	t3: "var(--seed-line-height-t3)",
-	t4: "var(--seed-line-height-t4)",
-	t5: "var(--seed-line-height-t5)",
-	t6: "var(--seed-line-height-t6)",
-	t7: "var(--seed-line-height-t7)",
-	t8: "var(--seed-line-height-t8)",
-	t9: "var(--seed-line-height-t9)",
-	t10: "var(--seed-line-height-t10)",
-	t1Static: "var(--seed-line-height-t1-static)",
-	t2Static: "var(--seed-line-height-t2-static)",
-	t3Static: "var(--seed-line-height-t3-static)",
-	t4Static: "var(--seed-line-height-t4-static)",
-	t5Static: "var(--seed-line-height-t5-static)",
-	t6Static: "var(--seed-line-height-t6-static)",
-	t7Static: "var(--seed-line-height-t7-static)",
-	t8Static: "var(--seed-line-height-t8-static)",
-	t9Static: "var(--seed-line-height-t9-static)",
-	t10Static: "var(--seed-line-height-t10-static)"
-};
-
-//#endregion
-//#region src/styles/vars/radius.ts
-var radius_exports = /* @__PURE__ */ __exportAll({
-	full: () => full,
-	r0_5: () => r0_5,
-	r1: () => r1,
-	r1_5: () => r1_5,
-	r2: () => r2,
-	r2_5: () => r2_5,
-	r3: () => r3,
-	r3_5: () => r3_5,
-	r4: () => r4,
-	r5: () => r5,
-	r6: () => r6
-});
-const r0_5 = "var(--seed-radius-r0_5)";
-const r1 = "var(--seed-radius-r1)";
-const r1_5 = "var(--seed-radius-r1_5)";
-const r2 = "var(--seed-radius-r2)";
-const r2_5 = "var(--seed-radius-r2_5)";
-const r3 = "var(--seed-radius-r3)";
-const r3_5 = "var(--seed-radius-r3_5)";
-const r4 = "var(--seed-radius-r4)";
-const r5 = "var(--seed-radius-r5)";
-const r6 = "var(--seed-radius-r6)";
-const full = "var(--seed-radius-full)";
-
-//#endregion
-//#region src/styles/vars/index.ts
-const vars = {
-	$color: color_exports,
-	$dimension: dimension_exports,
-	$radius: radius_exports,
-	$fontWeight: {
-		regular: "var(--seed-font-weight-regular)",
-		medium: "var(--seed-font-weight-medium)",
-		bold: "var(--seed-font-weight-bold)"
-	},
-	$duration: {
-		d1: "var(--seed-duration-d1)",
-		d2: "var(--seed-duration-d2)",
-		d3: "var(--seed-duration-d3)",
-		d4: "var(--seed-duration-d4)",
-		d5: "var(--seed-duration-d5)",
-		d6: "var(--seed-duration-d6)"
-	}
+//#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
@@ -805,14 +199,6 @@ const LogPanel = ({ logs, clearLogs }) => {
 	const [enabledLevels, setEnabledLevels] = (0, _lynx_js_react.useState)(() => savedEnabledLevels ?? new Set(LOG_LEVELS));
 	const [filterOpen, setFilterOpen] = (0, _lynx_js_react.useState)(false);
 	const [searchQuery, setSearchQuery] = (0, _lynx_js_react.useState)(savedSearchQuery);
-	const [fadeState, setFadeState] = (0, _lynx_js_react.useState)({
-		atTop: true,
-		atBottom: true
-	});
-	const fadeRef = (0, _lynx_js_react.useRef)({
-		atTop: true,
-		atBottom: true
-	});
 	const inputRef = (0, _lynx_js_react.useRef)(null);
 	const searchInputRef = (0, _lynx_js_react.useRef)(null);
 	const listRef = (0, _lynx_js_react.useRef)(null);
@@ -891,23 +277,23 @@ const LogPanel = ({ logs, clearLogs }) => {
 	const renderArg = (arg, parentKey, level) => {
 		const key = parentKey;
 		const isExpanded = expandedArgs.has(key);
-		if (arg === null) return <text className={argNull}>null</text>;
-		if (arg === void 0) return <text className={argUndefined}>undefined</text>;
+		if (arg === null) return <text className={"cp-argNull"}>null</text>;
+		if (arg === void 0) return <text className={"cp-argUndefined"}>undefined</text>;
 		if (typeof arg === "string") {
 			const MAX_LENGTH = 80;
-			if (!(arg.length > MAX_LENGTH)) return <text className={argString({ level })}>{arg}</text>;
-			return <view className={argObject}>
-          <view className={argObjectHeader} bindtap={() => toggleArg(key)}>
-            <text className={toggleIndicator}>
+			if (!(arg.length > MAX_LENGTH)) return <text className={`cp-argString cp-argString--${level}`}>{arg}</text>;
+			return <view className={"cp-argObject"}>
+          <view className={"cp-argObjectHeader"} bindtap={() => toggleArg(key)}>
+            <text className={"cp-toggleIndicator"}>
               {isExpanded ? "▼" : "▶"}
             </text>
-            <text className={argString({ level })}>
+            <text className={`cp-argString cp-argString--${level}`}>
               {isExpanded ? arg : `${arg.slice(0, MAX_LENGTH)}...`}
             </text>
           </view>
         </view>;
 		}
-		if (typeof arg === "number" || typeof arg === "boolean") return <text className={argPrimitive({ level })}>{String(arg)}</text>;
+		if (typeof arg === "number" || typeof arg === "boolean") return <text className={`cp-argPrimitive cp-argPrimitive--${level}`}>{String(arg)}</text>;
 		if (typeof arg === "object") {
 			let preview = "Object";
 			if (Array.isArray(arg)) preview = `Array(${arg.length})`;
@@ -921,201 +307,120 @@ const LogPanel = ({ logs, clearLogs }) => {
 			if (arg instanceof Map) jsonString = `{\n${Array.from(arg.entries()).map(([k, v]) => `  [${(0, javascript_stringify.stringify)(k)}, ${(0, javascript_stringify.stringify)(v)}]`).join(",\n")}\n}`;
 			else if (arg instanceof Set) jsonString = `{\n${Array.from(arg.values()).map((v) => (0, javascript_stringify.stringify)(v)).join(", ")}\n}`;
 			else jsonString = (0, javascript_stringify.stringify)(arg, null, 2, { references: true }) ?? String(arg);
-			return <view className={argObject}>
-          <view className={argObjectHeader} bindtap={() => toggleArg(key)}>
-            <text className={toggleIndicator}>
+			return <view className={"cp-argObject"}>
+          <view className={"cp-argObjectHeader"} bindtap={() => toggleArg(key)}>
+            <text className={"cp-toggleIndicator"}>
               {isExpanded ? "▼" : "▶"}
             </text>
-            <text className={argObjectPreview}>{preview}</text>
+            <text className={"cp-argObjectPreview"}>{preview}</text>
           </view>
-          {isExpanded && <view className={argObjectContent}>
-              <text className={argObjectJson}>{jsonString}</text>
+          {isExpanded && <view className={"cp-argObjectContent"}>
+              <text className={"cp-argObjectJson"}>{jsonString}</text>
             </view>}
         </view>;
 		}
-		return <text className={argPrimitive({ level })}>{String(arg)}</text>;
+		return <text className={`cp-argPrimitive cp-argPrimitive--${level}`}>{String(arg)}</text>;
 	};
-	return <view className={logContainer} bindtap={() => {
+	return <view className={"cp-logContainer"} bindtap={() => {
 		if (filterOpen) setFilterOpen(false);
 	}}>
-      <view className={logHeader}>
-        <view className={filterWrapper}>
-          <view className={filterButton} catchtap={() => setFilterOpen((v) => !v)}>
-            <text className={filterButtonText}>Filter  ▼</text>
+      <view className={"cp-logHeader"}>
+        <view className={"cp-filterWrapper"}>
+          <view className={"cp-filterButton"} catchtap={() => setFilterOpen((v) => !v)}>
+            <text className={"cp-filterButtonText"}>Filter  ▼</text>
           </view>
-          {filterOpen && <view className={filterDropdown} catchtap={() => {}}>
-              {LOG_LEVELS.map((level) => <view key={level} className={filterOption} bindtap={() => toggleLevel(level)}>
-                  <text className={filterCheckbox({ level })}>
+          {filterOpen && <view className={"cp-filterDropdown"} catchtap={() => {}}>
+              {LOG_LEVELS.map((level) => <view key={level} className={"cp-filterOption"} bindtap={() => toggleLevel(level)}>
+                  <text className={`cp-filterCheckbox cp-filterCheckbox--${level}`}>
                     {enabledLevels.has(level) ? "✅" : "⬜"}
                   </text>
-                  <text className={filterLabel({ level })}>
+                  <text className={`cp-filterLabel cp-filterLabel--${level}`}>
                     {level.toUpperCase()}
                   </text>
                 </view>)}
             </view>}
         </view>
-        <view className={searchWrapper}>
-          <text className={searchPrompt}>{"›"}</text>
-          <input ref={searchInputRef} className={searchInput} placeholder="Search logs..." bindinput={(e) => setSearchQuery(e.detail.value)} />
+        <view className={"cp-searchWrapper"}>
+          <text className={"cp-searchPrompt"}>{"›"}</text>
+          <input ref={searchInputRef} className={"cp-searchInput"} placeholder="Search logs..." bindinput={(e) => setSearchQuery(e.detail.value)} />
+          {searchQuery.length > 0 && <view className={"cp-searchClear"} bindtap={() => {
+		setSearchQuery("");
+		searchInputRef.current?.invoke({
+			method: "setValue",
+			params: { value: "" }
+		}).exec();
+	}}>
+              <text className={"cp-searchClearText"}>✕</text>
+            </view>}
         </view>
         <view style={{
 		display: "flex",
 		flexDirection: "row",
 		gap: 8
 	}}>
-          <view className={clearButton$2} bindtap={clearLogs}>
-            <text className={clearButtonText$2}>Clear</text>
+          <view className={"cp-clearButton"} bindtap={clearLogs}>
+            <text className={"cp-clearButtonText"}>🗑</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={"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={placeholder$2}>
-              <text className={placeholderText$2}>
+            <view className={"cp-placeholder"}>
+              <text className={"cp-placeholderText"}>
                 No logs yet. Try console.log("Hello!")
               </text>
             </view>
           </list-item> : filteredLogs.map((log) => {
 		return <list-item key={log.id} item-key={log.id}>
-                <view className={logItem({ level: log.level })}>
-                  <view className={logItemHeader}>
-                    <text className={logLevel({ level: log.level })}>
+                <view className={`cp-logItem cp-logItem--${log.level}`}>
+                  <view className={"cp-logItemHeader"}>
+                    <text className={`cp-logLevel cp-logLevel--${log.level}`}>
                       {log.level.toUpperCase()}
                     </text>
-                    <text className={logTime}>
+                    <text className={"cp-logTime"}>
                       {new Date(log.timestamp).toISOString()}
                     </text>
                   </view>
-                  <view className={logArgsContainer}>
-                    {log.args.map((arg, index) => <view key={`${log.id}-${index.toString()}`} className={logArgItem}>
+                  <view className={"cp-logArgsContainer"}>
+                    {log.args.map((arg, index) => <view key={`${log.id}-${index.toString()}`} className={"cp-logArgItem"}>
                         {renderArg(arg, `${log.id}-${index.toString()}`, log.level)}
                       </view>)}
                   </view>
                 </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)` }} />
-      <view className={replInputRow}>
-        <text className={replPrompt}>{"›"}</text>
-        <input ref={inputRef} className={replInput} placeholder="enter code..." bindinput={(e) => setCode(e.detail.value)} bindconfirm={handleRun} />
-        <view className={replRunButton} bindtap={handleRun}>
-          <text className={replRunButtonText}>Run</text>
+      </FadeList>
+      <view className={"cp-replInputRow"}>
+        <text className={"cp-replPrompt"}>{"›"}</text>
+        <input ref={inputRef} className={"cp-replInput"} placeholder="enter code..." bindinput={(e) => setCode(e.detail.value)} bindconfirm={handleRun} />
+        <view className={"cp-replRunButton"} bindtap={handleRun}>
+          <text className={"cp-replRunButtonText"}>Run</text>
         </view>
       </view>
     </view>;
 };
 
-//#endregion
-//#region src/components/NetworkPanel.css.ts
-var bodyText = "NetworkPanel_bodyText__1kf6i8q16";
-var clearButton$1 = "NetworkPanel_clearButton__1kf6i8q3";
-var clearButtonText$1 = "NetworkPanel_clearButtonText__1kf6i8q4";
-var container$1 = "NetworkPanel_container__1kf6i8q0";
-var count$1 = "NetworkPanel_count__1kf6i8q2";
-var detailSection = "NetworkPanel_detailSection__1kf6i8q10";
-var detailSectionTitle = "NetworkPanel_detailSectionTitle__1kf6i8q11";
-var detailsContainer$1 = "NetworkPanel_detailsContainer__1kf6i8qr";
-var emptyText = "NetworkPanel_emptyText__1kf6i8q18";
-var errorText = "NetworkPanel_errorText__1kf6i8q17";
-var header$1 = "NetworkPanel_header__1kf6i8q1";
-var item$1 = createRuntimeFn({
-	defaultClassName: "NetworkPanel_item__1kf6i8q8",
-	variantClassNames: { status: {
-		pending: "NetworkPanel_item_status_pending__1kf6i8q9",
-		success: "NetworkPanel_item_status_success__1kf6i8qa",
-		error: "NetworkPanel_item_status_error__1kf6i8qb"
-	} },
-	defaultVariants: {},
-	compoundVariants: []
-});
-var itemHeader$1 = "NetworkPanel_itemHeader__1kf6i8qc";
-var list$1 = "NetworkPanel_list__1kf6i8q5";
-var method = createRuntimeFn({
-	defaultClassName: "NetworkPanel_method__1kf6i8qd",
-	variantClassNames: { type: {
-		GET: "NetworkPanel_method_type_GET__1kf6i8qe",
-		POST: "NetworkPanel_method_type_POST__1kf6i8qf",
-		PUT: "NetworkPanel_method_type_PUT__1kf6i8qg",
-		PATCH: "NetworkPanel_method_type_PATCH__1kf6i8qh",
-		DELETE: "NetworkPanel_method_type_DELETE__1kf6i8qi"
-	} },
-	defaultVariants: {},
-	compoundVariants: []
-});
-var path = "NetworkPanel_path__1kf6i8qp";
-var placeholder$1 = "NetworkPanel_placeholder__1kf6i8q6";
-var placeholderText$1 = "NetworkPanel_placeholderText__1kf6i8q7";
-var statusCode = createRuntimeFn({
-	defaultClassName: "NetworkPanel_statusCode__1kf6i8qj",
-	variantClassNames: { type: {
-		success: "NetworkPanel_statusCode_type_success__1kf6i8qk",
-		error: "NetworkPanel_statusCode_type_error__1kf6i8ql",
-		pending: "NetworkPanel_statusCode_type_pending__1kf6i8qm"
-	} },
-	defaultVariants: {},
-	compoundVariants: []
-});
-var tab = createRuntimeFn({
-	defaultClassName: "NetworkPanel_tab__1kf6i8qt",
-	variantClassNames: { active: {
-		true: "NetworkPanel_tab_active_true__1kf6i8qu",
-		false: "NetworkPanel_tab_active_false__1kf6i8qv"
-	} },
-	defaultVariants: {},
-	compoundVariants: []
-});
-var tabContent$1 = "NetworkPanel_tabContent__1kf6i8qz";
-var tabText = createRuntimeFn({
-	defaultClassName: "NetworkPanel_tabText__1kf6i8qw",
-	variantClassNames: { active: {
-		true: "NetworkPanel_tabText_active_true__1kf6i8qx",
-		false: "NetworkPanel_tabText_active_false__1kf6i8qy"
-	} },
-	defaultVariants: {},
-	compoundVariants: []
-});
-var table = "NetworkPanel_table__1kf6i8q12";
-var tableKey = "NetworkPanel_tableKey__1kf6i8q14";
-var tableRow = "NetworkPanel_tableRow__1kf6i8q13";
-var tableValue = "NetworkPanel_tableValue__1kf6i8q15";
-var tabs$1 = "NetworkPanel_tabs__1kf6i8qs";
-var time = "NetworkPanel_time__1kf6i8qn";
-
 //#endregion
 //#region src/components/NetworkDetailSection.tsx
 const NetworkDetailSection = ({ headers = {}, body = "", error = "" }) => {
 	return <>
       {}
-      <view className={detailSection}>
-        <text className={detailSectionTitle}>Headers</text>
-        {headers && Object.keys(headers).length > 0 ? <view className={table}>
-            {Object.entries(headers).map(([key, value]) => <view key={key} className={tableRow}>
-                <text className={tableKey}>{key}</text>
-                <text className={tableValue}>{value}</text>
+      <view className={"np-detailSection"}>
+        <text className={"np-detailSectionTitle"}>Headers</text>
+        {headers && Object.keys(headers).length > 0 ? <view className={"np-table"}>
+            {Object.entries(headers).map(([key, value]) => <view key={key} className={"np-tableRow"}>
+                <text className={"np-tableKey"}>{key}</text>
+                <text className={"np-tableValue"}>{value}</text>
               </view>)}
-          </view> : <text className={emptyText}>No headers</text>}
+          </view> : <text className={"np-emptyText"}>No headers</text>}
       </view>
 
       {}
-      <view className={detailSection}>
-        <text className={detailSectionTitle}>Body</text>
-        {error && <text className={errorText}>{error}</text>}
-        {body && <text className={bodyText}>{body}</text>}
-        {!error && !body && <text className={emptyText}>No body</text>}
+      <view className={"np-detailSection"}>
+        <text className={"np-detailSectionTitle"}>Body</text>
+        {error && <text className={"np-errorText"}>{error}</text>}
+        {body && <text className={"np-bodyText"}>{body}</text>}
+        {!error && !body && <text className={"np-emptyText"}>No body</text>}
       </view>
     </>;
 };
@@ -1169,67 +474,67 @@ const NetworkPanel = ({ networks, clearNetworks }) => {
 		if (statusCode && statusCode >= 200 && statusCode < 300) return "success";
 		return "error";
 	};
-	return <view className={container$1}>
-      <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>
+	return <view className={"np-container"}>
+      <view className={"np-header"}>
+        <text className={"np-count"}>Total: {networks.length} requests</text>
+        <view className={"np-clearButton"} bindtap={clearNetworks}>
+          <text className={"np-clearButtonText"}>🗑</text>
         </view>
       </view>
 
-      {networks.length === 0 ? <view className={placeholder$1}>
-          <text className={placeholderText$1}>No network requests yet</text>
-        </view> : <list className={list$1}>
+      {networks.length === 0 ? <view className={"np-placeholder"}>
+          <text className={"np-placeholderText"}>No network requests yet</text>
+        </view> : <FadeList className={"np-list"}>
           {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)}>
-                  <text className={method({ type: network.method })}>
+              <view className={`np-item np-item--${network.status}`}>
+                <view className={"np-itemHeader"} bindtap={() => setSelectedId(selectedId === network.id ? null : network.id)}>
+                  <text className={`np-method np-method--${network.method}`}>
                     {network.method}
                   </text>
-                  {network.statusCode && <text className={statusCode({ type: getStatusCodeVariant(network.status, network.statusCode) })}>
+                  {network.statusCode && <text className={`np-statusCode np-statusCode--${getStatusCodeVariant(network.status, network.statusCode)}`}>
                       {network.statusCode}
                     </text>}
-                  {network.status === "pending" && <text className={statusCode({ type: "pending" })}>
+                  {network.status === "pending" && <text className={"np-statusCode np-statusCode--pending"}>
                       Pending...
                     </text>}
-                  <text className={time}>
+                  <text className={"np-time"}>
                     {formatDuration(network.duration)}
                   </text>
-                  <text className={time}>
+                  <text className={"np-time"}>
                     {new Date(network.startTime).toISOString()}
                   </text>
                 </view>
 
-                <text className={path} bindtap={() => setSelectedId(selectedId === network.id ? null : network.id)}>
+                <text className={"np-path"} bindtap={() => setSelectedId(selectedId === network.id ? null : network.id)}>
                   {extractPath(network.url)}
                 </text>
 
-                {selectedId === network.id && <view className={detailsContainer$1}>
+                {selectedId === network.id && <view className={"np-detailsContainer"}>
                     {}
-                    <view className={tabs$1}>
-                      <view className={tab({ active: activeTab === "general" })} bindtap={() => setActiveTab("general")}>
-                        <text className={tabText({ active: activeTab === "general" })}>
+                    <view className={"np-tabs"}>
+                      <view className={`np-tab${activeTab === "general" ? " np-tab--active" : ""}`} bindtap={() => setActiveTab("general")}>
+                        <text className={`np-tabText${activeTab === "general" ? " np-tabText--active" : ""}`}>
                           General
                         </text>
                       </view>
-                      <view className={tab({ active: activeTab === "request" })} bindtap={() => setActiveTab("request")}>
-                        <text className={tabText({ active: activeTab === "request" })}>
+                      <view className={`np-tab${activeTab === "request" ? " np-tab--active" : ""}`} bindtap={() => setActiveTab("request")}>
+                        <text className={`np-tabText${activeTab === "request" ? " np-tabText--active" : ""}`}>
                           Request
                         </text>
                       </view>
-                      <view className={tab({ active: activeTab === "response" })} bindtap={() => setActiveTab("response")}>
-                        <text className={tabText({ active: activeTab === "response" })}>
+                      <view className={`np-tab${activeTab === "response" ? " np-tab--active" : ""}`} bindtap={() => setActiveTab("response")}>
+                        <text className={`np-tabText${activeTab === "response" ? " np-tabText--active" : ""}`}>
                           Response
                         </text>
                       </view>
                     </view>
 
                     {}
-                    <view className={tabContent$1}>
-                      {activeTab === "general" && <view className={table}>
-                          {getGeneralInfo(network).map((item) => <view key={item.key} className={tableRow}>
-                              <text className={tableKey}>{item.key}</text>
-                              <text className={tableValue}>
+                    <view className={"np-tabContent"}>
+                      {activeTab === "general" && <view className={"np-table"}>
+                          {getGeneralInfo(network).map((item) => <view key={item.key} className={"np-tableRow"}>
+                              <text className={"np-tableKey"}>{item.key}</text>
+                              <text className={"np-tableValue"}>
                                 {item.value}
                               </text>
                             </view>)}
@@ -1242,47 +547,10 @@ const NetworkPanel = ({ networks, clearNetworks }) => {
                   </view>}
               </view>
             </list-item>)}
-        </list>}
+        </FadeList>}
     </view>;
 };
 
-//#endregion
-//#region src/components/PerformancePanel.css.ts
-var clearButton = "PerformancePanel_clearButton__19p8bog3";
-var clearButtonText = "PerformancePanel_clearButtonText__19p8bog4";
-var container = "PerformancePanel_container__19p8bog0";
-var count = "PerformancePanel_count__19p8bog2";
-var detailTitle = "PerformancePanel_detailTitle__19p8bogw";
-var detailsContainer = "PerformancePanel_detailsContainer__19p8bogn";
-var entryName = "PerformancePanel_entryName__19p8bogf";
-var entryType = createRuntimeFn({
-	defaultClassName: "PerformancePanel_entryType__19p8boga",
-	variantClassNames: { type: {
-		init: "PerformancePanel_entryType_type_init__19p8bogb",
-		metric: "PerformancePanel_entryType_type_metric__19p8bogc",
-		pipeline: "PerformancePanel_entryType_type_pipeline__19p8bogd",
-		resource: "PerformancePanel_entryType_type_resource__19p8boge"
-	} },
-	defaultVariants: {},
-	compoundVariants: []
-});
-var fcpHighlight = "PerformancePanel_fcpHighlight__19p8bogi";
-var fcpMetric = "PerformancePanel_fcpMetric__19p8bogq";
-var fcpMetricDescription = "PerformancePanel_fcpMetricDescription__19p8bogt";
-var fcpMetricHeader = "PerformancePanel_fcpMetricHeader__19p8bogh";
-var fcpMetricName = "PerformancePanel_fcpMetricName__19p8bogr";
-var fcpMetricValue = "PerformancePanel_fcpMetricValue__19p8bogs";
-var fcpSection = "PerformancePanel_fcpSection__19p8bogo";
-var header = "PerformancePanel_header__19p8bog1";
-var item = "PerformancePanel_item__19p8bog8";
-var itemHeader = "PerformancePanel_itemHeader__19p8bog9";
-var list = "PerformancePanel_list__19p8bog5";
-var placeholder = "PerformancePanel_placeholder__19p8bog6";
-var placeholderText = "PerformancePanel_placeholderText__19p8bog7";
-var rawEntry = "PerformancePanel_rawEntry__19p8bogx";
-var rawEntrySection = "PerformancePanel_rawEntrySection__19p8bogv";
-var timestamp = "PerformancePanel_timestamp__19p8bogg";
-
 //#endregion
 //#region src/components/PerformancePanel.tsx
 const isMetricFcpEntry = (entry) => {
@@ -1312,9 +580,9 @@ const getPrimaryFcpLabel = (entry) => {
 };
 const PerformancePanel = ({ performances, clearPerformances }) => {
 	const [selectedId, setSelectedId] = (0, _lynx_js_react.useState)(null);
-	if (performances.length === 0) return <view className={container}>
-        <view className={header}>
-          <text className={count}>0 entries</text>
+	if (performances.length === 0) return <view className={"pp-container"}>
+        <view className={"pp-header"}>
+          <text className={"pp-count"}>0 entries</text>
           <view bindtap={() => {
 		console.log("[PerformancePanel] performances", performances);
 	}} style={{
@@ -1323,93 +591,93 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
 	}}>
             <text>Log</text>
           </view>
-          <view bindtap={clearPerformances} className={clearButton}>
-            <text className={clearButtonText}>Clear</text>
+          <view bindtap={clearPerformances} className={"pp-clearButton"}>
+            <text className={"pp-clearButtonText"}>🗑</text>
           </view>
         </view>
-        <view className={placeholder}>
-          <text className={placeholderText}>
+        <view className={"pp-placeholder"}>
+          <text className={"pp-placeholderText"}>
             No performance data yet...
           </text>
         </view>
       </view>;
-	return <view className={container}>
-      <view className={header}>
-        <text className={count}>{performances.length} entries</text>
-        <view bindtap={clearPerformances} className={clearButton}>
-          <text className={clearButtonText}>Clear</text>
+	return <view className={"pp-container"}>
+      <view className={"pp-header"}>
+        <text className={"pp-count"}>{performances.length} entries</text>
+        <view bindtap={clearPerformances} className={"pp-clearButton"}>
+          <text className={"pp-clearButtonText"}>🗑</text>
         </view>
       </view>
 
-      <list className={list}>
+      <FadeList className={"pp-list"}>
         {performances.map((perf) => {
 		const isMetricFcp = isMetricFcpEntry(perf);
 		const fcpMetrics = extractFcpMetrics(perf);
 		const primaryFcp = getPrimaryFcpLabel(perf);
 		const { totalFcp, lynxFcp, fcp } = fcpMetrics ?? {};
 		return <list-item key={perf.id} item-key={perf.id}>
-              <view className={item}>
-                <view className={itemHeader} bindtap={() => setSelectedId(selectedId === perf.id ? null : perf.id)}>
-                  <text className={entryType({ type: perf.entryType })}>
+              <view className={"pp-item"}>
+                <view className={"pp-itemHeader"} bindtap={() => setSelectedId(selectedId === perf.id ? null : perf.id)}>
+                  <text className={`pp-entryType pp-entryType--${perf.entryType}`}>
                     {perf.entryType}
                   </text>
-                  <text className={entryName}>{perf.name}</text>
-                  <text className={timestamp}>
+                  <text className={"pp-entryName"}>{perf.name}</text>
+                  <text className={"pp-timestamp"}>
                     {new Date(perf.timestamp).toISOString()}
                   </text>
                 </view>
 
                 <view bindtap={() => setSelectedId(selectedId === perf.id ? null : perf.id)}>
-                  {isMetricFcp && primaryFcp && <text className={fcpHighlight}>{primaryFcp}</text>}
+                  {isMetricFcp && primaryFcp && <text className={"pp-fcpHighlight"}>{primaryFcp}</text>}
                 </view>
 
-                {selectedId === perf.id && <view className={detailsContainer}>
-                    {isMetricFcp && fcpMetrics && <view className={fcpSection}>
-                        {totalFcp !== void 0 && <view className={fcpMetric}>
-                            <view className={fcpMetricHeader}>
-                              <text className={fcpMetricName}>
+                {selectedId === perf.id && <view className={"pp-detailsContainer"}>
+                    {isMetricFcp && fcpMetrics && <view className={"pp-fcpSection"}>
+                        {totalFcp !== void 0 && <view className={"pp-fcpMetric"}>
+                            <view className={"pp-fcpMetricHeader"}>
+                              <text className={"pp-fcpMetricName"}>
                                 전체 FCP
                               </text>
-                              <text className={fcpMetricValue}>
+                              <text className={"pp-fcpMetricValue"}>
                                 {formatDuration(totalFcp.duration)}
                               </text>
                             </view>
-                            <text className={fcpMetricDescription}>
+                            <text className={"pp-fcpMetricDescription"}>
                               PrepareTemplate Start부터 Paint End 까지 걸리는
                               시간
                             </text>
                           </view>}
 
-                        {lynxFcp !== void 0 && <view className={fcpMetric}>
-                            <view className={fcpMetricHeader}>
-                              <text className={fcpMetricName}>LynxFCP</text>
-                              <text className={fcpMetricValue}>
+                        {lynxFcp !== void 0 && <view className={"pp-fcpMetric"}>
+                            <view className={"pp-fcpMetricHeader"}>
+                              <text className={"pp-fcpMetricName"}>LynxFCP</text>
+                              <text className={"pp-fcpMetricValue"}>
                                 {formatDuration(lynxFcp.duration)}
                               </text>
                             </view>
-                            <text className={fcpMetricDescription}>
+                            <text className={"pp-fcpMetricDescription"}>
                               Bundle Load 시작부터 Paint End 까지 걸리는 시간
                             </text>
                           </view>}
 
-                        {fcp !== void 0 && <view className={fcpMetric}>
-                            <view className={fcpMetricHeader}>
-                              <text className={fcpMetricName}>
+                        {fcp !== void 0 && <view className={"pp-fcpMetric"}>
+                            <view className={"pp-fcpMetricHeader"}>
+                              <text className={"pp-fcpMetricName"}>
                                 렌더링 FCP
                               </text>
-                              <text className={fcpMetricValue}>
+                              <text className={"pp-fcpMetricValue"}>
                                 {formatDuration(fcp.duration)}
                               </text>
                             </view>
-                            <text className={fcpMetricDescription}>
+                            <text className={"pp-fcpMetricDescription"}>
                               TemplateBundle 준비부터 Paint End 까지 걸리는 시간
                             </text>
                           </view>}
                       </view>}
 
-                    {!!perf.rawEntry && <view className={rawEntrySection}>
-                        <text className={detailTitle}>Raw Entry</text>
-                        <text className={rawEntry}>
+                    {!!perf.rawEntry && <view className={"pp-rawEntrySection"}>
+                        <text className={"pp-detailTitle"}>Raw Entry</text>
+                        <text className={"pp-rawEntry"}>
                           {String((0, javascript_stringify.stringify)(perf.rawEntry, null, 2, { references: true }))}
                         </text>
                       </view>}
@@ -1417,34 +685,19 @@ const PerformancePanel = ({ performances, clearPerformances }) => {
               </view>
             </list-item>;
 	})}
-      </list>
+      </FadeList>
     </view>;
 };
 
-//#endregion
-//#region src/components/Tabs.css.ts
-var tabContent = "Tabs_tabContent__ud1j9z8";
-var tabContents = "Tabs_tabContents__ud1j9z7";
-var tabHeader = "Tabs_tabHeader__ud1j9z1";
-var tabTriggerButton = "Tabs_tabTriggerButton__ud1j9z2";
-var tabTriggerButtonText = createRuntimeFn({
-	defaultClassName: "Tabs_tabTriggerButtonText__ud1j9z3",
-	variantClassNames: { active: { true: "Tabs_tabTriggerButtonText_active_true__ud1j9z4" } },
-	defaultVariants: {},
-	compoundVariants: []
-});
-var tabTriggerIndicator = "Tabs_tabTriggerIndicator__ud1j9z5";
-var tabTriggerIndicatorLine = "Tabs_tabTriggerIndicatorLine__ud1j9z6";
-var tabs = "Tabs_tabs__ud1j9z0";
-
 //#endregion
 //#region src/components/Tabs.tsx
 function Tabs(props) {
 	const tabContentsRef = (0, _lynx_js_react.useRef)(null);
 	const [activeIndex, setActiveIndex] = (0, _lynx_js_react.useState)(0);
-	return <view className={tabs}>
-      <view className={tabHeader}>
-        {props.items.map((item, i) => <view key={item.key} className={tabTriggerButton} bindtap={() => {
+	const tabSize = props.items.length < 4 ? void 0 : `t${Math.max(1, 5 - (props.items.length - 3))}`;
+	return <view className={"tabs-root"}>
+      <view className={"tabs-header"}>
+        {props.items.map((item, i) => <view key={item.key} className={"tabs-triggerButton"} bindtap={() => {
 		setActiveIndex(i);
 		props.onTabChange?.();
 		tabContentsRef.current?.invoke({
@@ -1455,22 +708,22 @@ function Tabs(props) {
 			}
 		}).exec();
 	}}>
-            <text className={tabTriggerButtonText({ active: i === activeIndex })}>
+            <text className={`tabs-triggerButtonText${i === activeIndex ? " tabs-triggerButtonText--active" : ""}${tabSize ? ` tabs-triggerButtonText--${tabSize}` : ""}`}>
               {item.label}
             </text>
-            {i === 0 && <view className={tabTriggerIndicator} style={{ transform: `translateX(${activeIndex * 100}%)` }}>
-                <view className={tabTriggerIndicatorLine} />
+            {i === 0 && <view className={"tabs-triggerIndicator"} style={{ transform: `translateX(${activeIndex * 100}%)` }}>
+                <view className={"tabs-triggerIndicatorLine"} />
               </view>}
           </view>)}
       </view>
 
-      <list ref={tabContentsRef} className={tabContents} scroll-orientation="horizontal" item-snap={{
+      <list ref={tabContentsRef} className={"tabs-contents"} scroll-orientation="horizontal" item-snap={{
 		factor: 0,
 		offset: 0
 	}} bindscroll={() => props.onTabChange?.()} bindsnap={(e) => {
 		setActiveIndex(e.detail.position);
 	}} bounces={false} preload-buffer-count={props.items.length}>
-        {props.items.map((item) => <list-item key={item.key} item-key={item.key} recyclable={false} className={tabContent}>
+        {props.items.map((item) => <list-item key={item.key} item-key={item.key} recyclable={false} className={"tabs-content"}>
             {item.renderContent()}
           </list-item>)}
       </list>
@@ -1479,41 +732,38 @@ function Tabs(props) {
 
 //#endregion
 //#region src/components/ConsolePanel.tsx
-const ConsolePanel = () => {
+const ConsolePanel = ({ customTabs }) => {
 	const { logs, clearLogs } = useConsole();
 	const { networks, clearNetworks } = useNetwork();
 	const { performances, clearPerformances } = usePerformance();
-	return <view className={container$2}>
-      <Tabs onTabChange={dismissFilterDropdown} items={[
-		{
-			key: "log",
-			label: "Log",
-			renderContent: () => <LogPanel logs={logs} clearLogs={clearLogs} />
-		},
-		{
-			key: "network",
-			label: "Network",
-			renderContent: () => <NetworkPanel networks={networks} clearNetworks={clearNetworks} />
-		},
-		{
-			key: "performance",
-			label: "Performance",
-			renderContent: () => <PerformancePanel performances={performances} clearPerformances={clearPerformances} />
-		}
-	]} />
+	const state = globalThis.__LYNX_CONSOLE__?.state;
+	const items = [];
+	if (state?.logs) items.push({
+		key: "log",
+		label: "Log",
+		renderContent: () => <LogPanel logs={logs} clearLogs={clearLogs} />
+	});
+	if (state?.networks) items.push({
+		key: "network",
+		label: "Network",
+		renderContent: () => <NetworkPanel networks={networks} clearNetworks={clearNetworks} />
+	});
+	if (state?.performances) items.push({
+		key: "performance",
+		label: "Perf",
+		renderContent: () => <PerformancePanel performances={performances} clearPerformances={clearPerformances} />
+	});
+	if (customTabs) for (const tab of customTabs) items.push({
+		key: tab.key,
+		label: tab.label,
+		renderContent: tab.renderContent
+	});
+	if (items.length === 0) return null;
+	return <view className="cp-container">
+      <Tabs onTabChange={dismissFilterDropdown} items={items} />
     </view>;
 };
 
-//#endregion
-//#region src/components/FloatingButton.css.ts
-var button = "FloatingButton_button__1homwpu1";
-var reloadButton = "FloatingButton_reloadButton__1homwpu5";
-var reloadIcon = "FloatingButton_reloadIcon__1homwpu6";
-var shineOverlay = "FloatingButton_shineOverlay__1homwpu2";
-var subtitle = "FloatingButton_subtitle__1homwpu4";
-var title = "FloatingButton_title__1homwpu3";
-var wrapper = "FloatingButton_wrapper__1homwpu0";
-
 //#endregion
 //#region src/hooks/useLongPressDrag.ts
 const LONG_PRESS_DURATION = 400;
@@ -1584,9 +834,9 @@ function useLongPressDrag(onTap) {
 		bottom: isDragging ? tempBottom : bottom,
 		clearTimer,
 		handlers: {
-			bindtouchstart: handleTouchStart,
-			bindtouchmove: handleTouchMove,
-			bindtouchend: handleTouchEnd
+			catchtouchstart: handleTouchStart,
+			catchtouchmove: handleTouchMove,
+			catchtouchend: handleTouchEnd
 		}
 	};
 }
@@ -1621,24 +871,26 @@ const FloatingButton = ({ bindtap, children }) => {
 		}
 	};
 	const isDragging = phase === "dragging";
-	return <view className={wrapper} 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)"
 	}} {...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={"fb-button"}>
+          {children}
+          <view className={"fb-shineOverlay"} style={SHINE_STYLES[phase]} />
+        </view>
+        <view className={"fb-reloadButton"} catchtouchstart={() => clearTimer()} bindtap={handleReload}>
+          <text className={"fb-reloadIcon"}>{"↻"}</text>
+        </view>
       </view>
-    </view>;
+    </>;
 };
 
 //#endregion
 //#region src/index.tsx
-const LynxConsole = (0, _lynx_js_react.forwardRef)(({ theme = "light", safeAreaInsetBottom = "50px" }, ref) => {
+const LynxConsole = (0, _lynx_js_react.forwardRef)(({ theme = "light", safeAreaInsetBottom = "50px", customTabs }, ref) => {
 	const [isOpen, setIsOpen] = (0, _lynx_js_react.useState)(false);
 	const [shouldClose, setShouldClose] = (0, _lynx_js_react.useState)(false);
 	const { performances } = usePerformance();
@@ -1670,16 +922,16 @@ const LynxConsole = (0, _lynx_js_react.forwardRef)(({ theme = "light", safeAreaI
 		setIsOpen(false);
 		setShouldClose(false);
 	};
-	const themeClass = `data-seed-color-mode__${theme}-only`;
+	const themeClass = `data-lynx-console-color-mode__${theme}-only`;
 	return <view className={themeClass}>
         <FloatingButton bindtap={handleOpenBottomSheet}>
-          <text className={title}>LynxConsole</text>
-          <text className={subtitle}>
+          <text className="fb-title">LynxConsole</text>
+          <text className="fb-subtitle">
             {`${latestFcp?.name ?? "FCP"}: ${latestFcp?.duration ? latestFcp.duration.toFixed(2) : "--"}ms`}
           </text>
         </FloatingButton>
         {isOpen && <BottomSheet isOpen={isOpen} shouldClose={shouldClose} onClose={handleCloseBottomSheet} title="Lynx Console" safeAreaInsetBottom={safeAreaInsetBottom}>
-            <ConsolePanel />
+            <ConsolePanel customTabs={customTabs} />
           </BottomSheet>}
       </view>;
 });