UNPKG

@progress/kendo-react-mcp

Version:

Model Context Protocol for KendoReact

550 lines (451 loc) 112 kB
#!/usr/bin/env node import{McpServer as Kt}from"@modelcontextprotocol/sdk/server/mcp.js";import{StdioServerTransport as jt}from"@modelcontextprotocol/sdk/server/stdio.js";import{dirname as Tt,join as xt}from"path";import{fileURLToPath as It}from"url";import{loadLicense as ht,decodeLicenseKey as gt,decodeLicenseEvidence as ft}from"@progress/kendo-licensing/utils";var W=class extends Error{constructor(t){super(t),this.name="LicenseError"}};function me(e){return e.replace(/^\uFEFF/,"")}async function z(e){let t=null,n=null;try{let o=ht();if(!o.success){let s=new W(o.message);throw e&&await e("license_load_failed",{error:o.message}).catch(()=>{}),s}try{t=(await gt(o.value)).licenses.find(async i=>!!(await ft(i)).userId)}catch(s){console.log(s.message),e&&await e("license_load_failed",{error:s.message||"Unknown decoding error"}).catch(()=>{})}if(!t)return[me(o.value),null]}catch(o){return n=o.message||"Unknown error loading license.",e&&await e("license_load_failed",{error:n}).catch(()=>{}),[null,n]}return[me(t),null]}import L from"node:fs";import V from"node:path";var Y=!1,U=process.env.DEBUG_LOG_FILE,he=!!(U&&typeof U=="string");if(he){let e=V.resolve(U),t=V.dirname(e);if(t!=="."&&t!==process.cwd()&&!L.existsSync(t))try{L.mkdirSync(t,{recursive:!0})}catch(n){console.error("Error creating log directory:",n)}if(!L.existsSync(e))try{L.writeFileSync(e,"")}catch(n){console.error("Error creating log file:",n)}}else Y=!1;Y=he&&!!U&&L.existsSync(V.resolve(U));function C(...e){if(Y&&U){let o=`${new Date().toISOString()}: ${e.join(" ")} `,s=V.resolve(U);L.appendFile(s,o,i=>{i&&console.error("Error writing to log file:",i)})}}import yt from"@grpc/proto-loader";import $ from"@grpc/grpc-js";import ye from"path";import ge from"fs";import{fileURLToPath as bt}from"url";var At=bt(import.meta.url),Ct=ye.dirname(At),be={version:"unknown"},fe=ye.resolve(Ct,"../package.json");ge.existsSync(fe)&&(be=JSON.parse(ge.readFileSync(fe,"utf-8")));function vt(e){return e.replace(/\u2014/g,"--").replace(/\u2013/g,"-").replace(/[^\x20-\x7E]/g,"")}var H=class{constructor(t,n,o){this.contextApiUrl=t;this.protoPath=n;this.options=o;this.toolNameHeader="assistant";let s=yt.loadSync(this.protoPath,{keepCase:!0,longs:String,enums:String,defaults:!0,oneofs:!0});this.isDev=this.contextApiUrl?.includes("localhost")||this.contextApiUrl?.includes("127.0.0.1"),C("Using ContextApi URl:",this.contextApiUrl);let i=$.loadPackageDefinition(s);this.client=new i.ContextQueryService(this.contextApiUrl||"contextapi.telerik.com:443",this.isDev?$.credentials.createInsecure():$.credentials.createSsl())}buildRequestMetadata(t={}){return vt(JSON.stringify({...t,source:"npm",version:be.version,os:process.platform,node_version:process.version}))}async getMetadata({meta:t}={meta:{}}){let[n,o]=this.isDev?["fake_license",null]:await z((d,p)=>this.logEvent(d,p)),s=process.env.CONTEXTAPI_API_KEY,i=s&&typeof s=="string",a=n&&typeof n=="string";if(!a&&!i&&o)throw new Error(`Failed to authenticate with API key or License key! License Error: ${o}`);let r=new $.Metadata;if(a)try{r.add("x-license-key",n)}catch(d){throw C("Error adding license key to metadata:",d),new Error(`Failed to use license key: ${d.message}`)}return i&&r.add("x-api-key",s),this.options?.libName&&r.add("x-library-name",this.options.libName),r.add("x-tool-name",this.toolNameHeader),r.add("x-request-metadata",this.buildRequestMetadata(t)),r}async query(t,n){let o=await this.getMetadata({meta:n});return new Promise((s,i)=>{this.client.query(t,o,(a,r)=>{a?i(new Error(a)):s(r)})})}async getApiRefMatches(t,n){let o=await this.getMetadata({meta:n});return new Promise((s,i)=>{this.client.getApiRefMatches(t,o,(a,r)=>{a?i(new Error(a)):s(r)})})}async queryCssUtils(t,n){let o=await this.getMetadata({meta:n});return new Promise((s,i)=>{this.client.cssUtilsSearch(t,o,(a,r)=>{a?(C("Error querying CSS Utils:",a),i(new Error(a))):s(r)})})}async queryIconsSearch(t,n){let o=await this.getMetadata({meta:n});return new Promise((s,i)=>{this.client.iconsSearch(t,o,(a,r)=>{a?(C("Error querying Icons Search:",a),i(new Error(a))):s(r)})})}async queryBuildingBlocks(t,n){let o=await this.getMetadata({meta:n});return new Promise((s,i)=>{this.client.buildingBlocksSearch(t,o,(a,r)=>{a?(C("Error querying Building Blocks:",a),i(new Error(a))):s(r)})})}async validateUserLicense(){let t=await this.getMetadata();return new Promise((n,o)=>{this.client.validateUserLicense({},t,(s,i)=>{s?(C("Error validating user license:",s),o(new Error(s))):n(i)})})}async queryThemeGenerate(t,n){let o=await this.getMetadata({meta:n});return new Promise((s,i)=>{this.client.generateTheme(t,o,(a,r)=>{a?(C("Error querying context API/GenerateTheme:",a),i(new Error(a))):s(r)})})}async recordOrchestratorUserRequest({meta:t}){let n=await this.getMetadata({meta:t});return new Promise((o,s)=>{this.client.recordOrchestratorUserRequest({},n,(i,a)=>{i?(C("Error recording orchestrator user request:",i),s(new Error(i))):o(a)})})}async recordToolUserRequest({toolName:t,meta:n}){let o=await this.getMetadata({meta:n});return new Promise((s,i)=>{this.client.recordToolUserRequest({tool_name:t},o,(a,r)=>{a?(C("Error recording tool user request:",a),i(new Error(a))):s(r)})})}async logEvent(t,n,o={}){let s="h8utJ6rk4PpIWX4JMn9beQDsjVUri6KV0XYfiVwq",{enrichWithUserData:i=!1,meta:a={}}=o,r=s&&typeof s=="string",d=null;if(i)try{let[g]=this.isDev?["fake_license",null]:await z();g&&typeof g=="string"&&(d=g)}catch{}if(!r&&!d){C("Neither LOGGING_API_KEY nor license key available, skipping log event");return}let p=new $.Metadata;return r&&p.add("x-api-key",s),d&&(p.add("x-license-key",d),p.add("x-request-metadata",this.buildRequestMetadata(a)),this.options?.libName&&p.add("x-library-name",this.options.libName)),new Promise((g,b)=>{this.client.logEvent({event_name:t,fields:n||{}},p,(l,m)=>{l?(C("Error logging event:",l),b(new Error(l))):g()})})}};import{z as Q}from"zod";var mo=Q.object({user_id:Q.string(),user_email:Q.string().email()});import{z as w}from"zod";var wt=w.object({Product:w.object({Id:w.number().int(),Code:w.string(),Name:w.string()}),License:w.nullable(w.object({Id:w.number().int(),Name:w.string(),Type:w.string(),Active:w.boolean()})),Availability:w.array(w.object({LicenseStart:w.nullable(w.string().datetime()),LicenseEnd:w.nullable(w.string().datetime())})),IsLicenseAvailable:w.optional(w.boolean())}),fo=w.array(wt);function T(e,t){let n=e.server?.server.getClientVersion?.(),o=t||{};return n&&(o.clientInfo={name:n.name,version:n.version}),o}async function Ae(e){let t=process.env.KENDO_MCP_ACCESS;if(t==="true"||t==="1"||t==="full")return"full";if(typeof t=="string"&&(t.toLowerCase()==="agent"||t.toLowerCase()==="assistant"))return t.toLowerCase();let n=await e();return n?.toLocaleLowerCase()==="agentic_ui_generator"?"agent":n?.toLocaleLowerCase()==="ai_coding_assistants"?"assistant":"none"}function Ce(){return'**Accessibility Guidelines: WCAG 2.2 Level AA Compliance**\n\n**Core Principles:**\n1. Use semantic HTML and ARIA correctly\n2. Ensure WCAG 2.2 AA compliance\n3. Follow W3C ARIA Authoring Practices\n4. Provide standards-based accessibility fixes\n\n**1. Form Control Labels** (WCAG 1.3.1, 3.3.2, 4.1.2)\nEvery input must have an associated label.\nCORRECT: `<input type="search" aria-label="Search products" placeholder="Search...">`\nCORRECT: `<label for="qty">Quantity</label><input type="number" id="qty">`\nWRONG: `<span>Email</span><input type="email">` (no association)\nWRONG: `<input type="email" placeholder="Email">` (placeholder as label)\n\n**2. Button Accessibility** (WCAG 4.1.2, 2.4.6, 2.5.3)\nAll buttons need accessible names describing their purpose.\nCORRECT: `<button type="button">Save Changes</button>`\nCORRECT: `<button aria-label="Close dialog"><svg aria-hidden="true" focusable="false">...</svg></button>`\nWRONG: `<button><svg>...</svg></button>` (no accessible name)\nWRONG: `<button>Click here</button>` (generic text)\n\n**3. Popup/Menu Triggers** (WCAG 4.1.2, 1.3.1)\nIndicate popup purpose and state using aria-haspopup, aria-expanded, aria-controls.\nCORRECT: `<button aria-expanded="false" aria-haspopup="menu" aria-controls="menu-id">Settings</button>`\n\n**4. Image Accessibility** (WCAG 1.1.1)\nInformative: `<img src="chart.png" alt="Sales increased 25% in Q4 2024">`\nFunctional: `<a href="/home"><img src="logo.png" alt="Company Name Home"></a>`\nDecorative: `<img src="border.png" alt="" role="presentation">`\nComplex: `<img src="chart.png" alt="Sales data" aria-describedby="desc-id">`\nWRONG: Missing alt, filename as alt, generic alt for decorative images\n\n**5. Link Accessibility** (WCAG 2.4.4, 2.4.6)\nLinks must be descriptive and understandable out of context.\nCORRECT: `<a href="/products">View All Products</a>`\nCORRECT: `<a href="/article" aria-label="Read more about New Product Launch">Read more</a>`\nWRONG: "Click here", "Read more", "Learn more" without context\n\n**6. Form Validation** (WCAG 3.3.1, 3.3.2, 3.3.3)\nErrors must be identified, associated with inputs, and provide suggestions. Use aria-describedby, aria-invalid="true", and role="alert".\n\n**7. Heading Structure** (WCAG 1.3.1, 2.4.6)\nEach page must have an `<h1>` that describes its content. Use hierarchical, descriptive headings with no skipped levels (h1\u2192h2\u2192h3).\nCORRECT: `<h1>Dashboard</h1> <h2>Sales</h2> <h3>By Region</h3>`\nWRONG: No `<h1>` on the page, or skipping levels (h1\u2192h3)\nIf a heading should look smaller than its semantic level, use CSS: `<h2 class="text-sm">Subtitle</h2>`\n\n**8. Page Component Landmark Rules** (WCAG 1.3.1, 4.1.2)\nPage components (route components) may be rendered inside a layout that already provides `<main>`, `<header>`, or `<footer>`. Since the layout configuration is unknown, avoid using these landmarks in page components to prevent potential duplication and nesting violations. Use `<div>`, `<section>`, or `<article>` as the top-level wrapper instead.\n- Avoid adding `<main>`, `role="main"`, `<header>`, or `<footer>` in page components \u2014 the layout typically provides them. Duplicating them can cause `landmark-no-duplicate-main` and `landmark-main-is-top-level` violations.\n- Avoid adding `role="banner"` or using a semantic `<header>` element in page components \u2014 the layout\'s `<header>` already claims the banner landmark. Adding another causes `landmark-banner-is-top-level` violations.\n- Avoid adding `role="contentinfo"` to elements inside page components \u2014 the contentinfo landmark should be a top-level landmark, not nested inside `<main>` or other landmarks. Nesting it can cause `landmark-contentinfo-is-top-level` violations.\n- When multiple `<section>` or `<nav>` elements exist on a page, give each a unique `aria-label` to avoid `landmark-unique` violations.\n\n**9. ARIA Role and Attribute Restrictions** (WCAG 4.1.2)\nOnly use ARIA roles that are valid for the given HTML element. Avoid adding `aria-label` or `aria-labelledby` to elements that do not permit naming.\n- `<article>` has an implicit `article` role. Do NOT override it with `role="listitem"`, `role="button"`, `role="link"`, or any other role \u2014 none are allowed on `<article>`. Use `<li>` for list items, `<button>` for interactive cards, or `<a>` for clickable cards instead.\n- `<button>` already has an implicit `button` role. Do NOT add `role="listitem"` or other incompatible roles.\n- `<span>` and `<div>` without roles are generic elements. Do NOT add `aria-label` to them \u2014 it is a prohibited attribute on elements with no accessible role and can cause `aria-prohibited-attr` violations. Instead, use `role="img"` + `aria-label` for visual indicators, or use visually hidden text.\n- Do NOT add `aria-label` to non-interactive `<div>` wrappers \u2014 it has no effect and triggers violations.\n- `aria-pressed` is only valid on elements with `role="button"`, `role="checkbox"`, `role="menuitemcheckbox"`, `role="option"`, `role="radio"`, or `role="switch"`. Do NOT use `aria-pressed` on elements with `role="listitem"` or other roles.\nCORRECT: `<ul role="list"><li class="product-card">...</li></ul>` (listitem inside list)\nCORRECT: `<span role="img" aria-label="Status: pending" class="status-dot"></span>` (role added before aria-label)\nCORRECT: `<span class="status-dot" aria-hidden="true"></span><span class="visually-hidden">Pending</span>` (hidden text alternative)\nWRONG: `<article role="listitem">` (listitem not allowed on article)\nWRONG: `<article role="button">` (button not allowed on article \u2014 use `<button>` or `<div role="button">`)\nWRONG: `<span aria-label="pending" class="status-dot"></span>` (aria-label prohibited on generic span)\nWRONG: `<div aria-label="Product badges" class="badges"></div>` (aria-label prohibited on generic div)\n\n**Quick Checklist:**\n- **Forms:** Associated labels, aria-required on required fields, autocomplete attributes, aria-describedby for errors, aria-invalid for invalid fields, fieldsets with legends\n- **Buttons/Links:** Accessible names, aria-label for icon buttons, aria-hidden on decorative icons, descriptive link text\n- **Popups/Dialogs:** aria-haspopup, aria-expanded, aria-controls, role="dialog", aria-modal="true", aria-labelledby, focus trap, Escape to close\n- **Images:** alt on all images, descriptive alt for informative, empty alt for decorative, aria-describedby for complex\n- **Structure:** One h1, logical heading hierarchy, avoid `<main>`, `<header>`, `<footer>`, `role="main"`, `role="contentinfo"`, `role="banner"` in page/route components (the layout may already provide them), use `<section>` or `<div>` as page-level wrappers, unique aria-labels on duplicate landmark types\n- **ARIA Rules:** Avoid adding `aria-label` to generic `<span>`/`<div>` without a role, avoid using `role="listitem"` or `role="button"` on `<article>` \u2014 use `<li>` for list items, add `role="img"` before `aria-label` on visual indicators, `aria-pressed` only on button-like roles\n- **Scrollable Regions:** Any scrollable container must have `tabindex="0"` or contain keyboard-interactive children\n- **Nested Interactive:** Do not add interactive role/tabindex to a container that already has focusable children\n- **List Roles:** `role="list"` containers must have `role="listitem"` children \u2014 prefer `<ul>/<li>` natively\n- **Dynamic Content:** role="status"/aria-live="polite" for updates, role="alert"/aria-live="assertive" for critical alerts\n- **Keyboard/Focus:** All interactive elements keyboard accessible, logical focus order, visible focus indicators, no keyboard traps (except modals)\n- **Color/Contrast:** 4.5:1 text contrast (3:1 large text), 3:1 UI component contrast, no color-only information, 3:1 focus indicator contrast'}var St=1440*60*1e3;function ve(e){let{serverName:t,contextApi:n,additionalFields:o={},intervalMs:s=St,enrichWithUserData:i=!1}=e,a="mcp_server_heartbeat",r=async()=>{try{let p={server_name:t,timestamp:new Date().toISOString(),...o};await n.logEvent(a,p,{enrichWithUserData:i})}catch(p){C(`Failed to send heartbeat for ${t}:`,p)}};r();let d=setInterval(r,s);return()=>{clearInterval(d),C(`Heartbeat stopped for ${t}`)}}import{z as X}from"zod";var kt=["meridian","default","bootstrap","material","fluent"];function we(e,t){return{projectName:X.string().default(t).describe("The name of the project. Used as the project folder name when creating a new project."),createNewProject:X.boolean().default(!0).describe(`Whether to create a new project before configuring ${e}. Set to true to scaffold a brand-new project, or false if the project already exists and you only want to add ${e} to it.`),theme:X.enum(kt).default("meridian").describe("The Kendo UI theme to use. Determines which theme package is installed and imported. Available themes: meridian (default), default, bootstrap, material, fluent.")}}var u="Kendo UI for React",N="react",D="kendo";var _=["ActionSheet","AIPrompt","Animation","AppBar","ArcGauge","AutoComplete","Avatar","Badge","Barcode","BottomNavigation","Breadcrumb","Button","ButtonGroup","BreadCrumb","Calendar","Card","Chart","ChartWizard","Chat","Checkbox","Chip","ChipList","ChunkProgressBar","CircularGauge","ColorGradient","ColorPalette","ColorPicker","ComboBox","ContextMenu","ConversationalUI","DataGrid","Grid","DataQuery","DateMath","DateInput","DatePicker","DateRangePicker","DateTimePicker","Dialog","Drag&Drop","Drawer","Drawing","DropDownButton","DropDownList","DropDownTree","Editor","Error","ExcelExport","ExpansionPanel","ExternalDropZone","FileSaver","FileManager","Filter","FlatColorPicker","FloatingActionButton","FloatingLabel","Form","Gantt","Gauge","General","GridLayout","Hint","Icon","InlineAIPrompt","Input","Label","LinearGauge","ListBox","ListView","Loader","Map","MaskedTextBox","Menu","MultiColumnComboBox","MultiSelect","MultiSelectTree","MultiViewCalendar","Notification","NumericTextBox","OrgChart","PageTemplates/BuildingBlocks","Pager","PanelBar","PDFProcessing","PDFViewer","PivotGrid","Popover","Popup","ProgressBar","PromptBox","QRCode","RadialGauge","RadioButton","RadioGroup","RangeSlider","Rating","Ripple","Sankey","Scheduler","ScrollView","Signature","Skeleton","Slider","Sortable","Sparkline","SpeechToTextButton","SmartPasteButton","SplitButton","Splitter","Spreadsheet","StackLayout","Stepper","StockChart","SVGIcon","Switch","TabStrip","TaskBoard","TextArea","TextBox","TileLayout","Timeline","TimePicker","Toolbar","Tooltip","TreeList","TreeView","Typography","Upload","VSCodeExtension","Window"];var Nt=xt(Tt(It(import.meta.url)),"../proto/service.proto"),F=new H("contextapi.telerik.com:443",Nt,{libName:N});var Se=async()=>F.validateUserLicense();import Vt from"fs";import ut from"path";import{fileURLToPath as Ht}from"url";import{z as v}from"zod";var k=class{constructor(t,n,o){this.name=t;this.config=n;this.cb=o}register(t){this.server=t,this.server.registerTool(this.name,this.config,this.cb)}hasAccess(t){return!this.config.requiredAccess||this.config.requiredAccess.length===0?!0:t==="full"||this.config.requiredAccess.includes(t)}};var q=(e,t)=>`# ${e.suiteName} - Code Validation & Quality Assurance ## Comprehensive Code Validation Checklist Execute these validation steps systematically to ensure high-quality, maintainable code: ### Validation Phase: Framework-Specific Validation ${t} ### Validation Phase: General Code Quality & Best Practices File Organization: - Files are properly named using appropriate conventions - Components are logically grouped in appropriate directories - File sizes are reasonable - Clear separation of concerns between files Performance Best Practices: - Optimized rendering patterns - Minimal unnecessary re-renders/change detection cycles - Efficient data handling and caching - Proper component lifecycle management ### Validation Phase: Security & Accessibility Validation Security Measures: - Input validation and sanitization - XSS protection measures - CSRF protection where applicable - Secure data handling practices ### Validation Phase: UI/UX & Design System Compliance Responsive Design: - Proper breakpoint handling - Flexible layouts that adapt to different screen sizes - Touch-friendly interface elements ### Validation Phase: Error Handling & Edge Cases Error Handling: - Graceful error handling for all user interactions - Meaningful error messages for users - Network error handling for API calls `;var J=()=>`## UX/UI Design Best Practices > **These are default guidelines \u2014 follow them when the user has not stated otherwise.** If the user explicitly requests different behavior (e.g., a specific component size, a custom row limit, alternate breakpoints, a different layout pattern), defer to the user's stated preference and disregard the conflicting default below. Only accessibility and WCAG requirements (contrast ratios, focus indicators, semantic HTML, ARIA) apply regardless of user preference. Follow these principles when building or reviewing any UI. They apply regardless of the visual style requested. ### Visual Hierarchy & Typography - Use a strict 3-level heading hierarchy: page title (h1) \u2192 section heading (h2) \u2192 component label (h3). Never skip levels. - Body text line length: 60\u201380 characters maximum. Wider lines reduce readability. - Numeric and currency columns must use \`font-variant-numeric: tabular-nums\` to keep digits column-aligned. - Never use more than 2 typefaces in a single interface. ### Color & Contrast - Body text contrast ratio: \u2265 4.5:1 against its background. - Large text (\u2265 18pt / 14pt bold) and UI component boundaries: \u2265 3:1. - Use only the 5 semantic color slots \u2014 primary, success, warning, error, info \u2014 for meaning. Do not invent new semantic colors. - Never use color alone to convey status or meaning (8% of men have color vision deficiency). Always pair color with an icon or text label. - Never use red and green as the sole distinguishing colors. ### Component Sizing & Density - Never mix size variants within the same form or toolbar. Pick one: \`"small"\`, \`"medium"\`, or \`"large"\` and apply it consistently. - \`"small"\` (24px) = data-dense tools. \`"medium"\` (32px) = default. \`"large"\` (40px) = comfortable/consumer-facing. ### Motion & Animation - Always support \`prefers-reduced-motion: reduce\` \u2014 set transition durations to \u2264 0.01ms in that media query. - Micro-interactions (button press, tooltip): 150\u2013250ms. Panel transitions (drawer, sidebar): 300\u2013400ms. - Never animate layout properties that cause reflow (width, height, margin, padding). Animate transform and opacity instead. ### Interaction Patterns - Never set \`outline: none\` globally. Keyboard focus indicators are required (WCAG 2.4.7). - Loading states: prefer Skeleton loader for content areas, overlay + ProgressBar for blocking operations, disabled button + inline spinner for async submission. - Error recovery: inline validation near the field for form errors; notification/toast for API/system errors. - Every icon-only button must have a visible tooltip and an \`aria-label\`. - Never show tooltips on disabled elements \u2014 disabled elements cannot receive focus. ### Responsive Design - Breakpoints (defaults \u2014 use the project's breakpoint system if one is already established): Mobile < 640px | Tablet 640\u20131024px | Desktop 1024\u20131440px | Wide > 1440px. - Constrain max content width to 1440px with \`margin: 0 auto\` on wide viewports, unless a different maximum is already defined by the project. - On mobile (< 480px), data grids must switch to stacked/card layout \u2014 tabular layout is unusable at that width. - Schedulers/complex data views are not viable on mobile; provide a simplified alternative or a clear message. ### UX Writing - Input labels describe *what* the field is. Placeholder text hints at *format or example* \u2014 never use placeholder as a substitute for a label. - Button labels must be specific action verbs: "Save Changes", "Delete Record", "Export CSV" \u2014 not "Submit", "OK", or "Yes". - Error messages must be specific and actionable: "Email address is already registered" not "Error 409". - Table/grid column headers: Title Case. Never ALL CAPS. - Empty states must explain why it's empty and offer a next action (e.g., "No records found. Add your first item."). ### Data Presentation - Numeric and currency values must be right-aligned in table/grid columns. - Never display raw ISO 8601 date strings (e.g., \`2024-01-15T09:30:00Z\`) \u2014 always format for the locale (e.g., "15 Jan 2024"). - Never render more than 200 rows in a fully-loaded table. Use pagination or virtual scrolling for larger datasets. - Never leave grid columns without explicit widths \u2014 causes layout jank on load and sort operations. ### Chart Type Selection - **Line / Area**: continuous quantitative data over time (trends, rates). - **Bar (vertical)**: discrete time periods or ordered categories. - **Horizontal Bar**: comparing named categories (rankings, survey results). - **Donut (not Pie)**: part-to-whole proportions with \u2264 6 segments. Avoid Pie charts \u2014 the center hole of a Donut makes area estimation easier. - **Avoid**: 3D charts, dual-axis charts (misleading), charts with > 7 series in the same view. - Chart legend placement: below the chart. ### Dialog vs Window Decisions - **Dialog (modal)**: use when the user must respond before continuing. Title should be action-oriented: "Delete this record?" not "Confirmation". - **Window (non-modal)**: use when content can exist alongside the background (resizable/draggable panels, editors). - Destructive dialog actions (delete, overwrite) must use the error theme color. - Every dialog must be closable via Escape key and have a clearly labeled close control. ### Form Validation Display Rules - Show field-level validation errors **after the first blur** (not on initial render, not on every keystroke). - Display error text inline, directly below the field \u2014 never in a toast or far from the field. - On form-level submit failure, focus the first invalid field automatically. - Required fields: mark with an asterisk (*) and include a legend. Do not mark optional fields \u2014 label them "(optional)" only if most fields are required. ### Grid Data Volume & Scrolling Strategy - Never render more than 200 rows without pagination or virtual scrolling. - Use **pagination** when users need to navigate by page number, see total row count, or perform export/select-all operations. - Use **virtual scrolling** when the dataset is very large (thousands of rows) and users scroll continuously rather than jumping to pages. - Default page size: 25 rows. Offer page size options (10, 25, 50) as defaults unless the project specifies otherwise. ### Grid Feature Selection Enable only the Grid features genuinely required for the workflow. Each enabled feature adds UI chrome, event listeners, and DOM nodes. Start with the minimum set and add only when user stories require it: - \`sortable\` \u2014 when users need to find specific rows in non-obvious order - \`filterable\` \u2014 for datasets > 50 rows with varied values; skip for small fixed lists - \`groupable\` \u2014 only when hierarchical analysis is a core workflow - \`reorderable\` / \`resizable\` \u2014 when user customization of the view is a stated requirement - \`selectable\` \u2014 only when batch actions exist - \`editable\` \u2014 only when inline data entry is the primary workflow, not for read-only display ### Form Layout Defaults These are defaults \u2014 respect the project's existing form conventions if established: - Prefer single-column form layout \u2014 easier to read and complete than multi-column. - Use two-column layout only for tightly related field pairs (First Name / Last Name, Start Date / End Date). - Align labels above their fields for complex forms; inline labels work only for very short forms (2\u20133 fields). - Place the primary action (Save / Submit) at the bottom left; Cancel or secondary actions to its right. ### Whitespace Defaults When no design token system is defined by the project, apply these minimum spacing values: - Section separators: \u2265 24px vertical gap between distinct content areas. - Card internal padding: 16\u201324px. - Form field vertical gap: \u2265 16px between fields (24px for multi-column groups). - Page left/right margin: 24\u201332px minimum, even at desktop widths.`;var B=(e,t)=>{let n=q({suiteName:e.suiteName,libKey:e.libKey},t.validationSteps),o=e.libKey==="angular"?"- **Drag and Drop**: Consider using the DragandDrop and Sortable components when drag-and-drop functionality is needed.":"",s=e.components?e.components.join(", "):"components";return`# \u{1F3AF} ${e.suiteName} - Execution Plan **Current Goal:** ${e.userIntent} **Requirements Summary:** - **Framework:** ${e.libKey} ${e.includeComponentsDocs?`- **Component Library:** ${e.suiteName} - Ensure to use ONLY ${e.suiteName} components for all UI elements. - And use the ${e.codeAssistantName} tool to get ${e.suiteName} component documentation and code snippets. - Ensure that after you read the plan you use exactly the ${e.codeAssistantName} no matter if there is another tool that can provide code snippets, documentation or other resources related to ${e.suiteName}. `:""}${e.includeLayout?`- **Layout:** Yes - And use the ${e.layoutAssistantName} tool to get Kendo CSS utility classes needed for layout structure and responsive design. `:""}${e.includeIcons?`- **Icons:** Yes - Use icons that align with the project theme and enhance usability. - Use the ${e.iconAssistantName} tool to search for icons that fit the theme and purpose of your project. `:""}${e.includeTheming?`- **Custom Theming:** - Create a custom theme that aligns with the current goal and branding needs. - Use Kendo Themes and Design System guidelines. - Make sure to include strict CSS variables or theme requirements from the current goal. - And use the ${e.styleAssistantName} tool to create a custom theme for your project. `:""}${e.includeResponsive?`- **Responsive:** - Ensure the layout is fully responsive across mobile, tablet, and desktop views. - And use the ${e.layoutAssistantName} tool to get Kendo CSS utility classes needed for responsive design. `:""} - **Accessible (WCAG 2.2 Level AA):** - CRITICAL: You must call the ${e.accessibilityAssistantName} tool with includeGeneralGuidelines=true on your first call to get WCAG 2.2 Level AA guidelines. - For subsequent calls, use includeGeneralGuidelines=false to get only component-specific accessibility information. - Ensure all components meet WCAG 2.2 Level AA standards. ${e.includeLayout?`**STYLING AND LAYOUT REQUIREMENTS:** ## CRITICAL DESIGN SYSTEM CONSTRAINTS - **USE ONLY KENDO DESIGN SYSTEM UTILITIES** for ALL styling, layout, spacing, positioning, and responsive behavior - Avoid custom CSS, inline styles, or other CSS framework classes - The ${e.layoutAssistantName} tool will provide the specific Kendo CSS utility classes needed - All layout requirements must use Kendo utilities exclusively `:""}--- ${J()} --- ## Detailed Execution Plan Follow these steps strictly in order to achieve a complete and polished implementation of the current goal: ### Phase: Accessibility Foundation **Step 1: Retrieve WCAG 2.2 Level AA Guidelines** **MANDATORY REQUIREMENT:** - Before implementing any UI components or features, you must call the accessibility assistant with general guidelines - On your first call to "${e.accessibilityAssistantName}", set "includeGeneralGuidelines=true" to get foundational WCAG 2.2 Level AA best practices - These general guidelines apply to all components and must be considered throughout implementation - For all subsequent calls, set "includeGeneralGuidelines=false" to get only component-specific information **First tool call (includes general WCAG guidelines):** \`\`\` ${e.accessibilityAssistantName}({ query="What are the accessibility requirements for [COMPONENT_NAME]?", component="[COMPONENT_NAME]", includeGeneralGuidelines=true // ONLY true on first call }) \`\`\` **Step 2: Get Component-Specific Accessibility Information** For each additional ${e.suiteName} component you plan to use, call the tool with "includeGeneralGuidelines=false": **Tool call example:** \`\`\` ${e.accessibilityAssistantName}({ query="What are the accessibility features and requirements for [COMPONENT_NAME]? Include ARIA attributes, keyboard navigation, and screen reader support.", component="[COMPONENT_NAME]", includeGeneralGuidelines=false // false for all calls after the first }) \`\`\` **Example:** \`\`\` ${e.accessibilityAssistantName}({ query="How to associate the label with another component or HTML input?", component="Label", includeGeneralGuidelines=false }) \`\`\` ${e.includeLayout?` ### Phase: Layout Foundation **Step 1: Create Base Layout Structure** **IMPORTANT LAYOUT REQUIREMENTS:** - Consider the hierarchy and nesting of layout elements (page \u2192 sections \u2192 components) - Each layout level should have appropriate wrapper containers with proper Kendo utilities - Sections should be wrapped in containers that provide the necessary layout structure **Tool call example:** \`\`\` ${e.layoutAssistantName}({ prompt="Provide Kendo Design System utility classes for the following layout structure: [LAYOUT DESCRIPTION HERE]", includeBuildingBlockExamples=true // Optional, include examples of Kendo building blocks (Grid, Flex, Stack, etc.) }) \`\`\` `:""} ${e.includeComponentsDocs?` ### Phase: Component Integration **Step 1: Identify and Implement Core Components** Based on your current goal, analyze what other ${e.suiteName} components are needed and implement them one by one. Here you are some appropriate components based on the different project type: **Component Selection Guidelines:** - **Landing Pages**: Consider Button, Card, Form components, Layout containers, Navigation elements - **Dashboards**: Consider Grid, Chart, TileLayout, Drawer, Notification, ToolBar components - **Data Entry**: Consider Form, TextBox, DatePicker, DropDownList, Upload, Validation components - **Content Management**: Consider Grid, Editor, TreeView, FileManager, Dialog components - **E-commerce**: Consider ListView, Card, Button, Rating, Badge, Carousel components ${o} **IMPORTANT COMPONENT USAGE REQUIREMENTS:** - Make sure to identify all necessary features related to the ${s} based on the current goal. - Make sure to identify specific features needed for other ${e.suiteName} components based on the current goal. - Make sure to generate a query for ${e.codeAssistantName} tool for each component and call the tool for each specific feature or functionality. - Always specify the exact features you want for each component. Describe only the needed functionality, and behavior you need. Be concise and don't include any information about the use case. **Tool call examples:** \`\`\` ${e.codeAssistantName}({ query="Give me information about [COMPONENT_NAME] with [SPECIFIC_FEATURES]." <!-- For example: 'Grid with paging' or 'Button with click events' or 'Chart with multiple series' --> component="[COMPONENT_NAME]" <!-- For example: 'Grid', 'Button', 'Chart', etc. --> }) \`\`\` For broad queries, break them down into specific features (e.g., paging, sorting, filtering for Grid) and call the tool separately for each feature: \`\`\` ${e.codeAssistantName}({ query="How to implement [SPECIFIC_FEATURE] in [COMPONENT_NAME]?" <!-- For example: 'paging in Grid' --> component="[COMPONENT_NAME]" <!-- For example: 'Grid', 'Button', etc. --> }) \`\`\` \`\`\` ${e.codeAssistantName}({ query="How to implement [SPECIFIC_FEATURE] in [COMPONENT_NAME]?" <!-- For example: 'sorting in Grid' --> component="[COMPONENT_NAME]" <!-- For example: 'Grid', 'Button', etc. --> }) \`\`\` \`\`\` ${e.codeAssistantName}({ query="How to implement [SPECIFIC_FEATURE] in [COMPONENT_NAME]?" <!-- For example: 'filtering in Grid' --> component="[COMPONENT_NAME]" <!-- For example: 'Grid', 'Button', etc. --> }) \`\`\` `:""} ${e.includeResponsive?` ### Phase: Layout Responsive Finalization **Step 1: Implement Responsive Behavior** **Tool call example:** \`\`\` ${e.layoutAssistantName}({ prompt="Provide Kendo Design System utility classes to make the following layout structure responsive across mobile, tablet, and desktop views: [LAYOUT DESCRIPTION HERE]", includeBuildingBlockExamples=false // Optional, include examples of Kendo building blocks (Grid, Flex, Stack, etc.) }) \`\`\` `:""} ${e.includeTheming?` **Step 2: Custom Theme Implementation** **CUSTOM THEME REQUIREMENTS:** - Create a custom theme that aligns with the current goal and branding needs. - Use Kendo Themes and Design System guidelines. - Make sure to include strict CSS variables or theme requirements from the current goal. **Tool call example:** \`\`\` ${e.styleAssistantName}({ query="Create a custom Kendo UI theme that aligns with the following current goal and branding needs: [CURRENT GOAL HERE]. Include strict CSS variables or theme requirements as needed.", includeThemeVariables=true // Optional, include specific CSS variables for colors, typography, spacing, etc. }) \`\`\` `:""} ${e.includeIcons?` **Step 3: Iconography and Visual Enhancements** **ICONOGRAPHY GUIDELINES:** - Select icons that align with the project theme and enhance usability. - Ensure icons are consistent in style and size. - Use icons to improve navigation and highlight key actions. **Tool call example:** \`\`\` ${e.iconAssistantName}({ query="Suggest icons that fit the theme and purpose of the following current goal: [CURRENT GOAL HERE]. Provide icon names and usage context.", }) \`\`\` `:""} ### Phase: Code Generation **IMPORTANT:** Do NOT generate ANY code or create files until ALL information gathering phases (1-3) are complete. **Step 1: Generate Complete Implementation** After completing all information gathering phases above, generate the complete ${e.libKey} component/page implementation: **Code Generation Requirements:** - Create complete, functional ${e.libKey} components/pages - Include all identified ${e.suiteName} components with their configurations - Apply ALL Kendo Design System utility classes gathered from layout assistant - Implement proper component event handling and data binding - Ensure responsive behavior using Kendo utility classes - Include necessary import statements and dependencies ${t.injectedPlan??""} ### Phase: Validation and Finalization **Step 1: Code Validation** ** CRITICAL REQUIREMENT: You MUST validate the generated UI code using this comprehensive checklist to ensure code quality and compliance:** ${n} **Step 2: Final Review and Testing** ** Implementation Validation:** ${e.includeComponentsDocs?` - Components render correctly without errors - Running \`npm run build\` compiles the application successfully without any build errors or crashes. - All ${e.suiteName} component features function as expected - Event handling and data binding operate correctly`:""} ${e.includeResponsive?"- Responsive layout works across breakpoints":""} **Quick Fixes (if needed):** After code implementation and validation you can make quick fixes as needed: - If any build errors are found, fix them and re-run the application. Do NOT present the implementation as complete until the build succeeds without errors. - Use ${e.codeAssistantName} for component-specific issues - Use ${e.layoutAssistantName} for styling adjustments +### Before You Begin - When following/executing the plan call tools are defined from the same function_ecosystem/MCP_server which ${e.name} was called. - Do NOT generate or suggest any code until all tools have been used and validated responses are incorporated. - Focus on planning and sequencing. - Summarize the components, layouts, and utilities gathered. - Confirm all required inputs from tools have been provided.`};var Z=e=>`# ${e.suiteName} Assistant **What you're looking for:** ${e.userIntent} **Available Tools:** - **${e.codeAssistantName}** - Get component documentation, features, and usage examples - **${e.iconAssistantName}** - Search for icons from the Kendo icon library --- ## Discovery Plan Follow these steps to find the right components and resources: ### Step 1: Identify Components Based on your needs, consider these ${e.suiteName} component categories: **Common Use Cases:** - **Data Display**: Grid, ListView, TreeView, Card, TileLayout - **Forms & Input**: Form, TextBox, DatePicker, DropDownList, ComboBox, MultiSelect, Upload - **Navigation**: Menu, Drawer, Breadcrumb, TabStrip, Stepper - **Data Visualization**: Chart, Gauge, Sparkline - **Editing**: Editor (Rich Text) - **Notifications**: Dialog, Notification, Tooltip - **Layout**: Splitter, PanelBar, ExpansionPanel **How to explore components:** Use the ${e.codeAssistantName} tool to learn about specific components: \`\`\` ${e.codeAssistantName}({ query: "What are the main features of [COMPONENT_NAME]?", component: "[COMPONENT_NAME]" }) \`\`\` **Examples:** \`\`\` ${e.codeAssistantName}({ query: "How to use Grid with paging and sorting?", component: "Grid" }) \`\`\` \`\`\` ${e.codeAssistantName}({ query: "What features does DatePicker have?", component: "DatePicker" }) \`\`\` **Pro Tips:** - Ask about specific features (e.g., "Grid with filtering" instead of just "Grid") - Break complex queries into multiple calls focusing on one feature at a time - Specify the exact component name in the component parameter ${e.includeIcons?` ### Step 2: Find Icons Use the ${e.iconAssistantName} tool to search for icons: \`\`\` ${e.iconAssistantName}({ query: "Search for icons related to [YOUR THEME/PURPOSE]" }) \`\`\` **Examples:** \`\`\` ${e.iconAssistantName}({ query: "icons for navigation menu" }) \`\`\` \`\`\` ${e.iconAssistantName}({ query: "icons for user actions like edit, delete, save" }) \`\`\` `:""} ### Step 3: Review and Implement After gathering information: 1. Review the component documentation provided by ${e.codeAssistantName} 2. Check which icons are available from ${e.iconAssistantName} 3. Use the official ${e.suiteName} documentation for detailed implementation guides 4. Refer to the component examples and code snippets provided ### Step 4: Build and Validation After implementing the code: - Run \`npm run build\` to verify the implementation compiles successfully without any build errors. - If any build errors are found, fix them and re-run the build. - Use ${e.codeAssistantName} for component-specific issues. - Do NOT present the implementation as complete until the build succeeds without errors. --- ## Getting Started **Next Actions:** 1. Start by calling ${e.codeAssistantName} for the components you need 2. ${e.includeIcons?`Search for icons using ${e.iconAssistantName}`:"Review the component documentation"} 3. Follow the ${e.suiteName} official documentation for implementation details 4. Run \`npm run build\` to verify the implementation compiles successfully **Important Notes:** - These tools provide documentation and guidance, not code generation - Always refer to official ${e.suiteName} documentation for the most up-to-date information - Tool responses include usage examples and best practices`;var O=(e,t)=>({SETUP_VALIDATION:` UI Library Setup: - ${e} modules properly imported and configured - ${e} theme properly loaded and applied - ${e} license properly configured - Globalization and localization properly configured for ${e} components - Required ${e} dependencies installed and up-to-date`,PERFORMANCE_OPTIMIZATION:` Performance Optimization: - Efficient rendering patterns to prevent unnecessary re-renders - Lazy loading of ${e} components when appropriate - Virtualization enabled for large datasets in ${e} components - Only required ${e} modules imported and tree-shaken`,THEME_AND_STYLING:` ${e} Theme & Styling: - Prioritize the ${t} Design System utilities - Avoid custom CSS or other framework classes - Do not use inline styles - Consistent ${e} theme application across all components - Custom theme variables properly defined and scoped - ${e} icons properly loaded and optimized - Brand colors integrated with ${e} component themes`});var ee=()=>` **REQUIRED ACTIONS \u2014 apply all fixes directly to the source files:** - Search all .ts files for every outdated API mentioned in the codemod output \u2014 this includes renamed or removed properties, method names, and enum values. - Search all .ts, .css, and .scss files for every outdated CSS class mentioned in the codemod output and update it with an appropriate replacement. - Fix any logic errors or unintended side effects introduced by the codemods - Update any edge cases, custom implementations, or complex code patterns that were broken or left incomplete by the automated migration - Replace hardcoded values, dynamic expressions, or conditional logic that the codemod could not handle automatically - Correct any TypeScript type errors or mismatches introduced by the upgrade - Adjust any patterns that do not align with the project's existing coding standards **OUTPUT REQUIREMENTS:** - For each file you change, briefly describe what was wrong and what fix you applied - If a problem requires a decision from the developer that you cannot make automatically, call it out explicitly with the file path - If all automated changes look correct and no further fixes are needed, explicitly confirm this`;import{execFile as Et}from"child_process";import{access as Rt}from"fs/promises";import{promisify as Pt}from"util";var ke=Pt(Et);function Dt(e,t){let n;try{n=JSON.parse(e)}catch{return e}let o=n?.Item;if(!o)return e;let s=[],i=o.FullName??o.Name??"",a=o.Type??"",r=o.Summary??"",d=o.SyntaxContent??"";s.push(`## API Reference Item - Name: ${i} - Type: ${a} - Summary: ${r} - Syntax: ${d}`);let p=n.RelatedItemsByType?.return_type;if(p?.length){let m=p[0].Text;m&&s.push(`- Return Type: ${m}`)}let g=o.Examples??[];if(g.length>0){let m=`## Examples `,h=0;for(let y of g){let c=(y.Component??"").toLowerCase(),f=t.toLowerCase();if(c&&c!==f&&c!=="general")continue;h+=1;let S=y.Code??"";m+=`### Example ${h} \`\`\` ${S} \`\`\` `}h>0&&s.push(m)}let b=n.RelatedItemsByType??{},l=[];for(let[m,h]of Object.entries(b))if(!(m==="return_type"||m==="render_fragment"))for(let y of h??[]){let c=y.FullName??"",f=y.ShortText??"";l.push(`### ${c} (${m}) ${f}`)}return l.length>0&&s.push(`## Additional Context `+l.join(` --- `)),s.join(` `)}function xe(e,t,n){let{name:o,title:s,description:i,layoutAssistantName:a,codeAssistantName:r,styleAssistantName:d,iconAssistantName:p,accessibilityAssistantName:g,suiteName:b,libKey:l,components:m}=e,h=new k(o,{title:s,description:i,requiredAccess:e.requiredAccess,inputSchema:{userIntent:v.string().describe(`Detailed description and intent of what the user wants to build. Include the type of page/component, main functionality, visual requirements, and any specific ${b} components you want to use.`),needsComponentsDocsConfidence:v.number().min(0).max(1).default(1).describe("Confidence (0-1) to include Component Documentation assistance. Default is 1."),needsLayoutConfidence:v.number().min(0).max(1).default(0).describe("Confidence (0-1) to include Layout assistance. Default is 0."),needsStylingConfidence:v.number().min(0).max(1).default(0).describe("Confidence (0-1) to include Theming/Styling assistance. Default is 0."),needsResponsiveBehaviorConfidence:v.number().min(0).max(1).default(0).describe("Confidence (0-1) to include Responsive Behavior assistance. Default is 0."),needsIconsConfidence:v.number().min(0).max(1).default(0).describe("Confidence (0-1) to include Icons assistance. Default is 0."),componentsNeeded:v.array(v.enum(m)).optional().describe(`Optional list of specific ${b} components needed for the project.`)}},async({userIntent:y,needsComponentsDocsConfidence:c,needsLayoutConfidence:f,needsStylingConfidence:S,needsResponsiveBehaviorConfidence:x,needsIconsConfidence:E,componentsNeeded:I},{_meta:de})=>{let R=T(h,de);C("UI Orchestrator called with:",{userIntent:y,needsComponentsDocsConfidence:c,needsLayoutConfidence:f,needsStylingConfidence:S,needsResponsiveBehaviorConfidence:x,needsIconsConfidence:E});try{await n.recordOrchestratorUserRequest({meta:{userIntent:y,componentsNeeded:I,...R}})}catch(j){throw G(j)}let P=h.server?.server.getClientCapabilities?.()?.elicitation,K;if(P&&S>.3&&S<=.6){let j=await h.server?.server.elicitInput({message:"I was unable to determine if you need custom Kendo Theme assistant. Can you please confirm?",requestedSchema:{type:"object",properties:{includeCustomTheming:{type:"boolean",description:"Whether to include Custom Theming assistance in the workflow."}},required:["includeCustomTheming"]}});j?.action==="accept"&&j.content?.includeCustomTheming&&(K=!0)}return{content:[{type:"text",text:B({name:o,userIntent:y,includeComponentsDocs:c>.3,includeTheming:S>.6||!!K,includeLayout:f>.5,includeIcons:E>.6,includeResponsive:f>.5&&x>.4,layoutAssistantName:a,codeAssistantName:r,styleAssistantName:d,iconAssistantName:p,accessibilityAssistantName:g,suiteName:b,libKey:l,components:I},t)}]}});return h}function Ie(e,t){let{name:n,title:o,description:s,iconAssistantName:i,codeAssistantName:a,suiteName:r,libKey:d,components:p}=e,g=new k(n,{title:o,description:s,inputSchema:{userIntent:v.string().describe(`Describe what you want to build or what components you're looking for. Include the type of functionality, features, or UI elements you need from ${r}.`),needsIconsConfidence:v.number().min(0).max(1).default(.7).describe("Confidence (0-1) to include Icons assistance. Default is 0.7."),componentsNeeded:v.array(v.enum(p)).optional().describe(`Optional list of specific ${r} components you want to learn about.`)},requiredAccess:e.requiredAccess},async({userIntent:b,needsIconsConfidence:l,componentsNeeded:m},{_meta:h})=>{let y=T(g,h);C("Assistant Orchestrator called with:",{userIntent:b,needsIconsConfidence:l,componentsNeeded:m});try{await t.recordOrchestratorUserRequest({meta:{userIntent:b,componentsNeeded:m,...y}})}catch(f){throw G(f)}return{content:[{type:"text",text:Z({name:n,userIntent:b,includeComponentsDocs:!0,includeIcons:l>.5,codeAssistantName:a,iconAssistantName:i,suiteName:r,libKey:d,components:m})}]}});return g}function Ne(e,t){let{name:n,title:o,description:s,suiteName:i,libKey:a,getPreContent:r}=e,d=new k(n,{title:o,description:s,requiredAccess:e.requiredAccess,inputSchema:{prompt:v.string().describe("An enhanced prompt describing the HTML layout structure, design requirements or specific visual effects you want to achieve."),includeBuildingBlockExamples:v.boolean().describe("Whether to include buildi