polen 0.10.0-next.15 → 0.10.0-next.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polen",
-  "version": "0.10.0-next.15",
+  "version": "0.10.0-next.17",
   "type": "module",
   "description": "A framework for delightful GraphQL developer portals",
   "author": {
@@ -207,6 +207,7 @@
     "test:unit": "vitest",
     "dev": "pnpm build:watch:emit",
     "dev:hive": "pnpm polen dev --project examples/hive",
+    "dev:pokemon": "pnpm polen dev --project examples/pokemon",
     "build:clean": "pnpm tsc --build tsconfig.build.json --clean && rm -rf build",
     "build": "tsc --build tsconfig.build.json",
     "build:watch": "tsc --build tsconfig.build.json --watch",
@@ -222,8 +223,7 @@
     "prepublishOnly": "pnpm build",
     "prepack": "pnpm build",
     "build:cli:chmodx": "chmod +x ./build/cli/index.js",
-    "postbuild": "pnpm run build:cli:chmodx && pnpm run build:copy-assets",
-    "build:copy-assets": "mkdir -p build/template && cp -r src/template/styles build/template/",
+    "postbuild": "pnpm run build:cli:chmodx",
     "test": "vitest",
     "check": "pnpm run '/^check:(?!pedantic:).+/'",
     "checkAll": "pnpm run '/^check:.+/'",

package/src/api/vite/plugins/core.ts

@@ -116,14 +116,15 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
       config(_, { command }) {
         return {
           root: config.paths.framework.rootDir,
-          future: {
-            removePluginHookHandleHotUpdate: 'warn',
-            removePluginHookSsrArgument: 'warn',
-            removeServerModuleGraph: 'warn',
-            removeServerHot: 'warn',
-            removeServerTransformRequest: 'warn',
-            removeSsrLoadModule: 'warn',
-          },
+          // todo
+          // future: {
+          //   removePluginHookHandleHotUpdate: 'warn',
+          //   removePluginHookSsrArgument: 'warn',
+          //   removeServerModuleGraph: 'warn',
+          //   removeServerHot: 'warn',
+          //   removeServerTransformRequest: 'warn',
+          //   removeSsrLoadModule: 'warn',
+          // },
           define: {
             __BUILDING__: Json.encode(command === `build`),
             __SERVING__: Json.encode(command === `serve`),

package/src/lib/graphql-change/change-groups.ts

@@ -0,0 +1,250 @@
+import type {
+  Change,
+  DirectiveAddedChange,
+  DirectiveArgumentAddedChange,
+  DirectiveArgumentDefaultValueChangedChange,
+  DirectiveArgumentDescriptionChangedChange,
+  DirectiveArgumentRemovedChange,
+  DirectiveArgumentTypeChangedChange,
+  DirectiveDescriptionChangedChange,
+  DirectiveLocationAddedChange,
+  DirectiveLocationRemovedChange,
+  DirectiveRemovedChange,
+  DirectiveUsageArgumentDefinitionAddedChange,
+  DirectiveUsageArgumentDefinitionRemovedChange,
+  DirectiveUsageEnumAddedChange,
+  DirectiveUsageEnumRemovedChange,
+  DirectiveUsageEnumValueAddedChange,
+  DirectiveUsageEnumValueRemovedChange,
+  DirectiveUsageFieldAddedChange,
+  DirectiveUsageFieldDefinitionAddedChange,
+  DirectiveUsageFieldDefinitionRemovedChange,
+  DirectiveUsageFieldRemovedChange,
+  DirectiveUsageInputFieldDefinitionAddedChange,
+  DirectiveUsageInputFieldDefinitionRemovedChange,
+  DirectiveUsageInputObjectAddedChange,
+  DirectiveUsageInputObjectRemovedChange,
+  DirectiveUsageInterfaceAddedChange,
+  DirectiveUsageInterfaceRemovedChange,
+  DirectiveUsageObjectAddedChange,
+  DirectiveUsageObjectRemovedChange,
+  DirectiveUsageScalarAddedChange,
+  DirectiveUsageScalarRemovedChange,
+  DirectiveUsageSchemaAddedChange,
+  DirectiveUsageSchemaRemovedChange,
+  DirectiveUsageUnionMemberAddedChange,
+  DirectiveUsageUnionMemberRemovedChange,
+  EnumValueAddedChange,
+  EnumValueDeprecationReasonAddedChange,
+  EnumValueDeprecationReasonChangedChange,
+  EnumValueDeprecationReasonRemovedChange,
+  EnumValueDescriptionChangedChange,
+  EnumValueRemovedChange,
+  FieldAddedChange,
+  FieldArgumentAddedChange,
+  FieldArgumentDefaultChangedChange,
+  FieldArgumentDescriptionChangedChange,
+  FieldArgumentRemovedChange,
+  FieldArgumentTypeChangedChange,
+  FieldDeprecationAddedChange,
+  FieldDeprecationReasonAddedChange,
+  FieldDeprecationReasonChangedChange,
+  FieldDeprecationReasonRemovedChange,
+  FieldDeprecationRemovedChange,
+  FieldDescriptionAddedChange,
+  FieldDescriptionChangedChange,
+  FieldDescriptionRemovedChange,
+  FieldRemovedChange,
+  FieldTypeChangedChange,
+  InputFieldAddedChange,
+  InputFieldDefaultValueChangedChange,
+  InputFieldDescriptionAddedChange,
+  InputFieldDescriptionChangedChange,
+  InputFieldDescriptionRemovedChange,
+  InputFieldRemovedChange,
+  InputFieldTypeChangedChange,
+  ObjectTypeInterfaceAddedChange,
+  ObjectTypeInterfaceRemovedChange,
+  SchemaMutationTypeChangedChange,
+  SchemaQueryTypeChangedChange,
+  SchemaSubscriptionTypeChangedChange,
+  TypeAddedChange,
+  TypeDescriptionAddedChange,
+  TypeDescriptionChangedChange,
+  TypeDescriptionRemovedChange,
+  TypeKindChangedChange,
+  TypeRemovedChange,
+  UnionMemberAddedChange,
+  UnionMemberRemovedChange,
+} from './change-types.js'
+
+// Type operations
+export type TypeOperation = TypeAddedChange | TypeRemovedChange | TypeKindChangedChange
+export const isTypeOperation = (change: Change): change is TypeOperation =>
+  change.type === `TYPE_ADDED` || change.type === `TYPE_REMOVED` || change.type === `TYPE_KIND_CHANGED`
+
+// Type descriptions
+export type TypeDescription = TypeDescriptionAddedChange | TypeDescriptionRemovedChange | TypeDescriptionChangedChange
+export const isTypeDescription = (change: Change): change is TypeDescription =>
+  change.type === `TYPE_DESCRIPTION_ADDED` || change.type === `TYPE_DESCRIPTION_REMOVED`
+  || change.type === `TYPE_DESCRIPTION_CHANGED`
+
+// Field operations
+export type FieldOperation = FieldAddedChange | FieldRemovedChange | FieldTypeChangedChange
+export const isFieldOperation = (change: Change): change is FieldOperation =>
+  change.type === `FIELD_ADDED` || change.type === `FIELD_REMOVED` || change.type === `FIELD_TYPE_CHANGED`
+
+// Field descriptions
+export type FieldDescription =
+  | FieldDescriptionAddedChange
+  | FieldDescriptionRemovedChange
+  | FieldDescriptionChangedChange
+export const isFieldDescription = (change: Change): change is FieldDescription =>
+  change.type === `FIELD_DESCRIPTION_ADDED` || change.type === `FIELD_DESCRIPTION_REMOVED`
+  || change.type === `FIELD_DESCRIPTION_CHANGED`
+
+// Field deprecation
+export type FieldDeprecation = FieldDeprecationAddedChange | FieldDeprecationRemovedChange
+export const isFieldDeprecation = (change: Change): change is FieldDeprecation =>
+  change.type === `FIELD_DEPRECATION_ADDED` || change.type === `FIELD_DEPRECATION_REMOVED`
+
+// Field deprecation reason
+export type FieldDeprecationReason =
+  | FieldDeprecationReasonAddedChange
+  | FieldDeprecationReasonRemovedChange
+  | FieldDeprecationReasonChangedChange
+export const isFieldDeprecationReason = (change: Change): change is FieldDeprecationReason =>
+  change.type === `FIELD_DEPRECATION_REASON_ADDED` || change.type === `FIELD_DEPRECATION_REASON_REMOVED`
+  || change.type === `FIELD_DEPRECATION_REASON_CHANGED`
+
+// Field argument operations
+export type FieldArgumentOperation = FieldArgumentAddedChange | FieldArgumentRemovedChange
+export const isFieldArgumentOperation = (change: Change): change is FieldArgumentOperation =>
+  change.type === `FIELD_ARGUMENT_ADDED` || change.type === `FIELD_ARGUMENT_REMOVED`
+
+// Field argument changes
+export type FieldArgument = FieldArgumentDefaultChangedChange | FieldArgumentTypeChangedChange
+export const isFieldArgument = (change: Change): change is FieldArgument =>
+  change.type === `FIELD_ARGUMENT_DEFAULT_CHANGED` || change.type === `FIELD_ARGUMENT_TYPE_CHANGED`
+
+// Field argument description
+export type FieldArgumentDescription = FieldArgumentDescriptionChangedChange
+export const isFieldArgumentDescription = (change: Change): change is FieldArgumentDescription =>
+  change.type === `FIELD_ARGUMENT_DESCRIPTION_CHANGED`
+
+// Enum value operations
+export type EnumValueOperation = EnumValueAddedChange | EnumValueRemovedChange
+export const isEnumValueOperation = (change: Change): change is EnumValueOperation =>
+  change.type === `ENUM_VALUE_ADDED` || change.type === `ENUM_VALUE_REMOVED`
+
+// Enum value description
+export type EnumValueDescription = EnumValueDescriptionChangedChange
+export const isEnumValueDescription = (change: Change): change is EnumValueDescription =>
+  change.type === `ENUM_VALUE_DESCRIPTION_CHANGED`
+
+// Enum value deprecation reason
+export type EnumValueDeprecationReason =
+  | EnumValueDeprecationReasonAddedChange
+  | EnumValueDeprecationReasonRemovedChange
+  | EnumValueDeprecationReasonChangedChange
+export const isEnumValueDeprecationReason = (change: Change): change is EnumValueDeprecationReason =>
+  change.type === `ENUM_VALUE_DEPRECATION_REASON_ADDED` || change.type === `ENUM_VALUE_DEPRECATION_REASON_REMOVED`
+  || change.type === `ENUM_VALUE_DEPRECATION_REASON_CHANGED`
+
+// Input field operations
+export type InputFieldOperation = InputFieldAddedChange | InputFieldRemovedChange | InputFieldTypeChangedChange
+export const isInputFieldOperation = (change: Change): change is InputFieldOperation =>
+  change.type === `INPUT_FIELD_ADDED` || change.type === `INPUT_FIELD_REMOVED`
+  || change.type === `INPUT_FIELD_TYPE_CHANGED`
+
+// Input field descriptions
+export type InputFieldDescription =
+  | InputFieldDescriptionAddedChange
+  | InputFieldDescriptionRemovedChange
+  | InputFieldDescriptionChangedChange
+export const isInputFieldDescription = (change: Change): change is InputFieldDescription =>
+  change.type === `INPUT_FIELD_DESCRIPTION_ADDED` || change.type === `INPUT_FIELD_DESCRIPTION_REMOVED`
+  || change.type === `INPUT_FIELD_DESCRIPTION_CHANGED`
+
+// Input field default value
+export type InputFieldDefaultValue = InputFieldDefaultValueChangedChange
+export const isInputFieldDefaultValue = (change: Change): change is InputFieldDefaultValue =>
+  change.type === `INPUT_FIELD_DEFAULT_VALUE_CHANGED`
+
+// Union member operations
+export type UnionMemberOperation = UnionMemberAddedChange | UnionMemberRemovedChange
+export const isUnionMemberOperation = (change: Change): change is UnionMemberOperation =>
+  change.type === `UNION_MEMBER_ADDED` || change.type === `UNION_MEMBER_REMOVED`
+
+// Object type interface operations
+export type ObjectTypeInterfaceOperation = ObjectTypeInterfaceAddedChange | ObjectTypeInterfaceRemovedChange
+export const isObjectTypeInterfaceOperation = (change: Change): change is ObjectTypeInterfaceOperation =>
+  change.type === `OBJECT_TYPE_INTERFACE_ADDED` || change.type === `OBJECT_TYPE_INTERFACE_REMOVED`
+
+// Directive operations
+export type DirectiveOperation = DirectiveAddedChange | DirectiveRemovedChange
+export const isDirectiveOperation = (change: Change): change is DirectiveOperation =>
+  change.type === `DIRECTIVE_ADDED` || change.type === `DIRECTIVE_REMOVED`
+
+// Directive description
+export type DirectiveDescription = DirectiveDescriptionChangedChange
+export const isDirectiveDescription = (change: Change): change is DirectiveDescription =>
+  change.type === `DIRECTIVE_DESCRIPTION_CHANGED`
+
+// Directive location operations
+export type DirectiveLocationOperation = DirectiveLocationAddedChange | DirectiveLocationRemovedChange
+export const isDirectiveLocationOperation = (change: Change): change is DirectiveLocationOperation =>
+  change.type === `DIRECTIVE_LOCATION_ADDED` || change.type === `DIRECTIVE_LOCATION_REMOVED`
+
+// Directive argument operations
+export type DirectiveArgumentOperation = DirectiveArgumentAddedChange | DirectiveArgumentRemovedChange
+export const isDirectiveArgumentOperation = (change: Change): change is DirectiveArgumentOperation =>
+  change.type === `DIRECTIVE_ARGUMENT_ADDED` || change.type === `DIRECTIVE_ARGUMENT_REMOVED`
+
+// Directive argument changes
+export type DirectiveArgument = DirectiveArgumentDefaultValueChangedChange | DirectiveArgumentTypeChangedChange
+export const isDirectiveArgument = (change: Change): change is DirectiveArgument =>
+  change.type === `DIRECTIVE_ARGUMENT_DEFAULT_VALUE_CHANGED` || change.type === `DIRECTIVE_ARGUMENT_TYPE_CHANGED`
+
+// Directive argument description
+export type DirectiveArgumentDescription = DirectiveArgumentDescriptionChangedChange
+export const isDirectiveArgumentDescription = (change: Change): change is DirectiveArgumentDescription =>
+  change.type === `DIRECTIVE_ARGUMENT_DESCRIPTION_CHANGED`
+
+// Schema root type changes
+export type SchemaRootType =
+  | SchemaQueryTypeChangedChange
+  | SchemaMutationTypeChangedChange
+  | SchemaSubscriptionTypeChangedChange
+export const isSchemaRootType = (change: Change): change is SchemaRootType =>
+  change.type === `SCHEMA_QUERY_TYPE_CHANGED` || change.type === `SCHEMA_MUTATION_TYPE_CHANGED`
+  || change.type === `SCHEMA_SUBSCRIPTION_TYPE_CHANGED`
+
+// Directive usage changes
+export type DirectiveUsage =
+  | DirectiveUsageUnionMemberAddedChange
+  | DirectiveUsageUnionMemberRemovedChange
+  | DirectiveUsageEnumAddedChange
+  | DirectiveUsageEnumRemovedChange
+  | DirectiveUsageEnumValueAddedChange
+  | DirectiveUsageEnumValueRemovedChange
+  | DirectiveUsageInputObjectAddedChange
+  | DirectiveUsageInputObjectRemovedChange
+  | DirectiveUsageFieldAddedChange
+  | DirectiveUsageFieldRemovedChange
+  | DirectiveUsageScalarAddedChange
+  | DirectiveUsageScalarRemovedChange
+  | DirectiveUsageObjectAddedChange
+  | DirectiveUsageObjectRemovedChange
+  | DirectiveUsageInterfaceAddedChange
+  | DirectiveUsageInterfaceRemovedChange
+  | DirectiveUsageArgumentDefinitionAddedChange
+  | DirectiveUsageArgumentDefinitionRemovedChange
+  | DirectiveUsageSchemaAddedChange
+  | DirectiveUsageSchemaRemovedChange
+  | DirectiveUsageFieldDefinitionAddedChange
+  | DirectiveUsageFieldDefinitionRemovedChange
+  | DirectiveUsageInputFieldDefinitionAddedChange
+  | DirectiveUsageInputFieldDefinitionRemovedChange
+
+export const isDirectiveUsage = (change: Change): change is DirectiveUsage => change.type.startsWith(`DIRECTIVE_USAGE_`)

package/src/lib/graphql-change/change-types.ts

@@ -0,0 +1,203 @@
+// dprint-ignore-file
+import type { GraphqlInspector } from '#dep/graphql-inspector/index'
+
+/**
+ * Additional properties that Polen adds to GraphQL Inspector changes
+ */
+export interface ChangeExtensions {
+  message: string
+  path?: string
+  criticality: GraphqlInspector.Core.Criticality
+}
+
+// Type changes
+export interface TypeAddedChange extends GraphqlInspector.Core.TypeAddedChange, ChangeExtensions {}
+export interface TypeRemovedChange extends GraphqlInspector.Core.TypeRemovedChange, ChangeExtensions {}
+export interface TypeKindChangedChange extends GraphqlInspector.Core.TypeKindChangedChange, ChangeExtensions {}
+export interface TypeDescriptionChangedChange extends GraphqlInspector.Core.TypeDescriptionChangedChange, ChangeExtensions {}
+export interface TypeDescriptionAddedChange extends GraphqlInspector.Core.TypeDescriptionAddedChange, ChangeExtensions {}
+export interface TypeDescriptionRemovedChange extends GraphqlInspector.Core.TypeDescriptionRemovedChange, ChangeExtensions {}
+
+// Field changes
+export interface FieldAddedChange extends GraphqlInspector.Core.FieldAddedChange, ChangeExtensions {}
+export interface FieldRemovedChange extends GraphqlInspector.Core.FieldRemovedChange, ChangeExtensions {}
+export interface FieldTypeChangedChange extends GraphqlInspector.Core.FieldTypeChangedChange, ChangeExtensions {}
+// Note: GraphQL Inspector doesn't have FieldDeprecatedChange, it's handled by FieldDeprecationAddedChange
+export interface FieldDeprecationAddedChange extends GraphqlInspector.Core.FieldDeprecationAddedChange, ChangeExtensions {}
+export interface FieldDeprecationRemovedChange extends GraphqlInspector.Core.FieldDeprecationRemovedChange, ChangeExtensions {}
+export interface FieldDeprecationReasonChangedChange extends GraphqlInspector.Core.FieldDeprecationReasonChangedChange, ChangeExtensions {}
+export interface FieldDeprecationReasonAddedChange extends GraphqlInspector.Core.FieldDeprecationReasonAddedChange, ChangeExtensions {}
+export interface FieldDeprecationReasonRemovedChange extends GraphqlInspector.Core.FieldDeprecationReasonRemovedChange, ChangeExtensions {}
+export interface FieldDescriptionChangedChange extends GraphqlInspector.Core.FieldDescriptionChangedChange, ChangeExtensions {}
+export interface FieldDescriptionAddedChange extends GraphqlInspector.Core.FieldDescriptionAddedChange, ChangeExtensions {}
+export interface FieldDescriptionRemovedChange extends GraphqlInspector.Core.FieldDescriptionRemovedChange, ChangeExtensions {}
+
+// Field argument changes
+export interface FieldArgumentAddedChange extends GraphqlInspector.Core.FieldArgumentAddedChange, ChangeExtensions {}
+export interface FieldArgumentRemovedChange extends GraphqlInspector.Core.FieldArgumentRemovedChange, ChangeExtensions {}
+export interface FieldArgumentTypeChangedChange extends GraphqlInspector.Core.FieldArgumentTypeChangedChange, ChangeExtensions {}
+export interface FieldArgumentDescriptionChangedChange extends GraphqlInspector.Core.FieldArgumentDescriptionChangedChange, ChangeExtensions {}
+export interface FieldArgumentDefaultChangedChange extends GraphqlInspector.Core.FieldArgumentDefaultChangedChange, ChangeExtensions {}
+
+// Enum changes
+export interface EnumValueAddedChange extends GraphqlInspector.Core.EnumValueAddedChange, ChangeExtensions {}
+export interface EnumValueRemovedChange extends GraphqlInspector.Core.EnumValueRemovedChange, ChangeExtensions {}
+export interface EnumValueDescriptionChangedChange extends GraphqlInspector.Core.EnumValueDescriptionChangedChange, ChangeExtensions {}
+export interface EnumValueDeprecationReasonAddedChange extends GraphqlInspector.Core.EnumValueDeprecationReasonAddedChange, ChangeExtensions {}
+export interface EnumValueDeprecationReasonChangedChange extends GraphqlInspector.Core.EnumValueDeprecationReasonChangedChange, ChangeExtensions {}
+export interface EnumValueDeprecationReasonRemovedChange extends GraphqlInspector.Core.EnumValueDeprecationReasonRemovedChange, ChangeExtensions {}
+
+// Input field changes
+export interface InputFieldAddedChange extends GraphqlInspector.Core.InputFieldAddedChange, ChangeExtensions {}
+export interface InputFieldRemovedChange extends GraphqlInspector.Core.InputFieldRemovedChange, ChangeExtensions {}
+export interface InputFieldTypeChangedChange extends GraphqlInspector.Core.InputFieldTypeChangedChange, ChangeExtensions {}
+export interface InputFieldDescriptionAddedChange extends GraphqlInspector.Core.InputFieldDescriptionAddedChange, ChangeExtensions {}
+export interface InputFieldDescriptionRemovedChange extends GraphqlInspector.Core.InputFieldDescriptionRemovedChange, ChangeExtensions {}
+export interface InputFieldDescriptionChangedChange extends GraphqlInspector.Core.InputFieldDescriptionChangedChange, ChangeExtensions {}
+export interface InputFieldDefaultValueChangedChange extends GraphqlInspector.Core.InputFieldDefaultValueChangedChange, ChangeExtensions {}
+
+// Union changes
+export interface UnionMemberAddedChange extends GraphqlInspector.Core.UnionMemberAddedChange, ChangeExtensions {}
+export interface UnionMemberRemovedChange extends GraphqlInspector.Core.UnionMemberRemovedChange, ChangeExtensions {}
+
+// Interface changes
+export interface ObjectTypeInterfaceAddedChange extends GraphqlInspector.Core.ObjectTypeInterfaceAddedChange, ChangeExtensions {}
+export interface ObjectTypeInterfaceRemovedChange extends GraphqlInspector.Core.ObjectTypeInterfaceRemovedChange, ChangeExtensions {}
+
+// Directive changes
+export interface DirectiveAddedChange extends GraphqlInspector.Core.DirectiveAddedChange, ChangeExtensions {}
+export interface DirectiveRemovedChange extends GraphqlInspector.Core.DirectiveRemovedChange, ChangeExtensions {}
+export interface DirectiveDescriptionChangedChange extends GraphqlInspector.Core.DirectiveDescriptionChangedChange, ChangeExtensions {}
+export interface DirectiveLocationAddedChange extends GraphqlInspector.Core.DirectiveLocationAddedChange, ChangeExtensions {}
+export interface DirectiveLocationRemovedChange extends GraphqlInspector.Core.DirectiveLocationRemovedChange, ChangeExtensions {}
+export interface DirectiveArgumentAddedChange extends GraphqlInspector.Core.DirectiveArgumentAddedChange, ChangeExtensions {}
+export interface DirectiveArgumentRemovedChange extends GraphqlInspector.Core.DirectiveArgumentRemovedChange, ChangeExtensions {}
+export interface DirectiveArgumentDescriptionChangedChange extends GraphqlInspector.Core.DirectiveArgumentDescriptionChangedChange, ChangeExtensions {}
+export interface DirectiveArgumentDefaultValueChangedChange extends GraphqlInspector.Core.DirectiveArgumentDefaultValueChangedChange, ChangeExtensions {}
+export interface DirectiveArgumentTypeChangedChange extends GraphqlInspector.Core.DirectiveArgumentTypeChangedChange, ChangeExtensions {}
+
+// Schema changes
+export interface SchemaQueryTypeChangedChange extends GraphqlInspector.Core.SchemaQueryTypeChangedChange, ChangeExtensions {}
+export interface SchemaMutationTypeChangedChange extends GraphqlInspector.Core.SchemaMutationTypeChangedChange, ChangeExtensions {}
+export interface SchemaSubscriptionTypeChangedChange extends GraphqlInspector.Core.SchemaSubscriptionTypeChangedChange, ChangeExtensions {}
+
+// Directive usage changes
+export interface DirectiveUsageUnionMemberAddedChange extends GraphqlInspector.Core.DirectiveUsageUnionMemberAddedChange, ChangeExtensions {}
+export interface DirectiveUsageUnionMemberRemovedChange extends GraphqlInspector.Core.DirectiveUsageUnionMemberRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageEnumAddedChange extends GraphqlInspector.Core.DirectiveUsageEnumAddedChange, ChangeExtensions {}
+export interface DirectiveUsageEnumRemovedChange extends GraphqlInspector.Core.DirectiveUsageEnumRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageEnumValueAddedChange extends GraphqlInspector.Core.DirectiveUsageEnumValueAddedChange, ChangeExtensions {}
+export interface DirectiveUsageEnumValueRemovedChange extends GraphqlInspector.Core.DirectiveUsageEnumValueRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageInputObjectAddedChange extends GraphqlInspector.Core.DirectiveUsageInputObjectAddedChange, ChangeExtensions {}
+export interface DirectiveUsageInputObjectRemovedChange extends GraphqlInspector.Core.DirectiveUsageInputObjectRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageFieldAddedChange extends GraphqlInspector.Core.DirectiveUsageFieldAddedChange, ChangeExtensions {}
+export interface DirectiveUsageFieldRemovedChange extends GraphqlInspector.Core.DirectiveUsageFieldRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageScalarAddedChange extends GraphqlInspector.Core.DirectiveUsageScalarAddedChange, ChangeExtensions {}
+export interface DirectiveUsageScalarRemovedChange extends GraphqlInspector.Core.DirectiveUsageScalarRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageObjectAddedChange extends GraphqlInspector.Core.DirectiveUsageObjectAddedChange, ChangeExtensions {}
+export interface DirectiveUsageObjectRemovedChange extends GraphqlInspector.Core.DirectiveUsageObjectRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageInterfaceAddedChange extends GraphqlInspector.Core.DirectiveUsageInterfaceAddedChange, ChangeExtensions {}
+export interface DirectiveUsageInterfaceRemovedChange extends GraphqlInspector.Core.DirectiveUsageInterfaceRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageArgumentDefinitionAddedChange extends GraphqlInspector.Core.DirectiveUsageArgumentDefinitionAddedChange, ChangeExtensions {}
+export interface DirectiveUsageArgumentDefinitionRemovedChange extends GraphqlInspector.Core.DirectiveUsageArgumentDefinitionRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageSchemaAddedChange extends GraphqlInspector.Core.DirectiveUsageSchemaAddedChange, ChangeExtensions {}
+export interface DirectiveUsageSchemaRemovedChange extends GraphqlInspector.Core.DirectiveUsageSchemaRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageFieldDefinitionAddedChange extends GraphqlInspector.Core.DirectiveUsageFieldDefinitionAddedChange, ChangeExtensions {}
+export interface DirectiveUsageFieldDefinitionRemovedChange extends GraphqlInspector.Core.DirectiveUsageFieldDefinitionRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageInputFieldDefinitionAddedChange extends GraphqlInspector.Core.DirectiveUsageInputFieldDefinitionAddedChange, ChangeExtensions {}
+export interface DirectiveUsageInputFieldDefinitionRemovedChange extends GraphqlInspector.Core.DirectiveUsageInputFieldDefinitionRemovedChange, ChangeExtensions {}
+
+/**
+ * Discriminated union of all possible change types
+ */
+export type Change =
+  | TypeAddedChange
+  | TypeRemovedChange
+  | TypeKindChangedChange
+  | TypeDescriptionChangedChange
+  | TypeDescriptionAddedChange
+  | TypeDescriptionRemovedChange
+  | FieldAddedChange
+  | FieldRemovedChange
+  | FieldTypeChangedChange
+  // | FieldDeprecatedChange
+  | FieldDeprecationAddedChange
+  | FieldDeprecationRemovedChange
+  | FieldDeprecationReasonChangedChange
+  | FieldDeprecationReasonAddedChange
+  | FieldDeprecationReasonRemovedChange
+  | FieldDescriptionChangedChange
+  | FieldDescriptionAddedChange
+  | FieldDescriptionRemovedChange
+  | FieldArgumentAddedChange
+  | FieldArgumentRemovedChange
+  | FieldArgumentTypeChangedChange
+  | FieldArgumentDescriptionChangedChange
+  | FieldArgumentDefaultChangedChange
+  | EnumValueAddedChange
+  | EnumValueRemovedChange
+  | EnumValueDescriptionChangedChange
+  | EnumValueDeprecationReasonAddedChange
+  | EnumValueDeprecationReasonChangedChange
+  | EnumValueDeprecationReasonRemovedChange
+  | InputFieldAddedChange
+  | InputFieldRemovedChange
+  | InputFieldTypeChangedChange
+  | InputFieldDescriptionAddedChange
+  | InputFieldDescriptionRemovedChange
+  | InputFieldDescriptionChangedChange
+  | InputFieldDefaultValueChangedChange
+  | UnionMemberAddedChange
+  | UnionMemberRemovedChange
+  | ObjectTypeInterfaceAddedChange
+  | ObjectTypeInterfaceRemovedChange
+  | DirectiveAddedChange
+  | DirectiveRemovedChange
+  | DirectiveDescriptionChangedChange
+  | DirectiveLocationAddedChange
+  | DirectiveLocationRemovedChange
+  | DirectiveArgumentAddedChange
+  | DirectiveArgumentRemovedChange
+  | DirectiveArgumentDescriptionChangedChange
+  | DirectiveArgumentDefaultValueChangedChange
+  | DirectiveArgumentTypeChangedChange
+  | SchemaQueryTypeChangedChange
+  | SchemaMutationTypeChangedChange
+  | SchemaSubscriptionTypeChangedChange
+  | DirectiveUsageUnionMemberAddedChange
+  | DirectiveUsageUnionMemberRemovedChange
+  | DirectiveUsageEnumAddedChange
+  | DirectiveUsageEnumRemovedChange
+  | DirectiveUsageEnumValueAddedChange
+  | DirectiveUsageEnumValueRemovedChange
+  | DirectiveUsageInputObjectAddedChange
+  | DirectiveUsageInputObjectRemovedChange
+  | DirectiveUsageFieldAddedChange
+  | DirectiveUsageFieldRemovedChange
+  | DirectiveUsageScalarAddedChange
+  | DirectiveUsageScalarRemovedChange
+  | DirectiveUsageObjectAddedChange
+  | DirectiveUsageObjectRemovedChange
+  | DirectiveUsageInterfaceAddedChange
+  | DirectiveUsageInterfaceRemovedChange
+  | DirectiveUsageArgumentDefinitionAddedChange
+  | DirectiveUsageArgumentDefinitionRemovedChange
+  | DirectiveUsageSchemaAddedChange
+  | DirectiveUsageSchemaRemovedChange
+  | DirectiveUsageFieldDefinitionAddedChange
+  | DirectiveUsageFieldDefinitionRemovedChange
+  | DirectiveUsageInputFieldDefinitionAddedChange
+  | DirectiveUsageInputFieldDefinitionRemovedChange
+
+/**
+ * Type guard to check if a value is a valid Change
+ */
+export const isChange = (value: unknown): value is Change => {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'type' in value &&
+    'criticality' in value &&
+    'message' in value
+  )
+}

package/src/lib/graphql-change/criticality.ts

@@ -0,0 +1,45 @@
+import { CriticalityLevel } from '@graphql-inspector/core'
+import type { BadgeProps } from '@radix-ui/themes'
+import type { Change } from './change-types.js'
+
+export { CriticalityLevel } from '@graphql-inspector/core'
+
+// Type guard functions
+export const isCriticalityBreaking = (change: Change): boolean => change.criticality.level === CriticalityLevel.Breaking
+
+export const isCriticalityDangerous = (change: Change): boolean =>
+  change.criticality.level === CriticalityLevel.Dangerous
+
+export const isCriticalitySafe = (change: Change): boolean => change.criticality.level === CriticalityLevel.NonBreaking
+
+/** Ordered array for iteration (from most to least critical) */
+export const CRITICALITY_LEVELS = [
+  CriticalityLevel.Breaking,
+  CriticalityLevel.Dangerous,
+  CriticalityLevel.NonBreaking,
+] as const
+
+// Config for UI display
+interface CriticalityConfig {
+  color: Exclude<BadgeProps['color'], undefined>
+  label: string
+  shortLabel: string
+}
+
+export const CRITICALITY_CONFIG = {
+  [CriticalityLevel.Breaking]: {
+    color: 'red',
+    label: 'Breaking Changes',
+    shortLabel: 'Breaking',
+  },
+  [CriticalityLevel.Dangerous]: {
+    color: 'yellow',
+    label: 'Dangerous Changes',
+    shortLabel: 'Dangerous',
+  },
+  [CriticalityLevel.NonBreaking]: {
+    color: 'green',
+    label: 'Safe Changes',
+    shortLabel: 'Safe',
+  },
+} satisfies Record<CriticalityLevel, CriticalityConfig>

package/src/lib/graphql-change/graphql-change.ts

@@ -1,11 +1,13 @@
 import { GraphqlInspector } from '#dep/graphql-inspector/index'
 import type { GrafaidOld } from '#lib/grafaid-old/index'
+import type { Change } from './change-types.js'
 
-export type Change = GraphqlInspector.Core.SerializableChange & {
-  message: string
-  path?: string
-  criticality: GraphqlInspector.Core.Criticality
-}
+export * from './change-types.js'
+
+export * from './criticality.js'
+
+import * as Group from './change-groups.js'
+export { Group }
 
 export const calcChangeset = async (parameters: {
   after: GrafaidOld.Schema.Schema

package/src/lib/graphql-document/components/GraphQLDocument.tsx

@@ -36,8 +36,6 @@ export interface GraphQLDocumentProps {
   schema?: GraphQLSchema
   /** Component options */
   options?: GraphQLDocumentOptions
-  /** Pre-rendered Shiki HTML (from build time) */
-  highlightedHtml?: string
 }
 
 /**
@@ -50,7 +48,6 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
   children,
   schema,
   options = {},
-  highlightedHtml,
 }) => {
   const {
     debug = false,
@@ -135,7 +132,7 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
     }
 
     // Get the code element within the container
-    const codeElement = containerRef.current.querySelector(`pre.shiki code`)
+    const codeElement = containerRef.current.querySelector(`pre.code-block code`)
       || containerRef.current.querySelector(`pre code`)
       || containerRef.current.querySelector(`code`)
     if (!codeElement) {
@@ -158,7 +155,7 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
         setIsReady(true)
       }
     })
-  }, [analysisResult, positionCalculator, plain, highlightedHtml])
+  }, [analysisResult, positionCalculator, plain])
 
   // Handle resize events with debouncing
   ReactHooks.useEffect(() => {
@@ -168,7 +165,7 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
     const handleResize = () => {
       clearTimeout(resizeTimer)
       resizeTimer = setTimeout(() => {
-        const codeElement = containerRef.current?.querySelector(`pre.shiki code`)
+        const codeElement = containerRef.current?.querySelector(`pre.code-block code`)
           || containerRef.current?.querySelector(`pre code`)
           || containerRef.current?.querySelector(`code`)
         if (codeElement && containerRef.current) {
@@ -201,12 +198,10 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
         }`}
         data-testid='graphql-document'
       >
-        {/* Base syntax highlighting */}
-        {highlightedHtml ? <div dangerouslySetInnerHTML={{ __html: highlightedHtml }} /> : (
-          <pre className='shiki'>
-            <code>{children}</code>
-          </pre>
-        )}
+        {/* Base code block */}
+        <pre className='code-block'>
+          <code>{children}</code>
+        </pre>
 
         {/* Interactive overlay layer */}
         {!plain && isReady && (

package/src/lib/graphql-document/components/GraphQLDocumentWithSchema.tsx

@@ -6,7 +6,7 @@ import { GraphQLDocument, type GraphQLDocumentProps } from './GraphQLDocument.js
 /**
  * GraphQL Document component that uses the schema context
  */
-export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, `schema` | `highlightedHtml`>> = (
+export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, `schema`>> = (
   props,
 ) => {
   const schema = useGraphQLSchema()
@@ -37,15 +37,10 @@ export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, `sch
     )
   }
 
-  // Simple highlighted HTML without syntax highlighting
-  const highlightedHtml =
-    `<pre style="background-color: var(--gray-a2); color: var(--gray-12); padding: var(--space-3); border-radius: var(--radius-3);"><code class="language-graphql">${props.children}</code></pre>`
-
   return (
     <GraphQLDocument
       {...props}
       schema={schema}
-      highlightedHtml={highlightedHtml}
     />
   )
 }

package/src/lib/graphql-document/demo.md

@@ -133,7 +133,7 @@ The GraphQL Document component provides:
 - **Interactive Navigation**: Click on any type or field to navigate to its reference documentation
 - **Hover Tooltips**: See type information, descriptions, and deprecation warnings
 - **Schema Validation**: Invalid queries are highlighted with error messages
-- **Syntax Highlighting**: Beautiful syntax highlighting with Shiki
+- **Syntax Highlighting**: Beautiful syntax highlighting
 - **Smart Positioning**: Tooltips automatically position themselves to stay within the viewport
 - **Accessibility**: Full keyboard navigation and screen reader support