lynx-console 0.1.1 → 0.2.0

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;
-}
+}

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;
@@ -47,7 +47,7 @@ export const FloatingButton = ({
   return (
     <>
       <view
-        className={css.wrapper}
+        className={"fb-wrapper"}
         consume-slide-event={[[-180, 180]]}
         style={{
           right: `${right}px`,
@@ -56,16 +56,16 @@ export const FloatingButton = ({
         }}
         {...handlers}
       >
-        <view className={css.button}>
+        <view className={"fb-button"}>
           {children}
-          <view className={css.shineOverlay} style={SHINE_STYLES[phase]} />
+          <view className={"fb-shineOverlay"} style={SHINE_STYLES[phase]} />
         </view>
         <view
-          className={css.reloadButton}
+          className={"fb-reloadButton"}
           catchtouchstart={() => clearTimer()}
           bindtap={handleReload}
         >
-          <text className={css.reloadIcon}>{"\u21BB"}</text>
+          <text className={"fb-reloadIcon"}>{"\u21BB"}</text>
         </view>
       </view>
     </>

package/src/components/LogPanel.tsx

@@ -2,7 +2,7 @@ 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 * as css from "./ConsolePanel.css";
+import "./ConsolePanel.css";
 import { FadeList } from "./FadeList";
 
 const LOG_LEVELS: LogLevel[] = ["log", "info", "warn", "error"];
@@ -139,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") {
@@ -151,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>
@@ -170,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") {
@@ -206,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>
@@ -257,11 +256,11 @@ 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)
@@ -269,7 +268,7 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
           />
           {searchQuery.length > 0 && (
             <view
-              className={css.searchClear}
+              className={"cp-searchClear"}
               bindtap={() => {
                 setSearchQuery("");
                 searchInputRef.current
@@ -277,26 +276,26 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
                   .exec();
               }}
             >
-              <text className={css.searchClearText}>✕</text>
+              <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}>🗑</text>
+          <view className={"cp-clearButton"} bindtap={clearLogs}>
+            <text className={"cp-clearButtonText"}>🗑</text>
           </view>
         </view>
       </view>
       <FadeList
         listRef={listRef}
-        className={css.logList}
+        className={"cp-logList"}
         preload-buffer-count={10}
         initial-scroll-index={Math.max(0, filteredLogs.length - 1)}
       >
         {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>
@@ -305,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,
@@ -334,19 +333,19 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
           })
         )}
       </FadeList>
-      <view className={css.replInputRow}>
-        <text className={css.replPrompt}>{"›"}</text>
+      <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;
+}