maestro

"use strict";
/**
 * @file Design reference knowledge — 10 curated design reference docs
 * covering typography, color, spatial design, motion, interaction,
 * responsive design, UX writing, frontend aesthetics (anti-slop),
 * video composition (HyperFrames HTML→MP4 schema), and the HyperFrames
 * block catalog (~40 ready-made overlays, shader transitions, UI animations).
 *
 * Based on Impeccable (impeccable.style) design knowledge, plus distilled
 * docs from anthropics/skills/frontend-design + ibelick/ui-skills/baseline-ui
 * (frontend-aesthetics) and heygen-com/hyperframes (video-composition,
 * video-blocks).
 *
 * Files stored locally at ~/.maestro-toolbox/design-references/
 */
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.createDesignReferenceTools = createDesignReferenceTools;
const sdk_1 = require("@lmstudio/sdk");
const zod_1 = require("zod");
const promises_1 = require("fs/promises");
const path_1 = require("path");
const os = __importStar(require("os"));
const REFERENCES_DIR = (0, path_1.join)(os.homedir(), ".maestro-toolbox", "design-references");
const DESIGN_REFERENCES = [
    { id: "typography", name: "Typography", description: "Font selection, pairing, modular scale, fluid type, web font loading, OpenType features, accessibility" },
    { id: "color-and-contrast", name: "Color & Contrast", description: "OKLCH color space, tinted neutrals, 60-30-10 rule, WCAG contrast, dark mode, dangerous color combinations" },
    { id: "spatial-design", name: "Spatial Design", description: "4pt spacing system, CSS Grid, visual hierarchy, squint test, cards-are-overused, container queries, optical adjustments" },
    { id: "motion-design", name: "Motion Design", description: "100/300/500ms rule, easing curves, only animate transform/opacity, stagger, reduced motion, perceived performance" },
    { id: "interaction-design", name: "Interaction Design", description: "8 interactive states, focus-visible, form design, modals with dialog, Popover API, undo > confirm, keyboard navigation" },
    { id: "responsive-design", name: "Responsive Design", description: "Mobile-first, content-driven breakpoints, pointer/hover queries, safe areas, responsive images, layout adaptation" },
    { id: "ux-writing", name: "UX Writing", description: "Button labels (verb+object), error message formula, empty states, voice vs tone, accessibility, translation" },
    { id: "frontend-aesthetics", name: "Frontend Aesthetics", description: "Pick a bold direction, anti-AI-slop list, hard rules (200ms max interaction, one accent, no purple gradients), composition beyond defaults, distinctiveness test" },
    { id: "video-composition", name: "Video Composition", description: "HyperFrames HTML→MP4 schema: composition shell (entry MUST be index.html), data-* attribute table, video/audio rules, timeline contract, GSAP essentials. Includes 5 copy-paste CSS scene-transition snippets (crossfade, blur crossfade, push slide, zoom through, color dip) — use these IN the host timeline instead of embedding shader-demo blocks. Load when generating any HTML that will render to MP4." },
    { id: "video-blocks", name: "Video Blocks (HyperFrames Catalog)", description: "Catalog organized into DROP-IN blocks (social overlays, data-chart, flowchart, logo-outro — embed + customize) vs SHOWCASE DEMOS (cinematic-zoom, glitch, thermal-distortion, etc — DO NOT embed, they are 4s demo clips with placeholder 'SCENE A/B' content on HF demo colors). Includes mandatory customization workflow + verification checklist. Load alongside video-composition for any video task." },
];
/** In-memory cache for loaded reference files. */
const refCache = new Map();
async function loadReference(id) {
    if (refCache.has(id))
        return refCache.get(id);
    try {
        const filePath = (0, path_1.join)(REFERENCES_DIR, `${id}.md`);
        const content = await (0, promises_1.readFile)(filePath, "utf-8");
        if (content) {
            refCache.set(id, content);
            return content;
        }
        return null;
    }
    catch {
        return null;
    }
}
function createDesignReferenceTools() {
    const listTool = (0, sdk_1.tool)({
        name: "list_design_references",
        description: "List available design reference guides (typography, color, spatial, motion, interaction, responsive, ux-writing, frontend-aesthetics, video-composition, video-blocks). " +
            "Each contains expert-level rules, anti-patterns, and CSS examples. " +
            "Load 1-2 relevant references before generating HTML/CSS — don't load all 10. " +
            "Tip: load 'frontend-aesthetics' when no DESIGN.md is in play, to avoid generic-looking output. " +
            "Load 'video-composition' when generating HTML that will render to MP4 (HyperFrames). " +
            "Load 'video-blocks' alongside it for the catalog of ~40 ready-made overlays/transitions/UI animations.",
        parameters: {
            filter: zod_1.z.string().optional().describe("Optional keyword to filter references by id/name/description (e.g. 'color', 'type', 'motion')."),
        },
        implementation: async ({ filter }) => {
            let results = DESIGN_REFERENCES;
            if (filter) {
                const term = filter.toLowerCase();
                results = DESIGN_REFERENCES.filter(r => r.id.includes(term) ||
                    r.name.toLowerCase().includes(term) ||
                    r.description.toLowerCase().includes(term));
            }
            return {
                count: results.length,
                references: results.map(r => ({
                    id: r.id,
                    name: r.name,
                    description: r.description,
                })),
                usage: "Call load_design_reference(id) for the 1-2 references most relevant to your task.",
            };
        },
    });
    const loadTool = (0, sdk_1.tool)({
        name: "load_design_reference",
        description: "Load a design reference guide with expert rules, anti-patterns, and CSS examples. " +
            "Available references: typography, color-and-contrast, spatial-design, motion-design, " +
            "interaction-design, responsive-design, ux-writing, frontend-aesthetics, video-composition, video-blocks. " +
            "Load relevant references BEFORE generating HTML/CSS for best results.",
        parameters: {
            id: zod_1.z.string().describe("Reference ID: typography, color-and-contrast, spatial-design, motion-design, interaction-design, responsive-design, ux-writing, frontend-aesthetics, video-composition, video-blocks"),
        },
        implementation: async ({ id }, { status }) => {
            const entry = DESIGN_REFERENCES.find(r => r.id === id.toLowerCase());
            if (!entry) {
                return {
                    error: `Unknown reference '${id}'.`,
                    available: DESIGN_REFERENCES.map(r => r.id),
                };
            }
            status(`Loading ${entry.name} reference...`);
            const content = await loadReference(entry.id);
            if (!content) {
                return {
                    error: `Reference file not found at ~/.maestro-toolbox/design-references/${entry.id}.md. Files may need to be reinstalled.`,
                };
            }
            return {
                id: entry.id,
                name: entry.name,
                reference: content,
            };
        },
    });
    return [listTool, loadTool];
}
//# sourceMappingURL=designReferences.js.map