Initial commit

app/api/bgremove/methods/route.ts

@@ -0,0 +1,25 @@
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+const BGBYE_URL =
+  process.env.BGBYE_URL ||
+  process.env.BG_BYE_URL ||
+  process.env.BGREMOVER_BASE_URL ||
+  "http://bgbye:7001";
+
+export async function GET() {
+  try {
+    const r = await fetch(`${BGBYE_URL}/methods`, { cache: "no-store" });
+    const body = await r.text();
+    return new Response(body, {
+      status: r.status,
+      headers: { "content-type": r.headers.get("content-type") || "application/json" },
+    });
+  } catch {
+    return new Response(JSON.stringify({ methods: [] }), {
+      status: 200,
+      headers: { "content-type": "application/json" },
+    });
+  }
+}
+

app/api/bgremove/route.ts

@@ -0,0 +1,43 @@
+// /app/api/bgremove/route.ts
+import { NextResponse } from "next/server";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+const BGBYE_URL =
+  process.env.BGBYE_URL ||
+  process.env.BG_BYE_URL ||
+  process.env.BGREMOVER_BASE_URL || // <-- support your existing env var
+  "http://bgbye:7001";
+
+export async function POST(req: Request) {
+  try {
+    const inForm = await req.formData();
+    const method = String(inForm.get("method") || "");
+    const file = inForm.get("file") as any;
+
+    // Loosen the guard: some Node/undici builds return a File-like Blob from a different realm
+    if (!file || !method) {
+      return NextResponse.json({ error: "file and method are required" }, { status: 400 });
+    }
+
+    const outForm = new FormData();
+    const filename = (file as any).name || "upload";
+    outForm.set("method", method);
+    outForm.set("file", file, filename);
+
+    const res = await fetch(`${BGBYE_URL}/remove_background/`, { method: "POST", body: outForm });
+
+    const buf = await res.arrayBuffer();
+    return new NextResponse(buf, {
+      status: res.status,
+      headers: {
+        "content-type": res.headers.get("content-type") || "application/octet-stream",
+        "cache-control": "no-store",
+      },
+    });
+  } catch (err: any) {
+    return NextResponse.json({ error: String(err?.message || err) }, { status: 500 });
+  }
+}
+

app/api/files/download-file/route.ts

@@ -0,0 +1,48 @@
+import { NextResponse } from 'next/server';
+import path from 'node:path';
+import fs from 'node:fs/promises';
+
+const BASE_DIR = '/app/files';
+
+export async function GET(req: Request) {
+  try {
+    const url = new URL(req.url);
+    const raw = url.searchParams.get('path');
+    if (!raw) {
+      return NextResponse.json({ error: 'Missing path' }, { status: 400 });
+    }
+    const safe = path.normalize('/' + raw).replace(/^\/+/, '/');
+    const target = path.resolve(BASE_DIR, '.' + safe);
+
+    if (!target.startsWith(BASE_DIR)) {
+      return NextResponse.json({ error: 'Invalid path' }, { status: 400 });
+    }
+
+    const st = await fs.stat(target).catch(() => null);
+    if (!st || !st.isFile()) {
+      return NextResponse.json({ error: 'Not a file' }, { status: 400 });
+    }
+
+    const data = await fs.readFile(target);
+    // naive content-type guess
+    const ext = path.extname(target).toLowerCase();
+    const ctype =
+      ext === '.pdf'  ? 'application/pdf' :
+      ext === '.png'  ? 'image/png' :
+      ext === '.jpg' || ext === '.jpeg' ? 'image/jpeg' :
+      ext === '.webp' ? 'image/webp' :
+      ext === '.txt'  ? 'text/plain; charset=utf-8' :
+      'application/octet-stream';
+
+    return new Response(data, {
+      headers: {
+        'Content-Type': ctype,
+        'Content-Length': String(data.byteLength),
+        'Content-Disposition': `inline; filename="${path.basename(target)}"`,
+        'Cache-Control': 'no-store',
+      }
+    });
+  } catch (e: any) {
+    return NextResponse.json({ error: e?.message ?? 'Unknown error' }, { status: 500 });
+  }
+}

app/api/files/download/route.ts

@@ -0,0 +1,44 @@
+import { stat } from "fs/promises";
+import { createReadStream } from "fs";
+import path from "path";
+
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+
+const ROOT = process.env.FILES_ROOT || "/app/files";
+
+function safeJoin(root: string, p: string) {
+  const raw = path.normalize("/" + (p || "/"));
+  const abs = path.resolve(root, "." + raw);
+  if (!abs.startsWith(path.resolve(root))) throw new Error("Invalid path");
+  return abs;
+}
+
+export async function GET(req: Request) {
+  try {
+    const { searchParams } = new URL(req.url);
+    const p = searchParams.get("path");
+    if (!p) return new Response(JSON.stringify({ error: "Missing path" }), { status: 400 });
+
+    const abs = safeJoin(ROOT, p);
+    const s = await stat(abs);
+    if (s.isDirectory()) {
+      return new Response(JSON.stringify({ error: "Is a directory" }), { status: 400 });
+    }
+
+    const stream = createReadStream(abs);
+    const fileName = path.basename(abs);
+    return new Response(stream as any, {
+      headers: {
+        "Content-Type": "application/octet-stream",
+        "Content-Length": String(s.size),
+        "Content-Disposition": `attachment; filename*=UTF-8''${encodeURIComponent(fileName)}`,
+        "Cache-Control": "no-store",
+      }
+    });
+  } catch (e: any) {
+    const msg = e?.message || "Not found";
+    const code = msg === "Invalid path" ? 400 : 404;
+    return new Response(JSON.stringify({ error: msg }), { status: code, headers: { "Cache-Control": "no-store" } });
+  }
+}

app/api/files/get/route.ts

@@ -0,0 +1,50 @@
+import { NextResponse } from "next/server";
+import fs from "node:fs/promises";
+import path from "node:path";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+const BASE = "/app/files";
+
+function safeJoin(base: string, reqPath: string) {
+  const rel = reqPath.startsWith("/") ? reqPath : `/${reqPath}`;
+  const full = path.resolve(base, "." + rel);
+  if (!full.startsWith(base)) throw new Error("Outside base");
+  return full;
+}
+
+const CONTENT_MAP: Record<string, string> = {
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".webp": "image/webp",
+  ".svg": "image/svg+xml",
+  ".txt": "text/plain; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".pdf": "application/pdf",
+};
+
+export async function GET(req: Request) {
+  try {
+    const url = new URL(req.url);
+    const reqPath = url.searchParams.get("path");
+    if (!reqPath) return NextResponse.json({ error: "Missing path" }, { status: 400 });
+
+    const full = safeJoin(BASE, reqPath);
+    const stat = await fs.stat(full);
+    if (!stat.isFile()) return NextResponse.json({ error: "Not a file" }, { status: 400 });
+
+    const data = await fs.readFile(full);
+    const ext = path.extname(full).toLowerCase();
+    const type = CONTENT_MAP[ext] ?? "application/octet-stream";
+
+    return new NextResponse(data, {
+      status: 200,
+      headers: { "Content-Type": type, "Cache-Control": "public, max-age=300" },
+    });
+  } catch (e: any) {
+    return NextResponse.json({ error: e?.message ?? "Unknown" }, { status: 400 });
+  }
+}

app/api/files/list-files/route.ts

@@ -0,0 +1,41 @@
+import { NextResponse } from 'next/server';
+import path from 'node:path';
+import fs from 'node:fs/promises';
+
+const BASE_DIR = '/app/files';
+
+export async function GET(req: Request) {
+  try {
+    const url = new URL(req.url);
+    const raw = url.searchParams.get('path') ?? '/';
+    const safe = path.normalize('/' + raw).replace(/^\/+/, '/'); // normalize & ensure leading slash
+    const target = path.resolve(BASE_DIR, '.' + safe);
+
+    if (!target.startsWith(BASE_DIR)) {
+      return NextResponse.json({ error: 'Invalid path' }, { status: 400 });
+    }
+
+    const st = await fs.stat(target).catch(() => null);
+    if (!st || !st.isDirectory()) {
+      return NextResponse.json({ error: 'Not a directory' }, { status: 400 });
+    }
+
+    const entries = await fs.readdir(target, { withFileTypes: true });
+    const items = await Promise.all(entries.map(async (d) => {
+      const full = path.join(target, d.name);
+      const rel = path.posix.join(safe, d.name).replaceAll('\\', '/');
+      const s = await fs.stat(full);
+      return {
+        name: d.name,
+        path: rel,
+        type: d.isDirectory() ? 'dir' : 'file',
+        size: s.size,
+        mtime: s.mtimeMs,
+      };
+    }));
+
+    return NextResponse.json({ path: safe, items });
+  } catch (e: any) {
+    return NextResponse.json({ error: e?.message ?? 'Unknown error' }, { status: 500 });
+  }
+}

app/api/files/list/route.ts

@@ -0,0 +1,43 @@
+// /var/www/makearmy.io/app/app/api/files/list/route.ts
+import { NextResponse } from "next/server";
+import { promises as fs } from "fs";
+import { join, normalize } from "path";
+
+const ROOT = "/app/files";
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const input = searchParams.get("path") || "/";
+
+  // Normalize and lock to ROOT to prevent traversal
+  const safeInput = input.startsWith("/") ? input : `/${input}`;
+  const fullPath = normalize(join(ROOT, `.${safeInput}`));
+  if (!fullPath.startsWith(ROOT)) {
+    return NextResponse.json({ error: "Invalid path" }, { status: 400 });
+  }
+
+  try {
+    const entries = await fs.readdir(fullPath, { withFileTypes: true });
+
+    const items = await Promise.all(
+      entries.map(async (d) => {
+        const p = join(fullPath, d.name);
+        const s = await fs.stat(p);
+        return {
+          name: d.name,
+          isDir: d.isDirectory(),
+          size: s.size,
+          mtime: s.mtimeMs,
+        };
+      })
+    );
+
+    return NextResponse.json({ path: safeInput, items });
+  } catch (err: any) {
+    return NextResponse.json(
+      { error: err?.message ?? String(err) },
+      { status: 404 }
+    );
+  }
+}
+

app/api/files/raw/route.ts

@@ -0,0 +1,39 @@
+import { NextResponse } from "next/server";
+import fssync from "node:fs";
+import path from "node:path";
+import mime from "mime";
+
+const BASE = "/app/files";
+
+function safeJoin(base: string, reqPath: string) {
+  const decoded = decodeURIComponent(reqPath || "/");
+  const normalized = path.posix.normalize("/" + decoded).replace(/^(\.\.(\/|\\|$))+/g, "");
+  const full = path.join(base, normalized);
+  if (!full.startsWith(base)) throw new Error("Invalid path");
+  return full;
+}
+
+export async function GET(req: Request) {
+  try {
+    const { searchParams } = new URL(req.url);
+    const p = searchParams.get("path");
+    if (!p) return NextResponse.json({ ok: false, error: "Missing path" }, { status: 400 });
+
+    const abs = safeJoin(BASE, p);
+    if (!fssync.existsSync(abs) || !fssync.statSync(abs).isFile()) {
+      return NextResponse.json({ ok: false, error: "Not found" }, { status: 404 });
+    }
+
+    const stream = fssync.createReadStream(abs);
+    const type = mime.getType(abs) || "application/octet-stream";
+    return new Response(stream as any, {
+      headers: {
+        "Content-Type": type,
+        "Cache-Control": "public, max-age=3600",
+      },
+    });
+  } catch (err: any) {
+    return NextResponse.json({ ok: false, error: err?.message || "Error" }, { status: 400 });
+  }
+}
+

app/api/files/route.ts

@@ -0,0 +1,50 @@
+import { NextResponse } from "next/server";
+import fs from "node:fs/promises";
+import fssync from "node:fs";
+import path from "node:path";
+
+const BASE = "/app/files"; // this is /var/www/makearmy.io/app/files on the host
+
+function safeJoin(base: string, reqPath: string) {
+  const decoded = decodeURIComponent(reqPath || "/");
+  // normalize, strip traversal, and join under BASE
+  const normalized = path.posix.normalize("/" + decoded).replace(/^(\.\.(\/|\\|$))+/g, "");
+  const full = path.join(base, normalized);
+  if (!full.startsWith(base)) throw new Error("Invalid path");
+  return full;
+}
+
+export async function GET(req: Request) {
+  try {
+    const { searchParams } = new URL(req.url);
+    const p = searchParams.get("path") || "/";
+    const abs = safeJoin(BASE, p);
+
+    const entries = await fs.readdir(abs, { withFileTypes: true });
+    const rows = await Promise.all(entries.map(async (ent) => {
+      const full = path.join(abs, ent.name);
+      const stat = await fs.stat(full);
+      const isDir = ent.isDirectory();
+      return {
+        name: ent.name,
+        type: isDir ? "dir" : "file",
+        size: isDir ? null : stat.size,
+        mtime: stat.mtime.toISOString(),
+        path: path.posix.join(p.endsWith("/") ? p : p + "/", ent.name),
+        // raw download/view URL (served by /api/files/raw)
+        url: isDir ? null : `/api/files/raw?path=${encodeURIComponent(path.posix.join(p, ent.name))}`,
+      };
+    }));
+
+    // Sort: directories first, then files alphabetically
+    rows.sort((a, b) => {
+      if (a.type !== b.type) return a.type === "dir" ? -1 : 1;
+      return a.name.localeCompare(b.name, undefined, { sensitivity: "base" });
+    });
+
+    return NextResponse.json({ ok: true, path: p, items: rows });
+  } catch (err: any) {
+    return NextResponse.json({ ok: false, error: err?.message || "Error" }, { status: 400 });
+  }
+}
+

app/api/options/[collection]/route.ts

@@ -0,0 +1,111 @@
+// app/api/options/[collection]/route.ts
+import { NextRequest, NextResponse } from "next/server";
+import { directusFetch } from "@/lib/directus";
+
+const NM_FIELD = "nm"; // wavelength field in laser_source
+
+// Parse wavelength that might be stored as "1064", "1064nm", "1,064", etc.
+function parseNm(v: any): number | null {
+  const s = String(v ?? "").replace(/[^0-9.]/g, "");
+  if (!s) return null;
+  const n = Number(s);
+  return Number.isFinite(n) ? n : null;
+}
+
+// Target → wavelength range (nm)
+function nmRangeForTarget(t?: string): [number, number] | null {
+  switch (t) {
+    case "settings_fiber":   return [1000, 1100];
+    case "settings_uv":      return [300, 400];
+    case "settings_co2gan":
+    case "settings_co2gal":  return [10000, 11000];
+    default: return null;
+  }
+}
+
+// Generic lookups (request only fields we know exist)
+const GENERIC: Record<
+  string,
+  { path: string; fields: string[]; label: (x: any) => string }
+> = {
+  material:         { path: "/items/material",          fields: ["id", "name"],    label: (x) => x.name ?? String(x.id) },
+  material_coating: { path: "/items/material_coating",  fields: ["id", "name"],    label: (x) => x.name ?? String(x.id) },
+  material_color:   { path: "/items/material_color",    fields: ["id", "name"],    label: (x) => x.name ?? String(x.id) },
+  material_opacity: { path: "/items/material_opacity",  fields: ["id", "opacity"], label: (x) => String(x.opacity ?? x.id) },
+  laser_software:   { path: "/items/laser_software",    fields: ["id", "name"],    label: (x) => x.name ?? String(x.id) },
+};
+
+async function fetchDirectus<T>(pathname: string, params: URLSearchParams) {
+  return directusFetch<T>(`${pathname}?${params.toString()}`);
+}
+
+export async function GET(req: NextRequest) {
+  try {
+    const url = new URL(req.url);
+    const collection = url.pathname.split("/").pop() || "";
+    const q       = url.searchParams.get("q")?.trim() || "";
+    const limit   = Number(url.searchParams.get("limit") || "400");
+    const target  = url.searchParams.get("target") || undefined;
+
+    // ----- generic tables -----
+    const gen = GENERIC[collection];
+    if (gen) {
+      const params = new URLSearchParams();
+      params.set("fields", gen.fields.join(","));
+      params.set("limit", String(limit));
+      if (q) params.set("search", q);
+
+      const { data } = await fetchDirectus<{ data: any[] }>(gen.path, params);
+      const out = (data ?? [])
+        .map((x) => ({ id: String(x.id), label: gen.label(x) }))
+        .sort((a, b) => a.label.localeCompare(b.label));
+      return NextResponse.json({ data: out });
+    }
+
+    // ----- laser_source (uses submission_id as the key) -----
+    if (collection === "laser_source") {
+      const range = nmRangeForTarget(target);
+      if (!range) {
+        return NextResponse.json(
+          { error: "missing/invalid target for laser_source" },
+          { status: 400 }
+        );
+      }
+
+      const params = new URLSearchParams();
+      // IMPORTANT: request submission_id instead of id
+      params.set("fields", ["submission_id", "make", "model", NM_FIELD].join(","));
+      params.set("limit", String(limit));
+      if (q) params.set("search", q);
+
+      const { data } = await fetchDirectus<{ data: any[] }>("/items/laser_source", params);
+      const rows = data ?? [];
+
+      const [lo, hi] = range;
+      const filtered = rows.filter((x) => {
+        const nm = parseNm(x[NM_FIELD]);
+        return nm !== null && nm >= lo && nm <= hi;
+      });
+
+      const out = filtered
+        .map((x) => ({
+          id: String(x.submission_id), // <- use submission_id
+          label: [x.make, x.model].filter(Boolean).join(" ").trim() || String(x.submission_id),
+          sortKey: [(x.make ?? "").toLowerCase(), (x.model ?? "").toLowerCase()].join(" "),
+        }))
+        .filter((o) => o.id)
+        .sort((a, b) => a.sortKey.localeCompare(b.sortKey))
+        .map(({ id, label }) => ({ id, label }));
+
+      return NextResponse.json({ data: out });
+    }
+
+    return NextResponse.json({ error: "unsupported collection" }, { status: 400 });
+  } catch (err: any) {
+    return NextResponse.json(
+      { error: err?.message || "Unknown error" },
+      { status: 500 }
+    );
+  }
+}
+

app/api/options/lens/route.ts

@@ -0,0 +1,40 @@
+// app/api/options/lens/route.ts
+import { NextResponse } from "next/server";
+import { directusFetch } from "@/lib/directus";
+
+/** pick a decent label from whatever fields are readable */
+function pickLabel(it: any) {
+  const mm = [it?.make, it?.model].filter(Boolean).join(" ").trim();
+  if (mm) return mm;
+  if (it?.name) return String(it.name);
+  const f = it?.focal_length ?? it?.f ?? it?.fl;
+  if (f != null) return `${mm ? mm + " " : ""}${f} mm`.trim();
+  return String(it?.label ?? it?.title ?? it?.id ?? "");
+}
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const target = searchParams.get("target") || ""; // required
+  const q      = (searchParams.get("q") || "").toLowerCase();
+  const limit  = Number(searchParams.get("limit") || "500");
+
+  // Fiber / CO2 Galvo / UV -> scan lens ; CO2 Gantry -> focus lens
+  const isGantry = target === "settings_co2gan";
+  const coll = isGantry ? "laser_focus_lens" : "laser_scan_lens";
+
+  // Avoid explicit fields -> prevents 403 on disallowed fields
+  const res = await directusFetch<{ data: any[] }>(`/items/${coll}?limit=${limit}`);
+  let items = res?.data ?? [];
+
+  let rows = items.map((it) => {
+    const label = pickLabel(it);
+    const search = Object.values(it ?? {}).join(" ").toLowerCase();
+    return { id: String(it?.id ?? ""), label, _search: search };
+  }).filter((r) => r.id);
+
+  if (q) rows = rows.filter((r) => r._search.includes(q));
+  rows.sort((a, b) => a.label.localeCompare(b.label));
+
+  return NextResponse.json({ data: rows.map(({ _search, ...r }) => r) });
+}
+

app/api/options/repeater-choices/route.ts

@@ -0,0 +1,26 @@
+import { NextRequest, NextResponse } from "next/server";
+import { directusFetch } from "@/lib/directus";
+
+export async function GET(req: NextRequest) {
+  const { searchParams } = new URL(req.url);
+  const target = searchParams.get("target") || "";
+  const group  = searchParams.get("group")  || "";
+  const field  = searchParams.get("field")  || "type";
+  if (!target || !group) return NextResponse.json({ error: "missing target/group" }, { status: 400 });
+
+  const meta = await directusFetch<any>(`/fields/${target}/${group}?fields=meta`);
+  const fields = meta?.data?.meta?.options?.fields ?? [];
+  const nested = fields.find((f: any) => (f?.field ?? f?.key) === field);
+  const choices = nested?.options?.choices ?? nested?.meta?.options?.choices ?? [];
+
+  const out = (choices as any[])
+    .map((c) => ({
+      id: String(c.value ?? c.text ?? c.label ?? ""),
+      label: String(c.text ?? c.label ?? c.value ?? ""),
+    }))
+    .filter((o) => o.id)
+    .sort((a, b) => a.label.localeCompare(b.label));
+
+  return NextResponse.json({ data: out });
+}
+

app/api/submit/project/route.ts

@@ -0,0 +1,158 @@
+// app/api/submit/project/route.ts
+import { NextRequest, NextResponse } from "next/server";
+import {
+  uploadFile,
+  createProjectRow,
+  patchProject,
+  bytesFromMB,
+} from "@/lib/directus";
+
+// Optional: tweak via env
+const MAX_MB = Number(process.env.FILE_MAX_MB || 25);
+const MAX_BYTES = bytesFromMB(MAX_MB);
+
+// ultra-simple in-memory rate limiter (per server instance)
+const BUCKET = new Map<string, { c: number; resetAt: number }>();
+const WINDOW_MS = Number(process.env.RATE_LIMIT_WINDOW || 60) * 1000;
+const MAX_REQ = Number(process.env.RATE_LIMIT_MAX || 15);
+
+function rateLimitOk(ip: string) {
+  const now = Date.now();
+  const rec = BUCKET.get(ip);
+  if (!rec || now > rec.resetAt) {
+    BUCKET.set(ip, { c: 1, resetAt: now + WINDOW_MS });
+    return true;
+  }
+  if (rec.c >= MAX_REQ) return false;
+  rec.c += 1;
+  return true;
+}
+
+export const runtime = "nodejs";
+
+export async function POST(req: NextRequest) {
+  try {
+    const ip =
+      req.headers.get("x-forwarded-for")?.split(",")[0]?.trim() ||
+      "0.0.0.0";
+    if (!rateLimitOk(ip)) {
+      return NextResponse.json({ error: "Rate limited" }, { status: 429 });
+    }
+
+    const ct = req.headers.get("content-type") || "";
+    if (!ct.includes("multipart/form-data")) {
+      return NextResponse.json(
+        { error: "Expected multipart/form-data" },
+        { status: 400 }
+      );
+    }
+
+    const form = await req.formData();
+
+    // Required read-side field names from your repo:
+    // title, body (markdown), uploader, category, tags[], p_image (file), p_files (M2M to files)
+    const title = String(form.get("title") || "").trim();
+    const uploader = String(form.get("uploader") || "").trim();
+    const category = String(form.get("category") || "").trim();
+    const body = String(form.get("body") || form.get("description") || "").trim();
+
+    if (!title || !uploader || !body) {
+      return NextResponse.json(
+        { error: "Missing required fields: title, uploader, body" },
+        { status: 400 }
+      );
+    }
+
+    // tags: allow comma-separated string or JSON array
+    let tags: string[] = [];
+    const rawTags = form.get("tags");
+    if (typeof rawTags === "string" && rawTags.trim()) {
+      try {
+        // Accept JSON array
+        const maybeArray = JSON.parse(rawTags);
+        if (Array.isArray(maybeArray)) {
+          tags = maybeArray.map((t) => String(t).trim()).filter(Boolean);
+        } else {
+          // Fallback: comma list
+          tags = rawTags
+            .split(",")
+            .map((t) => t.trim())
+            .filter(Boolean);
+        }
+      } catch {
+        // Comma-separated
+        tags = rawTags
+          .split(",")
+          .map((t) => t.trim())
+          .filter(Boolean);
+      }
+    }
+
+    // Optional license (not shown on read pages, but harmless to store)
+    const license =
+      (form.get("license") && String(form.get("license")).trim()) ||
+      undefined;
+
+    // Upload hero image (single)
+    const hero = form.get("image") as File | null; // input name="image"
+    let p_image_id: string | undefined;
+    if (hero && typeof hero === "object" && "size" in hero) {
+      if (hero.size > MAX_BYTES) {
+        return NextResponse.json(
+          { error: `Hero image exceeds ${MAX_MB} MB` },
+          { status: 400 }
+        );
+      }
+      const up = await uploadFile(hero, (hero as File).name || "project-image");
+      p_image_id = up.id;
+    }
+
+    // Upload attachments (multiple)
+    const fileBlobs = form.getAll("files").filter(Boolean) as File[];
+    const attachIds: string[] = [];
+    for (const f of fileBlobs.slice(0, 20)) {
+      if (f.size > MAX_BYTES) {
+        return NextResponse.json(
+          { error: `One of the files exceeds ${MAX_MB} MB` },
+          { status: 400 }
+        );
+      }
+      const up = await uploadFile(f, (f as File).name || "attachment");
+      attachIds.push(up.id);
+    }
+
+    // 1) Create the project row
+    const { data: created } = await createProjectRow({
+      title,
+      body,                 // you render `project.body` in detail page
+      uploader,             // exact key used by your list/detail
+      category,
+      tags,                 // stored as array
+      ...(license ? { license } : {}),
+      status: "pending",
+      submitted_via: "makearmy-app",
+      submitted_at: new Date().toISOString(),
+    });
+
+    // 2) Patch hero image + M2M attachments in one go
+    // For M2M (p_files), Directus accepts nested objects to create junction rows
+    // e.g. [{ directus_files_id: "<file-id>" }, ...]
+    const patch: Record<string, any> = {};
+    if (p_image_id) patch.p_image = p_image_id;
+    if (attachIds.length) {
+      patch.p_files = attachIds.map((id) => ({ directus_files_id: id }));
+    }
+
+    if (Object.keys(patch).length) {
+      await patchProject(created.id, patch);
+    }
+
+    return NextResponse.json({ ok: true, id: created.id });
+  } catch (err: any) {
+    return NextResponse.json(
+      { error: err?.message || "Unknown error" },
+      { status: 500 }
+    );
+  }
+}
+

app/api/submit/settings/route.ts

@@ -0,0 +1,391 @@
+// app/api/submit/settings/route.ts
+import { NextRequest, NextResponse } from "next/server";
+import {
+  bytesFromMB,
+  createSettingsItem,
+  directusFetch,
+  uploadFile,
+} from "@/lib/directus";
+
+/** ─────────────────────────────────────────────────────────────
+ * Accepts EITHER:
+ *  - application/json  (photo/screen can be data URLs: photo_data, screen_data)
+ *  - multipart/form-data with:
+ *      - "payload"  = JSON string (same shape as JSON body)
+ *      - "photo"    = result image (REQUIRED)
+ *      - "screen"   = screenshot image (optional)
+ *
+ * Targets (collections):
+ *  - settings_fiber   (+ laser_soft, repeat_all)
+ *  - settings_co2gan
+ *  - settings_co2gal
+ *  - settings_uv
+ * ──────────────────────────────────────────────────────────── */
+
+export const runtime = "nodejs";
+
+const MAX_MB = Number(process.env.FILE_MAX_MB || 25);
+const MAX_BYTES = bytesFromMB(MAX_MB);
+
+// light in-memory rate limiter
+const BUCKET = new Map<string, { c: number; resetAt: number }>();
+const WINDOW_MS = Number(process.env.RATE_LIMIT_WINDOW || 60) * 1000;
+const MAX_REQ = Number(process.env.RATE_LIMIT_MAX || 15);
+function rateLimitOk(ip: string) {
+  const now = Date.now();
+  const rec = BUCKET.get(ip);
+  if (!rec || now > rec.resetAt) {
+    BUCKET.set(ip, { c: 1, resetAt: now + WINDOW_MS });
+    return true;
+  }
+  if (rec.c >= MAX_REQ) return false;
+  rec.c += 1;
+  return true;
+}
+
+type Target = "settings_fiber" | "settings_co2gan" | "settings_co2gal" | "settings_uv";
+
+/** Map target + kind → Directus folder name */
+function folderName(target: Target, kind: "photo" | "screen") {
+  const base =
+    target === "settings_fiber"
+      ? "le_fiber_settings"
+      : target === "settings_uv"
+      ? "le_uv_settings"
+      : target === "settings_co2gal"
+      ? "le_co2gal_settings"
+      : "le_co2gan_settings";
+  return kind === "photo" ? `${base}_photos` : `${base}_screenshots`;
+}
+
+/** Lookup a folder id by name, returns null if not found */
+async function findFolderIdByName(name: string): Promise<string | null> {
+  try {
+    const res = await directusFetch<{ data: Array<{ id: string }> }>(
+      `/folders?limit=1&fields=id&filter[name][_eq]=${encodeURIComponent(name)}`
+    );
+    const id = res?.data?.[0]?.id ?? null;
+    return id || null;
+  } catch {
+    return null;
+  }
+}
+
+/** Patch a file to move it into a folder (no-op if folderId is null) */
+async function moveFileToFolder(fileId: string, folderId: string | null) {
+  if (!fileId || !folderId) return;
+  await directusFetch(`/files/${fileId}`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ folder: folderId }),
+  });
+}
+
+// Whitelists for repeaters (matches your Directus repeater schemas)
+const FILL_KEYS = new Set([
+  "name",
+  "power",
+  "speed",
+  "interval",
+  "pass",
+  "type",
+  "flood",
+  "air",
+  "frequency",
+  "pulse",
+  "angle",
+  "auto",
+  "increment",
+  "cross",
+]);
+const LINE_KEYS = new Set([
+  "name",
+  "power",
+  "speed",
+  "perf",
+  "cut",
+  "skip",
+  "pass",
+  "air",
+  "frequency",
+  "pulse",
+  "wobble",
+  "step",
+  "size",
+]);
+const RASTER_KEYS = new Set([
+  "name",
+  "power",
+  "speed",
+  "type",
+  "dither",
+  "halftone_cell",
+  "halftone_angle",
+  "inversion",
+  "interval",
+  "dot",
+  "pass",
+  "air",
+  "frequency",
+  "pulse",
+  "cross",
+]);
+
+function sanitizeNumber(n: any, fallback: number | null = null) {
+  if (n === null || n === undefined || n === "") return fallback;
+  const v = Number(n);
+  return Number.isFinite(v) ? v : fallback;
+}
+
+function sanitizeRepeaterRow(
+  row: Record<string, any>,
+  allowed: Set<string>
+): Record<string, any> {
+  const out: Record<string, any> = {};
+  for (const k of Object.keys(row || {})) {
+    if (!allowed.has(k)) continue;
+    if (
+      [
+        "power",
+        "speed",
+        "interval",
+        "pass",
+        "halftone_cell",
+        "halftone_angle",
+        "dot",
+        "frequency",
+        "pulse",
+        "angle",
+        "increment",
+        "step",
+        "size",
+      ].includes(k)
+    ) {
+      out[k] = sanitizeNumber(row[k]);
+    } else if (["auto", "cross", "wobble", "perf", "air", "flood", "inversion"].includes(k)) {
+      out[k] = !!row[k];
+    } else {
+      out[k] = row[k];
+    }
+  }
+  return out;
+}
+
+async function readJsonOrMultipart(req: NextRequest) {
+  const ct = req.headers.get("content-type") || "";
+
+  if (ct.includes("multipart/form-data")) {
+    const form = await req.formData();
+    const payloadRaw = String(form.get("payload") || "{}");
+    let body: any = {};
+    try {
+      body = JSON.parse(payloadRaw);
+    } catch {
+      throw new Error("Invalid JSON in 'payload' field");
+    }
+    const files = {
+      photo: (form.get("photo") as File) || null,
+      screen: (form.get("screen") as File) || null,
+    };
+    return { mode: "multipart" as const, body, files };
+  }
+
+  if (ct.includes("application/json")) {
+    const body = await req.json();
+    return { mode: "json" as const, body, files: { photo: null as File | null, screen: null as File | null } };
+  }
+
+  throw new Error("Unsupported content-type. Use JSON or multipart/form-data.");
+}
+
+export async function POST(req: NextRequest) {
+  const started = Date.now();
+  try {
+    const ip =
+      req.headers.get("x-forwarded-for")?.split(",")[0]?.trim() ||
+      "0.0.0.0";
+    if (!rateLimitOk(ip)) {
+      return NextResponse.json({ error: "Rate limited" }, { status: 429 });
+    }
+
+    const { mode, body, files } = await readJsonOrMultipart(req);
+
+    const target: Target = body?.target;
+    if (!["settings_fiber", "settings_co2gan", "settings_co2gal", "settings_uv"].includes(target as any)) {
+      return NextResponse.json({ error: "Invalid target" }, { status: 400 });
+    }
+
+    // Required base fields
+    const setting_title = String(body?.setting_title || body?.title || "").trim();
+    const uploader = String(body?.uploader || "").trim();
+
+    // Relations (required)
+    const mat         = body?.mat ?? null;
+    const mat_coat    = body?.mat_coat ?? null;
+    const mat_color   = body?.mat_color ?? null;
+    const mat_opacity = body?.mat_opacity ?? null;
+    const source      = body?.source ?? null;
+    const lens        = body?.lens ?? null;
+
+    // Numbers
+    const mat_thickness = sanitizeNumber(body?.mat_thickness, null);
+    const focus         = sanitizeNumber(body?.focus, null);
+
+    // Notes (optional)
+    const setting_notes = String(body?.setting_notes || body?.notes || "").trim() || "";
+
+    // Fiber-only (required)
+    const laser_soft =
+      target === "settings_fiber" ? (body?.laser_soft ?? null) : null;
+    const repeat_all =
+      target === "settings_fiber" ? sanitizeNumber(body?.repeat_all, null) : null;
+
+    // Validate requireds
+    const missing: string[] = [];
+    if (!setting_title) missing.push("setting_title");
+    if (!uploader) missing.push("uploader");
+    if (!source) missing.push("source");
+    if (!lens) missing.push("lens");
+    if (focus === null || !Number.isFinite(focus)) missing.push("focus");
+    if (!mat) missing.push("mat");
+    if (!mat_coat) missing.push("mat_coat");
+    if (!mat_color) missing.push("mat_color");
+    if (!mat_opacity) missing.push("mat_opacity");
+    if (target === "settings_fiber") {
+      if (!laser_soft) missing.push("laser_soft");
+      if (repeat_all === null || !Number.isFinite(repeat_all)) missing.push("repeat_all");
+    }
+
+    // Handle files (photo required)
+    let photo_id: string | null = null;
+    let screen_id: string | null = null;
+
+    // If multipart, use file objects. Else allow base64 in JSON: photo_data/screen_data
+    if (mode === "multipart") {
+      if (!files.photo) missing.push("photo");
+      if (files.photo) {
+        if (files.photo.size > MAX_BYTES) {
+          return NextResponse.json(
+            { error: `Photo exceeds ${MAX_MB} MB` },
+            { status: 400 }
+          );
+        }
+        const up = await uploadFile(files.photo, (files.photo as File).name || "photo");
+        photo_id = (up as any)?.id ?? null;
+
+        // after upload, move into appropriate folder
+        const folder = await findFolderIdByName(folderName(target, "photo"));
+        await moveFileToFolder(String(photo_id), folder);
+      }
+      if (files.screen) {
+        if (files.screen.size > MAX_BYTES) {
+          return NextResponse.json(
+            { error: `Screenshot exceeds ${MAX_MB} MB` },
+            { status: 400 }
+          );
+        }
+        const up = await uploadFile(files.screen, (files.screen as File).name || "screen");
+        screen_id = (up as any)?.id ?? null;
+        const folder = await findFolderIdByName(folderName(target, "screen"));
+        await moveFileToFolder(String(screen_id), folder);
+      }
+    } else {
+      // JSON mode with optional base64 strings
+      const pushBase64 = async (dataUrl: string, name: string) => {
+        const base64 = (dataUrl || "").split(",")[1] || "";
+        if (!base64) return null;
+        const raw = Buffer.from(base64, "base64");
+        if (raw.byteLength > MAX_BYTES) throw new Error(`${name} exceeds ${MAX_MB} MB`);
+        const blob = new Blob([raw]);
+        const up = await uploadFile(blob as any, name);
+        return (up as any)?.id ?? null;
+      };
+
+      if (body?.photo_data) {
+        photo_id = await pushBase64(body.photo_data, "photo");
+        const folder = await findFolderIdByName(folderName(target, "photo"));
+        await moveFileToFolder(String(photo_id), folder);
+      } else {
+        missing.push("photo");
+      }
+      if (body?.screen_data) {
+        screen_id = await pushBase64(body.screen_data, "screen");
+        const folder = await findFolderIdByName(folderName(target, "screen"));
+        await moveFileToFolder(String(screen_id), folder);
+      }
+    }
+
+    if (missing.length) {
+      return NextResponse.json(
+        { error: `Missing required: ${missing.join(", ")}` },
+        { status: 400 }
+      );
+    }
+
+    // Repeaters
+    const fillsRaw   = Array.isArray(body?.fill_settings)   ? body.fill_settings   : body?.fills   || [];
+    const linesRaw   = Array.isArray(body?.line_settings)   ? body.line_settings   : body?.lines   || [];
+    const rastersRaw = Array.isArray(body?.raster_settings) ? body.raster_settings : body?.rasters || [];
+
+    const fill_settings   = (fillsRaw as any[]).map((r) => sanitizeRepeaterRow(r, FILL_KEYS));
+    const line_settings   = (linesRaw as any[]).map((r) => sanitizeRepeaterRow(r, LINE_KEYS));
+    const raster_settings = (rastersRaw as any[]).map((r) => sanitizeRepeaterRow(r, RASTER_KEYS));
+
+    // Build record
+    const nowIso = new Date().toISOString();
+    const payload: Record<string, any> = {
+      setting_title,
+      uploader,
+      setting_notes,
+      // relations
+      mat,
+      mat_coat,
+      mat_color,
+      mat_opacity,
+      source,
+      lens,
+      // numbers
+      focus,
+      mat_thickness,
+      // files
+      photo: photo_id,
+      screen: screen_id,
+      // repeaters
+      fill_settings,
+      line_settings,
+      raster_settings,
+      // meta
+      submission_date: nowIso,
+      last_modified_date: nowIso,
+      status: "pending",
+      submitted_via: "makearmy-app",
+      submitted_at: nowIso,
+    };
+
+    if (target === "settings_fiber") {
+      payload.laser_soft = laser_soft;
+      payload.repeat_all = repeat_all;
+    }
+
+    const created = await createSettingsItem(target, payload);
+
+    // normalize PK to always provide "id" (your tables use submission_id)
+    const newId =
+      (created as any)?.submission_id ??
+      (created as any)?.data?.submission_id ??
+      (created as any)?.id ??
+      (created as any)?.data?.id ??
+      null;
+
+    return NextResponse.json({
+      ok: true,
+      id: newId,
+      submission_id: newId,
+      took_ms: Date.now() - started,
+    });
+  } catch (err: any) {
+    const msg = err?.message || "Unknown error";
+    return NextResponse.json({ error: msg }, { status: 500 });
+  }
+}
+

app/background-remover/page.tsx

@@ -0,0 +1,539 @@
+"use client";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Loader2 } from "lucide-react";
+
+// ---------- Preview + batch helpers ----------
+const PREVIEW_MAX = 2048; // max long-edge for on-screen previews
+const BATCH_SIZES = [2048, 1536, 1280, 1024, 864, 720]; // adaptive preview long-edges
+const COOLDOWN_MS = 150; // tiny cooldown between requests to ease VRAM
+
+async function makePreview(blob: Blob, maxEdge = PREVIEW_MAX): Promise<Blob> {
+  const bitmap = await createImageBitmap(blob);
+  const { width, height } = bitmap;
+  const scale = Math.min(1, maxEdge / Math.max(width, height));
+  const outW = Math.max(1, Math.round(width * scale));
+  const outH = Math.max(1, Math.round(height * scale));
+  const canvas = document.createElement("canvas");
+  canvas.width = outW;
+  canvas.height = outH;
+  const ctx = canvas.getContext("2d")!;
+  ctx.drawImage(bitmap, 0, 0, outW, outH);
+  bitmap.close();
+  const outBlob = await new Promise<Blob>((resolve) =>
+    canvas.toBlob((b) => resolve(b!), "image/png")
+  );
+  return outBlob;
+}
+
+function revoke(url: string | null | undefined) {
+  if (!url) return;
+  try {
+    URL.revokeObjectURL(url);
+  } catch {}
+}
+
+// ---------- Methods ----------
+type Canonical =
+  | "ormbg"
+  | "u2net"
+  | "basnet"
+  | "deeplab"
+  | "tracer"
+  | "u2net_human_seg"
+  | "isnet-general-use"
+  | "isnet-anime"
+  | "bria"
+  | "inspyrenet";
+
+const METHODS: { key: Canonical; label: string }[] = [
+  { key: "ormbg", label: "ORMBG" },
+  { key: "u2net", label: "U2NET" },
+  { key: "basnet", label: "BASNET" },
+  { key: "deeplab", label: "DEEPLAB" },
+  { key: "tracer", label: "TRACER-B7" },
+  { key: "u2net_human_seg", label: "U2NET (Human)" },
+  { key: "isnet-general-use", label: "ISNET (General)" },
+  { key: "isnet-anime", label: "ISNET (Anime)" },
+  { key: "bria", label: "BRIA RMBG1.4" },
+  { key: "inspyrenet", label: "INSPYRENET" },
+];
+
+const DEFAULT_CONCURRENCY = 2;
+
+type Status = "idle" | "pending" | "ok" | "error";
+
+type ResultMap = {
+  [K in Canonical]?: {
+    fullBlob: Blob;
+    previewUrl: string;
+    bytes: number;
+    ms: number;
+  };
+};
+
+export default function BackgroundRemoverPage() {
+  // ---------- State ----------
+  const [file, setFile] = useState<File | null>(null);
+  const [sourceUrl, setSourceUrl] = useState<string | null>(null);
+  const [natural, setNatural] = useState<{ w: number; h: number } | null>(null);
+
+  const [status, setStatus] = useState<Record<Canonical, Status>>(
+    () => Object.fromEntries(METHODS.map((m) => [m.key, "idle"])) as Record<Canonical, Status>
+  );
+  const [results, setResults] = useState<ResultMap>({});
+  const resultsRef = useRef<ResultMap>({});
+  useEffect(() => {
+    resultsRef.current = results;
+  }, [results]);
+
+  const [active, setActive] = useState<Canonical | null>(null);
+  const [reveal, setReveal] = useState<number>(50);
+  const [gpuSafe, setGpuSafe] = useState(true);
+
+  const frameRef = useRef<HTMLDivElement | null>(null);
+  const draggingRef = useRef(false);
+  const batchBlobCache = useRef<Map<number, Blob>>(new Map());
+
+  useEffect(() => {
+    return () => {
+      revoke(sourceUrl);
+      Object.values(resultsRef.current).forEach((v) => revoke(v?.previewUrl));
+    };
+  }, [sourceUrl]);
+
+  // ---------- Styles ----------
+  const styles = (
+    <style>{`
+      html, body { width: 100%; overflow-x: hidden; }
+      :root { font-size: 17px; }
+      .checkerboard {
+        background-size: 24px 24px;
+        background-image:
+          linear-gradient(45deg,#2a2a2a 25%,transparent 25%),
+          linear-gradient(-45deg,#2a2a2a 25%,transparent 25%),
+          linear-gradient(45deg,transparent 75%,#2a2a2a 75%),
+          linear-gradient(-45deg,transparent 75%,#2a2a2a 75%);
+        background-position: 0 0,0 12px,12px -12px,-12px 0;
+      }
+      .slider-handle { position: absolute; top: 0; bottom: 0; width: 0; left: calc(var(--reveal, 50) * 1%); }
+      .slider-handle::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; left: -1px; background: rgba(255,255,255,0.85); }
+      .slider-thumb { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 9999px; background: rgba(24,24,27,0.9); border: 1px solid rgba(255,255,255,0.85); display: grid; place-items: center; cursor: ew-resize; }
+      /* Mobile: keep the page from panning left/right while using the slider */
+      .app-frame { touch-action: pan-y; overscroll-behavior-x: contain; }
+    `}</style>
+  );
+
+  // ---------- File pick ----------
+  const onPick = useCallback(
+    async (f: File | null) => {
+      revoke(sourceUrl);
+      Object.values(resultsRef.current).forEach((v) => revoke(v?.previewUrl));
+      batchBlobCache.current.clear();
+
+      setFile(f);
+      setResults({});
+      setActive(null);
+      setReveal(50);
+      setStatus(Object.fromEntries(METHODS.map((m) => [m.key, "idle"])) as any);
+
+      if (!f) {
+        setSourceUrl(null);
+        setNatural(null);
+        return;
+      }
+
+      try {
+        const bmp = await createImageBitmap(f);
+        setNatural({ w: bmp.width, h: bmp.height });
+        bmp.close();
+      } catch {}
+
+      const previewBlob = await makePreview(f, PREVIEW_MAX);
+      const previewUrl = URL.createObjectURL(previewBlob);
+      setSourceUrl(previewUrl);
+    },
+    [sourceUrl]
+  );
+
+  // Get or create a cached resized blob for batch preview runs
+  const getBatchBlob = useCallback(
+    async (longEdge: number): Promise<Blob> => {
+      const cache = batchBlobCache.current;
+      if (cache.has(longEdge)) return cache.get(longEdge)!;
+      if (!file) throw new Error("No file selected");
+      const b = await makePreview(file, longEdge);
+      cache.set(longEdge, b);
+      return b;
+    },
+    [file]
+  );
+
+  // ---------- Batch run (adaptive) ----------
+  const startAll = useCallback(async () => {
+    if (!file) return;
+
+    setResults({});
+    setStatus((prev) => {
+      const next = { ...prev };
+      METHODS.forEach((m) => (next[m.key] = "pending"));
+      return next;
+    });
+
+    const runOne = async (key: Canonical) => {
+      // When GPU-safe is on, try progressively smaller long-edge previews.
+      const sizes = gpuSafe ? BATCH_SIZES : [Math.max(natural?.w || 0, natural?.h || 0) || 4096];
+
+      let lastErr: string | null = null;
+      const t0 = performance.now();
+
+      for (const size of sizes) {
+        try {
+          const blobToSend = gpuSafe ? await getBatchBlob(size) : file!;
+          const fd = new FormData();
+          fd.append("file", blobToSend);
+          fd.append("method", key);
+
+          const res = await fetch("/api/bgremove", { method: "POST", body: fd });
+          if (!res.ok) {
+            const txt = await res.text().catch(() => "");
+            const retryable = /out of memory|onnxruntime|cuda|allocate|500/i.test(txt);
+            if (gpuSafe && retryable) {
+              lastErr = txt || `HTTP ${res.status}`;
+              continue; // try next smaller size
+            }
+            throw new Error(txt || `HTTP ${res.status}`);
+          }
+
+          const outBlob = await res.blob();
+          const ms = performance.now() - t0;
+          const previewBlob = await makePreview(outBlob);
+          const previewUrl = URL.createObjectURL(previewBlob);
+
+          setResults((r) => ({
+            ...r,
+            [key]: { fullBlob: outBlob, previewUrl, bytes: outBlob.size, ms },
+          }));
+          setStatus((s) => ({ ...s, [key]: "ok" }));
+          await new Promise((r) => setTimeout(r, COOLDOWN_MS)); // tiny cooldown
+          return;
+        } catch (e: any) {
+          lastErr = e?.message || String(e);
+          if (!gpuSafe) break; // not in adaptive mode, bail after first failure
+        }
+      }
+
+      setStatus((s) => ({ ...s, [key]: "error" }));
+      // (Optional) console.debug("Last error for", key, lastErr);
+    };
+
+    const concurrency = gpuSafe ? 1 : DEFAULT_CONCURRENCY;
+    const queue = [...METHODS.map((m) => m.key)];
+    let inFlight: Promise<void>[] = [];
+
+    const launch = () => {
+      while (inFlight.length < concurrency && queue.length) {
+        const key = queue.shift()!;
+        const p = runOne(key).finally(() => {
+          inFlight = inFlight.filter((q) => q !== p);
+        });
+        inFlight.push(p);
+      }
+    };
+
+    launch();
+    while (inFlight.length) {
+      await Promise.race(inFlight);
+      launch();
+    }
+
+    setActive((prev) => {
+      if (prev) return prev;
+      for (const m of METHODS) if ((resultsRef.current as any)[m.key]) return m.key;
+      return METHODS[0]?.key ?? null;
+    });
+  }, [file, gpuSafe, natural, getBatchBlob]);
+
+  // ---------- Upload & slider handlers ----------
+  const onDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    const f = e.dataTransfer.files?.[0];
+    if (f) onPick(f);
+  };
+  const onSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const f = e.target.files?.[0] ?? null;
+    onPick(f);
+  };
+
+  const aspect = useMemo(() => (!natural ? 16 / 9 : natural.w / natural.h || 16 / 9), [natural]);
+
+  const updateByClientX = useCallback((clientX: number) => {
+    const el = frameRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const pct = ((clientX - rect.left) / rect.width) * 100;
+    setReveal(Math.min(100, Math.max(0, pct)));
+  }, []);
+  const onMouseDown = (e: React.MouseEvent) => {
+    draggingRef.current = true;
+    updateByClientX(e.clientX);
+  };
+  const onMouseMove = (e: React.MouseEvent) => {
+    if (!draggingRef.current) return;
+    updateByClientX(e.clientX);
+  };
+  const onMouseUp = () => (draggingRef.current = false);
+  const onTouchStart = (e: React.TouchEvent) => {
+    draggingRef.current = true;
+    updateByClientX(e.touches[0].clientX);
+  };
+  const onTouchMove = (e: React.TouchEvent) => {
+    if (!draggingRef.current) return;
+    e.preventDefault(); // keep page from horizontal panning while sliding
+    updateByClientX(e.touches[0].clientX);
+  };
+  const onTouchEnd = () => (draggingRef.current = false);
+
+  // ---------- Active result & actions ----------
+  const activeResult = active ? results[active] : undefined;
+  const canDownload = Boolean(active && activeResult?.fullBlob);
+
+  const download = () => {
+    if (!active || !activeResult) return;
+    const a = document.createElement("a");
+    const base = file?.name?.replace(/\.[^.]+$/, "") || "image";
+    const fullUrl = URL.createObjectURL(activeResult.fullBlob);
+    a.href = fullUrl;
+    setTimeout(() => revoke(fullUrl), 5000);
+    a.download = `${base}_${active}.png`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+  };
+
+  // Re-run the selected method on the ORIGINAL file for full-resolution output
+  const renderFullRes = useCallback(async () => {
+    if (!file || !active) return;
+    setStatus((s) => ({ ...s, [active]: "pending" }));
+    const t0 = performance.now();
+    try {
+      const fd = new FormData();
+      fd.append("file", file);
+      fd.append("method", active);
+      const res = await fetch("/api/bgremove", { method: "POST", body: fd });
+      if (!res.ok) throw new Error(await res.text());
+      const outBlob = await res.blob();
+      const ms = performance.now() - t0;
+      const previewBlob = await makePreview(outBlob);
+      const previewUrl = URL.createObjectURL(previewBlob);
+      const prev = resultsRef.current[active];
+      if (prev) revoke(prev.previewUrl);
+      setResults((r) => ({ ...r, [active]: { fullBlob: outBlob, previewUrl, bytes: outBlob.size, ms } }));
+      setStatus((s) => ({ ...s, [active]: "ok" }));
+    } catch {
+      setStatus((s) => ({ ...s, [active]: "error" }));
+    }
+  }, [file, active]);
+
+  const doneCount = useMemo(() => METHODS.filter((m) => status[m.key] === "ok").length, [status]);
+  const pendingCount = useMemo(() => METHODS.filter((m) => status[m.key] === "pending").length, [status]);
+
+  function StatusDot({ s }: { s: Status }) {
+    const cls =
+      s === "ok"
+        ? "bg-emerald-500"
+        : s === "pending"
+        ? "bg-amber-400 animate-pulse"
+        : s === "error"
+        ? "bg-rose-500"
+        : "bg-zinc-600";
+    return <span className={`inline-block w-2 h-2 rounded-full ${cls}`} />;
+  }
+
+  // ---------- Render ----------
+  return (
+    <div className="p-6 text-zinc-100 overflow-x-hidden">
+      {styles}
+
+      <div className="mx-auto w-full max-w-[1200px] px-4">
+        {/* Header row: title left, back button right */}
+        <div className="mb-4 flex items-center justify-between gap-3">
+          <h1 className="text-2xl font-semibold">Background Remover</h1>
+          <a
+            href="https://makearmy.io"
+            className="px-3 py-1 rounded-md border border-zinc-700 hover:bg-zinc-800/60 text-sm"
+          >
+            Back to main
+          </a>
+        </div>
+
+        {/* Source filename */}
+        <div className="text-zinc-400 mb-3">
+          <span className="text-zinc-300">Source:</span>{" "}
+          {file?.name ?? <span className="italic">— none —</span>}
+        </div>
+
+        {/* Preview frame */}
+        <div
+          ref={frameRef}
+          className="app-frame checkerboard relative w-full rounded-2xl border border-zinc-800/80 shadow-inner"
+          style={{ aspectRatio: `${aspect}`, maxWidth: "1200px", maxHeight: "80vh", marginInline: "auto" }}
+          onDragOver={(e) => e.preventDefault()}
+          onDrop={onDrop}
+          onMouseDown={onMouseDown}
+          onMouseMove={onMouseMove}
+          onMouseLeave={onMouseUp}
+          onMouseUp={onMouseUp}
+          onTouchStart={onTouchStart}
+          onTouchMove={onTouchMove}
+          onTouchEnd={onTouchEnd}
+        >
+          {/* Drop hint */}
+          {!sourceUrl && (
+            <label className="absolute inset-0 grid place-items-center cursor-pointer">
+              <input type="file" accept="image/*" className="hidden" onChange={onSelect} />
+              <div className="text-zinc-400 border-2 border-dashed border-zinc-600/70 rounded-xl px-6 py-10">
+                <div className="text-center">
+                  <div className="mb-1">Drop an image here</div>
+                  <div className="text-zinc-500">or click to select a file</div>
+                </div>
+              </div>
+            </label>
+          )}
+
+          {/* Before/After */}
+          {sourceUrl && (
+            <>
+              {/* LEFT (BEFORE) */}
+              <img
+                src={sourceUrl}
+                loading="lazy"
+                decoding="async"
+                className="absolute inset-0 w-full h-full object-contain select-none"
+                alt="Source"
+                style={{ clipPath: `inset(0 0 0 ${reveal}%)` }}
+                draggable={false}
+              />
+
+              {/* RIGHT (AFTER) */}
+              {activeResult ? (
+                <img
+                  src={activeResult.previewUrl}
+                  loading="lazy"
+                  decoding="async"
+                  className="absolute inset-0 w-full h-full object-contain select-none pointer-events-none"
+                  alt="Result"
+                  style={{ clipPath: `inset(0 ${100 - reveal}% 0 0)` }}
+                  draggable={false}
+                />
+              ) : status[active as Canonical] === "pending" ? (
+                <div className="absolute inset-0 grid place-items-center">
+                  <Loader2 className="animate-spin" />
+                </div>
+              ) : null}
+
+              {/* Divider & Thumb */}
+              <div
+                className="slider-handle"
+                style={{ "--reveal": `${Math.min(100, Math.max(0, reveal))}` } as React.CSSProperties}
+              >
+                <div className="slider-thumb">
+                  <div className="w-1.5 h-4 bg-white/80 rounded" />
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* Method options – EVEN GRID under the preview */}
+        <div className="mt-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2">
+          {METHODS.map(({ key, label }) => (
+            <button
+              key={key}
+              className={`w-full justify-center px-3 py-2 rounded-md border flex items-center gap-2 ${
+                active === key ? "border-blue-400 bg-blue-500/20" : "border-zinc-700 hover:bg-zinc-800/60"
+              }`}
+              onClick={() => setActive(key)}
+              disabled={!file}
+              title={!file ? "Select a file first" : label}
+            >
+              <StatusDot s={status[key]} />
+              <span className="truncate">{label}</span>
+            </button>
+          ))}
+        </div>
+
+        {/* Actions & global status */}
+        <div className="mt-4 flex items-center gap-3 flex-wrap">
+          <button
+            onClick={startAll}
+            className="px-3 py-1 rounded-md border border-zinc-700 hover:bg-zinc-800/60 flex items-center gap-2 order-0"
+            disabled={!file || pendingCount > 0}
+            title={!file ? "Select a file first" : pendingCount > 0 ? "Running…" : "Run all methods"}
+          >
+            {pendingCount > 0 && <Loader2 className="animate-spin w-4 h-4" />}{" "}
+            {pendingCount > 0 ? `Running… ${doneCount}/${METHODS.length}` : "Run all methods"}
+          </button>
+
+          {/* GPU-safe toggle: sits next to Run All on mobile; keeps position naturally on larger screens */}
+          <label className="flex items-center gap-2 text-sm text-zinc-300 cursor-pointer select-none order-1">
+            <input type="checkbox" checked={gpuSafe} onChange={(e) => setGpuSafe(e.target.checked)} /> GPU-safe mode
+          </label>
+
+          <div className="text-zinc-400 text-sm order-2">
+            {file ? (
+              pendingCount > 0 ? (
+                <span>Processing… {doneCount}/{METHODS.length} finished</span>
+              ) : doneCount > 0 ? (
+                <span>Done: {doneCount} methods succeeded</span>
+              ) : (
+                <span>Ready. Click Run all methods</span>
+              )
+            ) : (
+              <span>Drop an image to begin</span>
+            )}
+          </div>
+
+          {/* Right-side controls collapse under on mobile */}
+          <div className="sm:ml-auto flex items-center gap-3 w-full sm:w-auto order-3">
+            <input
+              type="range"
+              min={0}
+              max={100}
+              value={reveal}
+              onChange={(e) => setReveal(parseInt(e.target.value, 10))}
+              className="w-full sm:w-56"
+              title="Slide to compare before/after"
+            />
+
+            <button
+              onClick={renderFullRes}
+              disabled={!file || !active}
+              className={`px-3 py-1 rounded-md border ${
+                file && active
+                  ? "border-sky-600 bg-sky-600/20 hover:bg-sky-600/30"
+                  : "border-zinc-700 text-zinc-400 cursor-not-allowed"
+              }`}
+              title={!file ? "Select a file first" : !active ? "Choose a method" : "Render selected method at full resolution"}
+            >
+              Full-res render
+            </button>
+
+            <button
+              onClick={download}
+              disabled={!canDownload}
+              className={`px-3 py-1 rounded-md border ${
+                canDownload
+                  ? "border-emerald-600 bg-emerald-600/20 hover:bg-emerald-600/30"
+                  : "border-zinc-700 text-zinc-400 cursor-not-allowed"
+              }`}
+            >
+              Download
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

app/background-remover/page.tsx.bak

@@ -0,0 +1,456 @@
+"use client";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Loader2 } from "lucide-react";
+
+// ---- Preview helpers & URL lifecycle ----
+const PREVIEW_MAX = 2048; // max long-edge for on-screen previews
+
+async function makePreview(blob: Blob, maxEdge = PREVIEW_MAX): Promise<Blob> {
+  const bitmap = await createImageBitmap(blob);
+  const { width, height } = bitmap;
+  const scale = Math.min(1, maxEdge / Math.max(width, height));
+  const outW = Math.max(1, Math.round(width * scale));
+  const outH = Math.max(1, Math.round(height * scale));
+  const canvas = document.createElement("canvas");
+  canvas.width = outW;
+  canvas.height = outH;
+  const ctx = canvas.getContext("2d")!;
+  ctx.drawImage(bitmap, 0, 0, outW, outH);
+  bitmap.close();
+  return await new Promise<Blob>((resolve) => canvas.toBlob((b) => resolve(b!), "image/png"));
+}
+
+function revoke(url: string | null | undefined) {
+  if (!url) return;
+  try {
+    URL.revokeObjectURL(url);
+  } catch {}
+}
+
+type Canonical =
+  | "ormbg"
+  | "u2net"
+  | "basnet"
+  | "deeplab"
+  | "tracer"
+  | "u2net_human_seg"
+  | "isnet-general-use"
+  | "isnet-anime"
+  | "bria"
+  | "inspyrenet";
+
+const METHODS: { key: Canonical; label: string }[] = [
+  { key: "ormbg", label: "ORMBG" },
+  { key: "u2net", label: "U2NET" },
+  { key: "basnet", label: "BASNET" },
+  { key: "deeplab", label: "DEEPLAB" },
+  { key: "tracer", label: "TRACER-B7" },
+  { key: "u2net_human_seg", label: "U2NET (Human)" },
+  { key: "isnet-general-use", label: "ISNET (General)" },
+  { key: "isnet-anime", label: "ISNET (Anime)" },
+  { key: "bria", label: "BRIA RMBG1.4" },
+  { key: "inspyrenet", label: "INSPYRENET" },
+];
+
+const DEFAULT_CONCURRENCY = 2;
+
+type Status = "idle" | "pending" | "ok" | "error";
+
+type ResultMap = {
+  [K in Canonical]?: {
+    fullBlob: Blob;
+    previewUrl: string;
+    bytes: number;
+    ms: number;
+  };
+};
+
+export default function BackgroundRemoverPage() {
+  const [file, setFile] = useState<File | null>(null);
+  const [sourceUrl, setSourceUrl] = useState<string | null>(null);
+  const [natural, setNatural] = useState<{ w: number; h: number } | null>(null);
+
+  const [status, setStatus] = useState<Record<Canonical, Status>>(
+    () => Object.fromEntries(METHODS.map((m) => [m.key, "idle"])) as Record<Canonical, Status>
+  );
+  const [results, setResults] = useState<ResultMap>({});
+  const resultsRef = useRef<ResultMap>({});
+  useEffect(() => {
+    resultsRef.current = results;
+  }, [results]);
+
+  const [active, setActive] = useState<Canonical | null>(null);
+  const [reveal, setReveal] = useState<number>(50);
+
+  const frameRef = useRef<HTMLDivElement | null>(null);
+  const draggingRef = useRef(false);
+
+  const [gpuSafe, setGpuSafe] = useState(true);
+
+  useEffect(() => {
+    return () => {
+      revoke(sourceUrl);
+      Object.values(resultsRef.current).forEach((v) => revoke(v?.previewUrl));
+    };
+  }, [sourceUrl]);
+
+  const styles = (
+    <style>{`
+      html, body { width: 100%; overflow-x: hidden; }
+      :root { font-size: 17px; }
+      .checkerboard {
+        background-size: 24px 24px;
+        background-image:
+          linear-gradient(45deg,#2a2a2a 25%,transparent 25%),
+          linear-gradient(-45deg,#2a2a2a 25%,transparent 25%),
+          linear-gradient(45deg,transparent 75%,#2a2a2a 75%),
+          linear-gradient(-45deg,transparent 75%,#2a2a2a 75%);
+        background-position: 0 0,0 12px,12px -12px,-12px 0;
+      }
+      .slider-handle { position: absolute; top: 0; bottom: 0; width: 0; left: calc(var(--reveal, 50) * 1%); }
+      .slider-handle::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; left: -1px; background: rgba(255,255,255,0.85); }
+      .slider-thumb { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 9999px; background: rgba(24,24,27,0.9); border: 1px solid rgba(255,255,255,0.85); display: grid; place-items: center; cursor: ew-resize; }
+      /* Mobile: keep the page from panning left/right while using the slider */
+      .app-frame { touch-action: pan-y; overscroll-behavior-x: contain; }
+    `}</style>
+  );
+
+  const onPick = useCallback(
+    async (f: File | null) => {
+      revoke(sourceUrl);
+      Object.values(resultsRef.current).forEach((v) => revoke(v?.previewUrl));
+
+      setFile(f);
+      setResults({});
+      setActive(null);
+      setReveal(50);
+
+      if (!f) {
+        setSourceUrl(null);
+        setNatural(null);
+        setStatus(Object.fromEntries(METHODS.map((m) => [m.key, "idle"])) as any);
+        return;
+      }
+
+      try {
+        const bmp = await createImageBitmap(f);
+        setNatural({ w: bmp.width, h: bmp.height });
+        bmp.close();
+      } catch {}
+
+      const previewBlob = await makePreview(f, PREVIEW_MAX);
+      const previewUrl = URL.createObjectURL(previewBlob);
+      setSourceUrl(previewUrl);
+    },
+    [sourceUrl]
+  );
+
+  const startAll = useCallback(async () => {
+    if (!file) return;
+
+    setResults({});
+    setStatus((prev) => {
+      const next = { ...prev };
+      METHODS.forEach((m) => (next[m.key] = "pending"));
+      return next;
+    });
+
+    const runOne = async (key: Canonical) => {
+      const fd = new FormData();
+      fd.append("file", file);
+      fd.append("method", key);
+      const t0 = performance.now();
+      try {
+        const res = await fetch("/api/bgremove", { method: "POST", body: fd });
+        if (!res.ok) throw new Error(await res.text());
+        const blob = await res.blob();
+        const ms = performance.now() - t0;
+        const previewBlob = await makePreview(blob);
+        const previewUrl = URL.createObjectURL(previewBlob);
+        setResults((r) => ({ ...r, [key]: { fullBlob: blob, previewUrl, bytes: blob.size, ms } }));
+        setStatus((s) => ({ ...s, [key]: "ok" }));
+      } catch {
+        setStatus((s) => ({ ...s, [key]: "error" }));
+      }
+    };
+
+    const concurrency = gpuSafe ? 1 : DEFAULT_CONCURRENCY;
+    const queue = [...METHODS.map((m) => m.key)];
+    let inFlight: Promise<void>[] = [];
+
+    const launch = () => {
+      while (inFlight.length < concurrency && queue.length) {
+        const key = queue.shift()!;
+        const p = runOne(key).finally(() => {
+          inFlight = inFlight.filter((q) => q !== p);
+        });
+        inFlight.push(p);
+      }
+    };
+
+    launch();
+    while (inFlight.length) {
+      await Promise.race(inFlight);
+      launch();
+    }
+
+    setActive((prev) => {
+      if (prev) return prev;
+      for (const m of METHODS) if ((resultsRef.current as any)[m.key]) return m.key;
+      return METHODS[0]?.key ?? null;
+    });
+  }, [file, gpuSafe]);
+
+  const onDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    const f = e.dataTransfer.files?.[0];
+    if (f) onPick(f);
+  };
+  const onSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const f = e.target.files?.[0] ?? null;
+    onPick(f);
+  };
+
+  const aspect = useMemo(() => (!natural ? 16 / 9 : natural.w / natural.h || 16 / 9), [natural]);
+
+  // Slider drag
+  const updateByClientX = useCallback((clientX: number) => {
+    const el = frameRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const pct = ((clientX - rect.left) / rect.width) * 100;
+    setReveal(Math.min(100, Math.max(0, pct)));
+  }, []);
+  const onMouseDown = (e: React.MouseEvent) => {
+    draggingRef.current = true;
+    updateByClientX(e.clientX);
+  };
+  const onMouseMove = (e: React.MouseEvent) => {
+    if (!draggingRef.current) return;
+    updateByClientX(e.clientX);
+  };
+  const onMouseUp = () => (draggingRef.current = false);
+  const onTouchStart = (e: React.TouchEvent) => {
+    draggingRef.current = true;
+    updateByClientX(e.touches[0].clientX);
+  };
+  const onTouchMove = (e: React.TouchEvent) => {
+    if (!draggingRef.current) return;
+    // Prevent the page from horizontal panning while using the slider
+    e.preventDefault();
+    updateByClientX(e.touches[0].clientX);
+  };
+  const onTouchEnd = () => (draggingRef.current = false);
+
+  const activeResult = active ? results[active] : undefined;
+  const canDownload = Boolean(active && activeResult?.fullBlob);
+
+  const download = () => {
+    if (!active || !activeResult) return;
+    const a = document.createElement("a");
+    const base = file?.name?.replace(/\.[^.]+$/, "") || "image";
+    const fullUrl = URL.createObjectURL(activeResult.fullBlob);
+    a.href = fullUrl;
+    setTimeout(() => revoke(fullUrl), 5000);
+    a.download = `${base}_${active}.png`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+  };
+
+  const doneCount = useMemo(() => METHODS.filter((m) => status[m.key] === "ok").length, [status]);
+  const pendingCount = useMemo(() => METHODS.filter((m) => status[m.key] === "pending").length, [status]);
+
+  function StatusDot({ s }: { s: Status }) {
+    const cls =
+      s === "ok"
+        ? "bg-emerald-500"
+        : s === "pending"
+        ? "bg-amber-400 animate-pulse"
+        : s === "error"
+        ? "bg-rose-500"
+        : "bg-zinc-600";
+    return <span className={`inline-block w-2 h-2 rounded-full ${cls}`} />;
+  }
+
+  return (
+    <div className="p-6 text-zinc-100 overflow-x-hidden">
+      {styles}
+
+      {/* Header row: title left, back button right */}
+      <div className="mx-auto w-full max-w-[1200px] px-4">
+        <div className="mb-4 flex items-center justify-between gap-3">
+          <h1 className="text-2xl font-semibold">Background Remover</h1>
+          <a
+            href="https://makearmy.io"
+            className="px-3 py-1 rounded-md border border-zinc-700 hover:bg-zinc-800/60 text-sm"
+          >
+            Back to main
+          </a>
+        </div>
+
+        {/* Source filename */}
+        <div className="text-zinc-400 mb-3">
+          <span className="text-zinc-300">Source:</span>{" "}
+          {file?.name ?? <span className="italic">— none —</span>}
+        </div>
+
+        {/* Frame */}
+        <div
+          ref={frameRef}
+          className="app-frame checkerboard relative w-full rounded-2xl border border-zinc-800/80 shadow-inner"
+          style={{ aspectRatio: `${aspect}`, maxWidth: "1200px", maxHeight: "80vh", marginInline: "auto" }}
+          onDragOver={(e) => e.preventDefault()}
+          onDrop={onDrop}
+          onMouseDown={onMouseDown}
+          onMouseMove={onMouseMove}
+          onMouseLeave={onMouseUp}
+          onMouseUp={onMouseUp}
+          onTouchStart={onTouchStart}
+          onTouchMove={onTouchMove}
+          onTouchEnd={onTouchEnd}
+        >
+          {/* Drop hint */}
+          {!sourceUrl && (
+            <label className="absolute inset-0 grid place-items-center cursor-pointer">
+              <input type="file" accept="image/*" className="hidden" onChange={onSelect} />
+              <div className="text-zinc-400 border-2 border-dashed border-zinc-600/70 rounded-xl px-6 py-10">
+                <div className="text-center">
+                  <div className="mb-1">Drop an image here</div>
+                  <div className="text-zinc-500">or click to select a file</div>
+                </div>
+              </div>
+            </label>
+          )}
+
+          {/* Before/After */}
+          {sourceUrl && (
+            <>
+              {/* LEFT (BEFORE) */}
+              <img
+                src={sourceUrl}
+                loading="lazy"
+                decoding="async"
+                className="absolute inset-0 w-full h-full object-contain select-none"
+                alt="Source"
+                style={{ clipPath: `inset(0 0 0 ${reveal}%)` }}
+                draggable={false}
+              />
+
+              {/* RIGHT (AFTER) */}
+              {activeResult ? (
+                <img
+                  src={activeResult.previewUrl}
+                  loading="lazy"
+                  decoding="async"
+                  className="absolute inset-0 w-full h-full object-contain select-none pointer-events-none"
+                  alt="Result"
+                  style={{ clipPath: `inset(0 ${100 - reveal}% 0 0)` }}
+                  draggable={false}
+                />
+              ) : status[active as Canonical] === "pending" ? (
+                <div className="absolute inset-0 grid place-items-center">
+                  <Loader2 className="animate-spin" />
+                </div>
+              ) : null}
+
+              {/* Divider & Thumb */}
+              <div
+                className="slider-handle"
+                style={{ "--reveal": `${Math.min(100, Math.max(0, reveal))}` } as React.CSSProperties}
+              >
+                <div className="slider-thumb">
+                  <div className="w-1.5 h-4 bg-white/80 rounded" />
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* Method options – EVEN GRID under the preview */}
+        <div className="mt-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2">
+          {METHODS.map(({ key, label }) => (
+            <button
+              key={key}
+              className={`w-full justify-center px-3 py-2 rounded-md border flex items-center gap-2 ${
+                active === key ? "border-blue-400 bg-blue-500/20" : "border-zinc-700 hover:bg-zinc-800/60"
+              }`}
+              onClick={() => setActive(key)}
+              disabled={!file}
+              title={!file ? "Select a file first" : label}
+            >
+              <StatusDot s={status[key]} />
+              <span className="truncate">{label}</span>
+            </button>
+          ))}
+        </div>
+
+        {/* Actions & global status */}
+        <div className="mt-4 flex items-center gap-3 flex-wrap">
+          <button
+            onClick={startAll}
+            className="px-3 py-1 rounded-md border border-zinc-700 hover:bg-zinc-800/60 flex items-center gap-2 order-0"
+            disabled={!file || pendingCount > 0}
+            title={!file ? "Select a file first" : pendingCount > 0 ? "Running…" : "Run all methods"}
+          >
+            {pendingCount > 0 && <Loader2 className="animate-spin w-4 h-4" />}{" "}
+            {pendingCount > 0 ? `Running… ${doneCount}/${METHODS.length}` : "Run all methods"}
+          </button>
+
+          {/* GPU-safe toggle: sits next to Run All on mobile; keeps position naturally on larger screens */}
+          <label className="flex items-center gap-2 text-sm text-zinc-300 cursor-pointer select-none order-1">
+            <input
+              type="checkbox"
+              checked={gpuSafe}
+              onChange={(e) => setGpuSafe(e.target.checked)}
+            />{" "}
+            GPU-safe mode
+          </label>
+
+          <div className="text-zinc-400 text-sm order-2">
+            {file ? (
+              pendingCount > 0 ? (
+                <span>
+                  Processing… {doneCount}/{METHODS.length} finished
+                </span>
+              ) : doneCount > 0 ? (
+                <span>Done: {doneCount} methods succeeded</span>
+              ) : (
+                <span>Ready. Click Run all methods</span>
+              )
+            ) : (
+              <span>Drop an image to begin</span>
+            )}
+          </div>
+
+          {/* Right-side controls collapse under on mobile */}
+          <div className="sm:ml-auto flex items-center gap-3 w-full sm:w-auto order-3">
+            {/* On mobile, let the slider span full width to avoid crowding */}
+            <input
+              type="range"
+              min={0}
+              max={100}
+              value={reveal}
+              onChange={(e) => setReveal(parseInt(e.target.value, 10))}
+              className="w-full sm:w-56"
+              title="Slide to compare before/after"
+            />
+            <button
+              onClick={download}
+              disabled={!canDownload}
+              className={`px-3 py-1 rounded-md border ${
+                canDownload
+                  ? "border-emerald-600 bg-emerald-600/20 hover:bg-emerald-600/30"
+                  : "border-zinc-700 text-zinc-400 cursor-not-allowed"
+              }`}
+            >
+              Download
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

app/buying-guide/layout.tsx

@@ -0,0 +1,4 @@
+import { Suspense } from "react";
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <Suspense fallback={null}>{children}</Suspense>;
+}

app/buying-guide/page.tsx

@@ -0,0 +1,342 @@
+"use client";
+
+import { useEffect, useState, useMemo } from "react";
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+
+interface Entry {
+  id: number;
+  product_make: string;
+  product_model: string;
+  product_price?: string;
+  review_overview_text?: string;
+  bg_entry_sub_cat?: number;
+  bg_entry_cat?: number;
+  index?: {
+    id: string;
+    filename_disk?: string;
+    type?: string;
+  };
+  header?: {
+    id: string;
+    filename_disk?: string;
+    type?: string;
+  };
+}
+
+interface SubCategory {
+  id: number;
+  name: string;
+  bg_entry_cat?: number;
+}
+
+interface Category {
+  id: number;
+  name: string;
+}
+
+export default function BuyingGuidePage() {
+  const searchParams = useSearchParams();
+  const initialQuery = searchParams.get("query") || "";
+
+  const [query, setQuery] = useState(initialQuery);
+  const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
+  const [entries, setEntries] = useState<Entry[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [subcategories, setSubcategories] = useState<SubCategory[]>([]);
+  const [selectedCat, setSelectedCat] = useState("");
+  const [selectedSubCat, setSelectedSubCat] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedQuery(query), 300);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [entriesRes, catRes, subCatRes] = await Promise.all([
+          fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/bg_entries?fields=id,index.id,index.filename_disk,index.type,header.id,header.filename_disk,product_make,product_model,product_price,review_overview_text,bg_entry_cat,bg_entry_sub_cat&limit=-1&sort[]=sort`),
+          fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/bg_cat?fields=id,name&limit=-1`),
+          fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/bg_sub_cat?fields=id,name,bg_entry_cat&limit=-1`),
+        ]);
+
+        const [entriesData, catData, subCatData] = await Promise.all([
+          entriesRes.json(),
+          catRes.json(),
+          subCatRes.json(),
+        ]);
+
+        setEntries(entriesData?.data || []);
+        setCategories(catData?.data || []);
+        setSubcategories(subCatData?.data || []);
+        setLoading(false);
+      } catch (err) {
+        console.error("Error fetching data:", err);
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const normalize = (str: string) => str?.toLowerCase().replace(/[_\s]/g, "");
+
+  const filtered = useMemo(() => {
+    const q = normalize(debouncedQuery);
+    return entries.filter((entry) => {
+      const catMatch = selectedCat ? entry.bg_entry_cat === parseInt(selectedCat) : true;
+      const subCatMatch = selectedSubCat ? entry.bg_entry_sub_cat === parseInt(selectedSubCat) : true;
+      const searchMatch = q
+        ? [entry.product_make, entry.product_model, entry.review_overview_text].some((field) =>
+            normalize(field || "").includes(q)
+          )
+        : true;
+      return catMatch && subCatMatch && searchMatch;
+    });
+  }, [entries, debouncedQuery, selectedCat, selectedSubCat]);
+
+  const filteredSubcategories = useMemo(() => {
+    return selectedCat
+      ? subcategories.filter((sub) => sub.bg_entry_cat === parseInt(selectedCat))
+      : subcategories;
+  }, [subcategories, selectedCat]);
+
+  const featuredEntry = useMemo(() => {
+    if (!entries.length) return null;
+    const randomIndex = Math.floor(Math.random() * entries.length);
+    return entries[randomIndex];
+  }, [entries]);
+
+  const secondFeaturedEntry = useMemo(() => {
+    if (entries.length < 2) return null;
+    let secondIndex = Math.floor(Math.random() * entries.length);
+    while (entries[secondIndex].id === featuredEntry?.id) {
+      secondIndex = Math.floor(Math.random() * entries.length);
+    }
+    return entries[secondIndex];
+  }, [entries, featuredEntry]);
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <style jsx global>{`
+        mark {
+          background: #ffde59;
+          color: #242424;
+          padding: 0 2px;
+          border-radius: 2px;
+        }
+        .card-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+          gap: 1rem;
+        }
+        .entry-card {
+          display: flex;
+          background-color: #242424;
+          color: var(--card-foreground);
+          border: 1px solid var(--border);
+          border-radius: 0.5rem;
+          overflow: hidden;
+          height: 150px;
+        }
+        .entry-image {
+          width: 150px;
+          height: 150px;
+          object-fit: cover;
+        }
+        .entry-content {
+          padding: 0.75rem;
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+        }
+        .truncate-title {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      `}</style>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
+        <div className="card bg-card text-card-foreground p-4">
+          <h1 className="text-2xl font-bold mb-2">Buying Guide</h1>
+          <select
+            className="w-full border rounded px-3 py-2 mb-2"
+            value={selectedCat}
+            onChange={(e) => {
+              setSelectedCat(e.target.value);
+              setSelectedSubCat("");
+            }}
+          >
+            <option value="">All Categories</option>
+            {categories.map((cat) => (
+              <option key={cat.id} value={cat.id.toString()}>
+                {cat.name}
+              </option>
+            ))}
+          </select>
+          <select
+            className="w-full border rounded px-3 py-2 mb-2"
+            value={selectedSubCat}
+            onChange={(e) => setSelectedSubCat(e.target.value)}
+          >
+            <option value="">All Subcategories</option>
+            {filteredSubcategories.map((sub) => (
+              <option key={sub.id} value={sub.id.toString()}>
+                {sub.name}
+              </option>
+            ))}
+          </select>
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search products by make, model, etc..."
+            className="w-full mb-4 dark:bg-background border border-border rounded-md p-2"
+          />
+          <p className="text-sm text-muted-foreground mb-2">
+            Discover reviewed laser products and accessories.
+          </p>
+          <a
+            href="/"
+            className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm"
+          >
+            ← Back to Main Menu
+          </a>
+        </div>
+
+        {[featuredEntry, secondFeaturedEntry].map((entry, idx) => (
+          entry && (
+            <div key={idx} className="card bg-card text-card-foreground p-4">
+              <h2 className="text-md font-semibold mb-2">Featured Product</h2>
+              {entry.header?.filename_disk ? (
+                <Image
+                  src={`https://forms.lasereverything.net/assets/${entry.header.filename_disk}`}
+                  alt="Header image"
+                  width={800}
+                  height={100}
+                  className="w-full h-[100px] object-cover mb-2 rounded-md"
+                  unoptimized
+                />
+              ) : (
+                <div className="w-full h-[100px] bg-zinc-800 flex items-center justify-center text-zinc-400 text-sm rounded-md mb-2">
+                  No Header
+                </div>
+              )}
+              <Link
+                href={`/buying-guide/product/${entry.id}`}
+                className="text-accent font-semibold text-lg hover:underline"
+              >
+                {entry.product_make} {entry.product_model}
+              </Link>
+              {entry.product_price && (
+                <p className="text-sm text-white">Starting at {entry.product_price}</p>
+              )}
+              <p className="text-sm text-muted-foreground mt-1">
+                {entry.review_overview_text?.slice(0, 140)}...
+              </p>
+            </div>
+          )
+        ))}
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-md font-semibold mb-2">Popular Categories</h2>
+          <ul className="text-sm space-y-1">
+            {categories.slice(0, 5).map((cat) => (
+              <li key={cat.id}>
+                <button
+                  onClick={() => {
+                    setSelectedCat(cat.id.toString());
+                    setSelectedSubCat("");
+                  }}
+                  className="text-accent hover:underline"
+                >
+                  {cat.name}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-md font-semibold mb-2">Recently Added</h2>
+          <ul className="text-sm space-y-1">
+            {entries.slice(0, 3).map((e) => (
+              <li key={e.id}>
+                <Link href={`/buying-guide/product/${e.id}`} className="text-accent hover:underline">
+                  {e.product_make} {e.product_model}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-md font-semibold mb-2">What Is This?</h2>
+          <p className="text-sm text-muted-foreground">
+            This Buying Guide helps you compare laser-related gear with hands-on reviews, scores, and recommendations. Use the filters and search to find what you’re looking for!
+          </p>
+        </div>
+      </div>
+
+      <hr className="my-8 border-border" />
+
+      {loading ? (
+        <p className="text-muted">Loading entries...</p>
+      ) : filtered.length === 0 ? (
+        <p className="text-muted">No entries found.</p>
+      ) : (
+        <div className="card-grid">
+          {filtered.map((entry) => {
+            const filename = entry.index?.filename_disk;
+            return (
+              <div key={entry.id} className="entry-card">
+                {filename ? (
+                  <Image
+                    src={`https://forms.lasereverything.net/assets/${filename}`}
+                    alt={`${entry.product_make} ${entry.product_model}`}
+                    width={150}
+                    height={150}
+                    className="entry-image"
+                    unoptimized
+                  />
+                ) : (
+                  <div className="entry-image bg-zinc-800 flex items-center justify-center text-zinc-400">
+                    No Image
+                  </div>
+                )}
+                <div className="entry-content">
+                  <div>
+                    <p className="text-sm font-medium text-muted-foreground truncate-title">
+                      {entry.product_make}
+                    </p>
+                    <Link
+                      href={`/buying-guide/product/${entry.id}`}
+                      className="text-lg font-semibold text-accent underline truncate-title"
+                      title={entry.product_model}
+                    >
+                      {entry.product_model}
+                    </Link>
+                    {entry.product_price !== undefined && (
+                      <p className="text-sm text-foreground mt-1 font-medium">
+                        Starting at {entry.product_price}
+                      </p>
+                    )}
+                    <p className="text-xs text-muted-foreground mt-1">
+                      {entry.review_overview_text?.slice(0, 120)}...
+                    </p>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+

app/buying-guide/product/[id]/page.tsx

@@ -0,0 +1,188 @@
+// app/buying-guide/product/[id]/page.tsx
+import Link from "next/link";
+import ReactMarkdown from "react-markdown";
+
+const API_URL = process.env.NEXT_PUBLIC_API_BASE_URL;
+const ASSET_URL = process.env.NEXT_PUBLIC_ASSET_URL;
+
+async function getEntry(id: string) {
+  const res = await fetch(
+    `${API_URL}/items/bg_entries/${id}?fields=*,links.id,links.text,links.url,links.target,scores.id,scores.cat,scores.value,scores.body,header.id,date_updated`,
+    {
+      cache: "no-store",
+    }
+  );
+
+  if (!res.ok) {
+    const error = await res.text();
+    console.error(`Failed to fetch entry: ${error}`);
+    throw new Error(`Error fetching entry ${id}`);
+  }
+
+  const { data } = await res.json();
+  return data;
+}
+
+export default async function ProductDetail({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const id = (await params).id;
+  const entry = await getEntry(id);
+
+  const avgScore =
+    entry?.scores?.length > 0
+      ? (
+          entry.scores.reduce((sum: number, s: any) => sum + Number(s.value), 0) /
+          entry.scores.length
+        ).toFixed(1)
+      : "N/A";
+
+  const headerUrl = entry.header?.id
+    ? `${ASSET_URL}/assets/${entry.header.id}?cache-buster=${entry.date_updated}&key=system-large-contain`
+    : null;
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-8 space-y-6">
+      {/* Header Banner */}
+      {headerUrl && (
+        <div className="w-full h-64 relative overflow-hidden rounded-xl shadow">
+          <img
+            src={headerUrl}
+            alt="Header Image"
+            className="object-cover w-full h-full rounded-xl"
+          />
+        </div>
+      )}
+
+      {/* Title */}
+      <div className="flex justify-between items-start">
+        <div>
+          <h2 className="text-xl font-semibold text-white">{entry.product_make}</h2>
+          <h1 className="text-4xl font-bold text-yellow-500 mt-2">{entry.product_model}</h1>
+        </div>
+        <div className="text-right">
+          {entry.product_price && (
+            <p className="text-lg text-white font-medium mt-1">
+              {entry.product_price.startsWith("Starting at") ? entry.product_price : `Starting at ${entry.product_price}`}
+            </p>
+          )}
+          <Link
+            href="/buying-guide"
+            className="text-sm text-blue-500 underline mt-2 inline-block"
+          >
+            ← Back to Buying Guide
+          </Link>
+        </div>
+      </div>
+
+      {/* Links & Score Summary */}
+      {(Array.isArray(entry.links) || Array.isArray(entry.scores)) && (
+        <div className="flex flex-col md:flex-row gap-8">
+          {Array.isArray(entry.links) && entry.links.length > 0 && (
+            <div className="md:w-1/2">
+              <h3 className="text-xl font-semibold mb-2">Links</h3>
+              <ul className="list-disc ml-6 space-y-1">
+                {entry.links.map((link: any, idx: number) => (
+                  <li key={idx}>
+                    <a
+                      href={link.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-blue-700 underline"
+                    >
+                      {link.text || link.url}
+                    </a>
+                    {link.target && (
+                      <span className="text-sm text-gray-500"> ({link.target})</span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {(Array.isArray(entry.scores) && entry.scores.length > 0) && (
+            <div className="md:w-1/2">
+              <h3 className="text-xl font-semibold mb-2">Score Summary</h3>
+              <ul className="space-y-1">
+                {entry.scores.map((s: any, idx: number) => (
+                  <li key={idx} className="flex justify-between">
+                    <span>{s.cat}</span>
+                    <span className="font-semibold">{s.value}/10</span>
+                  </li>
+                ))}
+              </ul>
+              <p className="mt-2 font-bold text-right">Total: {avgScore}</p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Overview */}
+      {entry.review_overview_text && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">Overview</h3>
+          <ReactMarkdown>{entry.review_overview_text}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Intro */}
+      {entry.review_intro_text && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">{`${entry.product_make}, ${entry.product_model} Review by ${entry.author}`}</h3>
+          <ReactMarkdown>{entry.review_intro_text}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Detailed Scores */}
+      {(Array.isArray(entry.scores) && entry.scores.length > 0) && (
+        <div className="space-y-4">
+          {entry.scores.map((s: any, idx: number) => (
+            <div key={idx} className="p-4 rounded border">
+              <p className="text-xl font-semibold">
+                {s.cat} – <span className="text-blue-600">{s.value}/10</span>
+              </p>
+              <div className="text-sm text-gray-400">
+                <ReactMarkdown>{s.body}</ReactMarkdown>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Recommendation */}
+      {entry.rec_text && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">Recommendation</h3>
+          <ReactMarkdown>{entry.rec_text}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Updates */}
+      {entry.updates && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">Updates</h3>
+          <ReactMarkdown>{entry.updates}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Video */}
+      {entry.video_review_url && (
+        <div>
+          <h3 className="text-xl font-semibold mb-2">Video Review</h3>
+          <div className="aspect-w-16 aspect-h-9">
+            <iframe
+              src={entry.video_review_url.replace("watch?v=", "embed/")}
+              className="w-full h-96 rounded"
+              frameBorder="0"
+              allowFullScreen
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+

app/buying-guide/product/[id]/page.tsx.bak.1755462414

@@ -0,0 +1,188 @@
+// app/buying-guide/product/[id]/page.tsx
+import Link from "next/link";
+import ReactMarkdown from "react-markdown";
+
+const API_URL = process.env.NEXT_PUBLIC_API_BASE_URL;
+const ASSET_URL = process.env.NEXT_PUBLIC_ASSET_URL;
+
+async function getEntry(id: string) {
+  const res = await fetch(
+    `${API_URL}/items/bg_entries/${id}?fields=*,links.id,links.text,links.url,links.target,scores.id,scores.cat,scores.value,scores.body,header.id,date_updated`,
+    {
+      cache: "no-store",
+    }
+  );
+
+  if (!res.ok) {
+    const error = await res.text();
+    console.error(`Failed to fetch entry: ${error}`);
+    throw new Error(`Error fetching entry ${id}`);
+  }
+
+  const { data } = await res.json();
+  return data;
+}
+
+export default async function ProductDetail({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const id = params.id;
+  const entry = await getEntry(id);
+
+  const avgScore =
+    entry?.scores?.length > 0
+      ? (
+          entry.scores.reduce((sum: number, s: any) => sum + Number(s.value), 0) /
+          entry.scores.length
+        ).toFixed(1)
+      : "N/A";
+
+  const headerUrl = entry.header?.id
+    ? `${ASSET_URL}/assets/${entry.header.id}?cache-buster=${entry.date_updated}&key=system-large-contain`
+    : null;
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-8 space-y-6">
+      {/* Header Banner */}
+      {headerUrl && (
+        <div className="w-full h-64 relative overflow-hidden rounded-xl shadow">
+          <img
+            src={headerUrl}
+            alt="Header Image"
+            className="object-cover w-full h-full rounded-xl"
+          />
+        </div>
+      )}
+
+      {/* Title */}
+      <div className="flex justify-between items-start">
+        <div>
+          <h2 className="text-xl font-semibold text-white">{entry.product_make}</h2>
+          <h1 className="text-4xl font-bold text-yellow-500 mt-2">{entry.product_model}</h1>
+        </div>
+        <div className="text-right">
+          {entry.product_price && (
+            <p className="text-lg text-white font-medium mt-1">
+              {entry.product_price.startsWith("Starting at") ? entry.product_price : `Starting at ${entry.product_price}`}
+            </p>
+          )}
+          <Link
+            href="/buying-guide"
+            className="text-sm text-blue-500 underline mt-2 inline-block"
+          >
+            ← Back to Buying Guide
+          </Link>
+        </div>
+      </div>
+
+      {/* Links & Score Summary */}
+      {(Array.isArray(entry.links) || Array.isArray(entry.scores)) && (
+        <div className="flex flex-col md:flex-row gap-8">
+          {Array.isArray(entry.links) && entry.links.length > 0 && (
+            <div className="md:w-1/2">
+              <h3 className="text-xl font-semibold mb-2">Links</h3>
+              <ul className="list-disc ml-6 space-y-1">
+                {entry.links.map((link: any, idx: number) => (
+                  <li key={idx}>
+                    <a
+                      href={link.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-blue-700 underline"
+                    >
+                      {link.text || link.url}
+                    </a>
+                    {link.target && (
+                      <span className="text-sm text-gray-500"> ({link.target})</span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {(Array.isArray(entry.scores) && entry.scores.length > 0) && (
+            <div className="md:w-1/2">
+              <h3 className="text-xl font-semibold mb-2">Score Summary</h3>
+              <ul className="space-y-1">
+                {entry.scores.map((s: any, idx: number) => (
+                  <li key={idx} className="flex justify-between">
+                    <span>{s.cat}</span>
+                    <span className="font-semibold">{s.value}/10</span>
+                  </li>
+                ))}
+              </ul>
+              <p className="mt-2 font-bold text-right">Total: {avgScore}</p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Overview */}
+      {entry.review_overview_text && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">Overview</h3>
+          <ReactMarkdown>{entry.review_overview_text}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Intro */}
+      {entry.review_intro_text && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">{`${entry.product_make}, ${entry.product_model} Review by ${entry.author}`}</h3>
+          <ReactMarkdown>{entry.review_intro_text}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Detailed Scores */}
+      {(Array.isArray(entry.scores) && entry.scores.length > 0) && (
+        <div className="space-y-4">
+          {entry.scores.map((s: any, idx: number) => (
+            <div key={idx} className="p-4 rounded border">
+              <p className="text-xl font-semibold">
+                {s.cat} – <span className="text-blue-600">{s.value}/10</span>
+              </p>
+              <div className="text-sm text-gray-400">
+                <ReactMarkdown>{s.body}</ReactMarkdown>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Recommendation */}
+      {entry.rec_text && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">Recommendation</h3>
+          <ReactMarkdown>{entry.rec_text}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Updates */}
+      {entry.updates && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">Updates</h3>
+          <ReactMarkdown>{entry.updates}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Video */}
+      {entry.video_review_url && (
+        <div>
+          <h3 className="text-xl font-semibold mb-2">Video Review</h3>
+          <div className="aspect-w-16 aspect-h-9">
+            <iframe
+              src={entry.video_review_url.replace("watch?v=", "embed/")}
+              className="w-full h-96 rounded"
+              frameBorder="0"
+              allowFullScreen
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+

app/co2-galvo-settings/[id]/page.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+import Image from "next/image";
+import Markdown from "react-markdown";
+
+export default function CO2GalvoSettingDetailPage() {
+  const { id } = useParams();
+  const [setting, setSetting] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_co2gal/${id}?fields=submission_id,setting_title,uploader,setting_notes,photo.filename_disk,screen.filename_disk,mat.name,mat_coat.name,mat_color.name,mat_opacity.opacity,mat_thickness,source.make,source.model,lens.field_size,lens.focal_length,lens_conf.name,lens_apt.name,lens_exp.name,focus,laser_soft.name,repeat_all,fill_settings,line_settings,raster_settings`
+    )
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to load");
+        return res.json();
+      })
+      .then((data) => setSetting(data.data))
+      .catch(() => setSetting(null))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  const formatBoolean = (val) => val ? "Enabled" : val === false ? "Disabled" : "—";
+
+  const renderRepeaterCard = (title, fields, items) => {
+    const filtered = (items || []).filter(item => Object.values(item).some(v => v !== null && v !== ""));
+    if (filtered.length === 0) return null;
+    return (
+      <div className="mt-6">
+        <h2 className="text-2xl font-semibold mb-2">{title}</h2>
+        <div className="grid gap-4 grid-cols-1 md:grid-cols-2">
+          {filtered.map((item, i) => (
+            <div key={i} className="border border-border rounded-lg p-4 bg-card">
+              {fields.map(({ key, label, condition }) => {
+                const value = item[key];
+                if (condition && !condition(item)) return null;
+                return <p key={key} className="text-sm"><strong>{label}:</strong> {typeof value === "boolean" ? formatBoolean(value) : value || "—"}</p>;
+              })}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  const openSearchInNewTab = (value) => {
+    const url = new URL("/co2-galvo-settings", window.location.origin);
+    url.searchParams.set("query", value);
+    const anchor = document.createElement("a");
+    anchor.href = url.toString();
+    anchor.target = "_blank";
+    anchor.rel = "noopener noreferrer";
+    anchor.click();
+  };
+
+  if (loading) return <p className="p-6">Loading setting...</p>;
+  if (!setting) return <p className="p-6">Setting not found.</p>;
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+        <div className="card bg-card p-4 flex flex-col justify-between">
+          <div>
+            <h1 className="text-3xl font-bold mb-1">{setting.setting_title}</h1>
+            <p className="text-muted-foreground mb-4">Uploaded by: {setting.uploader || "—"}</p>
+          </div>
+          <a
+            href="/co2-galvo-settings"
+            className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm self-start"
+          >
+            ← Back to CO₂ Galvo Settings
+          </a>
+        </div>
+
+        <div className="card bg-card p-4 grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
+          <div className="flex justify-center">
+            {setting.photo?.filename_disk && (
+              <a href={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`} target="_blank" rel="noopener noreferrer">
+                <Image
+                  src={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
+                  alt="Laser preview"
+                  width={250}
+                  height={250}
+                  className="rounded object-contain max-w-[250px] max-h-[250px]"
+                />
+              </a>
+            )}
+          </div>
+          <div>
+            <h2 className="text-xl font-semibold mb-2">Material</h2>
+            <p><strong>Material:</strong> <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.mat?.name)}>{setting.mat?.name || "—"}</span></p>
+            <p><strong>Coating:</strong> <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.mat_coat?.name)}>{setting.mat_coat?.name || "—"}</span></p>
+            <p><strong>Color:</strong> {setting.mat_color?.name || "—"}</p>
+            <p><strong>Opacity:</strong> {setting.mat_opacity?.opacity || "—"}</p>
+            <p><strong>Thickness:</strong> {setting.mat_thickness ? `${setting.mat_thickness} mm` : "Not Applicable"}</p>
+          </div>
+        </div>
+
+        <div className="card bg-card p-4">
+          <h2 className="text-xl font-semibold mb-2">Setup</h2>
+          <p><strong>Software:</strong> {setting.laser_soft?.name || "—"}</p>
+          <p><strong>Repeat All (global):</strong> {setting.repeat_all ?? "—"}</p>
+          <p className="mt-4"><strong>Focus:</strong> {setting.focus ?? "—"} mm</p>
+          <small>-Values Focus Closer | +Values Focus Further</small>
+        </div>
+
+        <div className="card bg-card p-4">
+          <h2 className="text-xl font-semibold mb-2">Laser</h2>
+          <p><strong>Source Make:</strong> {setting.source?.make || "—"}</p>
+          <p><strong>Source Model:</strong> <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.source?.model)}>{setting.source?.model || "—"}</span></p>
+          <p><strong>Lens:</strong> <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.lens?.field_size)}>{setting.lens?.field_size || "—"}</span> mm | {setting.lens?.focal_length || "—"} mm</p>
+          <p><strong>Lens Config:</strong> {setting.lens_conf?.name || "—"}</p>
+          <p><strong>Aperture Type:</strong> {setting.lens_apt?.name || "—"}</p>
+          <p><strong>Expansion Type:</strong> {setting.lens_exp?.name || "—"}</p>
+        </div>
+      </div>
+
+      {setting.setting_notes && (
+        <div className="prose dark:prose-invert mt-6">
+          <h2>Notes</h2>
+          <Markdown>{setting.setting_notes}</Markdown>
+        </div>
+      )}
+
+      <hr className="my-6 border-muted" />
+
+      {renderRepeaterCard("Fill Settings", [
+        { key: "fill_name", label: "Fill Name" },
+        { key: "power", label: "Power (%)" },
+        { key: "speed", label: "Speed (mm/s)" },
+        { key: "frequency", label: "Frequency (kHz)" },
+        { key: "pulse", label: "Pulse Width (ns)" },
+        { key: "interval", label: "Interval (mm)" },
+        { key: "pass", label: "Passes" },
+        { key: "type", label: "Type" },
+        { key: "angle", label: "Angle (°)" },
+        { key: "auto", label: "Auto-Rotate" },
+        { key: "increment", label: "Increment (°)", condition: (e) => e.auto },
+        { key: "cross", label: "Crosshatch" },
+        { key: "flood", label: "Flood Fill" },
+        { key: "air", label: "Air Assist" },
+      ], setting.fill_settings)}
+
+      {renderRepeaterCard("Line Settings", [
+        { key: "name", label: "Line Name" },
+        { key: "power", label: "Power (%)" },
+        { key: "speed", label: "Speed (mm/s)" },
+        { key: "frequency", label: "Frequency (kHz)" },
+        { key: "pulse", label: "Pulse Width (ns)" },
+        { key: "perf", label: "Perforation Mode" },
+        { key: "cut", label: "Cut (mm)", condition: (e) => e.perf },
+        { key: "skip", label: "Skip (mm)", condition: (e) => e.perf },
+        { key: "wobble", label: "Wobble Mode" },
+        { key: "step", label: "Step (mm)", condition: (e) => e.wobble },
+        { key: "size", label: "Size (mm)", condition: (e) => e.wobble },
+        { key: "pass", label: "Passes" },
+        { key: "air", label: "Air Assist" },
+      ], setting.line_settings)}
+
+      {renderRepeaterCard("Raster Settings", [
+        { key: "name", label: "Raster Name" },
+        { key: "power", label: "Power (%)" },
+        { key: "speed", label: "Speed (mm/s)" },
+        { key: "frequency", label: "Frequency (kHz)" },
+        { key: "pulse", label: "Pulse Width (ns)" },
+        { key: "type", label: "Type" },
+        { key: "dither", label: "Dither" },
+        { key: "halftone_cell", label: "Cell Size (mm)", condition: (e) => e.dither === "halftone" },
+        { key: "halftone_angle", label: "Halftone Angle", condition: (e) => e.dither === "halftone" },
+        { key: "inversion", label: "Image Inverted" },
+        { key: "interval", label: "Interval (mm)" },
+        { key: "dot", label: "Dot-width Adjustment (mm)" },
+        { key: "pass", label: "Passes" },
+        { key: "cross", label: "Crosshatch" },
+        { key: "air", label: "Air Assist" },
+      ], setting.raster_settings)}
+    </div>
+  );
+}
+

app/co2-galvo-settings/layout.tsx

@@ -0,0 +1,5 @@
+import { Suspense } from "react";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <Suspense fallback={null}>{children}</Suspense>;
+}

app/co2-galvo-settings/page.tsx

@@ -0,0 +1,231 @@
+"use client";
+
+import { useEffect, useState, useMemo } from "react";
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+
+export default function CO2GalvoSettingsPage() {
+  const searchParams = useSearchParams();
+  const initialQuery = searchParams.get("query") || "";
+
+  const [query, setQuery] = useState(initialQuery);
+  const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
+  const [settings, setSettings] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedQuery(query), 300);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  useEffect(() => {
+    fetch(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_co2gal?fields=submission_id,setting_title,uploader,photo.id,photo.title,mat.name,mat_coat.name,source.model,lens.field_size&limit=-1`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        setSettings(data.data || []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  const highlight = (text) => {
+    if (!debouncedQuery) return text;
+    const regex = new RegExp(`(${debouncedQuery})`, "gi");
+    return text?.replace(regex, "<mark>$1</mark>");
+  };
+
+  const filtered = useMemo(() => {
+    const q = debouncedQuery.toLowerCase();
+    return settings.filter((entry) => {
+      const fieldsToSearch = [
+        entry.setting_title,
+        entry.uploader,
+        entry.mat?.name,
+        entry.mat_coat?.name,
+        entry.source?.model,
+        entry.lens?.field_size,
+      ];
+      return fieldsToSearch.filter(Boolean).some((field) =>
+        String(field).toLowerCase().includes(q)
+      );
+    });
+  }, [settings, debouncedQuery]);
+
+  const totalSettings = settings.length;
+  const uniqueMaterials = new Set(settings.map((s) => s.mat?.name).filter(Boolean)).size;
+
+  const commonLens = settings.reduce((acc, cur) => {
+    const lens = cur.lens?.field_size;
+    if (!lens) return acc;
+    acc[lens] = (acc[lens] || 0) + 1;
+    return acc;
+  }, {});
+  const mostCommonLens = Object.entries(commonLens)
+    .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
+
+  const sourceModels = settings.reduce((acc, cur) => {
+    const model = cur.source?.model;
+    if (!model) return acc;
+    acc[model] = (acc[model] || 0) + 1;
+    return acc;
+  }, {});
+  const mostCommonSource = Object.entries(sourceModels)
+    .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
+
+  const recentSettings = [...settings]
+    .sort((a, b) => b.submission_id - a.submission_id)
+    .slice(0, 5);
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <style jsx global>{`
+        mark {
+          background: #ffde59;
+          color: #242424;
+          padding: 0 2px;
+          border-radius: 2px;
+        }
+      `}</style>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
+        <div className="card bg-card text-card-foreground p-4">
+          <h1 className="text-2xl font-bold mb-2">CO₂ Galvo Settings</h1>
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search settings by material, uploader, etc..."
+            className="w-full mb-4 dark:bg-background border border-border rounded-md p-2"
+          />
+          <p className="text-sm text-muted-foreground mb-2">
+            View and explore detailed CO₂ galvo settings with context.
+          </p>
+          <a
+            href="/"
+            className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm"
+          >
+            ← Back to Main Menu
+          </a>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">How to Use</h2>
+          <p className="text-sm">
+            Browse real-world CO₂ galvo settings from the community. Use the search to narrow results. Click any setting to view its full configuration, notes, and photos. Click any linked term to find related settings.
+          </p>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Stats Summary</h2>
+          <ul className="text-sm space-y-1">
+            <li>Total Settings: {totalSettings}</li>
+            <li>Unique Materials: {uniqueMaterials}</li>
+            <li>Most Common Lens: {mostCommonLens}</li>
+            <li>Most Used Source: {mostCommonSource}</li>
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Recently Added</h2>
+          <ul className="text-sm space-y-1">
+            {recentSettings.map((s) => (
+              <li key={s.submission_id}>
+                <Link href={`/co2-galvo-settings/${s.submission_id}`} className="underline text-accent">
+                  {s.setting_title || "Untitled"}
+                </Link>{" "}
+                by {s.uploader || "—"}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Resources</h2>
+          <ul className="text-sm space-y-1">
+            <li>
+              <a href="/materials" target="_blank" rel="noopener noreferrer" className="underline text-accent">Material Safety Guide</a>
+            </li>
+            <li>
+              <a href="https://lasereverything.net/scripts/laspwrconvert.php" target="_blank" rel="noopener noreferrer" className="underline text-accent">Laser Parameter Calculator</a>
+            </li>
+            <li>
+              <a href="https://jptoe.com/downloads" target="_blank" rel="noopener noreferrer" className="underline text-accent">JPT Datasheets</a>
+            </li>
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4 flex flex-col justify-between">
+          <div>
+            <h2 className="text-md font-semibold mb-2">Submit a Setting</h2>
+            <p className="text-sm text-muted-foreground mb-2">
+              Have a reliable galvo setting to share? Contribute to the community database.
+            </p>
+          </div>
+          <Link
+  href="/submit/settings?target=settings_co2gal"
+  className="bg-accent text-background text-sm px-4 py-2 rounded hover:opacity-90 transition"
+>
+  Submit a Setting
+</Link>
+        </div>
+      </div>
+
+      {loading ? (
+        <p className="text-muted">Loading settings...</p>
+      ) : filtered.length === 0 ? (
+        <p className="text-muted">No CO₂ galvo settings found.</p>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr>
+                <th className="px-2 py-2 text-left">Photo</th>
+                <th className="px-2 py-2 text-left">Title</th>
+                <th className="px-2 py-2 text-left">Uploader</th>
+                <th className="px-2 py-2 text-left">Material</th>
+                <th className="px-2 py-2 text-left">Coating</th>
+                <th className="px-2 py-2 text-left">Source</th>
+                <th className="px-2 py-2 text-left">Lens</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((setting) => (
+                <tr key={setting.submission_id} className="border-t border-border">
+                  <td className="px-2 py-2">
+                    {setting.photo?.id ? (
+                      <Image
+                        src={`https://forms.lasereverything.net/assets/${setting.photo.id}`}
+                        alt={setting.photo.title || "laser preview"}
+                        width={64}
+                        height={64}
+                        className="rounded-md"
+                      />
+                    ) : (
+                      "—"
+                    )}
+                  </td>
+                  <td className="px-2 py-2 whitespace-nowrap">
+                    <Link
+                      href={`/co2-galvo-settings/${setting.submission_id}`}
+                      className="text-accent underline"
+                      dangerouslySetInnerHTML={{ __html: highlight(setting.setting_title || "—") }}
+                    />
+                  </td>
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.uploader || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.mat?.name || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.mat_coat?.name || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.source?.model || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.lens?.field_size || "—") }} />
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+

app/co2-galvo-settings/page.tsx.bak

@@ -0,0 +1,228 @@
+"use client";
+
+import { useEffect, useState, useMemo } from "react";
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+
+export default function CO2GalvoSettingsPage() {
+  const searchParams = useSearchParams();
+  const initialQuery = searchParams.get("query") || "";
+
+  const [query, setQuery] = useState(initialQuery);
+  const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
+  const [settings, setSettings] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedQuery(query), 300);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  useEffect(() => {
+    fetch(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_co2gal?fields=submission_id,setting_title,uploader,photo.filename_disk,photo.title,mat.name,mat_coat.name,source.model,lens.field_size&limit=-1`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        setSettings(data.data || []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  const highlight = (text) => {
+    if (!debouncedQuery) return text;
+    const regex = new RegExp(`(${debouncedQuery})`, "gi");
+    return text?.replace(regex, "<mark>$1</mark>");
+  };
+
+  const filtered = useMemo(() => {
+    const q = debouncedQuery.toLowerCase();
+    return settings.filter((entry) => {
+      const fieldsToSearch = [
+        entry.setting_title,
+        entry.uploader,
+        entry.mat?.name,
+        entry.mat_coat?.name,
+        entry.source?.model,
+        entry.lens?.field_size,
+      ];
+      return fieldsToSearch.filter(Boolean).some((field) =>
+        String(field).toLowerCase().includes(q)
+      );
+    });
+  }, [settings, debouncedQuery]);
+
+  const totalSettings = settings.length;
+  const uniqueMaterials = new Set(settings.map((s) => s.mat?.name).filter(Boolean)).size;
+
+  const commonLens = settings.reduce((acc, cur) => {
+    const lens = cur.lens?.field_size;
+    if (!lens) return acc;
+    acc[lens] = (acc[lens] || 0) + 1;
+    return acc;
+  }, {});
+  const mostCommonLens = Object.entries(commonLens)
+    .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
+
+  const sourceModels = settings.reduce((acc, cur) => {
+    const model = cur.source?.model;
+    if (!model) return acc;
+    acc[model] = (acc[model] || 0) + 1;
+    return acc;
+  }, {});
+  const mostCommonSource = Object.entries(sourceModels)
+    .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
+
+  const recentSettings = [...settings]
+    .sort((a, b) => b.submission_id - a.submission_id)
+    .slice(0, 5);
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <style jsx global>{`
+        mark {
+          background: #ffde59;
+          color: #242424;
+          padding: 0 2px;
+          border-radius: 2px;
+        }
+      `}</style>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
+        <div className="card bg-card text-card-foreground p-4">
+          <h1 className="text-2xl font-bold mb-2">CO₂ Galvo Settings</h1>
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search settings by material, uploader, etc..."
+            className="w-full mb-4 dark:bg-background border border-border rounded-md p-2"
+          />
+          <p className="text-sm text-muted-foreground mb-2">
+            View and explore detailed CO₂ galvo settings with context.
+          </p>
+          <a
+            href="/"
+            className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm"
+          >
+            ← Back to Main Menu
+          </a>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">How to Use</h2>
+          <p className="text-sm">
+            Browse real-world CO₂ galvo settings from the community. Use the search to narrow results. Click any setting to view its full configuration, notes, and photos. Click any linked term to find related settings.
+          </p>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Stats Summary</h2>
+          <ul className="text-sm space-y-1">
+            <li>Total Settings: {totalSettings}</li>
+            <li>Unique Materials: {uniqueMaterials}</li>
+            <li>Most Common Lens: {mostCommonLens}</li>
+            <li>Most Used Source: {mostCommonSource}</li>
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Recently Added</h2>
+          <ul className="text-sm space-y-1">
+            {recentSettings.map((s) => (
+              <li key={s.submission_id}>
+                <Link href={`/co2-galvo-settings/${s.submission_id}`} className="underline text-accent">
+                  {s.setting_title || "Untitled"}
+                </Link>{" "}
+                by {s.uploader || "—"}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Resources</h2>
+          <ul className="text-sm space-y-1">
+            <li>
+              <a href="/materials" target="_blank" rel="noopener noreferrer" className="underline text-accent">Material Safety Guide</a>
+            </li>
+            <li>
+              <a href="https://lasereverything.net/scripts/laspwrconvert.php" target="_blank" rel="noopener noreferrer" className="underline text-accent">Laser Parameter Calculator</a>
+            </li>
+            <li>
+              <a href="https://jptoe.com/downloads" target="_blank" rel="noopener noreferrer" className="underline text-accent">JPT Datasheets</a>
+            </li>
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4 flex flex-col justify-between">
+          <div>
+            <h2 className="text-md font-semibold mb-2">Submit a Setting</h2>
+            <p className="text-sm text-muted-foreground mb-2">
+              Have a reliable galvo setting to share? Contribute to the community database.
+            </p>
+          </div>
+          <button disabled className="bg-muted text-foreground text-sm px-4 py-2 rounded opacity-50 cursor-not-allowed">
+            Coming Soon
+          </button>
+        </div>
+      </div>
+
+      {loading ? (
+        <p className="text-muted">Loading settings...</p>
+      ) : filtered.length === 0 ? (
+        <p className="text-muted">No CO₂ galvo settings found.</p>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr>
+                <th className="px-2 py-2 text-left">Photo</th>
+                <th className="px-2 py-2 text-left">Title</th>
+                <th className="px-2 py-2 text-left">Uploader</th>
+                <th className="px-2 py-2 text-left">Material</th>
+                <th className="px-2 py-2 text-left">Coating</th>
+                <th className="px-2 py-2 text-left">Source</th>
+                <th className="px-2 py-2 text-left">Lens</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((setting) => (
+                <tr key={setting.submission_id} className="border-t border-border">
+                  <td className="px-2 py-2">
+                    {setting.photo?.filename_disk ? (
+                      <Image
+                        src={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
+                        alt={setting.photo.title || "laser preview"}
+                        width={64}
+                        height={64}
+                        className="rounded-md"
+                      />
+                    ) : (
+                      "—"
+                    )}
+                  </td>
+                  <td className="px-2 py-2 whitespace-nowrap">
+                    <Link
+                      href={`/co2-galvo-settings/${setting.submission_id}`}
+                      className="text-accent underline"
+                      dangerouslySetInnerHTML={{ __html: highlight(setting.setting_title || "—") }}
+                    />
+                  </td>
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.uploader || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.mat?.name || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.mat_coat?.name || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.source?.model || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.lens?.field_size || "—") }} />
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+

app/co2-gantry-settings/[id]/page.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+import Image from "next/image";
+import Markdown from "react-markdown";
+
+export default function CO2GantrySettingDetailPage() {
+  const { id } = useParams();
+  const [setting, setSetting] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!id) return;
+
+    fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_co2gan/${id}?fields=submission_id,setting_title,uploader,setting_notes,photo.filename_disk,screen.filename_disk,mat.name,mat_coat.name,mat_color.name,mat_opacity.opacity,mat_thickness,source.make,source.model,laser_soft.name,lens.name,lens_conf.name,focus,repeat_all,fill_settings,line_settings,raster_settings`)
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to load");
+        return res.json();
+      })
+      .then((data) => {
+        setSetting(data.data);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, [id]);
+
+  const openSearchInNewTab = (value) => {
+    if (!value || typeof window === "undefined") return;
+    const url = new URL("/co2-gantry-settings", window.location.origin);
+    url.searchParams.set("query", value);
+    window.open(url.toString(), "_blank", "noopener,noreferrer");
+  };
+
+  const renderRepeaterCard = (title, fields, data) => {
+    if (!data || !Array.isArray(data) || data.length === 0) return null;
+    return (
+      <div className="card bg-card p-4">
+        <h2 className="text-xl font-semibold mb-2">{title}</h2>
+        {data.map((item, i) => (
+          <div key={i} className="mb-4 border-b border-muted pb-2">
+            {fields.map((field) =>
+              field.condition === undefined || field.condition(item) ? (
+                <p key={field.key}>
+                  <strong>{field.label}:</strong>{" "}
+                  {item[field.key] !== undefined && item[field.key] !== null ? item[field.key].toString() : "—"}
+                </p>
+              ) : null
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  if (loading) return <div className="p-6 max-w-7xl mx-auto">Loading…</div>;
+  if (!setting) return <div className="p-6 max-w-7xl mx-auto">Setting not found.</div>;
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+        <div className="card bg-card p-4 flex flex-col justify-between">
+          <div>
+            <h1 className="text-3xl font-bold mb-1">{setting.setting_title}</h1>
+            <p className="text-muted-foreground mb-4">Uploaded by: {setting.uploader || "—"}</p>
+          </div>
+          <a
+            href="/co2-gantry-settings"
+            className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm self-start"
+          >
+            ← Back to CO₂ Gantry Settings
+          </a>
+        </div>
+
+        <div className="card bg-card p-4 grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
+          <div className="flex justify-center">
+            {setting.photo?.filename_disk && (
+              <Image
+                src={`${process.env.NEXT_PUBLIC_API_BASE_URL}/assets/${setting.photo.filename_disk}`}
+                alt="Preview"
+                width={300}
+                height={300}
+                className="rounded-md"
+              />
+            )}
+          </div>
+          <div>
+            <p>
+              <strong>Material:</strong>{" "}
+              <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.mat?.name)}>
+                {setting.mat?.name || "—"}
+              </span>
+            </p>
+            <p>
+              <strong>Coating:</strong>{" "}
+              <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.mat_coat?.name)}>
+                {setting.mat_coat?.name || "—"}
+              </span>
+            </p>
+            <p><strong>Color:</strong> {setting.mat_color?.name || "—"}</p>
+            <p><strong>Opacity:</strong> {setting.mat_opacity?.opacity || "—"}</p>
+            <p><strong>Thickness:</strong> {setting.mat_thickness ? `${setting.mat_thickness} mm` : "—"}</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="card bg-card p-4">
+          <h2 className="text-xl font-semibold mb-2">Laser</h2>
+          <p><strong>Source Make:</strong> {setting.source?.make || "—"}</p>
+          <p>
+            <strong>Source Model:</strong>{" "}
+            <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.source?.model)}>
+              {setting.source?.model || "—"}
+            </span>
+          </p>
+          <p>
+            <strong>Lens:</strong>{" "}
+            <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.lens?.name)}>
+              {setting.lens?.name || "—"}
+            </span>
+          </p>
+          <p><strong>Lens Config:</strong> {setting.lens_conf?.name || "—"}</p>
+        </div>
+
+        <div className="card bg-card p-4">
+          <h2 className="text-xl font-semibold mb-2">Focus</h2>
+          <p><strong>Focus:</strong> {setting.focus || "—"}</p>
+        </div>
+      </div>
+
+      <div className="card bg-card p-4 mt-6">
+        <h2 className="text-xl font-semibold mb-2">Notes</h2>
+        <div className="prose dark:prose-invert">
+          <Markdown>{setting.setting_notes || "—"}</Markdown>
+        </div>
+      </div>
+
+      <hr className="my-6 border-muted" />
+
+      {renderRepeaterCard("Fill Settings", [
+        { key: "name", label: "Fill Name" },
+        { key: "power", label: "Power (%)" },
+        { key: "speed", label: "Speed (mm/s)" },
+        { key: "interval", label: "Interval (mm)" },
+        { key: "pass", label: "Passes" },
+        { key: "type", label: "Type" },
+        { key: "flood", label: "Flood Fill" },
+        { key: "air", label: "Air Assist" },
+      ], setting.fill_settings)}
+
+      {renderRepeaterCard("Line Settings", [
+        { key: "name", label: "Line Name" },
+        { key: "power", label: "Power (%)" },
+        { key: "speed", label: "Speed (mm/s)" },
+        { key: "perf", label: "Perforation" },
+        { key: "cut", label: "Cut Power Override" },
+        { key: "skip", label: "Skip Pass" },
+        { key: "pass", label: "Passes" },
+        { key: "air", label: "Air Assist" },
+      ], setting.line_settings)}
+
+      {renderRepeaterCard("Raster Settings", [
+        { key: "name", label: "Raster Name" },
+        { key: "power", label: "Power (%)" },
+        { key: "speed", label: "Speed (mm/s)" },
+        { key: "type", label: "Type" },
+        { key: "dither", label: "Dither" },
+        { key: "halftone_cell", label: "Halftone Cell" },
+        { key: "halftone_angle", label: "Angle" },
+        { key: "inversion", label: "Inversion" },
+        { key: "interval", label: "Interval" },
+        { key: "dot", label: "Dot Size" },
+        { key: "pass", label: "Passes" },
+        { key: "air", label: "Air Assist" },
+      ], setting.raster_settings)}
+    </div>
+  );
+}
+

app/co2-gantry-settings/layout.tsx

@@ -0,0 +1,4 @@
+import { Suspense } from "react";
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <Suspense fallback={null}>{children}</Suspense>;
+}

app/co2-gantry-settings/page.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import { useEffect, useState, useMemo } from "react";
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+
+export default function CO2GantrySettingsPage() {
+  const searchParams = useSearchParams();
+  const initialQuery = searchParams.get("query") || "";
+
+  const [query, setQuery] = useState(initialQuery);
+  const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
+  const [settings, setSettings] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedQuery(query), 300);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  useEffect(() => {
+    fetch(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_co2gan?fields=submission_id,setting_title,uploader,photo.id,photo.title,mat.name,mat_coat.name,source.model,lens.name&limit=-1`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        setSettings(data.data || []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  const highlight = (text) => {
+    if (!debouncedQuery) return text;
+    const regex = new RegExp(`(${debouncedQuery})`, "gi");
+    return text?.replace(regex, '<mark>$1</mark>');
+  };
+
+  const filtered = useMemo(() => {
+    const q = debouncedQuery.toLowerCase();
+    return settings.filter((entry) => {
+      const fieldsToSearch = [
+        entry.setting_title,
+        entry.uploader,
+        entry.mat?.name,
+        entry.mat_coat?.name,
+        entry.source?.model,
+        entry.lens?.name,
+      ];
+      return fieldsToSearch.filter(Boolean).some((field) =>
+        field.toLowerCase().includes(q)
+      );
+    });
+  }, [settings, debouncedQuery]);
+
+  const totalSettings = settings.length;
+  const uniqueMaterials = new Set(settings.map(s => s.mat?.name).filter(Boolean)).size;
+
+  const commonLens = settings.reduce((acc, cur) => {
+    const lens = cur.lens?.name;
+    if (!lens) return acc;
+    acc[lens] = (acc[lens] || 0) + 1;
+    return acc;
+  }, {});
+  const mostCommonLens = Object.entries(commonLens)
+    .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
+
+  const sourceModels = settings.reduce((acc, cur) => {
+    const model = cur.source?.model;
+    if (!model) return acc;
+    acc[model] = (acc[model] || 0) + 1;
+    return acc;
+  }, {});
+  const mostCommonSource = Object.entries(sourceModels)
+    .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
+
+  const recentSettings = [...settings]
+    .sort((a, b) => b.submission_id - a.submission_id)
+    .slice(0, 5);
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <style jsx global>{`
+        mark {
+          background: #ffde59;
+          color: #242424;
+          padding: 0 2px;
+          border-radius: 2px;
+        }
+      `}</style>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
+        <div className="card bg-card text-card-foreground p-4">
+          <h1 className="text-2xl font-bold mb-2">CO₂ Gantry Settings</h1>
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search settings by material, uploader, etc..."
+            className="w-full mb-4 dark:bg-background border border-border rounded-md p-2"
+          />
+          <p className="text-sm text-muted-foreground mb-2">
+            Explore curated CO₂ gantry settings. Search by material, uploader, or source.
+          </p>
+          <a
+            href="/"
+            className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm"
+          >
+            ← Back to Main Menu
+          </a>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">How to Use</h2>
+          <p className="text-sm">
+            Browse real-world CO₂ gantry settings. Search or filter results, and click any setting for full configuration and notes.
+          </p>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Stats Summary</h2>
+          <ul className="text-sm space-y-1">
+            <li>Total Settings: {totalSettings}</li>
+            <li>Unique Materials: {uniqueMaterials}</li>
+            <li>Most Common Lens: {mostCommonLens}</li>
+            <li>Most Used Source: {mostCommonSource}</li>
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Recently Added</h2>
+          <ul className="text-sm space-y-1">
+            {recentSettings.map((s) => (
+              <li key={s.submission_id}>
+                <Link href={`/co2gantry-settings/${s.submission_id}`} className="underline text-accent">
+                  {s.setting_title || "Untitled"}
+                </Link> by {s.uploader || "—"}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Resources</h2>
+          <ul className="text-sm space-y-1">
+            <li>
+              <a href="/materials" target="_blank" rel="noopener noreferrer" className="underline text-accent">Material Safety Guide</a>
+            </li>
+            <li>
+              <a href="https://lasereverything.net/scripts/laspwrconvert.php" target="_blank" rel="noopener noreferrer" className="underline text-accent">Laser Parameter Calculator</a>
+            </li>
+            <li>
+              <a href="https://jptoe.com/downloads" target="_blank" rel="noopener noreferrer" className="underline text-accent">JPT Datasheets</a>
+            </li>
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4 flex flex-col justify-between">
+          <div>
+            <h2 className="text-md font-semibold mb-2">Submit a Setting</h2>
+            <p className="text-sm text-muted-foreground mb-2">
+              Got a dialed-in gantry setting? Contribute it to the database.
+            </p>
+          </div>
+          <Link
+  href="/submit/settings?target=settings_co2gan"
+  className="bg-accent text-background text-sm px-4 py-2 rounded hover:opacity-90 transition"
+>
+  Submit a Setting
+</Link>
+        </div>
+      </div>
+
+      {loading ? (
+        <p className="text-muted">Loading settings...</p>
+      ) : filtered.length === 0 ? (
+        <p className="text-muted">No gantry settings found.</p>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr>
+                <th className="px-2 py-2 text-left">Photo</th>
+                <th className="px-2 py-2 text-left">Title</th>
+                <th className="px-2 py-2 text-left">Uploader</th>
+                <th className="px-2 py-2 text-left">Material</th>
+                <th className="px-2 py-2 text-left">Coating</th>
+                <th className="px-2 py-2 text-left">Source</th>
+                <th className="px-2 py-2 text-left">Lens</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((setting) => (
+                <tr key={setting.submission_id} className="border-t border-border">
+                  <td className="px-2 py-2">
+                    {setting.photo?.id ? (
+                      <Image
+                        src={`https://forms.lasereverything.net/assets/${setting.photo.id}`}
+                        alt={setting.photo.title || "laser preview"}
+                        width={64}
+                        height={64}
+                        className="rounded-md"
+                      />
+                    ) : (
+                      "—"
+                    )}
+                  </td>
+                  <td className="px-2 py-2 whitespace-nowrap">
+                    <Link
+                      href={`/co2gantry-settings/${setting.submission_id}`}
+                      className="text-accent underline"
+                      dangerouslySetInnerHTML={{ __html: highlight(setting.setting_title || "—") }}
+                    />
+                  </td>
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.uploader || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.mat?.name || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.mat_coat?.name || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.source?.model || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.lens?.name || "—") }} />
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+

app/co2-gantry-settings/page.tsx.bak

@@ -0,0 +1,227 @@
+"use client";
+
+import { useEffect, useState, useMemo } from "react";
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+
+export default function CO2GantrySettingsPage() {
+  const searchParams = useSearchParams();
+  const initialQuery = searchParams.get("query") || "";
+
+  const [query, setQuery] = useState(initialQuery);
+  const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
+  const [settings, setSettings] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedQuery(query), 300);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  useEffect(() => {
+    fetch(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_co2gan?fields=submission_id,setting_title,uploader,photo.filename_disk,photo.title,mat.name,mat_coat.name,source.model,lens.name&limit=-1`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        setSettings(data.data || []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  const highlight = (text) => {
+    if (!debouncedQuery) return text;
+    const regex = new RegExp(`(${debouncedQuery})`, "gi");
+    return text?.replace(regex, '<mark>$1</mark>');
+  };
+
+  const filtered = useMemo(() => {
+    const q = debouncedQuery.toLowerCase();
+    return settings.filter((entry) => {
+      const fieldsToSearch = [
+        entry.setting_title,
+        entry.uploader,
+        entry.mat?.name,
+        entry.mat_coat?.name,
+        entry.source?.model,
+        entry.lens?.name,
+      ];
+      return fieldsToSearch.filter(Boolean).some((field) =>
+        field.toLowerCase().includes(q)
+      );
+    });
+  }, [settings, debouncedQuery]);
+
+  const totalSettings = settings.length;
+  const uniqueMaterials = new Set(settings.map(s => s.mat?.name).filter(Boolean)).size;
+
+  const commonLens = settings.reduce((acc, cur) => {
+    const lens = cur.lens?.name;
+    if (!lens) return acc;
+    acc[lens] = (acc[lens] || 0) + 1;
+    return acc;
+  }, {});
+  const mostCommonLens = Object.entries(commonLens)
+    .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
+
+  const sourceModels = settings.reduce((acc, cur) => {
+    const model = cur.source?.model;
+    if (!model) return acc;
+    acc[model] = (acc[model] || 0) + 1;
+    return acc;
+  }, {});
+  const mostCommonSource = Object.entries(sourceModels)
+    .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
+
+  const recentSettings = [...settings]
+    .sort((a, b) => b.submission_id - a.submission_id)
+    .slice(0, 5);
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <style jsx global>{`
+        mark {
+          background: #ffde59;
+          color: #242424;
+          padding: 0 2px;
+          border-radius: 2px;
+        }
+      `}</style>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
+        <div className="card bg-card text-card-foreground p-4">
+          <h1 className="text-2xl font-bold mb-2">CO₂ Gantry Settings</h1>
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search settings by material, uploader, etc..."
+            className="w-full mb-4 dark:bg-background border border-border rounded-md p-2"
+          />
+          <p className="text-sm text-muted-foreground mb-2">
+            Explore curated CO₂ gantry settings. Search by material, uploader, or source.
+          </p>
+          <a
+            href="/"
+            className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm"
+          >
+            ← Back to Main Menu
+          </a>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">How to Use</h2>
+          <p className="text-sm">
+            Browse real-world CO₂ gantry settings. Search or filter results, and click any setting for full configuration and notes.
+          </p>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Stats Summary</h2>
+          <ul className="text-sm space-y-1">
+            <li>Total Settings: {totalSettings}</li>
+            <li>Unique Materials: {uniqueMaterials}</li>
+            <li>Most Common Lens: {mostCommonLens}</li>
+            <li>Most Used Source: {mostCommonSource}</li>
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Recently Added</h2>
+          <ul className="text-sm space-y-1">
+            {recentSettings.map((s) => (
+              <li key={s.submission_id}>
+                <Link href={`/co2gantry-settings/${s.submission_id}`} className="underline text-accent">
+                  {s.setting_title || "Untitled"}
+                </Link> by {s.uploader || "—"}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Resources</h2>
+          <ul className="text-sm space-y-1">
+            <li>
+              <a href="/materials" target="_blank" rel="noopener noreferrer" className="underline text-accent">Material Safety Guide</a>
+            </li>
+            <li>
+              <a href="https://lasereverything.net/scripts/laspwrconvert.php" target="_blank" rel="noopener noreferrer" className="underline text-accent">Laser Parameter Calculator</a>
+            </li>
+            <li>
+              <a href="https://jptoe.com/downloads" target="_blank" rel="noopener noreferrer" className="underline text-accent">JPT Datasheets</a>
+            </li>
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4 flex flex-col justify-between">
+          <div>
+            <h2 className="text-md font-semibold mb-2">Submit a Setting</h2>
+            <p className="text-sm text-muted-foreground mb-2">
+              Got a dialed-in gantry setting? Contribute it to the database.
+            </p>
+          </div>
+          <button disabled className="bg-muted text-foreground text-sm px-4 py-2 rounded opacity-50 cursor-not-allowed">
+            Coming Soon
+          </button>
+        </div>
+      </div>
+
+      {loading ? (
+        <p className="text-muted">Loading settings...</p>
+      ) : filtered.length === 0 ? (
+        <p className="text-muted">No gantry settings found.</p>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr>
+                <th className="px-2 py-2 text-left">Photo</th>
+                <th className="px-2 py-2 text-left">Title</th>
+                <th className="px-2 py-2 text-left">Uploader</th>
+                <th className="px-2 py-2 text-left">Material</th>
+                <th className="px-2 py-2 text-left">Coating</th>
+                <th className="px-2 py-2 text-left">Source</th>
+                <th className="px-2 py-2 text-left">Lens</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((setting) => (
+                <tr key={setting.submission_id} className="border-t border-border">
+                  <td className="px-2 py-2">
+                    {setting.photo?.filename_disk ? (
+                      <Image
+                        src={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
+                        alt={setting.photo.title || "laser preview"}
+                        width={64}
+                        height={64}
+                        className="rounded-md"
+                      />
+                    ) : (
+                      "—"
+                    )}
+                  </td>
+                  <td className="px-2 py-2 whitespace-nowrap">
+                    <Link
+                      href={`/co2gantry-settings/${setting.submission_id}`}
+                      className="text-accent underline"
+                      dangerouslySetInnerHTML={{ __html: highlight(setting.setting_title || "—") }}
+                    />
+                  </td>
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.uploader || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.mat?.name || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.mat_coat?.name || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.source?.model || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.lens?.name || "—") }} />
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+

app/components/forms/SettingsSubmit.tsx

@@ -0,0 +1,555 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useForm, useFieldArray, type UseFormRegister } from "react-hook-form";
+
+/** ─────────────────────────────────────────────────────────────
+ * Client form:
+ *  - Custom file inputs (photo required, screen optional) with previews
+ *  - Posts multipart/form-data: { payload: JSON, photo?: File, screen?: File }
+ *  - Accepts id/submission_id in response
+ * ──────────────────────────────────────────────────────────── */
+
+type Target = "settings_fiber" | "settings_co2gan" | "settings_co2gal" | "settings_uv";
+type Opt = { id: string; label: string };
+
+function useOptions(path: string) {
+  const [opts, setOpts] = useState<Opt[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [q, setQ] = useState("");
+
+  useEffect(() => {
+    let alive = true;
+    setLoading(true);
+    const url = `/api/options/${path}${path.includes("?") ? "&" : "?"}q=${encodeURIComponent(q)}`;
+    fetch(url, { cache: "no-store" })
+      .then((r) => r.json())
+      .then((j) => { if (alive) setOpts((j?.data as Opt[]) ?? []); })
+      .catch(() => { if (alive) setOpts([]); })
+      .finally(() => { if (alive) setLoading(false); });
+    return () => { alive = false; };
+  }, [path, q]);
+
+  return { opts, loading, setQ };
+}
+
+function FilterableSelect({
+  label, name, register, options, loading, onQuery, placeholder = "—", required,
+}: {
+  label: string;
+  name: string;
+  register: UseFormRegister<any>;
+  options: Opt[];
+  loading?: boolean;
+  onQuery?: (q: string) => void;
+  placeholder?: string;
+  required?: boolean;
+}) {
+  const [filter, setFilter] = useState("");
+  useEffect(() => { onQuery?.(filter); }, [filter, onQuery]);
+
+  const filtered = useMemo(() => {
+    if (!filter) return options;
+    const f = filter.toLowerCase();
+    return options.filter((o) => o.label.toLowerCase().includes(f));
+  }, [options, filter]);
+
+  return (
+    <div>
+      <label className="block text-sm mb-1">{label}{required ? " *" : ""}</label>
+      <input
+        className="w-full border rounded px-2 py-1 mb-1"
+        placeholder="Type to filter…"
+        value={filter}
+        onChange={(e) => setFilter(e.target.value)}
+      />
+      <select className="w-full border rounded px-2 py-1" {...register(name, { required })}>
+        <option value="">{placeholder}{loading ? " (loading…)" : ""}</option>
+        {filtered.map((o) => <option key={o.id} value={o.id}>{o.label}</option>)}
+      </select>
+    </div>
+  );
+}
+
+/** Custom file input with preview + filename display */
+function FileInput({
+  label,
+  required,
+  onFile,
+  maxMB = 25,
+  accept = "image/*",
+  initialPreview,
+}: {
+  label: string;
+  required?: boolean;
+  onFile: (f: File | null) => void;
+  maxMB?: number;
+  accept?: string;
+  initialPreview?: string | null;
+}) {
+  const [file, setFile] = useState<File | null>(null);
+  const [preview, setPreview] = useState<string | null>(initialPreview ?? null);
+  const [name, setName] = useState<string>("");
+
+  function pick(e: React.ChangeEvent<HTMLInputElement>) {
+    const f = e.target.files?.[0] ?? null;
+    setFile(f);
+    setName(f ? f.name : "");
+    onFile(f);
+    if (f) {
+      const url = URL.createObjectURL(f);
+      setPreview(url);
+    } else {
+      setPreview(null);
+    }
+  }
+
+  return (
+    <div>
+      <label className="block text-sm mb-1">
+        {label}{required ? " *" : ""}
+      </label>
+
+      {/* Hide the native text; instead show our own button + filename */}
+      <div className="flex items-center gap-3 mb-1">
+        <label className="inline-block px-2 py-1 border rounded cursor-pointer">
+          Choose File
+          <input
+            type="file"
+            accept={accept}
+            onChange={pick}
+            // hide the native control, keep it accessible
+            className="sr-only"
+          />
+        </label>
+        <span className="text-xs text-muted-foreground">
+          {file ? `Selected: ${name}` : "No file selected"}
+        </span>
+      </div>
+
+      <p className="text-xs text-muted-foreground mb-2">Max {maxMB} MB. JPG/PNG/WebP recommended.</p>
+
+      {preview && (
+        <img
+          src={preview}
+          alt="preview"
+          className="block w-full max-w-[420px] rounded border"
+        />
+      )}
+
+      {/* Simple required guard text (we enforce in onSubmit too) */}
+      {required && !file && (
+        <p className="text-xs text-red-500 mt-1">This image is required.</p>
+      )}
+    </div>
+  );
+}
+
+function BoolBox({ label, name, register }:{
+  label: string; name: string; register: UseFormRegister<any>;
+}) {
+  return (
+    <label className="flex items-center gap-1 text-sm">
+      <input type="checkbox" {...register(name)} /> {label}
+    </label>
+  );
+}
+
+export default function SettingsSubmit({ initialTarget }: { initialTarget?: Target }) {
+  const [target, setTarget] = useState<Target>(initialTarget ?? "settings_fiber");
+
+  // Custom file states
+  const [photoFile, setPhotoFile] = useState<File | null>(null);
+  const [screenFile, setScreenFile] = useState<File | null>(null);
+
+  // Generic lists (alphabetical)
+  const mats   = useOptions("material");
+  const coats  = useOptions("material_coating");
+  const colors = useOptions("material_color");
+  const opacs  = useOptions("material_opacity");
+  const soft   = useOptions("laser_software"); // only visible for fiber
+
+  // Target-driven lists
+  const srcs  = useOptions(`laser_source?target=${target}`); // wavelength filter server-side
+  const lens  = useOptions(`lens?target=${target}`);         // scan vs focus lens by target
+
+  // Repeater select choices from Directus field config
+  const fillType     = useOptions(`repeater-choices?target=${target}&group=fill_settings&field=type`);
+  const rasterType   = useOptions(`repeater-choices?target=${target}&group=raster_settings&field=type`);
+  const rasterDither = useOptions(`repeater-choices?target=${target}&group=raster_settings&field=dither`);
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    formState: { isSubmitting },
+  } = useForm<any>({
+    defaultValues: {
+      setting_title: "", uploader: "", setting_notes: "",
+      mat: "", mat_coat: "", mat_color: "", mat_opacity: "",
+      mat_thickness: "", source: "", lens: "", focus: "",
+      laser_soft: "", repeat_all: "",
+      fill_settings: [], line_settings: [], raster_settings: [],
+    },
+  });
+
+  const fills   = useFieldArray({ control, name: "fill_settings" });
+  const lines   = useFieldArray({ control, name: "line_settings" });
+  const rasters = useFieldArray({ control, name: "raster_settings" });
+
+  const isGantry = target === "settings_co2gan";
+  const isFiber  = target === "settings_fiber";
+
+  function num(v: any) { return (v === "" || v == null) ? null : Number(v); }
+  const bool = (v: any) => !!v;
+
+  async function onSubmit(values: any) {
+    // enforce photo required on client
+    if (!photoFile) {
+      alert("Result Photo is required.");
+      return;
+    }
+
+    const payload: any = {
+      target,
+      setting_title: values.setting_title,
+      uploader: values.uploader,
+      setting_notes: values.setting_notes || "",
+
+      // relations / numbers
+      mat: values.mat || null,
+      mat_coat: values.mat_coat || null,
+      mat_color: values.mat_color || null,
+      mat_opacity: values.mat_opacity || null,
+      mat_thickness: num(values.mat_thickness),
+      source: values.source || null,
+      lens: values.lens || null,
+      focus: num(values.focus),
+
+      // repeaters
+      fill_settings: (values.fill_settings || []).map((r: any) => ({
+        name: r.name || "",
+        power: num(r.power),
+        speed: num(r.speed),
+        interval: num(r.interval),
+        pass: num(r.pass),
+        type: r.type || "",
+        frequency: num(r.frequency),
+        pulse: num(r.pulse),
+        angle: num(r.angle),
+        auto: bool(r.auto),
+        increment: num(r.increment),
+        cross: bool(r.cross),
+        flood: bool(r.flood),
+        air: bool(r.air),
+      })),
+      line_settings: (values.line_settings || []).map((r: any) => ({
+        name: r.name || "",
+        power: num(r.power),
+        speed: num(r.speed),
+        perf: bool(r.perf),
+        cut: r.cut || "",
+        skip: r.skip || "",
+        pass: num(r.pass),
+        air: bool(r.air),
+        frequency: num(r.frequency),
+        pulse: num(r.pulse),
+        wobble: bool(r.wobble),
+        step: num(r.step),
+        size: num(r.size),
+      })),
+      raster_settings: (values.raster_settings || []).map((r: any) => ({
+        name: r.name || "",
+        power: num(r.power),
+        speed: num(r.speed),
+        type: r.type || "",
+        dither: r.dither || "",
+        halftone_cell: num(r.halftone_cell),
+        halftone_angle: num(r.halftone_angle),
+        inversion: bool(r.inversion),
+        interval: num(r.interval),
+        dot: num(r.dot),
+        pass: num(r.pass),
+        air: bool(r.air),
+        frequency: num(r.frequency),
+        pulse: num(r.pulse),
+        cross: bool(r.cross),
+      })),
+    };
+
+    if (isFiber) {
+      payload.laser_soft = values.laser_soft || null;
+      payload.repeat_all = num(values.repeat_all);
+    }
+
+    const fd = new FormData();
+    fd.append("payload", JSON.stringify(payload));
+    if (photoFile) fd.append("photo", photoFile, photoFile.name);
+    if (screenFile) fd.append("screen", screenFile, screenFile.name);
+
+    const res = await fetch("/api/submit/settings", {
+      method: "POST",
+      body: fd,
+    });
+
+    let data: any = {};
+    try {
+      data = await res.json();
+    } catch {
+      // no-op; keep empty data
+    }
+
+    if (!res.ok) {
+      const msg = data?.error || "Submission failed";
+      alert(`Submission failed: ${msg}`);
+      return;
+    }
+
+    const id =
+      data?.id ??
+      data?.submission_id ??
+      data?.data?.id ??
+      data?.data?.submission_id ??
+      data?.itemId ??
+      "(unknown)";
+
+    reset();
+    setPhotoFile(null);
+    setScreenFile(null);
+    alert(`Submitted! ID: ${id}`);
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-4">
+      <div className="flex flex-wrap gap-3 items-end">
+        <div>
+          <label className="block text-sm mb-1">Target</label>
+          <select
+            className="border rounded px-2 py-1"
+            value={target}
+            onChange={(e) => setTarget(e.target.value as Target)}
+          >
+            <option value="settings_fiber">Fiber</option>
+            <option value="settings_co2gan">CO₂ Gantry</option>
+            <option value="settings_co2gal">CO₂ Galvo</option>
+            <option value="settings_uv">UV</option>
+          </select>
+        </div>
+
+        {isFiber && (
+          <div className="flex-1 min-w-[220px]">
+            <FilterableSelect
+              label="Software"
+              name="laser_soft"
+              register={register}
+              options={soft.opts}
+              loading={soft.loading}
+              onQuery={soft.setQ}
+              required
+            />
+          </div>
+        )}
+      </div>
+
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+        <div className="grid md:grid-cols-2 gap-3">
+          <div>
+            <label className="block text-sm mb-1">Title *</label>
+            <input className="w-full border rounded px-2 py-1" {...register("setting_title", { required: true })} />
+          </div>
+          <div>
+            <label className="block text-sm mb-1">Uploader *</label>
+            <input className="w-full border rounded px-2 py-1" {...register("uploader", { required: true })} />
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-sm mb-1">Notes</label>
+          <textarea rows={4} className="w-full border rounded px-2 py-1" {...register("setting_notes")} />
+        </div>
+
+        {/* Files */}
+        <div className="grid md:grid-cols-2 gap-6">
+          <FileInput
+            label="Result Photo"
+            required
+            onFile={setPhotoFile}
+          />
+          <FileInput
+            label="Settings Screenshot (optional)"
+            onFile={setScreenFile}
+          />
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-3">
+          <FilterableSelect label="Material"       name="mat"         register={register} options={mats.opts}   loading={mats.loading}   onQuery={mats.setQ}   required />
+          <FilterableSelect label="Coating"        name="mat_coat"    register={register} options={coats.opts}  loading={coats.loading}  onQuery={coats.setQ}  required />
+          <FilterableSelect label="Color"          name="mat_color"   register={register} options={colors.opts} loading={colors.loading} onQuery={colors.setQ} required />
+          <FilterableSelect label="Opacity"        name="mat_opacity" register={register} options={opacs.opts}  loading={opacs.loading}  onQuery={opacs.setQ}  required />
+          <FilterableSelect label="Laser Source"   name="source"      register={register} options={srcs.opts}   loading={srcs.loading}   onQuery={srcs.setQ}   required />
+          <FilterableSelect label="Lens"           name="lens"        register={register} options={lens.opts}   loading={lens.loading}   onQuery={lens.setQ}   required />
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-3">
+          <div>
+            <label className="block text-sm mb-1">Material Thickness (mm)</label>
+            <input type="number" step="0.01" className="w-full border rounded px-2 py-1" {...register("mat_thickness")} />
+          </div>
+          <div>
+            <label className="block text-sm mb-1">Focus (mm) *</label>
+            <input type="number" min={-10} max={10} step="1" className="w-full border rounded px-2 py-1" {...register("focus", { required: true })} />
+            <p className="text-xs text-muted-foreground mt-1">
+              0 = in focus. Negative = focus closer. Positive = focus further.
+            </p>
+          </div>
+          {isFiber && (
+            <div>
+              <label className="block text-sm mb-1">Repeat All *</label>
+              <input type="number" step="1" className="w-full border rounded px-2 py-1" {...register("repeat_all", { required: true })} />
+            </div>
+          )}
+        </div>
+
+        {/* FILL */}
+        <fieldset className="border rounded p-3 space-y-2">
+          <div className="flex items-center justify-between">
+            <legend className="font-semibold">Fill Settings</legend>
+            <button type="button" className="px-2 py-1 border rounded" onClick={() => fills.append({})}>+ Add</button>
+          </div>
+          {fills.fields.map((f, i) => (
+            <div key={f.id} className="grid md:grid-cols-4 gap-2">
+              <input placeholder="Name" className="border rounded px-2 py-1 md:col-span-2" {...register(`fill_settings.${i}.name`)} />
+              <FilterableSelect
+                label="Type"
+                name={`fill_settings.${i}.type`}
+                register={register}
+                options={fillType.opts}
+                loading={fillType.loading}
+                onQuery={fillType.setQ}
+                placeholder="Select type"
+              />
+              {!isGantry && (
+                <>
+                  <input placeholder="Frequency (kHz)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.frequency`)} />
+                  <input placeholder="Pulse (ns)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.pulse`)} />
+                </>
+              )}
+              <input placeholder="Power (%)"       type="number" step="0.1"   className="border rounded px-2 py-1" {...register(`fill_settings.${i}.power`)} />
+              <input placeholder="Speed (mm/s)"    type="number" step="0.1"   className="border rounded px-2 py-1" {...register(`fill_settings.${i}.speed`)} />
+              <input placeholder="Interval (mm)"   type="number" step="0.001" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.interval`)} />
+              <input placeholder="Pass"            type="number" step="1"     className="border rounded px-2 py-1" {...register(`fill_settings.${i}.pass`)} />
+              {!isGantry && (
+                <>
+                  <input placeholder="Angle (°)" type="number" step="1" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.angle`)} />
+                  <input placeholder="Increment"  type="number" step="0.001" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.increment`)} />
+                  <div className="flex items-center gap-3">
+                    <BoolBox label="Auto"  name={`fill_settings.${i}.auto`}  register={register} />
+                    <BoolBox label="Cross" name={`fill_settings.${i}.cross`} register={register} />
+                  </div>
+                </>
+              )}
+              <div className="flex items-center gap-3">
+                <BoolBox label="Flood" name={`fill_settings.${i}.flood`} register={register} />
+                <BoolBox label="Air"   name={`fill_settings.${i}.air`}   register={register} />
+              </div>
+              <button type="button" className="px-2 py-1 border rounded md:col-span-4" onClick={() => fills.remove(i)}>Remove</button>
+            </div>
+          ))}
+        </fieldset>
+
+        {/* LINE */}
+        <fieldset className="border rounded p-3 space-y-2">
+          <div className="flex items-center justify-between">
+            <legend className="font-semibold">Line Settings</legend>
+            <button type="button" className="px-2 py-1 border rounded" onClick={() => lines.append({})}>+ Add</button>
+          </div>
+          {lines.fields.map((f, i) => (
+            <div key={f.id} className="grid md:grid-cols-4 gap-2">
+              <input placeholder="Name" className="border rounded px-2 py-1 md:col-span-2" {...register(`line_settings.${i}.name`)} />
+              {!isGantry && (
+                <>
+                  <input placeholder="Frequency (kHz)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`line_settings.${i}.frequency`)} />
+                  <input placeholder="Pulse (ns)"      type="number" step="0.1" className="border rounded px-2 py-1" {...register(`line_settings.${i}.pulse`)} />
+                </>
+              )}
+              <input placeholder="Power (%)"     type="number" step="0.1" className="border rounded px-2 py-1" {...register(`line_settings.${i}.power`)} />
+              <input placeholder="Speed (mm/s)"  type="number" step="0.1" className="border rounded px-2 py-1" {...register(`line_settings.${i}.speed`)} />
+              <input placeholder="Perf" className="border rounded px-2 py-1" {...register(`line_settings.${i}.perf`)} />
+              <input placeholder="Cut"  className="border rounded px-2 py-1" {...register(`line_settings.${i}.cut`)} />
+              <input placeholder="Skip" className="border rounded px-2 py-1" {...register(`line_settings.${i}.skip`)} />
+              <input placeholder="Pass" type="number" step="1" className="border rounded px-2 py-1" {...register(`line_settings.${i}.pass`)} />
+              {!isGantry && (
+                <>
+                  <input placeholder="Step" type="number" step="0.001" className="border rounded px-2 py-1" {...register(`line_settings.${i}.step`)} />
+                  <input placeholder="Size" type="number" step="0.001" className="border rounded px-2 py-1" {...register(`line_settings.${i}.size`)} />
+                  <BoolBox label="Wobble" name={`line_settings.${i}.wobble`} register={register} />
+                </>
+              )}
+              <BoolBox label="Air" name={`line_settings.${i}.air`} register={register} />
+              <button type="button" className="px-2 py-1 border rounded md:col-span-4" onClick={() => lines.remove(i)}>Remove</button>
+            </div>
+          ))}
+        </fieldset>
+
+        {/* RASTER */}
+        <fieldset className="border rounded p-3 space-y-2">
+          <div className="flex items-center justify-between">
+            <legend className="font-semibold">Raster Settings</legend>
+            <button type="button" className="px-2 py-1 border rounded" onClick={() => rasters.append({})}>+ Add</button>
+          </div>
+          {rasters.fields.map((f, i) => (
+            <div key={f.id} className="grid md:grid-cols-4 gap-2">
+              <input placeholder="Name" className="border rounded px-2 py-1 md:col-span-2" {...register(`raster_settings.${i}.name`)} />
+              {!isGantry && (
+                <>
+                  <input placeholder="Frequency (kHz)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.frequency`)} />
+                  <input placeholder="Pulse (ns)"      type="number" step="0.1" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.pulse`)} />
+                </>
+              )}
+              <FilterableSelect
+                label="Type"
+                name={`raster_settings.${i}.type`}
+                register={register}
+                options={rasterType.opts}
+                loading={rasterType.loading}
+                onQuery={rasterType.setQ}
+                placeholder="Select type"
+              />
+              <FilterableSelect
+                label="Dither"
+                name={`raster_settings.${i}.dither`}
+                register={register}
+                options={rasterDither.opts}
+                loading={rasterDither.loading}
+                onQuery={rasterDither.setQ}
+                placeholder="Select dither"
+              />
+              <input placeholder="Power (%)"       type="number" step="0.1"   className="border rounded px-2 py-1" {...register(`raster_settings.${i}.power`)} />
+              <input placeholder="Speed (mm/s)"    type="number" step="0.1"   className="border rounded px-2 py-1" {...register(`raster_settings.${i}.speed`)} />
+              <input placeholder="Halftone Cell"   type="number" step="1"     className="border rounded px-2 py-1" {...register(`raster_settings.${i}.halftone_cell`)} />
+              <input placeholder="Halftone Angle"  type="number" step="1"     className="border rounded px-2 py-1" {...register(`raster_settings.${i}.halftone_angle`)} />
+              <input placeholder="Interval (mm)"   type="number" step="0.001" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.interval`)} />
+              <input placeholder="Dot"             type="number" step="0.1"   className="border rounded px-2 py-1" {...register(`raster_settings.${i}.dot`)} />
+              <input placeholder="Pass"            type="number" step="1"     className="border rounded px-2 py-1" {...register(`raster_settings.${i}.pass`)} />
+              {!isGantry && <BoolBox label="Cross" name={`raster_settings.${i}.cross`} register={register} />}
+              <div className="flex items-center gap-3">
+                <BoolBox label="Inversion" name={`raster_settings.${i}.inversion`} register={register} />
+                <BoolBox label="Air"       name={`raster_settings.${i}.air`}       register={register} />
+              </div>
+              <button type="button" className="px-2 py-1 border rounded md:col-span-4" onClick={() => rasters.remove(i)}>Remove</button>
+            </div>
+          ))}
+        </fieldset>
+
+        <button
+          disabled={isSubmitting}
+          className="px-3 py-2 border rounded bg-accent text-background hover:opacity-90 disabled:opacity-50"
+        >
+          {isSubmitting ? "Submitting…" : "Submit Settings"}
+        </button>
+      </form>
+    </div>
+  );
+}
+

app/components/toolkit/ToolShell.tsx

@@ -0,0 +1,35 @@
+// /var/www/makearmy.io/app/components/toolkit/ToolShell.tsx
+"use client";
+
+import Link from "next/link";
+
+export default function ToolShell({
+  title,
+  subtitle,
+  children,
+}: {
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="mx-auto max-w-4xl px-4 py-8 space-y-6">
+      <header className="flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-semibold">{title}</h1>
+          {subtitle && (
+            <p className="text-sm text-muted-foreground mt-1">{subtitle}</p>
+          )}
+        </div>
+        <Link
+          href="https://makearmy.io"
+          className="rounded-lg px-3 py-2 border hover:bg-muted transition-colors text-sm"
+        >
+          Back to Main Menu
+        </Link>
+      </header>
+      {children}
+    </div>
+  );
+}
+

app/fiber-settings/[id]/page.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+import Image from "next/image";
+import Markdown from "react-markdown";
+
+export default function FiberSettingDetailPage() {
+  const { id } = useParams();
+  const [setting, setSetting] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_fiber/${id}?fields=submission_id,setting_title,uploader,setting_notes,photo.filename_disk,screen.filename_disk,mat.name,mat_coat.name,mat_color.name,mat_opacity.opacity,mat_thickness,source.make,source.model,lens.field_size,lens.focal_length,focus,laser_soft.name,repeat_all,fill_settings,line_settings,raster_settings`
+    )
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to load");
+        return res.json();
+      })
+      .then((data) => setSetting(data.data))
+      .catch(() => setSetting(null))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  if (loading) return <p className="p-6">Loading setting...</p>;
+  if (!setting) return <p className="p-6">Setting not found.</p>;
+
+  const formatBoolean = (val) => val ? "Enabled" : val === false ? "Disabled" : "—";
+
+  const renderRepeaterCard = (title, fields, items) => {
+    const filtered = (items || []).filter(item => Object.values(item).some(v => v !== null && v !== ""));
+    if (filtered.length === 0) return null;
+    return (
+      <div className="mt-6">
+        <h2 className="text-2xl font-semibold mb-2">{title}</h2>
+        <div className="grid gap-4 grid-cols-1 md:grid-cols-2">
+          {filtered.map((item, i) => (
+            <div key={i} className="border border-border rounded-lg p-4 bg-card">
+              {fields.map(({ key, label, condition }) => {
+                const value = item[key];
+                if (condition && !condition(item)) return null;
+                return <p key={key} className="text-sm"><strong>{label}:</strong> {typeof value === "boolean" ? formatBoolean(value) : value || "—"}</p>;
+              })}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  const openSearchInNewTab = (value) => {
+    const url = new URL("/fiber-settings", window.location.origin);
+    url.searchParams.set("query", value);
+    const anchor = document.createElement("a");
+    anchor.href = url.toString();
+    anchor.target = "_blank";
+    anchor.rel = "noopener noreferrer";
+    anchor.click();
+  };
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+    <div className="card bg-card p-4 flex flex-col justify-between">
+      <div>
+        <h1 className="text-3xl font-bold mb-1">{setting.setting_title}</h1>
+        <p className="text-muted-foreground mb-4">Uploaded by: {setting.uploader || "—"}</p>
+      </div>
+      <a
+        href="/fiber-settings"
+        className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm self-start"
+      >
+        ← Back to Fiber Settings
+      </a>
+    </div>
+        <div className="card bg-card p-4 grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
+          <div className="flex justify-center">
+            {setting.photo?.filename_disk && (
+              <a href={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`} target="_blank" rel="noopener noreferrer">
+                <Image
+                  src={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
+                  alt="Laser preview"
+                  width={250}
+                  height={250}
+                  className="rounded object-contain max-w-[250px] max-h-[250px]"
+                />
+              </a>
+            )}
+          </div>
+          <div>
+            <h2 className="text-xl font-semibold mb-2">Material</h2>
+            <p><strong>Material:</strong> <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.mat?.name)}>{setting.mat?.name || "—"}</span></p>
+            <p><strong>Coating:</strong> <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.mat_coat?.name)}>{setting.mat_coat?.name || "—"}</span></p>
+            <p><strong>Color:</strong> {setting.mat_color?.name || "—"}</p>
+            <p><strong>Opacity:</strong> {setting.mat_opacity?.opacity || "—"}</p>
+            <p><strong>Thickness:</strong> {setting.mat_thickness ? `${setting.mat_thickness} mm` : "Not Applicable"}</p>
+          </div>
+        </div>
+
+        <div className="card bg-card p-4">
+          <h2 className="text-xl font-semibold mb-2">Setup</h2>
+          <p><strong>Software:</strong> {setting.laser_soft?.name || "—"}</p>
+          <p><strong>Repeat All (global):</strong> {setting.repeat_all ?? "—"}</p>
+          <p className="mt-4"><strong>Focus:</strong> {setting.focus ?? "—"} mm</p>
+          <small>-Values Focus Closer | +Values Focus Further</small>
+        </div>
+
+        <div className="card bg-card p-4">
+          <h2 className="text-xl font-semibold mb-2">Laser</h2>
+          <p><strong>Source Make:</strong> {setting.source?.make || "—"}</p>
+          <p><strong>Source Model:</strong> <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.source?.model)}>{setting.source?.model || "—"}</span></p>
+          <p><strong>Lens:</strong> <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.lens?.field_size)}>{setting.lens?.field_size || "—"}</span> mm | {setting.lens?.focal_length || "—"}</p>
+        </div>
+      </div>
+
+      {setting.setting_notes && (
+        <div className="prose dark:prose-invert mt-6">
+          <h2>Notes</h2>
+          <Markdown>{setting.setting_notes}</Markdown>
+        </div>
+      )}
+
+      <hr className="my-6 border-muted" />
+
+      {renderRepeaterCard("Fill Settings", [
+        { key: "fill_name", label: "Fill Name" },
+        { key: "power", label: "Power (%)" },
+        { key: "speed", label: "Speed (mm/s)" },
+        { key: "frequency", label: "Frequency (kHz)" },
+        { key: "pulse", label: "Pulse Width (ns)" },
+        { key: "interval", label: "Interval (mm)" },
+        { key: "pass", label: "Passes" },
+        { key: "type", label: "Type" },
+        { key: "angle", label: "Angle (°)" },
+        { key: "auto", label: "Auto-Rotate" },
+        { key: "increment", label: "Increment (°)", condition: (e) => e.auto },
+        { key: "cross", label: "Crosshatch" },
+        { key: "flood", label: "Flood Fill" },
+        { key: "air", label: "Air Assist" },
+      ], setting.fill_settings)}
+
+      {renderRepeaterCard("Line Settings", [
+        { key: "name", label: "Line Name" },
+        { key: "power", label: "Power (%)" },
+        { key: "speed", label: "Speed (mm/s)" },
+        { key: "frequency", label: "Frequency (kHz)" },
+        { key: "pulse", label: "Pulse Width (ns)" },
+        { key: "perf", label: "Perforation Mode" },
+        { key: "cut", label: "Cut (mm)", condition: (e) => e.perf },
+        { key: "skip", label: "Skip (mm)", condition: (e) => e.perf },
+        { key: "wobble", label: "Wobble Mode" },
+        { key: "step", label: "Step (mm)", condition: (e) => e.wobble },
+        { key: "size", label: "Size (mm)", condition: (e) => e.wobble },
+        { key: "pass", label: "Passes" },
+        { key: "air", label: "Air Assist" },
+      ], setting.line_settings)}
+
+      {renderRepeaterCard("Raster Settings", [
+        { key: "name", label: "Raster Name" },
+        { key: "power", label: "Power (%)" },
+        { key: "speed", label: "Speed (mm/s)" },
+        { key: "frequency", label: "Frequency (kHz)" },
+        { key: "pulse", label: "Pulse Width (ns)" },
+        { key: "type", label: "Type" },
+        { key: "dither", label: "Dither" },
+        { key: "halftone_cell", label: "Cell Size (mm)", condition: (e) => e.dither === "halftone" },
+        { key: "halftone_angle", label: "Halftone Angle", condition: (e) => e.dither === "halftone" },
+        { key: "inversion", label: "Image Inverted" },
+        { key: "interval", label: "Interval (mm)" },
+        { key: "dot", label: "Dot-width Adjustment (mm)" },
+        { key: "pass", label: "Passes" },
+        { key: "cross", label: "Crosshatch" },
+        { key: "air", label: "Air Assist" },
+      ], setting.raster_settings)}
+    </div>
+  );
+}
+

app/fiber-settings/[id]/page.tsx.back

@@ -0,0 +1,59 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+import Image from "next/image";
+import Markdown from "react-markdown";
+
+export default function FiberSettingDetailPage() {
+  const { id } = useParams();
+  const [setting, setSetting] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_fiber/${id}?fields=submission_id,setting_title,uploader,setting_notes,photo.filename_disk,mat.name,mat_coat.name,mat_color.name,mat_opacity.opacity,source.model,lens.field_size`
+    )
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to load");
+        return res.json();
+      })
+      .then((data) => setSetting(data.data))
+      .catch(() => setSetting(null))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  if (loading) return <p className="p-6">Loading setting...</p>;
+  if (!setting) return <p className="p-6">Setting not found.</p>;
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto">
+      <h1 className="text-3xl font-bold mb-4">{setting.setting_title}</h1>
+      {setting.photo?.filename_disk && (
+        <Image
+          src={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
+          alt="Laser preview"
+          width={512}
+          height={512}
+          className="rounded mb-4"
+        />
+      )}
+      <div className="space-y-2">
+        <p><strong>Uploader:</strong> {setting.uploader || "—"}</p>
+        <p><strong>Material:</strong> {setting.mat?.name || "—"}</p>
+        <p><strong>Coating:</strong> {setting.mat_coat?.name || "—"}</p>
+        <p><strong>Color:</strong> {setting.mat_color?.name || "—"}</p>
+        <p><strong>Opacity:</strong> {setting.mat_opacity?.opacity || "—"}</p>
+        <p><strong>Source Model:</strong> {setting.source?.model || "—"}</p>
+        <p><strong>Lens Field Size:</strong> {setting.lens?.field_size || "—"}</p>
+      </div>
+      {setting.setting_notes && (
+        <div className="mt-6 prose dark:prose-invert">
+          <h2>Notes</h2>
+          <Markdown>{setting.setting_notes}</Markdown>
+        </div>
+      )}
+    </div>
+  );
+}
+

app/fiber-settings/layout.tsx

@@ -0,0 +1,4 @@
+import { Suspense } from "react";
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <Suspense fallback={null}>{children}</Suspense>;
+}

app/fiber-settings/page.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import { useEffect, useState, useMemo } from "react";
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+
+export default function FiberSettingsPage() {
+  const searchParams = useSearchParams();
+  const initialQuery = searchParams.get("query") || "";
+
+  const [query, setQuery] = useState(initialQuery);
+  const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
+  const [settings, setSettings] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedQuery(query), 300);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  useEffect(() => {
+    fetch(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_fiber?fields=submission_id,setting_title,uploader,photo.id,photo.title,mat.name,mat_coat.name,source.model,lens.field_size&limit=-1`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        setSettings(data.data || []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  const highlight = (text) => {
+    if (!debouncedQuery) return text;
+    const regex = new RegExp(`(${debouncedQuery})`, "gi");
+    return text?.replace(regex, '<mark>$1</mark>');
+  };
+
+  const filtered = useMemo(() => {
+    const q = debouncedQuery.toLowerCase();
+    return settings.filter((entry) => {
+      const fieldsToSearch = [
+        entry.setting_title,
+        entry.uploader,
+        entry.mat?.name,
+        entry.mat_coat?.name,
+        entry.source?.model,
+        entry.lens?.field_size,
+      ];
+      return fieldsToSearch.filter(Boolean).some((field) =>
+        field.toLowerCase().includes(q)
+      );
+    });
+  }, [settings, debouncedQuery]);
+
+  const totalSettings = settings.length;
+  const uniqueMaterials = new Set(settings.map(s => s.mat?.name).filter(Boolean)).size;
+
+  const commonLens = settings.reduce((acc, cur) => {
+    const lens = cur.lens?.field_size;
+    if (!lens) return acc;
+    acc[lens] = (acc[lens] || 0) + 1;
+    return acc;
+  }, {});
+  const mostCommonLens = Object.entries(commonLens)
+    .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
+
+  const sourceModels = settings.reduce((acc, cur) => {
+    const model = cur.source?.model;
+    if (!model) return acc;
+    acc[model] = (acc[model] || 0) + 1;
+    return acc;
+  }, {});
+  const mostCommonSource = Object.entries(sourceModels)
+    .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
+
+  const recentSettings = [...settings]
+    .sort((a, b) => b.submission_id - a.submission_id)
+    .slice(0, 5);
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <style jsx global>{`
+        mark {
+          background: #ffde59;
+          color: #242424;
+          padding: 0 2px;
+          border-radius: 2px;
+        }
+      `}</style>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
+        <div className="card bg-card text-card-foreground p-4">
+          <h1 className="text-2xl font-bold mb-2">Fiber Laser Settings</h1>
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search settings by material, uploader, etc..."
+            className="w-full mb-4 dark:bg-background border border-border rounded-md p-2"
+          />
+          <p className="text-sm text-muted-foreground mb-2">
+            View and explore detailed fiber laser settings with context.
+          </p>
+          <a
+            href="/"
+            className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm"
+          >
+            ← Back to Main Menu
+          </a>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">How to Use</h2>
+          <p className="text-sm">
+            Browse real-world fiber laser settings from the community. Use the search to narrow results. Click any setting to view its full configuration, notes, and photos. Click any linked term to find related settings.
+          </p>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Stats Summary</h2>
+          <ul className="text-sm space-y-1">
+            <li>Total Settings: {totalSettings}</li>
+            <li>Unique Materials: {uniqueMaterials}</li>
+            <li>Most Common Lens: {mostCommonLens}</li>
+            <li>Most Used Source: {mostCommonSource}</li>
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Recently Added</h2>
+          <ul className="text-sm space-y-1">
+            {recentSettings.map((s) => (
+              <li key={s.submission_id}>
+                <Link href={`/fiber-settings/${s.submission_id}`} className="underline text-accent">
+                  {s.setting_title || "Untitled"}
+                </Link> by {s.uploader || "—"}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Resources</h2>
+          <ul className="text-sm space-y-1">
+            <li>
+              <a href="/materials" target="_blank" rel="noopener noreferrer" className="underline text-accent">Material Safety Guide</a>
+            </li>
+            <li>
+              <a href="https://lasereverything.net/scripts/laspwrconvert.php" target="_blank" rel="noopener noreferrer" className="underline text-accent">Laser Parameter Calculator</a>
+            </li>
+            <li>
+              <a href="https://jptoe.com/downloads" target="_blank" rel="noopener noreferrer" className="underline text-accent">JPT Datasheets</a>
+            </li>
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4 flex flex-col justify-between">
+          <div>
+            <h2 className="text-md font-semibold mb-2">Submit a Setting</h2>
+            <p className="text-sm text-muted-foreground mb-2">
+              Have a reliable fiber setting to share? Contribute to the community database.
+            </p>
+          </div>
+          <Link
+  href="/submit/settings?target=settings_fiber"
+  className="bg-accent text-background text-sm px-4 py-2 rounded hover:opacity-90 transition"
+>
+  Submit a Setting
+</Link>
+        </div>
+      </div>
+
+      {loading ? (
+        <p className="text-muted">Loading settings...</p>
+      ) : filtered.length === 0 ? (
+        <p className="text-muted">No fiber settings found.</p>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr>
+                <th className="px-2 py-2 text-left">Photo</th>
+                <th className="px-2 py-2 text-left">Title</th>
+                <th className="px-2 py-2 text-left">Uploader</th>
+                <th className="px-2 py-2 text-left">Material</th>
+                <th className="px-2 py-2 text-left">Coating</th>
+                <th className="px-2 py-2 text-left">Source</th>
+                <th className="px-2 py-2 text-left">Lens</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((setting) => (
+                <tr key={setting.submission_id} className="border-t border-border">
+                  <td className="px-2 py-2">
+                    {setting.photo?.id ? (
+                      <Image
+                        src={`https://forms.lasereverything.net/assets/${setting.photo.id}`}
+                        alt={setting.photo.title || "laser preview"}
+                        width={64}
+                        height={64}
+                        className="rounded-md"
+                      />
+                    ) : (
+                      "—"
+                    )}
+                  </td>
+                  <td className="px-2 py-2 whitespace-nowrap">
+                    <Link
+                      href={`/fiber-settings/${setting.submission_id}`}
+                      className="text-accent underline"
+                      dangerouslySetInnerHTML={{ __html: highlight(setting.setting_title || "—") }}
+                    />
+                  </td>
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.uploader || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.mat?.name || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.mat_coat?.name || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.source?.model || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.lens?.field_size || "—") }} />
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+

app/fiber-settings/page.tsx.bak

@@ -0,0 +1,227 @@
+"use client";
+
+import { useEffect, useState, useMemo } from "react";
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+
+export default function FiberSettingsPage() {
+  const searchParams = useSearchParams();
+  const initialQuery = searchParams.get("query") || "";
+
+  const [query, setQuery] = useState(initialQuery);
+  const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
+  const [settings, setSettings] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedQuery(query), 300);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  useEffect(() => {
+    fetch(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_fiber?fields=submission_id,setting_title,uploader,photo.filename_disk,photo.title,mat.name,mat_coat.name,source.model,lens.field_size&limit=-1`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        setSettings(data.data || []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  const highlight = (text) => {
+    if (!debouncedQuery) return text;
+    const regex = new RegExp(`(${debouncedQuery})`, "gi");
+    return text?.replace(regex, '<mark>$1</mark>');
+  };
+
+  const filtered = useMemo(() => {
+    const q = debouncedQuery.toLowerCase();
+    return settings.filter((entry) => {
+      const fieldsToSearch = [
+        entry.setting_title,
+        entry.uploader,
+        entry.mat?.name,
+        entry.mat_coat?.name,
+        entry.source?.model,
+        entry.lens?.field_size,
+      ];
+      return fieldsToSearch.filter(Boolean).some((field) =>
+        field.toLowerCase().includes(q)
+      );
+    });
+  }, [settings, debouncedQuery]);
+
+  const totalSettings = settings.length;
+  const uniqueMaterials = new Set(settings.map(s => s.mat?.name).filter(Boolean)).size;
+
+  const commonLens = settings.reduce((acc, cur) => {
+    const lens = cur.lens?.field_size;
+    if (!lens) return acc;
+    acc[lens] = (acc[lens] || 0) + 1;
+    return acc;
+  }, {});
+  const mostCommonLens = Object.entries(commonLens)
+    .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
+
+  const sourceModels = settings.reduce((acc, cur) => {
+    const model = cur.source?.model;
+    if (!model) return acc;
+    acc[model] = (acc[model] || 0) + 1;
+    return acc;
+  }, {});
+  const mostCommonSource = Object.entries(sourceModels)
+    .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
+
+  const recentSettings = [...settings]
+    .sort((a, b) => b.submission_id - a.submission_id)
+    .slice(0, 5);
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <style jsx global>{`
+        mark {
+          background: #ffde59;
+          color: #242424;
+          padding: 0 2px;
+          border-radius: 2px;
+        }
+      `}</style>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
+        <div className="card bg-card text-card-foreground p-4">
+          <h1 className="text-2xl font-bold mb-2">Fiber Laser Settings</h1>
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search settings by material, uploader, etc..."
+            className="w-full mb-4 dark:bg-background border border-border rounded-md p-2"
+          />
+          <p className="text-sm text-muted-foreground mb-2">
+            View and explore detailed fiber laser settings with context.
+          </p>
+          <a
+            href="/"
+            className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm"
+          >
+            ← Back to Main Menu
+          </a>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">How to Use</h2>
+          <p className="text-sm">
+            Browse real-world fiber laser settings from the community. Use the search to narrow results. Click any setting to view its full configuration, notes, and photos. Click any linked term to find related settings.
+          </p>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Stats Summary</h2>
+          <ul className="text-sm space-y-1">
+            <li>Total Settings: {totalSettings}</li>
+            <li>Unique Materials: {uniqueMaterials}</li>
+            <li>Most Common Lens: {mostCommonLens}</li>
+            <li>Most Used Source: {mostCommonSource}</li>
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Recently Added</h2>
+          <ul className="text-sm space-y-1">
+            {recentSettings.map((s) => (
+              <li key={s.submission_id}>
+                <Link href={`/fiber-settings/${s.submission_id}`} className="underline text-accent">
+                  {s.setting_title || "Untitled"}
+                </Link> by {s.uploader || "—"}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Resources</h2>
+          <ul className="text-sm space-y-1">
+            <li>
+              <a href="/materials" target="_blank" rel="noopener noreferrer" className="underline text-accent">Material Safety Guide</a>
+            </li>
+            <li>
+              <a href="https://lasereverything.net/scripts/laspwrconvert.php" target="_blank" rel="noopener noreferrer" className="underline text-accent">Laser Parameter Calculator</a>
+            </li>
+            <li>
+              <a href="https://jptoe.com/downloads" target="_blank" rel="noopener noreferrer" className="underline text-accent">JPT Datasheets</a>
+            </li>
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4 flex flex-col justify-between">
+          <div>
+            <h2 className="text-md font-semibold mb-2">Submit a Setting</h2>
+            <p className="text-sm text-muted-foreground mb-2">
+              Have a reliable fiber setting to share? Contribute to the community database.
+            </p>
+          </div>
+          <button disabled className="bg-muted text-foreground text-sm px-4 py-2 rounded opacity-50 cursor-not-allowed">
+            Coming Soon
+          </button>
+        </div>
+      </div>
+
+      {loading ? (
+        <p className="text-muted">Loading settings...</p>
+      ) : filtered.length === 0 ? (
+        <p className="text-muted">No fiber settings found.</p>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr>
+                <th className="px-2 py-2 text-left">Photo</th>
+                <th className="px-2 py-2 text-left">Title</th>
+                <th className="px-2 py-2 text-left">Uploader</th>
+                <th className="px-2 py-2 text-left">Material</th>
+                <th className="px-2 py-2 text-left">Coating</th>
+                <th className="px-2 py-2 text-left">Source</th>
+                <th className="px-2 py-2 text-left">Lens</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((setting) => (
+                <tr key={setting.submission_id} className="border-t border-border">
+                  <td className="px-2 py-2">
+                    {setting.photo?.filename_disk ? (
+                      <Image
+                        src={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
+                        alt={setting.photo.title || "laser preview"}
+                        width={64}
+                        height={64}
+                        className="rounded-md"
+                      />
+                    ) : (
+                      "—"
+                    )}
+                  </td>
+                  <td className="px-2 py-2 whitespace-nowrap">
+                    <Link
+                      href={`/fiber-settings/${setting.submission_id}`}
+                      className="text-accent underline"
+                      dangerouslySetInnerHTML={{ __html: highlight(setting.setting_title || "—") }}
+                    />
+                  </td>
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.uploader || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.mat?.name || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.mat_coat?.name || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.source?.model || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.lens?.field_size || "—") }} />
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+

app/files/layout.tsx

@@ -0,0 +1,17 @@
+import { Suspense } from "react";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <Suspense fallback={null}>
+      <div className="p-4">
+        <a
+          href="https://makearmy.io"
+          className="inline-block mb-4 px-4 py-2 bg-accent text-background rounded-md text-sm"
+        >
+          ← Back to Main Menu
+        </a>
+      </div>
+      {children}
+    </Suspense>
+  );
+}

app/files/main.py

@@ -0,0 +1,44 @@
+from fastapi import FastAPI, HTTPException, Query
+from fastapi.responses import FileResponse
+from pathlib import Path
+from typing import List
+import os
+
+app = FastAPI()
+FILES_ROOT = Path("/var/www/lasereverything.net.db/files").resolve()
+
+@app.get("/list-files")
+def list_files(
+    path: str = "",
+    offset: int = 0,
+    limit: int = 50
+):
+    base_path = (FILES_ROOT / path).resolve()
+
+    if not base_path.is_dir() or not str(base_path).startswith(str(FILES_ROOT)):
+        raise HTTPException(status_code=400, detail="Invalid path")
+
+    entries = []
+    for item in base_path.iterdir():
+        if item.is_dir():
+            entries.append(f"{item.name}/")
+        else:
+            entries.append(item.name)
+
+    entries.sort()
+    paginated = entries[offset:offset + limit]
+
+    return {
+        "total": len(entries),
+        "items": paginated
+    }
+
+@app.get("/download/{file_path:path}")
+def download_file(file_path: str):
+    full_path = (FILES_ROOT / file_path).resolve()
+
+    if not full_path.is_file() or not str(full_path).startswith(str(FILES_ROOT)):
+        raise HTTPException(status_code=404, detail="File not found")
+
+    return FileResponse(full_path, filename=full_path.name)
+

app/files/page.tsx

@@ -0,0 +1,135 @@
+// /var/www/makearmy.io/app/app/files/page.tsx
+"use client";
+
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+
+type FileItem = {
+  name: string;
+  isDir: boolean;
+  size: number;
+  mtime: number;
+};
+
+export default function FilesPage() {
+  const search = useSearchParams();
+  const router = useRouter();
+  const path = useMemo(() => search.get("path") || "/", [search]);
+
+  const [items, setItems] = useState<FileItem[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      setLoading(true);
+      setError(null);
+      try {
+        const res = await fetch(
+          `/api/files/list?path=${encodeURIComponent(path)}`
+        );
+        if (!res.ok) {
+          if (!cancelled) setError(`HTTP ${res.status}`);
+          return;
+        }
+        const json = await res.json();
+        if (!cancelled) setItems(json.items || []);
+      } catch (e: any) {
+        if (!cancelled) setError(e?.message || String(e));
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [path]);
+
+  const upPath = useMemo(() => {
+    if (path === "/") return null;
+    const parts = path.replace(/\/+$/, "").split("/").filter(Boolean);
+    parts.pop();
+    return "/" + parts.join("/");
+  }, [path]);
+
+  return (
+    <div className="p-6 text-sm">
+
+      <div className="mb-3">
+        <span className="opacity-70 mr-1">Path:</span>
+        <code>{path}</code>
+        {upPath && (
+          <>
+            <span className="mx-2 opacity-50">•</span>
+            <Link href={`/files?path=${encodeURIComponent(upPath)}`}>
+              Up one level
+            </Link>
+          </>
+        )}
+      </div>
+
+      {loading && <div>Loading…</div>}
+      {error && (
+        <div className="bg-red-900/60 text-red-200 p-3 rounded border border-red-800">
+          Error loading files: {error}
+        </div>
+      )}
+
+      {!loading && !error && items && (
+        <table className="w-full text-left mt-3 border-collapse">
+          <thead className="opacity-70">
+            <tr>
+              <th className="py-2 pr-4">Name</th>
+              <th className="py-2 pr-4">Type</th>
+              <th className="py-2 pr-4">Size</th>
+              <th className="py-2 pr-4">Modified</th>
+              <th className="py-2 pr-4"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((it) => {
+              const href = it.isDir
+                ? `/files?path=${encodeURIComponent(
+                    (path.endsWith("/") ? path : path + "/") + it.name
+                  )}`
+                : `/api/files/raw?path=${encodeURIComponent(
+                    (path.endsWith("/") ? path : path + "/") + it.name
+                  )}`;
+              const dl = it.isDir
+                ? null
+                : `/api/files/download?path=${encodeURIComponent(
+                    (path.endsWith("/") ? path : path + "/") + it.name
+                  )}`;
+
+              return (
+                <tr key={it.name} className="border-t border-white/10">
+                  <td className="py-2 pr-4">
+                    <Link href={href}>{it.name}</Link>
+                  </td>
+                  <td className="py-2 pr-4">{it.isDir ? "Dir" : "File"}</td>
+                  <td className="py-2 pr-4">
+                    {it.isDir ? "-" : `${it.size.toLocaleString()} B`}
+                  </td>
+                  <td className="py-2 pr-4">
+                    {new Date(it.mtime).toLocaleString()}
+                  </td>
+                  <td className="py-2 pr-4">
+                    {!it.isDir && dl && (
+                      <a href={dl} className="underline">
+                        Download
+                      </a>
+                    )}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}
+

app/laser-toolkit/_lib/conversions.ts

@@ -0,0 +1,39 @@
+// /var/www/makearmy.io/app/app/laser-toolkit/_lib/conversions.ts
+
+// ---------- DPI / LPI / DPCM ----------
+export function dpiToLpi(dpi: number) {
+  return dpi; // 1:1 if treating “lines” as rows in raster (common convention)
+}
+export function dpiToDpcm(dpi: number) {
+  return dpi / 2.54;
+}
+export function lpiToDpi(lpi: number) {
+  return lpi; // same note as above
+}
+export function lpiToDpcm(lpi: number) {
+  return lpi / 2.54;
+}
+export function dpcmToDpi(dpcm: number) {
+  return dpcm * 2.54;
+}
+export function dpcmToLpi(dpcm: number) {
+  return dpcm * 2.54;
+}
+
+// ---------- Power & Lens Scaler ----------
+// Simple “keep energy density roughly constant” heuristic:
+// newSpeed ≈ oldSpeed * (toPower / fromPower) * (fromField / toField)
+export function scaleSpeed(
+  oldSpeed_mm_s: number,
+  fromPower_W: number,
+  toPower_W: number,
+  fromField_mm: number,
+  toField_mm: number
+) {
+  if (fromPower_W <= 0 || toPower_W <= 0 || fromField_mm <= 0 || toField_mm <= 0) {
+    return oldSpeed_mm_s;
+  }
+  const k = (toPower_W / fromPower_W) * (fromField_mm / toField_mm);
+  return oldSpeed_mm_s * k;
+}
+

app/laser-toolkit/beam-spot-size/page.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import ToolShell from "@/components/toolkit/ToolShell";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+
+function num(v: string) {
+  const n = parseFloat(v);
+  return Number.isFinite(n) ? n : 0;
+}
+
+// Spot diameter (µm) ≈ 1.27 * M² * λ(µm) * f(mm) / D(mm)
+export default function Page() {
+  const [lambdaNm, setLambdaNm] = useState("1064"); // nm (default fiber)
+  const [focalMm, setFocalMm] = useState("160");   // mm
+  const [beamDm, setBeamDm] = useState("6");       // mm (input beam diameter at lens)
+  const [m2, setM2] = useState("1.3");
+
+  const dUm = useMemo(() => {
+    const lamUm = num(lambdaNm) / 1000; // convert nm -> µm
+    const f = num(focalMm);
+    const D = num(beamDm);
+    const M2 = Math.max(1, num(m2));
+    if (lamUm <= 0 || f <= 0 || D <= 0) return 0;
+    return 1.27 * M2 * lamUm * (f / D);
+  }, [lambdaNm, focalMm, beamDm, m2]);
+
+  const dMm = dUm / 1000;
+
+  return (
+    <ToolShell title="Beam Spot Size">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Inputs</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-3 sm:grid-cols-4">
+          <label className="text-[11px] sm:text-xs">
+            <div className="mb-1 text-muted-foreground">Wavelength (nm)</div>
+            <Input value={lambdaNm} onChange={(e) => setLambdaNm(e.target.value)} />
+            <div className="mt-1 text-[11px] text-muted-foreground space-x-2">
+              <button type="button" className="underline" onClick={() => setLambdaNm("1064")}>
+                Fiber (1064 nm)
+              </button>
+              <button type="button" className="underline" onClick={() => setLambdaNm("10600")}>
+                CO₂ (10600 nm)
+              </button>
+            </div>
+          </label>
+
+          <label className="text-[11px] sm:text-xs">
+            <div className="mb-1 text-muted-foreground">Focal length (mm)</div>
+            <Input value={focalMm} onChange={(e) => setFocalMm(e.target.value)} />
+          </label>
+
+          <label className="text-[11px] sm:text-xs">
+            <div className="mb-1 text-muted-foreground">Beam Ø @ lens (mm)</div>
+            <Input value={beamDm} onChange={(e) => setBeamDm(e.target.value)} />
+          </label>
+
+          <label className="text-[11px] sm:text-xs">
+            <div className="mb-1 text-muted-foreground">M²</div>
+            <Input value={m2} onChange={(e) => setM2(e.target.value)} />
+          </label>
+        </CardContent>
+      </Card>
+
+      <Card className="mt-4">
+        <CardHeader>
+          <CardTitle className="text-base">Result</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-3 sm:grid-cols-2">
+          <div>
+            <div className="text-sm text-muted-foreground">Spot diameter</div>
+            <div className="text-lg">{dMm.toFixed(4)} mm</div>
+            <div className="text-xs text-muted-foreground">{dUm.toFixed(2)} µm</div>
+          </div>
+          <div>
+            <div className="text-sm text-muted-foreground">Spot radius</div>
+            <div className="text-lg">{(dMm / 2).toFixed(4)} mm</div>
+            <div className="text-xs text-muted-foreground">{(dUm / 2).toFixed(2)} µm</div>
+          </div>
+        </CardContent>
+      </Card>
+    </ToolShell>
+  );
+}
+

app/laser-toolkit/dpi-lpi-dpcm/page.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import ToolShell from "@/components/toolkit/ToolShell";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+
+function num(v: string) {
+  const n = parseFloat(v);
+  return Number.isFinite(n) ? n : 0;
+}
+
+export default function Page() {
+  const [dpi, setDpi] = useState("300");
+  const [lpi, setLpi] = useState("300");
+  const [dpcm, setDpcm] = useState("118.11");
+
+  const [active, setActive] = useState<"dpi" | "lpi" | "dpcm">("dpi");
+
+  // keep all three in sync based on the most recently edited field
+  useEffect(() => {
+    const D = num(dpi), L = num(lpi), C = num(dpcm);
+    if (active === "dpi") {
+      const d = Math.max(1e-9, D);
+      setDpcm((d / 2.54).toFixed(5));
+      setLpi(D.toFixed(2)); // LPI≈DPI for raster row spacing (workflow convention)
+    } else if (active === "lpi") {
+      const l = Math.max(1e-9, L);
+      setDpi(L.toFixed(2));
+      setDpcm((L / 2.54).toFixed(5));
+    } else {
+      const c = Math.max(1e-9, C);
+      setDpi((c * 2.54).toFixed(2));
+      setLpi((c * 2.54).toFixed(2));
+    }
+  }, [dpi, lpi, dpcm, active]);
+
+  const gapFromDpiMm = 25.4 / Math.max(1e-9, num(dpi));
+  const gapFromLpiMm = 25.4 / Math.max(1e-9, num(lpi));
+
+  return (
+    <ToolShell title="DPI / LPI / DPCM Converter">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Values</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-3 sm:grid-cols-3">
+          <label className="text-[11px] sm:text-xs">
+            <div className="mb-1 text-muted-foreground">DPI</div>
+            <Input
+              inputMode="decimal"
+              value={dpi}
+              onChange={(e) => {
+                setActive("dpi");
+                setDpi(e.target.value);
+              }}
+            />
+          </label>
+
+          <label className="text-[11px] sm:text-xs">
+            <div className="mb-1 text-muted-foreground">LPI</div>
+            <Input
+              inputMode="decimal"
+              value={lpi}
+              onChange={(e) => {
+                setActive("lpi");
+                setLpi(e.target.value);
+              }}
+            />
+          </label>
+
+          <label className="text-[11px] sm:text-xs">
+            <div className="mb-1 text-muted-foreground">DPCM</div>
+            <Input
+              inputMode="decimal"
+              value={dpcm}
+              onChange={(e) => {
+                setActive("dpcm");
+                setDpcm(e.target.value);
+              }}
+            />
+          </label>
+        </CardContent>
+      </Card>
+
+      <Card className="mt-4">
+        <CardHeader>
+          <CardTitle className="text-base">Derived spacing</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-3 sm:grid-cols-3">
+          <div>
+            <div className="text-sm text-muted-foreground">Pixel/line gap from DPI</div>
+            <div className="text-lg">{gapFromDpiMm.toFixed(4)} mm</div>
+            <div className="text-xs text-muted-foreground">{(gapFromDpiMm * 1000).toFixed(1)} µm</div>
+          </div>
+          <div>
+            <div className="text-sm text-muted-foreground">Line gap from LPI</div>
+            <div className="text-lg">{gapFromLpiMm.toFixed(4)} mm</div>
+            <div className="text-xs text-muted-foreground">{(gapFromLpiMm * 1000).toFixed(1)} µm</div>
+          </div>
+          <div>
+            <div className="text-sm text-muted-foreground">Pixels/cm from DPCM</div>
+            <div className="text-lg">{num(dpcm).toFixed(2)} px/cm</div>
+            <div className="text-xs text-muted-foreground">
+              {(num(dpcm) * 2.54).toFixed(2)} px/in
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </ToolShell>
+  );
+}
+

app/laser-toolkit/hatch-overlap/page.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import ToolShell from "@/components/toolkit/ToolShell";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+
+function num(v: string) {
+  const n = parseFloat(v);
+  return Number.isFinite(n) ? n : 0;
+}
+
+const UM_PER_INCH = 25400;
+
+export default function Page() {
+  const [spotUm, setSpotUm] = useState("60");
+  const [gapUm, setGapUm] = useState("40");
+  const [lpi, setLpi] = useState("635"); // 635 LPI ≈ 40 µm gap
+
+  // Keep gap and LPI linked both ways
+  function onGapChange(v: string) {
+    setGapUm(v);
+    const g = num(v);
+    setLpi(g > 0 ? (UM_PER_INCH / g).toFixed(2) : "");
+  }
+  function onLpiChange(v: string) {
+    setLpi(v);
+    const L = num(v);
+    setGapUm(L > 0 ? (UM_PER_INCH / L).toFixed(2) : "");
+  }
+
+  const overlap = useMemo(() => {
+    const d = num(spotUm);
+    const g = num(gapUm);
+    if (d <= 0 || g <= 0) return 0;
+    return Math.max(0, Math.min(100, 100 * (1 - g / d)));
+  }, [spotUm, gapUm]);
+
+  const gapMm = (num(gapUm) / 1000) || 0;
+  const spotMm = (num(spotUm) / 1000) || 0;
+
+  return (
+    <ToolShell title="Hatch Overlap">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Inputs</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-3 sm:grid-cols-3">
+          <label className="text-[11px] sm:text-xs">
+            <div className="mb-1 text-muted-foreground">Spot size (µm)</div>
+            <Input inputMode="decimal" value={spotUm} onChange={(e) => setSpotUm(e.target.value)} />
+          </label>
+          <label className="text-[11px] sm:text-xs">
+            <div className="mb-1 text-muted-foreground">Hatch gap (µm)</div>
+            <Input inputMode="decimal" value={gapUm} onChange={(e) => onGapChange(e.target.value)} />
+          </label>
+          <label className="text-[11px] sm:text-xs">
+            <div className="mb-1 text-muted-foreground">Hatch LPI</div>
+            <Input inputMode="decimal" value={lpi} onChange={(e) => onLpiChange(e.target.value)} />
+          </label>
+        </CardContent>
+      </Card>
+
+      <Card className="mt-4">
+        <CardHeader>
+          <CardTitle className="text-base">Result</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-3 sm:grid-cols-4">
+          <div>
+            <div className="text-sm text-muted-foreground">Overlap</div>
+            <div className="text-lg">{overlap.toFixed(1)}%</div>
+          </div>
+          <div>
+            <div className="text-sm text-muted-foreground">Gap</div>
+            <div className="text-lg">{gapMm.toFixed(4)} mm</div>
+            <div className="text-xs text-muted-foreground">{num(gapUm).toFixed(1)} µm</div>
+          </div>
+          <div>
+            <div className="text-sm text-muted-foreground">Spot Ø</div>
+            <div className="text-lg">{spotMm.toFixed(4)} mm</div>
+            <div className="text-xs text-muted-foreground">{num(spotUm).toFixed(1)} µm</div>
+          </div>
+          <div>
+            <div className="text-sm text-muted-foreground">From LPI</div>
+            <div className="text-lg">
+              {(UM_PER_INCH / Math.max(1, num(lpi)) / 1000).toFixed(4)} mm
+            </div>
+            <div className="text-xs text-muted-foreground">
+              {(UM_PER_INCH / Math.max(1, num(lpi))).toFixed(1)} µm
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </ToolShell>
+  );
+}
+

app/laser-toolkit/job-time-estimator/page.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import ToolShell from "@/components/toolkit/ToolShell";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+
+function num(v: string) {
+  const n = parseFloat(v);
+  return Number.isFinite(n) ? n : 0;
+}
+
+function fmtTime(seconds: number) {
+  if (!Number.isFinite(seconds) || seconds <= 0) return "0 s";
+  const s = Math.round(seconds);
+  const m = Math.floor(s / 60);
+  const rem = s % 60;
+  if (m < 60) return `${m}m ${rem}s`;
+  const h = Math.floor(m / 60);
+  const mm = m % 60;
+  return `${h}h ${mm}m`;
+}
+
+export default function Page() {
+  const [mode, setMode] = useState<"raster" | "vector">("raster");
+  const [passes, setPasses] = useState("1");
+
+  // raster
+  const [width, setWidth] = useState("100");  // mm
+  const [height, setHeight] = useState("100");// mm
+  const [dpi, setDpi] = useState("300");
+  const [speedRaster, setSpeedRaster] = useState("800"); // mm/s
+  const [overheadR, setOverheadR] = useState("1.10");    // factor
+
+  // vector
+  const [length, setLength] = useState("500"); // mm
+  const [speedVector, setSpeedVector] = useState("50");  // mm/s
+  const [overheadV, setOverheadV] = useState("1.05");   // factor
+
+  const computed = useMemo(() => {
+    const p = Math.max(1, Math.round(num(passes)));
+    if (mode === "raster") {
+      const w = num(width), h = num(height), D = num(dpi), v = num(speedRaster), k = Math.max(0.5, num(overheadR));
+      if (w <= 0 || h <= 0 || D <= 0 || v <= 0) return { t: 0, gapMm: 0, gapUm: 0, rows: 0 };
+      const gapMm = 25.4 / D;
+      const gapUm = gapMm * 1000;
+      const rows = h / gapMm;
+      const t = rows * (w / v) * p * k;
+      return { t, gapMm, gapUm, rows };
+    } else {
+      const L = num(length), v = num(speedVector), k = Math.max(0.5, num(overheadV));
+      if (L <= 0 || v <= 0) return { t: 0, gapMm: 0, gapUm: 0, rows: 0 };
+      const t = (L / v) * Math.max(1, Math.round(num(passes))) * k;
+      return { t, gapMm: 0, gapUm: 0, rows: 0 };
+    }
+  }, [mode, passes, width, height, dpi, speedRaster, overheadR, length, speedVector, overheadV]);
+
+  return (
+    <ToolShell title="Job Time Estimator">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Mode</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-3 sm:grid-cols-4">
+          <label className="text-[11px] sm:text-xs col-span-2 sm:col-span-1">
+            <div className="mb-1 text-muted-foreground">Type</div>
+            <select
+              className="w-full rounded-md border bg-background px-3 py-2 text-sm"
+              value={mode}
+              onChange={(e) => (setMode(e.target.value as any))}
+            >
+              <option value="raster">Raster</option>
+              <option value="vector">Vector</option>
+            </select>
+          </label>
+
+          <label className="text-[11px] sm:text-xs">
+            <div className="mb-1 text-muted-foreground">Passes</div>
+            <Input inputMode="numeric" value={passes} onChange={(e) => setPasses(e.target.value)} />
+          </label>
+        </CardContent>
+      </Card>
+
+      {mode === "raster" ? (
+        <Card className="mt-4">
+          <CardHeader>
+            <CardTitle className="text-base">Raster Inputs</CardTitle>
+          </CardHeader>
+          <CardContent className="grid gap-3 sm:grid-cols-5">
+            <label className="text-[11px] sm:text-xs">
+              <div className="mb-1 text-muted-foreground">Width (mm)</div>
+              <Input value={width} onChange={(e) => setWidth(e.target.value)} />
+            </label>
+            <label className="text-[11px] sm:text-xs">
+              <div className="mb-1 text-muted-foreground">Height (mm)</div>
+              <Input value={height} onChange={(e) => setHeight(e.target.value)} />
+            </label>
+            <label className="text-[11px] sm:text-xs">
+              <div className="mb-1 text-muted-foreground">DPI</div>
+              <Input value={dpi} onChange={(e) => setDpi(e.target.value)} />
+            </label>
+            <label className="text-[11px] sm:text-xs">
+              <div className="mb-1 text-muted-foreground">Speed (mm/s)</div>
+              <Input value={speedRaster} onChange={(e) => setSpeedRaster(e.target.value)} />
+            </label>
+            <label className="text-[11px] sm:text-xs">
+              <div className="mb-1 text-muted-foreground">Overhead factor</div>
+              <Input value={overheadR} onChange={(e) => setOverheadR(e.target.value)} />
+            </label>
+          </CardContent>
+        </Card>
+      ) : (
+        <Card className="mt-4">
+          <CardHeader>
+            <CardTitle className="text-base">Vector Inputs</CardTitle>
+          </CardHeader>
+          <CardContent className="grid gap-3 sm:grid-cols-3">
+            <label className="text-[11px] sm:text-xs">
+              <div className="mb-1 text-muted-foreground">Total path length (mm)</div>
+              <Input value={length} onChange={(e) => setLength(e.target.value)} />
+            </label>
+            <label className="text-[11px] sm:text-xs">
+              <div className="mb-1 text-muted-foreground">Speed (mm/s)</div>
+              <Input value={speedVector} onChange={(e) => setSpeedVector(e.target.value)} />
+            </label>
+            <label className="text-[11px] sm:text-xs">
+              <div className="mb-1 text-muted-foreground">Overhead factor</div>
+              <Input value={overheadV} onChange={(e) => setOverheadV(e.target.value)} />
+            </label>
+          </CardContent>
+        </Card>
+      )}
+
+      <Card className="mt-4">
+        <CardHeader>
+          <CardTitle className="text-base">Estimate</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-3 sm:grid-cols-3">
+          <div>
+            <div className="text-sm text-muted-foreground">Estimated time</div>
+            <div className="text-lg">{fmtTime(computed.t)}</div>
+          </div>
+          {mode === "raster" && (
+            <>
+              <div>
+                <div className="text-sm text-muted-foreground">Scan gap</div>
+                <div className="text-lg">{computed.gapMm.toFixed(4)} mm</div>
+                <div className="text-xs text-muted-foreground">{computed.gapUm.toFixed(1)} µm</div>
+              </div>
+              <div>
+                <div className="text-sm text-muted-foreground">Line count</div>
+                <div className="text-lg">{computed.rows.toFixed(0)}</div>
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Footnote */}
+      <p className="mt-4 text-xs leading-relaxed text-muted-foreground">
+        <span className="font-semibold">Overhead factor*</span> accounts for real-world slowdowns:
+        acceleration/decelleration, jump moves, polygon delays, laser on/off timing, overscan,
+        bidirectional settle time, and controller latency.{" "}
+        <span className="font-semibold">Typical values:</span> Vector cuts/marks{" "}
+        <span className="font-medium">1.05–1.15</span> (simple paths, long runs closer to 1.05; tiny
+        segments or lots of jumps closer to 1.15). Raster engraving{" "}
+        <span className="font-medium">1.10–1.40</span> (lower DPI and long sweeps near 1.10;
+        very high DPI or short scan width near 1.30–1.40). Galvo systems often have lower overhead
+        at small sizes; gantry systems tend to have higher overhead at high DPI/short strokes.
+      </p>
+    </ToolShell>
+  );
+}
+

app/laser-toolkit/page.tsx

@@ -0,0 +1,124 @@
+import Link from "next/link";
+import { Metadata } from "next";
+import { Card, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  Gauge,
+  Ruler,
+  Timer,
+  Focus,
+  MoveRight,
+  ChevronRight,
+} from "lucide-react";
+
+export const metadata: Metadata = {
+  title: "Laser Toolkit",
+  description: "Quick utilities for scaling settings and converting resolution units.",
+};
+
+type Tool = {
+  slug: string;
+  title: string;
+  description: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+};
+
+const TOOLS: Tool[] = [
+  {
+    slug: "power-lens-scaler",
+    title: "Power & Lens Scaler",
+    description: "Scale speed, power, and frequency when wattage or lens field size changes.",
+    icon: Gauge,
+  },
+  {
+    slug: "dpi-lpi-dpcm",
+    title: "DPI ▸ LPI ▸ DPCM",
+    description: "Convert between DPI, LPI, and DPCM. Bidirectional. Assumes LPI≈DPI for raster rows (common workflow).",
+    icon: Ruler,
+  },
+
+  // NEW
+  {
+    slug: "pulse-overlap",
+    title: "Pulse Overlap",
+    description:
+      "Given speed (mm/s), frequency (kHz) and spot size (µm), compute pulse spacing, overlap %, and pulses/mm.",
+    icon: MoveRight,
+  },
+  {
+    slug: "hatch-overlap",
+    title: "Hatch Overlap",
+    description:
+      "Given spot size (µm) and hatch gap (µm) or LPI, compute hatch overlap %. Great for vector fills.",
+    icon: Ruler,
+  },
+  {
+    slug: "job-time-estimator",
+    title: "Job Time Estimator",
+    description:
+      "Quick estimate for raster or vector jobs. Uses dimensions, DPI/LPI or path length, speed, passes, and a small overhead factor.",
+    icon: Timer,
+  },
+  {
+    slug: "beam-spot-size",
+    title: "Beam Spot Size",
+    description:
+      "Approximate diffraction-limited spot size from wavelength, focal length, beam diameter, and M².",
+    icon: Focus,
+  },
+];
+
+export default function ToolkitSplash() {
+  return (
+    <div className="mx-auto w-full max-w-6xl px-4 py-8">
+      {/* Header */}
+      <div className="mb-6 flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight">Laser Toolkit</h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Handy calculators and converters for daily laser work —{" "}
+            <span className="italic">hover for details</span>.
+          </p>
+        </div>
+
+        <Button asChild variant="outline">
+          <Link href="/">Back to Main Menu</Link>
+        </Button>
+      </div>
+
+      {/* Grid of tools */}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {TOOLS.map((tool) => (
+          <Link key={tool.slug} href={`/laser-toolkit/${tool.slug}`} className="group">
+            <Card className="relative overflow-hidden transition-shadow hover:shadow-md">
+              <CardHeader className="p-4">
+                <div className="flex items-start gap-3">
+                  <div className="rounded-xl border bg-card p-2">
+                    <tool.icon className="h-5 w-5" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <CardTitle className="text-base">{tool.title}</CardTitle>
+
+                    {/* Full description on hover (no truncation) */}
+                    <p
+                      className="
+                        max-h-0 overflow-hidden text-xs text-muted-foreground opacity-0
+                        transition-all duration-200
+                        group-hover:max-h-96 group-hover:opacity-100
+                        mt-1 whitespace-pre-wrap
+                      "
+                    >
+                      {tool.description}
+                    </p>
+                  </div>
+                  <ChevronRight className="mt-1 h-4 w-4 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
+                </div>
+              </CardHeader>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
+

app/laser-toolkit/power-lens-scaler/page.tsx

@@ -0,0 +1,378 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import ToolShell from '@/components/toolkit/ToolShell';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+
+type Mode = 'vector' | 'raster' | 'irradiance' | 'pulse';
+
+function num(v: string, d = 0): number {
+  const n = Number(v);
+  return Number.isFinite(n) ? n : d;
+}
+function clamp(v: number, lo: number, hi: number) {
+  return Math.max(lo, Math.min(hi, v));
+}
+
+/** Default curve parameters based on rated power (very rough, editable). */
+function defaultCurveForRatedW(W: number) {
+  // Peak frequency guess (kHz). Tune these to your hardware fleet.
+  let fPeak = 50;
+  if (W <= 35) fPeak = 25;
+  else if (W <= 60) fPeak = 50;
+  else if (W <= 90) fPeak = 75;
+  else fPeak = 100;
+
+  // Log-normal width parameter (dimensionless). Smaller = narrower peak.
+  const sigma = 0.35;
+  return { fPeak, sigma };
+}
+
+/** Log-normal shaped efficiency curve normalized to 1 at fPeak. */
+function etaOfF(f_kHz: number, fPeak_kHz: number, sigma: number) {
+  const f = Math.max(f_kHz, 0.1);
+  const r = Math.log(f / Math.max(fPeak_kHz, 0.1));
+  const eta = Math.exp(-0.5 * (r / Math.max(sigma, 0.05)) ** 2);
+  // Keep within [0.1, 1] to avoid absurd zeros; adjust if you want tails to hit 0.
+  return clamp(eta, 0.1, 1);
+}
+
+/** Area factor from field (proxy for spot area scaling) */
+function areaFactorFromField(fieldSrc: number, fieldDst: number) {
+  if (fieldSrc <= 0 || fieldDst <= 0) return 1;
+  const r = fieldDst / fieldSrc;
+  return r * r;
+}
+
+export default function Page() {
+  // MODE
+  const [mode, setMode] = useState<Mode>('vector');
+
+  // SOURCE machine/lens
+  const [wSrc, setWSrc] = useState('100');      // rated W
+  const [pSrc, setPSrc] = useState('50');       // %
+  const [vSrc, setVSrc] = useState('300');      // mm/s
+  const [hSrc, setHSrc] = useState('0.1');      // mm (raster line spacing)
+  const [fSrc, setFSrc] = useState('30');       // kHz
+  const [tauSrc, setTauSrc] = useState('100');  // ns pulse width
+  const [fieldSrc, setFieldSrc] = useState('110'); // mm
+
+  // DEST machine/lens
+  const [wDst, setWDst] = useState('50');       // rated W
+  const [vDst, setVDst] = useState('300');      // mm/s
+  const [hDst, setHDst] = useState('0.1');      // mm
+  const [fDst, setFDst] = useState('30');       // kHz
+  const [tauDst, setTauDst] = useState('100');  // ns
+  const [fieldDst, setFieldDst] = useState('70');  // mm
+
+  // Curve tuning / advanced
+  const [advanced, setAdvanced] = useState(false);
+  const srcDefaults = defaultCurveForRatedW(num(wSrc, 50));
+  const dstDefaults = defaultCurveForRatedW(num(wDst, 50));
+  const [fPeakSrc, setFPeakSrc] = useState(String(srcDefaults.fPeak));
+  const [sigmaSrc, setSigmaSrc] = useState(String(srcDefaults.sigma));
+  const [fPeakDst, setFPeakDst] = useState(String(dstDefaults.fPeak));
+  const [sigmaDst, setSigmaDst] = useState(String(dstDefaults.sigma));
+
+  // Prefer adjusting speed/freq instead of exceeding 100% power
+  const [preferSpeedAdjust, setPreferSpeedAdjust] = useState(true);
+
+  const result = useMemo(() => {
+    const W1 = Math.max(num(wSrc, 1), 0.1);
+    const W2 = Math.max(num(wDst, 1), 0.1);
+    const p1 = clamp(num(pSrc, 0), 0, 100) / 100; // 0..1
+    const v1 = Math.max(num(vSrc, 0), 0.0001);
+    const v2 = Math.max(num(vDst, 0), 0.0001);
+    const h1 = Math.max(num(hSrc, 0), 0.000001);
+    const h2 = Math.max(num(hDst, 0), 0.000001);
+    const f1k = Math.max(num(fSrc, 0), 0.1);
+    const f2k = Math.max(num(fDst, 0), 0.1);
+    const tau1_ns = Math.max(num(tauSrc, 0), 0.1);
+    const tau2_ns = Math.max(num(tauDst, 0), 0.1);
+    const aFac = areaFactorFromField(num(fieldSrc, 0), num(fieldDst, 0));
+
+    const fpk1 = Math.max(num(fPeakSrc, defaultCurveForRatedW(W1).fPeak), 0.1);
+    const sig1 = Math.max(num(sigmaSrc, defaultCurveForRatedW(W1).sigma), 0.05);
+    const fpk2 = Math.max(num(fPeakDst, defaultCurveForRatedW(W2).fPeak), 0.1);
+    const sig2 = Math.max(num(sigmaDst, defaultCurveForRatedW(W2).sigma), 0.05);
+
+    // Efficiency factors (0..1)
+    const eta1 = etaOfF(f1k, fpk1, sig1);
+    const eta2 = etaOfF(f2k, fpk2, sig2);
+
+    // Effective average power (W) after frequency efficiency
+    const P1eff = W1 * p1 * eta1;
+
+    let p2Frac = p1; // destination power fraction (0..1)
+    let suggestedSpeed: number | undefined;
+    let suggestedFreq_kHz: number | undefined;
+
+    // Helper: compute required P2eff for each match, then map to power%
+    const powerPercentFromEff = (P2effReq: number) => {
+      // P2eff = W2 * p2 * eta2  => p2 = P2eff / (W2*eta2)
+      return P2effReq / (W2 * eta2);
+    };
+
+    if (mode === 'vector') {
+      // Match energy per length: P1eff / v1 = P2eff / v2
+      const P2effReq = P1eff * (v2 / v1);
+      p2Frac = powerPercentFromEff(P2effReq);
+      if (preferSpeedAdjust && p2Frac > 1) {
+        suggestedSpeed = v1 * (W2 * eta2) / (W1 * eta1 * p1); // from p2<=1
+        p2Frac = 1;
+      }
+    } else if (mode === 'raster') {
+      // Match energy per area: P1eff/(v1*h1) = P2eff/(v2*h2)
+      const P2effReq = P1eff * ((v2 * h2) / (v1 * h1));
+      p2Frac = powerPercentFromEff(P2effReq);
+      if (preferSpeedAdjust && p2Frac > 1) {
+        suggestedSpeed = v1 * (W2 * eta2) * (h1 / h2) / (W1 * eta1 * p1);
+        p2Frac = 1;
+      }
+    } else if (mode === 'irradiance') {
+      // Match irradiance: (P1eff/A1) = (P2eff/A2)  => P2eff = P1eff*(A2/A1)
+      const P2effReq = P1eff * aFac;
+      p2Frac = powerPercentFromEff(P2effReq);
+      // no speed suggestion; consider lens/field change if >100%
+    } else if (mode === 'pulse') {
+      // Match pulse energy: Ep1 = P1eff / f1  (kHz → Hz)
+      const f1 = f1k * 1e3, f2 = f2k * 1e3;
+      const Ep1 = P1eff / f1; // J
+      // Require P2eff = Ep1 * f2
+      const P2effReq = Ep1 * f2;
+      p2Frac = powerPercentFromEff(P2effReq);
+
+      if (preferSpeedAdjust && p2Frac > 1) {
+        // Suggest lowering f2 to keep p2<=1: P2eff_max = W2*eta2*1
+        // f2_req = P2eff_max / Ep1
+        const f2_req = (W2 * eta2) / Ep1; // Hz
+        suggestedFreq_kHz = Math.max(f2_req / 1e3, 0.1);
+        p2Frac = 1;
+      }
+    }
+
+    // Compute pulse metrics (for display) using **destination** settings
+    const p2Clamped = clamp(p2Frac, 0, 2);
+    const P2eff = W2 * p2Clamped * eta2;
+    const f2Hz = f2k * 1e3;
+    const tau2_s = tau2_ns * 1e-9;
+    const Ep2 = P2eff / f2Hz; // J
+    const Ppeak2 = Ep2 / Math.max(tau2_s, 1e-12); // W, shape factor ~1 assumed
+
+    return {
+      p2Percent: clamp(p2Clamped * 100, 0, 200),
+      suggestedSpeed,
+      suggestedFreq_kHz,
+      eta1,
+      eta2,
+      P1eff,
+      P2eff,
+      Ep2,
+      Ppeak2,
+      aFac,
+    };
+  }, [
+    mode, wSrc, wDst, pSrc, vSrc, vDst, hSrc, hDst, fSrc, fDst, tauSrc, tauDst,
+    fieldSrc, fieldDst, preferSpeedAdjust, fPeakSrc, sigmaSrc, fPeakDst, sigmaDst,
+  ]);
+
+  return (
+    <ToolShell
+      title="Power, Frequency & Lens Scaler"
+      description="Match settings across different lasers and lenses using effective power with a frequency efficiency curve. Includes pulse width to report pulse energy and peak power."
+    >
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>Match Mode</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-4 md:grid-cols-2">
+          <div>
+            <Label className="text-sm">Quantity to Match</Label>
+            <Select value={mode} onValueChange={(v: Mode) => setMode(v)}>
+              <SelectTrigger><SelectValue placeholder="Mode" /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="vector">Vector: Energy per length (J/mm)</SelectItem>
+                <SelectItem value="raster">Raster: Energy per area (J/mm²)</SelectItem>
+                <SelectItem value="irradiance">Irradiance: W/mm² (spot/field)</SelectItem>
+                <SelectItem value="pulse">Pulse energy: J (fiber)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <label className="flex items-center gap-2">
+            <input
+              id="preferSpeed"
+              type="checkbox"
+              className="h-4 w-4"
+              checked={preferSpeedAdjust}
+              onChange={(e) => setPreferSpeedAdjust(e.target.checked)}
+            />
+            <span className="text-sm">If Power % &gt; 100, prefer adjusting speed/frequency</span>
+          </label>
+        </CardContent>
+      </Card>
+
+      {/* Source */}
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>Source (what you have)</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-4 md:grid-cols-3">
+          <div>
+            <Label className="text-sm">Rated power (W)</Label>
+            <Input value={wSrc} onChange={(e) => setWSrc(e.target.value)} inputMode="decimal" />
+          </div>
+          <div>
+            <Label className="text-sm">Power (%)</Label>
+            <Input value={pSrc} onChange={(e) => setPSrc(e.target.value)} inputMode="decimal" />
+          </div>
+          <div>
+            <Label className="text-sm">Frequency (kHz)</Label>
+            <Input value={fSrc} onChange={(e) => setFSrc(e.target.value)} inputMode="decimal" />
+          </div>
+          <div>
+            <Label className="text-sm">Pulse width (ns)</Label>
+            <Input value={tauSrc} onChange={(e) => setTauSrc(e.target.value)} inputMode="decimal" />
+          </div>
+          <div className={cn(mode !== 'irradiance' ? 'block' : 'hidden')}>
+            <Label className="text-sm">Speed (mm/s)</Label>
+            <Input value={vSrc} onChange={(e) => setVSrc(e.target.value)} inputMode="decimal" />
+          </div>
+          <div className={cn(mode === 'raster' ? 'block' : 'hidden')}>
+            <Label className="text-sm">Line spacing h (mm)</Label>
+            <Input value={hSrc} onChange={(e) => setHSrc(e.target.value)} inputMode="decimal" />
+          </div>
+          <div>
+            <Label className="text-sm">Lens field size (mm)</Label>
+            <Input value={fieldSrc} onChange={(e) => setFieldSrc(e.target.value)} inputMode="decimal" />
+          </div>
+        </CardContent>
+
+        <CardContent className="pt-0">
+          <button
+            className="text-xs underline text-muted-foreground"
+            onClick={() => setAdvanced((s) => !s)}
+          >
+            {advanced ? 'Hide' : 'Show'} advanced frequency curve
+          </button>
+          <div className={cn('mt-3 grid gap-4 md:grid-cols-3', advanced ? 'block' : 'hidden')}>
+            <div>
+              <Label className="text-sm">Peak freq fₚ (kHz)</Label>
+              <Input value={fPeakSrc} onChange={(e) => setFPeakSrc(e.target.value)} inputMode="decimal" />
+            </div>
+            <div>
+              <Label className="text-sm">Curve width σ (log-normal)</Label>
+              <Input value={sigmaSrc} onChange={(e) => setSigmaSrc(e.target.value)} inputMode="decimal" />
+            </div>
+            <div className="flex items-end text-xs text-muted-foreground">
+              η(f) is log-normal; 1.0 at fₚ, rolls off by σ.
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Destination */}
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>Destination (what you want to run on)</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-4 md:grid-cols-3">
+          <div>
+            <Label className="text-sm">Rated power (W)</Label>
+            <Input value={wDst} onChange={(e) => setWDst(e.target.value)} inputMode="decimal" />
+          </div>
+          <div>
+            <Label className="text-sm">Frequency (kHz)</Label>
+            <Input value={fDst} onChange={(e) => setFDst(e.target.value)} inputMode="decimal" />
+          </div>
+          <div>
+            <Label className="text-sm">Pulse width (ns)</Label>
+            <Input value={tauDst} onChange={(e) => setTauDst(e.target.value)} inputMode="decimal" />
+          </div>
+          <div className={cn(mode !== 'irradiance' ? 'block' : 'hidden')}>
+            <Label className="text-sm">Speed (mm/s)</Label>
+            <Input value={vDst} onChange={(e) => setVDst(e.target.value)} inputMode="decimal" />
+          </div>
+          <div className={cn(mode === 'raster' ? 'block' : 'hidden')}>
+            <Label className="text-sm">Line spacing h (mm)</Label>
+            <Input value={hDst} onChange={(e) => setHDst(e.target.value)} inputMode="decimal" />
+          </div>
+          <div>
+            <Label className="text-sm">Lens field size (mm)</Label>
+            <Input value={fieldDst} onChange={(e) => setFieldDst(e.target.value)} inputMode="decimal" />
+          </div>
+        </CardContent>
+
+        <CardContent className={cn('pt-0', advanced ? 'block' : 'hidden')}>
+          <div className="mt-3 grid gap-4 md:grid-cols-3">
+            <div>
+              <Label className="text-sm">Peak freq fₚ (kHz)</Label>
+              <Input value={fPeakDst} onChange={(e) => setFPeakDst(e.target.value)} inputMode="decimal" />
+            </div>
+            <div>
+              <Label className="text-sm">Curve width σ (log-normal)</Label>
+              <Input value={sigmaDst} onChange={(e) => setSigmaDst(e.target.value)} inputMode="decimal" />
+            </div>
+            <div className="flex items-end text-xs text-muted-foreground">
+              Adjust if you know your machine’s real power–frequency curve.
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Result */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Result</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <div className="text-2xl font-semibold">
+            Suggested Power (dest): {result.p2Percent.toFixed(1)}%
+          </div>
+
+          {typeof result.suggestedSpeed === 'number' && mode !== 'pulse' && (
+            <p className="text-sm">
+              To keep Power ≤ 100%, try destination speed ≈{' '}
+              <span className="font-medium">{result.suggestedSpeed.toFixed(1)} mm/s</span>.
+            </p>
+          )}
+
+          {typeof result.suggestedFreq_kHz === 'number' && mode === 'pulse' && (
+            <p className="text-sm">
+              To keep Power ≤ 100%, try destination frequency ≈{' '}
+              <span className="font-medium">{result.suggestedFreq_kHz.toFixed(0)} kHz</span>.
+            </p>
+          )}
+
+          <div className="mt-3 grid gap-2 md:grid-cols-3 text-sm">
+            <div>
+              <div className="text-muted-foreground">η(f) source / dest</div>
+              <div className="font-medium">{result.eta1.toFixed(3)} / {result.eta2.toFixed(3)}</div>
+            </div>
+            <div>
+              <div className="text-muted-foreground">Dest pulse energy</div>
+              <div className="font-medium">
+                {(result.Ep2 >= 1e-3 ? (result.Ep2 * 1e3).toFixed(3) + ' mJ' : (result.Ep2 * 1e6).toFixed(1) + ' µJ')}
+              </div>
+            </div>
+            <div>
+              <div className="text-muted-foreground">Dest peak power</div>
+              <div className="font-medium">{(result.Ppeak2 / 1000).toFixed(1)} kW</div>
+            </div>
+          </div>
+
+          <p className="text-xs text-muted-foreground mt-2">
+            Assumptions: Effective power includes a frequency efficiency factor η(f). Peak power uses a rectangular pulse
+            approximation (shape factor ≈ 1). For real MOPA sources, pulse shape and
+            true power–frequency maps vary by model; adjust f<sub>p</sub> and σ if you have vendor curves.
+          </p>
+        </CardContent>
+      </Card>
+    </ToolShell>
+  );
+}
+

app/laser-toolkit/pulse-overlap/page.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import ToolShell from "@/components/toolkit/ToolShell";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+
+function num(v: string) {
+  const n = parseFloat(v);
+  return Number.isFinite(n) ? n : 0;
+}
+
+export default function Page() {
+  const [speed, setSpeed] = useState("800"); // mm/s
+  const [freq, setFreq] = useState("60");    // kHz
+  const [spotUm, setSpotUm] = useState("50");// µm
+
+  const result = useMemo(() => {
+    const v = num(speed);      // mm/s
+    const f = num(freq);       // kHz
+    const dUm = num(spotUm);   // µm
+
+    if (v <= 0 || f <= 0 || dUm <= 0) {
+      return { spacingUm: 0, spacingMm: 0, overlapPct: 0, pulsesPerMm: 0 };
+    }
+
+    // distance per pulse
+    const spacingUm = v / f;           // µm  (derives from v(mm/s) / (f(kHz)*1000) * 1000)
+    const spacingMm = spacingUm / 1000;
+    const overlapPct = Math.max(0, Math.min(100, 100 * (1 - spacingUm / dUm)));
+    const pulsesPerMm = (f * 1000) / v;
+
+    return { spacingUm, spacingMm, overlapPct, pulsesPerMm };
+  }, [speed, freq, spotUm]);
+
+  return (
+    <ToolShell title="Pulse Overlap">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Inputs</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-3 sm:grid-cols-3">
+          <label className="text-[11px] sm:text-xs">
+            <div className="mb-1 text-muted-foreground">Speed (mm/s)</div>
+            <Input inputMode="decimal" value={speed} onChange={(e) => setSpeed(e.target.value)} />
+          </label>
+          <label className="text-[11px] sm:text-xs">
+            <div className="mb-1 text-muted-foreground">Frequency (kHz)</div>
+            <Input inputMode="decimal" value={freq} onChange={(e) => setFreq(e.target.value)} />
+          </label>
+          <label className="text-[11px] sm:text-xs">
+            <div className="mb-1 text-muted-foreground">Spot size (µm)</div>
+            <Input inputMode="decimal" value={spotUm} onChange={(e) => setSpotUm(e.target.value)} />
+          </label>
+        </CardContent>
+      </Card>
+
+      <Card className="mt-4">
+        <CardHeader>
+          <CardTitle className="text-base">Results</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-3 sm:grid-cols-4">
+          <div>
+            <div className="text-sm text-muted-foreground">Pulse spacing</div>
+            <div className="text-lg">{result.spacingMm.toFixed(4)} mm</div>
+            <div className="text-xs text-muted-foreground">{result.spacingUm.toFixed(1)} µm</div>
+          </div>
+          <div>
+            <div className="text-sm text-muted-foreground">Overlap</div>
+            <div className="text-lg">{result.overlapPct.toFixed(1)}%</div>
+          </div>
+          <div>
+            <div className="text-sm text-muted-foreground">Pulses per mm</div>
+            <div className="text-lg">{result.pulsesPerMm.toFixed(1)}</div>
+          </div>
+          <div>
+            <div className="text-sm text-muted-foreground">Rule of thumb</div>
+            <div className="text-xs">
+              60–80% overlap is common for marking; deeper engraving often higher.
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </ToolShell>
+  );
+}
+

app/lasers/[id]/page.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
+import Link from 'next/link';
+
+export default function LaserSourceDetailsPage() {
+  const { id } = useParams();
+  const [laser, setLaser] = useState(null);
+  const [labels, setLabels] = useState({});
+
+  useEffect(() => {
+    if (!id) return;
+
+    fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/laser_source/${id}?fields=*`)
+      .then((res) => res.json())
+      .then((data) => setLaser(data.data || null));
+
+    fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/fields/laser_source`)
+      .then((res) => res.json())
+      .then((data) => {
+        const labelMap = {};
+        (data.data || []).forEach((field) => {
+          if (field.interface === 'select-dropdown' && field.options?.choices) {
+            labelMap[field.field] = {};
+            field.options.choices.forEach((choice) => {
+              labelMap[field.field][choice.value] = choice.text;
+            });
+          }
+        });
+        setLabels(labelMap);
+      });
+  }, [id]);
+
+  if (!laser) return <div className="p-6">Loading...</div>;
+
+  const resolveLabel = (field, value) => {
+    if (!value) return '—';
+
+    const hardcodedLabels = {
+      op: {
+        pm: 'MOPA',
+        pq: 'Q-Switch',
+      },
+      cooling: {
+        aa: 'Air, Active',
+        ap: 'Air, Passive',
+        w: 'Water',
+      },
+    };
+
+    if (hardcodedLabels[field] && hardcodedLabels[field][value]) {
+      return hardcodedLabels[field][value];
+    }
+
+    return labels[field]?.[value] || value;
+  };
+
+  const fieldGroups = [
+    {
+      title: 'General Information',
+      fields: {
+        make: 'Make',
+        model: 'Model',
+        op: 'Pulse Operation Mode',
+        notes: 'Notes',
+      },
+    },
+    {
+      title: 'Optical Specifications',
+      fields: {
+        w: 'Laser Wattage (W)',
+        mj: 'milliJoule Max (mJ)',
+        nm: 'Wavelength (nm)',
+        k_hz: 'Pulse Repetition Rate (kHz)',
+        ns: 'Pulse Width (ns)',
+        d: 'Beam Diameter (mm)',
+        m2: 'M² - Quality',
+        instability: 'Instability',
+        polarization: 'Polarization',
+        band: 'Band (nm)',
+        anti: 'Anti-Reflection Coating',
+        mw: 'Red Dot Wattage (mW)',
+      },
+    },
+    {
+      title: 'Electrical & Timing',
+      fields: {
+        v: 'Operating Voltage (V)',
+        temp_op: 'Operating Temperature (°C)',
+        temp_store: 'Storage Temperature (°C)',
+        l_on: 'l_on',
+        l_off: 'l_off',
+        mj_c: 'mj_c',
+        ns_c: 'ns_c',
+        d_c: 'd_c',
+        on_c: 'on_c',
+        off_c: 'off_c',
+      },
+    },
+    {
+      title: 'Integration & Physical',
+      fields: {
+        cable: 'Cable Length (m)',
+        cooling: 'Cooling Method',
+        weight: 'Weight (kg)',
+        dimensions: 'Dimensions (cm)',
+      },
+    },
+  ];
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto">
+      <h1 className="text-3xl font-bold mb-4">
+        {laser.make || '—'} {laser.model || ''}
+      </h1>
+
+      <div className="space-y-6">
+        {fieldGroups.map(({ title, fields }) => (
+          <section key={title} className="bg-card border border-border rounded-xl p-4">
+            <h2 className="text-xl font-semibold mb-2">{title}</h2>
+            <dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4">
+              {Object.entries(fields).map(([key, label]) => (
+                <div key={key}>
+                  <dt className="font-medium text-muted-foreground">{label}</dt>
+                  <dd className="text-base break-words">
+                    {resolveLabel(key, laser[key])}
+                  </dd>
+                </div>
+              ))}
+            </dl>
+          </section>
+        ))}
+      </div>
+
+      <div className="mt-8">
+        <Link href="/lasers" className="text-blue-600 underline">
+          ← Back to Laser Sources
+        </Link>
+      </div>
+    </div>
+  );
+}
+

app/lasers/page.tsx

@@ -0,0 +1,242 @@
+'use client';
+
+import { useEffect, useState, useMemo } from 'react';
+import Link from 'next/link';
+
+export default function LaserSourcesPage() {
+  const [sources, setSources] = useState([]);
+  const [query, setQuery] = useState('');
+  const [debouncedQuery, setDebouncedQuery] = useState('');
+  const [wavelengthFilters, setWavelengthFilters] = useState<Record<string, number | null>>({});
+  const [sortKey, setSortKey] = useState('model');
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedQuery(query), 300);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  useEffect(() => {
+    fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/laser_source?limit=-1&fields=*,op.label`)
+      .then((res) => res.json())
+      .then((data) => setSources(data.data || []));
+  }, []);
+
+  const highlightMatch = (text: string, query: string) => {
+    if (!query || !text) return text;
+    const parts = text.split(new RegExp(`(${query})`, 'gi'));
+    return parts.map((part, i) =>
+      part.toLowerCase() === query.toLowerCase() ? <mark key={i}>{part}</mark> : part
+    );
+  };
+
+  const filtered = useMemo(() => {
+    const q = debouncedQuery.toLowerCase();
+    return sources.filter((src) => {
+      const matchesQuery = [src.make, src.model].filter(Boolean).some((field) =>
+        field.toLowerCase().includes(q)
+      );
+      return matchesQuery;
+    });
+  }, [sources, debouncedQuery]);
+
+  const grouped = useMemo<Record<string, typeof filtered>>(() => {
+    return filtered.reduce((acc, src) => {
+      const key = src.make || 'Unknown Make';
+      acc[key] = acc[key] || [];
+      acc[key].push(src);
+      return acc;
+    }, {} as Record<string, typeof filtered>);
+  }, [filtered]);
+
+  const wavelengths = [10600, 1064, 455, 355];
+
+  const toggleFilter = (make: string, value: number) => {
+    setWavelengthFilters((prev) => ({
+      ...prev,
+      [make]: prev[make] === value ? null : value
+    }));
+  };
+
+  const toggleSort = (key: string) => {
+    setSortKey(key);
+    setSortOrder((prev) => (prev === 'asc' ? 'desc' : 'asc'));
+  };
+
+  const getSortableValue = (val: any, key: string) => {
+    if (!val) return '';
+    if (key === 'w') return parseFloat(val.replace(/[^\d.]/g, '')) || 0;
+    if (['mj', 'nm', 'khz', 'ns', 'v'].includes(key.toLowerCase())) return parseFloat(val) || 0;
+    return val.toString().toLowerCase();
+  };
+
+  const sortArrow = (key: string) =>
+    sortKey === key ? (sortOrder === 'asc' ? ' ▲' : ' ▼') : '';
+
+  const summaryStats = useMemo(() => {
+    const makes = new Set();
+    const nmCounts: Record<string, number> = {};
+    for (const src of sources) {
+      if (src.make) makes.add(src.make);
+      if (src.nm) {
+        const nm = src.nm;
+        nmCounts[nm] = (nmCounts[nm] || 0) + 1;
+      }
+    }
+    const mostCommonNm = Object.entries(nmCounts)
+      .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || '—';
+    return {
+      total: sources.length,
+      uniqueMakes: makes.size,
+      commonNm: mostCommonNm,
+    };
+  }, [sources]);
+
+  const recentSources = useMemo(() => {
+    return [...sources]
+      .filter((src) => src.submission_id)
+      .sort((a, b) => b.submission_id - a.submission_id)
+      .slice(0, 5);
+  }, [sources]);
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <div className="grid gap-4 md:grid-cols-3 mb-6">
+        <div className="card p-4">
+          <h2 className="text-lg font-semibold mb-2">Database Summary</h2>
+          <p>Total Sources: {summaryStats.total}</p>
+          <p>Unique Makes: {summaryStats.uniqueMakes}</p>
+          <p>Most Common Wavelength: {summaryStats.commonNm}</p>
+        </div>
+
+        <div className="card p-4">
+          <h2 className="text-lg font-semibold mb-2">Recent Additions</h2>
+          <ul className="text-sm list-disc pl-4">
+            {recentSources.map((src) => (
+              <li key={src.id}>
+                <Link className="text-accent underline" href={`/lasers/${src.submission_id}`}>
+                  {src.make} {src.model}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="card p-4">
+          <h2 className="text-lg font-semibold mb-2">Feedback</h2>
+          <p className="text-sm mb-2">See something wrong or want to suggest an improvement?</p>
+          <Link href="#" className="btn-primary inline-block">Submit Feedback</Link>
+        </div>
+      </div>
+
+      <div className="mb-6 card bg-card text-card-foreground">
+        <h1 className="text-3xl font-bold mb-2">Laser Source Database</h1>
+        <input
+          type="search"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Search by make or model..."
+          className="w-full max-w-md mb-4 dark:bg-background border border-border rounded-md p-2"
+        />
+        <p className="text-sm text-muted-foreground">
+          Browse laser source specifications collected from community-submitted and verified sources.
+        </p>
+      </div>
+
+      {Object.entries(grouped).length === 0 ? (
+        <p className="text-muted">No laser sources found.</p>
+      ) : (
+        <div className="space-y-6">
+          {Object.entries(grouped).map(([make, items]) => {
+            const filteredItems = wavelengthFilters[make] != null
+              ? items.filter(item => parseInt(item.nm) === wavelengthFilters[make])
+              : items;
+
+            const sortedItems = [...filteredItems].sort((a, b) => {
+              const aVal = getSortableValue(a[sortKey], sortKey);
+              const bVal = getSortableValue(b[sortKey], sortKey);
+              if (aVal < bVal) return sortOrder === 'asc' ? -1 : 1;
+              if (aVal > bVal) return sortOrder === 'asc' ? 1 : -1;
+              return 0;
+            });
+
+            return (
+              <details key={make} className="border border-border rounded-md">
+                <summary className="bg-card px-4 py-2 font-semibold cursor-pointer flex justify-between items-center">
+                  <span>{make} <span className="text-sm text-muted">({filteredItems.length})</span></span>
+                  <div className="space-x-2">
+                    {wavelengths.map((w) => (
+                      <button
+                        key={w}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          toggleFilter(make, w);
+                        }}
+                        className={`px-2 py-1 text-xs rounded-md border ${wavelengthFilters[make] === w ? 'bg-accent text-white' : 'bg-muted text-muted-foreground'}`}
+                      >
+                        {w}
+                      </button>
+                    ))}
+                  </div>
+                </summary>
+                <div className="overflow-x-auto">
+                  <table className="w-full min-w-[900px] text-sm whitespace-nowrap">
+                    <thead>
+                      <tr>
+                        <th className="px-2 py-2 text-left">Make</th>
+                        <th className="px-2 py-2 text-left w-64">
+                          <button onClick={() => toggleSort('model')}>Model{sortArrow('model')}</button>
+                        </th>
+                        <th className="px-2 py-2 text-left">
+                          <button onClick={() => toggleSort('w')}>W{sortArrow('w')}</button>
+                        </th>
+                        <th className="px-2 py-2 text-left">
+                          <button onClick={() => toggleSort('mj')}>mJ{sortArrow('mj')}</button>
+                        </th>
+                        <th className="px-2 py-2 text-left">
+                          <button onClick={() => toggleSort('op')}>OP{sortArrow('op')}</button>
+                        </th>
+                        <th className="px-2 py-2 text-left">
+                          <button onClick={() => toggleSort('nm')}>nm{sortArrow('nm')}</button>
+                        </th>
+                        <th className="px-2 py-2 text-left">
+                          <button onClick={() => toggleSort('kHz')}>kHz{sortArrow('kHz')}</button>
+                        </th>
+                        <th className="px-2 py-2 text-left">
+                          <button onClick={() => toggleSort('ns')}>ns{sortArrow('ns')}</button>
+                        </th>
+                        <th className="px-2 py-2 text-left">
+                          <button onClick={() => toggleSort('v')}>V{sortArrow('v')}</button>
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {sortedItems.map((src) => (
+                        <tr key={src.id} className="border-t border-border">
+                          <td className="px-2 py-2 truncate max-w-[10rem]">{highlightMatch(src.make || '—', debouncedQuery)}</td>
+                          <td className="px-2 py-2 truncate max-w-[16rem]">
+                            <Link href={`/lasers/${src.submission_id}`} className="text-accent underline">
+                              {highlightMatch(src.model || '—', debouncedQuery)}
+                            </Link>
+                          </td>
+                          <td className="px-2 py-2 whitespace-nowrap">{src.w || '—'}</td>
+                          <td className="px-2 py-2 whitespace-nowrap">{src.mj || '—'}</td>
+                          <td className="px-2 py-2 whitespace-nowrap">{src.op?.label || src.op || '—'}</td>
+                          <td className="px-2 py-2 whitespace-nowrap">{src.nm || '—'}</td>
+                          <td className="px-2 py-2 whitespace-nowrap">{src.kHz || '—'}</td>
+                          <td className="px-2 py-2 whitespace-nowrap">{src.ns || '—'}</td>
+                          <td className="px-2 py-2 whitespace-nowrap">{src.v || '—'}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </details>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+

app/layout.tsx

@@ -0,0 +1,19 @@
+import './styles/globals.css'
+
+export const metadata = {
+  title: 'LE-DB',
+  description: 'Laser Everything Community Database',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className="dark">
+      <body>{children}</body>
+    </html>
+  )
+}
+

app/materials-coatings/[id]/page.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
+
+export default function MaterialCoatingDetailsPage() {
+  const { id } = useParams();
+  const [material, setMaterial] = useState(null);
+
+  useEffect(() => {
+    if (!id) return;
+
+    fetch(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/material_coating/${id}?fields=id,name,abbreviation,technical_name,composition,notes,override_reason,coating_status.name,coating_status_override,hazard_tags.hazard_tags_id.hazard_source.source,hazard_tags.hazard_tags_id.hazard_danger.danger,hazard_tags.hazard_tags_id.hazard_severity.severity`
+    )
+      .then((res) => res.json())
+      .then((data) => setMaterial(data.data || null));
+  }, [id]);
+
+  if (!material) return <div className="p-6">Loading...</div>;
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto">
+      <h1 className="text-3xl font-bold mb-4">{material.name}</h1>
+      <div className="space-y-2">
+        <p><strong>Status:</strong> {material.coating_status?.name || '—'}</p>
+        <p><strong>Abbreviation:</strong> {material.abbreviation || '—'}</p>
+        <p><strong>Technical Name:</strong> {material.technical_name || '—'}</p>
+        <p><strong>Composition:</strong> {material.composition || '—'}</p>
+        <p><strong>Notes:</strong> {material.notes || '—'}</p>
+        <p><strong>Override Reason:</strong> {material.override_reason || '—'}</p>
+
+        <div>
+          <strong>Hazard Tags</strong>
+          <ul className="list-disc pl-6">
+            {Array.isArray(material.hazard_tags) && material.hazard_tags.length > 0 ? (
+              material.hazard_tags.map((tag, index) => (
+                <li key={index}>
+                  {tag.hazard_tags_id?.hazard_source?.source || '—'} |{' '}
+                  {tag.hazard_tags_id?.hazard_danger?.danger || '—'} |{' '}
+                  {tag.hazard_tags_id?.hazard_severity?.severity || '—'}
+                </li>
+              ))
+            ) : (
+              <li>None</li>
+            )}
+          </ul>
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <Link href="/materials-coatings" className="text-blue-600 underline">← Back to Coatings</Link>
+      </div>
+    </div>
+  );
+}
+

app/materials-coatings/page.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState, useMemo } from 'react';
+
+function highlightMatch(text, query) {
+  if (!query) return text;
+  const parts = text.split(new RegExp(`(${query})`, 'gi'));
+  return parts.map((part, i) =>
+    part.toLowerCase() === query.toLowerCase() ? <mark key={i}>{part}</mark> : part
+  );
+}
+
+export default function CoatingsPage() {
+  const [coatings, setCoatings] = useState([]);
+  const [query, setQuery] = useState('');
+  const [debouncedQuery, setDebouncedQuery] = useState('');
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedQuery(query), 300);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  useEffect(() => {
+    fetch(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/material_coating?fields=id,name,abbreviation,technical_name,composition,coating_status.name&limit=-1`
+    )
+      .then((res) => res.json())
+      .then((data) => setCoatings(data.data || []));
+  }, []);
+
+  const filtered = useMemo(() => {
+    const q = debouncedQuery.toLowerCase();
+    return coatings.filter((coat) =>
+      [
+        coat.name,
+        coat.technical_name,
+        coat.abbreviation,
+        coat.composition,
+        coat.coating_status?.name
+      ]
+        .filter(Boolean)
+        .some((field) => field.toLowerCase().includes(q))
+    );
+  }, [coatings, debouncedQuery]);
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <div className="mb-6 flex flex-col lg:flex-row gap-4">
+        <div className="flex-1 card bg-card text-card-foreground relative pb-16">
+          <h1 className="text-3xl font-bold mb-2">Laser Material Coatings</h1>
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search coatings..."
+            className="w-full max-w-md mb-4 dark:bg-background border border-border rounded-md p-2"
+          />
+          <h2 className="font-semibold mb-1">📌 Disclaimer</h2>
+          <p className="mb-6">
+            The following coatings are provided for educational purposes only and are not intended to be used as your sole or primary source of information when assessing the safety of any particular coating. It is your responsibility alone to ensure your safety when operating your equipment. This resource is provided as-is, free of charge under the assumption you are exercising all other relevant safety precautions.
+          </p>
+          <div className="absolute bottom-4 left-4">
+            <Link
+              href="/"
+              className="btn-primary"
+            >
+              ← Back to Main Menu
+            </Link>
+          </div>
+        </div>
+
+        <div className="flex-1 card bg-[#422c17] text-white">
+          <h2 className="font-bold text-base mb-2">⚠ Safety Level Definitions</h2>
+          <ul className="space-y-2">
+            <li><strong>Safe</strong> – Materials marked as safe are widely considered to be generally safe by the laser community at large. This does not mean normal safety protocols should not be observed.</li>
+            <li><strong>Level I – Caution</strong> | These materials are typically safe when normal safety protocol observed. This includes skin, eye and respiratory protection, regulated marking parameters, and proper exhaust and filtration.</li>
+            <li><strong>Level II – Dangerous</strong> | These materials can be harmful even if normal safety protocol observed. Strict adherence to safety protocols required at all times. Exercise extreme caution and mindfulness.</li>
+            <li><strong>Level III – Critical Hazard</strong> | These materials pose an imminent threat of bodily harm or death. Materials marked Critical Hazard should not be processed by lasers in any environment for any reason.</li>
+          </ul>
+        </div>
+      </div>
+
+      {filtered.length === 0 ? (
+        <p className="text-muted">No coatings found.</p>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="table-fixed min-w-full border border-border text-sm">
+            <thead>
+              <tr>
+                <th className="px-4 py-2 text-left w-48">Name</th>
+                <th className="px-4 py-2 text-left w-32 whitespace-nowrap">Status</th>
+                <th className="px-4 py-2 text-left w-32">Abbreviation</th>
+                <th className="px-4 py-2 text-left w-64">Technical Name</th>
+                <th className="px-4 py-2 text-left w-64">Composition</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((coat) => (
+                <tr key={coat.id} className="border-t border-border align-top">
+                  <td className="px-4 py-2 truncate max-w-[12rem]">
+                    <Link href={`/materials-coatings/${coat.id}`} className="text-accent underline">
+                      {highlightMatch(coat.name, debouncedQuery)}
+                    </Link>
+                  </td>
+                  <td className="px-4 py-2 whitespace-nowrap">
+                    {highlightMatch(coat.coating_status?.name || '—', debouncedQuery)}
+                  </td>
+                  <td className="px-4 py-2 truncate max-w-[8rem]">
+                    {highlightMatch(coat.abbreviation || '—', debouncedQuery)}
+                  </td>
+                  <td className="px-4 py-2 truncate max-w-[16rem]">
+                    {highlightMatch(coat.technical_name || '—', debouncedQuery)}
+                  </td>
+                  <td className="px-4 py-2 truncate max-w-[16rem]">
+                    {highlightMatch(coat.composition || '—', debouncedQuery)}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+

app/materials/[id]/page.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
+
+export default function MaterialDetailsPage() {
+  const { id } = useParams();
+  const [material, setMaterial] = useState(null);
+
+  useEffect(() => {
+    if (!id) return;
+
+    fetch(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/material/${id}?fields=id,name,abbreviation,common_names,technical_name,composition,material_cat.name,material_status.name,notes,override_reason,hazard_tags.hazard_tags_id.hazard_source.source,hazard_tags.hazard_tags_id.hazard_danger.danger,hazard_tags.hazard_tags_id.hazard_severity.severity`
+    )
+      .then((res) => res.json())
+      .then((data) => setMaterial(data.data || null));
+  }, [id]);
+
+  if (!material) return <div className="p-6">Loading...</div>;
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto">
+      <h1 className="text-3xl font-bold mb-4">{material.name}</h1>
+      <div className="space-y-2">
+        <p><strong>Category:</strong> {material.material_cat?.name || '—'}</p>
+        <p><strong>Status:</strong> {material.material_status?.name || '—'}</p>
+        <p><strong>Abbreviation:</strong> {material.abbreviation || '—'}</p>
+        <p><strong>Common Names:</strong> {material.common_names || '—'}</p>
+        <p><strong>Technical Name:</strong> {material.technical_name || '—'}</p>
+        <p><strong>Composition:</strong> {material.composition || '—'}</p>
+        <p><strong>Notes:</strong> {material.notes || '—'}</p>
+        <p><strong>Override Reason:</strong> {material.override_reason || '—'}</p>
+
+        <div>
+          <strong>Hazard Tags</strong>
+          <ul className="list-disc pl-6">
+            {Array.isArray(material.hazard_tags) && material.hazard_tags.length > 0 ? (
+              material.hazard_tags.map((tag, index) => (
+                <li key={index}>
+                  {tag.hazard_tags_id?.hazard_source?.source || '—'} |{' '}
+                  {tag.hazard_tags_id?.hazard_danger?.danger || '—'} |{' '}
+                  {tag.hazard_tags_id?.hazard_severity?.severity || '—'}
+                </li>
+              ))
+            ) : (
+              <li>None</li>
+            )}
+          </ul>
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <Link href="/materials" className="text-blue-600 underline">← Back to Materials</Link>
+      </div>
+    </div>
+  );
+}
+

app/materials/page.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState, useMemo } from 'react';
+
+function highlightMatch(text: string, query: string) {
+  if (!query) return text;
+  const parts = text.split(new RegExp(`(${query})`, 'gi'));
+  return parts.map((part, i) =>
+    part.toLowerCase() === query.toLowerCase() ? <mark key={i}>{part}</mark> : part
+  );
+}
+
+export default function MaterialsPage() {
+  const [materials, setMaterials] = useState<any[]>([]);
+  const [query, setQuery] = useState('');
+  const [debouncedQuery, setDebouncedQuery] = useState('');
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedQuery(query), 300);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  useEffect(() => {
+    fetch(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/material?fields=id,name,abbreviation,common_names,technical_name,material_cat.name,material_status.name&limit=-1`
+    )
+      .then((res) => res.json())
+      .then((data) => setMaterials(data.data || []));
+  }, []);
+
+  const filtered = useMemo(() => {
+    const q = debouncedQuery.toLowerCase();
+    return materials.filter((mat) =>
+      [
+        mat.name,
+        mat.technical_name,
+        mat.common_names,
+        mat.abbreviation,
+        mat.material_status?.name
+      ]
+        .filter(Boolean)
+        .some((field) => field.toLowerCase().includes(q))
+    );
+  }, [materials, debouncedQuery]);
+
+  const grouped = useMemo<Record<string, typeof filtered>>(() => {
+    return filtered.reduce((acc, mat) => {
+      const key = mat.material_cat?.name || 'Uncategorized';
+      acc[key] = acc[key] || [];
+      acc[key].push(mat);
+      return acc;
+    }, {} as Record<string, typeof filtered>);
+  }, [filtered]);
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <div className="mb-6 flex flex-col lg:flex-row gap-4">
+        <div className="flex-1 card bg-card text-card-foreground relative pb-16">
+          <h1 className="text-3xl font-bold mb-2">Laser Material Reference</h1>
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search materials..."
+            className="w-full max-w-md mb-4 dark:bg-background border border-border rounded-md p-2"
+          />
+          <h2 className="font-semibold mb-1">📌 Disclaimer</h2>
+          <p className="mb-6">
+            The following materials are provided for educational purposes only and are not intended to be used as your sole or primary source of information when assessing the safety of any particular material. It is your responsibility alone to ensure your safety when operating your equipment. This resource is provided as-is, free of charge under the assumption you are exercising all other relevant safety precautions.
+          </p>
+          <div className="absolute bottom-4 left-4">
+            <Link
+              href="/"
+              className="btn-primary"
+            >
+              ← Back to Main Menu
+            </Link>
+          </div>
+        </div>
+
+        <div className="flex-1 card bg-[#422c17] text-white">
+          <h2 className="font-bold text-base mb-2">⚠ Safety Level Definitions</h2>
+          <ul className="space-y-2">
+            <li><strong>Safe</strong> – Materials marked as safe are widely considered to be generally safe by the laser community at large. This does not mean normal safety protocols should not be observed.</li>
+            <li><strong>Level I – Caution</strong> | These materials are typically safe when normal safety protocol observed. This includes skin, eye and respiratory protection, regulated marking parameters, and proper exhaust and filtration.</li>
+            <li><strong>Level II – Dangerous</strong> | These materials can be harmful even if normal safety protocol observed. Strict adherence to safety protocols required at all times. Exercise extreme caution and mindfulness.</li>
+            <li><strong>Level III – Critical Hazard</strong> | These materials pose an imminent threat of bodily harm or death. Materials marked Critical Hazard should not be processed by lasers in any environment for any reason.</li>
+          </ul>
+        </div>
+      </div>
+
+      {Object.entries(grouped).length === 0 ? (
+        <p className="text-muted">No materials found.</p>
+      ) : (
+        <div className="space-y-6">
+          {Object.entries(grouped).map(([category, items]) => (
+            <details key={category} className="border border-border rounded-md">
+              <summary className="bg-card px-4 py-2 font-semibold cursor-pointer">
+                {category} <span className="text-sm text-muted">({items.length})</span>
+              </summary>
+              <div className="overflow-x-auto">
+                <table className="table-fixed">
+                  <thead>
+                    <tr>
+                      <th className="w-48">Name</th>
+                      <th className="w-32 whitespace-nowrap">Status</th>
+                      <th className="w-32">Abbreviation</th>
+                      <th className="w-64">Common Names</th>
+                      <th className="w-64">Technical Name</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {items.map((material) => (
+                      <tr key={material.id} className="border-t border-border align-top">
+                        <td className="truncate max-w-[12rem]">
+                          <Link href={`/materials/${material.id}`} className="text-accent underline">
+                            {highlightMatch(material.name, debouncedQuery)}
+                          </Link>
+                        </td>
+                        <td className="whitespace-nowrap">
+                          {highlightMatch(material.material_status?.name || '—', debouncedQuery)}
+                        </td>
+                        <td className="truncate max-w-[8rem]">
+                          {highlightMatch(material.abbreviation || '—', debouncedQuery)}
+                        </td>
+                        <td className="truncate max-w-[16rem]">
+                          {highlightMatch(material.common_names || '—', debouncedQuery)}
+                        </td>
+                        <td className="truncate max-w-[16rem]">
+                          {highlightMatch(material.technical_name || '—', debouncedQuery)}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </details>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+

app/page.tsx

@@ -0,0 +1,129 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import Link from "next/link";
+
+export default function Home() {
+  return (
+    <main className="min-h-screen p-8 bg-background text-foreground">
+      <h1 className="text-3xl font-bold mb-6">Laser Everything Community Database</h1>
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <Card>
+          <CardContent className="p-6">
+            <h2 className="text-xl font-semibold mb-2">Fiber Laser Settings</h2>
+            <p className="mb-4 text-sm text-muted-foreground">
+              Browse and submit settings for fiber laser engraving.
+            </p>
+            <Link href="/fiber-settings">
+              <Button>View Settings</Button>
+            </Link>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-6">
+            <h2 className="text-xl font-semibold mb-2">CO2 Galvo Settings</h2>
+            <p className="mb-4 text-sm text-muted-foreground">
+              Settings for CO2 Galvo laser machines.
+            </p>
+            <Link href="/co2-galvo-settings">
+              <Button>View Settings</Button>
+            </Link>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-6">
+            <h2 className="text-xl font-semibold mb-2">CO2 Gantry Settings</h2>
+            <p className="mb-4 text-sm text-muted-foreground">
+              Settings for CO2 Gantry laser systems.
+            </p>
+            <Link href="/co2-gantry-settings">
+              <Button>View Settings</Button>
+            </Link>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-6">
+            <h2 className="text-xl font-semibold mb-2">UV Laser Settings</h2>
+            <p className="mb-4 text-sm text-muted-foreground">
+              Settings for UV laser engraving and marking.
+            </p>
+            <Link href="/uv-settings">
+              <Button>View Settings</Button>
+            </Link>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-6">
+            <h2 className="text-xl font-semibold mb-2">Materials and Coatings</h2>
+            <p className="mb-4 text-sm text-muted-foreground">
+              Explore materials and surface coatings along with their laser safety classifications.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-2">
+              <Link href="/materials">
+                <Button className="w-full sm:w-auto">View Materials</Button>
+              </Link>
+              <Link href="/materials-coatings">
+                <Button className="w-full sm:w-auto">View Coatings</Button>
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-6">
+            <h2 className="text-xl font-semibold mb-2">Laser Source Database</h2>
+            <p className="mb-4 text-sm text-muted-foreground">
+              Technical specs and info on various laser sources.
+            </p>
+            <Link href="/lasers">
+              <Button>View Sources</Button>
+            </Link>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-6">
+            <h2 className="text-xl font-semibold mb-2">Projects Database</h2>
+            <p className="mb-4 text-sm text-muted-foreground">
+              Community-submitted projects and guides.
+            </p>
+            <Link href="/projects">
+              <Button>View Projects</Button>
+            </Link>
+          </CardContent>
+        </Card>
+
+        {/* 🔽 NEW FILE DOWNLOAD SECTION 🔽 */}
+        <Card>
+          <CardContent className="p-6">
+            <h2 className="text-xl font-semibold mb-2">Downloadable Files</h2>
+            <p className="mb-4 text-sm text-muted-foreground">
+              Browse and download shared files from the server.
+            </p>
+            <Link href="/files">
+              <Button>View Files</Button>
+            </Link>
+          </CardContent>
+        </Card>
+
+        {/* 🔽 NEW BUYING GUIDE CARD 🔽 */}
+        <Card>
+          <CardContent className="p-6">
+            <h2 className="text-xl font-semibold mb-2">Buying Guide</h2>
+            <p className="mb-4 text-sm text-muted-foreground">
+              Reviews and recommendations for laser products and accessories.
+            </p>
+            <Link href="/buying-guide">
+              <Button>View Guide</Button>
+            </Link>
+          </CardContent>
+        </Card>
+      </div>
+    </main>
+  );
+}
+

app/projects/[id]/page.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+import Image from "next/image";
+import Link from "next/link";
+import ReactMarkdown from "react-markdown";
+
+export default function ProjectDetailPage() {
+  const { id } = useParams();
+  const [project, setProject] = useState(null);
+
+  useEffect(() => {
+    if (!id) return;
+    const url = new URL(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/projects/${id}`);
+    url.searchParams.set(
+      "fields",
+      "submission_id,title,uploader,category,tags,p_image.filename_disk,p_image.title,p_files.directus_files_id.filename_disk"
+    );
+    url.searchParams.set("limit", "1");
+
+    fetch(url.toString())
+    .then((res) => res.json())
+    .then((data) => setProject(data.data))
+    .catch(() => setProject(null));
+  }, [id]);
+
+  if (!project) {
+    return (
+      <div className="p-6 max-w-5xl mx-auto">
+      <div className="mb-4">
+      <Link href="/projects" className="text-accent underline">
+      ← Back to Projects
+      </Link>
+      </div>
+      <p className="text-muted-foreground">Loading project…</p>
+      </div>
+    );
+  }
+
+  const imageSrc = project.p_image?.filename_disk
+  ? `${process.env.NEXT_PUBLIC_ASSET_URL || "https://forms.lasereverything.net"}/assets/${project.p_image.filename_disk}`
+  : null;
+
+  const fileList: string[] = Array.isArray(project.p_files)
+  ? project.p_files
+  .map((f: any) => f?.directus_files_id?.filename_disk)
+  .filter(Boolean)
+  : [];
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto">
+    <style jsx global>{`
+      .file-pill {
+        display: inline-block;
+        font-size: 0.8rem;
+        padding: 0.25rem 0.5rem;
+        background-color: var(--muted);
+        color: var(--foreground);
+        border-radius: 0.25rem;
+        margin-right: 0.25rem;
+        margin-bottom: 0.25rem;
+        transition: background-color 0.2s ease;
+      }
+      .file-pill:hover {
+        background-color: #ffde59;
+        color: #000;
+      }
+      `}</style>
+
+      <div className="mb-4">
+      <Link href="/projects" className="text-accent underline">
+      ← Back to Projects
+      </Link>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <div className="md:col-span-1">
+      <div className="border rounded overflow-hidden bg-card">
+      {imageSrc ? (
+        <Image
+        src={imageSrc}
+        alt={project.p_image?.title || "Project image"}
+        width={800}
+        height={800}
+        className="w-full h-auto object-cover"
+        />
+      ) : (
+        <div className="p-6 text-sm text-muted-foreground">No preview image</div>
+      )}
+      </div>
+
+      <div className="mt-4">
+      <h3 className="text-sm font-semibold mb-2">Files</h3>
+      {fileList.length > 0 ? (
+        <div className="flex flex-wrap">
+        {fileList.map((fname, i) => (
+          <a
+          key={i}
+          className="file-pill"
+          href={`${process.env.NEXT_PUBLIC_ASSET_URL || "https://forms.lasereverything.net"}/assets/${fname}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          title={fname}
+          >
+          {fname}
+          </a>
+        ))}
+        </div>
+      ) : (
+        <p className="text-xs text-muted-foreground">No files attached.</p>
+      )}
+      </div>
+      </div>
+
+      <div className="md:col-span-2">
+      <h1 className="text-2xl font-bold mb-2">{project.title}</h1>
+      <p className="text-sm text-muted-foreground mb-1">
+      Uploaded by: {project.uploader || "—"}
+      </p>
+      <p className="text-sm text-muted-foreground mb-2">
+      Category: {project.category || "—"}
+      </p>
+      <div className="flex flex-wrap gap-1">
+      {Array.isArray(project.tags) && project.tags.length > 0 ? (
+        project.tags.map((tag, i) => (
+          <a
+          key={i}
+          href={`/projects?query=${encodeURIComponent(tag)}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-xs bg-muted text-foreground rounded px-2 py-0.5 hover:bg-accent hover:text-background transition-colors"
+          title={`Search for ${tag}`}
+          >
+          {tag}
+          </a>
+        ))
+      ) : (
+        <span className="text-xs text-muted-foreground">No tags</span>
+      )}
+      </div>
+
+      {/* Optional long description if you add one later */}
+      {project.body ? (
+        <div className="prose dark:prose-invert mt-6">
+        <ReactMarkdown>{project.body}</ReactMarkdown>
+        </div>
+      ) : null}
+      </div>
+      </div>
+      </div>
+  );
+}

app/projects/layout.tsx

@@ -0,0 +1,4 @@
+import { Suspense } from "react";
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <Suspense fallback={null}>{children}</Suspense>;
+}

app/projects/page.tsx

@@ -0,0 +1,274 @@
+"use client";
+
+import { useEffect, useState, useMemo } from "react";
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+
+export default function ProjectsPage() {
+  const searchParams = useSearchParams();
+  const initialQuery = searchParams.get("query") || "";
+
+  const [query, setQuery] = useState(initialQuery);
+  const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
+  const [projects, setProjects] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [categories] = useState([
+    "assets",
+    "documents",
+    "fixtures",
+    "projects",
+    "templates",
+    "test files",
+    "tools"
+  ]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedQuery(query), 300);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  useEffect(() => {
+    const url = new URL(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/projects`);
+    url.searchParams.set("fields", "submission_id,title,uploader,category,tags,p_image.filename_disk,p_image.title");
+    url.searchParams.set("limit", "-1");
+
+    fetch(url.toString(), { cache: "no-store" })
+    .then((res) => res.json())
+    .then((data) => {
+      setProjects(data.data || []);
+      setLoading(false);
+    })
+    .catch(() => setLoading(false));
+  }, []);
+
+  const highlight = (text: string) => {
+    if (!debouncedQuery) return text;
+    const regex = new RegExp(`(${debouncedQuery})`, "gi");
+    return text?.replace(regex, '<mark>$1</mark>');
+  };
+
+  const normalize = (str: string) => str?.toLowerCase().replace(/[_\s]/g, "");
+
+  const filtered = useMemo(() => {
+    const q = normalize(debouncedQuery);
+    return projects.filter((entry) => {
+      const fieldsToSearch = [
+        entry.title ?? "",
+        entry.uploader ?? "",
+        entry.category ?? "",
+        Array.isArray(entry.tags) ? entry.tags.join(" ") : "",
+      ];
+      return fieldsToSearch.filter(Boolean).some((field) =>
+      normalize(field).includes(q)
+      );
+    });
+  }, [projects, debouncedQuery]);
+
+  const tagCounts = useMemo(() => {
+    const counts: Record<string, number> = {};
+    projects.forEach((p) => {
+      if (Array.isArray(p.tags)) {
+        p.tags.forEach((tag) => {
+          counts[tag] = (counts[tag] || 0) + 1;
+        });
+      }
+    });
+    return counts;
+  }, [projects]);
+
+  const popularTags = Object.entries(tagCounts)
+  .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))
+  .slice(0, 10)
+  .map(([tag]) => tag);
+
+  const recentTags = [...projects]
+  .sort((a, b) => b.submission_id - a.submission_id)
+  .slice(0, 10)
+  .flatMap((p) => p.tags || [])
+  .filter((tag, i, self) => self.indexOf(tag) === i)
+  .slice(0, 10);
+
+  const uniqueUploaders = new Set(projects.map((p) => p.uploader).filter(Boolean)).size;
+  const totalTags = Object.keys(tagCounts).length;
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+    <style jsx global>{`
+      mark {
+        background: #ffde59;
+        color: #242424;
+        padding: 0 2px;
+        border-radius: 2px;
+      }
+      .card-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+        gap: 1rem;
+      }
+      .project-card {
+        display: flex;
+        background-color: #242424;
+        color: var(--card-foreground);
+        border: 1px solid var(--border);
+        border-radius: 0.5rem;
+        overflow: hidden;
+        height: 150px;
+      }
+      .project-image {
+        width: 150px;
+        height: 150px;
+        object-fit: cover;
+      }
+      .project-content {
+        padding: 0.75rem;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+      .project-tags {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .project-tags span,
+      .flex.flex-wrap span {
+        display: inline-block;
+        margin-right: 0.25rem;
+        margin-bottom: 0.25rem;
+        padding: 0.25rem 0.5rem;
+        background-color: var(--muted);
+        color: var(--foreground);
+        border-radius: 0.25rem;
+        font-size: 0.7rem;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+      }
+      .project-tags span:hover,
+      .flex.flex-wrap span:hover {
+        background-color: #ffde59;
+        color: #000;
+      }
+      `}</style>
+
+      <div className="grid md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
+      <div className="card bg-card text-card-foreground p-4">
+      <h1 className="text-xl font-bold mb-2">Community Projects</h1>
+      <input
+      type="search"
+      value={query}
+      onChange={(e) => setQuery(e.target.value)}
+      placeholder="Search projects..."
+      className="w-full dark:bg-background border border-border rounded-md p-2"
+      />
+      <Link
+      href="/"
+      className="inline-block mt-4 px-4 py-2 bg-accent text-background rounded-md text-sm"
+      >
+      ← Back to Main Menu
+      </Link>
+      </div>
+      <div className="card bg-card text-card-foreground p-4">
+      <h2 className="text-md font-semibold mb-2">Popular Tags</h2>
+      {popularTags.length > 0 ? (
+        <div className="flex flex-wrap">
+        {popularTags.map((tag, i) => (
+          <span key={i} onClick={() => setQuery(tag)} title={tag}>
+          {tag}
+          </span>
+        ))}
+        </div>
+      ) : (
+        <p className="text-sm text-muted-foreground">No tags yet.</p>
+      )}
+      </div>
+      <div className="card bg-card text-card-foreground p-4">
+      <h2 className="text-md font-semibold mb-2">Recent Tags</h2>
+      {recentTags.length > 0 ? (
+        <div className="flex flex-wrap">
+        {recentTags.map((tag, i) => (
+          <span key={i} onClick={() => setQuery(tag)} title={tag}>
+          {tag}
+          </span>
+        ))}
+        </div>
+      ) : (
+        <p className="text-sm text-muted-foreground">No recent tags.</p>
+      )}
+      </div>
+      <div className="card bg-card text-card-foreground p-4">
+      <h2 className="text-md font-semibold mb-2">Project Stats</h2>
+      <p className="text-sm text-muted-foreground">Total Projects: {projects.length}</p>
+      <p className="text-sm text-muted-foreground">Unique Uploaders: {uniqueUploaders}</p>
+      <p className="text-sm text-muted-foreground">Total Tags: {totalTags}</p>
+      </div>
+      <div className="card bg-card text-card-foreground p-4">
+      <h2 className="text-md font-semibold mb-2">Browse by Category</h2>
+      <div className="flex flex-wrap">
+      {categories.map((cat, i) => (
+        <span key={i} onClick={() => setQuery(cat)}>
+        {cat === "test_files" ? "test files" : cat}
+        </span>
+      ))}
+      </div>
+      </div>
+      <div className="card bg-card text-card-foreground p-4 flex flex-col justify-between">
+      <div>
+      <h2 className="text-md font-semibold mb-2">Submit a Project</h2>
+      <p className="text-sm text-muted-foreground mb-2">
+      Have a cool design, tool, or jig to share? Submit it to the community database.
+      </p>
+      </div>
+      <button disabled className="bg-muted text-foreground text-sm px-4 py-2 rounded opacity-50 cursor-not-allowed">
+      Coming Soon
+      </button>
+      </div>
+      </div>
+
+      <hr className="my-8 border-border" />
+
+      {loading ? (
+        <p className="text-muted">Loading projects...</p>
+      ) : filtered.length === 0 ? (
+        <p className="text-muted">No projects found.</p>
+      ) : (
+        <div className="card-grid">
+        {filtered.map((project) => (
+          <div key={project.submission_id} className="project-card">
+          <Image
+          src={`https://forms.lasereverything.net/assets/${project.p_image?.filename_disk}`}
+          alt={project.p_image?.title || "Project image"}
+          width={150}
+          height={150}
+          className="project-image"
+          />
+          <div className="project-content">
+          <div>
+          <Link href={`/projects/${project.submission_id}`} className="text-base font-semibold text-accent underline">
+          {project.title || "Untitled"}
+          </Link>
+          <p className="text-xs text-muted-foreground">Uploaded by: {project.uploader || "—"}</p>
+          <p className="text-xs text-muted-foreground">Category: {project.category || "—"}</p>
+          </div>
+          <div className="project-tags">
+          {Array.isArray(project.tags) && project.tags.length > 0
+            ? project.tags.map((tag, i) => (
+              <span
+              key={i}
+              onClick={() => setQuery(tag)}
+              title={tag}
+              >
+              {tag}
+              </span>
+            ))
+            : ""}
+            </div>
+            </div>
+            </div>
+        ))}
+        </div>
+      )}
+      </div>
+  );
+}

app/projects/page.tsx.bak

@@ -0,0 +1,273 @@
+"use client";
+
+import { useEffect, useState, useMemo } from "react";
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+
+export default function ProjectsPage() {
+  const searchParams = useSearchParams();
+  const initialQuery = searchParams.get("query") || "";
+
+  const [query, setQuery] = useState(initialQuery);
+  const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
+  const [projects, setProjects] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [categories] = useState([
+    "assets",
+    "documents",
+    "fixtures",
+    "projects",
+    "templates",
+    "test files",
+    "tools"
+  ]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedQuery(query), 300);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  useEffect(() => {
+    fetch(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/projects?fields=submission_id,title,uploader,category,tags,p_image.filename_disk,p_image.title&limit=-1fields=*.*`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        setProjects(data.data || []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  const highlight = (text: string) => {
+    if (!debouncedQuery) return text;
+    const regex = new RegExp(`(${debouncedQuery})`, "gi");
+    return text?.replace(regex, '<mark>$1</mark>');
+  };
+
+  const normalize = (str: string) => str?.toLowerCase().replace(/[_\s]/g, "");
+
+  const filtered = useMemo(() => {
+    const q = normalize(debouncedQuery);
+    return projects.filter((entry) => {
+      const fieldsToSearch = [
+        entry.title ?? "",
+        entry.uploader ?? "",
+        entry.category ?? "",
+        Array.isArray(entry.tags) ? entry.tags.join(" ") : "",
+      ];
+      return fieldsToSearch.filter(Boolean).some((field) =>
+        normalize(field).includes(q)
+      );
+    });
+  }, [projects, debouncedQuery]);
+
+  const tagCounts = useMemo(() => {
+    const counts: Record<string, number> = {};
+    projects.forEach((p) => {
+      if (Array.isArray(p.tags)) {
+        p.tags.forEach((tag) => {
+          counts[tag] = (counts[tag] || 0) + 1;
+        });
+      }
+    });
+    return counts;
+  }, [projects]);
+
+  const popularTags = Object.entries(tagCounts)
+    .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))
+    .slice(0, 10)
+    .map(([tag]) => tag);
+
+  const recentTags = [...projects]
+    .sort((a, b) => b.submission_id - a.submission_id)
+    .slice(0, 10)
+    .flatMap((p) => p.tags || [])
+    .filter((tag, i, self) => self.indexOf(tag) === i)
+    .slice(0, 10);
+
+  const uniqueUploaders = new Set(projects.map((p) => p.uploader).filter(Boolean)).size;
+  const totalTags = Object.keys(tagCounts).length;
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <style jsx global>{`
+        mark {
+          background: #ffde59;
+          color: #242424;
+          padding: 0 2px;
+          border-radius: 2px;
+        }
+        .card-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+          gap: 1rem;
+        }
+        .project-card {
+          display: flex;
+          background-color: #242424;
+          color: var(--card-foreground);
+          border: 1px solid var(--border);
+          border-radius: 0.5rem;
+          overflow: hidden;
+          height: 150px;
+        }
+        .project-image {
+          width: 150px;
+          height: 150px;
+          object-fit: cover;
+        }
+        .project-content {
+          padding: 0.75rem;
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+        }
+        .project-tags {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .project-tags span,
+        .flex.flex-wrap span {
+          display: inline-block;
+          margin-right: 0.25rem;
+          margin-bottom: 0.25rem;
+          padding: 0.25rem 0.5rem;
+          background-color: var(--muted);
+          color: var(--foreground);
+          border-radius: 0.25rem;
+          font-size: 0.7rem;
+          cursor: pointer;
+          transition: background-color 0.2s ease;
+        }
+        .project-tags span:hover,
+        .flex.flex-wrap span:hover {
+          background-color: #ffde59;
+          color: #000;
+        }
+      `}</style>
+
+      <div className="grid md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
+        <div className="card bg-card text-card-foreground p-4">
+          <h1 className="text-xl font-bold mb-2">Community Projects</h1>
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search projects..."
+            className="w-full dark:bg-background border border-border rounded-md p-2"
+          />
+          <Link
+            href="/"
+            className="inline-block mt-4 px-4 py-2 bg-accent text-background rounded-md text-sm"
+          >
+            ← Back to Main Menu
+          </Link>
+        </div>
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-md font-semibold mb-2">Popular Tags</h2>
+          {popularTags.length > 0 ? (
+            <div className="flex flex-wrap">
+              {popularTags.map((tag, i) => (
+                <span key={i} onClick={() => setQuery(tag)} title={tag}>
+                  {tag}
+                </span>
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-muted-foreground">No tags yet.</p>
+          )}
+        </div>
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-md font-semibold mb-2">Recent Tags</h2>
+          {recentTags.length > 0 ? (
+            <div className="flex flex-wrap">
+              {recentTags.map((tag, i) => (
+                <span key={i} onClick={() => setQuery(tag)} title={tag}>
+                  {tag}
+                </span>
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-muted-foreground">No recent tags.</p>
+          )}
+        </div>
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-md font-semibold mb-2">Project Stats</h2>
+          <p className="text-sm text-muted-foreground">Total Projects: {projects.length}</p>
+          <p className="text-sm text-muted-foreground">Unique Uploaders: {uniqueUploaders}</p>
+          <p className="text-sm text-muted-foreground">Total Tags: {totalTags}</p>
+        </div>
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-md font-semibold mb-2">Browse by Category</h2>
+          <div className="flex flex-wrap">
+            {categories.map((cat, i) => (
+              <span key={i} onClick={() => setQuery(cat)}>
+                {cat === "test_files" ? "test files" : cat}
+              </span>
+            ))}
+          </div>
+        </div>
+        <div className="card bg-card text-card-foreground p-4 flex flex-col justify-between">
+          <div>
+            <h2 className="text-md font-semibold mb-2">Submit a Project</h2>
+            <p className="text-sm text-muted-foreground mb-2">
+              Have a cool design, tool, or jig to share? Submit it to the community database.
+            </p>
+          </div>
+          <button disabled className="bg-muted text-foreground text-sm px-4 py-2 rounded opacity-50 cursor-not-allowed">
+            Coming Soon
+          </button>
+        </div>
+      </div>
+
+      <hr className="my-8 border-border" />
+
+      {loading ? (
+        <p className="text-muted">Loading projects...</p>
+      ) : filtered.length === 0 ? (
+        <p className="text-muted">No projects found.</p>
+      ) : (
+        <div className="card-grid">
+          {filtered.map((project) => (
+            <div key={project.submission_id} className="project-card">
+              <Image
+                src={`https://forms.lasereverything.net/assets/${project.p_image?.filename_disk}`}
+                alt={project.p_image?.title || "Project image"}
+                width={150}
+                height={150}
+                className="project-image"
+              />
+              <div className="project-content">
+                <div>
+                  <Link href={`/projects/${project.submission_id}`} className="text-base font-semibold text-accent underline">
+                    {project.title || "Untitled"}
+                  </Link>
+                  <p className="text-xs text-muted-foreground">Uploaded by: {project.uploader || "—"}</p>
+                  <p className="text-xs text-muted-foreground">Category: {project.category || "—"}</p>
+                </div>
+                <div className="project-tags">
+                  {Array.isArray(project.tags) && project.tags.length > 0
+                    ? project.tags.map((tag, i) => (
+                        <span
+                          key={i}
+                          onClick={() => setQuery(tag)}
+                          title={tag}
+                        >
+                          {tag}
+                        </span>
+                      ))
+                    : ""}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+

app/styles/globals.css

@@ -0,0 +1,66 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+  }
+
+.dark {
+  --background: 0 0% 13%;
+  --foreground: 0 0% 85%;
+  --card: 0 0% 15%;
+  --card-foreground: 0 0% 90%;
+  --primary: 0 0% 20%;
+  --primary-foreground: 0 0% 100%;
+  --accent: 35 100% 60%;
+  --muted: 0 0% 40%;
+  --muted-foreground: 0 0% 60%;
+  --border: 0 0% 30%;
+  --input: 0 0% 20%;
+  --ring: 0 0% 50%;
+}
+
+  body {
+    @apply bg-background text-foreground font-mono text-sm leading-relaxed;
+  }
+
+  a {
+    @apply text-accent underline hover:brightness-125;
+  }
+
+  input, select, textarea {
+    @apply bg-card text-card-foreground border border-border rounded-md px-3 py-2;
+  }
+
+  table {
+    @apply border-separate border-spacing-y-1 text-left w-full;
+  }
+
+  th, td {
+    @apply px-4 py-2;
+  }
+
+  th {
+    @apply text-card-foreground font-semibold;
+  }
+
+  tr {
+    @apply border-b border-border;
+  }
+
+  .card {
+    @apply bg-card text-card-foreground p-4 rounded-md shadow;
+  }
+
+  .btn-primary {
+    @apply bg-primary text-primary-foreground px-4 py-2 rounded hover:brightness-110;
+  }
+}
+

app/submit/settings/page.tsx

@@ -0,0 +1,20 @@
+import { Suspense } from "react";
+import SettingsSubmit from "@/app/components/forms/SettingsSubmit";
+
+export const dynamic = "force-dynamic"; // keeps this page from being statically prerendered
+
+export default function Page() {
+  return (
+    <div className="px-4 py-8 max-w-5xl mx-auto">
+      <h1 className="text-2xl font-bold mb-2">Community Laser Settings Submission</h1>
+      <p className="text-muted-foreground mb-6">
+        Contribute tested settings. Submissions are reviewed before publishing.
+      </p>
+
+      <Suspense fallback={<div className="text-sm text-muted-foreground">Loading form…</div>}>
+        <SettingsSubmit />
+      </Suspense>
+    </div>
+  );
+}
+

app/uv-settings/[id]/page.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+import Image from "next/image";
+import Markdown from "react-markdown";
+
+export default function UVSettingDetailPage() {
+  const { id } = useParams();
+  const [setting, setSetting] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!id) return;
+    fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_uv/${id}?fields=submission_id,setting_title,uploader,setting_notes,photo.filename_disk,mat.name,mat_coat.name,mat_color.name,mat_opacity.opacity,mat_thickness,source.model,lens.field_size,lens.focal_length,focus,fill_settings,line_settings,raster_settings`)
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to load");
+        return res.json();
+      })
+      .then((data) => {
+        setSetting(data.data);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, [id]);
+
+  const openSearchInNewTab = (value) => {
+    if (!value || typeof window === "undefined") return;
+    const url = new URL("/uv-settings", window.location.origin);
+    url.searchParams.set("query", value);
+    window.open(url.toString(), "_blank", "noopener,noreferrer");
+  };
+
+  const renderRepeaterCard = (title, fields, data) => {
+    if (!data || !Array.isArray(data) || data.length === 0) return null;
+    return (
+      <div className="card bg-card p-4">
+        <h2 className="text-xl font-semibold mb-2">{title}</h2>
+        {data.map((item, i) => (
+          <div key={i} className="mb-4 border-b border-muted pb-2">
+            {fields.map((field) =>
+              field.condition === undefined || field.condition(item) ? (
+                <p key={field.key}>
+                  <strong>{field.label}:</strong>{" "}
+                  {item[field.key] !== undefined && item[field.key] !== null ? item[field.key].toString() : "—"}
+                </p>
+              ) : null
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  if (loading) return <div className="p-6 max-w-7xl mx-auto">Loading…</div>;
+  if (!setting) return <div className="p-6 max-w-7xl mx-auto">Setting not found.</div>;
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+        <div className="card bg-card p-4 flex flex-col justify-between">
+          <div>
+            <h1 className="text-3xl font-bold mb-1">{setting.setting_title}</h1>
+            <p className="text-muted-foreground mb-4">Uploaded by: {setting.uploader || "—"}</p>
+          </div>
+          <a
+            href="/uv-settings"
+            className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm self-start"
+          >
+            ← Back to UV Settings
+          </a>
+        </div>
+
+        <div className="card bg-card p-4 grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
+          <div className="flex justify-center">
+            {setting.photo?.filename_disk && (
+              <Image
+                src={`${process.env.NEXT_PUBLIC_API_BASE_URL}/assets/${setting.photo.filename_disk}`}
+                alt="Preview"
+                width={300}
+                height={300}
+                className="rounded-md"
+              />
+            )}
+          </div>
+          <div>
+            <p><strong>Material:</strong> <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.mat?.name)}>{setting.mat?.name || "—"}</span></p>
+            <p><strong>Coating:</strong> <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.mat_coat?.name)}>{setting.mat_coat?.name || "—"}</span></p>
+            <p><strong>Color:</strong> {setting.mat_color?.name || "—"}</p>
+            <p><strong>Opacity:</strong> {setting.mat_opacity?.opacity || "—"}</p>
+            <p><strong>Thickness:</strong> {setting.mat_thickness ? `${setting.mat_thickness} mm` : "—"}</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="card bg-card p-4">
+          <h2 className="text-xl font-semibold mb-2">Laser</h2>
+          <p><strong>Source Model:</strong> <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.source?.model)}>{setting.source?.model || "—"}</span></p>
+          <p><strong>Lens:</strong> {setting.lens?.field_size || "—"} mm | {setting.lens?.focal_length || "—"} mm</p>
+        </div>
+
+        <div className="card bg-card p-4">
+          <h2 className="text-xl font-semibold mb-2">Focus</h2>
+          <p><strong>Focus:</strong> {setting.focus || "—"}</p>
+        </div>
+      </div>
+
+      <div className="card bg-card p-4 mt-6">
+        <h2 className="text-xl font-semibold mb-2">Notes</h2>
+        <div className="prose dark:prose-invert">
+          <Markdown>{setting.setting_notes || "—"}</Markdown>
+        </div>
+      </div>
+
+      <hr className="my-6 border-muted" />
+
+      {renderRepeaterCard("Fill Settings", [
+        { key: "name", label: "Fill Name" },
+        { key: "speed", label: "Speed (mm/s)" },
+        { key: "frequency", label: "Frequency (kHz)" },
+        { key: "pulse", label: "Pulse Width (ns)" },
+        { key: "interval", label: "Interval (mm)" },
+        { key: "pass", label: "Passes" },
+        { key: "type", label: "Type" },
+        { key: "angle", label: "Angle (°)" },
+        { key: "auto", label: "Auto-Rotate" },
+        { key: "increment", label: "Increment (°)", condition: (e) => e.auto },
+        { key: "cross", label: "Crosshatch" },
+        { key: "flood", label: "Flood Fill" },
+        { key: "air", label: "Air Assist" },
+      ], setting.fill_settings)}
+
+      {renderRepeaterCard("Line Settings", [
+        { key: "name", label: "Line Name" },
+        { key: "speed", label: "Speed (mm/s)" },
+        { key: "frequency", label: "Frequency (kHz)" },
+        { key: "pulse", label: "Pulse Width (ns)" },
+        { key: "perf", label: "Perforation Mode" },
+        { key: "cut", label: "Cut Override" },
+        { key: "skip", label: "Skip Pass" },
+        { key: "wobble", label: "Wobble Enabled" },
+        { key: "step", label: "Wobble Step" },
+        { key: "size", label: "Wobble Size" },
+        { key: "pass", label: "Passes" },
+        { key: "air", label: "Air Assist" },
+      ], setting.line_settings)}
+
+      {renderRepeaterCard("Raster Settings", [
+        { key: "name", label: "Raster Name" },
+        { key: "speed", label: "Speed (mm/s)" },
+        { key: "frequency", label: "Frequency (kHz)" },
+        { key: "pulse", label: "Pulse Width (ns)" },
+        { key: "type", label: "Type" },
+        { key: "dither", label: "Dither" },
+        { key: "halftone_cell", label: "Halftone Cell" },
+        { key: "halftone_angle", label: "Halftone Angle" },
+        { key: "inversion", label: "Invert Colors" },
+        { key: "interval", label: "Interval (mm)" },
+        { key: "dot", label: "Dot Size" },
+        { key: "pass", label: "Passes" },
+        { key: "cross", label: "Crosshatch" },
+        { key: "air", label: "Air Assist" },
+      ], setting.raster_settings)}
+    </div>
+  );
+}
+

app/uv-settings/layout.tsx

@@ -0,0 +1,4 @@
+import { Suspense } from "react";
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <Suspense fallback={null}>{children}</Suspense>;
+}

app/uv-settings/page.tsx

@@ -0,0 +1,229 @@
+"use client";
+
+import { useEffect, useState, useMemo } from "react";
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+
+export default function UVSettingsPage() {
+  const searchParams = useSearchParams();
+  const initialQuery = searchParams.get("query") || "";
+
+  const [query, setQuery] = useState(initialQuery);
+  const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
+  const [settings, setSettings] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedQuery(query), 300);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  useEffect(() => {
+    fetch(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_uv?fields=submission_id,setting_title,uploader,photo.id,photo.title,mat.name,mat_coat.name,source.model,lens.field_size&limit=-1`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        setSettings(data.data || []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  const highlight = (text: string) => {
+    if (!debouncedQuery) return text;
+    const regex = new RegExp(`(${debouncedQuery})`, "gi");
+    return text?.replace(regex, '<mark>$1</mark>');
+  };
+
+  const filtered = useMemo(() => {
+    const q = debouncedQuery.toLowerCase();
+    return settings.filter((entry) => {
+      const fieldsToSearch = [
+        entry.setting_title,
+        entry.uploader,
+        entry.mat?.name,
+        entry.mat_coat?.name,
+        entry.source?.model,
+        entry.lens?.field_size,
+      ];
+      return fieldsToSearch.filter(Boolean).some((field) =>
+        field.toLowerCase().includes(q)
+      );
+    });
+  }, [settings, debouncedQuery]);
+
+  const totalSettings = settings.length;
+  const uniqueMaterials = new Set(settings.map(s => s.mat?.name).filter(Boolean)).size;
+  const commonLens = settings.reduce((acc: Record<string, number>, cur) => {
+    const lens = cur.lens?.field_size;
+    if (!lens) return acc;
+    acc[lens] = (acc[lens] || 0) + 1;
+    return acc;
+  }, {});
+  const mostCommonLens = Object.entries(commonLens)
+    .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
+
+  const sourceModels = settings.reduce((acc: Record<string, number>, cur) => {
+    const model = cur.source?.model;
+    if (!model) return acc;
+    acc[model] = (acc[model] || 0) + 1;
+    return acc;
+  }, {});
+  const mostCommonSource = Object.entries(sourceModels)
+    .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
+
+  const recentSettings = [...settings]
+    .sort((a, b) => b.submission_id - a.submission_id)
+    .slice(0, 5);
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <style jsx global>{`
+        mark {
+          background: #ffde59;
+          color: #242424;
+          padding: 0 2px;
+          border-radius: 2px;
+        }
+      `}</style>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
+        <div className="card bg-card text-card-foreground p-4">
+          <h1 className="text-2xl font-bold mb-2">UV Laser Settings</h1>
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search settings by material, uploader, etc..."
+            className="w-full mb-4 dark:bg-background border border-border rounded-md p-2"
+          />
+          <p className="text-sm text-muted-foreground mb-2">
+            View and explore detailed UV laser settings with context.
+          </p>
+          <a
+            href="/"
+            className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm"
+          >
+            ← Back to Main Menu
+          </a>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">How to Use</h2>
+          <p className="text-sm">
+            Browse real-world UV laser settings from the community. Use the search to narrow results. Click any setting to view its full configuration, notes, and photos. Click any linked term to find related settings.
+          </p>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Resources</h2>
+          <ul className="text-sm space-y-1">
+            <li>
+              <a href="/materials" target="_blank" rel="noopener noreferrer" className="underline text-accent">Material Safety Guide</a>
+            </li>
+            <li>
+              <a href="https://lasereverything.net/scripts/laspwrconvert.php" target="_blank" rel="noopener noreferrer" className="underline text-accent">Laser Parameter Calculator</a>
+            </li>
+            <li>
+              <a href="https://jptoe.com/downloads" target="_blank" rel="noopener noreferrer" className="underline text-accent">JPT Datasheets</a>
+            </li>
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4 flex flex-col justify-between">
+          <div>
+            <h2 className="text-md font-semibold mb-2">Submit a Setting</h2>
+            <p className="text-sm text-muted-foreground mb-2">
+              Have a reliable UV setting to share? Contribute to the community database.
+            </p>
+          </div>
+          <Link
+  href="/submit/settings?target=settings_uv"
+  className="bg-accent text-background text-sm px-4 py-2 rounded hover:opacity-90 transition"
+>
+  Submit a Setting
+</Link>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Stats Summary</h2>
+          <ul className="text-sm space-y-1">
+            <li>Total Settings: {totalSettings}</li>
+            <li>Unique Materials: {uniqueMaterials}</li>
+            <li>Most Common Lens: {mostCommonLens}</li>
+            <li>Most Used Source: {mostCommonSource}</li>
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Recently Added</h2>
+          <ul className="text-sm space-y-1">
+            {recentSettings.map((s) => (
+              <li key={s.submission_id}>
+                <Link href={`/uv-settings/${s.submission_id}`} className="underline text-accent">
+                  {s.setting_title || "Untitled"}
+                </Link> by {s.uploader || "—"}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+
+      {loading ? (
+        <p className="text-muted">Loading settings...</p>
+      ) : filtered.length === 0 ? (
+        <p className="text-muted">No UV settings found.</p>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr>
+                <th className="px-2 py-2 text-left">Photo</th>
+                <th className="px-2 py-2 text-left">Title</th>
+                <th className="px-2 py-2 text-left">Uploader</th>
+                <th className="px-2 py-2 text-left">Material</th>
+                <th className="px-2 py-2 text-left">Coating</th>
+                <th className="px-2 py-2 text-left">Source</th>
+                <th className="px-2 py-2 text-left">Lens</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((setting) => (
+                <tr key={setting.submission_id} className="border-t border-border">
+                  <td className="px-2 py-2">
+                    {setting.photo?.id ? (
+                      <Image
+                        src={`https://forms.lasereverything.net/assets/${setting.photo.id}`}
+                        alt={setting.photo.title || "laser preview"}
+                        width={64}
+                        height={64}
+                        className="rounded-md"
+                      />
+                    ) : (
+                      "—"
+                    )}
+                  </td>
+                  <td className="px-2 py-2 whitespace-nowrap">
+                    <Link
+                      href={`/uv-settings/${setting.submission_id}`}
+                      className="text-accent underline"
+                      dangerouslySetInnerHTML={{ __html: highlight(setting.setting_title || "—") }}
+                    />
+                  </td>
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.uploader || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.mat?.name || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.mat_coat?.name || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.source?.model || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.lens?.field_size || "—") }} />
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+

app/uv-settings/page.tsx.bak

@@ -0,0 +1,226 @@
+"use client";
+
+import { useEffect, useState, useMemo } from "react";
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+
+export default function UVSettingsPage() {
+  const searchParams = useSearchParams();
+  const initialQuery = searchParams.get("query") || "";
+
+  const [query, setQuery] = useState(initialQuery);
+  const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
+  const [settings, setSettings] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedQuery(query), 300);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  useEffect(() => {
+    fetch(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_uv?fields=submission_id,setting_title,uploader,photo.filename_disk,photo.title,mat.name,mat_coat.name,source.model,lens.field_size&limit=-1`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        setSettings(data.data || []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  const highlight = (text: string) => {
+    if (!debouncedQuery) return text;
+    const regex = new RegExp(`(${debouncedQuery})`, "gi");
+    return text?.replace(regex, '<mark>$1</mark>');
+  };
+
+  const filtered = useMemo(() => {
+    const q = debouncedQuery.toLowerCase();
+    return settings.filter((entry) => {
+      const fieldsToSearch = [
+        entry.setting_title,
+        entry.uploader,
+        entry.mat?.name,
+        entry.mat_coat?.name,
+        entry.source?.model,
+        entry.lens?.field_size,
+      ];
+      return fieldsToSearch.filter(Boolean).some((field) =>
+        field.toLowerCase().includes(q)
+      );
+    });
+  }, [settings, debouncedQuery]);
+
+  const totalSettings = settings.length;
+  const uniqueMaterials = new Set(settings.map(s => s.mat?.name).filter(Boolean)).size;
+  const commonLens = settings.reduce((acc: Record<string, number>, cur) => {
+    const lens = cur.lens?.field_size;
+    if (!lens) return acc;
+    acc[lens] = (acc[lens] || 0) + 1;
+    return acc;
+  }, {});
+  const mostCommonLens = Object.entries(commonLens)
+    .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
+
+  const sourceModels = settings.reduce((acc: Record<string, number>, cur) => {
+    const model = cur.source?.model;
+    if (!model) return acc;
+    acc[model] = (acc[model] || 0) + 1;
+    return acc;
+  }, {});
+  const mostCommonSource = Object.entries(sourceModels)
+    .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
+
+  const recentSettings = [...settings]
+    .sort((a, b) => b.submission_id - a.submission_id)
+    .slice(0, 5);
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <style jsx global>{`
+        mark {
+          background: #ffde59;
+          color: #242424;
+          padding: 0 2px;
+          border-radius: 2px;
+        }
+      `}</style>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
+        <div className="card bg-card text-card-foreground p-4">
+          <h1 className="text-2xl font-bold mb-2">UV Laser Settings</h1>
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search settings by material, uploader, etc..."
+            className="w-full mb-4 dark:bg-background border border-border rounded-md p-2"
+          />
+          <p className="text-sm text-muted-foreground mb-2">
+            View and explore detailed UV laser settings with context.
+          </p>
+          <a
+            href="/"
+            className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm"
+          >
+            ← Back to Main Menu
+          </a>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">How to Use</h2>
+          <p className="text-sm">
+            Browse real-world UV laser settings from the community. Use the search to narrow results. Click any setting to view its full configuration, notes, and photos. Click any linked term to find related settings.
+          </p>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Resources</h2>
+          <ul className="text-sm space-y-1">
+            <li>
+              <a href="/materials" target="_blank" rel="noopener noreferrer" className="underline text-accent">Material Safety Guide</a>
+            </li>
+            <li>
+              <a href="https://lasereverything.net/scripts/laspwrconvert.php" target="_blank" rel="noopener noreferrer" className="underline text-accent">Laser Parameter Calculator</a>
+            </li>
+            <li>
+              <a href="https://jptoe.com/downloads" target="_blank" rel="noopener noreferrer" className="underline text-accent">JPT Datasheets</a>
+            </li>
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4 flex flex-col justify-between">
+          <div>
+            <h2 className="text-md font-semibold mb-2">Submit a Setting</h2>
+            <p className="text-sm text-muted-foreground mb-2">
+              Have a reliable UV setting to share? Contribute to the community database.
+            </p>
+          </div>
+          <button disabled className="bg-muted text-foreground text-sm px-4 py-2 rounded opacity-50 cursor-not-allowed">
+            Coming Soon
+          </button>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Stats Summary</h2>
+          <ul className="text-sm space-y-1">
+            <li>Total Settings: {totalSettings}</li>
+            <li>Unique Materials: {uniqueMaterials}</li>
+            <li>Most Common Lens: {mostCommonLens}</li>
+            <li>Most Used Source: {mostCommonSource}</li>
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-lg font-semibold mb-2">Recently Added</h2>
+          <ul className="text-sm space-y-1">
+            {recentSettings.map((s) => (
+              <li key={s.submission_id}>
+                <Link href={`/uv-settings/${s.submission_id}`} className="underline text-accent">
+                  {s.setting_title || "Untitled"}
+                </Link> by {s.uploader || "—"}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+
+      {loading ? (
+        <p className="text-muted">Loading settings...</p>
+      ) : filtered.length === 0 ? (
+        <p className="text-muted">No UV settings found.</p>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr>
+                <th className="px-2 py-2 text-left">Photo</th>
+                <th className="px-2 py-2 text-left">Title</th>
+                <th className="px-2 py-2 text-left">Uploader</th>
+                <th className="px-2 py-2 text-left">Material</th>
+                <th className="px-2 py-2 text-left">Coating</th>
+                <th className="px-2 py-2 text-left">Source</th>
+                <th className="px-2 py-2 text-left">Lens</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((setting) => (
+                <tr key={setting.submission_id} className="border-t border-border">
+                  <td className="px-2 py-2">
+                    {setting.photo?.filename_disk ? (
+                      <Image
+                        src={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
+                        alt={setting.photo.title || "laser preview"}
+                        width={64}
+                        height={64}
+                        className="rounded-md"
+                      />
+                    ) : (
+                      "—"
+                    )}
+                  </td>
+                  <td className="px-2 py-2 whitespace-nowrap">
+                    <Link
+                      href={`/uv-settings/${setting.submission_id}`}
+                      className="text-accent underline"
+                      dangerouslySetInnerHTML={{ __html: highlight(setting.setting_title || "—") }}
+                    />
+                  </td>
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.uploader || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.mat?.name || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.mat_coat?.name || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.source?.model || "—") }} />
+                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.lens?.field_size || "—") }} />
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+