Add Obsidian Toolbox — 4 syntax generators under /tools

Inside-LMS toolbox for registered students: callout-CSS, YAML-frontmatter,
theme CSS-variables, Style Settings generators. Auth inherited from (student)
route group; no public surface, no email gate.

- Pure generators in src/lib/tools/* with Vitest (33 tests)
- Shared YAML-safe scalar quoter (_shared/yaml.ts) used by frontmatter +
  style-settings: unquoted user input was silently breaking YAML (tags '#x'
  -> null, color default '#7C3AED' -> null, 'a: b' -> parse error)
- hex validation in callout (no NaN), date input constrained, clipboard +
  analytics calls guarded
- Prisma ToolUsage model + migration; logToolUsage Server Action (auth-first,
  10-min dedup window per user/tool)
- Tool index /tools + ToolCard (explicit lucide map, no import *) + header link

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/components/tools/CodeOutput.tsx

@@ -0,0 +1,21 @@
+import { CopyButton } from "./CopyButton";
+import type { ToolId } from "@/lib/tools/_shared/types";
+
+export function CodeOutput({ code, tool, label }: { code: string; tool: ToolId; label?: string }) {
+  return (
+    <div className="flex flex-col gap-2">
+      {label && <div className="text-xs font-bold tracking-wide" style={{ color: "var(--muted-foreground)" }}>{label}</div>}
+      <pre
+        className="overflow-auto p-3 text-sm"
+        style={{
+          fontFamily: "var(--font-mono, 'Fira Mono', monospace)",
+          border: "1px solid var(--border)",
+          borderRadius: "2px",
+          backgroundColor: "var(--background)",
+          color: "var(--foreground)",
+        }}
+      >{code}</pre>
+      <div><CopyButton text={code} tool={tool} /></div>
+    </div>
+  );
+}

src/components/tools/CopyButton.tsx

@@ -0,0 +1,25 @@
+"use client";
+import { useState } from "react";
+import { Copy, Check } from "lucide-react";
+import { logToolUsage } from "@/lib/actions/tool-usage";
+import type { ToolId } from "@/lib/tools/_shared/types";
+
+export function CopyButton({ text, tool }: { text: string; tool: ToolId }) {
+  const [copied, setCopied] = useState(false);
+  async function onCopy() {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      return; // буфер недоступен (нет разрешения / insecure context) — молча
+    }
+    setCopied(true);
+    logToolUsage({ tool }).catch(() => {}); // аналитика — best-effort, не роняем UI
+    setTimeout(() => setCopied(false), 1500);
+  }
+  return (
+    <button type="button" onClick={onCopy} className="btn-aubade btn-aubade-accent inline-flex items-center gap-2 text-sm">
+      {copied ? <Check size={16} /> : <Copy size={16} />}
+      {copied ? "Скопировано" : "Скопировать"}
+    </button>
+  );
+}

src/components/tools/ToolCard.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+import { MessageSquareQuote, FileCode2, Palette, SlidersHorizontal, Wrench, type LucideIcon } from "lucide-react";
+import type { ToolMeta } from "@/lib/tools/_shared/types";
+
+// Явная карта (не `import * as Icons`) — иначе весь набор lucide попадает в бандл.
+const ICONS: Record<string, LucideIcon> = {
+  MessageSquareQuote,
+  FileCode2,
+  Palette,
+  SlidersHorizontal,
+};
+
+export function ToolCard({ tool }: { tool: ToolMeta }) {
+  const Icon = ICONS[tool.icon] ?? Wrench;
+  return (
+    <Link href={`/tools/${tool.id}`} className="card-aubade p-4 flex flex-col gap-2 no-underline">
+      <div className="flex items-center gap-2" style={{ color: "var(--foreground)" }}>
+        <Icon size={20} />
+        <span className="font-bold">{tool.title}</span>
+      </div>
+      <p className="text-sm" style={{ color: "var(--muted-foreground)" }}>{tool.description}</p>
+    </Link>
+  );
+}