Loupe

// loupe.config.ts
import type { Config } from "@lucentive-labs/loupe-schema";

export const config: Config = {
  version: 1,
  title: "Northwind · Brand System",
  // No image assets in this lock — palette / type specimens only.
  assets: {},
  // Bring your own brand: semantic tokens, kebab keys, no --loupe- prefix.
  theme: {
    "color-bg": "#14110e",
    "color-primary": "#f6a13c",
    "color-ring": "#f6a13c",
    "font-sans": "Manrope, system-ui, sans-serif",
  },
  groups: [
    {
      id: "color",
      title: "Color system",
      prompt: "Which palette carries the brand?",
      options: [
        {
          id: "amberInk",
          label: "Amber on ink",
          caption: "Warm, premium, high-contrast",
          recommended: true,
          specimen: {
            kind: "palette",
            colors: ["#14110e", "#f6a13c", "#ffc879", "#f7efe3"],
          },
        },
        {
          id: "monoSignal",
          label: "Mono + one signal",
          specimen: {
            kind: "palette",
            colors: ["#101216", "#3a4048", "#9aa3ad", "#f6a13c"],
          },
        },
      ],
    },
  ],
  // What the build pass must never do — travels with the brief.
  banned: ["Generic SaaS gradient blobs.", "Cold corporate blue as primary."],
};

// app/decide/page.tsx
"use client";

import { Loupe } from "@lucentive-labs/loupe-react";
import "@lucentive-labs/loupe-dom/styles.css";
import { config } from "./loupe.config";

export default function DecidePage() {
  return (
    <Loupe
      config={config}
      // Optional per-mount theme override.
      theme={{ "color-primary": "#2fd4c4" }}
      // Fires after every lock / clear / reset with the live selections.
      onLockChange={(selections) => console.log(selections)}
    />
  );
}

// generate.ts — Node, build-time
import { generate } from "@lucentive-labs/loupe-generator";
import { config } from "./loupe.config";

// Validates (structural + semantic), copies referenced assets, and inlines
// JS + CSS into index.html. Throws on an invalid config.
const { htmlPath, assets } = await generate(config, {
  outDir: "out/decision-lock",
  assetsDir: "design/boards",
});

console.log(`Artifact: ${htmlPath}`);
console.log(`Copied ${assets.length} asset(s) — open the file anywhere.`);

// agent-authoring.ts — an agent fills the same contract
import {
  toJsonSchema,
  parseConfig,
  validateConfig,
} from "@lucentive-labs/loupe-schema";

// 1. Hand the JSON Schema to the model as the authoring contract.
const schema = toJsonSchema();

// 2. The model returns a config object; parse enforces structure.
const config = parseConfig(modelOutput);

// 3. Semantic checks beyond shape: missing assets, duplicate ids,
//    broken preview references. Empty array = ready to render.
const problems = validateConfig(config);
if (problems.length) throw new Error(problems.join("\n"));