feat: Document UI for directive orchestration with Lexical editor (#93)

* WIP: heartbeat checkpoint

* feat: soryu-co/soryu - makima: Save previous goal on update and include history in re-planning prompt

* feat: soryu-co/soryu - makima: Install Lexical and create base document editor component

* feat: soryu-co/soryu - makima: Create directive file system sidebar and document layout

* feat: soryu-co/soryu - makima: Create custom Lexical step diagram block

* feat: soryu-co/soryu - makima: Add context menu and goal auto-update integration

* WIP: heartbeat checkpoint

1 files changed, 79 insertions, 0 deletions

diff --git a/frontend/src/components/document/ContextMenu.css b/frontend/src/components/document/ContextMenu.css
new file mode 100644
index 0000000..4eed119
--- /dev/null
+++ b/frontend/src/components/document/ContextMenu.css
@@ -0,0 +1,79 @@
+/* ============================================
+   Custom Context Menu
+   ============================================ */
+
+.ctx-menu {
+  position: fixed;
+  z-index: 10000;
+  min-width: 200px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
+  padding: 4px 0;
+  animation: ctxFadeIn 0.12s ease-out;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* Menu item */
+.ctx-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  width: 100%;
+  padding: 0.5rem 0.85rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: #1f2937;
+  text-align: left;
+  border-radius: 0;
+  transition: background 0.1s ease;
+}
+
+.ctx-menu-item:hover:not(:disabled) {
+  background: #f3f4f6;
+}
+
+.ctx-menu-item:active:not(:disabled) {
+  background: #e5e7eb;
+}
+
+/* Disabled state */
+.ctx-menu-item-disabled,
+.ctx-menu-item:disabled {
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+
+/* Icon */
+.ctx-menu-icon {
+  font-size: 1rem;
+  width: 1.25rem;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.ctx-menu-label {
+  flex: 1;
+}
+
+/* Divider */
+.ctx-menu-divider {
+  height: 1px;
+  background: #e5e7eb;
+  margin: 4px 0;
+}
+
+/* Animation */
+@keyframes ctxFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}