@seqyuan/annodex 0.1.11 → 0.1.12

package/app/globals.css

@@ -0,0 +1,736 @@
+@import "tailwindcss";
+
+@theme {
+  --color-bg: var(--bg);
+  --color-bg-panel: var(--bg-panel);
+  --color-bg-hover: var(--bg-hover);
+  --color-bg-selected: var(--bg-selected);
+  --color-border: var(--border);
+  --color-text: var(--text);
+  --color-text-muted: var(--text-muted);
+  --color-text-dim: var(--text-dim);
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+  --color-user-bg: var(--user-bg);
+  --color-assistant-bg: var(--assistant-bg);
+  --color-tool-bg: var(--tool-bg);
+  --color-bg-subtle: var(--bg-subtle);
+  --font-mono-font: var(--font-mono);
+}
+
+:root {
+  --bg: #ffffff;
+  --bg-panel: #f5f5f5;
+  --bg-hover: #eeeeee;
+  --bg-selected: #e8e8e8;
+  --border: #e0e0e0;
+  --text: #1a1a1a;
+  --text-muted: #6b7280;
+  --text-dim: #9ca3af;
+  --accent: #2563eb;
+  --accent-hover: #1d4ed8;
+  --user-bg: #eff6ff;
+  --assistant-bg: #ffffff;
+  --tool-bg: #f9fafb;
+  --bg-subtle: rgba(0,0,0,0.03);
+}
+
+html.dark {
+  --bg: #1a1a1a;
+  --bg-panel: #242424;
+  --bg-hover: #2e2e2e;
+  --bg-selected: #383838;
+  --border: #3a3a3a;
+  --text: #e8e8e8;
+  --text-muted: #9ca3af;
+  --text-dim: #6b7280;
+  --accent: #60a5fa;
+  --accent-hover: #93c5fd;
+  --user-bg: #1e293b;
+  --assistant-bg: #1a1a1a;
+  --tool-bg: #1f2937;
+  --bg-subtle: rgba(255,255,255,0.04);
+}
+
+/* Theme toggle: circular wipe via View Transitions API.
+   Disable the UA cross-fade; the actual clip-path animation is driven by
+   Element.animate() in hooks/useTheme.ts after transition.ready resolves. */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+::view-transition-old(root) {
+  z-index: 1;
+}
+::view-transition-new(root) {
+  z-index: 2;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  overscroll-behavior: none;
+}
+
+body {
+  height: 100dvh;
+}
+
+.resize-handle {
+  background: transparent;
+}
+
+.resize-handle::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+.resize-handle-line {
+  width: 1px;
+  height: 100%;
+  background: transparent;
+  transition: background-color 0.15s ease;
+}
+
+.resize-handle:hover .resize-handle-line,
+.resize-handle.resize-handle-dragging .resize-handle-line {
+  background: var(--accent);
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 2px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-dim);
+}
+
+:root {
+  --font-mono: var(--font-noto-mono), 'JetBrains Mono', 'Fira Code', 'Consolas', ui-monospace, 'PingFang SC', 'Microsoft YaHei', monospace;
+}
+
+pre, code {
+  font-family: var(--font-mono);
+}
+
+/* react-markdown output styles */
+.markdown-body {
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--text);
+  word-break: break-word;
+}
+.markdown-body p { margin: 0 0 8px; }
+.markdown-body p:last-child { margin-bottom: 0; }
+.markdown-body h1, .markdown-body h2, .markdown-body h3,
+.markdown-body h4, .markdown-body h5, .markdown-body h6 {
+  font-weight: 600;
+  margin: 10px 0 4px;
+  color: var(--text);
+}
+.markdown-body h1 { font-size: 1.15em; }
+.markdown-body h2 { font-size: 1.05em; }
+.markdown-body h3 { font-size: 0.95em; }
+.markdown-body ul, .markdown-body ol {
+  padding-left: 20px;
+  margin: 4px 0 8px;
+}
+.markdown-body li { margin: 2px 0; }
+.markdown-body a { color: var(--accent); text-decoration: underline; }
+.markdown-body blockquote {
+  border-left: 3px solid var(--border);
+  margin: 4px 0;
+  padding: 2px 10px;
+  color: var(--text-muted);
+}
+.markdown-body table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 8px 0;
+  font-size: 13px;
+}
+.markdown-body th, .markdown-body td {
+  border: 1px solid var(--border);
+  padding: 5px 10px;
+  text-align: left;
+}
+.markdown-body th { background: var(--bg-panel); font-weight: 600; }
+.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
+
+.mermaid-diagram {
+  margin: 12px 0;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-panel);
+  overflow-x: auto;
+}
+.mermaid-diagram-canvas {
+  min-width: min-content;
+}
+.mermaid-diagram svg {
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+}
+.mermaid-diagram-loading,
+.mermaid-diagram-error-title {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+.mermaid-diagram-error {
+  border-color: rgba(248,113,113,0.45);
+}
+.mermaid-diagram-error-message {
+  margin-top: 4px;
+  color: #f87171;
+  font-size: 12px;
+}
+.mermaid-diagram-error pre {
+  margin: 8px 0 0;
+  padding: 8px;
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--text-muted);
+  overflow-x: auto;
+}
+
+.widget-shimmer {
+  background: linear-gradient(90deg, transparent 0%, rgba(128,128,128,0.12) 50%, transparent 100%);
+  background-size: 200% 100%;
+  animation: widget-shimmer 1.5s ease-in-out infinite;
+}
+
+@keyframes widget-shimmer {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+
+/* File viewer markdown preview — document reading surface */
+.markdown-file-preview {
+  min-height: 100%;
+}
+.markdown-file-preview h1,
+.markdown-file-preview h2,
+.markdown-file-preview h3,
+.markdown-file-preview h4,
+.markdown-file-preview h5,
+.markdown-file-preview h6 {
+  line-height: 1.25;
+  letter-spacing: 0;
+}
+.markdown-file-preview h1 {
+  font-size: 1.85em;
+  margin: 0 0 18px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--border);
+}
+.markdown-file-preview h2 {
+  font-size: 1.42em;
+  margin: 28px 0 12px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+}
+.markdown-file-preview h3 { font-size: 1.18em; margin: 22px 0 10px; }
+.markdown-file-preview h4,
+.markdown-file-preview h5,
+.markdown-file-preview h6 { margin: 18px 0 8px; }
+.markdown-file-preview p { margin: 0 0 13px; }
+.markdown-file-preview ul,
+.markdown-file-preview ol { margin: 6px 0 14px; }
+.markdown-file-preview li { margin: 4px 0; }
+.markdown-file-preview blockquote {
+  margin: 12px 0 16px;
+  padding: 8px 14px;
+  background: var(--bg-panel);
+  border-left-color: var(--accent);
+  border-radius: 0 6px 6px 0;
+}
+.markdown-file-preview table {
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  overflow-x: auto;
+  border-spacing: 0;
+}
+.markdown-file-preview th,
+.markdown-file-preview td {
+  padding: 7px 11px;
+  vertical-align: top;
+}
+.markdown-file-preview img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 14px auto;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-panel);
+}
+.markdown-file-preview pre {
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 12px 16px;
+  overflow-x: auto;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  margin: 12px 0;
+}
+.markdown-file-preview code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background: var(--bg-panel);
+  padding: 1px 5px;
+  border-radius: 3px;
+}
+.markdown-file-preview pre code {
+  background: none;
+  padding: 0;
+}
+.markdown-file-preview .mermaid-diagram {
+  margin: 16px 0;
+}
+
+/* syntax highlighter line numbers */
+.markdown-body span.linenumber,
+span.linenumber {
+  color: var(--text-dim) !important;
+  font-style: normal !important;
+}
+
+@keyframes drop-zone-in {
+  from { opacity: 0; transform: scale(0.97); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+@keyframes drop-icon-float {
+  0%, 100% { transform: translateY(0px); }
+  50%       { transform: translateY(-6px); }
+}
+
+@keyframes drop-ring-pulse {
+  0%, 100% { opacity: 0.5; transform: scale(1); }
+  50%       { opacity: 1;   transform: scale(1.06); }
+}
+
+@keyframes drop-ripple {
+  0%   { transform: scale(0); opacity: 0.6; }
+  100% { transform: scale(1); opacity: 0; }
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes saved-pop {
+  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
+  40%  { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.25); }
+  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
+}
+
+@keyframes saved-check-draw {
+  from { stroke-dashoffset: 18; opacity: 0; }
+  to   { stroke-dashoffset: 0;  opacity: 1; }
+}
+
+.settings-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(0,0,0,0.38);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 22px;
+}
+
+.settings-dialog-shell {
+  width: min(1120px, 100%);
+  height: min(82vh, 860px);
+  min-height: 560px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.settings-dialog-header {
+  height: 50px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 14px 0 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+}
+
+.settings-dialog-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.settings-dialog-tabs {
+  width: 190px;
+  flex-shrink: 0;
+  padding: 8px;
+  border-right: 1px solid var(--border);
+  background: var(--bg-panel);
+  overflow-y: auto;
+}
+
+.settings-dialog-tab {
+  width: 100%;
+  border: none;
+  border-radius: 7px;
+  padding: 9px 10px;
+  margin: 0 0 4px;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  text-align: left;
+  transition: background 0.12s, color 0.12s;
+}
+
+.settings-dialog-panel {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--bg);
+}
+
+/* Desktop sidebar: animate width */
+@media (min-width: 641px) {
+  .sidebar-overlay-backdrop {
+    display: none !important;
+  }
+  .sidebar-container {
+    position: relative;
+    overflow: hidden;
+    transition: width 0.2s ease, min-width 0.2s ease;
+  }
+  .sidebar-container.sidebar-closed {
+    width: 0 !important;
+    min-width: 0 !important;
+    border-right: none !important;
+  }
+  .sidebar-container > * {
+    width: 100%;
+    min-width: 260px;
+  }
+}
+
+
+/* Right panel: animate width */
+@media (min-width: 641px) {
+  .right-panel-container {
+    overflow: hidden;
+    transition: width 0.2s ease, min-width 0.2s ease;
+    flex-shrink: 0;
+  }
+  .right-panel-back-button {
+    display: none !important;
+  }
+  .right-panel-container.right-panel-closed {
+    width: 0 !important;
+    min-width: 0 !important;
+    border-left: none !important;
+    display: none !important;
+  }
+}
+
+/* Mobile sidebar: slide in/out as overlay */
+@media (max-width: 640px) {
+  .app-topbar {
+    height: auto !important;
+    min-height: 76px;
+    align-content: center;
+    align-items: center !important;
+    flex-wrap: wrap;
+    gap: 6px !important;
+    padding: 6px 8px !important;
+  }
+  .topbar-sidebar-toggle {
+    order: 1;
+  }
+  .topbar-title-area {
+    order: 2;
+    flex: 1 1 0 !important;
+    min-width: 0;
+  }
+  .topbar-session-title {
+    max-width: none !important;
+  }
+  .topbar-rename-button,
+  .topbar-project-crumb {
+    display: none !important;
+  }
+  .topbar-icon-button {
+    order: 3;
+    width: 30px !important;
+    height: 28px !important;
+  }
+  .topbar-right-panel-toggle {
+    display: flex !important;
+  }
+  .topbar-chat-tools {
+    order: 4;
+    flex: 0 1 auto !important;
+    min-width: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+  }
+  .topbar-chat-tools::-webkit-scrollbar {
+    display: none;
+  }
+  .topbar-system-button {
+    flex: 0 0 auto;
+  }
+  .topbar-session-stats {
+    order: 4;
+    flex: 1 1 0;
+    min-width: 0;
+    max-width: none;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+  }
+  .topbar-update-status {
+    order: 4;
+    flex: 1 1 0 !important;
+    min-width: 0;
+    max-width: none;
+    overflow: hidden;
+  }
+  .topbar-update-status span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .topbar-system-button {
+    width: 30px;
+    justify-content: center;
+    gap: 0 !important;
+    padding: 0 !important;
+  }
+  .topbar-system-label {
+    display: none !important;
+  }
+  .topbar-session-stats::-webkit-scrollbar {
+    display: none;
+  }
+  .chat-input-toolbar {
+    flex-wrap: wrap;
+    align-items: stretch !important;
+    gap: 4px 6px !important;
+  }
+  .chat-input-toolbar-left,
+  .chat-input-toolbar-right {
+    min-width: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+  }
+  .chat-input-toolbar-left {
+    flex: 1 1 100% !important;
+  }
+  .chat-input-toolbar-right {
+    flex: 1 1 100% !important;
+    margin-left: 0 !important;
+  }
+  .chat-input-toolbar-left::-webkit-scrollbar,
+  .chat-input-toolbar-right::-webkit-scrollbar {
+    display: none;
+  }
+  .chat-input-toolbar-left > *,
+  .chat-input-toolbar-right > * {
+    flex-shrink: 0;
+  }
+  .chat-input-toolbar-spacer {
+    display: none !important;
+  }
+  .settings-dialog-backdrop {
+    padding: 0;
+    align-items: stretch;
+    justify-content: stretch;
+  }
+  .settings-dialog-shell {
+    width: 100%;
+    height: 100dvh;
+    min-height: 0;
+    border: none;
+    border-radius: 0;
+  }
+  .settings-dialog-body {
+    flex-direction: column;
+  }
+  .settings-dialog-tabs {
+    width: 100%;
+    display: flex;
+    gap: 6px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+    padding: 7px;
+  }
+  .settings-dialog-tab {
+    width: 132px;
+    flex: 0 0 132px;
+    margin: 0;
+    padding: 8px;
+  }
+  .settings-dialog-panel {
+    flex: 1;
+  }
+  .chat-stats-center {
+    display: none !important;
+  }
+  .resize-handle {
+    display: none !important;
+  }
+  .sidebar-container {
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: min(280px, 85vw) !important;
+    min-width: 0 !important;
+    max-width: 85vw;
+    transition: transform 0.25s ease, box-shadow 0.25s ease;
+  }
+  .sidebar-container.sidebar-open {
+    transform: translateX(0);
+    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
+  }
+  .sidebar-container.sidebar-closed {
+    transform: translateX(-100%);
+    box-shadow: none;
+    pointer-events: none;
+  }
+
+  .right-panel-container {
+    overflow: hidden;
+    transition: width 0.2s ease, min-width 0.2s ease;
+    flex-shrink: 0;
+  }
+  .right-panel-back-button {
+    display: flex !important;
+  }
+  .right-panel-container.right-panel-open {
+    width: 100% !important;
+    min-width: 0 !important;
+  }
+  .right-panel-container.right-panel-closed {
+    width: 0 !important;
+    min-width: 0 !important;
+    border-left: none !important;
+    display: none !important;
+  }
+}
+
+/* ── Document viewer styles ── */
+
+/* DOCX preview container */
+.docx-preview-container .docx-preview {
+  padding: 40px 48px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  color: #333;
+  line-height: 1.6;
+}
+
+.docx-preview-container .docx-preview h1,
+.docx-preview-container .docx-preview h2,
+.docx-preview-container .docx-preview h3 {
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  color: #1a1a1a;
+}
+
+.docx-preview-container .docx-preview p {
+  margin-bottom: 0.5em;
+}
+
+.docx-preview-container .docx-preview table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 8px 0;
+}
+
+.docx-preview-container .docx-preview td,
+.docx-preview-container .docx-preview th {
+  border: 1px solid #ddd;
+  padding: 6px 10px;
+  text-align: left;
+}
+
+.docx-preview-container .docx-preview img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* XLSX preview */
+.xlsx-preview table {
+  border-collapse: collapse;
+  font-size: 12px;
+  font-family: var(--font-mono);
+  background: #fff;
+}
+
+.xlsx-preview td,
+.xlsx-preview th {
+  border: 1px solid var(--border);
+  padding: 4px 8px;
+  white-space: nowrap;
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.xlsx-preview th {
+  background: var(--bg-panel);
+  font-weight: 600;
+  color: var(--text);
+  position: sticky;
+  top: 0;
+}