lynx-console 0.1.1 → 0.2.0

package/src/components/BottomSheet.tsx

@@ -1,6 +1,6 @@
 import { type ReactNode, useEffect, useState } from "@lynx-js/react";
 import type { BaseTouchEvent, Target } from "@lynx-js/types";
-import * as css from "./BottomSheet.css";
+import "./BottomSheet.css";
 
 interface BottomSheetProps {
   children: ReactNode;
@@ -98,14 +98,14 @@ export default function BottomSheet({
 
   return (
     <scroll-view
-      className={css.backdrop}
+      className="bs-backdrop"
       style={{
         opacity: isOpening || isClosing ? 0 : 1,
       }}
     >
-      <view className={css.overlay} bindtap={handleClose}>
+      <view className="bs-overlay" bindtap={handleClose}>
         <view
-          className={css.content}
+          className="bs-content"
           catchtap={() => {}}
           style={{
             height: `${isDragging ? tempHeight : sheetHeight}px`,
@@ -116,25 +116,25 @@ export default function BottomSheet({
         >
           {/* catchtap: 이벤트 버블링 차단 */}
           <view
-            className={css.handleContainer}
+            className="bs-handleContainer"
             bindtouchstart={handleTouchStart}
             bindtouchmove={handleTouchMove}
             bindtouchend={handleTouchEnd}
           >
-            <view className={css.handle} />
+            <view className="bs-handle" />
           </view>
-          <view className={css.header}>
-            {title && <text className={css.title}>{title}</text>}
+          <view className="bs-header">
+            {title && <text className="bs-title">{title}</text>}
           </view>
           <view
-            className={css.body}
+            className="bs-body"
             style={{
               paddingBottom: safeAreaInsetBottom,
             }}
           >
             {children}
           </view>
-          {footer && <view className={css.footer}>{footer}</view>}
+          {footer && <view className="bs-footer">{footer}</view>}
         </view>
       </view>
     </scroll-view>

package/src/components/ConsolePanel.css

@@ -0,0 +1,402 @@
+.cp-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.cp-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.cp-placeholderText {
+  font-size: 0.875rem;
+  line-height: 1.1875rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-fg-disabled);
+}
+
+.cp-logContainer {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding-top: 4px;
+}
+
+.cp-logHeader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 3px;
+}
+
+.cp-filterWrapper {
+  position: relative;
+}
+
+.cp-filterButton {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 3px 6px;
+  background-color: var(--lynx-console-color-bg-neutral-weak);
+  border-radius: 4px;
+}
+
+.cp-filterButtonText {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-medium);
+  color: var(--lynx-console-color-fg-neutral-muted);
+}
+
+.cp-filterDropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+  background-color: var(--lynx-console-color-bg-layer-floating);
+  border-width: 1px;
+  border-color: var(--lynx-console-color-stroke-neutral-subtle);
+  border-style: solid;
+  border-radius: 8px;
+  padding: 4px 0;
+  z-index: 100;
+  min-width: 90px;
+}
+
+.cp-filterOption {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 12px;
+}
+
+.cp-filterCheckbox {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-medium);
+  width: 16px;
+}
+
+.cp-filterCheckbox--log {
+  color: var(--lynx-console-color-palette-green-600);
+}
+
+.cp-filterCheckbox--info {
+  color: var(--lynx-console-color-palette-blue-600);
+}
+
+.cp-filterCheckbox--warn {
+  color: var(--lynx-console-color-palette-yellow-600);
+}
+
+.cp-filterCheckbox--error {
+  color: var(--lynx-console-color-palette-red-600);
+}
+
+.cp-filterLabel {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-medium);
+}
+
+.cp-filterLabel--log {
+  color: var(--lynx-console-color-palette-green-600);
+}
+
+.cp-filterLabel--info {
+  color: var(--lynx-console-color-palette-blue-600);
+}
+
+.cp-filterLabel--warn {
+  color: var(--lynx-console-color-palette-yellow-600);
+}
+
+.cp-filterLabel--error {
+  color: var(--lynx-console-color-palette-red-600);
+}
+
+.cp-searchWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex: 1;
+  margin-left: 8px;
+  margin-right: 8px;
+  border-bottom-width: 1px;
+  border-bottom-color: var(--lynx-console-color-stroke-neutral-subtle);
+  border-bottom-style: solid;
+  gap: 8px;
+}
+
+.cp-searchPrompt {
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+  font-weight: var(--lynx-console-font-weight-medium);
+  color: var(--lynx-console-color-fg-placeholder);
+}
+
+.cp-searchInput {
+  flex: 1;
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-fg-neutral);
+  caret-color: var(--lynx-console-color-palette-green-600);
+}
+
+.cp-searchClear {
+  padding: 2px 4px;
+}
+
+.cp-searchClearText {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-medium);
+  color: var(--lynx-console-color-fg-placeholder);
+}
+
+.cp-clearButton {
+  padding: 3px 6px;
+  background-color: var(--lynx-console-color-bg-neutral-weak);
+  border-radius: 4px;
+}
+
+.cp-clearButtonText {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-medium);
+  color: var(--lynx-console-color-fg-neutral-muted);
+}
+
+.cp-logList {
+  flex: 1;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.cp-logItem {
+  padding: 8px;
+  border-bottom-width: 1px;
+  border-bottom-color: var(--lynx-console-color-stroke-neutral-weak);
+  border-bottom-style: solid;
+}
+
+.cp-logItem--warn {
+  background-color: var(--lynx-console-color-palette-yellow-100);
+}
+
+.cp-logItem--error {
+  background-color: var(--lynx-console-color-palette-red-100);
+}
+
+.cp-logItemHeader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 4px;
+}
+
+.cp-logLevel {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: var(--lynx-console-font-weight-bold);
+  margin-right: 8px;
+}
+
+.cp-logLevel--log {
+  color: var(--lynx-console-color-palette-green-600);
+}
+
+.cp-logLevel--info {
+  color: var(--lynx-console-color-palette-blue-600);
+}
+
+.cp-logLevel--warn {
+  color: var(--lynx-console-color-palette-yellow-600);
+}
+
+.cp-logLevel--error {
+  color: var(--lynx-console-color-palette-red-600);
+}
+
+.cp-logTime {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-fg-neutral-subtle);
+}
+
+.cp-toggleIndicator {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-fg-neutral-subtle);
+  margin-left: 4px;
+  align-self: flex-start;
+}
+
+.cp-logMessage {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-fg-neutral);
+  word-break: break-all;
+}
+
+.cp-logArgsContainer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.cp-logArgItem {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+}
+
+.cp-argNull {
+  color: var(--lynx-console-color-fg-neutral-subtle);
+}
+
+.cp-argUndefined {
+  color: var(--lynx-console-color-fg-neutral-subtle);
+}
+
+.cp-argString {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+}
+
+.cp-argString--log {
+  color: var(--lynx-console-color-fg-neutral);
+}
+
+.cp-argString--info {
+  color: var(--lynx-console-color-fg-neutral);
+}
+
+.cp-argString--warn {
+  color: var(--lynx-console-color-palette-yellow-900);
+}
+
+.cp-argString--error {
+  color: var(--lynx-console-color-palette-red-900);
+}
+
+.cp-argPrimitive {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+}
+
+.cp-argPrimitive--log {
+  color: var(--lynx-console-color-palette-blue-600);
+}
+
+.cp-argPrimitive--info {
+  color: var(--lynx-console-color-palette-blue-600);
+}
+
+.cp-argPrimitive--warn {
+  color: var(--lynx-console-color-palette-yellow-900);
+}
+
+.cp-argPrimitive--error {
+  color: var(--lynx-console-color-palette-red-900);
+}
+
+.cp-argObject {
+  display: flex;
+  flex-direction: column;
+}
+
+.cp-argObjectHeader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
+
+.cp-argObjectPreview {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-medium);
+  color: var(--lynx-console-color-fg-neutral);
+}
+
+.cp-argObjectContent {
+  margin-top: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.cp-argObjectProperty {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.cp-argObjectKey {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-medium);
+  color: var(--lynx-console-color-palette-purple-600);
+}
+
+.cp-argObjectJson {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-fg-neutral);
+}
+
+.cp-replInputRow {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  padding-top: 0;
+  padding-bottom: 8px;
+}
+
+.cp-replPrompt {
+  font-size: 1.625rem;
+  line-height: 2.1875rem;
+  font-weight: var(--lynx-console-font-weight-medium);
+  color: var(--lynx-console-color-fg-placeholder);
+  padding-bottom: 8px;
+}
+
+.cp-replInput {
+  flex: 1;
+  font-size: 1rem;
+  line-height: 1.375rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-fg-neutral);
+  caret-color: var(--lynx-console-color-palette-green-600);
+  padding-bottom: 8px;
+}
+
+.cp-replRunButton {
+  padding: 4px 10px;
+  background-color: var(--lynx-console-color-palette-green-100);
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+
+.cp-replRunButtonText {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-medium);
+  color: var(--lynx-console-color-palette-green-600);
+}

package/src/components/ConsolePanel.tsx

@@ -1,42 +1,76 @@
 import { useConsole, useNetwork, usePerformance } from "../hooks";
-import * as css from "./ConsolePanel.css";
+import type { CustomTab } from "../types";
+import "./ConsolePanel.css";
 import { LogPanel, dismissFilterDropdown } from "./LogPanel";
 import { NetworkPanel } from "./NetworkPanel";
 import { PerformancePanel } from "./PerformancePanel";
 import Tabs from "./Tabs";
 
-export const ConsolePanel = () => {
+interface ConsolePanelProps {
+  customTabs?: CustomTab[];
+}
+
+export const ConsolePanel = ({ customTabs }: ConsolePanelProps) => {
   const { logs, clearLogs } = useConsole();
   const { networks, clearNetworks } = useNetwork();
   const { performances, clearPerformances } = usePerformance();
 
+  const state = globalThis.__LYNX_CONSOLE__?.state;
+
+  const items: Array<{
+    key: string;
+    label: string;
+    renderContent: () => ReturnType<typeof LogPanel>;
+  }> = [];
+
+  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={css.container}>
-      <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}
-              />
-            ),
-          },
-        ]}
-      />
+    <view className="cp-container">
+      <Tabs onTabChange={dismissFilterDropdown} items={items} />
     </view>
   );
 };

package/src/components/FadeList.tsx

@@ -1,7 +1,5 @@
-import { useRef, useState } from "@lynx-js/react";
-import type { BaseEvent, NodesRef } from "@lynx-js/types";
-import { vars } from "../styles/vars";
-import * as css from "./FadeList.css";
+import { useRef } from "@lynx-js/react";
+import type { NodesRef } from "@lynx-js/types";
 
 interface FadeListProps {
   className?: string;
@@ -17,60 +15,17 @@ export const FadeList = ({
   children,
   ...listProps
 }: FadeListProps) => {
-  const [fadeState, setFadeState] = useState({ atTop: true, atBottom: true });
-  const fadeRef = useRef({ atTop: true, atBottom: true });
   const internalListRef = useRef<NodesRef>(null);
   const listRef = externalListRef ?? internalListRef;
 
   return (
-    <>
-      <view
-        className={css.fadeTop}
-        style={{
-          background: fadeState.atTop
-            ? "linear-gradient(to bottom, #ffffff00, #ffffff00)"
-            : `linear-gradient(to bottom, ${vars.$color.bg.layerFloating}, #ffffff00)`,
-        }}
-      />
-      <list
-        ref={listRef}
-        scroll-orientation="vertical"
-        className={className}
-        scroll-event-throttle={16}
-        bindscroll={(
-          e: BaseEvent<
-            "bindscroll",
-            {
-              scrollTop: number;
-              scrollHeight: number;
-              listHeight: number;
-            }
-          >,
-        ) => {
-          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 });
-          }
-        }}
-        {...listProps}
-      >
-        {children}
-      </list>
-      <view
-        className={css.fadeBottom}
-        style={{
-          background: fadeState.atBottom
-            ? "linear-gradient(to top, #ffffff00, #ffffff00)"
-            : `linear-gradient(to top, ${vars.$color.bg.layerFloating}, #ffffff00)`,
-        }}
-      />
-    </>
+    <list
+      ref={listRef}
+      scroll-orientation="vertical"
+      className={className}
+      {...listProps}
+    >
+      {children}
+    </list>
   );
 };