@cobwds/mcp-server 1.19.3 → 1.23.1

package/data/tokens/tokens.json

@@ -46,78 +46,75 @@
         "$value": "#ffffff"
       },
       "red": {
+        "$description": "Replacing the full color scale, mainly to update hue and saturation to meet our branding color (Freedom Trail Red) but still preserving the contrast between each step as much as possible.",
         "10": {
-          "$value": "#fbf4f4"
+          "$value": "#fff3f2"
         },
         "50": {
-          "$value": "#f7eaea"
+          "$value": "#fee8e6"
         },
         "100": {
-          "$value": "#f0d5d5"
+          "$value": "#fed1ce"
         },
         "200": {
-          "$value": "#e4b3b3"
+          "$value": "#fda9a4"
         },
         "300": {
-          "$value": "#d89191"
+          "$value": "#fc7e76"
         },
         "400": {
-          "$value": "#cc6f6f"
+          "$value": "{primitive.color.freedom-trail-red}"
         },
         "500": {
-          "$value": "#c04d4d"
+          "$value": "#e51205"
         },
         "600": {
-          "$value": "#b52c2c"
+          "$value": "#c20f04"
         },
         "700": {
-          "$value": "#932424"
+          "$value": "#9e0d03"
         },
         "800": {
-          "$value": "#721c1c"
+          "$value": "#7c0a03"
         },
         "900": {
-          "$value": "#511414"
+          "$value": "#590702"
         }
       },
       "blue": {
-        "$description": "City of Boston blue scale. Evenly interpolated from blue.10 to Optimistic Blue (700); 800 is midpoint to Charles Blue (900).",
+        "$description": "Replacing the full color scale, mainly to update hue and saturation to meet our branding colors (Optimistic Blue and Charles Blue) but still preserving the contrast between each step as much as possible.",
         "10": {
-          "$value": "#e8f4fc",
-          "$description": "Lightest blue tint. Kept as brand light blue anchor."
+          "$value": "#f0f7fd"
         },
         "50": {
-          "$value": "#cee4f4"
+          "$value": "#e3f0fb"
         },
         "100": {
-          "$value": "#b4d3ec"
+          "$value": "#c7e1f8"
         },
         "200": {
-          "$value": "#9ac3e4"
+          "$value": "#93c5f1"
         },
         "300": {
-          "$value": "#80b2dc"
+          "$value": "#5fa9ea"
         },
         "400": {
-          "$value": "#66a2d5"
+          "$value": "#268be3"
         },
         "500": {
-          "$value": "#4c92cd"
+          "$value": "{primitive.color.optimistic-blue}"
         },
         "600": {
-          "$value": "#3281c5"
+          "$value": "#145b99"
         },
         "700": {
-          "$value": "{primitive.color.optimistic-blue}",
-          "$description": "Primary brand blue step. Resolves to Optimistic Blue."
+          "$value": "#0f4575"
         },
         "800": {
-          "$value": "#104876",
-          "$description": "Midpoint between Optimistic Blue (700) and Charles Blue (900). USE for theme.strong."
+          "$value": "#0b3051"
         },
         "900": {
-          "$value": "{primitive.color.charles-blue}",
-          "$description": "Darkest brand blue step. Resolves to Charles Blue."
+          "$value": "{primitive.color.charles-blue}"
         }
       },
       "green": {
@@ -190,42 +187,6 @@
           "$value": "#463a00"
         }
       },
-      "state-blue": {
-        "10": {
-          "$value": "#f7fafd"
-        },
-        "50": {
-          "$value": "#eff6fb"
-        },
-        "100": {
-          "$value": "#cddde9"
-        },
-        "200": {
-          "$value": "#abc4d8"
-        },
-        "300": {
-          "$value": "#89abc7"
-        },
-        "400": {
-          "$value": "#6792b6"
-        },
-        "500": {
-          "$value": "#457aa5"
-        },
-        "600": {
-          "$value": "#2d618c"
-        },
-        "700": {
-          "$value": "#154973"
-        },
-        "800": {
-          "$value": "#0e324f"
-        },
-        "900": {
-          "$value": "#081b2b"
-        },
-        "$description": "Default theme palette"
-      },
       "business-teal": {
         "10": {
           "$value": "#f2f6f6"
@@ -261,7 +222,7 @@
           "$value": "#02272c"
         }
       },
-      "health-purple": {
+      "purple": {
         "10": {
           "$value": "#f4f4f8"
         },
@@ -564,7 +525,7 @@
             "admin": "{primitive.color.admin-orange.10}",
             "business": "{primitive.color.business-teal.10}",
             "environment": "{primitive.color.environment-green.10}",
-            "health": "{primitive.color.health-purple.10}",
+            "health": "{primitive.color.purple.10}",
             "local": "{primitive.color.local-brown.10}",
             "safety": "{primitive.color.safety-gray.10}",
             "transportation": "{primitive.color.transportation-blue.10}"
@@ -579,7 +540,7 @@
             "admin": "{primitive.color.admin-orange.50}",
             "business": "{primitive.color.business-teal.50}",
             "environment": "{primitive.color.environment-green.50}",
-            "health": "{primitive.color.health-purple.50}",
+            "health": "{primitive.color.purple.50}",
             "local": "{primitive.color.local-brown.50}",
             "safety": "{primitive.color.safety-gray.50}",
             "transportation": "{primitive.color.transportation-blue.50}"
@@ -594,7 +555,7 @@
             "admin": "{primitive.color.admin-orange.100}",
             "business": "{primitive.color.business-teal.100}",
             "environment": "{primitive.color.environment-green.100}",
-            "health": "{primitive.color.health-purple.100}",
+            "health": "{primitive.color.purple.100}",
             "local": "{primitive.color.local-brown.100}",
             "safety": "{primitive.color.safety-gray.100}",
             "transportation": "{primitive.color.transportation-blue.100}"
@@ -603,13 +564,13 @@
         "$description": "Light theme tint. USE for borders and light accent backgrounds."
       },
       "mid": {
-        "$value": "{primitive.color.blue.500}",
+        "$value": "{primitive.color.blue.200}",
         "$extensions": {
           "mode": {
             "admin": "{primitive.color.admin-orange.500}",
             "business": "{primitive.color.business-teal.500}",
             "environment": "{primitive.color.environment-green.500}",
-            "health": "{primitive.color.health-purple.500}",
+            "health": "{primitive.color.purple.500}",
             "local": "{primitive.color.local-brown.500}",
             "safety": "{primitive.color.safety-gray.500}",
             "transportation": "{primitive.color.transportation-blue.500}"
@@ -618,13 +579,13 @@
         "$description": "Mid-range theme color. USE for secondary buttons and active states."
       },
       "default": {
-        "$value": "{primitive.color.optimistic-blue}",
+        "$value": "{primitive.color.blue.500}",
         "$extensions": {
           "mode": {
             "admin": "{primitive.color.admin-orange.700}",
             "business": "{primitive.color.business-teal.700}",
             "environment": "{primitive.color.environment-green.700}",
-            "health": "{primitive.color.health-purple.700}",
+            "health": "{primitive.color.purple.700}",
             "local": "{primitive.color.local-brown.700}",
             "safety": "{primitive.color.safety-gray.700}",
             "transportation": "{primitive.color.transportation-blue.700}"
@@ -639,7 +600,7 @@
             "admin": "{primitive.color.admin-orange.800}",
             "business": "{primitive.color.business-teal.800}",
             "environment": "{primitive.color.environment-green.800}",
-            "health": "{primitive.color.health-purple.800}",
+            "health": "{primitive.color.purple.800}",
             "local": "{primitive.color.local-brown.800}",
             "safety": "{primitive.color.safety-gray.800}",
             "transportation": "{primitive.color.transportation-blue.800}"
@@ -648,13 +609,13 @@
         "$description": "Dark theme variant. USE for hover states on primary elements."
       },
       "stronger": {
-        "$value": "{primitive.color.charles-blue}",
+        "$value": "{primitive.color.blue.900}",
         "$extensions": {
           "mode": {
             "admin": "{primitive.color.admin-orange.900}",
             "business": "{primitive.color.business-teal.900}",
             "environment": "{primitive.color.environment-green.900}",
-            "health": "{primitive.color.health-purple.900}",
+            "health": "{primitive.color.purple.900}",
             "local": "{primitive.color.local-brown.900}",
             "safety": "{primitive.color.safety-gray.900}",
             "transportation": "{primitive.color.transportation-blue.900}"
@@ -669,7 +630,7 @@
     "color": {
       "$type": "color",
       "accent": {
-        "$value": "{primitive.color.freedom-trail-red}",
+        "$value": "{primitive.color.red.400}",
         "$description": "Accent color for highlights and emphasis (Freedom Trail Red). USE sparingly for visual interest."
       },
       "base": {
@@ -810,8 +771,8 @@
           "$description": "Active link state. USE for :active state on links."
         },
         "neutral": {
-          "$value": "{primitive.color.neutral.900}",
-          "$description": "Neutral link style. USE when link styling should match body text color."
+          "$value": "{primitive.color.blue.900}",
+          "$description": "Neutral link style. USE when a link should use the darkest brand blue rather than body text."
         },
         "reverse": {
           "$value": "{primitive.color.neutral.300}",
@@ -1550,4 +1511,4 @@
       }
     }
   }
-}
+}

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/framework-snippets.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Framework snippet generation
+ *
+ * Turns a component's canonical HTML examples into React and Angular
+ * snippets using `@cobwds/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` + `onCob*`), 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 `@cobwds/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 "@cobwds/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` + `onCob*`), 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 `@cobwds/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 `@cobwds/codegen` rather than re-derived.
+ */
+import { eventToAngularOutput, eventToReactProp, tagToSubpath, } from "@cobwds/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: "@cobwds/react",
+        import: `import { ${className} } from "@cobwds/react/${subpath}";`,
+        events: "Events map to onCob* props (cob-change -> onCobChange). 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: "@cobwds/angular",
+        import: `import { ${angularClass} } from "@cobwds/angular/${subpath}";`,
+        events: `Events map to camelCase outputs (cob-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: "@cobwds/react", version: "unknown" },
+            vue: { packageName: "@cobwds/vue", version: "unknown" },
+            angular: { packageName: "@cobwds/angular", version: "unknown" },
+        };
+    }
+    return cached;
+}

package/dist/resources/frameworks.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Framework Resources
+ *
+ * MCP resources for COBWDS framework packages (@cobwds/react, @cobwds/vue,
+ * @cobwds/angular).
+ *
+ * Resources:
+ * - cobwds://frameworks - Index of framework packages with version and guide URI
+ * - cobwds://frameworks/react - @cobwds/react guide (synced from its README)
+ * - cobwds://frameworks/vue - @cobwds/vue guide (synced from its README)
+ * - cobwds://frameworks/angular - @cobwds/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"}