- {/* Left Section - Logo & Title */}
-
-
-
-
-
-
- Edit
- Qube
-
-
-
- {/* Middle Section - Status & Zoom */}
-
- {/* Progress Bar Mock / Status */}
-
-
-
- {backendHealthy === null
- ? 'Checking Gateway...'
- : backendHealthy
- ? 'Gateway Connected'
- : 'Gateway Offline'}
-
-
- {backendHealthy ? '100%' : '0%'}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{Math.round(zoom * 100)}%
-
-
-
-
- {/* Right Section - Actions */}
-
-
-
-
-
-
-
-
-
-
);
};
+
+const Kbd: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+
{children}
+);
diff --git a/frontend/src/components/TopBar.tsx b/frontend/src/components/TopBar.tsx
new file mode 100644
index 0000000..f72cd68
--- /dev/null
+++ b/frontend/src/components/TopBar.tsx
@@ -0,0 +1,200 @@
+import React, { useRef } from 'react';
+import { Button, IconButton, Popover } from './ui';
+import {
+ UndoIcon, RedoIcon, ZoomInIcon, ZoomOutIcon, RotateIcon, DownloadIcon,
+ ChevronDownIcon, CheckIcon, SpinnerIcon, UploadIcon, FitIcon, PagesIcon,
+} from './icons';
+
+interface TopBarProps {
+ documentName?: string;
+ backendHealthy: boolean | null;
+ engineReady?: boolean;
+ zoom: number;
+ onZoomChange: (z: number) => void;
+ onFitWidth: () => void;
+ currentPage: number;
+ totalPages: number;
+ onGoToPage: (p: number) => void;
+ canUndo: boolean;
+ canRedo: boolean;
+ onUndo: () => void;
+ onRedo: () => void;
+ isSaving: boolean;
+ isDirtySaved: boolean;
+ onRotate: () => void;
+ onExport: () => void;
+ onUpload: (file: File) => void;
+ isInspectorOpen: boolean;
+ onToggleInspector: () => void;
+}
+
+const ZOOM_PRESETS = [0.5, 0.75, 1, 1.25, 1.5, 2, 3];
+
+export const TopBar: React.FC
= ({
+ documentName, backendHealthy, engineReady, zoom, onZoomChange, onFitWidth,
+ currentPage, totalPages, onGoToPage, canUndo, canRedo, onUndo, onRedo,
+ isSaving, isDirtySaved, onRotate, onExport, onUpload,
+ isInspectorOpen, onToggleInspector,
+}) => {
+ const fileRef = useRef(null);
+ const handleFile = (e: React.ChangeEvent) => {
+ const f = e.target.files?.[0];
+ if (f) onUpload(f);
+ e.target.value = '';
+ };
+
+ return (
+
+ );
+};
+
+const MenuItem: React.FC<{ icon: React.ReactNode; onClick: () => void; disabled?: boolean; children: React.ReactNode }> = ({ icon, onClick, disabled, children }) => (
+
+);
+
+const SaveState: React.FC<{ isSaving: boolean; saved: boolean }> = ({ isSaving, saved }) => {
+ if (isSaving) return Saving…;
+ if (!saved) return null;
+ return Saved;
+};
+
+const HealthChip: React.FC<{ healthy: boolean | null; engineReady: boolean }> = ({ healthy, engineReady }) => {
+ // Fully connected (gateway up + engine on) → no noise.
+ if (healthy && engineReady) return null;
+
+ let color = 'var(--text-dim)';
+ let label = 'Offline · mock mode';
+ let tip = 'Gateway not reachable — running on mock data.';
+ if (healthy === null) {
+ color = 'var(--warning)'; label = 'Connecting…'; tip = 'Connecting to gateway…';
+ } else if (healthy && !engineReady) {
+ color = 'var(--warning)'; label = 'Engine off · mock data';
+ tip = 'Gateway is connected, but the PDF engine is disabled. Set PDFENGINE_ENGINE_AVAILABLE=true and restart the gateway for live rendering/editing.';
+ }
+ return (
+
+
+ {label}
+
+ );
+};
diff --git a/frontend/src/components/icons.tsx b/frontend/src/components/icons.tsx
new file mode 100644
index 0000000..b53825b
--- /dev/null
+++ b/frontend/src/components/icons.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+
+interface IconProps {
+ size?: number;
+ className?: string;
+ strokeWidth?: number;
+}
+
+const base = (
+ size: number,
+ className: string | undefined,
+ strokeWidth: number,
+ children: React.ReactNode,
+ fill = false,
+) => (
+
+);
+
+type IC = React.FC;
+const mk = (children: React.ReactNode, defStroke = 1.6): IC =>
+ ({ size = 18, className, strokeWidth }) => base(size, className, strokeWidth ?? defStroke, children);
+
+// Tools
+export const SelectIcon: IC = mk();
+export const PanIcon: IC = mk();
+export const HighlightIcon: IC = mk(<>);
+export const DrawIcon: IC = mk();
+export const CommentIcon: IC = mk();
+export const SignatureIcon: IC = mk(<>);
+export const TextBoxIcon: IC = mk(<>);
+export const StampIcon: IC = mk(<>);
+export const RedactIcon: IC = mk();
+export const ImageIcon: IC = mk(<>);
+
+// Top bar
+export const UndoIcon: IC = mk();
+export const RedoIcon: IC = mk();
+export const ZoomInIcon: IC = mk(<>);
+export const ZoomOutIcon: IC = mk(<>);
+export const RotateIcon: IC = mk();
+export const DownloadIcon: IC = mk();
+export const ChevronDownIcon: IC = mk();
+export const MenuIcon: IC = mk();
+export const CheckIcon: IC = mk();
+export const XIcon: IC = mk();
+export const ShareIcon: IC = mk(<>);
+export const FitIcon: IC = mk();
+
+// Inspector
+export const PagesIcon: IC = mk(<>);
+export const NotesIcon: IC = mk(<>);
+export const PropertiesIcon: IC = mk(<>);
+export const FontsIcon: IC = mk();
+export const OutlineIcon: IC = mk();
+export const FormsIcon: IC = mk(<>);
+export const SearchIcon: IC = mk(<>);
+export const TrashIcon: IC = mk();
+export const ArrowUpIcon: IC = mk();
+export const ArrowDownIcon: IC = mk();
+export const CopyIcon: IC = mk(<>);
+export const PlusIcon: IC = mk();
+export const UploadIcon: IC = mk();
+export const InfoIcon: IC = mk(<>);
+export const SpinnerIcon: IC = ({ size = 18, className }) =>
+ base(size, `${className ?? ''} animate-spin`, 2, <>);
diff --git a/frontend/src/components/ui.tsx b/frontend/src/components/ui.tsx
new file mode 100644
index 0000000..5893b95
--- /dev/null
+++ b/frontend/src/components/ui.tsx
@@ -0,0 +1,261 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { subscribeToasts, dismissToast } from '../lib/toast';
+import type { ToastItem } from '../lib/toast';
+import { XIcon, CheckIcon, InfoIcon } from './icons';
+
+type ButtonVariant = 'primary' | 'ghost' | 'outline' | 'danger' | 'subtle';
+interface ButtonProps extends React.ButtonHTMLAttributes {
+ variant?: ButtonVariant;
+ size?: 'sm' | 'md';
+}
+const buttonVariants: Record = {
+ primary: 'bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)] shadow-sm',
+ ghost: 'text-[var(--text-muted)] hover:bg-[var(--surface-3)] hover:text-[var(--text)]',
+ outline: 'border border-[var(--border-strong)] bg-[var(--surface)] text-[var(--text)] hover:bg-[var(--surface-2)]',
+ danger: 'bg-[var(--danger)] text-white hover:brightness-95 shadow-sm',
+ subtle: 'bg-[var(--surface-3)] text-[var(--text)] hover:bg-[var(--border)]',
+};
+export const Button: React.FC = ({ variant = 'outline', size = 'md', className = '', children, ...rest }) => (
+
+);
+
+interface IconButtonProps extends React.ButtonHTMLAttributes {
+ label: string;
+ active?: boolean;
+ size?: number;
+}
+export const IconButton: React.FC = ({ label, active, className = '', children, size = 34, ...rest }) => (
+
+);
+
+interface PopoverProps {
+ trigger: (open: boolean) => React.ReactNode;
+ children: React.ReactNode;
+ align?: 'left' | 'right';
+ width?: number;
+}
+export const Popover: React.FC = ({ trigger, children, align = 'left', width }) => {
+ const [open, setOpen] = useState(false);
+ const ref = useRef(null);
+ useEffect(() => {
+ if (!open) return;
+ const onDown = (e: MouseEvent) => {
+ if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+ };
+ const onKey = (e: KeyboardEvent) => e.key === 'Escape' && setOpen(false);
+ document.addEventListener('mousedown', onDown);
+ document.addEventListener('keydown', onKey);
+ return () => {
+ document.removeEventListener('mousedown', onDown);
+ document.removeEventListener('keydown', onKey);
+ };
+ }, [open]);
+ return (
+
+
setOpen((o) => !o)}>{trigger(open)}
+ {open && (
+
e.stopPropagation()}
+ >
+ {children}
+
+ )}
+
+ {palette.map((c) => (
+
+);
+
+interface SliderProps {
+ value: number;
+ min: number;
+ max: number;
+ step?: number;
+ onChange: (v: number) => void;
+ label?: string;
+ suffix?: string;
+ width?: number;
+}
+export const Slider: React.FC = ({ value, min, max, step = 1, onChange, label, suffix = '', width = 110 }) => (
+
+ {label && {label}}
+ onChange(parseFloat(e.target.value))}
+ style={{ width }}
+ className="accent-[var(--accent)]"
+ />
+ {value}{suffix}
+
+);
+
+interface EmptyStateProps {
+ icon?: React.ReactNode;
+ title: string;
+ hint?: string;
+ badge?: string;
+}
+export const EmptyState: React.FC = ({ icon, title, hint, badge }) => (
+
+ {icon && (
+
+ {icon}
+
+ )}
+ {badge && (
+
+ {badge}
+
+ )}
+
{title}
+ {hint &&
{hint}
}
+
+
e.stopPropagation()}
+ >
+
+
{title}
+
+
+
{children}
+ {footer &&
{footer}
}
+
+
{state?.message}
+
+);
+
+const toastStyles: Record = {
+ info: 'border-[var(--border)] bg-[var(--text)] text-white',
+ success: 'border-transparent bg-[var(--success)] text-white',
+ error: 'border-transparent bg-[var(--danger)] text-white',
+};
+export const ToastViewport: React.FC = () => {
+ const [items, setItems] = useState([]);
+ useEffect(() => subscribeToasts(setItems), []);
+ return (
+
+ {items.map((t) => (
+
+ {t.kind === 'success' && }
+ {t.kind === 'error' && }
+ {t.kind === 'info' && }
+ {t.message}
+
+
+ ))}
+
- {/* Signature overlay state indicator */}
- {activeTool === 'signature' && (
-
-
- READY TO PLACE SIGNATURE (Page {pageIndex + 1})
-
-
+ {/* Tool hints */}
+ {activeTool === 'signature' && !hasSignature && (
+
Create a signature to place it here
+ )}
+ {activeTool === 'signature' && hasSignature && !commentPopup && (
+
Click to place signature
)}
-
- {/* Comment Tool Tip */}
{activeTool === 'comment' && !commentPopup && (
-
- Click anywhere to add a Sticky Note
-
+
Click to add a sticky note
+ )}
+ {activeTool === 'stamp' && activeStamp && (
+
Click to place “{activeStamp}”
+ )}
+ {activeTool === 'textbox' && !textBox && (
+
Click to add a text box
)}
- {/* Comment Input Popup */}
+ {/* Comment popup */}
{commentPopup && (
-
e.stopPropagation()} // Prevent triggering another comment
+ style={{ position: 'absolute', left: `${commentPopup.x * zoom}px`, top: `${commentPopup.y * zoom}px`, zIndex: 50 }}
+ onClick={(e) => e.stopPropagation()}
>
-