// Editor — the main design workspace. Top bar, left tool rail, canvas, right panels, bottom status bar.
const TOOLS = [
{ key: 'select', icon: I.pointer, name: 'Select', shortcut: 'V' },
{ key: 'pen', icon: I.pen, name: 'Pen', shortcut: 'P' },
{ key: 'shape', icon: I.shape, name: 'Shape', shortcut: 'R' },
{ key: 'text', icon: I.text, name: 'Text', shortcut: 'T' },
{ key: 'brush', icon: I.brush, name: 'Brush', shortcut: 'B' },
{ key: 'image', icon: I.image, name: 'Place Image', shortcut: 'I' },
{ key: 'crop', icon: I.crop, name: 'Crop', shortcut: 'C' },
{ key: 'frame', icon: I.frame, name: 'Frame', shortcut: 'F' },
{ key: 'eyedrop', icon: I.eyedropper,name: 'Eyedropper', shortcut: 'K' },
{ key: 'zoom', icon: I.zoom, name: 'Zoom', shortcut: 'Z' },
{ key: 'hand', icon: I.hand, name: 'Hand', shortcut: 'H' },
];
const RIGHT_TABS = [
{ key: 'props', name: 'Properties', icon: I.settings },
{ key: 'layers', name: 'Layers', icon: I.layers },
{ key: 'brand', name: 'Brand Kit', icon: I.brand },
{ key: 'ai', name: 'AI Assist', icon: I.sparkle },
{ key: 'history', name: 'History', icon: I.history },
];
function Editor({ onExit, onOpenApproval, onOpenExport }) {
const [tool, setTool] = React.useState('select');
const [zoom, setZoom] = React.useState(1.0);
const [selectedId, setSelectedId] = React.useState('schedule');
const [rightTab, setRightTab] = React.useState('props');
const [showGrid, setShowGrid] = React.useState(true);
const [showGuides, setShowGuides] = React.useState(true);
const [showBleed, setShowBleed] = React.useState(false);
const [file, setFile] = React.useState('Tender Notice — Rural Development');
return (
{rightTab === 'props' &&
}
{rightTab === 'layers' && }
{rightTab === 'brand' && }
{rightTab === 'ai' && }
{rightTab === 'history' && }
);
}
// ============ TOP BAR ============
function EditorTopBar({ file, setFile, onExit, onOpenApproval, onOpenExport }) {
const [editing, setEditing] = React.useState(false);
return (
{/* Left: logo + breadcrumb */}
/
/
{editing ? (
setFile(e.target.value)}
onBlur={() => setEditing(false)}
onKeyDown={(e) => { if (e.key === 'Enter') setEditing(false); }}
style={{ background: 'var(--bg-elevated)', border: '1px solid var(--gold)', padding: '2px 6px', fontSize: 12, fontFamily: 'inherit', color: 'var(--ink)', outline: 'none', width: 260 }}
/>
) : (
)}
Draft · v0.7
{/* Center: menu */}
{['File','Edit','View','Object','Type','Effect','Window','Help'].map((m) => (
))}
{/* Right: collaborators + actions */}
}>3
}>Approval
}>Export
}>Share
{tool.toUpperCase()}
{selectedId ? `Selected · ${selectedId}` : 'No selection'}
} title="Align left"/>
} title="Align center"/>
} title="Align right"/>
} title="Duplicate"/>
} title="Link"/>
} title="Delete"/>
} active={showGrid} onClick={() => setShowGrid(!showGrid)} title="Grid"/>
} active={showGuides} onClick={() => setShowGuides(!showGuides)} title="Guides"/>
setShowBleed(!showBleed)}>Bleed
} size={22} onClick={() => setZoom(Math.max(0.25, zoom - 0.1))}/>
} size={22} onClick={() => setZoom(Math.min(4, zoom + 0.1))}/>
);
}
// ============ LEFT TOOL RAIL ============
function ToolRail({ tool, setTool }) {
return (
{TOOLS.map((t, i) => {
const active = tool === t.key;
return (
{(i === 4 || i === 8) && }
);
})}
} size={36} title="Swatches"/>
} size={36} title="Preferences"/>
{RIGHT_TABS.map((t) => {
const active = rightTab === t.key;
return (
);
})}
);
}
// ============ STATUS BAR ============
function StatusBar({ selectedId, tool, zoom }) {
return (
Autosaved · 14:32:17 IST
CMYK · Fogra 39 · 300 dpi
A4 · 210 × 297 mm · Bleed 3 mm
Fonts · 4 embedded
1 preflight warning
Tool · {tool}
Sel · {selectedId || '—'}
Zoom · {Math.round(zoom * 100)}%
x 142 y 316 mm
);
}
Object.assign(window, { Editor });