@a13xu/lucid 1.9.5 → 1.11.0

package/build/tools/webdev/perf-hints.js

@@ -0,0 +1,247 @@
+import { z } from "zod";
+// ---------------------------------------------------------------------------
+// Schema
+// ---------------------------------------------------------------------------
+export const PerfHintsSchema = z.object({
+    code: z.string().describe("Component or page source code to analyze"),
+    framework: z
+        .enum(["react", "vue", "nuxt", "vanilla"])
+        .describe("Frontend framework"),
+    context: z
+        .enum(["component", "page", "layout"])
+        .describe("File role in the application"),
+});
+const RULES = [
+    // LCP rules
+    {
+        id: "lcp-no-priority-img",
+        metric: "LCP",
+        impact: "high",
+        frameworks: ["react", "all"],
+        contexts: ["page", "layout"],
+        // Next.js Image without priority on hero images
+        pattern: /<Image\b(?![^>]*\bpriority\b)[^>]*(?:hero|banner|above-fold|lcp)[^>]*>/gi,
+        message: "Hero/LCP Image missing `priority` prop — delays LCP",
+        fix: "Add priority to the above-the-fold <Image> component: <Image priority ... />",
+    },
+    {
+        id: "lcp-img-no-dimensions",
+        metric: "LCP",
+        impact: "high",
+        frameworks: ["all"],
+        contexts: ["all"],
+        // <img> without width and height attributes
+        pattern: /<img\b(?![^>]*\bwidth\b)[^>]*>/gi,
+        message: "<img> missing width/height — browser cannot reserve layout space, causing reflow",
+        fix: "Always add explicit width and height to <img> to prevent layout shifts and help LCP",
+    },
+    {
+        id: "lcp-large-background",
+        metric: "LCP",
+        impact: "medium",
+        frameworks: ["all"],
+        contexts: ["page", "layout"],
+        pattern: /background-image\s*:\s*url\s*\(/gi,
+        message: "CSS background-image is not preloadable — consider using <img> for LCP element",
+        fix: "Use <img> instead of background-image for above-the-fold hero images so browsers can preload them",
+    },
+    // CLS rules
+    {
+        id: "cls-no-aspect-ratio",
+        metric: "CLS",
+        impact: "high",
+        frameworks: ["all"],
+        contexts: ["all"],
+        // img/video without aspect-ratio or explicit dimensions
+        pattern: /<(?:img|video|iframe)\b(?![^>]*(?:width|aspect-ratio))[^>]*>/gi,
+        message: "Media element without dimensions/aspect-ratio causes layout shift (CLS)",
+        fix: "Add width + height attrs or aspect-ratio CSS to reserve space before media loads",
+    },
+    {
+        id: "cls-dynamic-inject",
+        metric: "CLS",
+        impact: "high",
+        frameworks: ["all"],
+        contexts: ["page", "layout"],
+        // Ad slots, banners injected dynamically
+        pattern: /document\.body\.(?:append|prepend|insertBefore)|\.insertAdjacentElement\s*\(\s*["'](?:beforebegin|afterbegin)/g,
+        message: "Dynamic DOM insertion at top of page causes CLS",
+        fix: "Reserve space for dynamically injected content (ads, banners) with a min-height placeholder",
+    },
+    {
+        id: "cls-font-swap",
+        metric: "CLS",
+        impact: "medium",
+        frameworks: ["all"],
+        contexts: ["page", "layout"],
+        pattern: /@font-face\b(?![^}]*font-display)/gi,
+        message: "@font-face without font-display can cause text layout shift (FOUT/FOIT)",
+        fix: "Add font-display: swap (or optional) to @font-face rules",
+    },
+    // INP rules
+    {
+        id: "inp-heavy-click-handler",
+        metric: "INP",
+        impact: "high",
+        frameworks: ["react", "vue", "all"],
+        contexts: ["component", "all"],
+        // Synchronous loops or complex operations in event handlers
+        pattern: /(?:onClick|@click|v-on:click)\s*=\s*\{[^}]*(?:for\s*\(|while\s*\(|\.forEach\s*\()/g,
+        message: "Potentially heavy computation in click handler — can block main thread and hurt INP",
+        fix: "Move expensive work off click handler: use setTimeout, requestIdleCallback, or Web Worker",
+    },
+    {
+        id: "inp-missing-memo",
+        metric: "INP",
+        impact: "medium",
+        frameworks: ["react"],
+        contexts: ["component"],
+        // Large lists without useMemo/memo
+        pattern: /\.map\s*\(\s*\([^)]*\)\s*=>/g,
+        message: "Array .map() in render — if list is large, wrap with useMemo to avoid re-renders",
+        fix: "const items = useMemo(() => data.map(...), [data]); — prevents recalculation on unrelated renders",
+    },
+    {
+        id: "inp-missing-computed",
+        metric: "INP",
+        impact: "medium",
+        frameworks: ["vue", "nuxt"],
+        contexts: ["component"],
+        // .filter/.reduce in template expressions
+        pattern: /\{\{[^}]*\.(?:filter|reduce|sort|map)\s*\(/g,
+        message: "Array transform in template expression runs on every render — use computed()",
+        fix: "Move .filter()/.map()/.sort() to a computed property: const filtered = computed(() => items.value.filter(...))",
+    },
+    // FCP / TTFB rules
+    {
+        id: "ttfb-fetch-in-render",
+        metric: "TTFB",
+        impact: "high",
+        frameworks: ["react", "vue", "nuxt", "vanilla"],
+        contexts: ["component", "page"],
+        // fetch() or axios() called directly in component body (not in useEffect/onMounted/setup)
+        pattern: /(?:^|\n)\s*(?:const|let)\s+\w+\s*=\s*(?:await\s+)?(?:fetch|axios)\s*\(/gm,
+        message: "Data fetching at component root level — can block rendering and inflate TTFB",
+        fix: "Move data fetching into useEffect (React), onMounted/setup (Vue), or use SSR data fetching (useFetch in Nuxt, getServerSideProps in Next)",
+    },
+    {
+        id: "fcp-render-blocking",
+        metric: "FCP",
+        impact: "high",
+        frameworks: ["all"],
+        contexts: ["page", "layout"],
+        // Synchronous scripts in <head>
+        pattern: /<script\b(?![^>]*(?:async|defer|type\s*=\s*["']module["']))[^>]*src=/gi,
+        message: "Render-blocking synchronous <script> in document — delays FCP",
+        fix: "Add defer or async attribute: <script defer src=...> or <script type=\"module\" src=...>",
+    },
+    // General perf rules
+    {
+        id: "general-console-log",
+        metric: "General",
+        impact: "low",
+        frameworks: ["all"],
+        contexts: ["all"],
+        pattern: /console\.log\s*\(/g,
+        message: "console.log() left in production code — minor serialization overhead",
+        fix: "Remove console.log calls or guard with: if (process.env.NODE_ENV !== 'production') console.log(...)",
+    },
+    {
+        id: "general-inline-style-object",
+        metric: "CLS",
+        impact: "low",
+        frameworks: ["react"],
+        contexts: ["component"],
+        // Recreated style objects on every render
+        pattern: /style\s*=\s*\{\s*\{/g,
+        message: "Inline style object recreated on every render — extract to constant or use className",
+        fix: "Move to a const outside the component: const styles = { ... }; or use a CSS class",
+    },
+    {
+        id: "general-large-import",
+        metric: "FCP",
+        impact: "medium",
+        frameworks: ["all"],
+        contexts: ["all"],
+        // Import of whole large libraries
+        pattern: /import\s+\*\s+as\s+\w+\s+from\s+["'](?:lodash|moment|rxjs)["']/g,
+        message: "Whole library import (lodash/moment/rxjs) increases bundle size — tree-shake",
+        fix: "Import only what you need: import { debounce } from 'lodash-es' or import debounce from 'lodash/debounce'",
+    },
+];
+// ---------------------------------------------------------------------------
+// Analyzer
+// ---------------------------------------------------------------------------
+function analyzePerf(code, framework, context) {
+    const lines = code.split("\n");
+    const issues = [];
+    for (const rule of RULES) {
+        const fw = rule.frameworks;
+        if (!fw.includes("all") && !fw.includes(framework))
+            continue;
+        const ctx = rule.contexts;
+        if (!ctx.includes("all") && !ctx.includes(context))
+            continue;
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            if (/^\s*\/\/|^\s*\*/.test(line))
+                continue;
+            const re = new RegExp(rule.pattern.source, rule.pattern.flags.replace("g", "") + "g");
+            let match;
+            while ((match = re.exec(line)) !== null) {
+                issues.push({
+                    line: i + 1,
+                    metric: rule.metric,
+                    impact: rule.impact,
+                    message: rule.message,
+                    fix: rule.fix,
+                });
+                if (match.index === re.lastIndex)
+                    re.lastIndex++;
+            }
+        }
+    }
+    const metricOrder = { LCP: 0, CLS: 1, INP: 2, FCP: 3, TTFB: 4, General: 5 };
+    const impactOrder = { high: 0, medium: 1, low: 2 };
+    issues.sort((a, b) => metricOrder[a.metric] - metricOrder[b.metric] ||
+        impactOrder[a.impact] - impactOrder[b.impact] ||
+        a.line - b.line);
+    return issues;
+}
+// ---------------------------------------------------------------------------
+// Formatter
+// ---------------------------------------------------------------------------
+const IMPACT_ICON = { high: "🔴", medium: "🟠", low: "🔵" };
+const METRIC_EMOJI = {
+    LCP: "🖼️", CLS: "📐", INP: "⚡", FCP: "🎨", TTFB: "🌐", General: "⚙️",
+};
+// ---------------------------------------------------------------------------
+// Handler
+// ---------------------------------------------------------------------------
+// Example call:
+//   handlePerfHints({ code: '<img src="hero.jpg">', framework: "react", context: "page" })
+export function handlePerfHints(args) {
+    const { code, framework, context } = args;
+    const issues = analyzePerf(code, framework, context);
+    if (issues.length === 0) {
+        return (`✅ No performance issues detected (${framework}, ${context} context).\n\n` +
+            `💡 Tip: Run Lighthouse or web-vitals in the browser for runtime CWV measurement. ` +
+            `Static analysis cannot detect runtime bottlenecks like long tasks, large images, or slow fonts.`);
+    }
+    const counts = { high: 0, medium: 0, low: 0 };
+    for (const i of issues)
+        counts[i.impact]++;
+    const lines = [
+        `⚡ Performance Hints — ${framework} ${context} (Core Web Vitals)`,
+        `Found ${issues.length} issue(s): 🔴 ${counts.high} high  🟠 ${counts.medium} medium  🔵 ${counts.low} low`,
+        ``,
+    ];
+    for (const issue of issues) {
+        lines.push(`${IMPACT_ICON[issue.impact]} Line ${issue.line} — ${METRIC_EMOJI[issue.metric]} ${issue.metric}`, `   ${issue.message}`, `   Fix: ${issue.fix}`, ``);
+    }
+    lines.push(`💡 Reasoning: Analyzed ${context} for Core Web Vitals issues (LCP, CLS, INP) and general ` +
+        `performance anti-patterns. High-impact issues should be fixed first. ` +
+        `Run Lighthouse (Chrome DevTools) for real-world CWV scores and use ` +
+        `https://web.dev/measure/ for field data.`);
+    return lines.join("\n");
+}

package/build/tools/webdev/responsive-layout.d.ts

@@ -0,0 +1,18 @@
+import { z } from "zod";
+export declare const ResponsiveLayoutSchema: z.ZodObject<{
+    description: z.ZodString;
+    framework: z.ZodEnum<["tailwind", "css-grid", "flexbox"]>;
+    breakpoints: z.ZodArray<z.ZodString, "many">;
+    container: z.ZodDefault<z.ZodOptional<z.ZodEnum<["full", "centered", "sidebar"]>>>;
+}, "strip", z.ZodTypeAny, {
+    description: string;
+    framework: "tailwind" | "css-grid" | "flexbox";
+    breakpoints: string[];
+    container: "full" | "centered" | "sidebar";
+}, {
+    description: string;
+    framework: "tailwind" | "css-grid" | "flexbox";
+    breakpoints: string[];
+    container?: "full" | "centered" | "sidebar" | undefined;
+}>;
+export declare function handleResponsiveLayout(args: z.infer<typeof ResponsiveLayoutSchema>): string;

package/build/tools/webdev/responsive-layout.js

@@ -0,0 +1,229 @@
+import { z } from "zod";
+// ---------------------------------------------------------------------------
+// Schema
+// ---------------------------------------------------------------------------
+export const ResponsiveLayoutSchema = z.object({
+    description: z.string().describe("Wireframe description (e.g. 'sidebar left, main content, right panel')"),
+    framework: z
+        .enum(["tailwind", "css-grid", "flexbox"])
+        .describe("CSS framework/technique to use"),
+    breakpoints: z
+        .array(z.string())
+        .min(1)
+        .max(5)
+        .describe("Breakpoint names to handle (e.g. ['mobile', 'tablet', 'desktop'])"),
+    container: z
+        .enum(["full", "centered", "sidebar"])
+        .optional()
+        .default("centered")
+        .describe("Layout container type"),
+});
+// ---------------------------------------------------------------------------
+// Layout builders
+// ---------------------------------------------------------------------------
+function buildTailwindLayout(description, breakpoints, container) {
+    const hasMobile = breakpoints.some((b) => /mobile|sm|xs/i.test(b));
+    const hasTablet = breakpoints.some((b) => /tablet|md/i.test(b));
+    const hasDesktop = breakpoints.some((b) => /desktop|lg|xl/i.test(b));
+    const colsClass = container === "sidebar"
+        ? `grid-cols-1${hasTablet ? " md:grid-cols-[260px_1fr]" : ""}${hasDesktop ? " lg:grid-cols-[280px_1fr_240px]" : ""}`
+        : `grid-cols-1${hasTablet ? " md:grid-cols-2" : ""}${hasDesktop ? " lg:grid-cols-3" : ""}`;
+    const containerClass = container === "full"
+        ? "w-full"
+        : container === "sidebar"
+            ? "max-w-screen-xl mx-auto px-4"
+            : "max-w-screen-lg mx-auto px-4 sm:px-6 lg:px-8";
+    const isSidebar = container === "sidebar";
+    const code = `{/* ${description} */}
+<div class="${containerClass}">
+
+  {/* Mobile-first responsive ${isSidebar ? "sidebar layout" : "grid"} */}
+  <div class="grid ${colsClass} gap-6 py-8">
+
+    ${isSidebar ? `{/* Sidebar — hidden on mobile, visible md+ */}
+    <aside class="${hasMobile ? "hidden md:block " : ""}sticky top-4 h-fit">
+      <nav>
+        {/* Sidebar navigation */}
+      </nav>
+    </aside>
+
+    {/* Main content */}
+    <main class="min-w-0">
+      {/* Primary content */}
+    </main>
+
+    ${hasDesktop ? `{/* Right panel — visible lg+ */}
+    <aside class="hidden lg:block space-y-6">
+      {/* Right panel widgets */}
+    </aside>` : ""}` : `{/* Grid cells — adjust col-span as needed */}
+    <section class="col-span-1${hasDesktop ? " lg:col-span-2" : ""}">
+      {/* Main content */}
+    </section>
+
+    <aside class="${hasMobile ? "col-span-1" : ""}${hasTablet ? " md:col-span-1" : ""}">
+      {/* Secondary content */}
+    </aside>`}
+
+  </div>
+</div>`;
+    return code;
+}
+function buildCssGridLayout(description, breakpoints, container) {
+    const hasMobile = breakpoints.some((b) => /mobile|sm|xs/i.test(b));
+    const hasTablet = breakpoints.some((b) => /tablet|md/i.test(b));
+    const hasDesktop = breakpoints.some((b) => /desktop|lg|xl/i.test(b));
+    const isSidebar = container === "sidebar";
+    const html = `<!-- ${description} -->
+<div class="page-container">
+  <div class="layout-grid">
+    ${isSidebar ? `<aside class="sidebar">
+      <!-- Sidebar -->
+    </aside>
+    <main class="main-content">
+      <!-- Main content -->
+    </main>
+    <aside class="right-panel">
+      <!-- Right panel -->
+    </aside>` : `<section class="primary">
+      <!-- Primary content -->
+    </section>
+    <aside class="secondary">
+      <!-- Secondary content -->
+    </aside>`}
+  </div>
+</div>`;
+    const mobileGrid = isSidebar
+        ? `grid-template-columns: 1fr;\n  grid-template-areas:\n    "main"\n    "sidebar"\n    "right";`
+        : `grid-template-columns: 1fr;\n  grid-template-areas:\n    "primary"\n    "secondary";`;
+    const tabletGrid = isSidebar
+        ? `grid-template-columns: 260px 1fr;\n    grid-template-areas:\n      "sidebar main"\n      "sidebar right";`
+        : `grid-template-columns: 2fr 1fr;\n    grid-template-areas:\n      "primary secondary";`;
+    const desktopGrid = isSidebar
+        ? `grid-template-columns: 280px 1fr 240px;\n      grid-template-areas: "sidebar main right";`
+        : `grid-template-columns: repeat(3, 1fr);\n      grid-template-areas: "primary primary secondary";`;
+    const css = `.page-container {
+  width: 100%;
+  max-width: ${container === "full" ? "100%" : "1200px"};
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+.layout-grid {
+  display: grid;
+  gap: 1.5rem;
+  /* Mobile — single column */
+  ${mobileGrid}
+}
+
+${hasTablet ? `@media (min-width: 768px) {
+  .layout-grid {
+    ${tabletGrid}
+  }
+}` : ""}
+
+${hasDesktop ? `@media (min-width: 1024px) {
+  .layout-grid {
+    ${desktopGrid}
+  }
+}` : ""}
+
+${isSidebar ? `.sidebar   { grid-area: sidebar; }
+.main-content { grid-area: main; }
+.right-panel  { grid-area: right; }` : `.primary   { grid-area: primary; }
+.secondary { grid-area: secondary; }`}`;
+    return { html, css };
+}
+function buildFlexboxLayout(description, breakpoints, container) {
+    const hasTablet = breakpoints.some((b) => /tablet|md/i.test(b));
+    const hasDesktop = breakpoints.some((b) => /desktop|lg|xl/i.test(b));
+    const isSidebar = container === "sidebar";
+    const html = `<!-- ${description} -->
+<div class="page-container">
+  <div class="flex-layout">
+    ${isSidebar ? `<aside class="flex-sidebar">
+      <!-- Sidebar -->
+    </aside>
+    <main class="flex-main">
+      <!-- Main content -->
+    </main>` : `<section class="flex-primary">
+      <!-- Primary content -->
+    </section>
+    <aside class="flex-secondary">
+      <!-- Secondary content -->
+    </aside>`}
+  </div>
+</div>`;
+    const css = `.page-container {
+  max-width: ${container === "full" ? "100%" : "1200px"};
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+/* Mobile first: stacked */
+.flex-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+${hasTablet || hasDesktop ? `@media (min-width: ${hasTablet ? "768px" : "1024px"}) {
+  .flex-layout {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  ${isSidebar ? `.flex-sidebar {
+    flex: 0 0 260px;
+    position: sticky;
+    top: 1rem;
+  }
+
+  .flex-main {
+    flex: 1 1 0;
+    min-width: 0; /* prevent overflow */
+  }` : `.flex-primary {
+    flex: 2 1 0;
+    min-width: 0;
+  }
+
+  .flex-secondary {
+    flex: 1 1 0;
+    min-width: 0;
+  }`}
+}` : ""}`;
+    return { html, css };
+}
+// ---------------------------------------------------------------------------
+// Handler
+// ---------------------------------------------------------------------------
+// Example call:
+//   handleResponsiveLayout({ description: "sidebar left, main content area, right widgets panel", framework: "tailwind", breakpoints: ["mobile", "tablet", "desktop"], container: "sidebar" })
+export function handleResponsiveLayout(args) {
+    const { description, framework, breakpoints, container } = args;
+    const c = container ?? "centered";
+    const lines = [
+        `✅ Responsive layout: ${framework}`,
+        `📐 Breakpoints: ${breakpoints.join(", ")} | Container: ${c}`,
+        ``,
+    ];
+    if (framework === "tailwind") {
+        const code = buildTailwindLayout(description, breakpoints, c);
+        lines.push("```jsx", code, "```");
+    }
+    else if (framework === "css-grid") {
+        const { html, css } = buildCssGridLayout(description, breakpoints, c);
+        lines.push("```html", html, "```", "", "```css", css, "```");
+    }
+    else {
+        // flexbox
+        const { html, css } = buildFlexboxLayout(description, breakpoints, c);
+        lines.push("```html", html, "```", "", "```css", css, "```");
+    }
+    lines.push(``, `💡 Reasoning: Mobile-first ${framework} layout for "${description}". ` +
+        `Container is "${c}". Breakpoints detected: ${breakpoints.join(", ")}. ` +
+        (framework === "tailwind"
+            ? "Tailwind responsive prefixes (sm:/md:/lg:) handle breakpoints. "
+            : "CSS custom properties can replace hardcoded values. ") +
+        "Fill in actual content within each section. Add overflow: hidden to prevent content spillage.");
+    return lines.join("\n");
+}

package/build/tools/webdev/scaffold-page.d.ts

@@ -0,0 +1,18 @@
+import { z } from "zod";
+export declare const ScaffoldPageSchema: z.ZodObject<{
+    page_name: z.ZodString;
+    framework: z.ZodEnum<["nuxt", "next", "vue"]>;
+    sections: z.ZodArray<z.ZodString, "many">;
+    seo_title: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    framework: "vue" | "nuxt" | "next";
+    page_name: string;
+    sections: string[];
+    seo_title?: string | undefined;
+}, {
+    framework: "vue" | "nuxt" | "next";
+    page_name: string;
+    sections: string[];
+    seo_title?: string | undefined;
+}>;
+export declare function handleScaffoldPage(args: z.infer<typeof ScaffoldPageSchema>): string;

package/build/tools/webdev/scaffold-page.js

@@ -0,0 +1,137 @@
+import { z } from "zod";
+// ---------------------------------------------------------------------------
+// Schema
+// ---------------------------------------------------------------------------
+export const ScaffoldPageSchema = z.object({
+    page_name: z.string().describe("Page name (e.g. 'About', 'Dashboard', 'ProductDetail')"),
+    framework: z.enum(["nuxt", "next", "vue"]).describe("Target framework"),
+    sections: z
+        .array(z.string())
+        .min(1)
+        .max(10)
+        .describe("Page sections (e.g. ['hero', 'features', 'pricing', 'footer'])"),
+    seo_title: z.string().optional().describe("Optional SEO title for the page"),
+});
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function toPascalCase(str) {
+    return str
+        .replace(/[^a-zA-Z0-9\s]/g, "")
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+        .join("");
+}
+function buildNuxtPage(pageName, sections, seoTitle) {
+    const componentName = toPascalCase(pageName) + "Page";
+    const sectionComponents = sections.map((s) => {
+        const name = toPascalCase(s);
+        return `  <!-- ${name} section -->\n  <section id="${s.toLowerCase()}" class="py-16">\n    <h2 class="text-2xl font-bold">{{ /* ${name} heading */ }}</h2>\n    <!-- TODO: ${name} content -->\n  </section>`;
+    });
+    return `<script setup lang="ts">
+// ${componentName}
+
+useHead({
+  title: "${seoTitle}",
+  meta: [
+    { name: "description", content: "TODO: add page description" },
+  ],
+});
+
+// TODO: fetch page data
+// const { data } = await useFetch("/api/${pageName.toLowerCase()}")
+</script>
+
+<template>
+  <main>
+${sectionComponents.join("\n\n")}
+  </main>
+</template>`;
+}
+function buildNextPage(pageName, sections, seoTitle) {
+    const componentName = toPascalCase(pageName) + "Page";
+    const sectionComponents = sections.map((s) => {
+        const name = toPascalCase(s);
+        return `      {/* ${name} */}\n      <section id="${s.toLowerCase()}" className="py-16">\n        <h2 className="text-2xl font-bold">{/* ${name} heading */}</h2>\n        {/* TODO: ${name} content */}\n      </section>`;
+    });
+    return `import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "${seoTitle}",
+  description: "TODO: add page description",
+};
+
+export default function ${componentName}() {
+  return (
+    <main>
+${sectionComponents.join("\n\n")}
+    </main>
+  );
+}`;
+}
+function buildVuePage(pageName, sections, seoTitle) {
+    const componentName = toPascalCase(pageName) + "Page";
+    const sectionComponents = sections.map((s) => {
+        const name = toPascalCase(s);
+        return `  <!-- ${name} section -->\n  <section :id="'${s.toLowerCase()}'" class="py-16">\n    <h2 class="text-2xl font-bold"><!-- ${name} heading --></h2>\n    <!-- TODO: ${name} content -->\n  </section>`;
+    });
+    return `<script setup lang="ts">
+// ${componentName}
+
+// TODO: set page title via your router meta or vue-meta
+// useTitle("${seoTitle}")
+
+// TODO: fetch page data
+// const pageData = ref(null)
+</script>
+
+<template>
+  <main>
+${sectionComponents.join("\n\n")}
+  </main>
+</template>`;
+}
+// ---------------------------------------------------------------------------
+// Handler
+// ---------------------------------------------------------------------------
+// Example call:
+//   handleScaffoldPage({ page_name: "About", framework: "nuxt", sections: ["hero", "team", "contact"], seo_title: "About Us" })
+export function handleScaffoldPage(args) {
+    const { page_name, framework, sections, seo_title } = args;
+    const seoTitle = seo_title ?? page_name;
+    const safeName = toPascalCase(page_name) || "Page";
+    let code;
+    let filename;
+    let lang;
+    switch (framework) {
+        case "nuxt":
+            code = buildNuxtPage(page_name, sections, seoTitle);
+            filename = `pages/${page_name.toLowerCase()}.vue`;
+            lang = "vue";
+            break;
+        case "next":
+            code = buildNextPage(page_name, sections, seoTitle);
+            filename = `app/${page_name.toLowerCase()}/page.tsx`;
+            lang = "tsx";
+            break;
+        default: // vue
+            code = buildVuePage(page_name, sections, seoTitle);
+            filename = `views/${safeName}View.vue`;
+            lang = "vue";
+    }
+    const lines = [
+        `✅ Page scaffold: ${safeName}`,
+        `📄 Filename: ${filename}`,
+        `🔧 Framework: ${framework} | Sections: ${sections.join(", ")}`,
+        ``,
+        "```" + lang,
+        code,
+        "```",
+        ``,
+        `💡 Reasoning: Generated a ${framework} page with ${sections.length} section(s). ` +
+            `SEO title set to "${seoTitle}". ` +
+            `Each section has a placeholder — implement content and connect to your data layer.`,
+    ];
+    return lines.join("\n");
+}

package/build/tools/webdev/security-scan.d.ts

@@ -0,0 +1,23 @@
+import { z } from "zod";
+export declare const SecurityScanSchema: z.ZodObject<{
+    code: z.ZodString;
+    language: z.ZodEnum<["javascript", "typescript", "html", "vue"]>;
+    context: z.ZodEnum<["frontend", "backend", "api"]>;
+}, "strip", z.ZodTypeAny, {
+    code: string;
+    language: "javascript" | "typescript" | "vue" | "html";
+    context: "frontend" | "backend" | "api";
+}, {
+    code: string;
+    language: "javascript" | "typescript" | "vue" | "html";
+    context: "frontend" | "backend" | "api";
+}>;
+export type SecSeverity = "critical" | "high" | "medium" | "low";
+export interface SecurityIssue {
+    line: number;
+    severity: SecSeverity;
+    category: string;
+    message: string;
+    remediation: string;
+}
+export declare function handleSecurityScan(args: z.infer<typeof SecurityScanSchema>): string;