@gmickel/gno 0.7.0 → 0.8.2

package/src/serve/public/components/ai-elements/sources.tsx

@@ -1,17 +1,19 @@
-import { BookIcon, ChevronDownIcon } from 'lucide-react';
-import type { ComponentProps } from 'react';
-import { cn } from '../../lib/utils';
+import type { ComponentProps } from "react";
+
+import { BookIcon, ChevronDownIcon } from "lucide-react";
+
+import { cn } from "../../lib/utils";
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '../ui/collapsible';
+} from "../ui/collapsible";
 
-export type SourcesProps = ComponentProps<'div'>;
+export type SourcesProps = ComponentProps<typeof Collapsible>;
 
 export const Sources = ({ className, ...props }: SourcesProps) => (
   <Collapsible
-    className={cn('not-prose mb-4 text-primary text-xs', className)}
+    className={cn("not-prose mb-4 text-primary text-xs", className)}
     {...props}
   />
 );
@@ -27,7 +29,7 @@ export const SourcesTrigger = ({
   ...props
 }: SourcesTriggerProps) => (
   <CollapsibleTrigger
-    className={cn('flex items-center gap-2', className)}
+    className={cn("flex items-center gap-2", className)}
     {...props}
   >
     {children ?? (
@@ -47,15 +49,15 @@ export const SourcesContent = ({
 }: SourcesContentProps) => (
   <CollapsibleContent
     className={cn(
-      'mt-3 flex w-fit flex-col gap-2',
-      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
+      "mt-3 flex w-fit flex-col gap-2",
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
       className
     )}
     {...props}
   />
 );
 
-export type SourceProps = ComponentProps<'a'>;
+export type SourceProps = ComponentProps<"a">;
 
 export const Source = ({ href, title, children, ...props }: SourceProps) => (
   <a

package/src/serve/public/components/ai-elements/suggestion.tsx

@@ -1,7 +1,8 @@
-import type { ComponentProps } from 'react';
-import { cn } from '../../lib/utils';
-import { Button } from '../ui/button';
-import { ScrollArea, ScrollBar } from '../ui/scroll-area';
+import type { ComponentProps } from "react";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../ui/button";
+import { ScrollArea, ScrollBar } from "../ui/scroll-area";
 
 export type SuggestionsProps = ComponentProps<typeof ScrollArea>;
 
@@ -11,14 +12,14 @@ export const Suggestions = ({
   ...props
 }: SuggestionsProps) => (
   <ScrollArea className="w-full overflow-x-auto whitespace-nowrap" {...props}>
-    <div className={cn('flex w-max flex-nowrap items-center gap-2', className)}>
+    <div className={cn("flex w-max flex-nowrap items-center gap-2", className)}>
       {children}
     </div>
     <ScrollBar className="hidden" orientation="horizontal" />
   </ScrollArea>
 );
 
-export type SuggestionProps = Omit<ComponentProps<typeof Button>, 'onClick'> & {
+export type SuggestionProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
   suggestion: string;
   onClick?: (suggestion: string) => void;
 };
@@ -27,8 +28,8 @@ export const Suggestion = ({
   suggestion,
   onClick,
   className,
-  variant = 'outline',
-  size = 'sm',
+  variant = "outline",
+  size = "sm",
   children,
   ...props
 }: SuggestionProps) => {
@@ -38,7 +39,7 @@ export const Suggestion = ({
 
   return (
     <Button
-      className={cn('cursor-pointer rounded-full px-4', className)}
+      className={cn("cursor-pointer rounded-full px-4", className)}
       onClick={handleClick}
       size={size}
       type="button"

package/src/serve/public/components/editor/CodeMirrorEditor.tsx

@@ -0,0 +1,142 @@
+/**
+ * CodeMirror 6 editor wrapper component.
+ *
+ * Provides markdown editing with syntax highlighting and dark theme.
+ * Exposes imperative methods via ref: getValue, setValue, focus.
+ */
+
+import { markdown } from "@codemirror/lang-markdown";
+import { oneDark } from "@codemirror/theme-one-dark";
+import { EditorView, basicSetup } from "codemirror";
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  type ForwardedRef,
+} from "react";
+
+export interface CodeMirrorEditorProps {
+  /** Initial content to display */
+  initialContent: string;
+  /** Called when content changes */
+  onChange: (content: string) => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export interface CodeMirrorEditorRef {
+  /** Get current editor content */
+  getValue: () => string;
+  /** Set editor content programmatically */
+  setValue: (content: string) => void;
+  /** Focus the editor */
+  focus: () => void;
+  /** Wrap selected text with prefix and suffix */
+  wrapSelection: (prefix: string, suffix: string) => void;
+  /** Insert text at cursor position */
+  insertAtCursor: (text: string) => void;
+}
+
+function CodeMirrorEditorInner(
+  { initialContent, onChange, className }: CodeMirrorEditorProps,
+  ref: ForwardedRef<CodeMirrorEditorRef>
+) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const onChangeRef = useRef(onChange);
+
+  // Keep onChange ref current to avoid recreating editor on callback change
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
+  // Initialize CodeMirror
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const view = new EditorView({
+      doc: initialContent,
+      extensions: [
+        basicSetup,
+        markdown(),
+        oneDark,
+        EditorView.lineWrapping,
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            onChangeRef.current(update.state.doc.toString());
+          }
+        }),
+        // Dark theme base styling
+        EditorView.theme({
+          "&": {
+            height: "100%",
+          },
+          ".cm-scroller": {
+            fontFamily: "ui-monospace, monospace",
+            fontSize: "14px",
+          },
+        }),
+      ],
+      parent: containerRef.current,
+    });
+
+    viewRef.current = view;
+    return () => view.destroy();
+    // Only run on mount - initialContent should not trigger re-creation
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Expose imperative methods
+  useImperativeHandle(ref, () => ({
+    getValue: () => {
+      return viewRef.current?.state.doc.toString() ?? "";
+    },
+    setValue: (content: string) => {
+      const view = viewRef.current;
+      if (view) {
+        view.dispatch({
+          changes: { from: 0, to: view.state.doc.length, insert: content },
+        });
+      }
+    },
+    focus: () => {
+      viewRef.current?.focus();
+    },
+    wrapSelection: (prefix: string, suffix: string) => {
+      const view = viewRef.current;
+      if (!view) return;
+
+      const { from, to } = view.state.selection.main;
+      const selectedText = view.state.doc.sliceString(from, to);
+
+      view.dispatch({
+        changes: {
+          from,
+          to,
+          insert: `${prefix}${selectedText}${suffix}`,
+        },
+        selection: {
+          anchor: from + prefix.length,
+          head: from + prefix.length + selectedText.length,
+        },
+      });
+      view.focus();
+    },
+    insertAtCursor: (text: string) => {
+      const view = viewRef.current;
+      if (!view) return;
+
+      const pos = view.state.selection.main.head;
+      view.dispatch({
+        changes: { from: pos, to: pos, insert: text },
+        selection: { anchor: pos + text.length },
+      });
+      view.focus();
+    },
+  }));
+
+  return <div ref={containerRef} className={className} />;
+}
+
+export const CodeMirrorEditor = forwardRef(CodeMirrorEditorInner);

package/src/serve/public/components/editor/MarkdownPreview.tsx

@@ -0,0 +1,311 @@
+/**
+ * MarkdownPreview - Renders markdown with syntax highlighting.
+ *
+ * Uses react-markdown with shiki syntax highlighting via CodeBlock.
+ * Matches the "Scholarly Dusk" design system.
+ */
+
+import type { ComponentProps, FC, ReactNode } from "react";
+import type { BundledLanguage } from "shiki";
+
+import { ExternalLinkIcon } from "lucide-react";
+import { memo } from "react";
+import ReactMarkdown from "react-markdown";
+import rehypeSanitize from "rehype-sanitize";
+
+import { cn } from "../../lib/utils";
+import { CodeBlock, CodeBlockCopyButton } from "../ai-elements/code-block";
+
+export interface MarkdownPreviewProps {
+  /** Markdown content to render */
+  content: string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+// Inline code styling
+const InlineCode: FC<ComponentProps<"code">> = ({
+  className,
+  children,
+  ...props
+}) => (
+  <code
+    className={cn(
+      "rounded-md bg-muted px-1.5 py-0.5 font-mono text-[0.9em] text-primary",
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </code>
+);
+
+// Link handling - external links open in new tab
+const Link: FC<ComponentProps<"a">> = ({
+  href,
+  children,
+  className,
+  ...props
+}) => {
+  const isExternal = href?.startsWith("http");
+  return (
+    <a
+      className={cn(
+        "text-primary underline decoration-primary/40 underline-offset-2 transition-colors hover:decoration-primary",
+        "inline-flex items-center gap-0.5",
+        className
+      )}
+      href={href}
+      rel={isExternal ? "noopener noreferrer" : undefined}
+      target={isExternal ? "_blank" : undefined}
+      {...props}
+    >
+      {children}
+      {isExternal && <ExternalLinkIcon className="inline size-3 opacity-60" />}
+    </a>
+  );
+};
+
+// Heading styles with proper hierarchy
+const createHeading =
+  (level: 1 | 2 | 3 | 4 | 5 | 6): FC<{ children?: ReactNode }> =>
+  ({ children }) => {
+    const Tag = `h${level}` as const;
+    const sizes = {
+      1: "text-3xl mt-8 mb-4 pb-2 border-b border-border/50",
+      2: "text-2xl mt-6 mb-3 pb-1.5 border-b border-border/30",
+      3: "text-xl mt-5 mb-2",
+      4: "text-lg mt-4 mb-2",
+      5: "text-base mt-3 mb-1 font-semibold",
+      6: "text-sm mt-3 mb-1 font-semibold text-muted-foreground",
+    };
+    return (
+      <Tag className={cn("font-serif tracking-tight", sizes[level])}>
+        {children}
+      </Tag>
+    );
+  };
+
+// Code block with syntax highlighting
+const Pre: FC<ComponentProps<"pre">> = ({ children, ...props }) => {
+  // Extract code element from children
+  const codeElement = children as React.ReactElement<{
+    className?: string;
+    children?: string;
+  }>;
+
+  if (!codeElement?.props) {
+    return <pre {...props}>{children}</pre>;
+  }
+
+  const className = codeElement.props.className ?? "";
+  const code = String(codeElement.props.children ?? "").trim();
+
+  // Extract language from className (e.g., "language-typescript")
+  const match = /language-(\w+)/.exec(className);
+  const language = (match?.[1] ?? "plaintext") as BundledLanguage;
+
+  return (
+    <div className="group/code my-4">
+      <CodeBlock
+        className="rounded-lg border border-border/60 bg-muted/30"
+        code={code}
+        language={language}
+      >
+        <CodeBlockCopyButton
+          className="opacity-0 transition-opacity group-hover/code:opacity-100"
+          size="icon-sm"
+          variant="ghost"
+        />
+      </CodeBlock>
+    </div>
+  );
+};
+
+// Blockquote with refined styling
+const Blockquote: FC<ComponentProps<"blockquote">> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <blockquote
+    className={cn(
+      "my-4 border-l-2 border-secondary/60 bg-secondary/5 py-2 pr-4 pl-4 italic text-muted-foreground",
+      "[&>p]:mb-0",
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </blockquote>
+);
+
+// List styles
+const UnorderedList: FC<ComponentProps<"ul">> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <ul
+    className={cn("my-3 ml-6 list-disc space-y-1 [&>li]:pl-1", className)}
+    {...props}
+  >
+    {children}
+  </ul>
+);
+
+const OrderedList: FC<ComponentProps<"ol">> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <ol
+    className={cn("my-3 ml-6 list-decimal space-y-1 [&>li]:pl-1", className)}
+    {...props}
+  >
+    {children}
+  </ol>
+);
+
+// Table styles
+const Table: FC<ComponentProps<"table">> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <div className="my-4 overflow-x-auto rounded-lg border border-border/60">
+    <table
+      className={cn("w-full border-collapse text-sm", className)}
+      {...props}
+    >
+      {children}
+    </table>
+  </div>
+);
+
+const TableHead: FC<ComponentProps<"thead">> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <thead className={cn("bg-muted/50", className)} {...props}>
+    {children}
+  </thead>
+);
+
+const TableRow: FC<ComponentProps<"tr">> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <tr
+    className={cn("border-b border-border/40 last:border-0", className)}
+    {...props}
+  >
+    {children}
+  </tr>
+);
+
+const TableCell: FC<ComponentProps<"td">> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <td className={cn("px-4 py-2", className)} {...props}>
+    {children}
+  </td>
+);
+
+const TableHeaderCell: FC<ComponentProps<"th">> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <th className={cn("px-4 py-2 text-left font-semibold", className)} {...props}>
+    {children}
+  </th>
+);
+
+// Horizontal rule
+const Hr: FC = () => <hr className="my-6 border-0 border-t border-border/50" />;
+
+// Paragraph
+const Paragraph: FC<ComponentProps<"p">> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <p className={cn("mb-4 leading-relaxed last:mb-0", className)} {...props}>
+    {children}
+  </p>
+);
+
+// Image with proper styling
+const Image: FC<ComponentProps<"img">> = ({ alt, className, ...props }) => (
+  // Alt is already passed via props spread, explicit declaration for required attr
+  <img
+    alt={alt ?? ""}
+    className={cn(
+      "my-4 max-w-full rounded-lg border border-border/40",
+      className
+    )}
+    {...props}
+  />
+);
+
+// Component mapping for react-markdown
+const components = {
+  h1: createHeading(1),
+  h2: createHeading(2),
+  h3: createHeading(3),
+  h4: createHeading(4),
+  h5: createHeading(5),
+  h6: createHeading(6),
+  p: Paragraph,
+  a: Link,
+  code: InlineCode,
+  pre: Pre,
+  blockquote: Blockquote,
+  ul: UnorderedList,
+  ol: OrderedList,
+  table: Table,
+  thead: TableHead,
+  tr: TableRow,
+  td: TableCell,
+  th: TableHeaderCell,
+  hr: Hr,
+  img: Image,
+};
+
+/**
+ * Renders markdown content with syntax highlighting and proper styling.
+ * Sanitizes HTML to prevent XSS attacks.
+ */
+export const MarkdownPreview = memo(
+  ({ content, className }: MarkdownPreviewProps) => {
+    if (!content) {
+      return (
+        <div className={cn("text-muted-foreground italic", className)}>
+          No content to display
+        </div>
+      );
+    }
+
+    return (
+      <div
+        className={cn(
+          "prose prose-invert max-w-none",
+          "text-foreground/90",
+          "[&>*:first-child]:mt-0",
+          className
+        )}
+      >
+        <ReactMarkdown components={components} rehypePlugins={[rehypeSanitize]}>
+          {content}
+        </ReactMarkdown>
+      </div>
+    );
+  }
+);
+
+MarkdownPreview.displayName = "MarkdownPreview";

package/src/serve/public/components/editor/index.ts

@@ -0,0 +1,6 @@
+export {
+  CodeMirrorEditor,
+  type CodeMirrorEditorProps,
+  type CodeMirrorEditorRef,
+} from "./CodeMirrorEditor";
+export { MarkdownPreview, type MarkdownPreviewProps } from "./MarkdownPreview";