lynx-console 0.1.0 → 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

@@ -0,0 +1,31 @@
+import { useRef } from "@lynx-js/react";
+import type { NodesRef } from "@lynx-js/types";
+
+interface FadeListProps {
+  className?: string;
+  listRef?: React.RefObject<NodesRef>;
+  children: React.ReactNode;
+  "preload-buffer-count"?: number;
+  "initial-scroll-index"?: number;
+}
+
+export const FadeList = ({
+  className,
+  listRef: externalListRef,
+  children,
+  ...listProps
+}: FadeListProps) => {
+  const internalListRef = useRef<NodesRef>(null);
+  const listRef = externalListRef ?? internalListRef;
+
+  return (
+    <list
+      ref={listRef}
+      scroll-orientation="vertical"
+      className={className}
+      {...listProps}
+    >
+      {children}
+    </list>
+  );
+};

package/{dist/assets/src/components/FloatingButton.css.ts.vanilla-BaG0OI6p.css → src/components/FloatingButton.css}

@@ -1,4 +1,4 @@
-.FloatingButton_wrapper__1homwpu0 {
+.fb-wrapper {
   position: fixed;
   z-index: 9999;
   display: flex;
@@ -6,9 +6,10 @@
   align-items: center;
   gap: 8px;
   overflow: visible;
-  transition: transform var(--seed-duration-d4) cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform var(--lynx-console-duration-d4) cubic-bezier(0.4, 0, 0.2, 1);
 }
-.FloatingButton_button__1homwpu1 {
+
+.fb-button {
   position: relative;
   overflow: hidden;
   padding-left: 8px;
@@ -16,7 +17,7 @@
   padding-top: 4px;
   padding-bottom: 4px;
   border-radius: 12px;
-  background-color: var(--seed-color-palette-green-600);
+  background-color: var(--lynx-console-color-palette-green-600);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -24,7 +25,8 @@
   gap: 2px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
-.FloatingButton_shineOverlay__1homwpu2 {
+
+.fb-shineOverlay {
   position: absolute;
   top: -50%;
   left: -25%;
@@ -33,35 +35,39 @@
   background-color: rgba(255, 255, 255, 0.2);
   border-radius: 9999px;
 }
-.FloatingButton_title__1homwpu3 {
+
+.fb-title {
   font-size: 0.875rem;
   line-height: 1.1875rem;
-  font-weight: var(--seed-font-weight-regular);
-  color: var(--seed-color-palette-static-white);
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-palette-static-white);
   text-align: center;
 }
-.FloatingButton_subtitle__1homwpu4 {
+
+.fb-subtitle {
   font-size: 0.8125rem;
   line-height: 1.125rem;
-  font-weight: var(--seed-font-weight-regular);
-  color: var(--seed-color-palette-static-white);
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-palette-static-white);
   text-align: center;
 }
-.FloatingButton_reloadButton__1homwpu5 {
+
+.fb-reloadButton {
   overflow: visible;
   width: 32px;
   height: 32px;
   border-radius: 16px;
-  background-color: var(--seed-color-palette-green-600);
+  background-color: var(--lynx-console-color-palette-green-600);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
-.FloatingButton_reloadIcon__1homwpu6 {
+
+.fb-reloadIcon {
   font-size: 20px;
   line-height: 32px;
   margin-bottom: 5px;
-  color: var(--seed-color-palette-static-white);
+  color: var(--lynx-console-color-palette-static-white);
   text-align: center;
-}
+}