@monkey-mini-app/ui 0.1.0 → 0.1.4

package/dist/src/products/log-viewer.tsx

@@ -1,33 +1,405 @@
-"use client"
+"use client";
 
-import { useVirtualizer } from "@tanstack/react-virtual"
-import * as React from "react"
+import * as React from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import {
+  ArrowDown,
+  Check,
+  Copy,
+  Download,
+  Pause,
+  Play,
+  Search,
+  Terminal,
+  Trash2,
+  X,
+} from "lucide-react";
+
+import { useLabels } from "@monkey-mini-app/ui/i18n/context";
+import { writeClipboard } from "@monkey-mini-app/ui/lib/clipboard";
+import { cn } from "@monkey-mini-app/ui/lib/utils";
+
+export type LogLevel = "info" | "warn" | "error" | "debug" | "verbose";
+
+export type LogEntry = {
+  level: LogLevel;
+  message: string;
+  timestamp?: string;
+};
+
+type LevelColors = {
+  text: string;
+};
+
+const DEFAULT_LEVEL_COLORS: Record<LogLevel, LevelColors> = {
+  error: { text: "text-rose-500 dark:text-rose-400" },
+  warn: { text: "text-amber-500 dark:text-amber-400" },
+  info: { text: "text-sky-500 dark:text-sky-400" },
+  debug: { text: "text-violet-500 dark:text-violet-400" },
+  verbose: { text: "text-zinc-400 dark:text-zinc-500" },
+};
+
+const LEVEL_LABELS: Record<LogLevel, string> = {
+  error: "ERR",
+  warn: "WRN",
+  info: "INF",
+  debug: "DBG",
+  verbose: "VRB",
+};
+
+function formatTimestampFull(ts?: string): string {
+  const d = ts ? new Date(ts) : new Date();
+  const ms = d.getMilliseconds().toString().padStart(3, "0");
+  return `${d.toLocaleTimeString("en-US", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  })}.${ms}`;
+}
+
+function useCopy() {
+  const [copied, setCopied] = React.useState(false);
+
+  const copy = React.useCallback(async (value: string) => {
+    if (!(await writeClipboard(value))) return;
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1500);
+  }, []);
+
+  return { copied, copy };
+}
+
+function exportLogs(entries: LogEntry[]): void {
+  const text = entries
+    .map(
+      (e) =>
+        `[${formatTimestampFull(e.timestamp)}] [${LEVEL_LABELS[e.level]}] ${e.message}`,
+    )
+    .join("\n");
+  const blob = new Blob([text], { type: "text/plain" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `logs-${new Date().toISOString().slice(0, 19).replace(/:/g, "-")}.txt`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function highlightSearch(text: string, query: string): React.ReactNode {
+  if (!query) return text;
+  const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const re = new RegExp(escaped, "gi");
+  const nodes: React.ReactNode[] = [];
+  let lastIndex = 0;
+  let match = re.exec(text);
+  while (match) {
+    if (match.index > lastIndex) {
+      nodes.push(text.slice(lastIndex, match.index));
+    }
+    nodes.push(
+      <mark
+        key={`h-${match.index}-${match[0]}`}
+        className="rounded-sm bg-amber-300/40 px-0.5 text-inherit dark:bg-amber-400/30"
+      >
+        {match[0]}
+      </mark>,
+    );
+    lastIndex = match.index + match[0].length;
+    match = re.exec(text);
+  }
+  if (lastIndex < text.length) {
+    nodes.push(text.slice(lastIndex));
+  }
+  return nodes;
+}
+
+function ToolbarButton({
+  onClick,
+  label,
+  active,
+  children,
+  className,
+}: {
+  onClick: () => void;
+  label: string;
+  active?: boolean;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={label}
+      className={cn(
+        "inline-flex size-7 items-center justify-center rounded-md transition-colors outline-none",
+        "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+        active && "bg-accent text-accent-foreground",
+        className,
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+/**
+ * Virtualized streaming log viewer with level colors, search, and auto-scroll.
+ * @when Streaming / CLI-style log output
+ * @example
+ * <LogViewer entries={[{ level: "info", message: "boot" }, { level: "error", message: "boom" }]} />
+ * @family Realtime
+ */
+export function LogViewer({
+  entries,
+  title,
+  maxHeight = 320,
+  lineNumbers = true,
+  timestamps = true,
+  autoScroll = true,
+  onClear,
+  className,
+}: {
+  entries: LogEntry[];
+  title?: string;
+  maxHeight?: number;
+  lineNumbers?: boolean;
+  timestamps?: boolean;
+  autoScroll?: boolean;
+  onClear?: () => void;
+  className?: string;
+}) {
+  const t = useLabels("logViewer");
+  const resolvedTitle = title ?? t.title;
+  const [paused, setPaused] = React.useState(false);
+  const [searchOpen, setSearchOpen] = React.useState(false);
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [isAtBottom, setIsAtBottom] = React.useState(true);
+  const parentRef = React.useRef<HTMLDivElement>(null);
+  const { copied, copy } = useCopy();
+
+  const filteredEntries = React.useMemo(
+    () =>
+      searchQuery
+        ? entries.filter((e) =>
+            e.message.toLowerCase().includes(searchQuery.toLowerCase()),
+          )
+        : entries,
+    [entries, searchQuery],
+  );
 
-export function LogViewer({ lines }: { lines: string[] }) {
-  const parentRef = React.useRef<HTMLDivElement>(null)
   const virtualizer = useVirtualizer({
-    count: lines.length,
+    count: filteredEntries.length,
     getScrollElement: () => parentRef.current,
-    estimateSize: () => 22,
+    estimateSize: () => 24,
     overscan: 12,
-  })
+  });
+
+  const scrollEnabled = autoScroll && !paused;
+
+  React.useEffect(() => {
+    if (!scrollEnabled || !isAtBottom || filteredEntries.length === 0) return;
+    virtualizer.scrollToIndex(filteredEntries.length - 1, { align: "end" });
+  }, [filteredEntries.length, scrollEnabled, isAtBottom, virtualizer]);
+
+  const handleScroll = React.useCallback(() => {
+    const el = parentRef.current;
+    if (!el) return;
+    const threshold = 40;
+    const atBottom =
+      el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
+    setIsAtBottom(atBottom);
+  }, []);
+
+  const scrollToBottom = React.useCallback(() => {
+    if (filteredEntries.length === 0) return;
+    virtualizer.scrollToIndex(filteredEntries.length - 1, { align: "end" });
+    setIsAtBottom(true);
+  }, [filteredEntries.length, virtualizer]);
+
+  const lineNumberWidth = Math.max(String(filteredEntries.length).length, 3);
+
+  function handleCopyAll() {
+    const text = entries
+      .map(
+        (e) =>
+          `[${formatTimestampFull(e.timestamp)}] [${LEVEL_LABELS[e.level]}] ${e.message}`,
+      )
+      .join("\n");
+    void copy(text);
+  }
+
   return (
     <div
-      ref={parentRef}
       data-testid="log-viewer"
-      className="h-64 overflow-auto rounded-xl border bg-card font-mono text-xs"
+      className={cn(
+        "flex flex-col overflow-hidden rounded-xl border border-border/60 bg-card shadow-sm",
+        className,
+      )}
     >
-      <div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
-        {virtualizer.getVirtualItems().map((item) => (
+      <div className="flex items-center gap-2 border-b border-border/40 bg-muted/30 px-3 py-2">
+        <Terminal className="size-3.5 shrink-0 text-muted-foreground" />
+        <span className="flex-1 truncate text-sm font-medium text-foreground">
+          {resolvedTitle}
+        </span>
+
+        <span className="mr-1 text-[10px] tabular-nums text-muted-foreground">
+          {searchQuery
+            ? t.linesFiltered(filteredEntries.length, entries.length)
+            : t.lines(filteredEntries.length)}
+        </span>
+
+        <div className="flex items-center gap-0.5">
+          <ToolbarButton
+            onClick={() => {
+              setSearchOpen(!searchOpen);
+              if (searchOpen) setSearchQuery("");
+            }}
+            label={searchOpen ? t.closeSearch : t.search}
+            active={searchOpen}
+          >
+            <Search className="size-3.5" />
+          </ToolbarButton>
+
+          <ToolbarButton
+            onClick={() => setPaused(!paused)}
+            label={paused ? t.resumeScroll : t.pauseScroll}
+            active={paused}
+          >
+            {paused ? (
+              <Play className="size-3.5" />
+            ) : (
+              <Pause className="size-3.5" />
+            )}
+          </ToolbarButton>
+
+          <ToolbarButton
+            onClick={handleCopyAll}
+            label={copied ? t.copied : t.copyAll}
+          >
+            {copied ? (
+              <Check className="size-3.5 text-emerald-500" />
+            ) : (
+              <Copy className="size-3.5" />
+            )}
+          </ToolbarButton>
+
+          <ToolbarButton onClick={() => exportLogs(entries)} label={t.download}>
+            <Download className="size-3.5" />
+          </ToolbarButton>
+
+          {onClear ? (
+            <ToolbarButton onClick={onClear} label={t.clear}>
+              <Trash2 className="size-3.5" />
+            </ToolbarButton>
+          ) : null}
+        </div>
+      </div>
+
+      {searchOpen ? (
+        <div className="flex items-center gap-2 border-b border-border/40 bg-muted/20 px-3 py-1.5">
+          <Search className="size-3.5 shrink-0 text-muted-foreground" />
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder={t.filterPlaceholder}
+            className="flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
+          />
+          {searchQuery ? (
+            <button
+              type="button"
+              onClick={() => setSearchQuery("")}
+              className="inline-flex size-5 items-center justify-center rounded text-muted-foreground hover:text-foreground"
+              aria-label={t.clearSearch}
+            >
+              <X className="size-3" />
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+
+      <div
+        ref={parentRef}
+        onScroll={handleScroll}
+        className="overflow-auto bg-card font-mono text-xs leading-relaxed [scrollbar-width:thin]"
+        style={{ maxHeight }}
+        role="log"
+        aria-live="polite"
+        aria-label={resolvedTitle}
+      >
+        {filteredEntries.length === 0 ? (
+          <div className="flex items-center justify-center py-10 text-sm text-muted-foreground">
+            {searchQuery ? t.emptySearch : t.empty}
+          </div>
+        ) : (
           <div
-            key={item.key}
-            className="absolute left-0 w-full truncate px-3"
-            style={{ top: item.start, height: item.size }}
+            style={{
+              height: virtualizer.getTotalSize(),
+              position: "relative",
+              width: "100%",
+            }}
           >
-            {lines[item.index]}
+            {virtualizer.getVirtualItems().map((item) => {
+              const entry = filteredEntries[item.index];
+              if (!entry) return null;
+              const colors = DEFAULT_LEVEL_COLORS[entry.level];
+              return (
+                <div
+                  key={item.key}
+                  data-index={item.index}
+                  ref={virtualizer.measureElement}
+                  className="absolute left-0 flex w-full gap-3 border-b border-border/20 px-3 py-1 transition-colors hover:bg-muted/30"
+                  style={{
+                    top: item.start,
+                    height: item.size,
+                  }}
+                >
+                  {lineNumbers ? (
+                    <span
+                      className="shrink-0 select-none text-right text-muted-foreground/50"
+                      style={{ width: `${lineNumberWidth}ch` }}
+                      aria-hidden="true"
+                    >
+                      {item.index + 1}
+                    </span>
+                  ) : null}
+                  {timestamps ? (
+                    <span className="shrink-0 text-muted-foreground/60">
+                      {formatTimestampFull(entry.timestamp)}
+                    </span>
+                  ) : null}
+                  <span
+                    className={cn(
+                      "w-[3ch] shrink-0 text-right font-semibold",
+                      colors.text,
+                    )}
+                  >
+                    {LEVEL_LABELS[entry.level]}
+                  </span>
+                  <span className="min-w-0 flex-1 truncate whitespace-pre text-foreground/90">
+                    {highlightSearch(entry.message, searchQuery)}
+                  </span>
+                </div>
+              );
+            })}
           </div>
-        ))}
+        )}
       </div>
+
+      {!isAtBottom ? (
+        <button
+          type="button"
+          onClick={scrollToBottom}
+          className="flex w-full items-center justify-center gap-1.5 border-t border-border/40 bg-muted/30 py-1.5 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
+          aria-label={t.scrollLatest}
+        >
+          <ArrowDown className="size-3" />
+          {t.newBelow}
+        </button>
+      ) : null}
     </div>
-  )
+  );
 }

package/dist/src/products/markdown-editor.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+import * as React from "react"
+
 import { Button } from "@monkey-mini-app/ui/components/button"
 import { CodeEditor } from "@monkey-mini-app/ui/products/code-editor"
 import { Markdown } from "@monkey-mini-app/ui/products/markdown"
@@ -8,6 +10,13 @@ import { useLabels } from "@monkey-mini-app/ui/i18n/context"
 
 export type MarkdownEditorMode = "edit" | "split" | "preview"
 
+/**
+ * Markdown edit + preview toggle.
+ * @when Authoring md bodies. Read-only render → `Markdown`.
+ * @example
+ * <MarkdownEditor value={md} onChange={(v) => set(v)} />
+ * @family Rich text
+ */
 export function MarkdownEditor({
   value,
   onChange,
@@ -20,6 +29,12 @@ export function MarkdownEditor({
   onModeChange?: (mode: MarkdownEditorMode) => void
 }) {
   const t = useLabels("markdownEditor")
+  const [currentMode, setCurrentMode] = React.useState<MarkdownEditorMode>(mode)
+  React.useEffect(() => setCurrentMode(mode), [mode])
+  const setMode = (next: MarkdownEditorMode) => {
+    setCurrentMode(next)
+    onModeChange?.(next)
+  }
   return (
     <div data-testid="markdown-editor" className="overflow-hidden rounded-xl border bg-card">
       <div className="flex items-center gap-1 border-b p-1">
@@ -27,9 +42,9 @@ export function MarkdownEditor({
           <Button
             key={item}
             size="sm"
-            variant={mode === item ? "default" : "ghost"}
+            variant={currentMode === item ? "default" : "ghost"}
             data-testid={`markdown-mode-${item}`}
-            onClick={() => onModeChange?.(item)}
+            onClick={() => setMode(item)}
           >
             {t[item]}
           </Button>
@@ -38,11 +53,11 @@ export function MarkdownEditor({
       <div
         className={cn(
           "grid min-h-[280px]",
-          mode === "split" ? "md:grid-cols-2" : "grid-cols-1"
+          currentMode === "split" ? "md:grid-cols-2" : "grid-cols-1"
         )}
       >
-        {mode !== "preview" ? (
-          <div className={cn(mode === "split" && "border-b md:border-r md:border-b-0")}>
+        {currentMode !== "preview" ? (
+          <div className={cn(currentMode === "split" && "border-b md:border-r md:border-b-0")}>
             <CodeEditor
               value={value}
               onChange={onChange}
@@ -52,7 +67,7 @@ export function MarkdownEditor({
             />
           </div>
         ) : null}
-        {mode !== "edit" ? (
+        {currentMode !== "edit" ? (
           <div className="overflow-auto p-3" data-testid="markdown-preview">
             <Markdown>{value}</Markdown>
           </div>

package/dist/src/products/markdown.tsx

@@ -5,6 +5,13 @@ import remarkGfm from "remark-gfm"
 
 import { cn } from "@monkey-mini-app/ui/lib/utils"
 
+/**
+ * Render a markdown string.
+ * @when Model output, README-ish bodies. Children must be a string.
+ * @example
+ * <Markdown>{text}</Markdown>
+ * @family Rich text
+ */
 export function Markdown({
   children,
   className,

package/dist/src/products/rich-text-editor.tsx

@@ -1,14 +1,24 @@
 "use client"
 
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
-import Placeholder from "@tiptap/extension-placeholder"
+import * as React from "react"
 import { Bold, Code, Italic, List, ListOrdered } from "lucide-react"
 
-import { Toggle } from "@monkey-mini-app/ui/components/toggle"
-import { cn } from "@monkey-mini-app/ui/lib/utils"
+import { Button } from "@monkey-mini-app/ui/components/button"
 import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+function runCommand(command: string, value?: string) {
+  // Same primitive as react-simple-wysiwyg. Deprecated, still what lightweight
+  // browsers expose for simple WYSIWYG; no TipTap / CDN / second React.
+  document.execCommand(command, false, value)
+}
 
+/**
+ * Lightweight rich-text editor (contentEditable + toolbar), same idea as
+ * `react-simple-wysiwyg`. HTML is browser-generated — sanitize server-side if needed.
+ * @family Rich text
+ * @when Notes/descriptions you store as **HTML**. Markdown → `MarkdownEditor`; code → `CodeEditor`. Sanitize server-side before rendering elsewhere.
+ */
 export function RichTextEditor({
   value = "<p></p>",
   onChange,
@@ -19,66 +29,62 @@ export function RichTextEditor({
   placeholder?: string
 }) {
   const t = useLabels("richText")
-  const editor = useEditor({
-    immediatelyRender: false,
-    extensions: [StarterKit, Placeholder.configure({ placeholder: placeholder ?? t.placeholder })],
-    content: value,
-    onUpdate: ({ editor: instance }) => onChange?.(instance.getHTML()),
-    editorProps: {
-      attributes: {
-        class:
-          "min-h-32 px-3 py-2 text-sm outline-none [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_p]:my-1",
-      },
-    },
-  })
+  const ref = React.useRef<HTMLDivElement>(null)
+  const ph = placeholder ?? t.placeholder
+
+  React.useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    if (el.innerHTML !== value) el.innerHTML = value || ""
+  }, [value])
+
+  const emit = () => {
+    onChange?.(ref.current?.innerHTML ?? "")
+  }
 
-  if (!editor) return <div data-testid="rich-text-editor" className="min-h-40 rounded-xl border" />
+  const cmd = (command: string, arg?: string) => (e: React.MouseEvent) => {
+    e.preventDefault()
+    ref.current?.focus()
+    runCommand(command, arg)
+    emit()
+  }
 
   return (
     <div data-testid="rich-text-editor" className="overflow-hidden rounded-xl border bg-card">
       <div className="flex flex-wrap gap-0.5 border-b p-1">
-        <Toggle
-          size="sm"
-          pressed={editor.isActive("bold")}
-          aria-label={t.bold}
-          onPressedChange={() => editor.chain().focus().toggleBold().run()}
-        >
-          <Bold />
-        </Toggle>
-        <Toggle
-          size="sm"
-          pressed={editor.isActive("italic")}
-          aria-label={t.italic}
-          onPressedChange={() => editor.chain().focus().toggleItalic().run()}
-        >
-          <Italic />
-        </Toggle>
-        <Toggle
-          size="sm"
-          pressed={editor.isActive("bulletList")}
-          aria-label={t.bullet}
-          onPressedChange={() => editor.chain().focus().toggleBulletList().run()}
-        >
-          <List />
-        </Toggle>
-        <Toggle
-          size="sm"
-          pressed={editor.isActive("orderedList")}
-          aria-label={t.ordered}
-          onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}
-        >
-          <ListOrdered />
-        </Toggle>
-        <Toggle
-          size="sm"
-          pressed={editor.isActive("code")}
-          aria-label={t.code}
-          onPressedChange={() => editor.chain().focus().toggleCode().run()}
-        >
-          <Code />
-        </Toggle>
+        <Button type="button" size="sm" variant="ghost" aria-label={t.bold} onMouseDown={cmd("bold")}>
+          <Bold className="size-3.5" />
+        </Button>
+        <Button type="button" size="sm" variant="ghost" aria-label={t.italic} onMouseDown={cmd("italic")}>
+          <Italic className="size-3.5" />
+        </Button>
+        <Button type="button" size="sm" variant="ghost" aria-label={t.code} onMouseDown={cmd("formatBlock", "pre")}>
+          <Code className="size-3.5" />
+        </Button>
+        <Button type="button" size="sm" variant="ghost" aria-label={t.bullet} onMouseDown={cmd("insertUnorderedList")}>
+          <List className="size-3.5" />
+        </Button>
+        <Button type="button" size="sm" variant="ghost" aria-label={t.ordered} onMouseDown={cmd("insertOrderedList")}>
+          <ListOrdered className="size-3.5" />
+        </Button>
       </div>
-      <EditorContent editor={editor} className={cn("prose-sm max-w-none")} />
+      <div
+        ref={ref}
+        role="textbox"
+        aria-multiline="true"
+        aria-placeholder={ph}
+        contentEditable
+        suppressContentEditableWarning
+        data-placeholder={ph}
+        className={cn(
+          "min-h-40 px-3 py-2 text-sm outline-none",
+          "[&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6",
+          "[&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:px-2 [&_pre]:py-1 [&_pre]:font-mono [&_pre]:text-xs",
+          "empty:before:pointer-events-none empty:before:text-muted-foreground empty:before:content-[attr(data-placeholder)]",
+        )}
+        onInput={emit}
+        onBlur={emit}
+      />
     </div>
   )
 }

package/dist/src/products/sortable-list.tsx

@@ -33,6 +33,13 @@ function Row({ item }: { item: SortableItem }) {
   )
 }
 
+/**
+ * Drag-to-reorder list.
+ * @when Priority queues / column order. Read-only ordered events → `Timeline`.
+ * @example
+ * <SortableList items={items} onChange={(next) => set(next)} />
+ * @family Data & tables
+ */
 export function SortableList({
   items,
   onChange,