@aravindc26/velu 0.8.0 → 0.9.0

package/src/engine/app/assistant.css

@@ -0,0 +1,326 @@
+/* ── Velu AI Assistant ─────────────────────────────────────────────────── */
+
+/* Fixed bottom ask bar */
+.velu-ask-bar {
+  position: fixed;
+  bottom: 1.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 200;
+  width: 100%;
+  max-width: 36rem;
+  padding: 0 1rem;
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.velu-ask-bar-hidden {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(-50%) translateY(1rem);
+}
+
+.velu-ask-bar-inner {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--color-fd-card, #18181b);
+  border: 1px solid var(--color-fd-border, #27272a);
+  border-radius: 0.75rem;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+}
+
+.velu-ask-input {
+  flex: 1;
+  background: none;
+  border: none;
+  outline: none;
+  font: inherit;
+  font-size: 0.875rem;
+  color: var(--color-fd-foreground, #fafafa);
+}
+
+.velu-ask-input::placeholder {
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+}
+
+.velu-ask-submit {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--color-fd-primary, #818cf8);
+  color: var(--color-fd-primary-foreground, #fff);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.velu-ask-submit:hover { opacity: 0.85; }
+
+/* Right-side assistant panel */
+.velu-assistant-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 22rem;
+  z-index: 50;
+  pointer-events: auto;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-fd-background, #09090b);
+  border-left: 1px solid var(--color-fd-border, #27272a);
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
+  transition: width 0.2s;
+}
+
+.velu-panel-closed { display: none !important; }
+
+.velu-assistant-expanded { width: 40rem; }
+
+.velu-assistant-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--color-fd-border, #27272a);
+  flex-shrink: 0;
+}
+
+.velu-assistant-title {
+  font-weight: 600;
+  font-size: 0.9375rem;
+  color: var(--color-fd-foreground, #fafafa);
+}
+
+.velu-assistant-actions {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.velu-assistant-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: none;
+  border: none;
+  border-radius: 0.25rem;
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+  cursor: pointer;
+  pointer-events: auto;
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.velu-assistant-action:hover {
+  color: var(--color-fd-foreground, #fafafa);
+  background-color: var(--color-fd-accent, #27272a);
+}
+
+/* Messages area */
+.velu-assistant-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.velu-msg {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.velu-msg-user { align-items: flex-end; }
+.velu-msg-assistant { align-items: flex-start; }
+
+.velu-msg-bubble {
+  max-width: 85%;
+  padding: 0.6rem 0.85rem;
+  border-radius: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  word-break: break-word;
+}
+
+.velu-msg-bubble code {
+  background: var(--color-fd-accent, #27272a);
+  padding: 0.1rem 0.3rem;
+  border-radius: 0.2rem;
+  font-size: 0.85em;
+}
+
+.velu-msg-bubble-user {
+  background: var(--color-fd-primary, #818cf8);
+  color: var(--color-fd-primary-foreground, #fff);
+  border-bottom-right-radius: 0.2rem;
+}
+
+.velu-msg-bubble-assistant {
+  background: var(--color-fd-accent, #27272a);
+  color: var(--color-fd-foreground, #fafafa);
+  border-bottom-left-radius: 0.2rem;
+}
+
+/* Citations */
+.velu-msg-citations {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  padding-left: 0.25rem;
+}
+
+.velu-citation-link {
+  font-size: 0.75rem;
+  color: var(--color-fd-primary, #818cf8);
+  text-decoration: none;
+  padding: 0.15rem 0.4rem;
+  background: var(--color-fd-accent, #27272a);
+  border-radius: 0.25rem;
+  transition: background-color 0.15s;
+}
+
+.velu-citation-link:hover {
+  background: var(--color-fd-border, #3f3f46);
+}
+
+.velu-citation-ref {
+  color: var(--color-fd-primary, #818cf8);
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.8em;
+  vertical-align: super;
+}
+
+/* Message actions */
+.velu-msg-actions {
+  display: flex;
+  gap: 0.15rem;
+  padding-left: 0.25rem;
+}
+
+.velu-msg-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: none;
+  border: none;
+  border-radius: 0.25rem;
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.velu-msg-action:hover {
+  color: var(--color-fd-foreground, #fafafa);
+  background-color: var(--color-fd-accent, #27272a);
+}
+
+/* Thinking dots */
+.velu-thinking-dots {
+  display: inline-flex;
+  gap: 0.3rem;
+  padding: 0.2rem 0;
+}
+
+.velu-thinking-dots span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--color-fd-muted-foreground, #a1a1aa);
+  animation: veluDotPulse 1.2s infinite;
+}
+
+.velu-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
+.velu-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes veluDotPulse {
+  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+  40% { opacity: 1; transform: scale(1); }
+}
+
+/* Chat input area */
+.velu-assistant-input-area {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--color-fd-border, #27272a);
+  flex-shrink: 0;
+}
+
+.velu-assistant-chat-input {
+  flex: 1;
+  background: var(--color-fd-accent, #27272a);
+  border: 1px solid var(--color-fd-border, #27272a);
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font: inherit;
+  font-size: 0.875rem;
+  color: var(--color-fd-foreground, #fafafa);
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.velu-assistant-chat-input:focus {
+  border-color: var(--color-fd-primary, #818cf8);
+}
+
+.velu-assistant-chat-input::placeholder {
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+}
+
+.velu-assistant-send {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--color-fd-primary, #818cf8);
+  color: var(--color-fd-primary-foreground, #fff);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.velu-assistant-send:hover { opacity: 0.85; }
+
+/* Squeeze page layout when panel is open */
+html.velu-assistant-open body {
+  margin-right: 22rem;
+  transition: margin-right 0.25s ease;
+}
+
+html.velu-assistant-wide body {
+  margin-right: 40rem;
+}
+
+/* Responsive */
+@media (max-width: 50rem) {
+  .velu-assistant-panel {
+    width: 100%;
+  }
+  .velu-assistant-expanded {
+    width: 100%;
+  }
+  .velu-ask-bar {
+    max-width: calc(100% - 2rem);
+  }
+  html.velu-assistant-open body {
+    margin-right: 0;
+  }
+  html.velu-assistant-wide body {
+    margin-right: 0;
+  }
+}

package/src/engine/app/copy-page.css

@@ -0,0 +1,132 @@
+/* ── Copy page button ─────────────────────────────────────────────────── */
+
+.velu-title-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.velu-title-row h1 {
+  margin: 0;
+}
+
+.velu-copy-page-container {
+  position: relative;
+  flex-shrink: 0;
+  margin-top: 0.35rem;
+}
+
+.velu-copy-split-btn {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--color-fd-border, #27272a);
+  border-radius: 999px;
+  background: var(--color-fd-card, #18181b);
+}
+
+.velu-copy-main-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.35rem 0.5rem 0.35rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.velu-copy-main-btn:hover {
+  color: var(--color-fd-foreground, #fafafa);
+}
+
+.velu-copy-sep {
+  width: 1px;
+  height: 14px;
+  background-color: var(--color-fd-border, #27272a);
+  flex-shrink: 0;
+}
+
+.velu-copy-caret-btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.35rem 0.5rem;
+  background: none;
+  border: none;
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.velu-copy-caret-btn:hover {
+  color: var(--color-fd-foreground, #fafafa);
+}
+
+.velu-copy-chevron {
+  transition: transform 0.15s;
+}
+
+.velu-copy-caret-btn[aria-expanded='true'] .velu-copy-chevron {
+  transform: rotate(180deg);
+}
+
+.velu-copy-dropdown {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 0.35rem);
+  z-index: 100;
+  min-width: 16rem;
+  padding: 0.35rem;
+  background: var(--color-fd-card, #18181b);
+  border: 1px solid var(--color-fd-border, #27272a);
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+}
+
+.velu-copy-option {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem 0.6rem;
+  font: inherit;
+  font-size: 0.875rem;
+  color: var(--color-fd-foreground, #fafafa);
+  text-align: left;
+  text-decoration: none;
+  background: none;
+  border: none;
+  border-radius: 0.35rem;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.velu-copy-option:hover {
+  background-color: var(--color-fd-accent, #27272a);
+}
+
+.velu-copy-option svg {
+  flex-shrink: 0;
+  opacity: 0.7;
+  margin-top: 0.15rem;
+  overflow: visible;
+}
+
+.velu-copy-option-title {
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+.velu-copy-option-desc {
+  font-size: 0.75rem;
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+  line-height: 1.3;
+}
+
+.velu-external-arrow {
+  font-size: 0.75em;
+  opacity: 0.5;
+}

package/src/engine/app/global.css

@@ -0,0 +1,21 @@
+@import 'tailwindcss';
+@import 'fumadocs-ui/css/neutral.css';
+@import 'fumadocs-ui/css/preset.css';
+@import './velu-theme.css';
+
+body {
+  min-height: 100vh;
+}
+
+/* Ensure sidebar/toc widths are set on the grid layout */
+@media (min-width: 768px) {
+  #nd-docs-layout[data-sidebar-collapsed='false'] {
+    --fd-sidebar-width: 268px;
+  }
+}
+
+@media (min-width: 1280px) {
+  #nd-docs-layout {
+    --fd-toc-width: 268px;
+  }
+}

package/src/engine/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import { RootProvider } from 'fumadocs-ui/provider/next';
+import { getAppearance } from '@/lib/velu';
+import { PagefindSearch } from '@/components/search';
+import { VeluAssistant } from '@/components/assistant';
+import './global.css';
+import './search.css';
+import './assistant.css';
+import './copy-page.css';
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  const appearance = getAppearance();
+  const theme =
+    appearance === 'system'
+      ? undefined
+      : {
+          defaultTheme: appearance,
+          enableSystem: false,
+        };
+
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className="min-h-screen" suppressHydrationWarning>
+        <RootProvider
+          theme={theme}
+          search={{ SearchDialog: PagefindSearch }}
+        >
+          {children}
+          <VeluAssistant />
+        </RootProvider>
+      </body>
+    </html>
+  );
+}

package/src/engine/app/search.css

@@ -0,0 +1,118 @@
+/* Pagefind search dialog */
+.fd-search-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  margin: auto;
+  border: none;
+  background: transparent;
+  padding: 0;
+  max-width: 100vw;
+  max-height: 100vh;
+  width: 100vw;
+  height: 100vh;
+}
+
+.fd-search-dialog::backdrop {
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+}
+
+.fd-search-content {
+  position: absolute;
+  top: 15%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: min(560px, 90vw);
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  border: 1px solid var(--color-fd-border, #27272a);
+  background: var(--color-fd-background, #09090b);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
+}
+
+.fd-search-input-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--color-fd-border, #27272a);
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+}
+
+.fd-search-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: 0.9375rem;
+  color: var(--color-fd-foreground, #fafafa);
+}
+
+.fd-search-input::placeholder {
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+}
+
+.fd-search-kbd {
+  font-size: 0.75rem;
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid var(--color-fd-border, #27272a);
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.fd-search-results {
+  overflow-y: auto;
+  padding: 8px;
+  max-height: calc(70vh - 50px);
+}
+
+.fd-search-empty {
+  padding: 24px 16px;
+  text-align: center;
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+  font-size: 0.875rem;
+}
+
+.fd-search-result {
+  display: block;
+  padding: 10px 12px;
+  border-radius: 8px;
+  text-decoration: none;
+  color: var(--color-fd-foreground, #fafafa);
+  transition: background 0.15s;
+}
+
+.fd-search-result:hover {
+  background: var(--color-fd-accent, #27272a);
+}
+
+.fd-search-result-title {
+  display: block;
+  font-weight: 500;
+  font-size: 0.875rem;
+  margin-bottom: 2px;
+}
+
+.fd-search-result-excerpt {
+  display: block;
+  font-size: 0.8125rem;
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.fd-search-result-excerpt mark {
+  background: var(--color-fd-primary, #818cf8);
+  color: var(--color-fd-primary-foreground, #fff);
+  border-radius: 2px;
+  padding: 0 2px;
+}