Add operation components, orchestrator, and emitter rendering

Brings the component-based GraphQL emitter online by wiring the data
pipeline from the foundation skeleton into Alloy JSX rendering.

New components:
- components/operations/query-type.tsx, mutation-type.tsx, subscription-type.tsx:
  render the three GraphQL root operation types
- components/operations/index.ts: barrel export
- components/type-collections.tsx: orchestrator that dispatches each
  classified-type bucket (scalars, enums, unions, interfaces, objects, inputs)
  into the appropriate leaf-type component

Emitter wiring:
- Rename src/emitter.ts → src/emitter.tsx
- Phase 5 now renders via Alloy's renderSchema, converts to SDL with
  graphql-js printSchema, and writes the output via emitFile
- Adds output-file option handling with interpolatePath

Testing:
- test/e2e.test.ts: single happy-path smoke test proving the full
  TypeSpec → mutation → classification → rendering → SDL pipeline works
- Update the existing test/emitter.test.ts data-pipeline test to now
  assert that SDL output is produced (Phase 5 is wired up)

Broader integration coverage (nullability, input/output splitting,
unions, enums, arrays, circular refs, deprecation, doc comments) lands
in a follow-up PR focused on tests.

Author: FionaBronwen

packages/graphql/src/components/operations/index.ts

@@ -0,0 +1,3 @@
+export { QueryType, type QueryTypeProps } from "./query-type.js";
+export { MutationType, type MutationTypeProps } from "./mutation-type.js";
+export { SubscriptionType, type SubscriptionTypeProps } from "./subscription-type.js";

packages/graphql/src/components/operations/mutation-type.tsx

@@ -0,0 +1,27 @@
+import { type Operation } from "@typespec/compiler";
+import * as gql from "@alloy-js/graphql";
+import { OperationField } from "../fields/index.js";
+
+export interface MutationTypeProps {
+  /** Mutation operations to render as fields */
+  operations: Operation[];
+}
+
+/**
+ * Renders the GraphQL Mutation root type using Alloy's Mutation component
+ *
+ * Only renders if operations exist (Mutation is optional in GraphQL)
+ */
+export function MutationType(props: MutationTypeProps) {
+  if (props.operations.length === 0) {
+    return null;
+  }
+
+  return (
+    <gql.Mutation>
+      {props.operations.map((op) => (
+        <OperationField operation={op} />
+      ))}
+    </gql.Mutation>
+  );
+}

packages/graphql/src/components/operations/query-type.tsx

@@ -0,0 +1,27 @@
+import { type Operation } from "@typespec/compiler";
+import * as gql from "@alloy-js/graphql";
+import { OperationField } from "../fields/index.js";
+
+export interface QueryTypeProps {
+  /** Query operations to render as fields */
+  operations: Operation[];
+}
+
+/**
+ * Renders the GraphQL Query root type using Alloy's Query component.
+ * Returns null if no query operations exist (the emitter will emit an
+ * empty-schema diagnostic in that case).
+ */
+export function QueryType(props: QueryTypeProps) {
+  if (props.operations.length === 0) {
+    return null;
+  }
+
+  return (
+    <gql.Query>
+      {props.operations.map((op) => (
+        <OperationField operation={op} />
+      ))}
+    </gql.Query>
+  );
+}

packages/graphql/src/components/operations/subscription-type.tsx

@@ -0,0 +1,27 @@
+import { type Operation } from "@typespec/compiler";
+import * as gql from "@alloy-js/graphql";
+import { OperationField } from "../fields/index.js";
+
+export interface SubscriptionTypeProps {
+  /** Subscription operations to render as fields */
+  operations: Operation[];
+}
+
+/**
+ * Renders the GraphQL Subscription root type using Alloy's Subscription component
+ *
+ * Only renders if operations exist (Subscription is optional in GraphQL)
+ */
+export function SubscriptionType(props: SubscriptionTypeProps) {
+  if (props.operations.length === 0) {
+    return null;
+  }
+
+  return (
+    <gql.Subscription>
+      {props.operations.map((op) => (
+        <OperationField operation={op} />
+      ))}
+    </gql.Subscription>
+  );
+}

packages/graphql/src/components/type-collections.tsx

@@ -0,0 +1,105 @@
+import { For } from "@alloy-js/core";
+import * as gql from "@alloy-js/graphql";
+import { useGraphQLSchema } from "../context/index.js";
+import {
+  ScalarType,
+  EnumType,
+  UnionType,
+  InterfaceType,
+  ObjectType,
+  InputType,
+} from "./types/index.js";
+
+/**
+ * Renders scalar variant types for encoded scalars (e.g., bytes + base64 -> Bytes)
+ * AND custom user-defined scalars
+ */
+export function ScalarVariantTypes() {
+  const { classifiedTypes } = useGraphQLSchema();
+
+  // Get set of variant names to avoid duplicates
+  const variantNames = new Set(
+    classifiedTypes.scalarVariants.map((v) => v.graphqlName),
+  );
+
+  // Filter custom scalars to only include ones not already in variants
+  const customScalars = classifiedTypes.scalars.filter(
+    (s) => !variantNames.has(s.name),
+  );
+
+  return (
+    <>
+      <For each={classifiedTypes.scalarVariants}>
+        {(variant) => (
+          <gql.ScalarType
+            name={variant.graphqlName}
+            specifiedByUrl={variant.specificationUrl}
+          />
+        )}
+      </For>
+      <For each={customScalars}>
+        {(scalar) => <ScalarType type={scalar} />}
+      </For>
+    </>
+  );
+}
+
+/**
+ * Renders all enum types in the schema
+ */
+export function EnumTypes() {
+  const { classifiedTypes } = useGraphQLSchema();
+  return (
+    <For each={classifiedTypes.enums}>
+      {(enumType) => <EnumType type={enumType} />}
+    </For>
+  );
+}
+
+/**
+ * Renders all union types in the schema
+ */
+export function UnionTypes() {
+  const { classifiedTypes } = useGraphQLSchema();
+  return (
+    <For each={classifiedTypes.unions}>
+      {(union) => <UnionType type={union} />}
+    </For>
+  );
+}
+
+/**
+ * Renders all interface types in the schema
+ */
+export function InterfaceTypes() {
+  const { classifiedTypes } = useGraphQLSchema();
+  return (
+    <For each={classifiedTypes.interfaces}>
+      {(iface) => <InterfaceType type={iface} />}
+    </For>
+  );
+}
+
+/**
+ * Renders all object types in the schema
+ */
+export function ObjectTypes() {
+  const { classifiedTypes } = useGraphQLSchema();
+  return (
+    <For each={classifiedTypes.outputModels}>
+      {(model) => <ObjectType type={model} />}
+    </For>
+  );
+}
+
+/**
+ * Renders all input types in the schema
+ */
+export function InputTypes() {
+  const { classifiedTypes } = useGraphQLSchema();
+  return (
+    <For each={classifiedTypes.inputModels}>
+      {(model) => <InputType type={model} />}
+    </For>
+  );
+}