lynx-console 0.0.0

package/src/components/BottomSheet.tsx

@@ -0,0 +1,142 @@
+import { type ReactNode, useEffect, useState } from "@lynx-js/react";
+import type { BaseTouchEvent, Target } from "@lynx-js/types";
+import * as css from "./BottomSheet.css";
+
+interface BottomSheetProps {
+  children: ReactNode;
+  title?: string;
+  footer?: ReactNode;
+  onClose: () => void;
+  isOpen: boolean;
+  shouldClose?: boolean;
+  safeAreaInsetBottom?: string;
+}
+
+const MIN_HEIGHT = 200;
+const MAX_HEIGHT = 700;
+const DEFAULT_HEIGHT = 500;
+const CLOSE_DRAG_THRESHOLD = 30; // 30px 이상 아래로 드래그하면 닫힘
+
+// 마지막 높이 저장
+let savedHeight: number | null = null;
+
+export default function BottomSheet({
+  children,
+  title,
+  footer,
+  onClose,
+  isOpen,
+  shouldClose = false,
+  safeAreaInsetBottom = "25px",
+}: BottomSheetProps) {
+  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: BaseTouchEvent<Target>) => {
+    setIsDragging(true);
+    setDragStartY(e.detail.y);
+    setDragStartHeight(sheetHeight);
+    setTempHeight(sheetHeight);
+  };
+
+  const handleTouchMove = (e: BaseTouchEvent<Target>) => {
+    if (!isDragging) return;
+    const deltaY = dragStartY - e.detail.y;
+    const newHeight = Math.min(
+      Math.max(dragStartHeight + deltaY, MIN_HEIGHT),
+      MAX_HEIGHT,
+    );
+    setTempHeight(newHeight);
+  };
+
+  const handleTouchEnd = () => {
+    setIsDragging(false);
+
+    // 아래로 일정 30px 이상 드래그하면 닫기
+    const dragDistance = dragStartHeight - tempHeight;
+    setSheetHeight(tempHeight);
+    if (dragDistance > CLOSE_DRAG_THRESHOLD) {
+      handleClose();
+    }
+  };
+
+  return (
+    <scroll-view
+      className={css.backdrop}
+      style={{
+        opacity: isOpening || isClosing ? 0 : 1,
+      }}
+    >
+      <view className={css.overlay} bindtap={handleClose}>
+        <view
+          className={css.content}
+          catchtap={() => {}}
+          style={{
+            height: `${isDragging ? tempHeight : sheetHeight}px`,
+            transform:
+              isOpening || isClosing ? "translateY(100%)" : "translateY(0)",
+            transition: isDragging ? "none" : undefined,
+          }}
+        >
+          {/* catchtap: 이벤트 버블링 차단 */}
+          <view
+            className={css.handleContainer}
+            bindtouchstart={handleTouchStart}
+            bindtouchmove={handleTouchMove}
+            bindtouchend={handleTouchEnd}
+          >
+            <view className={css.handle} />
+          </view>
+          <view className={css.header}>
+            {title && <text className={css.title}>{title}</text>}
+          </view>
+          <view
+            className={css.body}
+            style={{
+              paddingBottom: safeAreaInsetBottom,
+            }}
+          >
+            {children}
+          </view>
+          {footer && <view className={css.footer}>{footer}</view>}
+        </view>
+      </view>
+    </scroll-view>
+  );
+}

package/src/components/ConsolePanel.css.ts

@@ -0,0 +1,261 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { typography } from "../styles/typography";
+import { vars } from "../styles/vars";
+
+export const container = style({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+});
+
+export const placeholder = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100%",
+});
+
+export const placeholderText = style({
+  ...typography("t4", "regular"),
+  color: vars.$color.fg.disabled,
+});
+
+export const logContainer = style({
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  paddingTop: 4,
+});
+
+export const logHeader = style({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: 8,
+  paddingBottom: 4,
+  borderBottomWidth: 1,
+  borderBottomColor: vars.$color.stroke.neutralSubtle,
+  borderBottomStyle: "solid",
+});
+
+export const logCount = style({
+  ...typography("t3", "regular"),
+  color: vars.$color.fg.neutralSubtle,
+});
+
+export const clearButton = style({
+  padding: "6px 12px",
+  backgroundColor: vars.$color.bg.neutralWeak,
+  borderRadius: 4,
+});
+
+export const clearButtonText = style({
+  ...typography("t3", "medium"),
+  color: vars.$color.fg.neutral,
+});
+
+export const logList = style({
+  flex: 1,
+});
+
+export const logItem = recipe({
+  base: {
+    padding: "8px",
+    borderBottomWidth: 1,
+    borderBottomColor: vars.$color.stroke.neutralWeak,
+    borderBottomStyle: "solid",
+  },
+  variants: {
+    level: {
+      log: {},
+      info: {},
+      warn: {
+        backgroundColor: vars.$color.palette.yellow100,
+      },
+      error: {
+        backgroundColor: vars.$color.palette.red100,
+      },
+    },
+  },
+});
+
+export const logItemHeader = style({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  marginBottom: 4,
+});
+
+export const logLevel = recipe({
+  base: {
+    ...typography("t2", "bold"),
+    marginRight: 8,
+  },
+  variants: {
+    level: {
+      log: {
+        color: vars.$color.palette.green600,
+      },
+      info: {
+        color: vars.$color.palette.blue600,
+      },
+      warn: {
+        color: vars.$color.palette.yellow600,
+      },
+      error: {
+        color: vars.$color.palette.red600,
+      },
+    },
+  },
+});
+
+export const logTime = style({
+  ...typography("t2", "regular"),
+  color: vars.$color.fg.neutralSubtle,
+});
+
+export const toggleIndicator = style({
+  ...typography("t2", "regular"),
+  color: vars.$color.fg.neutralSubtle,
+  marginLeft: 4,
+  alignSelf: "flex-start",
+});
+
+export const logMessage = style({
+  ...typography("t3", "regular"),
+  color: vars.$color.fg.neutral,
+  wordBreak: "break-all",
+});
+
+export const logArgsContainer = style({
+  display: "flex",
+  flexDirection: "row",
+  flexWrap: "wrap",
+  gap: 8,
+});
+
+export const logArgItem = style({
+  ...typography("t3", "regular"),
+});
+
+export const argNull = style({
+  color: vars.$color.fg.neutralSubtle,
+});
+
+export const argUndefined = style({
+  color: vars.$color.fg.neutralSubtle,
+});
+
+export const argString = recipe({
+  base: {
+    ...typography("t3", "regular"),
+  },
+  variants: {
+    level: {
+      log: { color: vars.$color.fg.neutral },
+      info: { color: vars.$color.fg.neutral },
+      warn: { color: vars.$color.palette.yellow900 },
+      error: { color: vars.$color.palette.red900 },
+    },
+  },
+});
+
+export const argPrimitive = recipe({
+  base: {
+    ...typography("t3", "regular"),
+  },
+  variants: {
+    level: {
+      log: { color: vars.$color.palette.blue600 },
+      info: { color: vars.$color.palette.blue600 },
+      warn: { color: vars.$color.palette.yellow900 },
+      error: { color: vars.$color.palette.red900 },
+    },
+  },
+});
+
+export const argObject = style({
+  display: "flex",
+  flexDirection: "column",
+});
+
+export const argObjectHeader = style({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 4,
+});
+
+export const argObjectPreview = style({
+  ...typography("t3", "medium"),
+  color: vars.$color.fg.neutral,
+});
+
+export const argObjectContent = style({
+  marginTop: 4,
+  display: "flex",
+  flexDirection: "column",
+  gap: 4,
+});
+
+export const argObjectProperty = style({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "flex-start",
+});
+
+export const argObjectKey = style({
+  ...typography("t3", "medium"),
+  color: vars.$color.palette.purple600,
+});
+
+export const argObjectJson = style({
+  ...typography("t3", "regular"),
+  color: vars.$color.fg.neutral,
+});
+
+export const replInputRow = style({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 8,
+  paddingTop: 8,
+  paddingBottom: 8,
+  marginTop: -1,
+  borderTopWidth: 1,
+  borderTopColor: vars.$color.stroke.neutralSubtle,
+  borderTopStyle: "solid",
+  backgroundImage: `linear-gradient(to bottom, transparent, ${vars.$color.bg.layerDefault})`,
+  backgroundSize: "100% 32px",
+  backgroundRepeat: "no-repeat",
+  backgroundPosition: "top",
+  backgroundColor: vars.$color.bg.layerDefault,
+});
+
+export const replPrompt = style({
+  ...typography("t10", "medium"),
+  color: vars.$color.fg.placeholder,
+  paddingBottom: 8,
+});
+
+export const replInput = style({
+  flex: 1,
+  ...typography("t5", "regular"),
+  color: vars.$color.fg.neutral,
+  caretColor: vars.$color.palette.green600,
+  paddingBottom: 8,
+});
+
+export const replRunButton = style({
+  padding: "4px 10px",
+  backgroundColor: vars.$color.palette.green100,
+  borderRadius: 4,
+  marginBottom: 8,
+});
+
+export const replRunButtonText = style({
+  ...typography("t3", "medium"),
+  color: vars.$color.palette.green600,
+});

package/src/components/ConsolePanel.tsx

@@ -0,0 +1,41 @@
+import { useConsole, useNetwork, usePerformance } from "../hooks";
+import * as css from "./ConsolePanel.css";
+import { LogPanel } from "./LogPanel";
+import { NetworkPanel } from "./NetworkPanel";
+import { PerformancePanel } from "./PerformancePanel";
+import Tabs from "./Tabs";
+
+export const ConsolePanel = () => {
+  const { logs, clearLogs } = useConsole();
+  const { networks, clearNetworks } = useNetwork();
+  const { performances, clearPerformances } = usePerformance();
+
+  return (
+    <view className={css.container}>
+      <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>
+  );
+};

package/src/components/FloatingButton.css.ts

@@ -0,0 +1,62 @@
+import { style } from "@vanilla-extract/css";
+import { typography } from "../styles/typography";
+import { vars } from "../styles/vars";
+
+export const wrapper = style({
+  position: "fixed",
+  right: "16px",
+  bottom: "84px",
+  zIndex: 9999,
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: "8px",
+});
+
+export const container = style({});
+
+export const button = style({
+  paddingLeft: "8px",
+  paddingRight: "8px",
+  paddingTop: "4px",
+  paddingBottom: "4px",
+  borderRadius: "12px",
+  backgroundColor: vars.$color.palette.green600,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "2px",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+});
+
+export const title = style({
+  ...typography("t4", "regular"),
+  color: vars.$color.palette.staticWhite,
+  textAlign: "center",
+});
+
+export const subtitle = style({
+  ...typography("t3", "regular"),
+  color: vars.$color.palette.staticWhite,
+  textAlign: "center",
+});
+
+export const reloadButton = style({
+  width: "32px",
+  height: "32px",
+  borderRadius: "16px",
+  backgroundColor: vars.$color.palette.green600,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+});
+
+export const reloadIcon = style({
+  fontSize: "20px",
+  lineHeight: "32px",
+  marginBottom: "5px",
+  color: vars.$color.palette.staticWhite,
+  textAlign: "center",
+});

package/src/components/FloatingButton.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from "@lynx-js/react";
+import * as css from "./FloatingButton.css";
+
+interface FloatingButtonProps {
+  bindtap: () => void;
+  isVisible: boolean;
+  children: ReactNode;
+}
+
+export const FloatingButton = ({
+  bindtap,
+  isVisible,
+  children,
+}: FloatingButtonProps) => {
+  if (!isVisible) return null;
+
+  const handleReload = () => {
+    try {
+      lynx.reload({}, () => {
+        console.log("reloaded!");
+      });
+    } catch (e) {
+      console.error("[LynxConsole] reload failed:", e);
+    }
+  };
+
+  return (
+    <view className={css.wrapper}>
+      <view className={css.container} bindtap={bindtap}>
+        <view className={css.button}>{children}</view>
+      </view>
+      <view className={css.reloadButton} bindtap={handleReload}>
+        <text className={css.reloadIcon}>{"\u21BB"}</text>
+      </view>
+    </view>
+  );
+};