lynx-console 0.0.0

package/dist/index.mjs

@@ -0,0 +1,1059 @@
+import "./index.css";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "@lynx-js/react";
+import "./assets/src/components/BottomSheet.css.ts.vanilla-D-1A77Ik.css";
+import "./assets/src/components/ConsolePanel.css.ts.vanilla-B3avfSlI.css";
+import { stringify } from "javascript-stringify";
+import "./assets/src/components/NetworkPanel.css.ts.vanilla-DFMduT0T.css";
+import "./assets/src/components/PerformancePanel.css.ts.vanilla-D35LuXlW.css";
+import "./assets/src/components/Tabs.css.ts.vanilla-DD7L2oXt.css";
+import "./assets/src/components/FloatingButton.css.ts.vanilla-rPj35oLW.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" }) {
+	const [sheetHeight, setSheetHeight] = useState(savedHeight ?? DEFAULT_HEIGHT);
+	const [tempHeight, setTempHeight] = useState(savedHeight ?? DEFAULT_HEIGHT);
+	const [isDragging, setIsDragging] = useState(false);
+	const [dragStartY, setDragStartY] = useState(0);
+	const [dragStartHeight, setDragStartHeight] = useState(savedHeight ?? DEFAULT_HEIGHT);
+	const [isOpening, setIsOpening] = useState(true);
+	const [isClosing, setIsClosing] = useState(false);
+	const handleClose = () => {
+		setIsClosing(true);
+		setTimeout(() => {
+			onClose();
+		}, 300);
+	};
+	useEffect(() => {
+		requestAnimationFrame(() => {
+			setIsOpening(false);
+		});
+	}, []);
+	useEffect(() => {
+		if (shouldClose && !isClosing) handleClose();
+	}, [shouldClose, isClosing]);
+	useEffect(() => {
+		savedHeight = sheetHeight;
+	}, [sheetHeight]);
+	if (!isOpen) return null;
+	const handleTouchStart = (e) => {
+		setIsDragging(true);
+		setDragStartY(e.detail.y);
+		setDragStartHeight(sheetHeight);
+		setTempHeight(sheetHeight);
+	};
+	const handleTouchMove = (e) => {
+		if (!isDragging) return;
+		const deltaY = dragStartY - e.detail.y;
+		setTempHeight(Math.min(Math.max(dragStartHeight + deltaY, MIN_HEIGHT), MAX_HEIGHT));
+	};
+	const handleTouchEnd = () => {
+		setIsDragging(false);
+		const dragDistance = dragStartHeight - tempHeight;
+		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={{
+		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>
+          <view className={header$2}>
+            {title && <text className={title$1}>{title}</text>}
+          </view>
+          <view className={body} style={{ paddingBottom: safeAreaInsetBottom }}>
+            {children}
+          </view>
+          {footer$1 && <view className={footer}>{footer$1}</view>}
+        </view>
+      </view>
+    </scroll-view>;
+}
+
+//#endregion
+//#region src/hooks/useConsole.ts
+const useConsole = () => {
+	const [logs, setLogs] = useState([]);
+	useEffect(() => {
+		if (typeof globalThis.__LYNX_CONSOLE__?.state?.logs === "undefined") {
+			console.warn("[LynxConsole] Log monitoring not initialized");
+			return;
+		}
+		const state = globalThis.__LYNX_CONSOLE__.state;
+		setLogs([...state.logs ?? []]);
+		const updateLogs = (_entry) => {
+			setLogs([...state.logs ?? []]);
+		};
+		return state.logSubscribe?.(updateLogs);
+	}, []);
+	const clearLogs = () => {
+		if (typeof globalThis.__LYNX_CONSOLE__?.state?.logs !== "undefined") {
+			const state = globalThis.__LYNX_CONSOLE__.state;
+			state.logs = [];
+			setLogs([]);
+		}
+	};
+	return {
+		logs,
+		clearLogs
+	};
+};
+
+//#endregion
+//#region src/hooks/useNetwork.ts
+const useNetwork = () => {
+	const [networks, setNetworks] = useState([]);
+	useEffect(() => {
+		if (typeof globalThis.__LYNX_CONSOLE__?.state?.networks === "undefined") {
+			console.warn("[LynxConsole] Network monitoring not initialized");
+			return;
+		}
+		const state = globalThis.__LYNX_CONSOLE__.state;
+		setNetworks([...state.networks ?? []]);
+		const updateNetworks = (_entry) => {
+			setNetworks([...state.networks ?? []]);
+		};
+		return state.subscribeNetwork?.(updateNetworks);
+	}, []);
+	const clearNetworks = () => {
+		if (typeof globalThis.__LYNX_CONSOLE__?.state?.networks !== "undefined") {
+			const state = globalThis.__LYNX_CONSOLE__.state;
+			state.networks = [];
+			state.networksMap?.clear();
+			setNetworks([]);
+		}
+	};
+	return {
+		networks,
+		clearNetworks
+	};
+};
+
+//#endregion
+//#region src/hooks/usePerformance.ts
+const usePerformance = () => {
+	const [performances, setPerformances] = useState([]);
+	useEffect(() => {
+		if (typeof globalThis.__LYNX_CONSOLE__?.state?.performances === "undefined") {
+			console.warn("[LynxConsole] Performance monitoring not initialized");
+			return;
+		}
+		const state = globalThis.__LYNX_CONSOLE__.state;
+		setPerformances([...state.performances ?? []]);
+		const updatePerformances = (_entry) => {
+			setPerformances([...state.performances ?? []]);
+		};
+		return state.subscribePerformance?.(updatePerformances);
+	}, []);
+	const clearPerformances = () => {
+		if (typeof globalThis.__LYNX_CONSOLE__?.state?.performances !== "undefined") {
+			const state = globalThis.__LYNX_CONSOLE__.state;
+			state.performances = [];
+			setPerformances([]);
+		}
+	};
+	return {
+		performances,
+		clearPerformances
+	};
+};
+
+//#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__db6kuup";
+var argObject = "ConsolePanel_argObject__db6kuu11";
+var argObjectContent = "ConsolePanel_argObjectContent__db6kuu14";
+var argObjectHeader = "ConsolePanel_argObjectHeader__db6kuu12";
+var argObjectJson = "ConsolePanel_argObjectJson__db6kuu17";
+var argObjectPreview = "ConsolePanel_argObjectPreview__db6kuu13";
+var argPrimitive = createRuntimeFn({
+	defaultClassName: "ConsolePanel_argPrimitive__db6kuuw",
+	variantClassNames: { level: {
+		log: "ConsolePanel_argPrimitive_level_log__db6kuux",
+		info: "ConsolePanel_argPrimitive_level_info__db6kuuy",
+		warn: "ConsolePanel_argPrimitive_level_warn__db6kuuz",
+		error: "ConsolePanel_argPrimitive_level_error__db6kuu10"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+});
+var argString = createRuntimeFn({
+	defaultClassName: "ConsolePanel_argString__db6kuur",
+	variantClassNames: { level: {
+		log: "ConsolePanel_argString_level_log__db6kuus",
+		info: "ConsolePanel_argString_level_info__db6kuut",
+		warn: "ConsolePanel_argString_level_warn__db6kuuu",
+		error: "ConsolePanel_argString_level_error__db6kuuv"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+});
+var argUndefined = "ConsolePanel_argUndefined__db6kuuq";
+var clearButton$2 = "ConsolePanel_clearButton__db6kuu6";
+var clearButtonText$2 = "ConsolePanel_clearButtonText__db6kuu7";
+var container$3 = "ConsolePanel_container__db6kuu0";
+var logArgItem = "ConsolePanel_logArgItem__db6kuuo";
+var logArgsContainer = "ConsolePanel_logArgsContainer__db6kuun";
+var logContainer = "ConsolePanel_logContainer__db6kuu3";
+var logCount = "ConsolePanel_logCount__db6kuu5";
+var logHeader = "ConsolePanel_logHeader__db6kuu4";
+var logItem = createRuntimeFn({
+	defaultClassName: "ConsolePanel_logItem__db6kuu9",
+	variantClassNames: { level: {
+		log: "ConsolePanel_logItem_level_log__db6kuua",
+		info: "ConsolePanel_logItem_level_info__db6kuub",
+		warn: "ConsolePanel_logItem_level_warn__db6kuuc",
+		error: "ConsolePanel_logItem_level_error__db6kuud"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+});
+var logItemHeader = "ConsolePanel_logItemHeader__db6kuue";
+var logLevel = createRuntimeFn({
+	defaultClassName: "ConsolePanel_logLevel__db6kuuf",
+	variantClassNames: { level: {
+		log: "ConsolePanel_logLevel_level_log__db6kuug",
+		info: "ConsolePanel_logLevel_level_info__db6kuuh",
+		warn: "ConsolePanel_logLevel_level_warn__db6kuui",
+		error: "ConsolePanel_logLevel_level_error__db6kuuj"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+});
+var logList = "ConsolePanel_logList__db6kuu8";
+var logTime = "ConsolePanel_logTime__db6kuuk";
+var placeholder$2 = "ConsolePanel_placeholder__db6kuu1";
+var placeholderText$2 = "ConsolePanel_placeholderText__db6kuu2";
+var replInput = "ConsolePanel_replInput__db6kuu1a";
+var replInputRow = "ConsolePanel_replInputRow__db6kuu18";
+var replPrompt = "ConsolePanel_replPrompt__db6kuu19";
+var replRunButton = "ConsolePanel_replRunButton__db6kuu1b";
+var replRunButtonText = "ConsolePanel_replRunButtonText__db6kuu1c";
+var toggleIndicator = "ConsolePanel_toggleIndicator__db6kuul";
+
+//#endregion
+//#region src/components/LogPanel.tsx
+const runCode = (code) => {
+	try {
+		const result = eval(code);
+		if (result instanceof Promise) result.then((r) => console.log(r)).catch((e) => console.error(e));
+		else console.log(result);
+	} catch (e) {
+		console.error(e);
+	}
+};
+const LogPanel = ({ logs, clearLogs }) => {
+	const [expandedArgs, setExpandedArgs] = useState(/* @__PURE__ */ new Set());
+	const [code, setCode] = useState("");
+	const inputRef = useRef(null);
+	const listRef = useRef(null);
+	const logsRef = useRef(logs);
+	logsRef.current = logs;
+	const scrollToBottom = (smooth) => {
+		if (logsRef.current.length === 0) return;
+		listRef.current?.invoke({
+			method: "scrollToPosition",
+			params: {
+				position: logsRef.current.length - 1,
+				smooth
+			}
+		}).exec();
+	};
+	useEffect(() => {
+		scrollToBottom(true);
+	}, [logs]);
+	const toggleArg = (key) => {
+		setExpandedArgs((prev) => {
+			const next = new Set(prev);
+			if (next.has(key)) next.delete(key);
+			else next.add(key);
+			return next;
+		});
+	};
+	const handleRun = () => {
+		const trimmed = code.trim();
+		if (!trimmed) return;
+		setCode("");
+		inputRef.current?.invoke({
+			method: "setValue",
+			params: { value: "" }
+		}).exec();
+		runCode(trimmed);
+		setTimeout(() => scrollToBottom(false), 100);
+	};
+	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 (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}>
+              {isExpanded ? "▼" : "▶"}
+            </text>
+            <text className={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 === "object") {
+			let preview = "Object";
+			if (Array.isArray(arg)) preview = `Array(${arg.length})`;
+			else if (arg instanceof Map) preview = `Map(${arg.size})`;
+			else if (arg instanceof Set) preview = `Set(${arg.size})`;
+			else if (arg instanceof Date) preview = `Date`;
+			else if (arg instanceof RegExp) preview = `RegExp`;
+			else if (arg instanceof Error) preview = `${arg.constructor.name}`;
+			else if (arg?.constructor?.name && arg.constructor.name !== "Object") preview = arg.constructor.name;
+			let jsonString;
+			if (arg instanceof Map) jsonString = `{\n${Array.from(arg.entries()).map(([k, v]) => `  [${stringify(k)}, ${stringify(v)}]`).join(",\n")}\n}`;
+			else if (arg instanceof Set) jsonString = `{\n${Array.from(arg.values()).map((v) => stringify(v)).join(", ")}\n}`;
+			else jsonString = stringify(arg, null, 2, { references: true }) ?? String(arg);
+			return <view className={argObject}>
+          <view className={argObjectHeader} bindtap={() => toggleArg(key)}>
+            <text className={toggleIndicator}>
+              {isExpanded ? "▼" : "▶"}
+            </text>
+            <text className={argObjectPreview}>{preview}</text>
+          </view>
+          {isExpanded && <view className={argObjectContent}>
+              <text className={argObjectJson}>{jsonString}</text>
+            </view>}
+        </view>;
+		}
+		return <text className={argPrimitive({ level })}>{String(arg)}</text>;
+	};
+	return <view className={logContainer}>
+      <view className={logHeader}>
+        <text className={logCount}>Total {logs.length} logs</text>
+        <view style={{
+		display: "flex",
+		flexDirection: "row",
+		gap: 8
+	}}>
+          <view className={clearButton$2} bindtap={clearLogs}>
+            <text className={clearButtonText$2}>Clear</text>
+          </view>
+        </view>
+      </view>
+      <list ref={listRef} scroll-orientation="vertical" className={logList} initial-scroll-index={Math.max(0, logs.length - 1)}>
+        {logs.length === 0 ? <list-item item-key="empty-state">
+            <view className={placeholder$2}>
+              <text className={placeholderText$2}>
+                No logs yet. Try console.log("Hello!")
+              </text>
+            </view>
+          </list-item> : logs.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 })}>
+                      {log.level.toUpperCase()}
+                    </text>
+                    <text className={logTime}>
+                      {new Date(log.timestamp).toISOString()}
+                    </text>
+                  </view>
+                  <view className={logArgsContainer}>
+                    {log.args.map((arg, index) => <view key={`${log.id}-${index.toString()}`} className={logArgItem}>
+                        {renderArg(arg, `${log.id}-${index.toString()}`, log.level)}
+                      </view>)}
+                  </view>
+                </view>
+              </list-item>;
+	})}
+      </list>
+      <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>
+        </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$2 = "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>)}
+          </view> : <text className={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>
+    </>;
+};
+
+//#endregion
+//#region src/components/NetworkPanel.tsx
+const NetworkPanel = ({ networks, clearNetworks }) => {
+	const [selectedId, setSelectedId] = useState(null);
+	const [activeTab, setActiveTab] = useState("general");
+	const formatDuration = (duration) => {
+		if (!duration) return "-";
+		if (duration < 1e3) return `${duration}ms`;
+		return `${(duration / 1e3).toFixed(2)}s`;
+	};
+	const extractPath = (url) => {
+		const pathMatch = url.match(/^https?:\/\/[^/]+(.*)$/);
+		if (pathMatch?.[1]) return pathMatch[1].startsWith("/") ? pathMatch[1].slice(1) : pathMatch[1];
+		return url;
+	};
+	const getGeneralInfo = (network) => {
+		return [
+			{
+				key: "URL",
+				value: network.url
+			},
+			{
+				key: "Method",
+				value: network.method
+			},
+			network.statusCode ? {
+				key: "Status",
+				value: String(network.statusCode)
+			} : null,
+			{
+				key: "Request Time",
+				value: new Date(network.startTime).toISOString()
+			},
+			network.endTime ? {
+				key: "Response Time",
+				value: new Date(network.endTime).toISOString()
+			} : null,
+			network.duration ? {
+				key: "Duration",
+				value: formatDuration(network.duration)
+			} : null
+		].filter((item) => item !== null);
+	};
+	const getStatusCodeVariant = (status, statusCode) => {
+		if (status === "pending") return "pending";
+		if (status === "error") return "error";
+		if (statusCode && statusCode >= 200 && statusCode < 300) return "success";
+		return "error";
+	};
+	return <view className={container$2}>
+      <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>
+        </view>
+      </view>
+
+      {networks.length === 0 ? <view className={placeholder$1}>
+          <text className={placeholderText$1}>No network requests yet</text>
+        </view> : <list className={list$1}>
+          {networks.map((network) => <list-item key={network.id} item-key={network.id}>
+              <view className={item$1({ status: network.status })}>
+                <view className={itemHeader$1} bindtap={() => setSelectedId(selectedId === network.id ? null : network.id)}>
+                  <text className={method({ type: network.method })}>
+                    {network.method}
+                  </text>
+                  {network.statusCode && <text className={statusCode({ type: getStatusCodeVariant(network.status, network.statusCode) })}>
+                      {network.statusCode}
+                    </text>}
+                  {network.status === "pending" && <text className={statusCode({ type: "pending" })}>
+                      Pending...
+                    </text>}
+                  <text className={time}>
+                    {formatDuration(network.duration)}
+                  </text>
+                  <text className={time}>
+                    {new Date(network.startTime).toISOString()}
+                  </text>
+                </view>
+
+                <text className={path} bindtap={() => setSelectedId(selectedId === network.id ? null : network.id)}>
+                  {extractPath(network.url)}
+                </text>
+
+                {selectedId === network.id && <view className={detailsContainer$1}>
+                    {}
+                    <view className={tabs$1}>
+                      <view className={tab({ active: activeTab === "general" })} bindtap={() => setActiveTab("general")}>
+                        <text className={tabText({ active: activeTab === "general" })}>
+                          General
+                        </text>
+                      </view>
+                      <view className={tab({ active: activeTab === "request" })} bindtap={() => setActiveTab("request")}>
+                        <text className={tabText({ active: activeTab === "request" })}>
+                          Request
+                        </text>
+                      </view>
+                      <view className={tab({ active: activeTab === "response" })} bindtap={() => setActiveTab("response")}>
+                        <text className={tabText({ active: activeTab === "response" })}>
+                          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}>
+                                {item.value}
+                              </text>
+                            </view>)}
+                        </view>}
+
+                      {activeTab === "request" && <NetworkDetailSection headers={network.requestHeaders} body={network.requestBody} />}
+
+                      {activeTab === "response" && <NetworkDetailSection headers={network.responseHeaders} body={network.responseBody} error={network.error} />}
+                    </view>
+                  </view>}
+              </view>
+            </list-item>)}
+        </list>}
+    </view>;
+};
+
+//#endregion
+//#region src/components/PerformancePanel.css.ts
+var clearButton = "PerformancePanel_clearButton__19p8bog3";
+var clearButtonText = "PerformancePanel_clearButtonText__19p8bog4";
+var container$1 = "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) => {
+	return entry.entryType === "metric" && entry.name === "fcp";
+};
+const extractFcpMetrics = (entry) => {
+	if (!isMetricFcpEntry(entry) || !entry.rawEntry) return null;
+	const metricEntry = entry.rawEntry;
+	return {
+		totalFcp: metricEntry.totalFcp ?? void 0,
+		lynxFcp: metricEntry.lynxFcp ?? void 0,
+		fcp: metricEntry.fcp ?? void 0
+	};
+};
+const formatDuration = (ms) => {
+	if (ms === void 0) return "-";
+	return `${ms.toFixed(2)}ms`;
+};
+const getPrimaryFcpLabel = (entry) => {
+	const fcpMetrics = extractFcpMetrics(entry);
+	if (!fcpMetrics) return "";
+	const { totalFcp, lynxFcp, fcp } = fcpMetrics;
+	if (totalFcp?.duration !== void 0) return `totalFcp: ${formatDuration(totalFcp.duration)}`;
+	if (lynxFcp?.duration !== void 0) return `lynxFcp: ${formatDuration(lynxFcp.duration)}`;
+	if (fcp?.duration !== void 0) return `fcp: ${formatDuration(fcp.duration)}`;
+	return "";
+};
+const PerformancePanel = ({ performances, clearPerformances }) => {
+	const [selectedId, setSelectedId] = useState(null);
+	if (performances.length === 0) return <view className={container$1}>
+        <view className={header}>
+          <text className={count}>0 entries</text>
+          <view bindtap={() => {
+		console.log("[PerformancePanel] performances", performances);
+	}} style={{
+		padding: "10px",
+		backgroundColor: "red"
+	}}>
+            <text>Log</text>
+          </view>
+          <view bindtap={clearPerformances} className={clearButton}>
+            <text className={clearButtonText}>Clear</text>
+          </view>
+        </view>
+        <view className={placeholder}>
+          <text className={placeholderText}>
+            No performance data yet...
+          </text>
+        </view>
+      </view>;
+	return <view className={container$1}>
+      <view className={header}>
+        <text className={count}>{performances.length} entries</text>
+        <view bindtap={clearPerformances} className={clearButton}>
+          <text className={clearButtonText}>Clear</text>
+        </view>
+      </view>
+
+      <list className={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 })}>
+                    {perf.entryType}
+                  </text>
+                  <text className={entryName}>{perf.name}</text>
+                  <text className={timestamp}>
+                    {new Date(perf.timestamp).toISOString()}
+                  </text>
+                </view>
+
+                <view bindtap={() => setSelectedId(selectedId === perf.id ? null : perf.id)}>
+                  {isMetricFcp && primaryFcp && <text className={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}>
+                                전체 FCP
+                              </text>
+                              <text className={fcpMetricValue}>
+                                {formatDuration(totalFcp.duration)}
+                              </text>
+                            </view>
+                            <text className={fcpMetricDescription}>
+                              PrepareTemplate Start부터 Paint End 까지 걸리는
+                              시간
+                            </text>
+                          </view>}
+
+                        {lynxFcp !== void 0 && <view className={fcpMetric}>
+                            <view className={fcpMetricHeader}>
+                              <text className={fcpMetricName}>LynxFCP</text>
+                              <text className={fcpMetricValue}>
+                                {formatDuration(lynxFcp.duration)}
+                              </text>
+                            </view>
+                            <text className={fcpMetricDescription}>
+                              Bundle Load 시작부터 Paint End 까지 걸리는 시간
+                            </text>
+                          </view>}
+
+                        {fcp !== void 0 && <view className={fcpMetric}>
+                            <view className={fcpMetricHeader}>
+                              <text className={fcpMetricName}>
+                                렌더링 FCP
+                              </text>
+                              <text className={fcpMetricValue}>
+                                {formatDuration(fcp.duration)}
+                              </text>
+                            </view>
+                            <text className={fcpMetricDescription}>
+                              TemplateBundle 준비부터 Paint End 까지 걸리는 시간
+                            </text>
+                          </view>}
+                      </view>}
+
+                    {!!perf.rawEntry && <view className={rawEntrySection}>
+                        <text className={detailTitle}>Raw Entry</text>
+                        <text className={rawEntry}>
+                          {String(stringify(perf.rawEntry, null, 2, { references: true }))}
+                        </text>
+                      </view>}
+                  </view>}
+              </view>
+            </list-item>;
+	})}
+      </list>
+    </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 = useRef(null);
+	const [activeIndex, setActiveIndex] = useState(0);
+	return <view className={tabs}>
+      <view className={tabHeader}>
+        {props.items.map((item, i) => <view key={item.key} className={tabTriggerButton} bindtap={() => {
+		setActiveIndex(i);
+		tabContentsRef.current?.invoke({
+			method: "scrollToPosition",
+			params: {
+				position: i,
+				smooth: true
+			}
+		}).exec();
+	}}>
+            <text className={tabTriggerButtonText({ active: i === activeIndex })}>
+              {item.label}
+            </text>
+            {i === 0 && <view className={tabTriggerIndicator} style={{ transform: `translateX(${activeIndex * 100}%)` }}>
+                <view className={tabTriggerIndicatorLine} />
+              </view>}
+          </view>)}
+      </view>
+
+      <list ref={tabContentsRef} className={tabContents} scroll-orientation="horizontal" item-snap={{
+		factor: 0,
+		offset: 0
+	}} 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}>
+            {item.renderContent()}
+          </list-item>)}
+      </list>
+    </view>;
+}
+
+//#endregion
+//#region src/components/ConsolePanel.tsx
+const ConsolePanel = () => {
+	const { logs, clearLogs } = useConsole();
+	const { networks, clearNetworks } = useNetwork();
+	const { performances, clearPerformances } = usePerformance();
+	return <view className={container$3}>
+      <Tabs 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} />
+		}
+	]} />
+    </view>;
+};
+
+//#endregion
+//#region src/components/FloatingButton.css.ts
+var button = "FloatingButton_button__1homwpu2";
+var container = "FloatingButton_container__1homwpu1";
+var reloadButton = "FloatingButton_reloadButton__1homwpu5";
+var reloadIcon = "FloatingButton_reloadIcon__1homwpu6";
+var subtitle = "FloatingButton_subtitle__1homwpu4";
+var title = "FloatingButton_title__1homwpu3";
+var wrapper = "FloatingButton_wrapper__1homwpu0";
+
+//#endregion
+//#region src/components/FloatingButton.tsx
+const FloatingButton = ({ bindtap, isVisible, children }) => {
+	if (!isVisible) return null;
+	const handleReload = () => {
+		try {
+			lynx.reload({}, () => {
+				console.log("reloaded!");
+			});
+		} catch (e) {
+			console.error("[LynxConsole] reload failed:", e);
+		}
+	};
+	return <view className={wrapper}>
+      <view className={container} bindtap={bindtap}>
+        <view className={button}>{children}</view>
+      </view>
+      <view className={reloadButton} bindtap={handleReload}>
+        <text className={reloadIcon}>{"↻"}</text>
+      </view>
+    </view>;
+};
+
+//#endregion
+//#region src/index.tsx
+const LynxConsole = forwardRef(({ theme = "light", safeAreaInsetBottom = "50px" }, ref) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const [shouldClose, setShouldClose] = useState(false);
+	const { performances } = usePerformance();
+	const latestFcp = useMemo(() => {
+		for (let i = performances.length - 1; i >= 0; i--) {
+			const perf = performances[i];
+			if (perf && perf.entryType === "metric" && perf.name === "fcp") {
+				const metricEntry = perf.rawEntry;
+				if (metricEntry?.totalFcp?.duration !== void 0) return metricEntry.totalFcp;
+				if (metricEntry?.lynxFcp?.duration !== void 0) return metricEntry.lynxFcp;
+			}
+		}
+	}, [performances]);
+	useImperativeHandle(ref, () => ({
+		open: () => {
+			setIsOpen(true);
+			setShouldClose(false);
+		},
+		close: () => {
+			setShouldClose(true);
+		},
+		isOpen: () => isOpen
+	}));
+	const handleOpenBottomSheet = () => {
+		setIsOpen(true);
+		setShouldClose(false);
+	};
+	const handleCloseBottomSheet = () => {
+		setIsOpen(false);
+		setShouldClose(false);
+	};
+	const themeClass = `data-seed-color-mode__${theme}-only`;
+	return <view className={themeClass}>
+        <FloatingButton bindtap={handleOpenBottomSheet} isVisible={!isOpen}>
+          <text className={title}>LynxConsole</text>
+          <text className={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 />
+          </BottomSheet>}
+      </view>;
+});
+
+//#endregion
+export { LynxConsole as default };
+//# sourceMappingURL=index.mjs.map