@nysds/mcp-server 1.21.1 → 1.22.0

package/data/guides/frameworks/vue.md

@@ -0,0 +1,356 @@
+<!--
+  GENERATED FILE. Do not edit directly.
+  Source: packages/vue/README.md
+  Regenerate with: npm run sync:guides -w @nysds/mcp-server
+-->
+# @nysds/vue
+
+Vue 3 components for the New York State Design System (NYSDS). Generated from the NYSDS web components library.
+
+You get two ways to use the design system, and can mix them freely:
+
+- **Wrapper components** (`<NysTextinput>`) — real Vue components with
+  typed props, `@nys-*` events, `<template #slot>` slots, and `v-model`
+  on form controls.
+- **Raw `<nys-*>` tags** — the custom elements themselves, typed in
+  templates and TSX.
+
+Requires Vue 3.4 or later (tested on 3.4 and 3.5).
+
+## Install
+
+### Setup a new React project
+
+```bash
+npm create vue@latest
+```
+
+### Install NYS Design System
+```bash
+npm install @nysds/vue @nysds/styles
+```
+
+## Load styles
+
+Import the design system stylesheet once, in your app's main.ts:
+
+```tsx
+import "@nysds/styles/full";
+```
+
+Vue's default TypeScript config rejects side-effect imports it can't
+resolve, and a stylesheet isn't a module. If `npm run build` fails with
+`TS2882: Cannot find module or type declarations for side-effect import of
+'@nysds/styles/full'`, declare the stylesheets once in `env.d.ts`:
+
+```ts
+// env.d.ts
+declare module "@nysds/styles/*";
+```
+
+Optional agency theme: `<html data-theme="health">`. Themes: `admin`,
+`business`, `environment`, `health`, `local`, `safety`, `transportation`.
+Fonts aren't bundled. Load them the way your agency normally does.
+
+### 4. Use a component
+
+```vue
+<script setup lang="ts">
+import { NysAlert, NysButton } from "@nysds/vue";
+
+const start = () => console.log("started");
+
+</script>
+
+<template>
+  <NysAlert type="info" heading="Welcome" />
+  <NysButton label="Start" @nys-click="start" />
+</template>
+```
+
+Importing a wrapper registers its custom element as a side effect — no
+`app.use()` call or global registration. Run `npm run dev`; you should see
+a styled alert and button.
+
+That's the whole setup. No compiler options are needed for wrapper
+components. If you'd rather write raw `<nys-*>` tags, see
+[Raw tags](#raw-tags).
+
+## Props, events, slots, and refs
+
+**Props** are typed from the underlying element class and set as DOM
+properties. Use camelCase or kebab-case in templates, whichever you
+prefer (`appName` and `app-name` are the same prop). Bind numbers and
+booleans with `:` so they keep their type:
+
+```vue
+<NysPagination :total-pages="5" :current-page="1" />
+<NysTextinput label="Name" required :disabled="locked" />
+```
+
+A prop you don't pass is left alone, so the element keeps its own
+default.
+
+**Events** keep their full NYSDS names. Listen with `@nys-change`,
+`@nys-input`, and so on. The handler parameter is the typed event, so
+`e.detail` autocompletes:
+
+```vue
+<NysTextinput
+  label="First name"
+  @nys-input="(e) => console.log(e.detail.value)"
+/>
+```
+
+Use the `nys-*` events rather than native `@input` and `@change`: they
+are NYSDS's public event contract, they carry typed details, and they cover
+cases native events don't (a combobox selection, a date picked from the
+calendar).
+
+**Slots** work with `<template #name>`. The default slot renders as direct
+children:
+
+```vue
+<NysTextinput label="Email">
+  <template #description>We'll never share it.</template>
+</NysTextinput>
+
+<NysTooltip text="Tooltip text">
+  <NysButton label="Hover me" />
+</NysTooltip>
+```
+
+Named slot content is wrapped in a `<span slot="…" style="display:
+contents">` so any content (text, components, fragments) can fill it. You
+can also put a plain `slot="name"` attribute on your own child element.
+
+**Refs** on a wrapper resolve to the Vue component instance. The element
+itself is `$el`, typed as the element class:
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { NysTextinput } from "@nysds/vue";
+
+const name = ref<InstanceType<typeof NysTextinput> | null>(null);
+const check = () => name.value?.$el.checkValidity();
+</script>
+
+<template>
+  <NysTextinput ref="name" label="Name" />
+</template>
+```
+
+## Forms
+
+### `v-model`
+
+Every form control supports `v-model`. It binds the property the
+component's form contract defines:
+
+| Component | `v-model` value |
+| --- | --- |
+| `NysTextinput`, `NysTextarea`, `NysSelect`, `NysCombobox`, `NysDatepicker`, `NysRadiogroup` | `string` |
+| `NysCheckboxgroup` | `string[]` |
+| `NysCheckbox`, `NysToggle` | `boolean` |
+
+```vue
+<script setup lang="ts">
+import { reactive } from "vue";
+import {
+  NysCheckbox,
+  NysCheckboxgroup,
+  NysRadiobutton,
+  NysRadiogroup,
+  NysTextinput,
+} from "@nysds/vue";
+
+const model = reactive({
+  firstName: "",
+  agree: false,
+  languages: [] as string[],
+  contact: "",
+});
+</script>
+
+<template>
+  <NysTextinput v-model="model.firstName" label="First name" required />
+  <NysCheckbox v-model="model.agree" label="I agree to the terms" />
+
+  <NysCheckboxgroup v-model="model.languages" label="Languages">
+    <NysCheckbox label="English" value="en" />
+    <NysCheckbox label="Spanish" value="es" />
+  </NysCheckboxgroup>
+
+  <NysRadiogroup v-model="model.contact" label="Preferred contact" name="contact">
+    <NysRadiobutton label="Email" name="contact" value="email" />
+    <NysRadiobutton label="Phone" name="contact" value="phone" />
+  </NysRadiogroup>
+</template>
+```
+
+- Bind checkbox and radio groups on `NysCheckboxgroup` and
+  `NysRadiogroup`, not on each child.
+- The model updates on the component's `nys-input` and `nys-change`
+  events. Add `.lazy` (`v-model.lazy`) to update on `nys-change` alone, as
+  on a native input.
+- **File input** has no `v-model`. Listen for the change event and read
+  the files from its detail:
+
+  ```vue
+  <NysFileinput
+    label="Resume"
+    @nys-change="(e) => (model.resume = e.detail.files[0]?.name ?? '')"
+  />
+  ```
+
+### Submit and validate with a native form
+
+NYSDS form components are form-associated custom elements: they submit
+with a plain `<form>` like native inputs, and `required`, `pattern`, and
+the rest drive the component's own validation and error display.
+
+```vue
+<form @submit.prevent="onSubmit">
+  <NysTextinput v-model="model.firstName" label="First name" required />
+  <NysButton type="submit" label="Submit" />
+</form>
+```
+
+`nys-button type="submit"` submits through `form.requestSubmit()`, so an
+invalid form blocks `@submit` and the component shows its error.
+
+To drive errors from your own validation library instead, set the
+component's error props:
+
+```vue
+<NysTextinput
+  v-model="model.firstName"
+  label="First name"
+  :show-error="!!errors.firstName"
+  :error-message="errors.firstName"
+/>
+```
+
+### Reset
+
+Setting the model back to its initial values resets every control. The
+file input has no bound value, so also call `reset()` on the form:
+
+```ts
+const form = ref<HTMLFormElement | null>(null);
+
+function reset() {
+  Object.assign(model, initialModel());
+  form.value?.reset();
+}
+```
+
+## Raw tags
+
+If you prefer the custom elements directly, import the package once for
+its side effects and types, then tell Vue's compiler that `nys-*` tags are
+custom elements so it doesn't try to resolve them as components:
+
+```ts
+// vite.config.ts
+import vue from "@vitejs/plugin-vue";
+
+export default {
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: { isCustomElement: (tag) => tag.startsWith("nys-") },
+      },
+    }),
+  ],
+};
+```
+
+```vue
+<script setup lang="ts">
+import { reactive } from "vue";
+import "@nysds/vue"; // registers every element and adds the tag types
+
+const model = reactive({ firstName: "" });
+</script>
+
+<template>
+  <nys-textinput
+    label="First name"
+    :value="model.firstName"
+    @nys-input="(e) => (model.firstName = e.detail.value)"
+  />
+</template>
+```
+
+Raw tags are typed in `.vue` templates (checked by `vue-tsc`) and in TSX.
+Bind properties with `:` and update your state from the `@nys-*`
+listener.
+
+**Raw tags have no working `v-model`.** Vue's built-in `v-model` listens for
+native `input` events instead of the `nys-*` events that make up NYSDS's
+contract, so it misses updates (a combobox selection, a calendar pick, a
+checkbox). Use a wrapper component, or bind `:value` and `@nys-input`
+yourself as above.
+
+## TypeScript
+
+- `NysTextinputProps` is the full prop type, including the `on*` event
+  handlers and, for form controls, `modelValue`.
+- `NysTextinputElement` is the element class type.
+- `NysTextinputSlots` and `NysTextinputSlotName` describe the slots.
+- Event detail types come from the component packages:
+  `import type { NysTextinputInputEvent } from "@nysds/nys-textinput"`.
+- Run `vue-tsc --noEmit` in your build to type-check templates. Unknown
+  props on a wrapper are compile errors; slot names are checked in `.vue`
+  files but not in TSX.
+
+## SSR and Nuxt
+
+The package is safe to import in Node, and a wrapper renders its bare
+element on the server. Components upgrade and become interactive in the
+browser; there is no declarative shadow DOM rendering in this release, and
+hydration has not been verified. For SSR frameworks such as Nuxt, render
+NYSDS components inside client-only boundaries (`<ClientOnly>`) until you
+have tested hydration in your app.
+
+## Troubleshooting
+
+**The element renders but has no styling or behavior.** The custom
+element didn't upgrade. Import the component from `@nysds/vue` (the import
+registers it) and check the browser console for load errors. If you use
+raw `<nys-*>` tags, add `import "@nysds/vue"` yourself.
+
+**Everything renders unstyled.** Import `@nysds/styles/full` once at your
+entry file.
+
+**`Failed to resolve component: nys-…`.** You used a raw tag without the
+`isCustomElement` compiler option. Add it (see [Raw tags](#raw-tags)) or
+use the wrapper component instead.
+
+**`v-model` on a raw `<nys-*>` tag doesn't update.** See
+[Raw tags](#raw-tags): use a wrapper, or bind `:value` and `@nys-input`.
+
+**A prop change doesn't reach the element.** Bind numbers and booleans
+with `:` (`:total-pages="5"`), not as plain attributes, so Vue passes the
+typed value.
+
+**Slot content has an extra wrapper.** Named slot content sits inside a
+`display: contents` span. To avoid it, put a `slot="name"` attribute on
+your own child element instead of using `<template #name>`.
+
+**`app.use(router)` or the `<nys-*>` types break with two Vue versions.**
+Two copies of Vue in `node_modules` give TypeScript two sets of types. Run
+`npm ls vue` and dedupe. In a monorepo where you pin a different Vue in one
+workspace, map `vue` in that app's `tsconfig.json`:
+
+```json
+{ "compilerOptions": { "baseUrl": ".", "paths": { "vue": ["./node_modules/vue"] } } }
+```
+
+## How this package is built
+
+`src/generated/` is written by the `@nysds/codegen` CEM plugin on every
+`npm run cem` and is not committed. The one hand-written file is
+`src/runtime.ts`, which builds each wrapper from the generated metadata.

package/data/tokens/tokens.css

@@ -1,5 +1,5 @@
 /*!
- * New York State Design System v1.21.1
+ * New York State Design System v1.22.0
  * Description: A design system for New York State's digital products.
  * Repository: https://github.com/its-hcd/nysds
  * License: MIT

package/dist/lib/cem-parser.d.ts

@@ -48,6 +48,17 @@ export interface CEMExample {
     code: string;
     lang?: string;
 }
+/**
+ * `@formControl <kind> <changeEvent> [inputEvent]` metadata, written by WS1
+ * on every form-control component's class JSDoc and parsed into the
+ * manifest by the CEM plugin. Drives the Angular `ControlValueAccessor`
+ * base class choice and the React/Angular snippet transformer's forms mode.
+ */
+export interface CEMFormControl {
+    kind: "value" | "checked" | "files";
+    changeEvent: string;
+    inputEvent?: string;
+}
 export interface CEMDeclaration {
     kind: "class";
     name: string;
@@ -65,6 +76,7 @@ export interface CEMDeclaration {
         package?: string;
     };
     examples?: CEMExample[];
+    formControl?: CEMFormControl;
 }
 export interface CEMModule {
     kind: "javascript-module";

package/dist/lib/cem-parser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cem-parser.d.ts","sourceRoot":"","sources":["../../src/lib/cem-parser.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"cem-parser.d.ts","sourceRoot":"","sources":["../../src/lib/cem-parser.ts"],"names":[],"mappings":"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"}

package/dist/lib/frameworks-data.d.ts

@@ -2,7 +2,7 @@
  * Framework package index
  *
  * Reads `data/frameworks.json`, written by `scripts/sync-guides.mjs` from
- * `packages/react/package.json` and `packages/angular/package.json`. Gives
+ * the `package.json` of each framework package (react, vue, angular). Gives
  * tools and resources the published package name and version without
  * hand-maintaining either.
  */
@@ -12,6 +12,7 @@ export interface FrameworkPackageInfo {
 }
 export interface FrameworksIndex {
     react: FrameworkPackageInfo;
+    vue: FrameworkPackageInfo;
     angular: FrameworkPackageInfo;
 }
 export declare function getFrameworksIndex(): FrameworksIndex;

package/dist/lib/frameworks-data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"frameworks-data.d.ts","sourceRoot":"","sources":["../../src/lib/frameworks-data.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAQH,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,oBAAoB,CAAC;IAC5B,OAAO,EAAE,oBAAoB,CAAC;CAC/B;AAiBD,wBAAgB,kBAAkB,IAAI,eAAe,CAcpD"}
+{"version":3,"file":"frameworks-data.d.ts","sourceRoot":"","sources":["../../src/lib/frameworks-data.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAQH,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,oBAAoB,CAAC;IAC5B,GAAG,EAAE,oBAAoB,CAAC;IAC1B,OAAO,EAAE,oBAAoB,CAAC;CAC/B;AAiBD,wBAAgB,kBAAkB,IAAI,eAAe,CAepD"}

package/dist/lib/frameworks-data.js

@@ -2,7 +2,7 @@
  * Framework package index
  *
  * Reads `data/frameworks.json`, written by `scripts/sync-guides.mjs` from
- * `packages/react/package.json` and `packages/angular/package.json`. Gives
+ * the `package.json` of each framework package (react, vue, angular). Gives
  * tools and resources the published package name and version without
  * hand-maintaining either.
  */
@@ -32,6 +32,7 @@ export function getFrameworksIndex() {
         console.error("Warning: Could not load data/frameworks.json:", error);
         cached = {
             react: { packageName: "@nysds/react", version: "unknown" },
+            vue: { packageName: "@nysds/vue", version: "unknown" },
             angular: { packageName: "@nysds/angular", version: "unknown" },
         };
     }

package/dist/resources/frameworks.d.ts

@@ -1,11 +1,13 @@
 /**
  * Framework Resources
  *
- * MCP resources for NYSDS framework packages (@nysds/react, @nysds/angular).
+ * MCP resources for NYSDS framework packages (@nysds/react, @nysds/vue,
+ * @nysds/angular).
  *
  * Resources:
  * - nysds://frameworks - Index of framework packages with version and guide URI
  * - nysds://frameworks/react - @nysds/react guide (synced from its README)
+ * - nysds://frameworks/vue - @nysds/vue guide (synced from its README)
  * - nysds://frameworks/angular - @nysds/angular guide (synced from its README)
  */
 import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";

package/dist/resources/frameworks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"frameworks.d.ts","sourceRoot":"","sources":["../../src/resources/frameworks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAKH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAezE,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CA8ElE"}
+{"version":3,"file":"frameworks.d.ts","sourceRoot":"","sources":["../../src/resources/frameworks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAezE,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CAwGlE"}

package/dist/resources/frameworks.js

@@ -1,11 +1,13 @@
 /**
  * Framework Resources
  *
- * MCP resources for NYSDS framework packages (@nysds/react, @nysds/angular).
+ * MCP resources for NYSDS framework packages (@nysds/react, @nysds/vue,
+ * @nysds/angular).
  *
  * Resources:
  * - nysds://frameworks - Index of framework packages with version and guide URI
  * - nysds://frameworks/react - @nysds/react guide (synced from its README)
+ * - nysds://frameworks/vue - @nysds/vue guide (synced from its README)
  * - nysds://frameworks/angular - @nysds/angular guide (synced from its README)
  */
 import { readFileSync } from "node:fs";
@@ -26,7 +28,7 @@ function loadFrameworkGuide(framework) {
 export function registerFrameworkResources(server) {
     // nysds://frameworks - Index of framework packages
     server.resource("frameworks", "nysds://frameworks", {
-        description: "Index of NYSDS framework packages (@nysds/react, @nysds/angular) with their published version and guide resource URI",
+        description: "Index of NYSDS framework packages (@nysds/react, @nysds/vue, @nysds/angular) with their published version and guide resource URI",
         mimeType: "application/json",
     }, async () => {
         const index = getFrameworksIndex();
@@ -37,6 +39,12 @@ export function registerFrameworkResources(server) {
                 version: index.react.version,
                 guideUri: "nysds://frameworks/react",
             },
+            {
+                id: "vue",
+                packageName: index.vue.packageName,
+                version: index.vue.version,
+                guideUri: "nysds://frameworks/vue",
+            },
             {
                 id: "angular",
                 packageName: index.angular.packageName,
@@ -67,6 +75,19 @@ export function registerFrameworkResources(server) {
             },
         ],
     }));
+    // nysds://frameworks/vue - @nysds/vue guide
+    server.resource("frameworks-vue", "nysds://frameworks/vue", {
+        description: "@nysds/vue install, usage, v-model forms, SSR, and troubleshooting guide",
+        mimeType: "text/markdown",
+    }, async () => ({
+        contents: [
+            {
+                uri: "nysds://frameworks/vue",
+                mimeType: "text/markdown",
+                text: loadFrameworkGuide("vue"),
+            },
+        ],
+    }));
     // nysds://frameworks/angular - @nysds/angular guide
     server.resource("frameworks-angular", "nysds://frameworks/angular", {
         description: "@nysds/angular install, usage, forms, SSR, and troubleshooting guide",

package/dist/resources/guides.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"guides.d.ts","sourceRoot":"","sources":["../../src/resources/guides.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEzE,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CAyE9D"}
+{"version":3,"file":"guides.d.ts","sourceRoot":"","sources":["../../src/resources/guides.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEzE,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CAoF9D"}

package/dist/resources/guides.js

@@ -56,7 +56,18 @@ Then use them in HTML:
 
 ## Framework Integration
 
-For framework-specific setup, use the \`get_guide\` tool with \`topic: "framework"\` and a \`framework\` parameter (angular, react, dotnet, drupal, or vanilla).
+For framework-specific setup, use the \`get_guide\` tool with a \`topic\` and a \`framework\` parameter (angular, react, vue, dotnet, drupal, or vanilla).
+
+React, Vue, and Angular are first-class packages, not wrapper snippets:
+\`@nysds/react\` (\`npm install @nysds/react\`), \`@nysds/vue\`
+(\`npm install @nysds/vue\`), and \`@nysds/angular\`
+(\`npm install @nysds/angular @nysds/components\`) generate typed
+components, props, and events directly from this design system's
+manifest. See the \`nysds://frameworks\` resource for their current
+published versions, \`nysds://frameworks/react\`, \`nysds://frameworks/vue\`, and
+\`nysds://frameworks/angular\` for their full guides, and pass
+\`framework: "react"\` or \`"angular"\` to \`get_component\` for
+per-component import lines and framework-specific code examples.
 
 ## Resources
 

package/dist/resources/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/resources/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAKzE,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CAIzD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/resources/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAMzE,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CAKzD"}

package/dist/resources/index.js

@@ -6,8 +6,10 @@
 import { registerComponentResources } from "./components.js";
 import { registerTokenResources } from "./tokens.js";
 import { registerGuideResources } from "./guides.js";
+import { registerFrameworkResources } from "./frameworks.js";
 export function registerResources(server) {
     registerComponentResources(server);
     registerTokenResources(server);
     registerGuideResources(server);
+    registerFrameworkResources(server);
 }

package/dist/tools/component-tools.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-tools.d.ts","sourceRoot":"","sources":["../../src/tools/component-tools.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAIzE,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CA+G9D"}
+{"version":3,"file":"component-tools.d.ts","sourceRoot":"","sources":["../../src/tools/component-tools.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAYzE,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CA2I9D"}

package/dist/tools/component-tools.js

@@ -10,6 +10,8 @@
 import { z } from "zod";
 import { getComponent, getAllComponents } from "../lib/cem-parser.js";
 import { searchComponents } from "../lib/search.js";
+import { buildExampleSnippets, } from "../lib/framework-snippets.js";
+import { buildAngularUsageNotes, buildReactUsageNotes, } from "../lib/framework-usage.js";
 export function registerComponentTools(server) {
     // find_components - Search or list all components
     server.tool("find_components", "Search for NYSDS components by name or description. Omit query to list all components.", {
@@ -51,15 +53,19 @@ export function registerComponentTools(server) {
         };
     });
     // get_component - Full documentation for a specific component
-    server.tool("get_component", "Get full documentation for a specific NYSDS component including properties, events, slots, and CSS custom properties", {
+    server.tool("get_component", "Get full documentation for a specific NYSDS component including properties, events, slots, and CSS custom properties. Set framework to 'react' or 'angular' to get that framework's import line, event-prop naming, and forms guidance alongside HTML/React/Angular code examples.", {
         tagName: z
             .string()
             .describe("The tag name of the component (e.g., 'nys-button')"),
         includeExamples: z
             .boolean()
             .default(false)
-            .describe("Include HTML code examples from component JSDoc. Set to true when you need usage patterns."),
-    }, async ({ tagName, includeExamples }) => {
+            .describe("Include code examples from component JSDoc. Set to true when you need usage patterns. Each example carries html, react, and angular snippets."),
+        framework: z
+            .enum(["html", "react", "angular"])
+            .default("html")
+            .describe("Which framework to optimize the response for. 'html' (default) returns plain custom-element usage. 'react' and 'angular' add framework-specific usage notes (import line, event-prop naming, forms binding) and, for a form-control component, transform that framework's example snippets into its idiomatic controlled/reactive-forms pattern."),
+    }, async ({ tagName, includeExamples, framework }) => {
         const component = getComponent(tagName);
         if (!component) {
             return {
@@ -76,16 +82,25 @@ export function registerComponentTools(server) {
         // Attributes contains the HTML API, members duplicates this plus private methods
         const { 
         // members: _members,
-        examples, ...componentWithoutMembers } = component;
+        examples, formControl, ...componentWithoutMembers } = component;
+        const usage = {};
+        if (framework === "react") {
+            usage.react = buildReactUsageNotes(tagName, component.name, formControl);
+        }
+        else if (framework === "angular") {
+            usage.angular = buildAngularUsageNotes(tagName, component.name, formControl);
+        }
         return {
             content: [
                 {
                     type: "text",
                     text: JSON.stringify({
                         ...componentWithoutMembers,
+                        formControl,
                         examples: includeExamples && examples && examples.length > 0
-                            ? examples
+                            ? buildExampleSnippets(examples, framework, formControl)
                             : undefined,
+                        usage: Object.keys(usage).length > 0 ? usage : undefined,
                         resourceUri: `nysds://component/${tagName}`,
                     }, null, 2),
                 },

package/dist/tools/guide-tools.js

@@ -56,7 +56,7 @@ export function registerGuideTools(server) {
         ])
             .describe("The guide topic to retrieve"),
         framework: z
-            .enum(["angular", "react", "dotnet", "drupal", "vanilla"])
+            .enum(["angular", "react", "vue", "dotnet", "drupal", "vanilla"])
             .optional()
             .describe("When provided, returns framework-specific setup guide instead of the topic guide. Use with topic 'installation' to get framework install instructions."),
     }, async ({ topic, framework }) => {