@yargram/react 1.0.0

package/dist/contexts/YargramContext.js

@@ -0,0 +1,414 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback, useMemo, useId, useRef, useEffect, } from 'react';
+import { createPortal } from 'react-dom';
+import { createPrinter } from '@yargram/core';
+import { ApolloClient, ApolloProvider, InMemoryCache, } from '@apollo/client';
+import { getOperationAST, print } from 'graphql';
+import { ApiProvider, ApiContext } from './ApiContext';
+import { PrinterProvider } from './PrinterContext';
+import { useLogWindowShortcut } from '../hooks/useLogWindowShortcut';
+import { LogWindow } from '../components/LogWindow/LogWindow';
+import '../components/LogWindow/LogWindow.css';
+const AUTH_STORAGE_KEY = 'yargram_auth_token';
+const DEFAULT_TOKEN_TTL_MS = 7 * 24 * 60 * 60 * 1000; // 7日
+function isProductionOrStaging() {
+    if (typeof process === 'undefined')
+        return false;
+    const env = process.env?.NODE_ENV;
+    return env === 'production' || env === 'staging';
+}
+function isStorybook() {
+    if (typeof window === 'undefined')
+        return false;
+    const w = window;
+    return w.IS_STORYBOOK === true || Boolean(w.__STORYBOOK_CLIENT_API__);
+}
+function storybookSimulateProduction(prop) {
+    if (typeof window === 'undefined')
+        return false;
+    const w = window;
+    return prop === true || w.__YARGRAM_STORYBOOK_SIMULATE_PRODUCTION__ === true;
+}
+function getCurrentDomain() {
+    if (typeof window === 'undefined')
+        return '';
+    return window.location.hostname || '';
+}
+function loadPersistedAuth() {
+    if (typeof localStorage === 'undefined')
+        return false;
+    try {
+        const raw = localStorage.getItem(AUTH_STORAGE_KEY);
+        if (!raw)
+            return false;
+        const data = JSON.parse(raw);
+        if (data &&
+            typeof data === 'object' &&
+            'token' in data &&
+            'domain' in data &&
+            'expiresAt' in data &&
+            typeof data.domain === 'string' &&
+            typeof data.expiresAt === 'number') {
+            const { domain, expiresAt } = data;
+            const now = Date.now();
+            return domain === getCurrentDomain() && expiresAt > now;
+        }
+        return false;
+    }
+    catch {
+        return false;
+    }
+}
+function persistAuth(value, ttlMs = DEFAULT_TOKEN_TTL_MS) {
+    if (typeof localStorage === 'undefined')
+        return;
+    try {
+        if (value) {
+            const token = typeof crypto !== 'undefined' && crypto.randomUUID
+                ? crypto.randomUUID()
+                : `t-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+            const domain = getCurrentDomain();
+            const expiresAt = Date.now() + ttlMs;
+            const data = { token, domain, expiresAt };
+            localStorage.setItem(AUTH_STORAGE_KEY, JSON.stringify(data));
+        }
+        else {
+            localStorage.removeItem(AUTH_STORAGE_KEY);
+        }
+    }
+    catch {
+        // ignore
+    }
+}
+/** デフォルトパスワード "12345678" の SHA-256 (hex) */
+const DEFAULT_PASSWORD_HASH = 'ef797c8118f02dfb649607dd5d3f8c7623048c9c063d532cc95c5ed7a898a64f';
+/**
+ * 環境変数からログイン用パスワードハッシュを取得。未設定時はデフォルト（12345678 の SHA-256）。
+ * パスワードを変更する場合は YAHMAN_LOGIN_PASSWORD_HASH または VITE_YAHMAN_LOGIN_PASSWORD_HASH に、
+ * 希望するパスワードの SHA-256 ハッシュ（hex）を設定する。
+ */
+function getAcceptedPasswordHash() {
+    const fromProcess = typeof process !== 'undefined' && process.env?.YAHMAN_LOGIN_PASSWORD_HASH
+        ? String(process.env.YAHMAN_LOGIN_PASSWORD_HASH).trim()
+        : '';
+    const meta = typeof import.meta !== 'undefined' ? import.meta : null;
+    const viteHash = meta?.env?.VITE_YAHMAN_LOGIN_PASSWORD_HASH;
+    const fromMeta = viteHash ? String(viteHash).trim() : '';
+    const fromEnv = fromProcess || fromMeta;
+    return fromEnv || DEFAULT_PASSWORD_HASH;
+}
+/** 文字列を SHA-256 でハッシュし hex 文字列で返す */
+async function sha256Hex(str) {
+    const buf = new TextEncoder().encode(str);
+    const hash = typeof crypto !== 'undefined' && crypto.subtle
+        ? await crypto.subtle.digest('SHA-256', buf)
+        : new Uint8Array(0);
+    return Array.from(new Uint8Array(hash))
+        .map((b) => b.toString(16).padStart(2, '0'))
+        .join('');
+}
+function resolveBody(body) {
+    if (body == null)
+        return undefined;
+    if (typeof body === 'string' ||
+        body instanceof ArrayBuffer ||
+        ArrayBuffer.isView(body) ||
+        body instanceof FormData ||
+        body instanceof URLSearchParams) {
+        return body;
+    }
+    return JSON.stringify(body);
+}
+const YargramContext = createContext(null);
+/** 認証有効時の子要素ラッパー（ログアウトは LogWindow 内のボタンから行う） */
+function AuthEscapeToLogin({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+/** 認証時はログウィンドウをポータル表示。未認証時は LogWindow 内にパスワード画面（production/staging のみ） */
+function LogWindowGate({ instanceId, defaultPosition, loginTitle, isAuthenticated, login, logout, loginError, clearLoginError, logEntries, networkEntries, isLogWindowOpen, closeLogWindow, }) {
+    if (!isLogWindowOpen || typeof document === 'undefined') {
+        return null;
+    }
+    return createPortal(_jsx("div", { onClick: (e) => e.stopPropagation(), children: _jsx(LogWindow, { entries: logEntries, networkEntries: networkEntries, draggable: true, animateOnOpen: true, onClose: closeLogWindow, onLogout: isAuthenticated ? logout : undefined, defaultPosition: defaultPosition, showLogin: !isAuthenticated, loginTitle: loginTitle, onLogin: !isAuthenticated ? login : undefined, loginError: loginError, onClearLoginError: clearLoginError }, instanceId) }), document.body);
+}
+function generateId() {
+    return typeof crypto !== 'undefined' && crypto.randomUUID
+        ? crypto.randomUUID()
+        : `id-${Math.random().toString(36).slice(2)}`;
+}
+export function YargramProvider({ children, api, printer = {}, logWindow, auth, }) {
+    const [logEntries, setLogEntries] = useState([]);
+    const [networkEntries, setNetworkEntries] = useState([]);
+    const instanceId = useId();
+    const simulateProduction = auth && typeof auth === 'object' && isStorybook() && storybookSimulateProduction(auth.storybookSimulateProduction);
+    const requiresAuth = auth && (auth === true || (typeof auth === 'object' && (auth.productionOnly !== false)))
+        ? isProductionOrStaging() || !!simulateProduction
+        : false;
+    const [isAuthenticated, setIsAuthenticated] = useState(() => auth && requiresAuth ? loadPersistedAuth() : false);
+    const [loginError, setLoginError] = useState(undefined);
+    useEffect(() => {
+        if (!requiresAuth)
+            return;
+        setIsAuthenticated(loadPersistedAuth());
+    }, [requiresAuth]);
+    const onLoginProp = auth && typeof auth === 'object' ? auth.onLogin : undefined;
+    const authPasswordHash = auth && typeof auth === 'object' && auth.passwordHash?.trim()
+        ? auth.passwordHash.trim()
+        : '';
+    const tokenTtlMs = auth && typeof auth === 'object' && auth.tokenTtlMs != null
+        ? auth.tokenTtlMs
+        : DEFAULT_TOKEN_TTL_MS;
+    const login = useCallback(async (password) => {
+        if (onLoginProp) {
+            await onLoginProp(password);
+            setLoginError(undefined);
+            setIsAuthenticated(true);
+            persistAuth(true, tokenTtlMs);
+        }
+        else {
+            if (!password)
+                throw new Error('Password is required.');
+            const inputHash = await sha256Hex(password);
+            const accepted = authPasswordHash || getAcceptedPasswordHash();
+            if (inputHash.toLowerCase() !== accepted.toLowerCase()) {
+                setLoginError('Invalid password.');
+            }
+            else {
+                setLoginError(undefined);
+                setIsAuthenticated(true);
+                persistAuth(true, tokenTtlMs);
+            }
+        }
+    }, [onLoginProp, authPasswordHash, tokenTtlMs]);
+    const logout = useCallback(() => {
+        setIsAuthenticated(false);
+        persistAuth(false);
+    }, []);
+    const handleLogin = useCallback(async (password) => {
+        setLoginError(undefined);
+        try {
+            await login(password);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : 'Login failed.';
+            setLoginError(message);
+            throw err;
+        }
+    }, [login]);
+    const clearLoginError = useCallback(() => setLoginError(undefined), []);
+    const addLogEntry = useCallback((entry) => {
+        const id = 'id' in entry && entry.id ? entry.id : generateId();
+        setLogEntries((prev) => [...prev, { ...entry, id }]);
+    }, []);
+    const addLogEntryRef = useRef(addLogEntry);
+    useEffect(() => {
+        addLogEntryRef.current = addLogEntry;
+    }, [addLogEntry]);
+    const addNetworkEntry = useCallback((entry) => {
+        const id = 'id' in entry && entry.id ? entry.id : generateId();
+        setNetworkEntries((prev) => [...prev, { ...entry, id }]);
+    }, []);
+    const env = printer.env ?? 'local';
+    const wrappedPrinter = useMemo(() => {
+        const base = createPrinter(env);
+        return {
+            info: (msg) => {
+                base.info(msg);
+                addLogEntryRef.current({ level: 'info', message: msg, source: 'app' });
+            },
+            warn: (msg) => {
+                base.warn(msg);
+                addLogEntryRef.current({ level: 'warn', message: msg, source: 'app' });
+            },
+            error: (msg) => {
+                base.error(msg);
+                addLogEntryRef.current({ level: 'error', message: msg, source: 'app' });
+            },
+        };
+    }, [env]);
+    const restBaseUrl = api.provider === 'rest'
+        ? (api.baseUrl ?? (typeof process !== 'undefined' ? process.env?.ENDPOINT_URL : '') ?? '')
+        : '';
+    const makeRestRequest = useCallback((method, path, body, options) => {
+        const url = restBaseUrl + path;
+        const isJson = body != null &&
+            typeof body === 'object' &&
+            !(body instanceof FormData) &&
+            !(body instanceof URLSearchParams);
+        const init = {
+            ...options,
+            method,
+            body: resolveBody(body),
+            headers: isJson ? { 'Content-Type': 'application/json', ...options?.headers } : options?.headers,
+        };
+        const requestStr = method === 'GET' || method === 'DELETE'
+            ? `${method} ${path}`
+            : body != null
+                ? typeof body === 'object' && !(body instanceof FormData) && !(body instanceof URLSearchParams)
+                    ? JSON.stringify(body)
+                    : String(body)
+                : `${method} ${path}`;
+        const addEntry = (status, statusText, response) => {
+            addNetworkEntry({
+                type: 'rest',
+                method,
+                url,
+                status,
+                statusText,
+                request: requestStr,
+                response,
+            });
+        };
+        return fetch(url, init)
+            .then(async (res) => {
+            const text = await res.clone().text().catch(() => '(read failed)');
+            addEntry(res.status, res.statusText, text);
+            return res;
+        })
+            .catch((err) => {
+            addEntry(0, 'Error', String(err?.message ?? err));
+            throw err;
+        });
+    }, [restBaseUrl, addNetworkEntry]);
+    const wrappedRestApi = useMemo(() => ({
+        provider: 'rest',
+        get: (path, options) => makeRestRequest('GET', path, undefined, options),
+        post: (path, body, options) => makeRestRequest('POST', path, body, options),
+        put: (path, body, options) => makeRestRequest('PUT', path, body, options),
+        delete: (path, options) => makeRestRequest('DELETE', path, undefined, options),
+    }), [makeRestRequest]);
+    const graphqlUri = api.provider === 'graphql'
+        ? (api.uri ?? (typeof process !== 'undefined' ? process.env?.GRAPHQL_URI : '') ?? '')
+        : '';
+    const graphqlClient = useMemo(() => {
+        if (api.provider !== 'graphql')
+            return null;
+        const clientOpt = api.client;
+        if (clientOpt)
+            return clientOpt;
+        return new ApolloClient({
+            uri: graphqlUri || '/graphql',
+            cache: new InMemoryCache(),
+        });
+    }, [api, graphqlUri]);
+    const wrappedGraphqlApi = useMemo(() => {
+        if (!graphqlClient || api.provider !== 'graphql')
+            return null;
+        const url = graphqlUri || '/graphql';
+        return {
+            provider: 'graphql',
+            ransack: (options) => {
+                const requestStr = JSON.stringify({
+                    query: print(options.query),
+                    variables: options.variables,
+                });
+                const op = getOperationAST(options.query);
+                const operationName = op?.name?.value ?? 'Query';
+                return graphqlClient
+                    .query(options)
+                    .then((result) => {
+                    addNetworkEntry({
+                        type: 'graphql',
+                        operationName,
+                        url,
+                        status: 200,
+                        statusText: 'OK',
+                        request: requestStr,
+                        response: JSON.stringify(result.data ?? result),
+                    });
+                    return result;
+                })
+                    .catch((err) => {
+                    addNetworkEntry({
+                        type: 'graphql',
+                        operationName,
+                        url,
+                        status: 0,
+                        statusText: 'Error',
+                        request: requestStr,
+                        response: String(err?.message ?? err),
+                    });
+                    throw err;
+                });
+            },
+            handing: (options) => {
+                const requestStr = JSON.stringify({
+                    mutation: print(options.mutation),
+                    variables: options.variables,
+                });
+                const op = getOperationAST(options.mutation);
+                const operationName = op?.name?.value ?? 'Mutation';
+                return graphqlClient
+                    .mutate(options)
+                    .then((result) => {
+                    addNetworkEntry({
+                        type: 'graphql',
+                        operationName,
+                        url,
+                        status: 200,
+                        statusText: 'OK',
+                        request: requestStr,
+                        response: JSON.stringify(result.data ?? result),
+                    });
+                    return result;
+                })
+                    .catch((err) => {
+                    addNetworkEntry({
+                        type: 'graphql',
+                        operationName,
+                        url,
+                        status: 0,
+                        statusText: 'Error',
+                        request: requestStr,
+                        response: String(err?.message ?? err),
+                    });
+                    throw err;
+                });
+            },
+        };
+    }, [graphqlClient, api.provider, graphqlUri, addNetworkEntry]);
+    const logWindowShortcut = useLogWindowShortcut(logWindow
+        ? {
+            escapeCount: 5,
+            resetAfterMs: 1500,
+            closeOnEscape: true,
+        }
+        : { escapeCount: 5, resetAfterMs: 1500 });
+    const { isOpen: isLogWindowOpen, close: closeLogWindow, open: openLogWindow } = logWindowShortcut;
+    const defaultLogWindowPosition = useMemo(() => ({
+        x: typeof window !== 'undefined' ? Math.max(0, (window.innerWidth - 696) / 2) : 100,
+        y: typeof window !== 'undefined' ? Math.max(0, (window.innerHeight - 466) / 2) : 100,
+    }), []);
+    const yargramValue = useMemo(() => ({
+        addLogEntry,
+        addNetworkEntry,
+        openLogWindow,
+        closeLogWindow,
+        logEntries,
+        networkEntries,
+        isLogWindowOpen,
+    }), [
+        addLogEntry,
+        addNetworkEntry,
+        openLogWindow,
+        closeLogWindow,
+        logEntries,
+        networkEntries,
+        isLogWindowOpen,
+    ]);
+    const apiElement = api.provider === 'rest' ? (_jsx(ApiContext.Provider, { value: wrappedRestApi, children: children })) : wrappedGraphqlApi && graphqlClient ? (_jsx(ApolloProvider, { client: graphqlClient, children: _jsx(ApiContext.Provider, { value: wrappedGraphqlApi, children: children }) })) : (_jsx(ApiProvider, { provider: "graphql", uri: api.uri, client: api.client, children: children }));
+    /** 認証なしのときのみここでログウィンドウを表示。認証ありのときは LogWindowGate で表示 */
+    const logWindowElement = !auth &&
+        isLogWindowOpen &&
+        typeof document !== 'undefined' &&
+        createPortal(_jsx("div", { onClick: (e) => e.stopPropagation(), children: _jsx(LogWindow, { entries: logEntries, networkEntries: networkEntries, draggable: true, animateOnOpen: true, onClose: closeLogWindow, defaultPosition: defaultLogWindowPosition }, instanceId) }), document.body);
+    const content = (_jsx(PrinterProvider, { env: env, printer: wrappedPrinter, children: apiElement }));
+    return (_jsxs(YargramContext.Provider, { value: yargramValue, children: [auth ? (_jsxs(_Fragment, { children: [_jsx(AuthEscapeToLogin, { children: content }), _jsx(LogWindowGate, { instanceId: instanceId, defaultPosition: defaultLogWindowPosition, loginTitle: typeof auth === 'object' ? auth.loginTitle : undefined, isAuthenticated: isAuthenticated, login: handleLogin, logout: logout, loginError: loginError, clearLoginError: clearLoginError, logEntries: logEntries, networkEntries: networkEntries, isLogWindowOpen: isLogWindowOpen, closeLogWindow: closeLogWindow })] })) : (content), logWindowElement] }));
+}
+export function useYargram() {
+    const ctx = useContext(YargramContext);
+    if (!ctx) {
+        throw new Error('useYargram must be used within YargramProvider');
+    }
+    return ctx;
+}

package/dist/contexts/YargramContext.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { YargramProvider } from './YargramContext';
+declare const meta: Meta<typeof YargramProvider>;
+export default meta;
+type Story = StoryObj<typeof YargramProvider>;
+/** Api (REST) + Printer + LogWindow（Escape 5回で表示）。REST は JSONPlaceholder /posts を使用 */
+export declare const Default: Story;
+/**
+ * 本番時のみ認証（auth: true）。
+ * storybookSimulateProduction: true で Storybook 内だけ本番扱いし、ログイン画面を表示。
+ * 本番ビルド時は NODE_ENV=production で同様にログイン要求。
+ */
+export declare const WithAuthProductionOnly: Story;
+/** GraphQL: useApi().ransack (QUERY) / .handing (MUTATION) → Network */
+export declare const GraphQL: Story;
+//# sourceMappingURL=YargramContext.stories.d.ts.map

package/dist/contexts/YargramContext.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"YargramContext.stories.d.ts","sourceRoot":"","sources":["../../src/contexts/YargramContext.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,eAAe,EAAc,MAAM,kBAAkB,CAAC;AA4F/D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAKtC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,eAAe,CAAC,CAAC;AAE9C,uFAAuF;AACvF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAWpC,CAAC;AAEF,wEAAwE;AACxE,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC"}

package/dist/contexts/YargramContext.stories.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { gql } from '@apollo/client';
+import { YargramProvider, useYargram } from './YargramContext';
+import { usePrinter } from './PrinterContext';
+import { useApi } from './ApiContext';
+function DemoContent() {
+    const { openLogWindow } = useYargram();
+    const printer = usePrinter();
+    const api = useApi();
+    const addInfo = () => printer.info('Info from usePrinter');
+    const addWarn = () => printer.warn('Warn from usePrinter');
+    const addError = () => printer.error('Error from usePrinter');
+    if (api.provider === 'rest') {
+        return (_jsxs("div", { style: { padding: 24, fontFamily: 'sans-serif' }, children: [_jsx("h3", { children: "YargramProvider \u30C7\u30E2 (REST)" }), _jsx("p", { children: "Escape \u30AD\u30FC\u3092 5 \u56DE\u62BC\u3059\u3068\u30ED\u30B0\u30A6\u30A3\u30F3\u30C9\u30A6\u304C\u958B\u304D\u307E\u3059\u3002" }), _jsx("p", { style: { fontSize: 12, color: '#666', marginTop: 8 }, children: "usePrinter().info / warn / error \u2192 Log \u30BF\u30D6\u3002useApi().get / post / put / delete \u2192 Network \u30BF\u30D6\u306B\u53CD\u6620\u3002" }), _jsxs("div", { style: { display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 16 }, children: [_jsx("button", { type: "button", onClick: addInfo, children: "Log: Info" }), _jsx("button", { type: "button", onClick: addWarn, children: "Log: Warn" }), _jsx("button", { type: "button", onClick: addError, children: "Log: Error" }), _jsx("button", { type: "button", onClick: () => api.get('/posts').then((res) => printer.info(`Response: ${res.status} ${res.statusText}`)).catch((err) => printer.error(`Error: ${err.message}`)), children: "Network: GET /posts" }), _jsx("button", { type: "button", onClick: () => api
+                                .post('/posts', { title: 'Storybook post', body: 'Body from demo', userId: 1 })
+                                .then((res) => printer.info(`Response: ${res.status} ${res.statusText}`))
+                                .catch((err) => printer.error(`Error: ${err.message}`)), children: "Network: POST /posts" }), _jsx("button", { type: "button", onClick: () => api
+                                .put('/posts/1', { id: 1, title: 'Updated title', body: 'Updated body', userId: 1 })
+                                .then((res) => printer.info(`Response: ${res.status} ${res.statusText}`))
+                                .catch((err) => printer.error(`Error: ${err.message}`)), children: "Network: PUT /posts/1" }), _jsx("button", { type: "button", onClick: () => api.delete('/posts/1').then((res) => printer.info(`Response: ${res.status} ${res.statusText}`)).catch(() => { }), children: "Network: DELETE /posts/1" }), _jsx("button", { type: "button", onClick: openLogWindow, children: "\u30ED\u30B0\u30A6\u30A3\u30F3\u30C9\u30A6\u3092\u958B\u304F" })] })] }));
+    }
+    const runQuery = () => {
+        api
+            .ransack({
+            query: gql `
+          query GetUser { user(id: "1") { id name } }
+        `,
+        })
+            .catch((err) => printer.error(`Error: ${err.message}`));
+    };
+    const runMutation = () => {
+        api
+            .handing({
+            mutation: gql `
+          mutation UpdateUser { updateUser(id: "1", name: "x") { id name } }
+        `,
+        })
+            .catch((err) => printer.error(`Error: ${err.message}`));
+    };
+    return (_jsxs("div", { style: { padding: 24, fontFamily: 'sans-serif' }, children: [_jsx("h3", { children: "YargramProvider \u30C7\u30E2 (GraphQL)" }), _jsx("p", { children: "useApi().ransack (QUERY) / .handing (MUTATION) \u3067 Network \u30BF\u30D6\u306B\u53CD\u6620\u3002" }), _jsxs("div", { style: { display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 16 }, children: [_jsx("button", { type: "button", onClick: addInfo, children: "Log: Info" }), _jsx("button", { type: "button", onClick: runQuery, children: "Network: ransack (QUERY)" }), _jsx("button", { type: "button", onClick: runMutation, children: "Network: handing (MUTATION)" }), _jsx("button", { type: "button", onClick: openLogWindow, children: "\u30ED\u30B0\u30A6\u30A3\u30F3\u30C9\u30A6\u3092\u958B\u304F" })] })] }));
+}
+const meta = {
+    title: 'Contexts/YargramProvider',
+    component: YargramProvider,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+};
+export default meta;
+/** Api (REST) + Printer + LogWindow（Escape 5回で表示）。REST は JSONPlaceholder /posts を使用 */
+export const Default = {
+    render: () => (_jsx(YargramProvider, { api: { provider: 'rest', baseUrl: 'https://jsonplaceholder.typicode.com' }, printer: { env: 'local' }, logWindow: {}, children: _jsx(DemoContent, {}) })),
+};
+/**
+ * 本番時のみ認証（auth: true）。
+ * storybookSimulateProduction: true で Storybook 内だけ本番扱いし、ログイン画面を表示。
+ * 本番ビルド時は NODE_ENV=production で同様にログイン要求。
+ */
+export const WithAuthProductionOnly = {
+    render: () => (_jsx(YargramProvider, { api: { provider: 'rest', baseUrl: 'https://jsonplaceholder.typicode.com' }, printer: { env: 'local' }, logWindow: {}, auth: { storybookSimulateProduction: true }, children: _jsx(DemoContent, {}) })),
+};
+/** GraphQL: useApi().ransack (QUERY) / .handing (MUTATION) → Network */
+export const GraphQL = {
+    render: () => (_jsx(YargramProvider, { api: { provider: 'graphql', uri: 'https://api.example.com/graphql' }, printer: { env: 'local' }, logWindow: {}, children: _jsx(DemoContent, {}) })),
+};

package/dist/contexts/YargramContext.test.d.ts

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

package/dist/contexts/YargramContext.test.d.ts.map

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

package/dist/contexts/YargramContext.test.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { YargramProvider, useYargram } from './YargramContext';
+import { usePrinter } from './PrinterContext';
+import { useApi } from './ApiContext';
+vi.mock('react-dom', async () => {
+    const actual = await vi.importActual('react-dom');
+    return {
+        ...actual,
+        createPortal: (children) => children,
+    };
+});
+function Consumer() {
+    const yargram = useYargram();
+    const printer = usePrinter();
+    const api = useApi();
+    return (_jsxs("div", { children: [_jsx("span", { "data-testid": "is-open", children: String(yargram.isLogWindowOpen) }), _jsx("span", { "data-testid": "log-entries-count", children: yargram.logEntries.length }), _jsx("button", { type: "button", onClick: yargram.openLogWindow, children: "Open" }), _jsx("button", { type: "button", onClick: yargram.closeLogWindow, "data-testid": "close-log-window-btn", children: "Close" }), _jsx("button", { type: "button", onClick: () => {
+                    printer.info('hello');
+                    yargram.addLogEntry({ level: 'info', message: 'manual', source: 'test' });
+                }, children: "Add log" })] }));
+}
+describe('YargramProvider', () => {
+    beforeEach(() => {
+        vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: true, status: 200, statusText: 'OK', clone: () => ({ text: () => Promise.resolve('{}') }) }));
+    });
+    it('renders children and provides useYargram', () => {
+        render(_jsx(YargramProvider, { api: { provider: 'rest', baseUrl: 'https://api.example.com' }, logWindow: {}, children: _jsx(Consumer, {}) }));
+        expect(screen.getByTestId('is-open')).toHaveTextContent('false');
+        expect(screen.getByTestId('log-entries-count')).toHaveTextContent('0');
+    });
+    it('openLogWindow sets isLogWindowOpen to true', async () => {
+        const user = userEvent.setup();
+        render(_jsx(YargramProvider, { api: { provider: 'rest', baseUrl: 'https://api.example.com' }, logWindow: {}, children: _jsx(Consumer, {}) }));
+        await user.click(screen.getByRole('button', { name: /open/i }));
+        expect(screen.getByTestId('is-open')).toHaveTextContent('true');
+    });
+    it('addLogEntry adds to logEntries', async () => {
+        const user = userEvent.setup();
+        render(_jsx(YargramProvider, { api: { provider: 'rest', baseUrl: 'https://api.example.com' }, logWindow: {}, children: _jsx(Consumer, {}) }));
+        expect(screen.getByTestId('log-entries-count')).toHaveTextContent('0');
+        await user.click(screen.getByRole('button', { name: /add log/i }));
+        expect(screen.getByTestId('log-entries-count')).toHaveTextContent('2');
+    });
+    it('closeLogWindow sets isLogWindowOpen to false', async () => {
+        const user = userEvent.setup();
+        render(_jsx(YargramProvider, { api: { provider: 'rest', baseUrl: 'https://api.example.com' }, logWindow: {}, children: _jsx(Consumer, {}) }));
+        await user.click(screen.getByRole('button', { name: /open/i }));
+        expect(screen.getByTestId('is-open')).toHaveTextContent('true');
+        await user.click(screen.getByTestId('close-log-window-btn'));
+        expect(screen.getByTestId('is-open')).toHaveTextContent('false');
+    });
+});

package/dist/hooks/useLogWindowShortcut.d.ts

@@ -0,0 +1,24 @@
+export type UseLogWindowShortcutOptions = {
+    /** ログウィンドウを開くために必要な Escape の連続押下回数 */
+    escapeCount?: number;
+    /** この時間（ms）以内に次の Escape が押されないとカウントをリセットする */
+    resetAfterMs?: number;
+    /** ログウィンドウ表示中に Escape を押したら閉じる */
+    closeOnEscape?: boolean;
+    /** 指定時は threshold 到達時に open の代わりにこのコールバックを呼ぶ（例: 認証時はログアウトしてログインウィンドウ表示） */
+    onTrigger?: () => void;
+};
+export type UseLogWindowShortcutResult = {
+    /** ログウィンドウを表示するか */
+    isOpen: boolean;
+    /** ログウィンドウを開く */
+    open: () => void;
+    /** ログウィンドウを閉じる */
+    close: () => void;
+    /** トグル */
+    toggle: () => void;
+    /** 現在の Escape カウント（0 〜 escapeCount-1）。デバッグ・UI 表示用 */
+    escapeCount: number;
+};
+export declare function useLogWindowShortcut(options?: UseLogWindowShortcutOptions): UseLogWindowShortcutResult;
+//# sourceMappingURL=useLogWindowShortcut.d.ts.map

package/dist/hooks/useLogWindowShortcut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLogWindowShortcut.d.ts","sourceRoot":"","sources":["../../src/hooks/useLogWindowShortcut.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,2BAA2B,GAAG;IACxC,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,oBAAoB;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB;IACjB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,kBAAkB;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,UAAU;IACV,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,qDAAqD;IACrD,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,wBAAgB,oBAAoB,CAClC,OAAO,GAAE,2BAAgC,GACxC,0BAA0B,CAmE5B"}

package/dist/hooks/useLogWindowShortcut.js

@@ -0,0 +1,61 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+export function useLogWindowShortcut(options = {}) {
+    const { escapeCount: threshold = 5, resetAfterMs = 1500, closeOnEscape = true, onTrigger, } = options;
+    const [isOpen, setIsOpen] = useState(false);
+    const [escapeCount, setEscapeCount] = useState(0);
+    const lastEscapeAt = useRef(0);
+    const resetTimer = useRef(null);
+    const open = useCallback(() => setIsOpen(true), []);
+    const close = useCallback(() => setIsOpen(false), []);
+    const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key !== 'Escape')
+                return;
+            if (isOpen) {
+                if (closeOnEscape) {
+                    close();
+                }
+                return;
+            }
+            const now = Date.now();
+            if (now - lastEscapeAt.current > resetAfterMs) {
+                setEscapeCount(1);
+            }
+            else {
+                setEscapeCount((c) => {
+                    const next = c + 1;
+                    if (next >= threshold) {
+                        lastEscapeAt.current = 0;
+                        if (resetTimer.current) {
+                            clearTimeout(resetTimer.current);
+                            resetTimer.current = null;
+                        }
+                        if (onTrigger) {
+                            onTrigger();
+                        }
+                        else {
+                            open();
+                        }
+                        return 0;
+                    }
+                    return next;
+                });
+            }
+            lastEscapeAt.current = now;
+            if (resetTimer.current)
+                clearTimeout(resetTimer.current);
+            resetTimer.current = setTimeout(() => {
+                setEscapeCount(0);
+                resetTimer.current = null;
+            }, resetAfterMs);
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            if (resetTimer.current)
+                clearTimeout(resetTimer.current);
+        };
+    }, [isOpen, threshold, resetAfterMs, closeOnEscape, open, close, onTrigger]);
+    return { isOpen, open, close, toggle, escapeCount };
+}

package/dist/hooks/useLogWindowShortcut.test.d.ts

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

package/dist/hooks/useLogWindowShortcut.test.d.ts.map

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