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/app/(student)/tools/callout/CalloutForm.tsx

@@ -0,0 +1,50 @@
+"use client";
+import { useMemo, useState } from "react";
+import { buildCalloutCss } from "@/lib/tools/callout";
+import { CodeOutput } from "@/components/tools/CodeOutput";
+
+export function CalloutForm() {
+  const [id, setId] = useState("idea");
+  const [title, setTitle] = useState("Идея");
+  const [color, setColor] = useState("#7C3AED");
+  const [icon, setIcon] = useState("lightbulb");
+
+  const result = useMemo(() => {
+    try { return buildCalloutCss({ id, title, color, icon }); }
+    catch { return null; }
+  }, [id, title, color, icon]);
+
+  const field = "w-full p-2 text-sm";
+  const fieldStyle = { border: "1px solid var(--border)", borderRadius: "2px", backgroundColor: "var(--background)", color: "var(--foreground)" } as const;
+
+  return (
+    <div className="grid gap-6 md:grid-cols-2">
+      <div className="flex flex-col gap-3">
+        <label className="text-sm">Тип (id)
+          <input className={field} style={fieldStyle} value={id} onChange={(e) => setId(e.target.value)} />
+        </label>
+        <label className="text-sm">Заголовок
+          <input className={field} style={fieldStyle} value={title} onChange={(e) => setTitle(e.target.value)} />
+        </label>
+        <label className="text-sm">Цвет (HEX)
+          <input className={field} style={fieldStyle} value={color} onChange={(e) => setColor(e.target.value)} />
+        </label>
+        <label className="text-sm">Иконка (lucide-id)
+          <input className={field} style={fieldStyle} value={icon} onChange={(e) => setIcon(e.target.value)} />
+        </label>
+      </div>
+      <div className="flex flex-col gap-4">
+        {result ? (
+          <>
+            <CodeOutput code={result.css} tool="callout" label="CSS-snippet" />
+            <CodeOutput code={result.markdown} tool="callout" label="Пример разметки" />
+          </>
+        ) : (
+          <p className="text-sm" style={{ color: "var(--muted-foreground)" }}>
+            Проверь поля: id — латиница и цифры (напр. <code>idea</code>), цвет — корректный HEX (напр. <code>#7C3AED</code>).
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/(student)/tools/callout/page.tsx

@@ -0,0 +1,15 @@
+import { CalloutForm } from "./CalloutForm";
+
+export const metadata = { title: "Генератор callout-CSS — Obsidian Toolbox" };
+
+export default function CalloutToolPage() {
+  return (
+    <main className="mx-auto w-full max-w-5xl px-6 py-8">
+      <h1 className="text-2xl font-bold tracking-wide" style={{ color: "var(--foreground)" }}>Генератор callout-CSS</h1>
+      <p className="mt-1 text-sm" style={{ color: "var(--muted-foreground)" }}>Кастомные коллауты Obsidian: тип, заголовок, цвет, иконка.</p>
+      <div className="mt-6 card-aubade p-4">
+        <CalloutForm />
+      </div>
+    </main>
+  );
+}