@plannotator/ui 0.22.0

package/components/blocks/TableToolbar.tsx

@@ -0,0 +1,153 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { buildCsv } from './TableBlock';
+
+interface TableToolbarProps {
+  element: HTMLElement;
+  markdown: string;
+  isExiting?: boolean;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  onExpand?: () => void;
+}
+
+// Floats above a table on hover. Mirrors AnnotationToolbar's positioning +
+// portal + entry/exit animation pattern so hover-triggered block toolbars
+// all look and move the same way. Content is table-specific (copy markdown
+// for now; CSV text button and expand icon planned). When a third use case
+// appears we should factor the positioning shell into a shared hook.
+export const TableToolbar: React.FC<TableToolbarProps> = ({
+  element,
+  markdown,
+  isExiting = false,
+  onMouseEnter,
+  onMouseLeave,
+  onExpand,
+}) => {
+  const [position, setPosition] = useState<{ top: number; right: number } | null>(null);
+  const [copiedMd, setCopiedMd] = useState(false);
+  const [copiedCsv, setCopiedCsv] = useState(false);
+  const toolbarRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const updatePosition = () => {
+      const rect = element.getBoundingClientRect();
+      setPosition({
+        top: rect.top - 40,
+        right: window.innerWidth - rect.right,
+      });
+    };
+    updatePosition();
+    window.addEventListener('scroll', updatePosition, true);
+    window.addEventListener('resize', updatePosition);
+    return () => {
+      window.removeEventListener('scroll', updatePosition, true);
+      window.removeEventListener('resize', updatePosition);
+    };
+  }, [element]);
+
+  useEffect(() => {
+    setCopiedMd(false);
+    setCopiedCsv(false);
+  }, [element]);
+
+  const handleCopyMarkdown = async () => {
+    try {
+      await navigator.clipboard.writeText(markdown);
+      setCopiedMd(true);
+      setTimeout(() => setCopiedMd(false), 1500);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  const handleCopyCsv = async () => {
+    try {
+      await navigator.clipboard.writeText(buildCsv(markdown));
+      setCopiedCsv(true);
+      setTimeout(() => setCopiedCsv(false), 1500);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  if (!position) return null;
+
+  const style: React.CSSProperties = {
+    top: position.top,
+    right: position.right,
+    animation: isExiting
+      ? 'table-toolbar-out 0.15s ease-in forwards'
+      : 'table-toolbar-in 0.15s ease-out',
+  };
+
+  return createPortal(
+    <div
+      ref={toolbarRef}
+      className="fixed z-[100] bg-popover border border-border rounded-md shadow-md"
+      style={style}
+      onMouseDown={(e) => e.stopPropagation()}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <style>{`
+        @keyframes table-toolbar-in {
+          from { opacity: 0; transform: translateY(12px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes table-toolbar-out {
+          from { opacity: 1; transform: translateY(0); }
+          to { opacity: 0; transform: translateY(8px); }
+        }
+      `}</style>
+      <div className="flex items-center p-0.5 gap-0.5">
+        <button
+          onClick={handleCopyMarkdown}
+          title={copiedMd ? 'Copied!' : 'Copy as markdown'}
+          className={`p-1 rounded transition-colors ${
+            copiedMd ? 'text-success' : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+          }`}
+        >
+          {copiedMd ? <CheckIcon /> : <CopyIcon />}
+        </button>
+        <button
+          onClick={handleCopyCsv}
+          title={copiedCsv ? 'Copied as CSV!' : 'Copy as CSV'}
+          className={`px-1.5 py-1 rounded text-[10px] font-bold tracking-tight uppercase leading-none transition-colors ${
+            copiedCsv ? 'text-success' : 'text-primary hover:bg-primary/10'
+          }`}
+        >
+          {copiedCsv ? '✓' : 'CSV'}
+        </button>
+        {onExpand && (
+          <button
+            onClick={onExpand}
+            title="Expand table"
+            className="p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+          >
+            <ExpandIcon />
+          </button>
+        )}
+      </div>
+    </div>,
+    document.body,
+  );
+};
+
+const CopyIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+  </svg>
+);
+
+const CheckIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+  </svg>
+);
+
+const ExpandIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4 8V4h4M20 8V4h-4M4 16v4h4M20 16v4h-4" />
+  </svg>
+);

package/components/blocks/proseBody.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { InlineMarkdown } from '../InlineMarkdown';
+
+// Shared block-level renderer for alert and directive bodies. Handles
+// paragraphs, unordered lists, and ordered lists — the shapes GitHub alerts
+// and Docusaurus / VitePress directives commonly carry. More exotic content
+// (headings, tables, code fences, nested alerts) falls back to inline text;
+// add cases here when a real use case turns up.
+//
+// Paragraph lines are joined with '\n' (not ' ') so InlineMarkdown's hard
+// line-break handling still fires for `  \n` inside a callout body.
+export function renderProseBody(args: {
+  body: string;
+  paragraphClassName?: string;
+  listClassName?: string;
+  imageBaseDir?: string;
+  onImageClick?: (src: string, alt: string) => void;
+  onOpenLinkedDoc?: (path: string) => void;
+  onOpenCodeFile?: (path: string) => void;
+  onNavigateAnchor?: (hash: string) => void;
+  githubRepo?: string;
+}): React.ReactNode {
+  const {
+    body,
+    paragraphClassName = 'text-[15px] leading-relaxed text-foreground/90',
+    listClassName = 'text-[15px] leading-relaxed text-foreground/90',
+    imageBaseDir,
+    onImageClick,
+    onOpenLinkedDoc,
+    onOpenCodeFile,
+    onNavigateAnchor,
+    githubRepo,
+  } = args;
+
+  const inline = (text: string) => (
+    <InlineMarkdown
+      imageBaseDir={imageBaseDir}
+      onImageClick={onImageClick}
+      text={text}
+      onOpenLinkedDoc={onOpenLinkedDoc}
+      onOpenCodeFile={onOpenCodeFile}
+      onNavigateAnchor={onNavigateAnchor}
+      githubRepo={githubRepo}
+    />
+  );
+
+  const lines = body.split('\n');
+  const out: React.ReactNode[] = [];
+  let paraLines: string[] = [];
+  let list: { ordered: boolean; items: string[] } | null = null;
+  let key = 0;
+
+  const flushPara = () => {
+    if (paraLines.length === 0) return;
+    const text = paraLines.join('\n');
+    if (text.trim()) {
+      out.push(
+        <p key={`p-${key++}`} className={`${paragraphClassName} ${out.length > 0 ? 'mt-2' : ''}`}>
+          {inline(text)}
+        </p>,
+      );
+    }
+    paraLines = [];
+  };
+  const flushList = () => {
+    if (!list) return;
+    const Tag = list.ordered ? 'ol' : 'ul';
+    const className = `${list.ordered ? 'list-decimal' : 'list-disc'} pl-5 ${listClassName} ${out.length > 0 ? 'mt-2' : ''}`;
+    out.push(
+      <Tag key={`l-${key++}`} className={className}>
+        {list.items.map((item, i) => (
+          <li key={i} className="my-0.5">{inline(item)}</li>
+        ))}
+      </Tag>,
+    );
+    list = null;
+  };
+
+  for (const line of lines) {
+    if (line.trim() === '') {
+      flushPara();
+      flushList();
+      continue;
+    }
+    const listMatch = line.match(/^\s*(\*|-|\d+\.)\s+(.*)$/);
+    if (listMatch) {
+      flushPara();
+      const ordered = /\d/.test(listMatch[1]);
+      if (!list || list.ordered !== ordered) {
+        flushList();
+        list = { ordered, items: [] };
+      }
+      list.items.push(listMatch[2]);
+    } else {
+      flushList();
+      paraLines.push(line);
+    }
+  }
+  flushPara();
+  flushList();
+  return out;
+}

package/components/core/button.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+type ButtonVariant = 'primary' | 'outline' | 'ghost' | 'icon' | 'danger';
+type ButtonSize = 'sm' | 'md' | 'icon';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  active?: boolean;
+}
+
+function cx(...classes: Array<string | false | null | undefined>): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
+  className,
+  variant = 'outline',
+  size = 'md',
+  active = false,
+  type = 'button',
+  ...props
+}, ref) => (
+  <button
+    ref={ref}
+    type={type}
+    className={cx(
+      'inline-flex items-center justify-center gap-2 rounded-md text-xs font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50',
+      size === 'sm' && 'h-8 px-2.5',
+      size === 'md' && 'h-9 px-3',
+      size === 'icon' && 'h-8 w-8',
+      variant === 'primary' && 'bg-primary text-primary-foreground hover:opacity-90',
+      variant === 'outline' && 'border border-border bg-card text-foreground hover:bg-muted',
+      variant === 'ghost' && 'text-muted-foreground hover:bg-muted hover:text-foreground',
+      variant === 'icon' && (active
+        ? 'border border-primary/50 bg-primary/10 text-primary'
+        : 'border border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground'),
+      variant === 'danger' && 'border border-border bg-background text-muted-foreground hover:border-destructive/50 hover:bg-destructive/10 hover:text-destructive',
+      className
+    )}
+    {...props}
+  />
+));
+Button.displayName = 'Button';

package/components/core/textarea.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const fieldSizing = { fieldSizing: 'content' } as React.CSSProperties;
+
+function cx(...classes: Array<string | false | null | undefined>): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({
+  className,
+  style,
+  ...props
+}, ref) => (
+  <textarea
+    ref={ref}
+    className={cx(
+      'min-h-24 w-full resize-none rounded-md border border-border bg-background px-3 py-2 text-sm leading-6 text-foreground outline-none transition-colors placeholder:text-muted-foreground/70 focus:border-primary/60 focus:ring-2 focus:ring-primary/15',
+      className
+    )}
+    style={{ ...fieldSizing, ...style }}
+    {...props}
+  />
+));
+Textarea.displayName = 'Textarea';

package/components/diagramLanguages.ts

@@ -0,0 +1,14 @@
+const GRAPHVIZ_LANGUAGES = new Set(['dot', 'graphviz', 'gv']);
+
+function getFenceLanguage(language?: string): string | undefined {
+  return language?.trim().split(/\s+/, 1)[0]?.toLowerCase();
+}
+
+export function isMermaidLanguage(language?: string): boolean {
+  return getFenceLanguage(language) === 'mermaid';
+}
+
+export function isGraphvizLanguage(language?: string): boolean {
+  const normalizedLanguage = getFenceLanguage(language);
+  return normalizedLanguage ? GRAPHVIZ_LANGUAGES.has(normalizedLanguage) : false;
+}