@yargram/react 1.0.0

package/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  async viteFinal(config) {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        dedupe: ['react', 'react-dom', ...(config.resolve?.dedupe ?? [])],
+      },
+    };
+  },
+};
+
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,21 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#1a1a1a' },
+        { name: 'light', value: '#f5f5f5' },
+      ],
+    },
+  },
+};
+
+export default preview;

package/dist/components/LogWindow/LogEntryRow.d.ts

@@ -0,0 +1,8 @@
+import type { LogEntry as LogEntryType } from './types';
+import './LogWindow.css';
+type LogEntryRowProps = {
+    entry: LogEntryType;
+};
+export declare function LogEntryRow({ entry }: LogEntryRowProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LogEntryRow.d.ts.map

package/dist/components/LogWindow/LogEntryRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogEntryRow.d.ts","sourceRoot":"","sources":["../../../src/components/LogWindow/LogEntryRow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,IAAI,YAAY,EAAY,MAAM,SAAS,CAAC;AAClE,OAAO,iBAAiB,CAAC;AAEzB,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,YAAY,CAAC;CACrB,CAAC;AASF,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,gBAAgB,2CAqBtD"}

package/dist/components/LogWindow/LogEntryRow.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Info, AlertTriangle, CircleAlert } from 'lucide-react';
+import './LogWindow.css';
+const levelIcons = {
+    info: Info,
+    warn: AlertTriangle,
+    error: CircleAlert,
+};
+export function LogEntryRow({ entry }) {
+    const levelClass = `logWindowEntry${entry.level.charAt(0).toUpperCase() + entry.level.slice(1)}`;
+    const iconClass = `logWindowEntryIcon${entry.level.charAt(0).toUpperCase() + entry.level.slice(1)}`;
+    const IconComponent = levelIcons[entry.level];
+    return (_jsxs("div", { className: `logWindowEntry ${levelClass}`, children: [_jsx("span", { className: `logWindowEntryIcon ${iconClass}`, children: _jsx(IconComponent, { size: 12 }) }), _jsx("span", { className: "logWindowEntryMessage", children: entry.message }), _jsx("span", { className: "logWindowEntrySource", children: entry.source })] }));
+}

package/dist/components/LogWindow/LogWindow.d.ts

@@ -0,0 +1,41 @@
+import type { LogEntry, LogWindowTab, NetworkEntry } from './types';
+import '../LoginWindow/LoginWindow.css';
+import './LogWindow.css';
+export type LogWindowProps = {
+    /** 表示するログエントリの配列 */
+    entries?: LogEntry[];
+    /** Networks タブで表示するネットワークエントリ（REST / GraphQL） */
+    networkEntries?: NetworkEntry[];
+    /** アクティブなタブ（未指定時は 'logs'） */
+    defaultTab?: LogWindowTab;
+    /** タブ切り替え時のコールバック */
+    onTabChange?: (tab: LogWindowTab) => void;
+    /** 高さ（CSS 値）。未指定時は max-height: 320px */
+    height?: string | number;
+    className?: string;
+    /** true のときヘッダーをドラッグしてウィンドウを移動できる */
+    draggable?: boolean;
+    /** draggable 時の初期位置（未指定時は { x: 100, y: 100 }） */
+    defaultPosition?: {
+        x: number;
+        y: number;
+    };
+    /** true のとき表示時に Windows 風のスケール＋フェードインアニメーションを行う */
+    animateOnOpen?: boolean;
+    /** 右上の赤ボタンで閉じる際に呼ばれる。指定時は赤ボタンが閉じるボタンになる */
+    onClose?: () => void;
+    /** 指定時はヘッダーにログアウトボタンを表示（認証連携用） */
+    onLogout?: () => void;
+    /** true のときボディにパスワード（ログイン）画面を表示（production/staging 用） */
+    showLogin?: boolean;
+    /** ログイン画面のタイトル */
+    loginTitle?: string;
+    /** ログイン送信 */
+    onLogin?: (password: string) => Promise<void>;
+    /** ログイン失敗メッセージ */
+    loginError?: string;
+    /** ログインエラーをクリア */
+    onClearLoginError?: () => void;
+};
+export declare function LogWindow({ entries, networkEntries, defaultTab, onTabChange, height, className, draggable, defaultPosition, animateOnOpen, onClose, onLogout, showLogin, loginTitle, onLogin, loginError, onClearLoginError, }: LogWindowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LogWindow.d.ts.map

package/dist/components/LogWindow/LogWindow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogWindow.d.ts","sourceRoot":"","sources":["../../../src/components/LogWindow/LogWindow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAIpE,OAAO,gCAAgC,CAAC;AACxC,OAAO,iBAAiB,CAAC;AAgBzB,MAAM,MAAM,cAAc,GAAG;IAC3B,oBAAoB;IACpB,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,iDAAiD;IACjD,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,6BAA6B;IAC7B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,qBAAqB;IACrB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iDAAiD;IACjD,eAAe,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3C,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa;IACb,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9C,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,CAAC;AAIF,wBAAgB,SAAS,CAAC,EACxB,OAAY,EACZ,cAAmB,EACnB,UAAmB,EACnB,WAAW,EACX,MAAM,EACN,SAAc,EACd,SAAiB,EACjB,eAAe,EACf,aAAqB,EACrB,OAAO,EACP,QAAQ,EACR,SAAiB,EACjB,UAAoB,EACpB,OAAO,EACP,UAAU,EACV,iBAAiB,GAClB,EAAE,cAAc,2CA8ShB"}

package/dist/components/LogWindow/LogWindow.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { Terminal, Wifi, X, Download, FileJson, FileText, LogOut } from 'lucide-react';
+import { LogEntryRow } from './LogEntryRow';
+import { NetworkEntryRow } from './NetworkEntryRow';
+import { LoginForm } from '../LoginWindow/LoginForm';
+import '../LoginWindow/LoginWindow.css';
+import './LogWindow.css';
+function escapeCsvCell(value) {
+    if (/[",\n\r]/.test(value))
+        return `"${value.replace(/"/g, '""')}"`;
+    return value;
+}
+function downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+}
+const CLOSE_ANIMATION_MS = 200;
+export function LogWindow({ entries = [], networkEntries = [], defaultTab = 'logs', onTabChange, height, className = '', draggable = false, defaultPosition, animateOnOpen = false, onClose, onLogout, showLogin = false, loginTitle = 'Login', onLogin, loginError, onClearLoginError, }) {
+    const [activeTab, setActiveTab] = useState(defaultTab);
+    const [isClosing, setIsClosing] = useState(false);
+    const [unreadLogsCount, setUnreadLogsCount] = useState(0);
+    const [unreadNetworksCount, setUnreadNetworksCount] = useState(0);
+    const [exportDialogOpen, setExportDialogOpen] = useState(false);
+    const closeTimeoutRef = useRef(null);
+    const prevEntriesLengthRef = useRef(entries.length);
+    const prevNetworkEntriesLengthRef = useRef(networkEntries.length);
+    const [position, setPosition] = useState(() => draggable ? defaultPosition ?? { x: 100, y: 100 } : { x: 0, y: 0 });
+    const dragStartRef = useRef(null);
+    useEffect(() => {
+        const prevLogs = prevEntriesLengthRef.current;
+        const prevNetworks = prevNetworkEntriesLengthRef.current;
+        if (entries.length > prevLogs && activeTab === 'networks') {
+            setUnreadLogsCount((c) => c + (entries.length - prevLogs));
+        }
+        prevEntriesLengthRef.current = entries.length;
+        if (networkEntries.length > prevNetworks && activeTab === 'logs') {
+            setUnreadNetworksCount((c) => c + (networkEntries.length - prevNetworks));
+        }
+        prevNetworkEntriesLengthRef.current = networkEntries.length;
+    }, [entries.length, networkEntries.length, activeTab]);
+    const handleTab = (tab) => {
+        setActiveTab(tab);
+        if (tab === 'logs')
+            setUnreadLogsCount(0);
+        if (tab === 'networks')
+            setUnreadNetworksCount(0);
+        onTabChange?.(tab);
+    };
+    const handleHeaderMouseDown = useCallback((e) => {
+        if (!draggable || e.button !== 0)
+            return;
+        e.preventDefault();
+        dragStartRef.current = {
+            x: position.x,
+            y: position.y,
+            clientX: e.clientX,
+            clientY: e.clientY,
+        };
+    }, [draggable, position]);
+    useEffect(() => {
+        if (!draggable)
+            return;
+        const handleMouseMove = (e) => {
+            if (dragStartRef.current == null)
+                return;
+            setPosition({
+                x: dragStartRef.current.x + (e.clientX - dragStartRef.current.clientX),
+                y: dragStartRef.current.y + (e.clientY - dragStartRef.current.clientY),
+            });
+        };
+        const handleMouseUp = () => {
+            dragStartRef.current = null;
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [draggable]);
+    useEffect(() => {
+        return () => {
+            if (closeTimeoutRef.current)
+                clearTimeout(closeTimeoutRef.current);
+        };
+    }, []);
+    const handleCloseClick = useCallback(() => {
+        if (!onClose || isClosing)
+            return;
+        setIsClosing(true);
+        closeTimeoutRef.current = setTimeout(() => {
+            closeTimeoutRef.current = null;
+            onClose();
+        }, CLOSE_ANIMATION_MS);
+    }, [onClose, isClosing]);
+    const handleExportCsv = useCallback(() => {
+        const header = 'level,message,source\n';
+        const rows = entries.map((e) => [e.level, escapeCsvCell(e.message), escapeCsvCell(e.source)].join(','));
+        const csv = header + rows.join('\n');
+        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
+        downloadBlob(blob, `logs-${Date.now()}.csv`);
+        setExportDialogOpen(false);
+    }, [entries]);
+    const handleExportJson = useCallback(() => {
+        const data = { logs: entries, networks: networkEntries };
+        const json = JSON.stringify(data, null, 2);
+        const blob = new Blob([json], { type: 'application/json;charset=utf-8' });
+        downloadBlob(blob, `logs-${Date.now()}.json`);
+        setExportDialogOpen(false);
+    }, [entries, networkEntries]);
+    const bodyStyle = height != null ? { maxHeight: typeof height === 'number' ? `${height}px` : height } : undefined;
+    const rootStyle = draggable
+        ? {
+            position: 'fixed',
+            left: position.x,
+            top: position.y,
+            zIndex: 10000,
+        }
+        : undefined;
+    const rootClassName = [
+        'logWindow',
+        animateOnOpen && !isClosing ? 'logWindowOpenAnimation' : '',
+        isClosing ? 'logWindowCloseAnimation' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ')
+        .trim();
+    const innerClassName = [
+        'logWindowInner',
+        showLogin && loginError ? 'logWindowLoginError' : '',
+    ]
+        .filter(Boolean)
+        .join(' ')
+        .trim();
+    return (_jsx("div", { className: rootClassName.trim(), ...(rootStyle != null ? { style: rootStyle } : {}), children: _jsxs("div", { className: innerClassName, children: [_jsxs("header", { className: `logWindowHeader ${draggable ? 'logWindowHeaderDraggable' : ''} ${showLogin ? 'logWindowHeaderLoginOnly' : ''}`, onMouseDown: handleHeaderMouseDown, role: draggable ? 'button' : undefined, tabIndex: draggable ? 0 : undefined, "aria-label": draggable ? 'Move window' : undefined, children: [!showLogin && (_jsxs("div", { className: "logWindowTabs", children: [_jsxs("button", { type: "button", className: `logWindowTab ${activeTab === 'logs' ? 'logWindowTabActive' : ''}`, onClick: () => handleTab('logs'), onMouseDown: (e) => draggable && e.stopPropagation(), "aria-pressed": activeTab === 'logs', children: [_jsx(Terminal, { className: "logWindowTabIcon logWindowTabIconTerminal", size: 14, "aria-hidden": true }), "Logs", activeTab !== 'logs' && unreadLogsCount > 0 && (_jsx("span", { className: "logWindowTabBadge", "aria-label": `New logs: ${unreadLogsCount}`, children: unreadLogsCount > 99 ? '99+' : unreadLogsCount }))] }), _jsxs("button", { type: "button", className: `logWindowTab ${activeTab === 'networks' ? 'logWindowTabActive' : ''}`, onClick: () => handleTab('networks'), onMouseDown: (e) => draggable && e.stopPropagation(), "aria-pressed": activeTab === 'networks', children: [_jsx(Wifi, { className: "logWindowTabIcon logWindowTabIconWifi", size: 14, "aria-hidden": true }), "Networks", activeTab !== 'networks' && unreadNetworksCount > 0 && (_jsx("span", { className: "logWindowTabBadge", "aria-label": `New networks: ${unreadNetworksCount}`, children: unreadNetworksCount > 99 ? '99+' : unreadNetworksCount }))] })] })), showLogin && _jsx("span", { className: "logWindowHeaderLoginTitle", children: loginTitle }), onLogout && !showLogin && (_jsxs("button", { type: "button", className: "logWindowLogoutButton", onClick: onLogout, "aria-label": "Log out", title: "Log out", children: [_jsx(LogOut, { size: 14, "aria-hidden": true }), _jsx("span", { children: "Log out" })] })), onClose ? (_jsx("button", { type: "button", className: "logWindowCloseButton", onClick: handleCloseClick, disabled: isClosing, "aria-label": "close", title: "close", children: _jsx(X, { size: 16, fill: "currentColor", "aria-hidden": true }) })) : (_jsx("span", { className: "logWindowIndicator", title: "Recording / Active", children: _jsx(X, { size: 16, fill: "currentColor", "aria-hidden": true }) }))] }), _jsx("div", { className: "logWindowBody", style: bodyStyle, children: showLogin && onLogin ? (_jsx(LoginForm, { title: loginTitle, onLogin: onLogin, errorMessage: loginError, onClearError: onClearLoginError })) : (_jsxs("div", { className: "logWindowBodySlider", style: {
+                            transform: activeTab === 'logs' ? 'translateX(0)' : 'translateX(-50%)',
+                        }, children: [_jsx("div", { className: "logWindowBodyPanel", children: entries.map((entry) => (_jsx(LogEntryRow, { entry: entry }, entry.id))) }), _jsx("div", { className: "logWindowBodyPanel", children: networkEntries.length > 0 ? (networkEntries.map((entry) => (_jsx(NetworkEntryRow, { entry: entry }, entry.id)))) : (_jsx("div", { className: "logWindowEntry logWindowEntryInfo", style: { color: 'var(--logw-text-muted)' }, children: "Network requests will appear here." })) })] })) }), !showLogin && (_jsx("footer", { className: "logWindowFooter", children: _jsxs("button", { type: "button", className: "logWindowExportButton", onClick: () => setExportDialogOpen(true), "aria-haspopup": "dialog", "aria-expanded": exportDialogOpen, children: [_jsx(Download, { size: 14, "aria-hidden": true }), "Export"] }) })), exportDialogOpen && (_jsx("div", { className: "logWindowExportOverlay", role: "dialog", "aria-modal": "true", "aria-labelledby": "logWindowExportDialogTitle", children: _jsxs("div", { className: "logWindowExportDialog", children: [_jsx("h3", { id: "logWindowExportDialogTitle", className: "logWindowExportDialogTitle", children: "Export format" }), _jsx("p", { className: "logWindowExportDialogDescription", children: "CSV \u3067\u30A8\u30AF\u30B9\u30DD\u30FC\u30C8\u3057\u307E\u3059\u304B\u3001JSON \u3067\u30A8\u30AF\u30B9\u30DD\u30FC\u30C8\u3057\u307E\u3059\u304B\uFF1F" }), _jsxs("div", { className: "logWindowExportDialogActions", children: [_jsxs("button", { type: "button", className: "logWindowExportFormatButton", onClick: handleExportCsv, children: [_jsx(FileText, { size: 18, "aria-hidden": true }), "CSV"] }), _jsxs("button", { type: "button", className: "logWindowExportFormatButton", onClick: handleExportJson, children: [_jsx(FileJson, { size: 18, "aria-hidden": true }), "JSON"] })] }), _jsx("button", { type: "button", className: "logWindowExportDialogCancel", onClick: () => setExportDialogOpen(false), children: "Cancel" })] }) }))] }) }));
+}

package/dist/components/LogWindow/LogWindow.stories.d.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LogWindow } from './LogWindow';
+declare const meta: Meta<typeof LogWindow>;
+export default meta;
+type Story = StoryObj<typeof LogWindow>;
+export declare const Default: Story;
+export declare const InfoOnly: Story;
+export declare const ManyEntries: Story;
+export declare const Empty: Story;
+export declare const NetworksTab: Story;
+/** Networks タブで REST API リクエストを表示 */
+export declare const NetworkREST: Story;
+/** Networks タブで GraphQL リクエストを表示 */
+export declare const NetworkGraphQL: Story;
+/** REST と GraphQL の両方のネットワークエントリを表示 */
+export declare const NetworkMixed: Story;
+/**
+ * ヘッダーをドラッグしてウィンドウを自由に移動できます。
+ * タブ（Logs / Networks）をクリックしてもドラッグは開始されません。
+ */
+export declare const Draggable: Story;
+/**
+ * Escape キーを 5 回押すとログウィンドウがオーバーレイで開きます。
+ * テスト手順: ストーリーを開き、Escape を 5 回連続で押す（約 1.5 秒以内に次のキーを押す）。
+ * ログウィンドウ表示中に Escape を 1 回押すか、背景をクリックすると閉じます。
+ * 開いたウィンドウはヘッダーをドラッグして移動できます。
+ */
+export declare const EscapeToOpen: Story;
+//# sourceMappingURL=LogWindow.stories.d.ts.map

package/dist/components/LogWindow/LogWindow.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogWindow.stories.d.ts","sourceRoot":"","sources":["../../../src/components/LogWindow/LogWindow.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AA2FxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAahC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAUzB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,qCAAqC;AACrC,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,oCAAoC;AACpC,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,uCAAuC;AACvC,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC"}

package/dist/components/LogWindow/LogWindow.stories.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LogWindow } from './LogWindow';
+import { LogWindowEscapeDemo } from './LogWindowEscapeDemo';
+const sampleEntries = [
+    {
+        id: '1',
+        level: 'info',
+        message: 'Hello!!',
+        source: 'ArticleContainer.tsx:32',
+    },
+    {
+        id: '2',
+        level: 'warn',
+        message: 'Hello!!',
+        source: 'ArticleContainer.tsx:32',
+    },
+    {
+        id: '3',
+        level: 'error',
+        message: 'Hello!!',
+        source: 'ArticleContainer.tsx:32',
+    },
+];
+const sampleNetworkRest = [
+    {
+        id: 'r1',
+        type: 'rest',
+        method: 'GET',
+        url: '/api/users',
+        status: 200,
+        statusText: 'OK',
+        request: 'GET /api/users HTTP/1.1\nAccept: application/json',
+        response: '{\n  "data": [\n    { "id": "1", "name": "Alice" },\n    { "id": "2", "name": "Bob" }\n  ]\n}',
+    },
+    {
+        id: 'r2',
+        type: 'rest',
+        method: 'POST',
+        url: '/api/auth/login',
+        status: 201,
+        statusText: 'Created',
+        request: 'POST /api/auth/login HTTP/1.1\nContent-Type: application/json\n\n{"email":"user@example.com","password":"***"}',
+        response: '{\n  "token": "eyJhbGciOiJIUzI1NiIs...",\n  "user": { "id": "1", "email": "user@example.com" }\n}',
+    },
+    {
+        id: 'r3',
+        type: 'rest',
+        method: 'GET',
+        url: '/api/articles/123',
+        status: 404,
+        statusText: 'Not Found',
+        request: 'GET /api/articles/123 HTTP/1.1',
+        response: '{\n  "error": "Not Found",\n  "message": "Article 123 does not exist"\n}',
+    },
+];
+const sampleNetworkGraphql = [
+    {
+        id: 'g1',
+        type: 'graphql',
+        operationName: 'GetUser',
+        url: '/graphql',
+        status: 200,
+        statusText: 'OK',
+        request: 'query GetUser($id: ID!) {\n  user(id: $id) {\n    id\n    name\n    email\n  }\n}\n\nVariables: { "id": "1" }',
+        response: '{\n  "data": {\n    "user": {\n      "id": "1",\n      "name": "Alice",\n      "email": "alice@example.com"\n    }\n  }\n}',
+    },
+    {
+        id: 'g2',
+        type: 'graphql',
+        operationName: 'ListArticles',
+        url: '/graphql',
+        status: 200,
+        statusText: 'OK',
+        request: 'query ListArticles {\n  articles {\n    id\n    title\n    publishedAt\n  }\n}',
+        response: '{\n  "data": {\n    "articles": [\n      { "id": "1", "title": "Hello", "publishedAt": "2024-01-01" }\n    ]\n  }\n}',
+    },
+    {
+        id: 'g3',
+        type: 'graphql',
+        operationName: 'CreatePost',
+        url: '/graphql',
+        status: 400,
+        statusText: 'Bad Request',
+        request: 'mutation CreatePost($input: CreatePostInput!) {\n  createPost(input: $input) { id }\n}',
+        response: '{\n  "errors": [\n    { "message": "Validation error: title is required" }\n  ]\n}',
+    },
+];
+const meta = {
+    title: 'Components/LogWindow',
+    component: LogWindow,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        defaultTab: {
+            control: 'radio',
+            options: ['logs', 'networks'],
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        entries: sampleEntries,
+        defaultTab: 'logs',
+    },
+};
+export const InfoOnly = {
+    args: {
+        entries: [
+            { id: '1', level: 'info', message: 'Application started', source: 'App.tsx:12' },
+            { id: '2', level: 'info', message: 'User logged in', source: 'Auth.tsx:45' },
+        ],
+    },
+};
+export const ManyEntries = {
+    args: {
+        entries: [
+            ...sampleEntries,
+            { id: '4', level: 'info', message: 'Fetching data...', source: 'useApi.ts:18' },
+            { id: '5', level: 'warn', message: 'Deprecated API used', source: 'legacy.ts:3' },
+            { id: '6', level: 'error', message: 'Network request failed', source: 'api.ts:92' },
+        ],
+        height: 280,
+    },
+};
+export const Empty = {
+    args: {
+        entries: [],
+    },
+};
+export const NetworksTab = {
+    args: {
+        entries: sampleEntries,
+        defaultTab: 'networks',
+    },
+};
+/** Networks タブで REST API リクエストを表示 */
+export const NetworkREST = {
+    args: {
+        networkEntries: sampleNetworkRest,
+        defaultTab: 'networks',
+    },
+};
+/** Networks タブで GraphQL リクエストを表示 */
+export const NetworkGraphQL = {
+    args: {
+        networkEntries: sampleNetworkGraphql,
+        defaultTab: 'networks',
+    },
+};
+/** REST と GraphQL の両方のネットワークエントリを表示 */
+export const NetworkMixed = {
+    args: {
+        networkEntries: [
+            ...sampleNetworkRest,
+            ...sampleNetworkGraphql,
+        ],
+        defaultTab: 'networks',
+    },
+};
+/**
+ * ヘッダーをドラッグしてウィンドウを自由に移動できます。
+ * タブ（Logs / Networks）をクリックしてもドラッグは開始されません。
+ */
+export const Draggable = {
+    args: {
+        entries: sampleEntries,
+        networkEntries: [...sampleNetworkRest, ...sampleNetworkGraphql],
+        draggable: true,
+        defaultPosition: { x: 80, y: 80 },
+    },
+};
+/**
+ * Escape キーを 5 回押すとログウィンドウがオーバーレイで開きます。
+ * テスト手順: ストーリーを開き、Escape を 5 回連続で押す（約 1.5 秒以内に次のキーを押す）。
+ * ログウィンドウ表示中に Escape を 1 回押すか、背景をクリックすると閉じます。
+ * 開いたウィンドウはヘッダーをドラッグして移動できます。
+ */
+export const EscapeToOpen = {
+    render: () => (_jsx(LogWindowEscapeDemo, { entries: sampleEntries, networkEntries: [...sampleNetworkRest, ...sampleNetworkGraphql] })),
+};

package/dist/components/LogWindow/LogWindow.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=LogWindow.test.d.ts.map

package/dist/components/LogWindow/LogWindow.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogWindow.test.d.ts","sourceRoot":"","sources":["../../../src/components/LogWindow/LogWindow.test.tsx"],"names":[],"mappings":""}

package/dist/components/LogWindow/LogWindow.test.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LogWindow } from './LogWindow';
+describe('LogWindow', () => {
+    it('renders with empty entries by default', () => {
+        render(_jsx(LogWindow, {}));
+        expect(screen.getByRole('button', { name: /logs/i })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /networks/i })).toBeInTheDocument();
+    });
+    it('renders log entries', () => {
+        const entries = [
+            { id: '1', level: 'info', message: 'Test message', source: 'app' },
+            { id: '2', level: 'warn', message: 'Warning', source: 'app' },
+        ];
+        render(_jsx(LogWindow, { entries: entries }));
+        expect(screen.getByText('Test message')).toBeInTheDocument();
+        expect(screen.getByText('Warning')).toBeInTheDocument();
+    });
+    it('renders network entries in Networks tab', async () => {
+        const user = userEvent.setup();
+        const networkEntries = [
+            {
+                id: 'n1',
+                type: 'rest',
+                method: 'GET',
+                url: 'https://api.example.com/posts',
+                status: 200,
+                statusText: 'OK',
+                request: 'GET /posts',
+                response: '[]',
+            },
+        ];
+        render(_jsx(LogWindow, { networkEntries: networkEntries }));
+        const networksTab = screen.getByRole('button', { name: /networks/i });
+        await user.click(networksTab);
+        expect(screen.getByText(/GET.*posts/i)).toBeInTheDocument();
+    });
+    it('shows login form when showLogin is true and onLogin provided', () => {
+        const onLogin = vi.fn().mockResolvedValue(undefined);
+        render(_jsx(LogWindow, { showLogin: true, loginTitle: "Sign in", onLogin: onLogin }));
+        expect(screen.getByPlaceholderText('••••••••')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /log in/i })).toBeInTheDocument();
+        expect(screen.getAllByText('Sign in').length).toBeGreaterThan(0);
+    });
+    it('when showLogin, does not show Logs/Networks tabs', () => {
+        render(_jsx(LogWindow, { showLogin: true, onLogin: async () => { } }));
+        expect(screen.queryByRole('button', { name: /^logs$/i })).not.toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: /^networks$/i })).not.toBeInTheDocument();
+    });
+    it('calls onClose when close button is clicked', async () => {
+        const user = userEvent.setup();
+        const onClose = vi.fn();
+        render(_jsx(LogWindow, { onClose: onClose }));
+        const closeBtn = screen.getByRole('button', { name: /close/i });
+        await user.click(closeBtn);
+        await new Promise((r) => setTimeout(r, 250));
+        expect(onClose).toHaveBeenCalled();
+    });
+});

package/dist/components/LogWindow/LogWindowEscapeDemo.d.ts

@@ -0,0 +1,12 @@
+import type { LogEntry, NetworkEntry } from './types';
+import './LogWindow.css';
+export type LogWindowEscapeDemoProps = {
+    entries?: LogEntry[];
+    networkEntries?: NetworkEntry[];
+};
+/**
+ * Escape を 5 回押すとログウィンドウを表示するデモ。
+ * Storybook でテスト用に利用。
+ */
+export declare function LogWindowEscapeDemo({ entries, networkEntries, }: LogWindowEscapeDemoProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LogWindowEscapeDemo.d.ts.map

package/dist/components/LogWindow/LogWindowEscapeDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogWindowEscapeDemo.d.ts","sourceRoot":"","sources":["../../../src/components/LogWindow/LogWindowEscapeDemo.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACtD,OAAO,iBAAiB,CAAC;AAyCzB,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;CACjC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,OAAY,EACZ,cAAmB,GACpB,EAAE,wBAAwB,2CAyC1B"}

package/dist/components/LogWindow/LogWindowEscapeDemo.js

@@ -0,0 +1,56 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+import { LogWindow } from './LogWindow';
+import { useLogWindowShortcut } from '../../hooks/useLogWindowShortcut';
+import './LogWindow.css';
+const demoStyles = {
+    position: 'relative',
+    minHeight: 300,
+    padding: 24,
+    background: 'var(--logw-bg, #1e1e1e)',
+    borderRadius: 8,
+    color: 'var(--logw-text, #d4d4d4)',
+    fontFamily: 'ui-monospace, monospace',
+};
+const overlayStyles = {
+    position: 'fixed',
+    inset: 0,
+    background: 'transparent',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 9999,
+    padding: 24,
+    boxSizing: 'border-box',
+};
+const instructionStyles = {
+    marginBottom: 16,
+    fontSize: 14,
+    color: 'var(--logw-text-muted, #858585)',
+};
+const countStyles = {
+    fontSize: 12,
+    marginTop: 8,
+    padding: '6px 12px',
+    background: 'rgba(255,255,255,0.08)',
+    borderRadius: 4,
+    display: 'inline-block',
+};
+const ESCAPE_COUNT = 5;
+/**
+ * Escape を 5 回押すとログウィンドウを表示するデモ。
+ * Storybook でテスト用に利用。
+ */
+export function LogWindowEscapeDemo({ entries = [], networkEntries = [], }) {
+    const { isOpen, close, escapeCount: count } = useLogWindowShortcut({
+        escapeCount: ESCAPE_COUNT,
+        resetAfterMs: 1500,
+        closeOnEscape: true,
+    });
+    return (_jsxs("div", { style: demoStyles, children: [_jsx("div", { style: instructionStyles, children: _jsxs("strong", { children: ["Escape \u30AD\u30FC\u3092 ", ESCAPE_COUNT, " \u56DE\u62BC\u3059\u3068\u30ED\u30B0\u30A6\u30A3\u30F3\u30C9\u30A6\u304C\u958B\u304D\u307E\u3059\u3002"] }) }), _jsxs("div", { style: countStyles, children: ["Escape: ", count, " / ", ESCAPE_COUNT] }), isOpen &&
+                typeof document !== 'undefined' &&
+                createPortal(_jsx("div", { style: overlayStyles, role: "presentation", children: _jsx("div", { onClick: (e) => e.stopPropagation(), children: _jsx(LogWindow, { entries: entries, networkEntries: networkEntries, draggable: true, animateOnOpen: true, onClose: close, defaultPosition: {
+                                x: typeof window !== 'undefined' ? Math.max(0, (window.innerWidth - 696) / 2) : 100,
+                                y: typeof window !== 'undefined' ? Math.max(0, (window.innerHeight - 466) / 2) : 100,
+                            } }) }) }), document.body)] }));
+}

package/dist/components/LogWindow/NetworkEntryRow.d.ts

@@ -0,0 +1,8 @@
+import type { NetworkEntry } from './types';
+import './LogWindow.css';
+type NetworkEntryRowProps = {
+    entry: NetworkEntry;
+};
+export declare function NetworkEntryRow({ entry }: NetworkEntryRowProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NetworkEntryRow.d.ts.map

package/dist/components/LogWindow/NetworkEntryRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkEntryRow.d.ts","sourceRoot":"","sources":["../../../src/components/LogWindow/NetworkEntryRow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,iBAAiB,CAAC;AAEzB,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,YAAY,CAAC;CACrB,CAAC;AASF,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,oBAAoB,2CAqF9D"}