@rfdtech/components 2.0.0 → 2.1.0

package/dist/mcp/generated/rules.json

@@ -454,7 +454,16 @@
       "components": [
         "sidebar"
       ],
-      "body": "The old default layout shell renders `<SidebarTrigger>Menu</SidebarTrigger>` to manually toggle\nthe sidebar. The new shell drops it entirely — don't render `SidebarTrigger` in new or touched\nlayouts. Use `SidebarProvider` with its defaults and no manual collapse control."
+      "body": "The old default layout shell renders `<SidebarTrigger>Menu</SidebarTrigger>` to manually toggle the\nsidebar. The new shell drops it entirely — don't render `SidebarTrigger` in new or touched\nlayouts. Use `SidebarProvider` with its defaults and no manual collapse control."
+    },
+    {
+      "id": "page-composition-sidebar-overlay-optional",
+      "title": "SidebarOverlay is rendered internally by Sidebar on mobile — explicit usage is optional",
+      "severity": "do",
+      "components": [
+        "sidebar"
+      ],
+      "body": "`Sidebar` now renders the mobile overlay (the full-viewport close-on-click backdrop) as a sibling\nof the `<aside>` whenever the viewport is below the sidebar's mobile breakpoint. The old default\nlayout shell required you to drop `<SidebarOverlay />` into `<AppSidebar>` — forgetting it left\nthe drawer with no backdrop. Drop the explicit `<SidebarOverlay />` in new/touched layouts; it\nremains exported for backward compatibility and is harmless if duplicated (two stacked overlays\nboth close the drawer on click, no visual artifact)."
     },
     {
       "id": "page-composition-sidebar-badge-numeric",
@@ -467,13 +476,13 @@
     },
     {
       "id": "page-composition-branding-in-app-header",
-      "title": "Branding lives in AppHeader via AppHeaderBranding, never in the sidebar",
+      "title": "Branding lives in AppHeader via AppHeaderBranding; pass a matching mobileHeader to the plain Sidebar for the mobile drawer",
       "severity": "do",
       "components": [
         "app-header",
         "sidebar"
       ],
-      "body": "Put branding in `AppHeader` via `AppHeaderBranding` (`logo`/`title`/`subtitle`), never in the\nsidebar. `Sidebar` has no `SidebarHeader`/`SidebarBrand` when `AppHeaderBranding` is used — the\nsame logo must not appear twice on screen. Use the current brand logo (`clet-logo.png`) for any\nnew system — `gsl-logo.png` is the older mark used only by the legacy default layout shell."
+      "body": "Put branding in `AppHeader` via `AppHeaderBranding` (`logo`/`title`/`subtitle`). On desktop, the\nplain `Sidebar` has no `SidebarHeader`/`SidebarBrand` — the same logo must not appear twice on\nscreen. On mobile, the `AppHeader` collapses to just the hamburger and the sidebar becomes a\nfull-overlay drawer — pass the same brand content as a `mobileHeader` prop on the plain `Sidebar`\n(typically a `SidebarBrand` with the same logo/title as the `AppHeaderBranding`). The library\nwraps it in a `SidebarHeader` with the built-in `clet-sidebar__header--mobile-only` class, hidden\non desktop. `AppLayout` does NOT auto-extract the `AppHeaderBranding` — the two brand blocks are\nintentionally separate, since they live in different visual contexts with different styling.\nUse the current brand logo (`clet-logo.png`) for any new system — `gsl-logo.png` is the older\nmark used only by the legacy default layout shell."
     },
     {
       "id": "page-composition-profile-popover-default-items",
@@ -521,7 +530,7 @@
       "components": [
         "table"
       ],
-      "body": "New or touched `Table`s use all three together: `TableContent variant=\"panel\"` (not `\"default\"`),\n`TableFilter variant=\"spread\"` (not the default `\"popover\"`), and `TableFooter\nclassName=\"clet-table__footer--no-border\"` (a real library class, not a demo hack)."
+      "body": "New or touched `Table`s use all three together: `TableContent variant=\"panel\"` (not `\"default\"`),\n`TableFilter variant=\"spread\"` (not the default `\"popover\"`), and `TableFooter noBorder` (a real\n`TableFooterProps` prop, not a demo hack)."
     },
     {
       "id": "page-composition-other-preferred-variants",

package/dist/mcp/generated/search.json

@@ -238,6 +238,14 @@
     "headings": [
       "Changelog",
       "[Unreleased]",
+      "[2.1.0] - 2026-07-25",
+      "Added",
+      "Changed",
+      "Fixed",
+      "[2.0.2] - 2026-07-23",
+      "Changed",
+      "Fixed",
+      "[2.0.1] - 2026-07-16",
       "Added",
       "Breaking",
       "Deprecated",
@@ -452,6 +460,31 @@
       "Notes"
     ]
   },
+  {
+    "slug": "dashboard-patterns",
+    "name": "Dashboard patterns",
+    "category": "Guide",
+    "keywords": [
+      "dashboard",
+      "page composition",
+      "page section",
+      "quick actions",
+      "tabs",
+      "timeline",
+      "stepper",
+      "multi-step"
+    ],
+    "description": "Composing a dashboard with PageSection, QuickActions, Tabs, Timeline, and Stepper",
+    "headings": [
+      "Dashboard patterns",
+      "Section layout with PageSection",
+      "Quick actions",
+      "Tabbed content with pill tabs",
+      "Audit trail with Timeline",
+      "Multi-step form with Stepper",
+      "Checklist"
+    ]
+  },
   {
     "slug": "date-range-selector",
     "name": "DateRangeSelector",
@@ -764,7 +797,7 @@
       "product switcher",
       "grid menu"
     ],
-    "description": "Constrained 9-app launcher with a built-in expand button + required role switcher",
+    "description": "Constrained 9-app launcher with a top-right expand button + a See more line under the grid + required role switcher",
     "headings": [
       "Launchpad",
       "Examples",
@@ -826,7 +859,13 @@
       "stacked layout",
       "CountrySelector",
       "Combobox",
-      "NetworkOperator"
+      "NetworkOperator",
+      "gsl-to-clet",
+      "cletTheme",
+      "gslTheme",
+      "rename",
+      "TableFooter",
+      "noBorder"
     ],
     "description": "Agent instructions for upgrading to v2 and the new design system",
     "headings": [
@@ -839,12 +878,15 @@
       "6. Prefer `Launchpad` over deprecated `AppSwitcher`",
       "7. `CountrySelector` → `Combobox` or `PhoneNumberInput`'s country picker",
       "8. `NetworkOperator` → `Combobox`",
+      "9. Naming rename: `.gsl-*` → `.clet-*`, `gslTheme()` → `cletTheme()`",
       "Adopting the new design system",
       "Layout shell: `AppLayout variant=\"stacked\"` + `AppHeader variant=\"plain\"` + `Sidebar variant=\"plain\"`",
       "Use built-in `loading` states — never hand-roll placeholders",
       "One role switcher, consistent across all three locations",
       "Table family — adopt together",
       "Other preferred variants",
+      "PageSection — consistent section spacing",
+      "QuickActions — dashboard action grids",
       "Checklist"
     ]
   },
@@ -970,6 +1012,27 @@
       "Notes"
     ]
   },
+  {
+    "slug": "page-section",
+    "name": "PageSection",
+    "category": "Components",
+    "keywords": [
+      "page section",
+      "section",
+      "spacing",
+      "layout",
+      "vertical gap"
+    ],
+    "description": "Uniform vertical spacing wrapper for page sections",
+    "headings": [
+      "PageSection",
+      "Example",
+      "Props",
+      "Types",
+      "`PageSectionClassNames`",
+      "Notes"
+    ]
+  },
   {
     "slug": "phone-number-input",
     "name": "PhoneNumberInput",
@@ -1105,6 +1168,28 @@
       "Notes"
     ]
   },
+  {
+    "slug": "quick-actions",
+    "name": "QuickActions",
+    "category": "Components",
+    "keywords": [
+      "quick actions",
+      "action grid",
+      "shortcuts",
+      "customize",
+      "dashboard actions"
+    ],
+    "description": "Quick action grid with optional customize dialog",
+    "headings": [
+      "QuickActions",
+      "Example",
+      "Props",
+      "Types",
+      "`QuickActionItem`",
+      "`QuickActionsClassNames`",
+      "Notes"
+    ]
+  },
   {
     "slug": "radio-group",
     "name": "RadioGroup",
@@ -1529,6 +1614,7 @@
       "Types",
       "`TimelineItemClassNames`",
       "Notes",
+      "Don't",
       "Tokens"
     ]
   },

package/dist/mcp/generated/tokens.json

@@ -8,7 +8,7 @@
   "--clet-border": {
     "group": "color",
     "scope": "global",
-    "light": "#dadce0",
+    "light": "#dadce073",
     "dark": "#3c4043"
   },
   "--clet-border-strong": {
@@ -241,7 +241,7 @@
   "--clet-z-header": {
     "group": "zIndex",
     "scope": "global",
-    "base": "10"
+    "base": "2"
   },
   "--clet-z-modal": {
     "group": "zIndex",
@@ -567,7 +567,7 @@
     "group": "font",
     "scope": "component",
     "component": "metric-card",
-    "base": "var(--gsl-font-header, var(--clet-font-header))"
+    "base": "var(\n    --gsl-font-header,\n    var(--clet-font-header)\n  )"
   },
   "--clet-metric-card-value-size": {
     "group": "length",
@@ -813,7 +813,7 @@
     "group": "color",
     "scope": "component",
     "component": "sidebar",
-    "base": "var(--gsl-text-secondary, var(--clet-text-secondary))"
+    "base": "var(\n\t\t--gsl-text-secondary,\n\t\tvar(--clet-text-secondary)\n\t)"
   },
   "--clet-sidebar-bg": {
     "group": "color",
@@ -845,6 +845,12 @@
     "component": "sidebar",
     "base": "0px"
   },
+  "--clet-sidebar-z": {
+    "group": "misc",
+    "scope": "component",
+    "component": "sidebar",
+    "base": "10000"
+  },
   "--clet-stepper-accent": {
     "group": "color",
     "scope": "component",

package/dist/mcp/installers/codex.js

@@ -2,6 +2,7 @@ import { existsSync } from "node:fs";
 import { mkdir, readFile, writeFile } from "node:fs/promises";
 import os from "node:os";
 import path from "node:path";
+import { MCP_SERVER_COMMAND } from "./util.js";
 const CODEX_DIR = path.join(os.homedir(), ".codex");
 const CONFIG_PATH = path.join(CODEX_DIR, "config.toml");
 const MARKER = "[mcp_servers.rfdtech-ui]";
@@ -18,7 +19,7 @@ export async function install() {
     if (existing.includes(MARKER)) {
         return { name: "Codex", changed: false, detail: "~/.codex/config.toml (already set)" };
     }
-    const block = `\n${MARKER}\ncommand = "npx"\nargs = ["-y", "@rfdtech/components-mcp"]\n`;
+    const block = `\n${MARKER}\ncommand = ${JSON.stringify(MCP_SERVER_COMMAND.command)}\nargs = ${JSON.stringify(MCP_SERVER_COMMAND.args)}\n`;
     await writeFile(CONFIG_PATH, existing.replace(/\s*$/, "") + "\n" + block, "utf8");
     return { name: "Codex", changed: true, detail: "~/.codex/config.toml (updated)" };
 }

package/dist/mcp/installers/opencode.js

@@ -1,7 +1,7 @@
 import { existsSync } from "node:fs";
 import os from "node:os";
 import path from "node:path";
-import { appendPointerOnce, readJsonIfExists, writeJson } from "./util.js";
+import { MCP_SERVER_COMMAND, appendPointerOnce, readJsonIfExists, writeJson, } from "./util.js";
 export function detect(cwd) {
     return (existsSync(path.join(cwd, "opencode.json")) ||
         existsSync(path.join(os.homedir(), ".config", "opencode")));
@@ -17,7 +17,11 @@ export async function install(cwd) {
     if (isNewFile)
         data.$schema ??= "https://opencode.ai/config.json";
     const mcp = { ...data.mcp };
-    const desired = { type: "local", command: ["npx", "-y", "@rfdtech/components-mcp"], enabled: true };
+    const desired = {
+        type: "local",
+        command: [MCP_SERVER_COMMAND.command, ...MCP_SERVER_COMMAND.args],
+        enabled: true,
+    };
     const already = JSON.stringify(mcp["rfdtech-ui"]) === JSON.stringify(desired);
     mcp["rfdtech-ui"] = desired;
     data.mcp = mcp;

package/dist/mcp/installers/setup.js

@@ -25,7 +25,7 @@ export async function runSetup(cwd = process.cwd()) {
     if (results.length === 0) {
         console.log("No supported AI tool detected (looked for .claude/, .mcp.json, .cursor/, ~/.codex/, " +
             "opencode.json, ~/.config/opencode).\n" +
-            "The MCP server is still available directly: `npx @rfdtech/components-mcp` or `rfdui mcp`.");
+            "The MCP server is still available directly: `npx components-mcp` or `rfdui mcp`.");
         return;
     }
     for (const r of results) {

package/dist/mcp/installers/util.js

@@ -1,6 +1,7 @@
 import { existsSync } from "node:fs";
 import { mkdir, readFile, writeFile } from "node:fs/promises";
 import path from "node:path";
+import { fileURLToPath } from "node:url";
 export async function readJsonIfExists(filePath) {
     if (!existsSync(filePath))
         return null;
@@ -15,9 +16,21 @@ export async function writeJson(filePath, data) {
     await mkdir(path.dirname(filePath), { recursive: true });
     await writeFile(filePath, `${JSON.stringify(data, null, 2)}\n`, "utf8");
 }
+/** Absolute path to this package's own compiled server entry (dist/mcp/index.js,
+ * one level up from dist/mcp/installers/). Resolved from where THIS module is
+ * actually loaded from, so it's correct no matter how the host project's package
+ * manager lays out node_modules.
+ *
+ * `npx -y components-mcp` used to be used here, on the theory that npx would
+ * resolve the already-installed local bin. That's false in non-hoisted/strict
+ * node_modules layouts (e.g. a pnpm workspace where nothing at the repo root
+ * directly depends on @rfdtech/components) — npx finds no local bin and silently
+ * installs an unrelated same-named package from the npm registry instead. A
+ * direct `node <absolute path>` has no such ambiguity. */
+const SERVER_ENTRY_PATH = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..", "index.js");
 /** The MCP server identity every installer wires up, consistently named across tools. */
 export const MCP_SERVER_NAME = "rfdtech-ui";
-export const MCP_SERVER_COMMAND = { command: "npx", args: ["-y", "@rfdtech/components-mcp"] };
+export const MCP_SERVER_COMMAND = { command: "node", args: [SERVER_ENTRY_PATH] };
 /** Merge `{ mcpServers: { "rfdtech-ui": {...} } }` into an existing config object without touching anything else. */
 export function mergeMcpServers(existing) {
     const data = existing && typeof existing === "object" ? { ...existing } : {};