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>
2026-06-23 15:45:52 +05:00
parent f8aa27533c
commit b6d555ab3b
30 changed files with 1713 additions and 46 deletions
@@ -0,0 +1,78 @@
+"use client";
+import { useMemo, useState } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { buildStyleSettings, type SettingItem, type SettingType } from "@/lib/tools/style-settings";
+import { CodeOutput } from "@/components/tools/CodeOutput";
+
+const TYPES: SettingType[] = [
+  "heading", "class-toggle", "class-select",
+  "variable-text", "variable-number", "variable-number-slider",
+  "variable-select", "variable-color", "info-text",
+];
+
+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;
+
+function hasDefault(t: SettingType) { return t !== "heading" && t !== "info-text"; }
+function hasOptions(t: SettingType) { return t === "variable-select" || t === "class-select"; }
+
+export function StyleSettingsForm() {
+  const [pluginName, setPluginName] = useState("Моя тема");
+  const [settings, setSettings] = useState<SettingItem[]>([
+    { id: "section", title: "Цвета", type: "heading" },
+    { id: "accent", title: "Акцент", type: "variable-color", default: "#7C3AED", format: "hex" },
+  ]);
+
+  const output = useMemo(() => buildStyleSettings({ pluginName, settings }), [pluginName, settings]);
+
+  function update(i: number, patch: Partial<SettingItem>) {
+    setSettings((prev) => prev.map((s, idx) => (idx === i ? { ...s, ...patch } : s)));
+  }
+  function addRow() {
+    setSettings((prev) => [...prev, { id: "", title: "", type: "variable-text", default: "" }]);
+  }
+  function removeRow(i: number) {
+    setSettings((prev) => prev.filter((_, idx) => idx !== i));
+  }
+
+  return (
+    <div className="grid gap-6 md:grid-cols-2">
+      <div className="flex flex-col gap-3">
+        <label className="text-sm">Имя темы / плагина
+          <input className={field} style={fieldStyle} value={pluginName} onChange={(e) => setPluginName(e.target.value)} />
+        </label>
+        {settings.map((s, i) => (
+          <div key={i} className="flex flex-col gap-2 p-2" style={{ border: "1px solid var(--border)", borderRadius: "2px" }}>
+            <div className="flex items-center gap-2">
+              <input className={field} style={fieldStyle} placeholder="id" value={s.id} onChange={(e) => update(i, { id: e.target.value })} />
+              <button type="button" onClick={() => removeRow(i)} aria-label="Удалить настройку" className="btn-aubade inline-flex items-center justify-center p-2">
+                <Trash2 size={16} />
+              </button>
+            </div>
+            <input className={field} style={fieldStyle} placeholder="заголовок" value={s.title} onChange={(e) => update(i, { title: e.target.value })} />
+            <select className={field} style={fieldStyle} value={s.type} onChange={(e) => update(i, { type: e.target.value as SettingType })}>
+              {TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
+            </select>
+            {hasDefault(s.type) && (
+              <input className={field} style={fieldStyle} placeholder="значение по умолчанию" value={s.default ?? ""} onChange={(e) => update(i, { default: e.target.value })} />
+            )}
+            {hasOptions(s.type) && (
+              <input className={field} style={fieldStyle} placeholder="варианты через запятую" value={s.options ?? ""} onChange={(e) => update(i, { options: e.target.value })} />
+            )}
+            {s.type === "variable-color" && (
+              <select className={field} style={fieldStyle} value={s.format ?? "hex"} onChange={(e) => update(i, { format: e.target.value })}>
+                {["hex", "rgb", "hsl"].map((fmt) => <option key={fmt} value={fmt}>{fmt}</option>)}
+              </select>
+            )}
+          </div>
+        ))}
+        <button type="button" onClick={addRow} className="btn-aubade inline-flex items-center justify-center gap-2 text-sm">
+          <Plus size={16} /> Добавить настройку
+        </button>
+      </div>
+      <div className="flex flex-col gap-4">
+        <CodeOutput code={output} tool="style-settings" label="Блок Style Settings (в начало CSS-сниппета)" />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,15 @@
+import { StyleSettingsForm } from "./StyleSettingsForm";
+
+export const metadata = { title: "Генератор Style Settings — Obsidian Toolbox" };
+
+export default function StyleSettingsToolPage() {
+  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)" }}>Генератор Style Settings</h1>
+      <p className="mt-1 text-sm" style={{ color: "var(--muted-foreground)" }}>Комментарии-настройки для плагина Style Settings.</p>
+      <div className="mt-6 card-aubade p-4">
+        <StyleSettingsForm />
+      </div>
+    </main>
+  );
+}