lynx-console 0.0.1 → 0.1.1

package/src/components/PerformancePanel.tsx

@@ -1,6 +1,7 @@
 import { useState } from "@lynx-js/react";
 import { stringify } from "javascript-stringify";
 import type { PerformanceEntryData } from "../types";
+import { FadeList } from "./FadeList";
 import * as css from "./PerformancePanel.css";
 
 interface PerformancePanelProps {
@@ -65,7 +66,6 @@ export const PerformancePanel = ({
   clearPerformances,
 }: PerformancePanelProps) => {
   const [selectedId, setSelectedId] = useState<string | null>(null);
-
   if (performances.length === 0) {
     return (
       <view className={css.container}>
@@ -80,7 +80,7 @@ export const PerformancePanel = ({
             <text>Log</text>
           </view>
           <view bindtap={clearPerformances} className={css.clearButton}>
-            <text className={css.clearButtonText}>Clear</text>
+            <text className={css.clearButtonText}>🗑</text>
           </view>
         </view>
         <view className={css.placeholder}>
@@ -97,11 +97,11 @@ export const PerformancePanel = ({
       <view className={css.header}>
         <text className={css.count}>{performances.length} entries</text>
         <view bindtap={clearPerformances} className={css.clearButton}>
-          <text className={css.clearButtonText}>Clear</text>
+          <text className={css.clearButtonText}>🗑</text>
         </view>
       </view>
 
-      <list className={css.list}>
+      <FadeList className={css.list}>
         {performances.map((perf) => {
           const isMetricFcp = isMetricFcpEntry(perf);
           const fcpMetrics = extractFcpMetrics(perf);
@@ -203,7 +203,7 @@ export const PerformancePanel = ({
             </list-item>
           );
         })}
-      </list>
+      </FadeList>
     </view>
   );
 };

package/src/components/Tabs.tsx

@@ -8,6 +8,7 @@ type TabsProps = {
     label: string;
     renderContent: () => ReactNode;
   }>;
+  onTabChange?: () => void;
 };
 
 export default function Tabs(props: TabsProps) {
@@ -23,6 +24,7 @@ export default function Tabs(props: TabsProps) {
             className={css.tabTriggerButton}
             bindtap={() => {
               setActiveIndex(i);
+              props.onTabChange?.();
 
               tabContentsRef.current
                 ?.invoke({
@@ -59,6 +61,7 @@ export default function Tabs(props: TabsProps) {
         className={css.tabContents}
         scroll-orientation="horizontal"
         item-snap={{ factor: 0, offset: 0 }}
+        bindscroll={() => props.onTabChange?.()}
         bindsnap={(e: ListSnapEvent) => {
           setActiveIndex(e.detail.position);
         }}

package/src/hooks/useLongPressDrag.ts

@@ -0,0 +1,95 @@
+import { useRef, useState } from "@lynx-js/react";
+import type { BaseTouchEvent, Target } from "@lynx-js/types";
+
+const LONG_PRESS_DURATION = 400;
+const MOVE_THRESHOLD = 5;
+
+const DEFAULT_RIGHT = 16;
+const DEFAULT_BOTTOM = 84;
+
+let savedRight = DEFAULT_RIGHT;
+let savedBottom = DEFAULT_BOTTOM;
+
+export function useLongPressDrag(onTap: () => void) {
+  const [right, setRight] = useState(savedRight);
+  const [bottom, setBottom] = useState(savedBottom);
+  const [phase, setPhase] = useState<"idle" | "dragging" | "releasing">("idle");
+  const [tempRight, setTempRight] = useState(savedRight);
+  const [tempBottom, setTempBottom] = useState(savedBottom);
+
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const draggingRef = useRef(false);
+  const startRef = useRef({ x: 0, y: 0, r: 0, b: 0 });
+
+  const clearTimer = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  };
+
+  const handleTouchStart = (e: BaseTouchEvent<Target>) => {
+    startRef.current = {
+      x: e.detail.x,
+      y: e.detail.y,
+      r: right,
+      b: bottom,
+    };
+    draggingRef.current = false;
+
+    timerRef.current = setTimeout(() => {
+      draggingRef.current = true;
+      setPhase("dragging");
+      setTempRight(right);
+      setTempBottom(bottom);
+    }, LONG_PRESS_DURATION);
+  };
+
+  const handleTouchMove = (e: BaseTouchEvent<Target>) => {
+    const dx = e.detail.x - startRef.current.x;
+    const dy = e.detail.y - startRef.current.y;
+
+    if (
+      !draggingRef.current &&
+      (Math.abs(dx) > MOVE_THRESHOLD || Math.abs(dy) > MOVE_THRESHOLD)
+    ) {
+      clearTimer();
+    }
+
+    if (!draggingRef.current) return;
+
+    // right/bottom 기준이므로 방향 반전
+    setTempRight(startRef.current.r - dx);
+    setTempBottom(startRef.current.b - dy);
+  };
+
+  const handleTouchEnd = () => {
+    clearTimer();
+
+    if (draggingRef.current) {
+      setRight(tempRight);
+      setBottom(tempBottom);
+      savedRight = tempRight;
+      savedBottom = tempBottom;
+      setPhase("releasing");
+      draggingRef.current = false;
+      setTimeout(() => setPhase("idle"), 300);
+    } else {
+      onTap();
+    }
+  };
+
+  const isDragging = phase === "dragging";
+
+  return {
+    phase,
+    right: isDragging ? tempRight : right,
+    bottom: isDragging ? tempBottom : bottom,
+    clearTimer,
+    handlers: {
+      catchtouchstart: handleTouchStart,
+      catchtouchmove: handleTouchMove,
+      catchtouchend: handleTouchEnd,
+    },
+  };
+}

package/src/index.tsx

@@ -85,7 +85,7 @@ const LynxConsole = forwardRef<LynxConsoleHandle, LynxConsoleProps>(
 
     return (
       <view className={themeClass}>
-        <FloatingButton bindtap={handleOpenBottomSheet} isVisible={!isOpen}>
+        <FloatingButton bindtap={handleOpenBottomSheet}>
           <text className={floatingButtonCss.title}>LynxConsole</text>
           <text className={floatingButtonCss.subtitle}>
             {`${latestFcp?.name ?? "FCP"}: ${latestFcp?.duration ? latestFcp.duration.toFixed(2) : "--"}ms`}

package/dist/assets/src/components/ConsolePanel.css.ts.vanilla-B3avfSlI.css

@@ -1,246 +0,0 @@
-.ConsolePanel_container__db6kuu0 {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-.ConsolePanel_placeholder__db6kuu1 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-.ConsolePanel_placeholderText__db6kuu2 {
-  font-size: 0.875rem;
-  line-height: 1.1875rem;
-  font-weight: var(--seed-font-weight-regular);
-  color: var(--seed-color-fg-disabled);
-}
-.ConsolePanel_logContainer__db6kuu3 {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  padding-top: 4px;
-}
-.ConsolePanel_logHeader__db6kuu4 {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
-  padding-bottom: 4px;
-  border-bottom-width: 1px;
-  border-bottom-color: var(--seed-color-stroke-neutral-subtle);
-  border-bottom-style: solid;
-}
-.ConsolePanel_logCount__db6kuu5 {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-  font-weight: var(--seed-font-weight-regular);
-  color: var(--seed-color-fg-neutral-subtle);
-}
-.ConsolePanel_clearButton__db6kuu6 {
-  padding: 6px 12px;
-  background-color: var(--seed-color-bg-neutral-weak);
-  border-radius: 4px;
-}
-.ConsolePanel_clearButtonText__db6kuu7 {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-  font-weight: var(--seed-font-weight-medium);
-  color: var(--seed-color-fg-neutral);
-}
-.ConsolePanel_logList__db6kuu8 {
-  flex: 1;
-}
-.ConsolePanel_logItem__db6kuu9 {
-  padding: 8px;
-  border-bottom-width: 1px;
-  border-bottom-color: var(--seed-color-stroke-neutral-weak);
-  border-bottom-style: solid;
-}
-.ConsolePanel_logItem_level_warn__db6kuuc {
-  background-color: var(--seed-color-palette-yellow-100);
-}
-.ConsolePanel_logItem_level_error__db6kuud {
-  background-color: var(--seed-color-palette-red-100);
-}
-.ConsolePanel_logItemHeader__db6kuue {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 4px;
-}
-.ConsolePanel_logLevel__db6kuuf {
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: var(--seed-font-weight-bold);
-  margin-right: 8px;
-}
-.ConsolePanel_logLevel_level_log__db6kuug {
-  color: var(--seed-color-palette-green-600);
-}
-.ConsolePanel_logLevel_level_info__db6kuuh {
-  color: var(--seed-color-palette-blue-600);
-}
-.ConsolePanel_logLevel_level_warn__db6kuui {
-  color: var(--seed-color-palette-yellow-600);
-}
-.ConsolePanel_logLevel_level_error__db6kuuj {
-  color: var(--seed-color-palette-red-600);
-}
-.ConsolePanel_logTime__db6kuuk {
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: var(--seed-font-weight-regular);
-  color: var(--seed-color-fg-neutral-subtle);
-}
-.ConsolePanel_toggleIndicator__db6kuul {
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: var(--seed-font-weight-regular);
-  color: var(--seed-color-fg-neutral-subtle);
-  margin-left: 4px;
-  align-self: flex-start;
-}
-.ConsolePanel_logMessage__db6kuum {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-  font-weight: var(--seed-font-weight-regular);
-  color: var(--seed-color-fg-neutral);
-  word-break: break-all;
-}
-.ConsolePanel_logArgsContainer__db6kuun {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-.ConsolePanel_logArgItem__db6kuuo {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-  font-weight: var(--seed-font-weight-regular);
-}
-.ConsolePanel_argNull__db6kuup {
-  color: var(--seed-color-fg-neutral-subtle);
-}
-.ConsolePanel_argUndefined__db6kuuq {
-  color: var(--seed-color-fg-neutral-subtle);
-}
-.ConsolePanel_argString__db6kuur {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-  font-weight: var(--seed-font-weight-regular);
-}
-.ConsolePanel_argString_level_log__db6kuus {
-  color: var(--seed-color-fg-neutral);
-}
-.ConsolePanel_argString_level_info__db6kuut {
-  color: var(--seed-color-fg-neutral);
-}
-.ConsolePanel_argString_level_warn__db6kuuu {
-  color: var(--seed-color-palette-yellow-900);
-}
-.ConsolePanel_argString_level_error__db6kuuv {
-  color: var(--seed-color-palette-red-900);
-}
-.ConsolePanel_argPrimitive__db6kuuw {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-  font-weight: var(--seed-font-weight-regular);
-}
-.ConsolePanel_argPrimitive_level_log__db6kuux {
-  color: var(--seed-color-palette-blue-600);
-}
-.ConsolePanel_argPrimitive_level_info__db6kuuy {
-  color: var(--seed-color-palette-blue-600);
-}
-.ConsolePanel_argPrimitive_level_warn__db6kuuz {
-  color: var(--seed-color-palette-yellow-900);
-}
-.ConsolePanel_argPrimitive_level_error__db6kuu10 {
-  color: var(--seed-color-palette-red-900);
-}
-.ConsolePanel_argObject__db6kuu11 {
-  display: flex;
-  flex-direction: column;
-}
-.ConsolePanel_argObjectHeader__db6kuu12 {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 4px;
-}
-.ConsolePanel_argObjectPreview__db6kuu13 {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-  font-weight: var(--seed-font-weight-medium);
-  color: var(--seed-color-fg-neutral);
-}
-.ConsolePanel_argObjectContent__db6kuu14 {
-  margin-top: 4px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.ConsolePanel_argObjectProperty__db6kuu15 {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-}
-.ConsolePanel_argObjectKey__db6kuu16 {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-  font-weight: var(--seed-font-weight-medium);
-  color: var(--seed-color-palette-purple-600);
-}
-.ConsolePanel_argObjectJson__db6kuu17 {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-  font-weight: var(--seed-font-weight-regular);
-  color: var(--seed-color-fg-neutral);
-}
-.ConsolePanel_replInputRow__db6kuu18 {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  margin-top: -1px;
-  border-top-width: 1px;
-  border-top-color: var(--seed-color-stroke-neutral-subtle);
-  border-top-style: solid;
-  background-image: linear-gradient(to bottom, transparent, var(--seed-color-bg-layer-default));
-  background-size: 100% 32px;
-  background-repeat: no-repeat;
-  background-position: top;
-  background-color: var(--seed-color-bg-layer-default);
-}
-.ConsolePanel_replPrompt__db6kuu19 {
-  font-size: 1.625rem;
-  line-height: 2.1875rem;
-  font-weight: var(--seed-font-weight-medium);
-  color: var(--seed-color-fg-placeholder);
-  padding-bottom: 8px;
-}
-.ConsolePanel_replInput__db6kuu1a {
-  flex: 1;
-  font-size: 1rem;
-  line-height: 1.375rem;
-  font-weight: var(--seed-font-weight-regular);
-  color: var(--seed-color-fg-neutral);
-  caret-color: var(--seed-color-palette-green-600);
-  padding-bottom: 8px;
-}
-.ConsolePanel_replRunButton__db6kuu1b {
-  padding: 4px 10px;
-  background-color: var(--seed-color-palette-green-100);
-  border-radius: 4px;
-  margin-bottom: 8px;
-}
-.ConsolePanel_replRunButtonText__db6kuu1c {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-  font-weight: var(--seed-font-weight-medium);
-  color: var(--seed-color-palette-green-600);
-}