@nysds/mcp-server 1.21.0 → 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.0
+ * 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":"AAAA;;;;GAIG;AASH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,cAAc,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,cAAc,CAAC;CAC9B;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,cAAc,EAAE,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE;YAAE,IAAI,EAAE,MAAM,CAAA;SAAE,CAAC;KAC/B,CAAC,CAAC;CACJ;AAED,MAAM,WAAW,sBAAsB;IACrC,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,SAAS,EAAE,CAAC;CACtB;AAsCD;;GAEG;AACH,wBAAgB,MAAM,IAAI,sBAAsB,CAe/C;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,cAAc,EAAE,CAoBnD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS,CAOxE;AAED;;GAEG;AACH,wBAAgB,UAAU,IAAI,IAAI,CAIjC"}

package/dist/lib/framework-snippets.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Framework snippet generation
+ *
+ * Turns a component's canonical HTML examples into React and Angular
+ * snippets using `@nysds/codegen`'s `transformExample` — the same
+ * transformer the docs site and Storybook autodocs use, so an AI assistant
+ * asking the MCP server sees exactly the same code a developer sees on
+ * designsystem.ny.gov.
+ */
+import { type CEMExample, type CEMFormControl } from "./cem-parser.js";
+export type FrameworkFilter = "html" | "react" | "angular";
+export interface FrameworkSnippet {
+    code: string;
+    imports: string[];
+    warnings: string[];
+    unsupported: boolean;
+}
+export interface ExampleWithSnippets {
+    title: string;
+    html: string;
+    react: FrameworkSnippet;
+    angular: FrameworkSnippet;
+}
+/**
+ * Builds React and Angular snippets for every HTML example on a component.
+ *
+ * When `framework` names one target explicitly, that framework's snippet
+ * uses its most idiomatic forms binding for a form-control component —
+ * React's controlled pattern (`value` + `onNys*`), Angular's
+ * `formControlName` (Reactive Forms). The unrequested framework, and every
+ * snippet when `framework` is `"html"` (the default), stays a plain
+ * attribute-for-attribute conversion so the default response isn't
+ * surprising.
+ */
+export declare function buildExampleSnippets(examples: CEMExample[] | undefined, framework: FrameworkFilter, formControl: CEMFormControl | undefined): ExampleWithSnippets[];
+//# sourceMappingURL=framework-snippets.d.ts.map

package/dist/lib/framework-snippets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"framework-snippets.d.ts","sourceRoot":"","sources":["../../src/lib/framework-snippets.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAOH,OAAO,EAAU,KAAK,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAE/E,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAE3D,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,gBAAgB,CAAC;IACxB,OAAO,EAAE,gBAAgB,CAAC;CAC3B;AAgBD;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,UAAU,EAAE,GAAG,SAAS,EAClC,SAAS,EAAE,eAAe,EAC1B,WAAW,EAAE,cAAc,GAAG,SAAS,GACtC,mBAAmB,EAAE,CA+BvB"}

package/dist/lib/framework-snippets.js

@@ -0,0 +1,55 @@
+/**
+ * Framework snippet generation
+ *
+ * Turns a component's canonical HTML examples into React and Angular
+ * snippets using `@nysds/codegen`'s `transformExample` — the same
+ * transformer the docs site and Storybook autodocs use, so an AI assistant
+ * asking the MCP server sees exactly the same code a developer sees on
+ * designsystem.ny.gov.
+ */
+import { transformExample, } from "@nysds/codegen";
+import { getCEM } from "./cem-parser.js";
+function toSnippet(result) {
+    return {
+        code: result.code,
+        imports: result.imports,
+        warnings: result.warnings,
+        unsupported: result.unsupported,
+    };
+}
+/**
+ * Builds React and Angular snippets for every HTML example on a component.
+ *
+ * When `framework` names one target explicitly, that framework's snippet
+ * uses its most idiomatic forms binding for a form-control component —
+ * React's controlled pattern (`value` + `onNys*`), Angular's
+ * `formControlName` (Reactive Forms). The unrequested framework, and every
+ * snippet when `framework` is `"html"` (the default), stays a plain
+ * attribute-for-attribute conversion so the default response isn't
+ * surprising.
+ */
+export function buildExampleSnippets(examples, framework, formControl) {
+    if (!examples || examples.length === 0)
+        return [];
+    const manifest = getCEM();
+    const reactFormsMode = framework === "react" && formControl ? "template" : "none";
+    const angularFormsMode = framework === "angular" && formControl ? "reactive" : "none";
+    return examples
+        .filter((example) => !example.lang || example.lang === "html")
+        .map((example) => ({
+        title: example.title,
+        html: example.code,
+        react: toSnippet(transformExample({
+            html: example.code,
+            framework: "react",
+            manifest,
+            formsMode: reactFormsMode,
+        })),
+        angular: toSnippet(transformExample({
+            html: example.code,
+            framework: "angular",
+            manifest,
+            formsMode: angularFormsMode,
+        })),
+    }));
+}

package/dist/lib/framework-usage.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Framework usage notes
+ *
+ * Short, framework-specific guidance attached to `get_component` responses
+ * when the caller asks for `framework: "react"` or `"angular"` — the import
+ * line, the event-prop naming rule, and (when the component is a form
+ * control) how it binds into that framework's forms. Naming follows the
+ * rules in `.claude/plans/framework-support/README.md` section 4.1, reused
+ * here via `@nysds/codegen` rather than re-derived.
+ */
+import type { CEMFormControl } from "./cem-parser.js";
+export interface FrameworkUsageNotes {
+    package: string;
+    import: string;
+    events: string;
+    forms?: string;
+}
+export declare function buildReactUsageNotes(tagName: string, className: string, formControl: CEMFormControl | undefined): FrameworkUsageNotes;
+export declare function buildAngularUsageNotes(tagName: string, className: string, formControl: CEMFormControl | undefined): FrameworkUsageNotes;
+//# sourceMappingURL=framework-usage.d.ts.map

package/dist/lib/framework-usage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"framework-usage.d.ts","sourceRoot":"","sources":["../../src/lib/framework-usage.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAOH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAQD,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,cAAc,GAAG,SAAS,GACtC,mBAAmB,CAqBrB;AAED,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,cAAc,GAAG,SAAS,GACtC,mBAAmB,CAmBrB"}

package/dist/lib/framework-usage.js

@@ -0,0 +1,50 @@
+/**
+ * Framework usage notes
+ *
+ * Short, framework-specific guidance attached to `get_component` responses
+ * when the caller asks for `framework: "react"` or `"angular"` — the import
+ * line, the event-prop naming rule, and (when the component is a form
+ * control) how it binds into that framework's forms. Naming follows the
+ * rules in `.claude/plans/framework-support/README.md` section 4.1, reused
+ * here via `@nysds/codegen` rather than re-derived.
+ */
+import { eventToAngularOutput, eventToReactProp, tagToSubpath, } from "@nysds/codegen";
+const FORM_CONTROL_LABEL = {
+    value: "value",
+    checked: "checked state",
+    files: "selected files",
+};
+export function buildReactUsageNotes(tagName, className, formControl) {
+    const subpath = tagToSubpath(tagName);
+    const changeProp = formControl
+        ? eventToReactProp(formControl.changeEvent)
+        : undefined;
+    const inputProp = formControl?.inputEvent !== undefined
+        ? eventToReactProp(formControl.inputEvent)
+        : undefined;
+    return {
+        package: "@nysds/react",
+        import: `import { ${className} } from "@nysds/react/${subpath}";`,
+        events: "Events map to onNys* props (nys-change -> onNysChange). The handler receives the typed CustomEvent, so e.detail autocompletes.",
+        forms: formControl
+            ? `Form control (${formControl.kind}). For a controlled component, bind ${formControl.kind} and update state from ${changeProp}${inputProp ? ` (or ${inputProp} for every keystroke)` : ""}; re-rendering with the same ${FORM_CONTROL_LABEL[formControl.kind]} snaps the element back to your state. See get_guide({ topic: "installation", framework: "react" }) for React Hook Form and uncontrolled-form patterns.`
+            : undefined,
+    };
+}
+export function buildAngularUsageNotes(tagName, className, formControl) {
+    const subpath = tagToSubpath(tagName);
+    const angularClass = `${className}Component`;
+    const changeOutput = formControl
+        ? eventToAngularOutput(formControl.changeEvent)
+        : undefined;
+    return {
+        package: "@nysds/angular",
+        import: `import { ${angularClass} } from "@nysds/angular/${subpath}";`,
+        events: `Events map to camelCase outputs (nys-change -> (nysChange)); event.detail is typed.${changeOutput
+            ? ` This component's change output is (${changeOutput}).`
+            : ""}`,
+        forms: formControl
+            ? 'Implements ControlValueAccessor: works with [(ngModel)], formControlName (Reactive Forms), and Signal Forms [formField] with no CUSTOM_ELEMENTS_SCHEMA. Add the nysControlErrors directive to let Angular own validation display instead of the component\'s own errorMessage/showError. See get_guide({ topic: "installation", framework: "angular" }).'
+            : undefined,
+    };
+}

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

@@ -0,0 +1,19 @@
+/**
+ * Framework package index
+ *
+ * Reads `data/frameworks.json`, written by `scripts/sync-guides.mjs` from
+ * the `package.json` of each framework package (react, vue, angular). Gives
+ * tools and resources the published package name and version without
+ * hand-maintaining either.
+ */
+export interface FrameworkPackageInfo {
+    packageName: string;
+    version: string;
+}
+export interface FrameworksIndex {
+    react: FrameworkPackageInfo;
+    vue: FrameworkPackageInfo;
+    angular: FrameworkPackageInfo;
+}
+export declare function getFrameworksIndex(): FrameworksIndex;
+//# sourceMappingURL=frameworks-data.d.ts.map

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

@@ -0,0 +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,GAAG,EAAE,oBAAoB,CAAC;IAC1B,OAAO,EAAE,oBAAoB,CAAC;CAC/B;AAiBD,wBAAgB,kBAAkB,IAAI,eAAe,CAepD"}

package/dist/lib/frameworks-data.js

@@ -0,0 +1,40 @@
+/**
+ * Framework package index
+ *
+ * Reads `data/frameworks.json`, written by `scripts/sync-guides.mjs` from
+ * the `package.json` of each framework package (react, vue, angular). Gives
+ * tools and resources the published package name and version without
+ * hand-maintaining either.
+ */
+import { readFileSync, existsSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+let cached = null;
+function getFrameworksDataPath() {
+    const candidates = [
+        resolve(__dirname, "../../data/frameworks.json"),
+        resolve(process.cwd(), "data/frameworks.json"),
+    ];
+    for (const path of candidates) {
+        if (existsSync(path))
+            return path;
+    }
+    throw new Error(`data/frameworks.json not found. Searched paths:\n${candidates.join("\n")}`);
+}
+export function getFrameworksIndex() {
+    if (cached)
+        return cached;
+    try {
+        cached = JSON.parse(readFileSync(getFrameworksDataPath(), "utf-8"));
+    }
+    catch (error) {
+        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" },
+        };
+    }
+    return cached;
+}

package/dist/resources/frameworks.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Framework Resources
+ *
+ * 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";
+export declare function registerFrameworkResources(server: McpServer): void;
+//# sourceMappingURL=frameworks.d.ts.map

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

@@ -0,0 +1 @@
+{"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"}