indas-ui 0.0.1 → 0.1.0

package/dist/components/forms/file-attachment/index.d.ts

@@ -0,0 +1,2 @@
+export { FileAttachment } from './FileAttachment.js';
+export type { FileAttachmentProps, AttachedFile } from './FileAttachment.js';

package/dist/components/forms/file-attachment/index.js

@@ -0,0 +1,2 @@
+'use client';
+export { FileAttachment } from './FileAttachment.js';

package/dist/components/forms/index.d.ts

@@ -0,0 +1,9 @@
+export { Dropdown } from './dropdown/index.js';
+export type { DropdownProps, DropdownOption } from './dropdown/index.js';
+export { DatePicker, DateTimePicker } from './date-picker/index.js';
+export type { DatePickerProps, DateRange, DateTimePickerProps } from './date-picker/index.js';
+export { QuantityInputPopup } from './quantity-input-popup.js';
+export { FileAttachment } from './file-attachment/FileAttachment.js';
+export type { AttachedFile, FileAttachmentProps } from './file-attachment/FileAttachment.js';
+export { UnifiedCurrencyDropdown } from './unified-currency-dropdown.js';
+export type { UnifiedCurrencyDropdownProps } from './unified-currency-dropdown.js';

package/dist/components/forms/index.js

@@ -0,0 +1,7 @@
+'use client';
+// Form controls entry: `import { DatePicker } from 'indas-ui/forms'`
+export { Dropdown } from './dropdown/index.js';
+export { DatePicker, DateTimePicker } from './date-picker/index.js';
+export { QuantityInputPopup } from './quantity-input-popup.js';
+export { FileAttachment } from './file-attachment/FileAttachment.js';
+export { UnifiedCurrencyDropdown } from './unified-currency-dropdown.js';

package/dist/components/forms/quantity-input-popup.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface QuantityInputPopupProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: (quantity: number) => void;
+    triggerRef: React.RefObject<HTMLElement>;
+    className?: string;
+}
+export declare function QuantityInputPopup({ isOpen, onClose, onConfirm, triggerRef, className }: QuantityInputPopupProps): React.JSX.Element;
+export {};

package/dist/components/forms/quantity-input-popup.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { Button } from '../ui/index.js';
+import { Input } from '../ui/index.js';
+import { cn } from '../../lib/utils.js';
+import { Check, X } from 'lucide-react';
+export function QuantityInputPopup({ isOpen, onClose, onConfirm, triggerRef, className }) {
+    const [quantity, setQuantity] = React.useState('1000');
+    const [error, setError] = React.useState('');
+    const [position, setPosition] = React.useState({ top: 0, left: 0 });
+    const popupRef = React.useRef(null);
+    // Calculate position relative to trigger button
+    React.useEffect(() => {
+        if (isOpen && triggerRef.current) {
+            const rect = triggerRef.current.getBoundingClientRect();
+            setPosition({
+                top: rect.bottom + window.scrollY + 4, // 4px gap below button
+                left: rect.left + window.scrollX
+            });
+        }
+    }, [isOpen, triggerRef]);
+    // Handle clicks outside popup
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (popupRef.current && !popupRef.current.contains(event.target) &&
+                triggerRef.current && !triggerRef.current.contains(event.target)) {
+                onClose();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => document.removeEventListener('mousedown', handleClickOutside);
+        }
+    }, [isOpen, onClose, triggerRef]);
+    // Handle Enter and Escape keys
+    React.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (!isOpen)
+                return;
+            if (event.key === 'Enter') {
+                event.preventDefault(); // Prevent form submission
+                handleConfirm();
+            }
+            else if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, onClose, quantity, error]); // Added quantity and error to dependencies
+    // Validate quantity input
+    const validateQuantity = (value) => {
+        if (!value.trim()) {
+            return 'Quantity is required';
+        }
+        const num = parseFloat(value);
+        if (isNaN(num)) {
+            return 'Please enter a valid number';
+        }
+        if (num <= 0) {
+            return 'Quantity must be greater than 0';
+        }
+        if (num > 1000000) {
+            return 'Quantity cannot exceed 1,000,000';
+        }
+        return '';
+    };
+    const handleQuantityChange = (value) => {
+        // Allow only numbers, decimal point, and commas
+        const cleanValue = value.replace(/[^0-9.,]/g, '');
+        setQuantity(cleanValue);
+        const validationError = validateQuantity(cleanValue);
+        setError(validationError);
+    };
+    const handleConfirm = () => {
+        const validationError = validateQuantity(quantity);
+        if (validationError) {
+            setError(validationError);
+            return;
+        }
+        const numericQuantity = parseFloat(quantity.replace(/,/g, ''));
+        onConfirm(numericQuantity);
+        setQuantity('1000'); // Reset to default
+        setError('');
+        onClose();
+    };
+    const handleCancel = () => {
+        setQuantity('1000'); // Reset to default
+        setError('');
+        onClose();
+    };
+    if (!isOpen)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40" }), _jsx("div", { ref: popupRef, className: cn("fixed z-50 bg-white border border-gray-300 rounded-md shadow-lg p-3 min-w-[200px]", className), style: {
+                    top: position.top,
+                    left: position.left
+                }, children: _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "text-sm font-medium text-gray-900", children: "Add Quantity Column" }), _jsxs("div", { className: "space-y-1", children: [_jsx(Input, { type: "text", value: quantity, onChange: (e) => handleQuantityChange(e.target.value), placeholder: "Enter quantity", className: cn("h-8 text-sm", error && "border-red-500 focus:ring-red-500"), autoFocus: true }), error && (_jsx("div", { className: "text-xs text-red-500", children: error }))] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { size: "sm", onClick: handleConfirm, disabled: !!error || !quantity.trim(), className: "h-7 px-3 text-xs", children: [_jsx(Check, { className: "h-3 w-3 mr-1" }), "Add"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handleCancel, className: "h-7 px-3 text-xs", children: [_jsx(X, { className: "h-3 w-3 mr-1" }), "Cancel"] })] })] }) })] }));
+}

package/dist/components/forms/remark-input/RemarkInput.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { type RemarkEntry, type RemarkFile } from '../../../lib/api/activity/remarks/index.js';
+export declare function commitRemarkToTrail(args: {
+    module: string;
+    documentId: string | number | null | undefined;
+    documentName?: string;
+    documentNo?: string;
+    actionUrl?: string;
+    stage: string;
+    status?: string;
+    text: string;
+    previous?: string;
+    session: any;
+}): Promise<{
+    success: boolean;
+    error?: string;
+    skipped?: boolean;
+}>;
+interface RemarkTrailProps {
+    remarks: RemarkEntry[];
+    onAdd?: (text: string, files?: RemarkFile[]) => void | Promise<void>;
+    canAdd?: boolean;
+    loading?: boolean;
+    onClose?: () => void;
+    documentNo?: string;
+    currentUserId?: number;
+    onEdit?: (seq: number, text: string) => void | Promise<void>;
+    onDelete?: (seq: number) => void | Promise<void>;
+    onUploadFiles?: (files: File[]) => Promise<RemarkFile[]>;
+    hideHeader?: boolean;
+    emptyTitle?: string;
+    emptyHint?: string;
+    className?: string;
+}
+export declare function RemarkTrail({ remarks, onAdd, canAdd, loading, onClose, documentNo, currentUserId, onEdit, onDelete, onUploadFiles, hideHeader, emptyTitle, emptyHint, className }: RemarkTrailProps): React.JSX.Element;
+interface RemarkInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    module: string;
+    documentId: string | number | null | undefined;
+    documentName?: string;
+    documentNo?: string;
+    actionUrl?: string;
+    stage?: string;
+    session: any;
+    label?: string;
+    placeholder?: string;
+    rows?: number;
+    disabled?: boolean;
+    showTrail?: boolean;
+    onUploadFiles?: (files: File[]) => Promise<RemarkFile[]>;
+    className?: string;
+    inputClassName?: string;
+    error?: boolean;
+    required?: boolean;
+}
+export declare function RemarkInput({ value, onChange, module, documentId, documentName, documentNo, actionUrl, stage, session, label, placeholder, rows, showTrail, onUploadFiles, disabled, className, inputClassName, error, required, }: RemarkInputProps): React.JSX.Element;
+export {};

package/dist/components/forms/remark-input/RemarkInput.js

@@ -0,0 +1,258 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useLayoutEffect, useEffect } from 'react';
+import { MessageSquare, Send, Info, X, Pencil, Trash2, Check, Paperclip, FileText, Loader2 } from 'lucide-react';
+import { Modal, ModalContent, ModalTitle } from '../../index.js';
+import { useLanguage } from '../../../contexts/LanguageContext.js';
+import { cn } from '../../../lib/utils.js';
+import { RemarkIntelligenceAPI } from '../../../lib/api/activity/remarks/index.js';
+import { Skeleton } from '../../ui/index.js';
+// Commits the form's Remark field to the shared trail — the counterpart to the
+// "Current" preview entry the trail shows while the remark is still unsaved.
+// Call it after the host form saves successfully; `previous` is the remark as it
+// was loaded, so an unchanged remark is not re-posted on every save.
+export async function commitRemarkToTrail(args) {
+    const text = (args.text || '').trim();
+    const previous = (args.previous || '').trim();
+    const hasDoc = args.documentId !== null && args.documentId !== undefined && args.documentId !== '' && Number(args.documentId) !== 0;
+    if (!text || text === previous || !hasDoc)
+        return { success: true, skipped: true };
+    return RemarkIntelligenceAPI.saveRemarkData({
+        Module: args.module,
+        DocumentID: args.documentId,
+        DocumentName: args.documentName,
+        DocumentNo: args.documentNo,
+        ActionUrl: args.actionUrl,
+        stage: args.stage,
+        status: args.status || '',
+        text,
+    }, args.session);
+}
+// ── Trail (timeline list) ───────────────────────────────────────────────────
+// Timeline-shaped placeholder shown while the trail is still loading and no
+// remarks are available yet.
+function RemarkTrailSkeleton() {
+    return (_jsx("ul", { className: "space-y-3", "aria-hidden": true, children: Array.from({ length: 3 }).map((_, i) => (_jsxs("li", { className: "flex gap-2.5", children: [_jsx(Skeleton, { width: "1.5rem", height: "1.5rem", variant: "circular", className: "shrink-0" }), _jsxs("div", { className: "flex-1 space-y-1.5", children: [_jsx(Skeleton, { width: "30%", height: "0.75rem" }), _jsx(Skeleton, { width: i % 2 === 0 ? '85%' : '65%', height: "0.85rem" })] })] }, i))) }));
+}
+// The last entry is editable/deletable only if authored by the caller and < 2 hours old.
+function canMutate(entry, currentUserId) {
+    if (!entry || !currentUserId)
+        return false;
+    if (Number(entry.by) !== Number(currentUserId))
+        return false;
+    if (!entry.at)
+        return false;
+    const at = new Date(entry.at);
+    if (isNaN(at.getTime()))
+        return false;
+    return Date.now() - at.getTime() < 2 * 60 * 60 * 1000;
+}
+// Relative time like "2h ago", "3 days ago"; falls back to a date for old entries.
+function formatWhen(at) {
+    if (!at)
+        return '';
+    const d = new Date(at);
+    if (isNaN(d.getTime()))
+        return at;
+    const diff = Date.now() - d.getTime();
+    const min = Math.floor(diff / 60000);
+    if (min < 1)
+        return 'just now';
+    if (min < 60)
+        return `${min}m ago`;
+    const hr = Math.floor(min / 60);
+    if (hr < 24)
+        return `${hr}h ago`;
+    const day = Math.floor(hr / 24);
+    if (day < 7)
+        return `${day}d ago`;
+    return d.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: '2-digit' });
+}
+// Neutral stage chip — no per-stage colors.
+function stageChip(_stage) {
+    return 'bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-muted))]';
+}
+export function RemarkTrail({ remarks, onAdd, canAdd = true, loading = false, onClose, documentNo, currentUserId, onEdit, onDelete, onUploadFiles, hideHeader = false, emptyTitle, emptyHint, className }) {
+    const { t } = useLanguage();
+    const [text, setText] = useState('');
+    const [saving, setSaving] = useState(false);
+    // Inline edit state for the (only-editable) last entry.
+    const [editingSeq, setEditingSeq] = useState(null);
+    const [editText, setEditText] = useState('');
+    // Files attached to the note being composed (uploaded on pick, sent on add).
+    const [pendingFiles, setPendingFiles] = useState([]);
+    const [uploading, setUploading] = useState(false);
+    const fileInputRef = useRef(null);
+    const lastSeq = remarks.length ? remarks[remarks.length - 1].seq : -1;
+    const handlePickFiles = async (e) => {
+        const picked = Array.from(e.target.files || []);
+        e.target.value = ''; // allow re-picking the same file
+        if (!picked.length || !onUploadFiles)
+            return;
+        setUploading(true);
+        try {
+            const uploaded = await onUploadFiles(picked);
+            if (uploaded?.length)
+                setPendingFiles(prev => [...prev, ...uploaded]);
+        }
+        finally {
+            setUploading(false);
+        }
+    };
+    const handleAdd = async () => {
+        const value = text.trim();
+        // A note is valid with text, files, or both.
+        if ((!value && pendingFiles.length === 0) || !onAdd)
+            return;
+        setSaving(true);
+        try {
+            await onAdd(value, pendingFiles);
+            setText('');
+            setPendingFiles([]);
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const startEdit = (r) => { setEditingSeq(r.seq); setEditText(r.text); };
+    const commitEdit = async () => {
+        const value = editText.trim();
+        if (!value || editingSeq == null || !onEdit) {
+            setEditingSeq(null);
+            return;
+        }
+        await onEdit(editingSeq, value);
+        setEditingSeq(null);
+    };
+    return (_jsxs("div", { className: cn('rounded-lg border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] overflow-hidden flex flex-col', className), children: [!hideHeader && (_jsxs("div", { className: "flex items-center gap-1.5 px-3 py-2 bg-[rgb(var(--bg-subtle))] border-b border-[rgb(var(--bd-subtle))]", children: [_jsx(MessageSquare, { className: "h-3.5 w-3.5 text-[rgb(var(--fg-muted))]" }), _jsx("span", { className: "text-xs font-medium text-[rgb(var(--fg-muted))]", children: t('Remarks') }), remarks.length > 0 && _jsxs("span", { className: "text-[11px] text-[rgb(var(--fg-subtle))]", children: ["(", remarks.length, ")"] }), documentNo && _jsxs("span", { className: "text-[11px] text-[rgb(var(--fg-subtle))]", children: ["\u00B7 ", documentNo] }), onClose && (_jsx("button", { type: "button", onClick: onClose, title: t('Close'), className: "ml-auto p-0.5 rounded text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-hover))] transition-colors", children: _jsx(X, { className: "h-3.5 w-3.5" }) }))] })), _jsx("div", { className: "flex-1 overflow-auto px-3 py-2", children: remarks.length === 0 ? (loading ? (_jsx(RemarkTrailSkeleton, {})) : (_jsxs("div", { className: "flex flex-col items-center justify-center gap-1.5 py-8 text-center", children: [_jsx(MessageSquare, { className: "h-6 w-6 text-[rgb(var(--fg-subtle))]" }), _jsx("p", { className: "text-sm font-medium text-[rgb(var(--fg-muted))]", children: emptyTitle || t('No remarks yet') }), emptyHint && _jsx("p", { className: "text-xs text-[rgb(var(--fg-subtle))]", children: emptyHint })] }))) : (_jsx("ul", { className: "space-y-2.5", children: remarks.map((r) => {
+                        const mutable = r.seq === lastSeq && canMutate(r, currentUserId) && (!!onEdit || !!onDelete);
+                        const isEditing = editingSeq === r.seq;
+                        return (_jsxs("li", { className: "group relative text-xs", children: [_jsxs("div", { className: "flex items-center gap-1.5 flex-wrap", children: [r.byName && r.byName.trim() && (_jsx("span", { className: "font-semibold text-[rgb(var(--fg-default))]", children: r.byName })), (r.stage || r.status) && (() => {
+                                            const stageLabel = t(r.stage || 'General');
+                                            // Don't repeat the stage chip when it just echoes the author name.
+                                            const dup = r.byName && r.byName.trim().toLowerCase() === (r.stage || '').trim().toLowerCase();
+                                            if (dup && !r.status)
+                                                return null;
+                                            return (_jsxs("span", { className: cn('rounded-full px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-wide', stageChip(r.stage)), children: [dup ? '' : stageLabel, r.status ? `${dup ? '' : ' · '}${t(r.status)}` : ''] }));
+                                        })(), r.at && _jsx("span", { className: "text-[10px] text-[rgb(var(--fg-subtle))]", children: formatWhen(r.at) }), r.edited && _jsxs("span", { className: "text-[10px] italic text-[rgb(var(--fg-subtle))]", children: ["(", t('edited'), ")"] }), mutable && !isEditing && (_jsxs("span", { className: "ml-auto inline-flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity", children: [onEdit && (_jsx("button", { type: "button", onClick: () => startEdit(r), title: t('Edit'), className: "p-0.5 rounded text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--color-primary))]", children: _jsx(Pencil, { className: "h-3 w-3" }) })), onDelete && (_jsx("button", { type: "button", onClick: () => onDelete(r.seq), title: t('Delete'), className: "p-0.5 rounded text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--color-error))]", children: _jsx(Trash2, { className: "h-3 w-3" }) }))] }))] }), isEditing ? (_jsxs("div", { className: "mt-1 flex items-center gap-1.5", children: [_jsx("input", { value: editText, onChange: (e) => setEditText(e.target.value), onKeyDown: (e) => { if (e.key === 'Enter') {
+                                                e.preventDefault();
+                                                commitEdit();
+                                            } if (e.key === 'Escape')
+                                                setEditingSeq(null); }, autoFocus: true, className: "flex-1 text-xs rounded border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] px-2 py-1 text-[rgb(var(--fg-default))] focus:outline-none focus:ring-1 focus:ring-[rgb(var(--color-primary))]" }), _jsx("button", { type: "button", onClick: commitEdit, title: t('Save'), className: "p-1 rounded bg-[rgb(var(--color-primary))] text-white hover:opacity-90", children: _jsx(Check, { className: "h-3 w-3" }) }), _jsx("button", { type: "button", onClick: () => setEditingSeq(null), title: t('Cancel'), className: "p-1 rounded text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-hover))]", children: _jsx(X, { className: "h-3 w-3" }) })] })) : (r.text && _jsx("p", { className: "mt-0.5 text-[rgb(var(--fg-default))] whitespace-pre-wrap break-words leading-snug", children: r.text })), !isEditing && r.files && r.files.length > 0 && (_jsx("div", { className: "mt-1 flex flex-wrap gap-1.5", children: r.files.map((f, i) => (_jsxs("a", { href: f.url, target: "_blank", rel: "noopener noreferrer", title: f.name, className: "inline-flex items-center gap-1 max-w-[12rem] rounded-md border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))] px-1.5 py-0.5 text-[10px] text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--color-primary))] hover:border-[rgb(var(--color-primary))]/40 transition-colors", children: [_jsx(FileText, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "truncate", children: f.name })] }, i))) }))] }, r.seq));
+                    }) })) }), onAdd && (_jsxs("div", { className: "border-t border-[rgb(var(--bd-subtle))] px-2 py-1.5 space-y-1.5", children: [pendingFiles.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5", children: pendingFiles.map((f, i) => (_jsxs("span", { className: "inline-flex items-center gap-1 max-w-[12rem] rounded-md border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))] pl-1.5 pr-1 py-0.5 text-[10px] text-[rgb(var(--fg-muted))]", children: [_jsx(FileText, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "truncate", children: f.name }), _jsx("button", { type: "button", onClick: () => setPendingFiles(prev => prev.filter((_, idx) => idx !== i)), title: t('Remove'), className: "p-0.5 rounded-full hover:text-[rgb(var(--color-error))]", children: _jsx(X, { className: "h-2.5 w-2.5" }) })] }, i))) })), _jsxs("div", { className: "flex items-center gap-1.5", children: [onUploadFiles && (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInputRef, type: "file", multiple: true, className: "hidden", onChange: handlePickFiles }), _jsx("button", { type: "button", onClick: () => fileInputRef.current?.click(), disabled: !canAdd || saving || uploading, title: t('Attach files'), className: "p-1.5 rounded border border-[rgb(var(--bd-default))] text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--color-primary))] hover:border-[rgb(var(--color-primary))]/50 disabled:opacity-50 transition-colors shrink-0", children: uploading ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : _jsx(Paperclip, { className: "h-3.5 w-3.5" }) })] })), _jsx("input", { value: text, onChange: (e) => setText(e.target.value), onKeyDown: (e) => { if (e.key === 'Enter' && !e.shiftKey) {
+                                    e.preventDefault();
+                                    handleAdd();
+                                } }, disabled: !canAdd || saving, placeholder: t('Add a note...'), className: "flex-1 text-xs rounded border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] px-2 py-1 text-[rgb(var(--fg-default))] focus:outline-none focus:ring-1 focus:ring-[rgb(var(--color-primary))] disabled:opacity-60" }), _jsx("button", { onClick: handleAdd, disabled: !canAdd || saving || uploading || (!text.trim() && pendingFiles.length === 0), title: t('Add'), className: "p-1.5 rounded bg-[rgb(var(--color-primary))] text-white disabled:opacity-50 hover:opacity-90 transition-opacity shrink-0", children: _jsx(Send, { className: "h-3.5 w-3.5" }) })] })] }))] }));
+}
+export function RemarkInput({ value, onChange, module, documentId, documentName, documentNo, actionUrl, stage = 'General', session, label, placeholder, rows = 1, showTrail = false, onUploadFiles, disabled = false, className, inputClassName, error = false, required = false, }) {
+    const { t } = useLanguage();
+    const [trailOpen, setTrailOpen] = useState(false);
+    const [remarks, setRemarks] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const taRef = useRef(null);
+    // Auto-grow with content: starts at one row, expands smoothly up to a cap, then scrolls.
+    // User-dragged heights are respected (we only auto-size while the user hasn't manually resized).
+    const userResized = useRef(false);
+    const autoGrow = useCallback(() => {
+        const el = taRef.current;
+        if (!el || userResized.current)
+            return;
+        el.style.height = 'auto';
+        el.style.height = `${Math.min(el.scrollHeight, 240)}px`;
+    }, []);
+    useLayoutEffect(() => { autoGrow(); }, [value, autoGrow]);
+    const hasDoc = documentId !== null && documentId !== undefined && documentId !== '' && Number(documentId) !== 0;
+    const [count, setCount] = useState(0);
+    const currentUserId = Number(session?.user?.UserID ?? session?.user?.userID ?? 0) || undefined;
+    const loadTrail = useCallback(async () => {
+        if (!hasDoc) {
+            setRemarks([]);
+            setCount(0);
+            return;
+        }
+        setLoading(true);
+        try {
+            const res = await RemarkIntelligenceAPI.getRemarkData(module, documentId, session);
+            const raw = res.success && res.data ? res.data.remarks : [];
+            // Oldest → newest so the trail reads top-to-bottom (latest message at the bottom).
+            const list = [...raw].sort((a, b) => (a.seq ?? 0) - (b.seq ?? 0));
+            setRemarks(list);
+            setCount(list.length);
+        }
+        catch {
+            setRemarks([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [hasDoc, module, documentId, session]);
+    // Eager count on mount (and when the doc changes) so the Trail badge shows up front.
+    useEffect(() => {
+        let alive = true;
+        if (!hasDoc || !showTrail) {
+            setCount(0);
+            return;
+        }
+        RemarkIntelligenceAPI.getRemarkData(module, documentId, session).then((res) => {
+            if (alive)
+                setCount(res.success && res.data ? res.data.remarks.length : 0);
+        }).catch(() => { });
+        return () => { alive = false; };
+    }, [hasDoc, showTrail, module, documentId, session]);
+    const openTrail = useCallback(() => {
+        setTrailOpen(true);
+        loadTrail();
+    }, [loadTrail]);
+    const handleEdit = useCallback(async (seq, text) => {
+        if (!hasDoc)
+            return;
+        const res = await RemarkIntelligenceAPI.editRemarkData(module, documentId, seq, text, session);
+        if (res.success)
+            await loadTrail();
+    }, [hasDoc, module, documentId, session, loadTrail]);
+    const handleDelete = useCallback(async (seq) => {
+        if (!hasDoc)
+            return;
+        const res = await RemarkIntelligenceAPI.deleteRemarkData(module, documentId, seq, session);
+        if (res.success)
+            await loadTrail();
+    }, [hasDoc, module, documentId, session, loadTrail]);
+    // What the trail shows: saved entries + the currently-typed (unsaved) remark, so the user
+    // sees their in-progress note captured even before the form is saved.
+    const displayRemarks = (() => {
+        const draft = (value || '').trim();
+        const lastSaved = remarks.length ? (remarks[remarks.length - 1].text || '').trim() : '';
+        if (!draft || draft === lastSaved)
+            return remarks;
+        return [
+            ...remarks,
+            { seq: remarks.length + 1, stage, status: t('Current'), text: draft, by: null, byName: t('You'), at: '' },
+        ];
+    })();
+    // Append a note straight to the trail from inside the popup (independent of the host form).
+    const handleAdd = useCallback(async (text, files) => {
+        if (!hasDoc)
+            return;
+        const res = await RemarkIntelligenceAPI.saveRemarkData({
+            Module: module,
+            DocumentID: documentId,
+            DocumentName: documentName,
+            DocumentNo: documentNo,
+            ActionUrl: actionUrl,
+            stage,
+            status: '',
+            text,
+            files,
+        }, session);
+        if (res.success)
+            await loadTrail();
+    }, [hasDoc, module, documentId, documentName, documentNo, actionUrl, stage, session, loadTrail]);
+    return (_jsxs("div", { className: className, children: [label && (_jsxs("label", { className: "text-xs font-medium text-[rgb(var(--fg-muted))] mb-1.5 flex items-center justify-between", children: [_jsxs("span", { children: [label, required && _jsx("span", { className: "ml-0.5 text-[rgb(var(--color-error))]", children: "*" })] }), hasDoc && showTrail && (_jsxs("button", { type: "button", onClick: openTrail, title: t('View remark trail'), className: "inline-flex items-center gap-1 text-[11px] font-medium text-[rgb(var(--color-primary))] hover:opacity-80", children: [_jsx(Info, { className: "h-3.5 w-3.5" }), t('Trail'), count > 0 ? ` (${count})` : ''] }))] })), _jsxs("div", { className: "relative", children: [_jsx("textarea", { ref: taRef, value: value, onChange: (e) => { onChange(e.target.value); autoGrow(); }, onMouseDown: () => { }, onMouseUp: (e) => {
+                            // If the user dragged the resize grip, keep their height; double-clearing resets it.
+                            const el = e.currentTarget;
+                            if (el.style.height && Math.abs(el.clientHeight - el.scrollHeight) > 4)
+                                userResized.current = true;
+                        }, placeholder: placeholder ?? t('Add remarks or notes...'), rows: rows, disabled: disabled, className: cn('w-full text-sm rounded-md border bg-[rgb(var(--bg-surface))] px-3 py-2 pr-9 text-[rgb(var(--fg-default))]', error
+                            ? 'border-[rgb(var(--color-error))] placeholder:text-[rgb(var(--fg-subtle))]'
+                            : 'border-[rgb(var(--bd-default))] placeholder:text-[rgb(var(--fg-subtle))]', 'transition-[height,box-shadow,border-color] duration-150 ease-out', 'focus:outline-none focus:border-[rgb(var(--color-primary))] focus:ring-2 focus:ring-[rgb(var(--color-primary))]/30', 'resize-y overflow-auto min-h-[2.25rem] disabled:opacity-60', inputClassName) }), hasDoc && showTrail && !label && (_jsxs("button", { type: "button", onClick: openTrail, title: t('View remark trail'), className: "absolute top-1.5 right-1.5 inline-flex h-5 w-5 items-center justify-center rounded-full border border-[rgb(var(--bd-default))] text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--color-primary))] hover:border-[rgb(var(--color-primary))]/50 hover:bg-[rgb(var(--color-primary-subtle))] transition-colors", children: [_jsx(Info, { className: "h-3 w-3" }), count > 0 && _jsx("span", { className: "absolute -top-1 -right-1 h-2 w-2 rounded-full bg-[rgb(var(--color-primary))]" })] }))] }), _jsx(Modal, { open: trailOpen, onOpenChange: setTrailOpen, children: _jsxs(ModalContent, { size: "md", hideCloseButton: true, className: "p-0 overflow-hidden max-h-[80vh]", children: [_jsx(ModalTitle, { className: "sr-only", children: t('Remarks') }), _jsx(RemarkTrail, { remarks: displayRemarks, loading: loading, onAdd: hasDoc ? handleAdd : undefined, onClose: () => setTrailOpen(false), documentNo: documentNo, currentUserId: currentUserId, onEdit: hasDoc ? handleEdit : undefined, onDelete: hasDoc ? handleDelete : undefined, onUploadFiles: onUploadFiles, className: "max-h-[80vh] border-0 rounded-none" })] }) })] }));
+}

package/dist/components/forms/remark-input/index.d.ts

@@ -0,0 +1 @@
+export { RemarkInput, RemarkTrail, commitRemarkToTrail } from './RemarkInput.js';

package/dist/components/forms/remark-input/index.js

@@ -0,0 +1,2 @@
+'use client';
+export { RemarkInput, RemarkTrail, commitRemarkToTrail } from './RemarkInput.js';

package/dist/components/forms/unified-currency-dropdown.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { CurrencyCode } from '../../contexts/CurrencyContext.js';
+export interface UnifiedCurrencyDropdownProps {
+    value?: CurrencyCode;
+    onValueChange?: (currency: CurrencyCode) => void;
+    amount?: number;
+    onAmountChange?: (amount: number) => void;
+    showRates?: boolean;
+    showConverter?: boolean;
+    allowManualRates?: boolean;
+    className?: string;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'compact' | 'detailed';
+    validation?: {
+        min?: number;
+        max?: number;
+        required?: boolean;
+        customValidator?: (value: CurrencyCode) => string | null;
+    };
+    error?: string;
+}
+export declare function UnifiedCurrencyDropdown({ value, onValueChange, amount, onAmountChange, showRates, showConverter, allowManualRates, className, label, placeholder, disabled, required, size, variant, validation, error }: UnifiedCurrencyDropdownProps): React.JSX.Element;