@townco/ui 0.1.0

package/README.md

@@ -0,0 +1,175 @@
+# @town/ui
+
+Unified UI package with composable components for chat interfaces.
+
+## Architecture
+
+Three layers:
+
+1. **Core** (`@town/ui/core`) - Headless business logic
+1. **TUI** (`@town/ui/tui`) - Terminal renderers (Ink)
+1. **GUI** (`@town/ui/gui`) - Web renderers (React + Tailwind)
+
+## Installation
+
+```bash
+bun add @town/ui @town/ui
+
+# For TUI
+bun add ink react
+
+# For GUI
+bun add react react-dom
+```
+
+## Usage
+
+### Core (Headless Hooks)
+
+```typescript
+import { useChatSession, useChatMessages, useChatInput } from "@town/ui/core";
+
+function MyComponent({ client }) {
+  const { connectionStatus, sessionId } = useChatSession(client);
+  const { messages, isStreaming, sendMessage } = useChatMessages(client);
+  const { value, onChange, onSubmit } = useChatInput(client);
+
+  // Use these hooks to build any UI!
+}
+```
+
+### TUI (Terminal)
+
+```typescript
+import { render } from "ink";
+import { ChatView } from "@town/ui/tui";
+import { AcpClient } from "@town/ui";
+
+const client = new AcpClient({ stdio: { agentPath: "./agent" } });
+render(<ChatView client={client} />);
+```
+
+### GUI (Web)
+
+```typescript
+import ReactDOM from "react-dom/client";
+import { ChatView } from "@town/ui/gui";
+import { AcpClient } from "@town/ui";
+
+const client = new AcpClient({ http: { baseUrl: "http://localhost:8080" } });
+ReactDOM.createRoot(root).render(<ChatView client={client} />);
+```
+
+## Components
+
+### Core Hooks
+
+All hooks accept an `AcpClient | null` parameter.
+
+#### `useChatSession(client)`
+
+Manages connection and session lifecycle.
+
+**Returns**:
+
+- `connectionStatus` - Current connection state
+- `sessionId` - Active session ID
+- `connect()` - Connect to agent
+- `startSession()` - Start new session
+- `disconnect()` - Disconnect from agent
+
+#### `useChatMessages(client)`
+
+Manages message sending and receiving.
+
+**Returns**:
+
+- `messages` - Array of display messages
+- `isStreaming` - Whether currently streaming
+- `sendMessage(content)` - Send a message
+
+#### `useChatInput(client)`
+
+Manages input state and submission.
+
+**Returns**:
+
+- `value` - Current input value
+- `isSubmitting` - Whether submitting
+- `attachedFiles` - File attachments
+- `onChange(value)` - Update input
+- `onSubmit()` - Submit message
+- `onAttachFile(file)` - Attach file
+- `onRemoveFile(index)` - Remove file
+
+### TUI Components
+
+Built with Ink for terminal UIs.
+
+#### `<ChatView client={client} />`
+
+Complete chat interface.
+
+#### `<StatusBar connectionStatus sessionId isStreaming />`
+
+Status indicator bar.
+
+#### `<MessageList messages />`
+
+Scrollable message list.
+
+#### `<InputBox value isSubmitting attachedFiles onChange onSubmit onRemoveFile />`
+
+Input field with file attachments.
+
+### GUI Components
+
+Built with React + Tailwind for web UIs.
+
+Same props as TUI components, but with web-friendly styling!
+
+## Key Benefits
+
+1. **Shared Logic**: TUI and GUI use identical hooks
+1. **Composable**: Build custom UIs from primitives
+1. **Type-Safe**: Full TypeScript support
+1. **State Management**: Zustand for global state
+1. **Validation**: Zod schemas for all data
+
+## Development
+
+```bash
+# Install dependencies
+bun install
+
+# Build
+bun run build
+
+# Test
+bun test
+```
+
+## Example: Custom Component
+
+```typescript
+import { useChatMessages, useChatInput } from "@town/ui/core";
+
+function CustomChat({ client }) {
+  const { messages, sendMessage } = useChatMessages(client);
+  const { value, onChange, onSubmit } = useChatInput(client);
+
+  return (
+    <div>
+      <div>
+        {messages.map(msg => (
+          <div key={msg.id}>{msg.content}</div>
+        ))}
+      </div>
+      <input value={value} onChange={e => onChange(e.target.value)} />
+      <button onClick={onSubmit}>Send</button>
+    </div>
+  );
+}
+```
+
+The headless core makes it easy to build any UI!

package/dist/core/hooks/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Export all core hooks
+ */
+export * from "./use-chat-input.js";
+export * from "./use-chat-messages.js";
+export * from "./use-chat-session.js";

package/dist/core/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/hooks/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC"}

package/dist/core/hooks/index.js

@@ -0,0 +1,6 @@
+/**
+ * Export all core hooks
+ */
+export * from "./use-chat-input.js";
+export * from "./use-chat-messages.js";
+export * from "./use-chat-session.js";

package/dist/core/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/hooks/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC"}

package/dist/core/hooks/use-chat-input.d.ts

@@ -0,0 +1,23 @@
+import type { AcpClient } from "../../sdk/client/index.js";
+/**
+ * Hook for managing chat input
+ */
+export declare function useChatInput(client: AcpClient | null): {
+    value: string;
+    isSubmitting: boolean;
+    attachedFiles: {
+        name: string;
+        path: string;
+        size: number;
+        mimeType: string;
+    }[];
+    onChange: (value: string) => void;
+    onSubmit: () => Promise<void>;
+    onAttachFile: (file: {
+        name: string;
+        path: string;
+        size: number;
+        mimeType: string;
+    }) => void;
+    onRemoveFile: (index: number) => void;
+};

package/dist/core/hooks/use-chat-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chat-input.d.ts","sourceRoot":"","sources":["../../../src/core/hooks/use-chat-input.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAI3D;;GAEG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI;;;;;;;;;sBAezC,MAAM;;yBAkCP;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE;0BAU7D,MAAM;EAejB"}

package/dist/core/hooks/use-chat-input.js

@@ -0,0 +1,63 @@
+import { useCallback } from "react";
+import { useChatStore } from "../store/chat-store.js";
+import { useChatMessages } from "./use-chat-messages.js";
+/**
+ * Hook for managing chat input
+ */
+export function useChatInput(client) {
+    const input = useChatStore((state) => state.input);
+    const setInputValue = useChatStore((state) => state.setInputValue);
+    const setInputSubmitting = useChatStore((state) => state.setInputSubmitting);
+    const addFileAttachment = useChatStore((state) => state.addFileAttachment);
+    const removeFileAttachment = useChatStore((state) => state.removeFileAttachment);
+    const { sendMessage } = useChatMessages(client);
+    /**
+     * Handle input value change
+     */
+    const handleInputChange = useCallback((value) => {
+        setInputValue(value);
+    }, [setInputValue]);
+    /**
+     * Handle input submission
+     */
+    const handleSubmit = useCallback(async () => {
+        if (!input.value.trim() || input.isSubmitting) {
+            return;
+        }
+        const message = input.value;
+        // Clear input immediately for better UX
+        setInputValue("");
+        setInputSubmitting(true);
+        try {
+            await sendMessage(message);
+        }
+        catch (error) {
+            // Error is handled in useChatMessages
+            console.error("Failed to send message:", error);
+        }
+        finally {
+            setInputSubmitting(false);
+        }
+    }, [input, setInputValue, setInputSubmitting, sendMessage]);
+    /**
+     * Handle file attachment
+     */
+    const handleAttachFile = useCallback((file) => {
+        addFileAttachment(file);
+    }, [addFileAttachment]);
+    /**
+     * Handle file removal
+     */
+    const handleRemoveFile = useCallback((index) => {
+        removeFileAttachment(index);
+    }, [removeFileAttachment]);
+    return {
+        value: input.value,
+        isSubmitting: input.isSubmitting,
+        attachedFiles: input.attachedFiles,
+        onChange: handleInputChange,
+        onSubmit: handleSubmit,
+        onAttachFile: handleAttachFile,
+        onRemoveFile: handleRemoveFile,
+    };
+}

package/dist/core/hooks/use-chat-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chat-input.js","sourceRoot":"","sources":["../../../src/core/hooks/use-chat-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,MAAwB;IACnD,MAAM,KAAK,GAAG,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACnD,MAAM,aAAa,GAAG,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;IACnE,MAAM,kBAAkB,GAAG,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAC7E,MAAM,iBAAiB,GAAG,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;IAC3E,MAAM,oBAAoB,GAAG,YAAY,CACvC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,oBAAoB,CACtC,CAAC;IAEF,MAAM,EAAE,WAAW,EAAE,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;IAEhD;;OAEG;IACH,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,KAAa,EAAE,EAAE;QAChB,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF;;OAEG;IACH,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QAC1C,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,KAAK,CAAC,YAAY,EAAE,CAAC;YAC9C,OAAO;QACT,CAAC;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC;QAE5B,wCAAwC;QACxC,aAAa,CAAC,EAAE,CAAC,CAAC;QAClB,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAEzB,IAAI,CAAC;YACH,MAAM,WAAW,CAAC,OAAO,CAAC,CAAC;QAC7B,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAC;QAClD,CAAC;gBAAS,CAAC;YACT,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,WAAW,CAAC,CAAC,CAAC;IAE5D;;OAEG;IACH,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,IAAoE,EAAE,EAAE;QACvE,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,EACD,CAAC,iBAAiB,CAAC,CACpB,CAAC;IAEF;;OAEG;IACH,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,KAAa,EAAE,EAAE;QAChB,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,EACD,CAAC,oBAAoB,CAAC,CACvB,CAAC;IAEF,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,YAAY,EAAE,KAAK,CAAC,YAAY;QAChC,aAAa,EAAE,KAAK,CAAC,aAAa;QAClC,QAAQ,EAAE,iBAAiB;QAC3B,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,gBAAgB;QAC9B,YAAY,EAAE,gBAAgB;KAC/B,CAAC;AACJ,CAAC"}

package/dist/core/hooks/use-chat-messages.d.ts

@@ -0,0 +1,17 @@
+import type { AcpClient } from "../../sdk/client/index.js";
+/**
+ * Hook for managing chat messages
+ */
+export declare function useChatMessages(client: AcpClient | null): {
+    messages: {
+        id: string;
+        role: "user" | "assistant" | "system";
+        content: string;
+        timestamp: string;
+        isStreaming: boolean;
+        streamingStartTime?: number | undefined;
+        metadata?: Record<string, unknown> | undefined;
+    }[];
+    isStreaming: boolean;
+    sendMessage: (content: string) => Promise<void>;
+};

package/dist/core/hooks/use-chat-messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chat-messages.d.ts","sourceRoot":"","sources":["../../../src/core/hooks/use-chat-messages.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAI3D;;GAEG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI;;;;;;;;;;;2BAgBpC,MAAM;EAsHzB"}

package/dist/core/hooks/use-chat-messages.js

@@ -0,0 +1,121 @@
+import { useCallback } from "react";
+import { useChatStore } from "../store/chat-store.js";
+/**
+ * Hook for managing chat messages
+ */
+export function useChatMessages(client) {
+    const messages = useChatStore((state) => state.messages);
+    const isStreaming = useChatStore((state) => state.isStreaming);
+    const sessionId = useChatStore((state) => state.sessionId);
+    const setIsStreaming = useChatStore((state) => state.setIsStreaming);
+    const setStreamingStartTime = useChatStore((state) => state.setStreamingStartTime);
+    const addMessage = useChatStore((state) => state.addMessage);
+    const updateMessage = useChatStore((state) => state.updateMessage);
+    const setError = useChatStore((state) => state.setError);
+    /**
+     * Send a message to the agent
+     */
+    const sendMessage = useCallback(async (content) => {
+        if (!client) {
+            console.error("❌ No client available");
+            setError("No client available");
+            return;
+        }
+        if (!sessionId) {
+            console.error("❌ No active session");
+            setError("No active session");
+            return;
+        }
+        try {
+            // Start streaming and track time immediately
+            const startTime = Date.now();
+            setIsStreaming(true);
+            setStreamingStartTime(startTime);
+            // Add user message to UI
+            const userMessage = {
+                id: `msg_${Date.now()}_user`,
+                role: "user",
+                content,
+                timestamp: new Date().toISOString(),
+                isStreaming: false,
+            };
+            addMessage(userMessage);
+            // Create placeholder for assistant message BEFORE sending
+            const assistantMessageId = `msg_${Date.now()}_assistant`;
+            const assistantMessage = {
+                id: assistantMessageId,
+                role: "assistant",
+                content: "",
+                timestamp: new Date().toISOString(),
+                isStreaming: true,
+                streamingStartTime: startTime, // Use the same start time from when user sent message
+            };
+            addMessage(assistantMessage);
+            // Build full conversation history (excluding system messages)
+            const conversationHistory = messages
+                .filter((msg) => msg.role !== "system")
+                .map((msg) => `${msg.role === "user" ? "Human" : "Assistant"}: ${msg.content}`)
+                .join("\n\n");
+            // Combine history with new message
+            const fullPrompt = conversationHistory
+                ? `${conversationHistory}\n\nHuman: ${content}`
+                : content;
+            // Start receiving chunks (async iterator)
+            const messageStream = client.receiveMessages();
+            // Send full conversation without awaiting (fire and forget)
+            // This allows chunks to start arriving while we're listening
+            client.sendMessage(fullPrompt, sessionId).catch((error) => {
+                const message = error instanceof Error ? error.message : String(error);
+                setError(message);
+                setIsStreaming(false);
+                setStreamingStartTime(null);
+            });
+            // Listen for streaming chunks
+            let accumulatedContent = "";
+            for await (const chunk of messageStream) {
+                if (chunk.isComplete) {
+                    // Update final message
+                    updateMessage(assistantMessageId, {
+                        content: accumulatedContent,
+                        isStreaming: false,
+                        streamingStartTime: undefined, // Clear streaming start time
+                    });
+                    setIsStreaming(false);
+                    setStreamingStartTime(null); // Clear global streaming start time
+                    break;
+                }
+                else {
+                    // Update streaming content
+                    if (chunk.contentDelta.type === "text") {
+                        accumulatedContent += chunk.contentDelta.text;
+                        updateMessage(assistantMessageId, {
+                            content: accumulatedContent,
+                        });
+                        // Small delay to allow Ink to render between chunks (~60fps)
+                        await new Promise((resolve) => setTimeout(resolve, 16));
+                    }
+                }
+            }
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            setError(message);
+            setIsStreaming(false);
+            setStreamingStartTime(null); // Clear streaming start time on error
+        }
+    }, [
+        client,
+        sessionId,
+        messages,
+        addMessage,
+        updateMessage,
+        setIsStreaming,
+        setStreamingStartTime,
+        setError,
+    ]);
+    return {
+        messages,
+        isStreaming,
+        sendMessage,
+    };
+}

package/dist/core/hooks/use-chat-messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chat-messages.js","sourceRoot":"","sources":["../../../src/core/hooks/use-chat-messages.ts"],"names":[],"mappings":"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"}

package/dist/core/hooks/use-chat-session.d.ts

@@ -0,0 +1,11 @@
+import type { AcpClient } from "../../sdk/client/index.js";
+/**
+ * Hook for managing chat session lifecycle
+ */
+export declare function useChatSession(client: AcpClient | null): {
+    connectionStatus: "error" | "connecting" | "connected" | "disconnected";
+    sessionId: string | null;
+    connect: () => Promise<void>;
+    startSession: () => Promise<void>;
+    disconnect: () => Promise<void>;
+};

package/dist/core/hooks/use-chat-session.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chat-session.d.ts","sourceRoot":"","sources":["../../../src/core/hooks/use-chat-session.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAG3D;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI;;;;;;EAuFtD"}

package/dist/core/hooks/use-chat-session.js

@@ -0,0 +1,87 @@
+import { useCallback, useEffect } from "react";
+import { useChatStore } from "../store/chat-store.js";
+/**
+ * Hook for managing chat session lifecycle
+ */
+export function useChatSession(client) {
+    const connectionStatus = useChatStore((state) => state.connectionStatus);
+    const sessionId = useChatStore((state) => state.sessionId);
+    const setConnectionStatus = useChatStore((state) => state.setConnectionStatus);
+    const setSessionId = useChatStore((state) => state.setSessionId);
+    const setError = useChatStore((state) => state.setError);
+    const clearMessages = useChatStore((state) => state.clearMessages);
+    /**
+     * Connect to the agent
+     */
+    const connect = useCallback(async () => {
+        if (!client) {
+            setError("No client available");
+            return;
+        }
+        try {
+            setConnectionStatus("connecting");
+            setError(null);
+            await client.connect();
+            setConnectionStatus("connected");
+        }
+        catch (error) {
+            console.log(error);
+            const message = error instanceof Error ? error.message : String(error);
+            setError(message);
+            setConnectionStatus("error");
+        }
+    }, [client, setConnectionStatus, setError]);
+    /**
+     * Start a new session
+     */
+    const startSession = useCallback(async () => {
+        if (!client) {
+            setError("No client available");
+            return;
+        }
+        try {
+            const id = await client.startSession();
+            setSessionId(id);
+            clearMessages();
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            setError(message);
+        }
+    }, [client, setSessionId, setError, clearMessages]);
+    /**
+     * Disconnect from the agent
+     */
+    const disconnect = useCallback(async () => {
+        if (!client)
+            return;
+        try {
+            await client.disconnect();
+            setConnectionStatus("disconnected");
+            setSessionId(null);
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            setError(message);
+        }
+    }, [client, setConnectionStatus, setSessionId, setError]);
+    // Auto-connect on mount if client is available
+    useEffect(() => {
+        if (client && connectionStatus === "disconnected") {
+            connect();
+        }
+    }, [client, connectionStatus, connect]);
+    // Auto-start session after connecting
+    useEffect(() => {
+        if (connectionStatus === "connected" && !sessionId) {
+            startSession();
+        }
+    }, [connectionStatus, sessionId, startSession]);
+    return {
+        connectionStatus,
+        sessionId,
+        connect,
+        startSession,
+        disconnect,
+    };
+}

package/dist/core/hooks/use-chat-session.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chat-session.js","sourceRoot":"","sources":["../../../src/core/hooks/use-chat-session.ts"],"names":[],"mappings":"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"}

package/dist/core/hooks/use-media-query.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Custom hook for responsive breakpoints with SSR-safe implementation
+ *
+ * @param query - Media query string (e.g., "(min-width: 768px)")
+ * @returns boolean indicating if the media query matches
+ *
+ * @example
+ * ```tsx
+ * const isMobile = useMediaQuery("(max-width: 640px)");
+ * const isDesktop = useMediaQuery("(min-width: 1024px)");
+ *
+ * return (
+ *   <div>
+ *     {isMobile && <MobileMenu />}
+ *     {isDesktop && <DesktopSidebar />}
+ *   </div>
+ * );
+ * ```
+ */
+export declare function useMediaQuery(query: string): boolean;
+/**
+ * Common breakpoint presets for convenience
+ */
+export declare const breakpoints: {
+    readonly sm: "(min-width: 640px)";
+    readonly md: "(min-width: 768px)";
+    readonly lg: "(min-width: 1024px)";
+    readonly xl: "(min-width: 1280px)";
+    readonly "2xl": "(min-width: 1536px)";
+};
+/**
+ * Convenience hooks for common breakpoints
+ */
+export declare function useIsSmallScreen(): boolean;
+export declare function useIsMediumScreen(): boolean;
+export declare function useIsLargeScreen(): boolean;
+export declare function useIsDesktop(): boolean;
+export declare function useIsMobile(): boolean;
+export declare function useIsTablet(): boolean;

package/dist/core/hooks/use-media-query.js

@@ -0,0 +1,80 @@
+import { useEffect, useState } from "react";
+/**
+ * Custom hook for responsive breakpoints with SSR-safe implementation
+ *
+ * @param query - Media query string (e.g., "(min-width: 768px)")
+ * @returns boolean indicating if the media query matches
+ *
+ * @example
+ * ```tsx
+ * const isMobile = useMediaQuery("(max-width: 640px)");
+ * const isDesktop = useMediaQuery("(min-width: 1024px)");
+ *
+ * return (
+ *   <div>
+ *     {isMobile && <MobileMenu />}
+ *     {isDesktop && <DesktopSidebar />}
+ *   </div>
+ * );
+ * ```
+ */
+export function useMediaQuery(query) {
+    const [matches, setMatches] = useState(() => {
+        // SSR-safe: return false on server, check on client
+        if (typeof window === "undefined") {
+            return false;
+        }
+        return window.matchMedia(query).matches;
+    });
+    useEffect(() => {
+        // SSR guard
+        if (typeof window === "undefined") {
+            return;
+        }
+        const mediaQueryList = window.matchMedia(query);
+        // Update state if query evaluation changes
+        const handleChange = (event) => {
+            setMatches(event.matches);
+        };
+        // Set initial value
+        setMatches(mediaQueryList.matches);
+        // Listen for changes
+        mediaQueryList.addEventListener("change", handleChange);
+        // Cleanup
+        return () => {
+            mediaQueryList.removeEventListener("change", handleChange);
+        };
+    }, [query]);
+    return matches;
+}
+/**
+ * Common breakpoint presets for convenience
+ */
+export const breakpoints = {
+    sm: "(min-width: 640px)",
+    md: "(min-width: 768px)",
+    lg: "(min-width: 1024px)",
+    xl: "(min-width: 1280px)",
+    "2xl": "(min-width: 1536px)",
+};
+/**
+ * Convenience hooks for common breakpoints
+ */
+export function useIsSmallScreen() {
+    return useMediaQuery("(max-width: 639px)");
+}
+export function useIsMediumScreen() {
+    return useMediaQuery(breakpoints.md);
+}
+export function useIsLargeScreen() {
+    return useMediaQuery(breakpoints.lg);
+}
+export function useIsDesktop() {
+    return useMediaQuery(breakpoints.lg);
+}
+export function useIsMobile() {
+    return useMediaQuery("(max-width: 767px)");
+}
+export function useIsTablet() {
+    return useMediaQuery("(min-width: 768px) and (max-width: 1023px)");
+}