lynx-console 0.1.0 → 0.2.0

package/src/components/FloatingButton.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "@lynx-js/react";
 import { useLongPressDrag } from "../hooks/useLongPressDrag";
-import * as css from "./FloatingButton.css";
+import "./FloatingButton.css";
 
 interface FloatingButtonProps {
   bindtap: () => void;
@@ -45,26 +45,29 @@ export const FloatingButton = ({
   const isDragging = phase === "dragging";
 
   return (
-    <view
-      className={css.wrapper}
-      style={{
-        right: `${right}px`,
-        bottom: `${bottom}px`,
-        transform: isDragging ? "scale(1.05)" : "scale(1)",
-      }}
-      {...handlers}
-    >
-      <view className={css.button}>
-        {children}
-        <view className={css.shineOverlay} style={SHINE_STYLES[phase]} />
-      </view>
+    <>
       <view
-        className={css.reloadButton}
-        catchtouchstart={() => clearTimer()}
-        bindtap={handleReload}
+        className={"fb-wrapper"}
+        consume-slide-event={[[-180, 180]]}
+        style={{
+          right: `${right}px`,
+          bottom: `${bottom}px`,
+          transform: isDragging ? "scale(1.05)" : "scale(1)",
+        }}
+        {...handlers}
       >
-        <text className={css.reloadIcon}>{"\u21BB"}</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"}>{"\u21BB"}</text>
+        </view>
       </view>
-    </view>
+    </>
   );
 };

package/src/components/LogPanel.tsx

@@ -2,8 +2,8 @@ import { useEffect, useMemo, useRef, useState } from "@lynx-js/react";
 import type { BaseEvent, InputInputEvent, NodesRef } from "@lynx-js/types";
 import { stringify } from "javascript-stringify";
 import type { LogEntry, LogLevel } from "../types";
-import { vars } from "../styles/vars";
-import * as css from "./ConsolePanel.css";
+import "./ConsolePanel.css";
+import { FadeList } from "./FadeList";
 
 const LOG_LEVELS: LogLevel[] = ["log", "info", "warn", "error"];
 
@@ -40,8 +40,6 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
   );
   const [filterOpen, setFilterOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState(savedSearchQuery);
-  const [fadeState, setFadeState] = useState({ atTop: true, atBottom: true });
-  const fadeRef = useRef({ atTop: true, atBottom: true });
   const inputRef = useRef<NodesRef>(null);
   const searchInputRef = useRef<NodesRef>(null);
   const listRef = useRef<NodesRef>(null);
@@ -141,11 +139,11 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
     const isExpanded = expandedArgs.has(key);
 
     if (arg === null) {
-      return <text className={css.argNull}>null</text>;
+      return <text className={"cp-argNull"}>null</text>;
     }
 
     if (arg === undefined) {
-      return <text className={css.argUndefined}>undefined</text>;
+      return <text className={"cp-argUndefined"}>undefined</text>;
     }
 
     if (typeof arg === "string") {
@@ -153,17 +151,16 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
       const shouldTruncate = arg.length > MAX_LENGTH;
 
       if (!shouldTruncate) {
-        return <text className={css.argString({ level })}>{arg}</text>;
+        return <text className={`cp-argString cp-argString--${level}`}>{arg}</text>;
       }
 
-      // 문자열이 길 경우 토글 버튼 추가
       return (
-        <view className={css.argObject}>
-          <view className={css.argObjectHeader} bindtap={() => toggleArg(key)}>
-            <text className={css.toggleIndicator}>
+        <view className={"cp-argObject"}>
+          <view className={"cp-argObjectHeader"} bindtap={() => toggleArg(key)}>
+            <text className={"cp-toggleIndicator"}>
               {isExpanded ? "▼" : "▶"}
             </text>
-            <text className={css.argString({ level })}>
+            <text className={`cp-argString cp-argString--${level}`}>
               {isExpanded ? arg : `${arg.slice(0, MAX_LENGTH)}...`}
             </text>
           </view>
@@ -172,7 +169,7 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
     }
 
     if (typeof arg === "number" || typeof arg === "boolean") {
-      return <text className={css.argPrimitive({ level })}>{String(arg)}</text>;
+      return <text className={`cp-argPrimitive cp-argPrimitive--${level}`}>{String(arg)}</text>;
     }
 
     if (typeof arg === "object") {
@@ -208,50 +205,50 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
       }
 
       return (
-        <view className={css.argObject}>
-          <view className={css.argObjectHeader} bindtap={() => toggleArg(key)}>
-            <text className={css.toggleIndicator}>
+        <view className={"cp-argObject"}>
+          <view className={"cp-argObjectHeader"} bindtap={() => toggleArg(key)}>
+            <text className={"cp-toggleIndicator"}>
               {isExpanded ? "▼" : "▶"}
             </text>
-            <text className={css.argObjectPreview}>{preview}</text>
+            <text className={"cp-argObjectPreview"}>{preview}</text>
           </view>
           {isExpanded && (
-            <view className={css.argObjectContent}>
-              <text className={css.argObjectJson}>{jsonString}</text>
+            <view className={"cp-argObjectContent"}>
+              <text className={"cp-argObjectJson"}>{jsonString}</text>
             </view>
           )}
         </view>
       );
     }
 
-    return <text className={css.argPrimitive({ level })}>{String(arg)}</text>;
+    return <text className={`cp-argPrimitive cp-argPrimitive--${level}`}>{String(arg)}</text>;
   };
 
   return (
     <view
-      className={css.logContainer}
+      className={"cp-logContainer"}
       bindtap={() => { if (filterOpen) setFilterOpen(false); }}
     >
-      <view className={css.logHeader}>
-        <view className={css.filterWrapper}>
+      <view className={"cp-logHeader"}>
+        <view className={"cp-filterWrapper"}>
           <view
-            className={css.filterButton}
+            className={"cp-filterButton"}
             catchtap={() => setFilterOpen((v) => !v)}
           >
-            <text className={css.filterButtonText}>Filter  ▼</text>
+            <text className={"cp-filterButtonText"}>Filter  ▼</text>
           </view>
           {filterOpen && (
-            <view className={css.filterDropdown} catchtap={() => {}}>
+            <view className={"cp-filterDropdown"} catchtap={() => {}}>
               {LOG_LEVELS.map((level) => (
                 <view
                   key={level}
-                  className={css.filterOption}
+                  className={"cp-filterOption"}
                   bindtap={() => toggleLevel(level)}
                 >
-                  <text className={css.filterCheckbox({ level })}>
+                  <text className={`cp-filterCheckbox cp-filterCheckbox--${level}`}>
                     {enabledLevels.has(level) ? "✅" : "⬜"}
                   </text>
-                  <text className={css.filterLabel({ level })}>
+                  <text className={`cp-filterLabel cp-filterLabel--${level}`}>
                     {level.toUpperCase()}
                   </text>
                 </view>
@@ -259,53 +256,46 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
             </view>
           )}
         </view>
-        <view className={css.searchWrapper}>
-          <text className={css.searchPrompt}>{"›"}</text>
+        <view className={"cp-searchWrapper"}>
+          <text className={"cp-searchPrompt"}>{"›"}</text>
           <input
             ref={searchInputRef}
-            className={css.searchInput}
+            className={"cp-searchInput"}
             placeholder="Search logs..."
             bindinput={(e: BaseEvent<"bindinput", InputInputEvent>) =>
               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={css.clearButton} bindtap={clearLogs}>
-            <text className={css.clearButtonText}>Clear</text>
+          <view className={"cp-clearButton"} bindtap={clearLogs}>
+            <text className={"cp-clearButtonText"}>🗑</text>
           </view>
         </view>
       </view>
-      <view
-        className={css.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={css.logList}
+      <FadeList
+        listRef={listRef}
+        className={"cp-logList"}
         preload-buffer-count={10}
         initial-scroll-index={Math.max(0, filteredLogs.length - 1)}
-        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 });
-          }
-        }}
       >
         {filteredLogs.length === 0 ? (
           <list-item item-key="empty-state">
-            <view className={css.placeholder}>
-              <text className={css.placeholderText}>
+            <view className={"cp-placeholder"}>
+              <text className={"cp-placeholderText"}>
                 No logs yet. Try console.log("Hello!")
               </text>
             </view>
@@ -314,20 +304,20 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
           filteredLogs.map((log) => {
             return (
               <list-item key={log.id} item-key={log.id}>
-                <view className={css.logItem({ level: log.level })}>
-                  <view className={css.logItemHeader}>
-                    <text className={css.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={css.logTime}>
+                    <text className={"cp-logTime"}>
                       {new Date(log.timestamp).toISOString()}
                     </text>
                   </view>
-                  <view className={css.logArgsContainer}>
+                  <view className={"cp-logArgsContainer"}>
                     {log.args.map((arg, index) => (
                       <view
                         key={`${log.id}-${index.toString()}`}
-                        className={css.logArgItem}
+                        className={"cp-logArgItem"}
                       >
                         {renderArg(
                           arg,
@@ -342,28 +332,20 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
             );
           })
         )}
-      </list>
-      <view
-        className={css.fadeBottom}
-        style={{
-          background: fadeState.atBottom
-            ? `linear-gradient(to top, #ffffff00, #ffffff00)`
-            : `linear-gradient(to top, ${vars.$color.bg.layerDefault}, #ffffff00)`,
-        }}
-      />
-      <view className={css.replInputRow}>
-        <text className={css.replPrompt}>{"›"}</text>
+      </FadeList>
+      <view className={"cp-replInputRow"}>
+        <text className={"cp-replPrompt"}>{"›"}</text>
         <input
           ref={inputRef}
-          className={css.replInput}
+          className={"cp-replInput"}
           placeholder="enter code..."
           bindinput={(e: BaseEvent<"bindinput", InputInputEvent>) =>
             setCode(e.detail.value)
           }
           bindconfirm={handleRun}
         />
-        <view className={css.replRunButton} bindtap={handleRun}>
-          <text className={css.replRunButtonText}>Run</text>
+        <view className={"cp-replRunButton"} bindtap={handleRun}>
+          <text className={"cp-replRunButtonText"}>Run</text>
         </view>
       </view>
     </view>

package/src/components/NetworkDetailSection.tsx

@@ -1,4 +1,4 @@
-import * as css from "./NetworkPanel.css";
+import "./NetworkPanel.css";
 
 interface NetworkDetailSectionProps {
   headers?: Record<string, string> | undefined;
@@ -14,28 +14,28 @@ export const NetworkDetailSection = ({
   return (
     <>
       {/* Headers */}
-      <view className={css.detailSection}>
-        <text className={css.detailSectionTitle}>Headers</text>
+      <view className={"np-detailSection"}>
+        <text className={"np-detailSectionTitle"}>Headers</text>
         {headers && Object.keys(headers).length > 0 ? (
-          <view className={css.table}>
+          <view className={"np-table"}>
             {Object.entries(headers).map(([key, value]) => (
-              <view key={key} className={css.tableRow}>
-                <text className={css.tableKey}>{key}</text>
-                <text className={css.tableValue}>{value}</text>
+              <view key={key} className={"np-tableRow"}>
+                <text className={"np-tableKey"}>{key}</text>
+                <text className={"np-tableValue"}>{value}</text>
               </view>
             ))}
           </view>
         ) : (
-          <text className={css.emptyText}>No headers</text>
+          <text className={"np-emptyText"}>No headers</text>
         )}
       </view>
 
       {/* Body */}
-      <view className={css.detailSection}>
-        <text className={css.detailSectionTitle}>Body</text>
-        {error && <text className={css.errorText}>{error}</text>}
-        {body && <text className={css.bodyText}>{body}</text>}
-        {!error && !body && <text className={css.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>
     </>
   );

package/src/components/NetworkPanel.css

@@ -0,0 +1,280 @@
+.np-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding-top: 4px;
+}
+
+.np-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+}
+
+.np-count {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-fg-neutral-subtle);
+}
+
+.np-clearButton {
+  padding: 3px 6px;
+  background-color: var(--lynx-console-color-bg-neutral-weak);
+  border-radius: 4px;
+}
+
+.np-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);
+}
+
+.np-list {
+  flex: 1;
+}
+
+.np-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.np-placeholderText {
+  font-size: 0.875rem;
+  line-height: 1.1875rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-fg-disabled);
+}
+
+.np-item {
+  padding: 8px;
+  border-bottom-width: 1px;
+  border-bottom-color: var(--lynx-console-color-stroke-neutral-weak);
+  border-bottom-style: solid;
+}
+
+.np-item--pending {
+  background-color: var(--lynx-console-color-palette-gray-100);
+}
+
+.np-item--error {
+  background-color: var(--lynx-console-color-palette-red-100);
+}
+
+.np-itemHeader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 4px;
+  gap: 8px;
+}
+
+.np-method {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: var(--lynx-console-font-weight-bold);
+  padding: 0 4px;
+  border-radius: 2px;
+  color: var(--lynx-console-color-fg-neutral);
+  background-color: var(--lynx-console-color-bg-neutral-weak);
+}
+
+.np-method--GET {
+  color: var(--lynx-console-color-palette-blue-600);
+  background-color: var(--lynx-console-color-palette-blue-100);
+}
+
+.np-method--POST {
+  color: var(--lynx-console-color-palette-green-600);
+  background-color: var(--lynx-console-color-palette-green-100);
+}
+
+.np-method--PUT {
+  color: var(--lynx-console-color-palette-yellow-600);
+  background-color: var(--lynx-console-color-palette-yellow-100);
+}
+
+.np-method--PATCH {
+  color: var(--lynx-console-color-palette-purple-600);
+  background-color: var(--lynx-console-color-palette-purple-100);
+}
+
+.np-method--DELETE {
+  color: var(--lynx-console-color-palette-red-600);
+  background-color: var(--lynx-console-color-palette-red-100);
+}
+
+.np-statusCode {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: var(--lynx-console-font-weight-bold);
+}
+
+.np-statusCode--success {
+  color: var(--lynx-console-color-palette-green-600);
+}
+
+.np-statusCode--error {
+  color: var(--lynx-console-color-palette-red-600);
+}
+
+.np-statusCode--pending {
+  color: var(--lynx-console-color-fg-neutral-subtle);
+}
+
+.np-time {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-fg-neutral-subtle);
+}
+
+.np-url {
+  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;
+  margin-bottom: 4px;
+}
+
+.np-path {
+  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;
+  white-space: pre-wrap;
+  overflow: visible;
+  margin-bottom: 4px;
+}
+
+.np-details {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-fg-neutral-subtle);
+}
+
+.np-detailsContainer {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top-width: 1px;
+  border-top-color: var(--lynx-console-color-stroke-neutral-subtle);
+  border-top-style: solid;
+}
+
+.np-tabs {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  padding-bottom: 6px;
+}
+
+.np-tab {
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.np-tab--active {
+  background-color: var(--lynx-console-color-bg-neutral-weak);
+}
+
+.np-tabText {
+  font-size: 0.875rem;
+  line-height: 1.1875rem;
+  font-weight: var(--lynx-console-font-weight-medium);
+  color: var(--lynx-console-color-fg-neutral-subtle);
+}
+
+.np-tabText--active {
+  color: var(--lynx-console-color-fg-neutral);
+}
+
+.np-tabContent {
+  padding-top: 8px;
+}
+
+.np-detailSection {
+  margin-bottom: 12px;
+}
+
+.np-detailSectionTitle {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-bold);
+  color: var(--lynx-console-color-fg-neutral);
+  margin-bottom: 8px;
+}
+
+.np-table {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.np-tableRow {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  padding: 4px 8px;
+  background-color: var(--lynx-console-color-bg-neutral-weak);
+  border-radius: 2px;
+}
+
+.np-tableKey {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-bold);
+  color: var(--lynx-console-color-fg-neutral-subtle);
+  min-width: 70px;
+  flex-shrink: 0;
+}
+
+.np-tableValue {
+  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;
+  flex: 1;
+}
+
+.np-bodyText {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-fg-neutral);
+  padding: 8px;
+  background-color: var(--lynx-console-color-bg-neutral-weak);
+  border-radius: 4px;
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+
+.np-errorText {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-palette-red-600);
+  padding: 8px;
+  background-color: var(--lynx-console-color-palette-red-100);
+  border-radius: 4px;
+  word-break: break-all;
+}
+
+.np-emptyText {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-fg-disabled);
+  text-align: center;
+  padding: 16px 0;
+}