Next

[amitsingh-007]

Check if the Pull Request fulfils these requirements

• Does the extension require a version change?

Greptile Summary

This PR centralizes all dependency versions into a pnpm workspace catalog (pnpm-workspace.yaml), updates the UI component library with refreshed Tailwind class ordering, new functionality (button press animation, tooltip keyboard shortcut support, exportable ScrollBar component), and reorganizes repository tooling files (renaming CLAUDE.md → AGENTS.md, relocating the SKILL.md directory).

Key changes:

• Catalog migration: All package versions in every package.json are now managed centrally via catalog: references with catalogMode: strict, making future dependency updates a single-file change
• UI components: Tailwind utility classes are reordered for consistency (likely an output of shadcn regeneration); several components receive functional additions (e.g. active:translate-y-px on buttons, kbd slot styling in tooltips)
• "use client" cleanup: Several components had the directive removed (safe where primitives handle the client boundary internally), but sonner.tsx still calls useTheme() — a React hook — without "use client", which will cause a runtime error in Next.js App Router server context
• ScrollArea refactor: ScrollBar is now a separately exported component, and viewportRef handling is simplified by removing the useImperativeHandle indirection

Confidence Score: 3/5

• The PR is mostly safe but has one confirmed runtime issue in sonner.tsx that should be fixed before merging.
• The catalog migration and Tailwind class reordering are low-risk mechanical changes. However, sonner.tsx removes "use client" while still invoking useTheme() — a React hook — which will throw in Next.js App Router server contexts. This mirrors the already-flagged field.tsx issue and needs the same fix.
• packages/ui/src/components/ui/sonner.tsx — missing "use client" directive while using useTheme() hook

Comments Outside Diff (2)

1. packages/ui/src/components/ui/sonner.tsx, line 1-7 (link)

   Missing "use client" directive with React hook usage

   "use client" was removed, but the Toaster component directly calls useTheme() on line 7. In Next.js App Router, any component that uses React hooks must be a Client Component. Without this directive, if <Toaster /> is rendered in a Server Component (e.g., in a root layout that lacks its own "use client" boundary), Next.js will throw a runtime error:

   Error: useState/useContext cannot be called from a Server Component.

   Since useTheme is context-based, the component must remain a Client Component. The "use client" directive should be restored:

   Prompt To Fix With AI

   This is a comment left during a code review.
   Path: packages/ui/src/components/ui/sonner.tsx
   Line: 1-7
   
   Comment:
   **Missing `"use client"` directive with React hook usage**
   
   `"use client"` was removed, but the `Toaster` component directly calls `useTheme()` on line 7. In Next.js App Router, any component that uses React hooks must be a Client Component. Without this directive, if `<Toaster />` is rendered in a Server Component (e.g., in a root layout that lacks its own `"use client"` boundary), Next.js will throw a runtime error:
   
   > *Error: useState/useContext cannot be called from a Server Component.*
   
   Since `useTheme` is context-based, the component must remain a Client Component. The `"use client"` directive should be restored:
   
   
   
   How can I resolve this? If you propose a fix, please make it concise.

2. packages/ui/src/components/ui/sonner.tsx, line 7 (link)

   Missing "use client" directive with useTheme hook

   "use client" was removed from this file, but useTheme (a React hook from next-themes) is still called on this line. React hooks are only valid in Client Components. If Toaster is imported in a Next.js App Router Server Component context, it will throw a runtime error.

   The "use client" directive should be restored at the top of the file:

   Add "use client" back above this import:

   "use client"
   
   import { useTheme } from "next-themes"
   

   Prompt To Fix With AI

   This is a comment left during a code review.
   Path: packages/ui/src/components/ui/sonner.tsx
   Line: 7
   
   Comment:
   **Missing `"use client"` directive with `useTheme` hook**
   
   `"use client"` was removed from this file, but `useTheme` (a React hook from `next-themes`) is still called on this line. React hooks are only valid in Client Components. If `Toaster` is imported in a Next.js App Router Server Component context, it will throw a runtime error.
   
   The `"use client"` directive should be restored at the top of the file:
   
   
   
   Add `"use client"` back above this import:
   ```
   "use client"
   
   import { useTheme } from "next-themes"
   ```
   
   How can I resolve this? If you propose a fix, please make it concise.

Prompt To Fix All With AI

This is a comment left during a code review.
Path: packages/ui/src/components/ui/sonner.tsx
Line: 7

Comment:
**Missing `"use client"` directive with `useTheme` hook**

`"use client"` was removed from this file, but `useTheme` (a React hook from `next-themes`) is still called on this line. React hooks are only valid in Client Components. If `Toaster` is imported in a Next.js App Router Server Component context, it will throw a runtime error.

The `"use client"` directive should be restored at the top of the file:

```suggestion
import { useTheme } from "next-themes"
```

Add `"use client"` back above this import:
```
"use client"

import { useTheme } from "next-themes"
```

How can I resolve this? If you propose a fix, please make it concise.

_{Last reviewed commit: "Update packages/ui/s..."}

[webext-bot]

Extension version is updated from 24.3.0 to 24.4.0

[gemini-code-assist]

Warning

Gemini is experiencing higher than usual traffic and was unable to create the review. Please try again in a few hours by commenting /gemini review.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR centralizes dependency versioning by switching many package.json entries to pnpm catalog specifiers and adding a strict catalog in pnpm-workspace.yaml. The extension package version is bumped to 24.4.0. Documentation and guidance files were updated/renamed (including AGENTS.md and a refocused SKILL.md). The VS Code workspace file was removed and a local TypeScript SDK setting added. A new npm script update:shadcn was introduced. Numerous UI components had Tailwind class reorderings and a few "use client" directives added or removed. scroll-area.tsx was refactored (prop-type/export changes and new ScrollBar export). Renovate and CI build task wiring were adjusted.

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The pull request title 'Next' is too vague and does not clearly summarize the main changes in the changeset.	Consider using a more descriptive title that captures the primary changes, such as 'Consolidate dependencies into pnpm catalog and refactor UI components' or similar.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description is comprehensive and addresses the required section. The author confirmed version change requirement and provided detailed context via Greptile summary.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch next

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

♻️ Duplicate comments (1)

packages/ui/src/components/ui/scroll-area.tsx (1)

44-47: ⚠️ Potential issue | 🟠 Major

Scroll bar orientation selectors won't match the emitted data-orientation attribute.

Base UI's ScrollAreaPrimitive.Scrollbar emits data-orientation="horizontal" or data-orientation="vertical", but the selectors data-horizontal: and data-vertical: expect attributes named data-horizontal and data-vertical (which don't exist). The orientation-specific styles won't be applied.

Use arbitrary data attribute selectors instead:

Proposed fix

-        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        "flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent",

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/ui/src/components/ui/scroll-area.tsx` around lines 44 - 47, The
orientation-specific Tailwind selectors in the Scrollbar's className (used in
the ScrollAreaPrimitive.Scrollbar wrapper) use non-existent attributes
`data-horizontal:` and `data-vertical:`, so the styles never apply; replace
those with arbitrary attribute selectors that match the emitted attribute, e.g.
`[data-orientation="horizontal"]:...` and `[data-orientation="vertical"]:...`
(update the className passed to the component where `cn(...)` is built to use
those `[data-orientation="..."]` selectors instead of
`data-horizontal:`/`data-vertical:`).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@packages/ui/src/components/ui/scroll-area.tsx`:
- Around line 44-47: The orientation-specific Tailwind selectors in the
Scrollbar's className (used in the ScrollAreaPrimitive.Scrollbar wrapper) use
non-existent attributes `data-horizontal:` and `data-vertical:`, so the styles
never apply; replace those with arbitrary attribute selectors that match the
emitted attribute, e.g. `[data-orientation="horizontal"]:...` and
`[data-orientation="vertical"]:...` (update the className passed to the
component where `cn(...)` is built to use those `[data-orientation="..."]`
selectors instead of `data-horizontal:`/`data-vertical:`).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9c74dc8c-ab6a-4af0-9458-e9d5316844e7

📥 Commits

Reviewing files that changed from the base of the PR and between bb82665 and 8d07047.

📒 Files selected for processing (1)

• packages/ui/src/components/ui/scroll-area.tsx