npm - @cometchat/skills - Versions diffs - 4.3.0 → 4.4.0 - Mend

@cometchat/skills 4.3.0 → 4.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (233) hide show

package/skills/cometchat-theming/SKILL.md CHANGED Viewed

@@ -3,13 +3,14 @@ name: cometchat-theming
 description: Customize CometChat UI to match the user's app design system. Covers the CSS variable cascade, preset themes, brand color overrides, design system extraction, dark mode, and framework-specific override locations.
 license: "MIT"
 compatibility: "Node.js >=18; @cometchat/chat-uikit-react ^6; integration must already be applied"
-allowed-tools: "shell, file-read, file-search, file-list, grep"
 metadata:
   author: "CometChat"
   version: "3.1.0"
   tags: "cometchat theming css customization branding dark-mode"
 ---
+> **Ground truth:** per-platform UI Kit theme system + `docs/ui-kit`. **Official docs:** https://www.cometchat.com/docs/ui-kit/react/theme · **Docs MCP:** `claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp` (or fetch the URL directly without MCP). Verify symbols against the installed package/source before relying on them.
 > **Companion skills:** `cometchat-core` covers CSS import placement
 > and the one-import rule; `cometchat-customization` covers
 > component-level CSS selectors for deeper overrides;
@@ -37,22 +38,35 @@ This file is imported once at the app root (see `cometchat-core`).
 Every `<CometChat*>` component reads these variables — there is no
 component-level style-props API for colors, fonts, or spacing.
-To override: write CSS rules that set `--cometchat-*` variables on
-`:root` (or a scoped container), **after** the `css-variables.css`
-import. The cascade does the rest — every component picks up the new
-values automatically.
+**Scope to `.cometchat`, not `:root`.** The UI Kit renders under a `.cometchat`
+root element. The canonical scope (per the docs) is that class — it keeps the
+overrides from leaking into the rest of your app, and it's where component-scoped
+overrides hang off. (`:root` *works* because CSS variables inherit downward, but
+it's global and lower-precedence — prefer `.cometchat`.) Write the rules **after**
+the `css-variables.css` import.
 ```css
 /* Must appear AFTER the @import of css-variables.css */
-:root {
+/* Global — applies to every CometChat component */
+.cometchat {
   --cometchat-primary-color: #6C63FF;
   --cometchat-background-color-01: #FFFFFF;
   --cometchat-text-color-primary: #141414;
   --cometchat-font-family: "Inter", sans-serif;
   --cometchat-radius-2: 8px;
 }
+/* Component-scoped — only the conversations list */
+.cometchat .cometchat-conversations {
+  --cometchat-primary-color: #FF6C63;
+}
 ```
+**Precedence ladder** (highest wins): runtime `element.style.setProperty(...)` →
+component-scoped `.cometchat .cometchat-<component> { --var }` → global
+`.cometchat { --var }` → the kit's `css-variables.css` defaults.
 ### Dark mode
 Two broad strategies — pick based on how the project already handles dark mode.
@@ -61,7 +75,7 @@ Two broad strategies — pick based on how the project already handles dark mode
 ```css
 @media (prefers-color-scheme: dark) {
-  :root {
+  .cometchat {
     --cometchat-primary-color: #7B73FF;
     --cometchat-background-color-01: #1A1A2E;
     --cometchat-text-color-primary: #E0E0E0;
@@ -70,25 +84,25 @@ Two broad strategies — pick based on how the project already handles dark mode
 }
 ```
-**Strategy B — App-controlled theme toggle.** If the project already has a theme toggle (next-themes, Tailwind `dark:` prefix, React Context, etc.), wire CometChat's dark mode to the same trigger. The shared trigger is typically a CSS class or `data-theme` attribute on `<html>` or `<body>`. Scope the override to that selector:
+**Strategy B — App-controlled theme toggle.** If the project already has a theme toggle (next-themes, Tailwind `dark:` prefix, React Context, etc.), wire CometChat's dark mode to the same trigger. The trigger is typically a class or `data-theme` attribute on an ancestor (`<html>`/`<body>`/the `.cometchat-root` wrapper). Scope the override to **`.cometchat` under that ancestor** — NOT `:root` (a bare `:root` can never be a *descendant* of `.dark`/`[data-theme]`, so `.dark :root { }` matches nothing):
 ```css
 /* next-themes default: applies a `.dark` class to <html> */
-.dark :root {
+.dark .cometchat {
   --cometchat-primary-color: #7B73FF;
   --cometchat-background-color-01: #1A1A2E;
   --cometchat-text-color-primary: #E0E0E0;
 }
-/* OR if the project uses data-theme="dark" on <html> (common with Tailwind CSS v4) */
-[data-theme="dark"] :root {
+/* OR data-theme="dark" on the wrapper (the kit's own convention + Tailwind v4) */
+.cometchat-root[data-theme="dark"] .cometchat {
   --cometchat-primary-color: #7B73FF;
   --cometchat-background-color-01: #1A1A2E;
   --cometchat-text-color-primary: #E0E0E0;
 }
 /* OR for Tailwind's `class` strategy with `darkMode: 'class'` in tailwind.config */
-html.dark {
+html.dark .cometchat {
   --cometchat-primary-color: #7B73FF;
   --cometchat-background-color-01: #1A1A2E;
   --cometchat-text-color-primary: #E0E0E0;
@@ -175,11 +189,13 @@ Target file is determined by `framework` in `.cometchat/config.json`:
 | Framework | Target file |
 |---|---|
-| `reactjs` | `src/index.css` (append `:root { ... }` block after the existing import) |
+| `reactjs` | `src/index.css` (append a `.cometchat { ... }` block after the existing import) |
 | `nextjs` | `src/app/globals.css` (App Router) or `styles/globals.css` (Pages Router) |
 | `react-router` | `app/app.css` (or `src/index.css` if you used a Vite-style structure) |
 | `astro` | Inline `<style>` tag or imported CSS **inside** `src/cometchat/ChatApp.tsx` (see section 1 for why) |
+Scope the block to `.cometchat` (global) or `.cometchat .cometchat-<component>` (component-specific) — see §1's precedence ladder.
 The override block must be written **after** the existing
 `@cometchat/chat-uikit-react/css-variables.css` import so it takes
 precedence. If the project imports the CometChat CSS in a TSX file
@@ -205,9 +221,9 @@ Otherwise ask the user (preserve the structured shape — `question`/`header`/`m
 ### Step 2 — Build the override block
 **Path A — Preset:** Look up the preset in section 5's table. Emit a
-`:root { ... }` block with those five variables. If the preset's
+`.cometchat { ... }` block with those five variables. If the preset's
 `Dark mode included` column is "yes" (currently just `discord`),
-also emit a `@media (prefers-color-scheme: dark) { :root { ... } }`
+also emit a `@media (prefers-color-scheme: dark) { .cometchat { ... } }`
 block with sensible dark variants (invert background to dark, text to
 light, keep primary).
@@ -215,7 +231,7 @@ light, keep primary).
 `#853953`). Emit at minimum:
 ```css
-:root {
+.cometchat {
   --cometchat-primary-color: #853953;
 }
 ```
@@ -235,12 +251,12 @@ earlier theming pass; replace that block rather than duplicating.
 ### Step 4 — Write / update the override block
-Use `Edit` to insert or replace the `:root` block. Keep it grouped and
+Use `Edit` to insert or replace the `.cometchat` block. Keep it grouped and
 commented so the user can see where their theme lives:
 ```css
 /* CometChat theme override — edit these to change the chat UI */
-:root {
+.cometchat {
   --cometchat-primary-color: #853953;
   --cometchat-font-family: "Inter", sans-serif;
 }
@@ -294,6 +310,19 @@ worth knowing:
 | `--cometchat-radius-2` | Medium radius (bubbles, buttons) |
 | `--cometchat-radius-3` | Larger radius (panels) |
+### Color palette scales (the real brand-swap surface)
+`--cometchat-primary-color` is the headline accent, but the docs' canonical
+brand-override surface is two **numbered scales** (50 → 900, light + dark hex
+each) — set these to re-skin the kit, not just the single primary token:
+| Scale | What it drives |
+|---|---|
+| `--cometchat-neutral-color-50` … `-900` | Greys: surfaces, borders, dividers, disabled. **`--cometchat-neutral-color-300`** is the incoming message-bubble body (default `#E8E8E8`). |
+| `--cometchat-extended-primary-color-50` … `-900` | Tints/shades of the brand color the kit derives for hovers, badges, selected states. Set these alongside `--cometchat-primary-color` for a complete brand swap. |
+Plus the semantic status tokens: `--cometchat-error-color`, `--cometchat-info-color`, `--cometchat-success-color`, `--cometchat-warning-color`, and `--cometchat-message-seen-color`. (Docs: ui-kit/react/theme/color-resources.)
 For the full 200+ list, query the docs MCP (see below) or read
 `node_modules/@cometchat/chat-uikit-react/dist/styles/css-variables/css-variables.css`.
@@ -319,6 +348,140 @@ The CometChat docs MCP at `cometchat-docs` is the canonical source for:
 **Canonical reference URL:**
 https://www.cometchat.com/docs/ui-kit/react/theme
+## 10. Copy-ready UI recipes (ENG-35714)
+A short catalog of worked examples for the most-asked customizations. Pasted into `cometchat-overrides.css` (or the framework-specific override file from §6), these compile against any kit ≥ v5 without further tweaking.
+### Recipe 1 — Brand color + system font (most common)
+```css
+.cometchat {
+  /* Brand primary — replaces "CometChat purple" everywhere it shows up */
+  --cometchat-primary-color: #2563EB;   /* tailwind blue-600 */
+  --cometchat-primary-button-background: var(--cometchat-primary-color);
+  --cometchat-primary-button-text: #FFFFFF;   /* NOT -primary-button-text-color */
+  /* System font stack — matches your app's typography */
+  --cometchat-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+```
+### Recipe 2 — Force dark mode (regardless of OS)
+```css
+/* App-controlled: you set data-theme="dark" on the .cometchat-root wrapper.
+   The canonical scope is `.cometchat-root[data-theme="dark"] .cometchat` —
+   NOT a bare `:root`/`[data-theme="dark"]` (a bare :root in the selector list
+   would force dark UNCONDITIONALLY, ignoring the toggle). */
+.cometchat-root[data-theme="dark"] .cometchat {
+  --cometchat-background-color-01: #0F172A;   /* page background */
+  --cometchat-background-color-02: #1E293B;   /* card / surface */
+  --cometchat-background-color-03: #334155;   /* hover */
+  --cometchat-text-color-primary: #F1F5F9;
+  --cometchat-text-color-secondary: #94A3B8;
+  --cometchat-border-color-default: #1E293B;
+  --cometchat-primary-color: #60A5FA;          /* lighter primary for dark bg */
+  color-scheme: dark;
+}
+```
+For OS-driven auto theme (the default per ENG-35715), wrap the same variables in `@media (prefers-color-scheme: dark) { .cometchat { … } }` instead of the `data-theme` selector. The variables-only approach beats class-toggling because it works everywhere the kit renders without an explicit theme prop.
+### Recipe 3 — Custom message bubble color (outgoing/incoming)
+**Preferred technique (per docs): override the CSS *variable* inside the bubble
+`__body` selector** — not raw `background`/`color`. The kit's bubble reads
+`--cometchat-neutral-color-300` (incoming) and the primary color (outgoing); setting
+those inside the scoped selector keeps the rest of the bubble's styling intact.
+```css
+/* Outgoing bubble (your messages) — override the variable the body reads */
+.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body {
+  --cometchat-primary-color: #2563EB;
+}
+/* Incoming bubble (their messages) — neutral-300 is the incoming body token */
+.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body {
+  --cometchat-neutral-color-300: #E8E8E8;
+}
+```
+**Per-message-TYPE overrides.** Beyond direction, the kit body carries a
+per-type class so you can style one message type only. Chain it onto the body:
+```css
+/* Style only TEXT bubbles outgoing */
+.cometchat .cometchat-message-bubble-outgoing
+  .cometchat-message-bubble__body.cometchat-message-bubble__text-message {
+  border-radius: 16px 16px 4px 16px;
+}
+```
+> ⚠️ **Use the kit's ACTUAL class names — some are misspelled in the kit's own CSS** (verified against `cometchat-uikit-react-v6/src/styles/`). Real per-type classes: `__text-message`, `__audio-message`, `__file-message`, `__document-message`, `__delete-message`, `__sticker-message`, **`__pol-message`** (poll — note the missing `l`), and **`__whiteboad-message`** (note the missing `r`; a correctly-spelled `__whiteboard-message` also exists). The non-directional `.cometchat-action-bubble` styles call/group action bubbles. Direction classes are `.cometchat-message-bubble-outgoing` / `-incoming` (NOT BEM `--sender`/`--receiver`). Class names are NOT version-stable — re-verify in DevTools (and against `src/styles/`) when the kit bumps; the CSS variables (Recipe 1) ARE stable.
+### Recipe 4 — Rounded corners + borderless header
+```css
+.cometchat {
+  --cometchat-radius-1: 8px;
+  --cometchat-radius-2: 12px;
+  --cometchat-radius-max: 999px;   /* fully circular avatars */
+}
+.cometchat .cometchat-message-header,
+.cometchat .cometchat-conversations-header {
+  border-bottom: none;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);   /* subtle shadow instead of a line */
+}
+```
+### Recipe 5 — Tighter conversation list (denser layout)
+```css
+/* The kit's conversation rows are .cometchat-list-item inside .cometchat-conversations
+   (there is NO .cometchat-conversations-list-item selector). Re-verify nested
+   classes in DevTools — they aren't version-stable. */
+.cometchat-conversations .cometchat-list-item {
+  padding-block: 8px;          /* default is 12px */
+}
+.cometchat-conversations .cometchat-list-item .cometchat-avatar {
+  width: 36px;                  /* default is 40-48px */
+  height: 36px;
+}
+```
+> ⚠️ **v6 has NO React theme-provider / theme object.** Earlier kits exposed `CometChatThemeProvider` + a `CometChatTheme` `{ palette, typography }` object — **neither exists in v6** (they're v4/v5 residue; importing them won't compile). v6 theming is **exclusively CSS variables** (Recipes 1–5) + the `[data-theme="dark"]` attribute. To drive theme from your design tokens, write your tokens INTO the `--cometchat-*` CSS variables. Read-only helpers `getThemeMode()` / `isDarkMode()` exist for branching logic, but there is no provider/theme-object API.
+> **Where to find more recipes:** the upstream sample at https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app has a `theme.tsx` with the full reference palette. For per-`*Style` field enumeration (a per-version exhaustive list), the kit's TypeScript `.d.ts` files in `node_modules/@cometchat/chat-uikit-react/dist/types/` are authoritative — open them when a recipe doesn't cover what you need.
+### Recipe 6 — Custom notification & call sounds (Sound Manager)
+Sounds are **not CSS** — they're driven by the Sound Manager, a helper class with static methods. The UI Kit plays the built-in cues automatically; use this to **override** a cue with your own audio, or to **mute** by passing a silent/empty track. (Docs: ui-kit/react/sound-manager.)
+> **Access it as `CometChatUIKit.SoundManager`.** The class `CometChatSoundManager` is **NOT** a package-root export in v6 — `import { CometChatSoundManager } from "@cometchat/chat-uikit-react"` fails with `TS2459: ... declares 'CometChatSoundManager' locally, but it is not exported`. It is exposed as the static `CometChatUIKit.SoundManager` (verified `CometChatUIKit.ts:53`). And `play()` takes a **string literal** — `play("incomingCall")` — NOT `play(SoundManager.Sound.incomingCall)` (the `Sound` map's values are typed optional, so passing one fails `TS2345`; the kit's own JSDoc uses the string form). Verified against kit 6.5.1 in a live build (Journey-7 runtime test, 2026-06-14).
+```ts
+import { CometChatUIKit } from "@cometchat/chat-uikit-react";
+const SoundManager = CometChatUIKit.SoundManager;
+// Play a cue — pass the STRING LITERAL: "incomingCall" | "outgoingCall"
+//   | "incomingMessage" | "incomingMessageFromOther" | "outgoingMessage"
+SoundManager.play("incomingCall");
+// Override a cue with your own audio (2nd arg = custom URL/asset path)
+SoundManager.play("incomingMessage", "/sounds/ping.mp3");
+// Per-event helpers exist too (each takes an optional custom-sound URL):
+SoundManager.onIncomingCall("/sounds/ring.mp3");
+SoundManager.onOutgoingMessage();
+// Stop whatever is playing (resets playback position)
+SoundManager.pause();
+```
+> Browser autoplay policies block audio until the user has interacted with the page — `SoundManager.hasInteracted()` returns whether that's happened, so gate any manual `play()` on it. To **mute** the kit's own cues, the cleaner path is the component-level config (e.g. `CometChatMessageList`/conversation sound props) rather than monkey-patching the manager.
 ## Hard rules
 - **Do NOT call `cometchat apply-theme`.** It's a v2 CLI command that

package/skills/cometchat-troubleshooting/SKILL.md CHANGED Viewed

@@ -1,15 +1,16 @@
 ---
 name: cometchat-troubleshooting
-description: Diagnose and fix problems with a CometChat integration. Runs verify checks, detects drift, queries the docs MCP for symptom-to-cause lookups, and proposes targeted fixes. Works on any state — broken, missing, or drifted integrations.
+description: Diagnose and fix problems with a CometChat integration. Runs verify checks, detects drift, looks up symptom-to-cause via the docs (docs MCP when available, public docs site otherwise), and proposes targeted fixes. Works on any state — broken, missing, or drifted integrations.
 license: "MIT"
 compatibility: "Node.js >=18; @cometchat/chat-uikit-react ^6"
-allowed-tools: "shell, file-read, file-search, file-list, grep"
 metadata:
   author: "CometChat"
   version: "3.0.0"
   tags: "cometchat troubleshooting fix diagnose verify drift errors doctor"
 ---
+> **Ground truth:** observed runtime failures + the per-platform UI Kit + SDK error dictionaries. (Official docs linked below.) Verify symbols against the installed package/source before relying on them.
 > **Companion skills:** `cometchat-core` is the authoritative source for
 > correct init, login, and provider patterns; `cometchat-customization`
 > explains why drift after customization is expected;
@@ -41,28 +42,39 @@ The user has a problem with their CometChat integration. Trigger phrases:
 - "css-variables not loading"
 - "the chat doesn't show messages"
-## 2. Docs MCP contract
+## 2. Docs lookup contract
-The CometChat docs MCP at `cometchat-docs` is a **hard requirement** for
-this skill. `cometchat doctor` handles the local diagnostic checks
-(integration state, drift, env vars, AST verify rules), but for any
-symptom that doesn't match a doctor known-issue code, the MCP is the
-canonical source for symptom → cause → fix.
+`cometchat doctor` handles the local diagnostic checks (integration
+state, drift, env vars, AST verify rules). For any symptom that doesn't
+match a doctor known-issue code, the CometChat docs are the canonical
+source for symptom → cause → fix. The docs MCP at `cometchat-docs` is the
+**best** way to query them when it's available, but it is **not** a hard
+requirement — it's one of three lookup paths, ordered by preference.
 **Hard rules:**
 1. **Always run `cometchat doctor` first** — its known-issues table
    covers the common failure modes (env-placeholder, env-missing, drift,
    init-before-login, no-auth-key-in-source).
-2. **For symptoms NOT in doctor's table**, query the docs MCP with the
-   exact error message or symptom keywords. Never guess at the cause.
-3. **If the docs MCP is not installed**, STOP. Tell the user: "Doctor
-   didn't recognize this symptom and I need the CometChat docs MCP to
-   diagnose further. Install it with `claude mcp add --transport http
-   cometchat-docs https://www.cometchat.com/docs/mcp` and re-run."
-4. **Never blame the user's code** if doctor + MCP both pass — the issue
+2. **For symptoms NOT in doctor's table**, look up the exact error
+   message or symptom keywords against the docs. Never guess at the
+   cause. Use whichever lookup path is available, in this order:
+   - **(a) docs MCP** — if a `cometchat-docs` MCP tool is available in
+     your agent, query it. This is the richest path.
+   - **(b) install the MCP, if your agent supports it** — Claude Code can
+     add it with `claude mcp add --transport http cometchat-docs
+     https://www.cometchat.com/docs/mcp`. Other agents (Cursor, Codex,
+     Cline, etc.) configure MCP servers their own way, or may not support
+     HTTP MCP at all — do NOT block on this. It's an optional upgrade.
+   - **(c) fetch/search the public docs directly** — the same content is
+     at <https://www.cometchat.com/docs>. Fetch the relevant
+     troubleshooting page, or web-search `site:cometchat.com/docs
+     "<symptom>"`. Every agent can do this; it is the universal fallback.
+   Never STOP and dead-end the user just because the MCP isn't installed —
+   fall through to (c).
+3. **Never blame the user's code** if doctor + docs both pass — the issue
    is probably infrastructure (network, dashboard config, auth provider).
-5. **Canonical reference URL:**
+4. **Canonical reference URL:**
    https://www.cometchat.com/docs/ui-kit/react/troubleshooting
 ---
@@ -207,20 +219,28 @@ Many issues are framework-specific. Check against these common patterns:
 | Vite / CRA | CSS variables not taking effect | Override block appears BEFORE the `@import` of css-variables.css | Reorder: the `@import` must come first, overrides must follow. |
 | Any | 401 Unauthorized | Wrong or expired auth key in `.env` | Check `.env` for `YOUR_AUTH_KEY_HERE`. Replace with real value from app.cometchat.com → API & Auth Keys. |
 | Any | `CometChat is not initialized` | Component renders before `init()` resolves | Use the provider pattern from `cometchat-core` section 6, or add an `isReady` gate before rendering CometChat components. |
+| Any (custom attachment) | `TypeError: Cannot read properties of undefined (reading 'messageToReplyRef')` when opening the composer attachment menu | Called `getDataSource().getAttachmentOptions(composerId)` with **one argument**. The Polls / Collaborative-Doc / Collaborative-Whiteboard extension decorators read `messageToReplyRef` off the (required) **second** arg without optional chaining, so it crashes when that extension is enabled. | Pass a defined second arg: `getAttachmentOptions(composerId, { messageToReplyRef: { current: null } })`. See `cometchat-features` §Type-5. (Kit-side fix in flight; until released, always pass the 2nd arg.) |
+| Any (custom message type) | Custom message bubble renders when sent but **disappears after reload** | Your custom `messagesRequestBuilder` doesn't fetch the custom category/type from history (the kit's default builder would, but yours replaced it). | Extend the defaults: append your `custom` category to `getAllMessageCategories()` and your type to `getAllMessageTypes()`, then pass that `MessagesRequestBuilder` to `CometChatMessageList`. See `cometchat-features` §Type-5. |
 | Any (React 19) | `Cannot update a component (ForwardRef) while rendering a different component` | Known React 19 warning from CometChat UI Kit internals (`closePopover` calls setState during render). **Not a bug in your code.** | Ignore — this is a cosmetic warning from inside the UI Kit's minified bundle. The UI works correctly. Will be fixed in a future UI Kit release. Do NOT try to patch this in user code. |
-### Step 5 — Symptom-driven lookup via the docs MCP
+### Step 5 — Symptom-driven docs lookup
 If the user has reported a specific symptom that isn't covered by verify
-checks or the framework table, query the CometChat docs MCP:
+checks or the framework table, look it up against the CometChat docs via
+the best path available to your agent (§2 path a → b → c):
 ```
+# If a cometchat-docs MCP tool is available:
 Use the cometchat-docs MCP to search for "<symptom keywords>"
+# Otherwise (any agent), fetch/search the public docs:
+Fetch https://www.cometchat.com/docs and search for "<symptom keywords>",
+or web-search: site:cometchat.com/docs "<symptom keywords>"
 ```
 Common symptom searches:
-| Symptom | MCP search query |
+| Symptom | Search query |
 |---|---|
 | Blank screen at /chat | "blank screen ssr nextjs" or "blank screen react-router" |
 | 401 Unauthorized | "401 unauthorized authentication" |
@@ -230,7 +250,7 @@ Common symptom searches:
 | Mixed user/group error | "user group same component" |
 | Theme not applying | "theming css variables override" |
-The docs MCP returns the canonical fix. Apply it as a targeted patch.
+The docs return the canonical fix. Apply it as a targeted patch.
 ### Step 6 — Propose the fix