pierre-guard

# Pierre Integration Guard Plannotator's code review UI wraps `@pierre/diffs` — an open-source diff renderer that uses Shadow DOM. The integration is concentrated in a single file but relies on undocumented internals (shadow DOM selectors, CSS variable names, grid layout assumptions). This skill helps verify changes don't break that contract. ## Source of Truth - **Upstream repo**: https://github.com/pierrecomputer/pierre/tree/main/packages/diffs - **Local types**: `node_modules/@pierre/diffs/dist/` (`.d.ts` files) - **Integration point**: `packages/review-editor/components/DiffViewer.tsx` - **Current version**: check `packages/review-editor/package.json` for the pinned version Always verify against the upstream repo or local `.d.ts` files — don't rely on memory of the API shape. ## What We Import ```typescript import { FileDiff } from '@pierre/diffs/react'; import { getSingularPatch, processFile } from '@pierre/diffs'; ``` These are the only three imports. `DiffViewer.tsx` is the only file that touches Pierre. ## API Surface to Guard ### 1. Component Props (`FileDiff`) Read the current prop types from `node_modules/@pierre/diffs/dist/react/index.d.ts` or the upstream source. The props we use: | Prop | Type | Notes | |------|------|-------| | `fileDiff` | `FileDiffMetadata` | From `getSingularPatch()` or `processFile()` | | `options` | `FileDiffOptions<T>` | See options table below | | `lineAnnotations` | `DiffLineAnnotation<T>[]` | `{ side, lineNumber, metadata }`...