indas-ui 0.0.1 → 0.1.0

package/dist/components/messaging/message-thread.js

@@ -0,0 +1,121 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { ArrowLeft, Users } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { useLanguage } from '../../contexts/LanguageContext.js';
+import { useMessaging } from '../../contexts/MessagingContext.js';
+import { MessageBubble } from './message-bubble.js';
+import { MessageInput } from './message-input.js';
+import { parseParticipants } from '../../lib/api/activity/messaging/messaging.js';
+import { getAvatarColor, getInitials } from './conversation-list.js';
+export function MessageThread({ room, currentUserId, onBack, onOpenThread, className }) {
+    const { t } = useLanguage();
+    const { state, actions } = useMessaging();
+    const [replyTo, setReplyTo] = useState(null);
+    const messagesEndRef = useRef(null);
+    const scrollContainerRef = useRef(null);
+    const prevMessageCountRef = useRef(0);
+    const messages = state.messages[room.RoomID] || [];
+    const pagination = state.messagePagination[room.RoomID];
+    const typingUsers = actions.getTypingUsers(room.RoomID);
+    // Display name for header
+    const displayName = useMemo(() => {
+        if (room.Type === 'DM') {
+            const participants = parseParticipants(room.Participants);
+            const other = participants.find(p => String(p.userId) !== currentUserId);
+            return other?.userName || room.Name || t('Direct Message');
+        }
+        return room.Name || t('Unnamed');
+    }, [room, currentUserId, t]);
+    const participants = useMemo(() => parseParticipants(room.Participants), [room.Participants]);
+    const memberCount = participants.length;
+    // Build sender name map
+    const senderNames = useMemo(() => {
+        const map = {};
+        for (const p of participants) {
+            map[p.userId] = p.userName;
+        }
+        return map;
+    }, [participants]);
+    // DM partner online status
+    const isDMPartnerOnline = useMemo(() => {
+        if (room.Type !== 'DM')
+            return false;
+        const other = participants.find(p => String(p.userId) !== currentUserId);
+        return other ? actions.isUserOnline(other.userId) : false;
+    }, [room.Type, participants, currentUserId, actions]);
+    // Fetch messages + join SignalR group on mount
+    useEffect(() => {
+        actions.fetchMessages(room.RoomID);
+        actions.joinConversation(room.RoomID);
+        return () => {
+            actions.leaveConversation(room.RoomID);
+        };
+    }, [room.RoomID, actions]);
+    // Auto-scroll to bottom on new messages (only if already near bottom)
+    useEffect(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        const isNearBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 100;
+        const isNewMessage = messages.length > prevMessageCountRef.current;
+        if (isNearBottom || isNewMessage) {
+            messagesEndRef.current?.scrollIntoView({ behavior: isNewMessage ? 'smooth' : 'auto' });
+        }
+        prevMessageCountRef.current = messages.length;
+    }, [messages.length]);
+    // Mark as read when viewing
+    useEffect(() => {
+        if (messages.length > 0) {
+            const lastMsg = messages[messages.length - 1];
+            actions.markAsRead(room.RoomID, lastMsg.MessageID);
+        }
+    }, [room.RoomID, messages, actions]);
+    // Load more on scroll to top
+    const handleScroll = useCallback(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        if (container.scrollTop < 50 && pagination?.hasMore && !state.loadingMessages) {
+            actions.fetchMoreMessages(room.RoomID);
+        }
+    }, [pagination, state.loadingMessages, room.RoomID, actions]);
+    const handleSend = useCallback((content, attachments) => {
+        const request = { Content: content };
+        if (attachments) {
+            request.AttachmentsJson = JSON.stringify(attachments);
+        }
+        if (replyTo) {
+            actions.replyToMessage(replyTo.MessageID, request);
+            setReplyTo(null);
+        }
+        else {
+            actions.sendMessage(room.RoomID, request);
+        }
+    }, [replyTo, room.RoomID, actions]);
+    const handleTyping = useCallback((isTyping) => {
+        actions.sendTyping(room.RoomID, isTyping);
+    }, [room.RoomID, actions]);
+    return (_jsxs("div", { className: cn('flex flex-col h-full bg-[rgb(var(--bg-app))]', className), children: [_jsxs("div", { className: "flex-shrink-0 flex items-center gap-3 px-3 py-2.5 border-b border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))]", children: [_jsx("button", { onClick: onBack, className: "lg:hidden flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center hover:bg-[rgb(var(--bg-hover))] text-[rgb(var(--fg-muted))]", children: _jsx(ArrowLeft, { className: "w-5 h-5" }) }), _jsxs("div", { className: "relative flex-shrink-0", children: [_jsx("div", { className: cn('w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-medium', getAvatarColor(room.RoomID)), children: room.Type === 'Channel' ? '#' : getInitials(displayName) }), room.Type === 'DM' && isDMPartnerOnline && (_jsx("span", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 rounded-full border-2 border-[rgb(var(--bg-surface))]" }))] }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "text-sm font-semibold text-[rgb(var(--fg-default))] truncate", children: displayName }), _jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: room.Type === 'DM'
+                                    ? (isDMPartnerOnline ? t('Online') : t('Offline'))
+                                    : `${memberCount} ${t('members')}` })] }), _jsx("div", { className: "flex items-center gap-1", children: room.Type !== 'DM' && (_jsx("button", { className: "w-8 h-8 rounded-lg flex items-center justify-center text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-hover))]", children: _jsx(Users, { className: "w-4.5 h-4.5" }) })) })] }), _jsxs("div", { ref: scrollContainerRef, className: "flex-1 overflow-y-auto py-2", onScroll: handleScroll, children: [state.loadingMessages && messages.length > 0 && (_jsx("div", { className: "flex justify-center py-2", children: _jsx("div", { className: "w-5 h-5 border-2 border-[rgb(var(--color-primary))] border-t-transparent rounded-full animate-spin" }) })), state.loadingMessages && messages.length === 0 && (_jsx("div", { className: "flex flex-col items-center justify-center h-full", children: _jsx("div", { className: "w-8 h-8 border-2 border-[rgb(var(--color-primary))] border-t-transparent rounded-full animate-spin" }) })), messages.map((msg, idx) => {
+                        const prev = idx > 0 ? messages[idx - 1] : null;
+                        const showSender = !prev || prev.UserID !== msg.UserID;
+                        const isOwn = String(msg.UserID) === currentUserId;
+                        return (_jsx(MessageBubble, { message: msg, isOwn: isOwn, senderName: senderNames[msg.UserID] || `User ${msg.UserID}`, showSender: showSender, onReply: setReplyTo, onReact: (id, emoji) => actions.toggleReaction(id, emoji), onEdit: (id, content) => actions.editMessage(id, content), onDelete: (id) => actions.deleteMessage(id), onThreadClick: onOpenThread, currentUserId: Number(currentUserId) }, msg.MessageID));
+                    }), typingUsers.length > 0 && (_jsx(TypingIndicator, { userIds: typingUsers, senderNames: senderNames })), _jsx("div", { ref: messagesEndRef })] }), _jsx(MessageInput, { onSend: handleSend, onUploadFile: actions.uploadFile, onTyping: handleTyping, replyTo: replyTo, onCancelReply: () => setReplyTo(null), disabled: state.sendingMessage })] }));
+}
+// ── Typing Indicator ──────────────────────────────────────────────────────
+function TypingIndicator({ userIds, senderNames }) {
+    const { t } = useLanguage();
+    const names = userIds
+        .map(id => senderNames[Number(id)] || `User ${id}`)
+        .slice(0, 3);
+    const text = names.length === 1
+        ? `${names[0]} ${t('is typing')}`
+        : names.length === 2
+            ? `${names[0]} ${t('and')} ${names[1]} ${t('are typing')}`
+            : `${names[0]} ${t('and')} ${names.length - 1} ${t('others are typing')}`;
+    return (_jsxs("div", { className: "flex items-center gap-2 px-4 py-1.5 ml-10", children: [_jsxs("div", { className: "flex gap-0.5", children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-[rgb(var(--fg-muted))] animate-bounce [animation-delay:0ms]" }), _jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-[rgb(var(--fg-muted))] animate-bounce [animation-delay:150ms]" }), _jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-[rgb(var(--fg-muted))] animate-bounce [animation-delay:300ms]" })] }), _jsx("span", { className: "text-xs text-[rgb(var(--fg-muted))] italic", children: text })] }));
+}

package/dist/components/messaging/messaging-panel-content.d.ts

@@ -0,0 +1,5 @@
+interface MessagingPanelContentProps {
+    onClose: () => void;
+}
+export declare function MessagingPanelContent({ onClose }: MessagingPanelContentProps): import("react").JSX.Element;
+export {};

package/dist/components/messaging/messaging-panel-content.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useCallback, useMemo } from 'react';
+import { useRouter } from 'next/navigation';
+import { MessageSquare, Send, RefreshCw } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { useLanguage } from '../../contexts/LanguageContext.js';
+import { useSession } from 'next-auth/react';
+import { useMessaging } from '../../contexts/MessagingContext.js';
+import { parseParticipants } from '../../lib/api/activity/messaging/messaging.js';
+import { getAvatarColor, getInitials, formatRelativeTime } from './conversation-list.js';
+import { Button } from '../ui/index.js';
+export function MessagingPanelContent({ onClose }) {
+    const { t } = useLanguage();
+    const { data: session } = useSession();
+    const { state, actions } = useMessaging();
+    const router = useRouter();
+    const currentUserId = String(session?.user?.UserID || session?.user?.userID || '');
+    // Fetch conversations on mount if not already loaded
+    useEffect(() => {
+        if (state.conversations.length === 0) {
+            actions.fetchConversations();
+        }
+    }, [state.conversations.length, actions]);
+    // Sort by recent, take top 8
+    const recentConversations = useMemo(() => {
+        return [...state.conversations]
+            .sort((a, b) => {
+            const aTime = a.LastMessageAt ? new Date(a.LastMessageAt).getTime() : 0;
+            const bTime = b.LastMessageAt ? new Date(b.LastMessageAt).getTime() : 0;
+            return bTime - aTime;
+        })
+            .slice(0, 8);
+    }, [state.conversations]);
+    const handleConvClick = useCallback((roomId) => {
+        router.push(`/activity/messages?conv=${roomId}`);
+        onClose();
+    }, [router, onClose]);
+    const handleViewAll = useCallback(() => {
+        router.push('/activity/messages');
+        onClose();
+    }, [router, onClose]);
+    const handleNewMessage = useCallback(() => {
+        router.push('/activity/messages');
+        onClose();
+    }, [router, onClose]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "p-4 border-b border-[rgb(var(--bd-default))]", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: t('Recent') }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => actions.fetchConversations(), disabled: state.loadingConversations, className: "p-1.5", title: t('Refresh'), children: _jsx(RefreshCw, { className: cn('h-4 w-4', state.loadingConversations && 'animate-spin') }) }), _jsxs(Button, { size: "sm", onClick: handleNewMessage, className: "h-8 px-3", children: [_jsx(Send, { className: "h-3.5 w-3.5 mr-1" }), t('New Chat')] })] })] }), state.totalUnreadCount > 0 && (_jsxs("div", { className: "text-xs text-[rgb(var(--fg-muted))] mt-1", children: [state.totalUnreadCount, " ", t('unread')] }))] }), _jsx("div", { className: "max-h-[500px] overflow-y-auto", children: state.loadingConversations ? (_jsx("div", { className: "space-y-1 p-2", children: [1, 2, 3].map(i => (_jsxs("div", { className: "flex items-center gap-3 px-3 py-2 animate-pulse", children: [_jsx("div", { className: "w-8 h-8 rounded-full bg-[rgb(var(--bg-subtle))]" }), _jsxs("div", { className: "flex-1 space-y-1.5", children: [_jsx("div", { className: "h-3 w-20 rounded bg-[rgb(var(--bg-subtle))]" }), _jsx("div", { className: "h-2.5 w-32 rounded bg-[rgb(var(--bg-subtle))]" })] })] }, i))) })) : recentConversations.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-8 text-[rgb(var(--fg-muted))]", children: [_jsx(MessageSquare, { className: "w-8 h-8 mb-2 opacity-20" }), _jsx("p", { className: "text-sm font-medium mb-1", children: t('No messages yet') }), _jsx("p", { className: "text-xs", children: t('Start a conversation') })] })) : (_jsx("div", { className: "divide-y divide-[rgb(var(--bd-subtle))]", children: recentConversations.map(room => {
+                        const unread = state.unreadCounts[room.RoomID] || 0;
+                        const displayName = (() => {
+                            if (room.Type === 'DM') {
+                                const participants = parseParticipants(room.Participants);
+                                const other = participants.find(p => String(p.userId) !== currentUserId);
+                                return other?.userName || room.Name || t('Direct Message');
+                            }
+                            return room.Name || t('Unnamed');
+                        })();
+                        const avatarId = room.Type === 'DM'
+                            ? (() => {
+                                const participants = parseParticipants(room.Participants);
+                                const other = participants.find(p => String(p.userId) !== currentUserId);
+                                return String(other?.userId || room.RoomID);
+                            })()
+                            : String(room.RoomID);
+                        return (_jsxs("div", { onClick: () => handleConvClick(room.RoomID), className: cn('flex items-start gap-3 p-3 hover:bg-[rgb(var(--bg-hover))] transition-colors cursor-pointer', unread > 0 && 'bg-[rgb(var(--bg-subtle))]'), children: [_jsx("div", { className: cn('w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-medium flex-shrink-0', getAvatarColor(avatarId)), children: room.Type === 'Channel' ? '#' : getInitials(displayName) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-start justify-between gap-2 mb-0.5", children: [_jsx("span", { className: cn('text-sm truncate', unread > 0 ? 'font-semibold text-[rgb(var(--fg-default))]' : 'font-medium text-[rgb(var(--fg-muted))]'), children: displayName }), _jsx("span", { className: "text-xs text-[rgb(var(--fg-muted))] flex-shrink-0", children: formatRelativeTime(room.LastMessageAt) })] }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: cn('text-xs truncate', unread > 0 ? 'text-[rgb(var(--fg-default))]' : 'text-[rgb(var(--fg-muted))]'), children: room.LastMessagePreview || t('No messages') }), unread > 0 && (_jsx("span", { className: "flex-shrink-0 min-w-[1.125rem] h-[1.125rem] px-1 rounded-full bg-[rgb(var(--color-primary))] text-white text-[0.625rem] font-bold flex items-center justify-center", children: unread > 99 ? '99+' : unread }))] })] })] }, room.RoomID));
+                    }) })) }), _jsx("div", { className: "p-3 border-t border-[rgb(var(--bd-subtle))] bg-[rgb(var(--bg-subtle))]", children: _jsx("button", { onClick: handleViewAll, className: "block w-full text-center text-sm text-[rgb(var(--color-primary))] hover:text-[rgb(var(--color-primary-hover))] font-medium transition-colors py-1", children: t('View All Messages') }) })] }));
+}

package/dist/components/messaging/thread-panel.d.ts

@@ -0,0 +1,10 @@
+import type { ChatRoom } from '../../lib/api/activity/messaging/messaging.js';
+interface ThreadPanelProps {
+    parentMessageId: number;
+    room: ChatRoom;
+    currentUserId: string;
+    onClose: () => void;
+    className?: string;
+}
+export declare function ThreadPanel({ parentMessageId, room, currentUserId, onClose, className }: ThreadPanelProps): import("react").JSX.Element;
+export {};

package/dist/components/messaging/thread-panel.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useCallback, useMemo } from 'react';
+import { X } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { useLanguage } from '../../contexts/LanguageContext.js';
+import { useMessaging } from '../../contexts/MessagingContext.js';
+import { MessageBubble } from './message-bubble.js';
+import { MessageInput } from './message-input.js';
+import { parseParticipants } from '../../lib/api/activity/messaging/messaging.js';
+export function ThreadPanel({ parentMessageId, room, currentUserId, onClose, className }) {
+    const { t } = useLanguage();
+    const { state, actions } = useMessaging();
+    const endRef = useRef(null);
+    const threadMessages = state.threadMessages[parentMessageId] || [];
+    const allRoomMessages = state.messages[room.RoomID] || [];
+    const parentMessage = allRoomMessages.find(m => m.MessageID === parentMessageId);
+    const senderNames = useMemo(() => {
+        const participants = parseParticipants(room.Participants);
+        const map = {};
+        for (const p of participants) {
+            map[p.userId] = p.userName;
+        }
+        return map;
+    }, [room.Participants]);
+    // Fetch thread on mount
+    useEffect(() => {
+        actions.fetchThreadReplies(parentMessageId);
+    }, [parentMessageId, actions]);
+    // Scroll to bottom on new replies
+    useEffect(() => {
+        endRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [threadMessages.length]);
+    const handleSend = useCallback((content, attachments) => {
+        const request = { Content: content };
+        if (attachments) {
+            request.AttachmentsJson = JSON.stringify(attachments);
+        }
+        actions.replyToMessage(parentMessageId, request);
+    }, [parentMessageId, actions]);
+    return (_jsxs("div", { className: cn('flex flex-col h-full border-l border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))]', className), children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-[rgb(var(--bd-default))]", children: [_jsx("h3", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: t('Thread') }), _jsx("button", { onClick: onClose, className: "w-7 h-7 rounded-lg flex items-center justify-center text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-hover))]", children: _jsx(X, { className: "w-4 h-4" }) })] }), parentMessage && (_jsx("div", { className: "border-b border-[rgb(var(--bd-default))] py-2", children: _jsx(MessageBubble, { message: parentMessage, isOwn: String(parentMessage.UserID) === currentUserId, senderName: senderNames[parentMessage.UserID] || `User ${parentMessage.UserID}`, showSender: true, onReply: () => { }, onReact: (id, emoji) => actions.toggleReaction(id, emoji), onEdit: (id, content) => actions.editMessage(id, content), onDelete: (id) => actions.deleteMessage(id), currentUserId: Number(currentUserId) }) })), _jsxs("div", { className: "flex-1 overflow-y-auto py-2", children: [state.loadingThread ? (_jsx("div", { className: "flex justify-center py-8", children: _jsx("div", { className: "w-6 h-6 border-2 border-[rgb(var(--color-primary))] border-t-transparent rounded-full animate-spin" }) })) : threadMessages.length === 0 ? (_jsx("div", { className: "flex flex-col items-center justify-center py-8 text-[rgb(var(--fg-muted))]", children: _jsx("p", { className: "text-sm", children: t('No replies yet') }) })) : (threadMessages.map((msg, idx) => {
+                        const prev = idx > 0 ? threadMessages[idx - 1] : null;
+                        const showSender = !prev || prev.UserID !== msg.UserID;
+                        const isOwn = String(msg.UserID) === currentUserId;
+                        return (_jsx("div", { style: { paddingLeft: Math.min(msg.ReplyDepth * 16, 48) }, children: _jsx(MessageBubble, { message: msg, isOwn: isOwn, senderName: senderNames[msg.UserID] || `User ${msg.UserID}`, showSender: showSender, onReply: () => { }, onReact: (id, emoji) => actions.toggleReaction(id, emoji), onEdit: (id, content) => actions.editMessage(id, content), onDelete: (id) => actions.deleteMessage(id), currentUserId: Number(currentUserId) }) }, msg.MessageID));
+                    })), _jsx("div", { ref: endRef })] }), _jsx(MessageInput, { onSend: handleSend, onUploadFile: actions.uploadFile, disabled: state.sendingMessage, placeholder: t('Reply in thread...') })] }));
+}

package/dist/components/modals/3DModal.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 3D Modal
+ * Preview card with inline Three.js content + expand to fullscreen modal.
+ * The 3D content renders directly in the preview card and also in the expanded modal.
+ *
+ * Usage:
+ *   <ThreeDModal title={t('Box View')} previewHeight="13.75rem" details={[...]}
+ *     renderContent={() => <ShipperBox3D ... className="w-full h-full" />}
+ *   />
+ */
+import React from 'react';
+export interface ThreeDModalDetail {
+    label: string;
+    value: string | number;
+}
+interface ThreeDModalProps {
+    /** Card title shown above the preview */
+    title?: string;
+    /** @deprecated Pass renderContent instead */
+    children?: React.ReactNode;
+    /** Render function for 3D content */
+    renderContent?: () => React.ReactNode;
+    /** Fallback when there's no data to render */
+    placeholder?: string;
+    /** Whether to show the 3D content (false = show placeholder) */
+    hasData?: boolean;
+    /** Preview card height — default 13.75rem to match planning modal cards */
+    previewHeight?: string;
+    /** Additional className for the preview card container */
+    className?: string;
+    /** Metadata row shown below the header in the expanded modal */
+    details?: ThreeDModalDetail[];
+    /** Extra actions rendered next to the expand/close icon in headers */
+    headerActions?: React.ReactNode;
+    /** When provided, shows a refresh button next to the expand icon */
+    onRefresh?: () => void;
+}
+export declare function ThreeDModal({ title, children, renderContent, placeholder, hasData, previewHeight, className, details, headerActions, onRefresh, }: ThreeDModalProps): React.JSX.Element;
+export {};

package/dist/components/modals/3DModal.js

@@ -0,0 +1,32 @@
+'use client';
+/**
+ * 3D Modal
+ * Preview card with inline Three.js content + expand to fullscreen modal.
+ * The 3D content renders directly in the preview card and also in the expanded modal.
+ *
+ * Usage:
+ *   <ThreeDModal title={t('Box View')} previewHeight="13.75rem" details={[...]}
+ *     renderContent={() => <ShipperBox3D ... className="w-full h-full" />}
+ *   />
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { Dialog, DialogContent, DialogTitle } from '../ui/index.js';
+import { X, Maximize2, Box, RotateCw } from 'lucide-react';
+import { useLanguage } from '../../contexts/LanguageContext.js';
+export function ThreeDModal({ title, children, renderContent, placeholder, hasData = true, previewHeight = '13.75rem', className = '', details, headerActions, onRefresh, }) {
+    const { t } = useLanguage();
+    const [isOpen, setIsOpen] = useState(false);
+    const handleOpen = useCallback(() => {
+        if (hasData)
+            setIsOpen(true);
+    }, [hasData]);
+    const handleClose = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+    // 3D content — rendered in both preview and expanded modal
+    const previewContent = hasData ? (renderContent ? renderContent() : children) : null;
+    const expandedContent = isOpen && hasData ? (renderContent ? renderContent() : children) : null;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `border border-[rgb(var(--bd-default))] rounded bg-[rgb(var(--bg-surface))] flex flex-col overflow-hidden ${className}`, style: { height: previewHeight }, children: [title && (_jsxs("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))] flex-shrink-0", children: [_jsx("span", { className: "text-xs font-semibold text-[rgb(var(--fg-default))] truncate", children: title }), hasData && (_jsxs("div", { className: "flex items-center gap-1", children: [headerActions, onRefresh && (_jsx("button", { onClick: onRefresh, className: "p-0.5 rounded hover:bg-[rgb(var(--bg-hover))] transition-colors text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))]", title: t('Refresh 3D view'), children: _jsx(RotateCw, { className: "h-3.5 w-3.5" }) })), _jsx("button", { onClick: handleOpen, className: "p-0.5 rounded hover:bg-[rgb(var(--bg-hover))] transition-colors text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))]", title: t('Expand'), children: _jsx(Maximize2, { className: "h-3.5 w-3.5" }) })] }))] })), _jsx("div", { className: "flex-1 min-h-0", children: previewContent ? (_jsx("div", { className: "w-full h-full", children: previewContent })) : (_jsxs("div", { className: "w-full h-full flex flex-col items-center justify-center gap-1.5 text-[rgb(var(--fg-muted))]", children: [_jsx(Box, { className: "h-6 w-6 opacity-40" }), _jsx("span", { className: "text-xs", children: placeholder || t('No data to display') })] })) })] }), _jsx(Dialog, { open: isOpen, onOpenChange: handleClose, children: _jsxs(DialogContent, { className: "flex flex-col p-0 bg-[rgb(var(--bg-surface))] z-[100] overflow-hidden w-[90vw] max-w-[90vw] h-[90vh]", hideCloseButton: true, children: [_jsxs("div", { className: "flex items-center justify-between px-4 md:px-6 py-2.5 border-b border-[rgb(var(--bd-default))] flex-shrink-0 bg-[rgb(var(--bg-surface))]", children: [_jsx(DialogTitle, { className: "flex-shrink-0", children: title || t('3D View') }), _jsxs("div", { className: "flex items-center gap-2", children: [headerActions, onRefresh && (_jsx("button", { onClick: onRefresh, className: "p-1 rounded hover:bg-[rgb(var(--bg-hover))] transition-colors text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))]", title: t('Refresh 3D view'), children: _jsx(RotateCw, { className: "h-4 w-4" }) })), _jsx("button", { onClick: handleClose, className: "close-btn-md flex-shrink-0", "aria-label": t('Close'), children: _jsx(X, { className: "h-4 w-4" }) })] })] }), details && details.length > 0 && (_jsx("div", { className: "px-6 py-2 bg-[rgb(var(--bg-subtle))] border-b border-[rgb(var(--bd-default))] flex-shrink-0", children: _jsx("div", { className: "flex flex-wrap items-center justify-center gap-x-5 gap-y-1 text-xs text-[rgb(var(--fg-default))]", children: details.map((detail, index) => (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("span", { className: "font-medium text-[rgb(var(--fg-muted))]", children: [detail.label, ":"] }), _jsx("span", { className: "font-normal", children: detail.value })] }, index))) }) })), _jsx("div", { className: "flex-1 min-h-0 bg-[rgb(var(--bg-surface))]", children: expandedContent && (_jsx("div", { className: "w-full h-full", children: expandedContent })) })] }) })] }));
+}

package/dist/components/modals/ImageModal.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export interface ImageModalDetail {
+    label: string;
+    value: string | number;
+}
+interface ImageModalProps {
+    title?: string;
+    children: React.ReactNode;
+    preview?: React.ReactNode;
+    previewClassName?: string;
+    previewContainerClassName?: string;
+    isOpen?: boolean;
+    onClose?: () => void;
+    details?: ImageModalDetail[];
+    onPreviewClick?: () => void;
+    isPdfMode?: boolean;
+    pdfUrl?: string;
+    onDownloadPdf?: () => void;
+    cleanMode?: boolean;
+    enableZoom?: boolean;
+    viewBoxWidthMM?: number;
+    viewBoxHeightMM?: number;
+    exportFilename?: string;
+    extraExportButtons?: React.ReactNode;
+    extraHeaderButtons?: React.ReactNode;
+}
+export declare function ImageModal({ isOpen: controlledIsOpen, onClose: controlledOnClose, title, children, preview, previewClassName, previewContainerClassName, details, onPreviewClick, isPdfMode, pdfUrl, onDownloadPdf, cleanMode, enableZoom, viewBoxWidthMM, viewBoxHeightMM, exportFilename, extraExportButtons, extraHeaderButtons }: ImageModalProps): React.JSX.Element;
+export {};