add: changelogs page in docs

CHANGELOG.md

@@ -4,23 +4,17 @@
 
 ### Minor Changes
 
-- d2c5395: migration from querySelector to refs for rovingfoucs, tree and slider
+- d2c5395: migration from querySelector to refs for roving focus, tree and slider
 
 ### Patch Changes
 
 - 4db8aa7: ui revamp for multiple comps
 
-## 0.2.2
-
-### Patch Changes
-
-- 83cf51c: Update GitHub Actions workflows to Node 24 and newer GitHub action versions for release, test, lint, coverage, and Chromatic jobs.
-
 ## 0.2.1
 
 ### Patch Changes
 
-- 9a28add: Align AlertDialog styling with theme tokens, and clean up Storybook examples and local dev startup behavior.
+- 9a28add: Align AlertDialog styling with theme tokens.
 
 ## 0.2.0
 
@@ -36,7 +30,6 @@
 - 38503b6: mergeRefs added
 - b968b4a: export types for all comps
 - a42620d: Fix select and combobox popup behavior by improving portal rendering, restoring macOS-style reopen anchoring for `Select`, and tightening related UI polish in the sandbox and shared component styles.
-- 3e892dd: Refactored internal data attribute utilities from hook-style factories to plain functions and updated shared component usage.
 
 ## 0.1.10
 
@@ -57,122 +50,34 @@
 
 - d22ef40: resize, size and varaint api support added for textarea
 
-## 0.1.7
-
-### Patch Changes
-
-- 75152f8: Fix GitHub workflows to use correct build script instead of silent failure
-
 ## 0.1.6
 
 ### Patch Changes
 
 - 4363ff3: Added Separator for dropdown , context and menubar menus
 - 336fe3f: MenuPrimitive root now supports rtl, loop, avoidCollision,placement and the item supports disabled, asChild , onSelect. Tests for the same have been added too.
-- bcad222: ## Fix: Missing Components in NPM Bundle
-
-  **Versions 0.1.0 - 0.1.5** had incomplete component bundles due to build failures.
-
-  **Root Cause**: Due to updates we've made to build processes to build components for npm, we might have broken the process due to list on package.json not being in sync, we totally missed testing a couple of versions.
-
-  **Fix**: Increased Node.js heap size to 8GB and added export validation to prevent silent build failures.
-
-  **New Features**: Added `--check` flag for export validation, ESM/CommonJS support, and root export support.
+- bcad222: Fix incomplete npm bundles for some 0.1.x releases; raise Node heap for builds, add export validation and a `--check` flag, with ESM/CJS and root export support.
 
 ## 0.1.5
 
 ### Patch Changes
 
 - f77dc1b: Sub-components, now throw subtle warnings instead of console logs
 
-## 0.1.4
-
-### Patch Changes
-
-- 6b514f8: fix formatting of announcement - test workflow
-- 6b514f8: Patch workflow indentation issue
-
-## 0.1.3
-
-### Patch Changes
-
-- cb1205d: Patch workflow indentation issue
-- 2d19c42: Testing Discord Release Workflow
-
-## 0.1.2
-
-### Patch Changes
-
-- e394a8d: testing changeset workflow automation - part 2
-
-## 0.1.1
-
-### Patch Changes
-
-- 759dcc6: Test patch to check workflows
-
 ## 0.1.0
 
 ### Minor Changes
 
-- b471ddb: This release adds tests around the codebase, improves API support across multiple components, introduces new features like Steps + Minimap and roving focus in CheckboxGroups, while cleaning up builds, docs, and accessibility.
-
-  ### ✨ Features
-
-  - Added **roving focus support for CheckboxGroup**.
-  - Improved **RadioGroup behavior and accessibility**.
-  - Enhanced **Select component behavior**.
-  - Introduced **Steps + Minimap basic implementation**.
-  - Refactored multiple components to support **`forwardRef`**:
-    - Avatar, Badge, BlockQuote, Card, Code, Collapsible, ContextMenu, DataList, RadioGroup, Splitter, Table, Tabs, ToggleGroup, VisuallyHidden.
-
-  ### 🧪 Tests & Accessibility
-
-  - Expanded **a11y test coverage**: axe-core, Accordion, Slider, RadioGroup, AlertDialog, Dialog, Primitive `asChild`, and SSR hydration scenarios.
-  - Added **portal test utilities** for Dialog/AlertDialog.
-  - Stabilized and silenced noisy test warnings.
-  - Enforced **global test coverage thresholds**.
-  - Parallelized Jest test runs with **sharding** for faster feedback.
-
-  ### 🛠 Fixes & Refactors
-
-  - Fixed `SelectPrimitiveItemProps` export typing.
-  - Refined **NavigationMenu typing**.
-  - Increased **Rollup build memory limit** and excluded Storybook files from builds.
-  - Silenced “Primitive `asChild`” warnings in tests.
-
-  ### 📚 Docs & Chores
-
-  - Added **CodeRabbit sponsor hero** to docs.
-  - Added **Changeset workflow** for release management.
-  - Improved **WCAG tree navigation support**.
-  - Minor styling fixes and dark mode improvements.
-  - Updated Toggle API: `onChange` → `onPressedChange`.
-
-  ## BREAKING CHANGES
-
-  ### Toggle Component API Rename
-
-  The Toggle component's `onChange` prop has been renamed to `onPressedChange` to better reflect its semantic meaning and align with accessibility standards.
-
-  **Migration Required:**
-
-  ```tsx
-  // Before
-  <Toggle onChange={(pressed) => { /* handle toggle */ }} />
-
-  // After
-  <Toggle onPressedChange={(pressed) => { /* handle toggle */ }} />
-  ```
+- b471ddb: Tests, API improvements across components, Steps + Minimap, roving focus for CheckboxGroup, RadioGroup and Select updates, `forwardRef` on many primitives, a11y and build fixes.
 
-  **TypeScript Updates:**
+### BREAKING CHANGES
 
-  - Update any TypeScript interfaces or type definitions that reference `onChange` to use `onPressedChange`
-  - The prop signature remains the same: `(pressed: boolean) => void`
-  - Update any custom Toggle wrapper components or higher-order components that pass through the `onChange` prop
+**Toggle:** `onChange` was renamed to `onPressedChange`.
 
-  **Impact:**
+```tsx
+// Before
+<Toggle onChange={(pressed) => { /* handle toggle */ }} />
 
-  - This change affects all consumers using the Toggle component
-  - Update your codebase to use the new `onPressedChange` prop name
-  - No functional changes to the component behavior - only the prop name has changed
+// After
+<Toggle onPressedChange={(pressed) => { /* handle toggle */ }} />
+```

agents/security/fix-vulnerabilities.md

@@ -0,0 +1,25 @@
+You are working in this repo’s local clone. Goal: one integration branch that brings all dependency and security-related updates together so we can merge confidently.
+
+Scope
+
+Link to all open PRs - <https://github.com/rad-ui/ui/pulls>
+
+Treat open PRs from Dependabot, Snyk, Renovate, and similar automated dependency/security bots as the source of truth for what to bump (versions, packages, and which workspaces: root vs subfolders with their own package.json).
+Apply equivalent changes on a single new branch off the appropriate base (usually main), instead of merging many small PRs one by one—unless I say otherwise.
+Requirements
+
+Inventory: Summarize which packages/workspaces those bot PRs target and the version bumps they propose (group by root vs subproject).
+
+Implement: Update package.json (and lockfiles) consistently so dependency trees are up to date and aligned with those bumps; resolve conflicts and avoid partial upgrades that leave inconsistent peers.
+
+Verify: Run the project’s install, build, lint, and test commands (whatever this repo documents in package.json scripts / CI) until they pass for all relevant workspaces.
+
+Safety: Run npm audit / pnpm audit / yarn npm audit (whichever the repo uses) and address high/critical issues where reasonable; note anything that needs a breaking major or cannot be fixed without product decisions.
+Deliverable: Short summary of what changed, remaining risks, and suggested PR title/description. Do not change unrelated code or docs unless required for the upgrade.
+Constraints
+
+Prefer minimal, focused diffs; no drive-by refactors.
+If gh or network access to GitHub fails, infer from package.json + lockfiles + audit and still produce a coherent upgrade plan.
+Start only when I say “go” (or equivalent).
+
+Once all the relevant changes are done, provide a summary telling the user which PRs can be closed, which are pending, and which were not addressed, including relevant details and any blockers.

docs/app/docs/docsNavigationSections.tsx

@@ -14,6 +14,10 @@ export const docsNavigationSections = [
             {
                 title:"Usage",
                 path:"/docs/first-steps/usage"
+            },
+            {
+                title:"Changelog",
+                path:"/docs/first-steps/changelog"
             }
         ]
     },

docs/app/docs/first-steps/changelog/ChangelogMarkdown.tsx

@@ -0,0 +1,191 @@
+import {
+    cloneElement,
+    isValidElement,
+    type ReactElement,
+    type ReactNode,
+} from "react";
+import clsx from "clsx";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+import { highlightChangelogCode } from "./highlightChangelogCode";
+
+type ChangelogMarkdownProps = {
+    markdown: string;
+};
+
+const COMMIT_PREFIX = /^([a-f0-9]{7}):\s*/i;
+
+function headingPlainText(children: ReactNode): string {
+    if (children == null) return "";
+    if (typeof children === "string" || typeof children === "number") {
+        return String(children);
+    }
+    if (Array.isArray(children)) {
+        return children.map(headingPlainText).join("");
+    }
+    if (isValidElement(children)) {
+        const el = children as ReactElement<{ children?: ReactNode }>;
+        return headingPlainText(el.props.children);
+    }
+    return "";
+}
+
+function sectionHeadingStyles(label: string): string {
+    const l = label.toLowerCase();
+    /** Tinted bar + near-black text for contrast on pale backgrounds */
+    if (l.includes("breaking")) {
+        return "border-red-600 bg-red-100/90 text-gray-950";
+    }
+    if (l.includes("minor")) {
+        return "border-red-500 bg-red-100/90 text-gray-950";
+    }
+    if (l.includes("patch")) {
+        return "border-blue-600 bg-blue-100/90 text-gray-950";
+    }
+    return "border-gray-400 bg-gray-100 text-gray-950";
+}
+
+/**
+ * Turns the leading `abc1234: ` on a list line into a monospace pill; works when
+ * remark splits inline marks (e.g. `hash: **Bold**:`) across several nodes.
+ */
+function peelLeadingCommitHash(node: ReactNode): ReactNode {
+    if (typeof node === "string") {
+        const m = node.match(COMMIT_PREFIX);
+        if (m) {
+            const rest = node.slice(m[0].length);
+            return (
+                <>
+                    <span
+                        className="mr-2 inline-flex shrink-0 select-none items-center rounded-md border border-gray-600 bg-gray-200 px-2 py-0.5 font-mono text-xs font-semibold uppercase tracking-wide text-gray-950"
+                        title="Git commit"
+                    >
+                        {m[1]}
+                    </span>
+                    {rest}
+                </>
+            );
+        }
+        return node;
+    }
+    if (Array.isArray(node)) {
+        if (node.length === 0) return node;
+        const [first, ...rest] = node;
+        return (
+            <>
+                {peelLeadingCommitHash(first)}
+                {rest}
+            </>
+        );
+    }
+    if (isValidElement(node)) {
+        const el = node as ReactElement<{ children?: ReactNode }>;
+        if (el.props.children != null) {
+            return cloneElement(el, {
+                ...el.props,
+                children: peelLeadingCommitHash(el.props.children),
+            });
+        }
+    }
+    return node;
+}
+
+/**
+ * Renders a single release section from CHANGELOG.md (GFM: lists, nested headings, fenced code).
+ */
+export function ChangelogMarkdown({ markdown }: ChangelogMarkdownProps) {
+    return (
+        <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            components={{
+                h1: ({ children }) => (
+                    <h3 className="mb-3 mt-6 text-lg font-semibold text-gray-950 first:mt-0">
+                        {children}
+                    </h3>
+                ),
+                h2: ({ children }) => (
+                    <h4 className="mb-2 mt-5 text-base font-semibold text-gray-950">
+                        {children}
+                    </h4>
+                ),
+                h3: ({ children }) => {
+                    const label = headingPlainText(children);
+                    const bar = sectionHeadingStyles(label);
+                    return (
+                        <h5
+                            className={`mb-3 mt-6 flex flex-wrap items-center gap-2 border-l-4 py-1.5 pl-3 text-sm font-semibold first:mt-0 ${bar}`}
+                        >
+                            {children}
+                        </h5>
+                    );
+                },
+                p: ({ children }) => (
+                    <p className="mb-3 text-sm leading-relaxed text-gray-950">{children}</p>
+                ),
+                ul: ({ children }) => (
+                    <ul className="mb-4 list-disc space-y-3 pl-5 text-sm text-gray-950 marker:text-gray-700">
+                        {children}
+                    </ul>
+                ),
+                ol: ({ children }) => (
+                    <ol className="mb-4 list-decimal space-y-3 pl-5 text-sm text-gray-950 marker:text-gray-700">
+                        {children}
+                    </ol>
+                ),
+                li: ({ children }) => (
+                    <li className="leading-relaxed text-gray-950 marker:font-normal">
+                        {peelLeadingCommitHash(children)}
+                    </li>
+                ),
+                pre: ({ children }) => (
+                    <pre className="docs-syntax-pre mb-4 overflow-x-auto rounded-lg border">
+                        {children}
+                    </pre>
+                ),
+                code: ({ className, children, ...props }) => {
+                    const isBlock = Boolean(className?.includes("language-"));
+                    if (isBlock) {
+                        const lang =
+                            className?.match(/language-([\w-]+)/)?.[1] ?? "tsx";
+                        const source = String(children ?? "");
+                        return (
+                            <code
+                                className={clsx(
+                                    "docs-code-block block whitespace-pre font-mono text-xs",
+                                    className,
+                                )}
+                                {...props}
+                            >
+                                {highlightChangelogCode(source, lang)}
+                            </code>
+                        );
+                    }
+                    return (
+                        <code
+                            className="rounded bg-gray-200 px-1.5 py-0.5 font-mono text-[0.88em] text-gray-950"
+                            {...props}
+                        >
+                            {children}
+                        </code>
+                    );
+                },
+                a: ({ href, children }) => (
+                    <a
+                        className="font-medium text-blue-900 underline decoration-blue-900/40 underline-offset-2 hover:text-blue-950 hover:decoration-blue-950"
+                        href={href}
+                        rel="noreferrer"
+                        target={href?.startsWith("http") ? "_blank" : undefined}
+                    >
+                        {children}
+                    </a>
+                ),
+                strong: ({ children }) => (
+                    <strong className="font-semibold text-gray-950">{children}</strong>
+                ),
+            }}
+        >
+            {markdown}
+        </ReactMarkdown>
+    );
+}