@rfdtech/components 2.0.1 → 2.1.0

package/dist/mcp/generated/examples.json

@@ -205,6 +205,15 @@
       ],
       "source": "import { Combobox } from \"@rfdtech/components\";\nimport { Star } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst options = [\n  { value: \"1\", label: \"Option 1\", icon: <Star size={16} /> },\n  { value: \"2\", label: \"Option 2\", icon: <Star size={16} /> },\n  { value: \"3\", label: \"Option 3\", icon: <Star size={16} /> },\n];\n\nexport function ComboboxIconsExample() {\n  const [value, setValue] = useState<string[]>([\"1\", \"2\"]);\n\n  return (\n    <Combobox\n      aria-label=\"Select options\"\n      placeholder=\"Select\"\n      options={options}\n      value={value}\n      onValueChange={setValue}\n      multiple\n    />\n  );\n}\n"
     },
+    {
+      "file": "combobox-long.example.tsx",
+      "importName": "comboboxLongSource",
+      "title": "Combobox Long",
+      "components": [
+        "Combobox"
+      ],
+      "source": "import { Combobox } from \"@rfdtech/components\";\nimport { useState } from \"react\";\n\nconst options = Array.from({ length: 20 }, (_, i) => ({\n  value: String(i + 1),\n  label: `Option ${i + 1}`,\n}));\n\nexport function ComboboxLongExample() {\n  const [value, setValue] = useState<string | null>(null);\n\n  return (\n    <Combobox\n      aria-label=\"Select\"\n      placeholder=\"Select\"\n      options={options}\n      value={value}\n      onValueChange={setValue}\n      clearable\n    />\n  );\n}\n"
+    },
     {
       "file": "combobox-multi.example.tsx",
       "importName": "comboboxMultiSource",
@@ -269,6 +278,7 @@
       "source": "import { CountrySelector } from \"@rfdtech/components\";\n\nexport function CountrySelectorExample() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16, maxWidth: 300 }}>\n      <CountrySelector />\n      <CountrySelector invalid />\n      <CountrySelector disabled />\n    </div>\n  );\n}\n"
     }
   ],
+  "dashboard-patterns": [],
   "date-range-selector": [
     {
       "file": "date-range-filter.example.tsx",
@@ -536,7 +546,7 @@
       "components": [
         "MetricCard"
       ],
-      "source": "import { MetricCard } from \"@rfdtech/components\";\n\nexport function MetricCardExample() {\n  return (\n    <div\n      style={{\n        background: \"var(--clet-surface-subtle)\",\n        padding: 20,\n        borderRadius: \"var(--clet-radius-xl)\",\n        width: \"100%\",\n      }}\n    >\n      <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 16 }}>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            label=\"Revenue\"\n            value=\"$128.4k\"\n            description=\"Total revenue this quarter\"\n            trend=\"up\"\n            trendValue=\"+12.5%\"\n            animate\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            label=\"Active users\"\n            value=\"2,847\"\n            description=\"Current active users\"\n            trend=\"down\"\n            trendValue=\"-3.2%\"\n            animate\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            label=\"Avg response\"\n            value=\"1.2s\"\n            description=\"Average API response time\"\n            animate\n          />\n        </div>\n      </div>\n\n      <div\n        style={{ display: \"flex\", flexWrap: \"wrap\", gap: 16, marginTop: 16 }}\n      >\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"outline\"\n            label=\"Revenue\"\n            value=\"$128.4k\"\n            description=\"Total revenue this quarter\"\n            trend=\"up\"\n            trendValue=\"12.5%\"\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"outline\"\n            label=\"Active users\"\n            value=\"2,847\"\n            description=\"Current active users\"\n            trend=\"down\"\n            trendValue=\"3.2%\"\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"outline\"\n            label=\"Avg response\"\n            value=\"1.2s\"\n            description=\"Average API response time\"\n            trend=\"neutral\"\n            trendValue=\"0.0%\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"
+      "source": "import { MetricCard } from \"@rfdtech/components\";\n\nexport function MetricCardExample() {\n  return (\n    <div\n      style={{\n        background: \"var(--clet-surface-subtle)\",\n        padding: 20,\n        borderRadius: \"var(--clet-radius-xl)\",\n        width: \"100%\",\n      }}\n    >\n      <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 16 }}>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            label=\"Revenue\"\n            value=\"$128.4k\"\n            description=\"Total revenue this quarter\"\n            trend=\"up\"\n            trendValue=\"+12.5%\"\n            animate\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            label=\"Active users\"\n            value=\"2,847\"\n            description=\"Current active users\"\n            trend=\"down\"\n            trendValue=\"-3.2%\"\n            animate\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            label=\"Avg response\"\n            value=\"1.2s\"\n            description=\"Average API response time\"\n            animate\n          />\n        </div>\n      </div>\n\n      <div\n        style={{ display: \"flex\", flexWrap: \"wrap\", gap: 16, marginTop: 16 }}\n      >\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"outline\"\n            label=\"Revenue\"\n            value=\"$128.4k\"\n            description=\"Total revenue this quarter\"\n            trend=\"up\"\n            trendValue=\"12.5%\"\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"outline\"\n            label=\"Active users\"\n            value=\"2,847\"\n            description=\"Current active users\"\n            trend=\"down\"\n            trendValue=\"3.2%\"\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"outline\"\n            label=\"Avg response\"\n            value=\"1.2s\"\n            description=\"Average API response time\"\n            trend=\"neutral\"\n            trendValue=\"0.0%\"\n          />\n        </div>\n      </div>\n\n      <div\n        style={{ display: \"flex\", flexWrap: \"wrap\", gap: 16, marginTop: 16 }}\n      >\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"bordered\"\n            label=\"Revenue\"\n            value=\"$128.4k\"\n            description=\"Total revenue this quarter\"\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"bordered\"\n            label=\"Active users\"\n            value=\"2,847\"\n            description=\"Current active users\"\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"bordered\"\n            label=\"Avg response\"\n            value=\"1.2s\"\n            description=\"Average API response time\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"
     }
   ],
   "migration-v2": [],
@@ -619,6 +629,21 @@
       "source": "import { useState } from \"react\";\nimport {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  OtpInput,\n} from \"@rfdtech/components\";\n\n// Mock \"correct\" code — stands in for a real server-side verification call.\nconst MOCK_VALID_CODE = \"123456\";\n\ntype VerifyStatus = \"idle\" | \"verifying\" | \"error\" | \"success\";\n\nexport function OtpVerifyDialogExample() {\n  const [open, setOpen] = useState(false);\n  const [code, setCode] = useState(\"\");\n  const [status, setStatus] = useState<VerifyStatus>(\"idle\");\n\n  const reset = () => {\n    setCode(\"\");\n    setStatus(\"idle\");\n  };\n\n  const verify = (value: string) => {\n    if (value.length < 6 || status === \"verifying\") return;\n    setStatus(\"verifying\");\n    // Simulate an async verification request.\n    setTimeout(() => {\n      if (value === MOCK_VALID_CODE) {\n        setStatus(\"success\");\n        setTimeout(() => {\n          setOpen(false);\n          reset();\n        }, 900);\n      } else {\n        setStatus(\"error\");\n      }\n    }, 1200);\n  };\n\n  return (\n    <>\n      <Button\n        variant=\"secondary\"\n        onClick={() => {\n          reset();\n          setOpen(true);\n        }}\n      >\n        Verify identity\n      </Button>\n\n      <Dialog\n        open={open}\n        onOpenChange={(next) => {\n          setOpen(next);\n          if (!next) reset();\n        }}\n      >\n        <DialogPortal>\n          <DialogOverlay />\n          <DialogContent showCloseButton>\n            <DialogTitle>Two-factor verification</DialogTitle>\n            <DialogDescription>\n              Enter the 6-digit code sent to your registered device to confirm\n              this action. (Hint: the mock code is <code>123456</code>.)\n            </DialogDescription>\n\n            <div style={{ display: \"grid\", gap: 8 }}>\n              <OtpInput\n                length={6}\n                value={code}\n                disabled={status === \"verifying\" || status === \"success\"}\n                invalid={status === \"error\"}\n                onChange={(value) => {\n                  setCode(value);\n                  if (status === \"error\") setStatus(\"idle\");\n                }}\n                onComplete={(value) => verify(value)}\n              />\n              {status === \"error\" && (\n                <p style={{ margin: 0, fontSize: 13, color: \"var(--clet-error-text)\" }}>\n                  Incorrect code. Please try again.\n                </p>\n              )}\n              {status === \"success\" && (\n                <p style={{ margin: 0, fontSize: 13, color: \"var(--clet-success)\" }}>\n                  Verified successfully.\n                </p>\n              )}\n            </div>\n\n            <div style={{ display: \"flex\", justifyContent: \"flex-end\", gap: 8 }}>\n              <Button\n                variant=\"ghost\"\n                onClick={() => setOpen(false)}\n                disabled={status === \"verifying\"}\n              >\n                Cancel\n              </Button>\n              <Button\n                onClick={() => verify(code)}\n                disabled={code.length < 6 || status === \"verifying\" || status === \"success\"}\n                loading={status === \"verifying\"}\n                loadingLabel=\"Verifying...\"\n              >\n                Verify\n              </Button>\n            </div>\n          </DialogContent>\n        </DialogPortal>\n      </Dialog>\n    </>\n  );\n}\n"
     }
   ],
+  "page-section": [
+    {
+      "file": "page-section.example.tsx",
+      "importName": "pageSectionSource",
+      "title": "Page Section",
+      "components": [
+        "Card",
+        "PageSection",
+        "SectionDescription",
+        "SectionHeader",
+        "SectionTitle"
+      ],
+      "source": "import {\n  PageSection,\n  SectionHeader,\n  SectionTitle,\n  SectionDescription,\n  Card,\n} from \"@rfdtech/components\";\n\nexport function PageSectionExample() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 0, width: \"100%\" }}>\n      <PageSection>\n        <SectionHeader>\n          <SectionTitle>Dashboard</SectionTitle>\n          <SectionDescription>\n            Sections are separated by consistent vertical gap.\n          </SectionDescription>\n        </SectionHeader>\n      </PageSection>\n\n      <PageSection>\n        <div\n          style={{\n            height: 80,\n            borderRadius: \"var(--clet-radius-xl)\",\n            border: \"1px dashed var(--clet-border)\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            fontSize: 14,\n            color: \"var(--clet-text-secondary)\",\n          }}\n        >\n          Metric cards or stats grid\n        </div>\n      </PageSection>\n\n      <PageSection>\n        <Card bordered>\n          <div\n            style={{\n              height: 120,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              fontSize: 14,\n              color: \"var(--clet-text-secondary)\",\n            }}\n          >\n            Table or content area\n          </div>\n        </Card>\n      </PageSection>\n    </div>\n  );\n}\n"
+    }
+  ],
   "phone-number-input": [
     {
       "file": "phone-number-input-field.example.tsx",
@@ -763,6 +788,17 @@
       "source": "import { ProgressBar } from \"@rfdtech/components\";\n\nexport function ProgressBarExample() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\", width: \"100%\" }}>\n      <ProgressBar value={60} label=\"Upload progress\" showValue />\n      <ProgressBar value={100} variant=\"success\" showValue />\n      <ProgressBar value={45} variant=\"warning\" />\n      <ProgressBar value={20} variant=\"error\" size=\"md\" />\n      <ProgressBar indeterminate label=\"Loading\" size=\"md\" />\n    </div>\n  );\n}\n"
     }
   ],
+  "quick-actions": [
+    {
+      "file": "quick-actions.example.tsx",
+      "importName": "quickActionsSource",
+      "title": "Quick Actions",
+      "components": [
+        "QuickActions"
+      ],
+      "source": "import { useMemo, useState } from \"react\";\nimport { QuickActions } from \"@rfdtech/components\";\nimport { UserPlus, Download, BarChart3, Shield, History, FileText } from \"lucide-react\";\n\nconst allActions = [\n  { id: \"add\", label: \"Add Member\", icon: <UserPlus size={18} strokeWidth={1.5} />, description: \"Create a new member account\" },\n  { id: \"export\", label: \"Export Data\", icon: <Download size={18} strokeWidth={1.5} />, description: \"Download member records\" },\n  { id: \"reports\", label: \"View Reports\", icon: <BarChart3 size={18} strokeWidth={1.5} />, description: \"Access analytics and reports\" },\n  { id: \"roles\", label: \"Manage Roles\", icon: <Shield size={18} strokeWidth={1.5} />, description: \"Configure role permissions\" },\n  { id: \"audit\", label: \"Audit Log\", icon: <History size={18} strokeWidth={1.5} />, description: \"Review system audit trail\" },\n  { id: \"docs\", label: \"Documents\", icon: <FileText size={18} strokeWidth={1.5} />, description: \"Browse and manage documents\" },\n];\n\nexport function QuickActionsExample() {\n  const [hiddenIds, setHiddenIds] = useState<Set<string>>(new Set());\n  const visibleActions = useMemo(\n    () => allActions.filter((a) => !hiddenIds.has(a.id)),\n    [hiddenIds],\n  );\n\n  return (\n    <div style={{ width: \"100%\", maxWidth: 640 }}>\n      <QuickActions\n        actions={visibleActions}\n        customizable\n        hiddenIds={hiddenIds}\n        onToggleVisibility={(id) => {\n          setHiddenIds((prev) => {\n            const next = new Set(prev);\n            if (next.has(id)) {\n              next.delete(id);\n            } else {\n              next.add(id);\n            }\n            return next;\n          });\n        }}\n      />\n    </div>\n  );\n}\n"
+    }
+  ],
   "radio-group": [
     {
       "file": "radio-decision-form.example.tsx",

package/dist/mcp/generated/index.meta.json

@@ -1,5 +1,5 @@
 {
-  "builtAt": 1784205382095,
+  "builtAt": 1785019240756,
   "builtFrom": {
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/app-header.mdx": 1784199965193.8657,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/app-layout.mdx": 1784199965194.078,
@@ -8,14 +8,15 @@
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/breadcrumb.mdx": 1784199965194.5928,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/bulk-import-modal.mdx": 1784199965194.803,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/button.mdx": 1784199965195.0093,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/card.mdx": 1784199965195.441,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/changelog.mdx": 1784204823076.601,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/card.mdx": 1785019071703.3171,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/changelog.mdx": 1785019071704.073,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/checkbox.mdx": 1784199965196.152,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/combobox.mdx": 1784199965196.2634,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/combobox.mdx": 1785019071704.7,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/command.mdx": 1784199965196.4404,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/country-selector.mdx": 1784199965196.5872,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/dashboard-patterns.mdx": 1785019071704.85,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/date-range-selector.mdx": 1784199965196.9058,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/date-selector.mdx": 1784199965197.09,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/date-selector.mdx": 1785019071705.0527,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/dialog.mdx": 1784199965197.2744,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/draggable.mdx": 1784199965197.4387,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/dropdown.mdx": 1784199965197.6196,
@@ -24,31 +25,33 @@
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/form.mdx": 1784199965198.42,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/getting-started.mdx": 1784199965198.9243,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/hooks.mdx": 1784199965199.1636,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/launchpad.mdx": 1784199965199.2974,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/metric-card.mdx": 1784199965199.533,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/migration-v2.mdx": 1784204823077.3882,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/launchpad.mdx": 1785019071705.438,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/metric-card.mdx": 1785019071705.6873,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/migration-v2.mdx": 1785019071706.234,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/modal.mdx": 1784199965200.2097,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/network-operator.mdx": 1784199965200.3953,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/notice.mdx": 1784199965200.5305,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/otp-input.mdx": 1784199965200.7048,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/page-section.mdx": 1785019071706.379,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/phone-number-input.mdx": 1784199965201.1082,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/popover.mdx": 1784199965201.311,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/popup.mdx": 1784199965201.437,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/profile-popover.mdx": 1784199965201.56,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/progress-bar.mdx": 1784199965201.9417,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/quick-actions.mdx": 1785019071706.604,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/radio-group.mdx": 1784199965202.1543,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/role-select.mdx": 1784199965202.2588,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/router-adapter.mdx": 1784199965202.4397,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/section-header.mdx": 1784199965202.5999,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/sheet.mdx": 1784199965202.903,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/sidebar.mdx": 1784199965203.122,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/sidebar.mdx": 1785019071707.4155,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/sortable.mdx": 1784199965203.272,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/stepper.mdx": 1784199965203.429,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/switch.mdx": 1784199965203.5317,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/table.mdx": 1784204823078.114,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/tabs.mdx": 1784199965204.29,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/theme.mdx": 1784199965204.5007,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/timeline.mdx": 1784199965204.6672,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/timeline.mdx": 1785019071707.8389,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/toast.mdx": 1784199965204.8867,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/tooltip.mdx": 1784199965205.0623,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/pages/upload-field.mdx": 1784199965205.2515,
@@ -66,6 +69,7 @@
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/card.example.tsx": 1784199965212.3513,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/checkbox.example.tsx": 1783244991360.1206,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/combobox-icons.example.tsx": 1784199965212.4543,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/combobox-long.example.tsx": 1785019071708.3032,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/combobox-multi.example.tsx": 1784199965212.5752,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/combobox-single.example.tsx": 1784199965212.704,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/command-dialog.example.tsx": 1784199965213.1472,
@@ -88,13 +92,14 @@
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/launchpad-loading.example.tsx": 1784199965214.7434,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/launchpad.example.tsx": 1784199965214.8447,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/metric-card-loading.example.tsx": 1784199965214.9316,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/metric-card.example.tsx": 1784199965215.0703,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/metric-card.example.tsx": 1785019071708.7175,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/modal.example.tsx": 1784199965215.2239,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/network-operator.example.tsx": 1783244991361.4246,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/notice-inline.example.tsx": 1784199965215.3171,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/notice-variants.example.tsx": 1784199965215.415,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/otp-input.example.tsx": 1784199965215.5525,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/otp-verify-dialog.example.tsx": 1784199965215.6523,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/page-section.example.tsx": 1785019071708.8628,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/phone-number-input-field.example.tsx": 1784199965215.7544,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/phone-number-input-form.example.tsx": 1783244991361.5684,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/phone-number-input.example.tsx": 1784199965216.0054,
@@ -105,6 +110,7 @@
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/profile-popover-user-trigger.example.tsx": 1784199965216.6316,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/profile-popover.example.tsx": 1784199965216.8098,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/progress-bar.example.tsx": 1783244991362.397,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/quick-actions.example.tsx": 1785019071708.9573,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/radio-decision-form.example.tsx": 1784199965216.9246,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/radio-group-card.example.tsx": 1783244991362.4917,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/previews/examples/radio-group.example.tsx": 1783244991362.5757,
@@ -142,13 +148,13 @@
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/breadcrumb.ts": 1783244991399.8157,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/bulk-import-modal.ts": 1783245210848.7712,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/button.ts": 1783244991400.0476,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/card.ts": 1783244991400.1252,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/card.ts": 1785019071727.2466,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/checkbox.ts": 1783244991400.2012,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/combobox.ts": 1784199965282.772,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/combobox.ts": 1785019071727.5586,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/command.ts": 1783244991400.279,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/country-selector.ts": 1784199965283.0857,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/date-range-selector.ts": 1784199965283.3066,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/date-selector.ts": 1783244991400.5344,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/date-selector.ts": 1785019071727.9043,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/dialog.ts": 1783244991400.6208,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/draggable.ts": 1783244991400.708,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/dropdown.ts": 1784199965283.4802,
@@ -156,24 +162,26 @@
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/field.ts": 1783244991400.8787,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/form.ts": 1783244991400.9707,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/input.ts": 1783244991401.0735,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/launchpad.ts": 1784199965283.6892,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/metric-card.ts": 1784199965283.8164,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/launchpad.ts": 1785019071728.0752,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/metric-card.ts": 1785019071728.2725,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/modal.ts": 1783245210848.887,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/network-operator.ts": 1784199965283.9434,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/notice.ts": 1784199965284.03,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/otp-input.ts": 1783244991401.7898,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/page-section.ts": 1785019071728.3667,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/phone-number-input.ts": 1783244991402.2458,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/popover.ts": 1783244991402.3584,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/popup.ts": 1784199965284.1135,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/profile-popover.ts": 1784199965284.22,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/progress-bar.ts": 1783244991402.448,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/quick-actions.ts": 1785019071728.6204,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/radio-group.ts": 1783244991402.5474,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/role-select.ts": 1784199965284.3,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/router-adapter.ts": 1784199918458.1833,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/search-param-overlay.ts": 1783244991402.6665,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/section-header.ts": 1784199965284.3777,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/sheet.ts": 1783244991402.7732,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/sidebar.ts": 1784199965284.5107,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/sidebar.ts": 1785019071728.998,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/sortable.ts": 1783244991402.999,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/stepper.ts": 1784199918458.3784,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/types/switch.ts": 1784199965284.5896,
@@ -189,14 +197,14 @@
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/rules/components.md": 1784199965220.2507,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/rules/forms.md": 1784199965220.358,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/rules/layout.md": 1784199965220.4514,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/rules/page-composition.md": 1784204823078.672,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/rules/page-composition.md": 1785019071710.1682,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/rules/theming.md": 1784199965220.6528,
     "/Users/blaccgeorge/Documents/projects/gsl-components/demo/docs/rules/tokens.md": 1784199965220.7317,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/src/styles/theme/base.css": 1784199965280.3022,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/styles/theme/base.css": 1785019071725.9846,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/styles/theme/dark.css": 1784199965280.689,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/src/styles/theme/light.css": 1784199965282.035,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/src/styles/theme/tokens.css": 1784199965282.208,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/src/generated/components.theme.ts": 1784205372272.9944,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/styles/theme/light.css": 1785019071726.1514,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/styles/theme/tokens.css": 1785019071726.7317,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/generated/components.theme.ts": 1785019227067.4211,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/app-header/styles/app-header.css": 1784199965240.7898,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/app-layout/styles/app-layout.css": 1784199965242.0874,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/app-switcher/styles/app-switcher.css": 1784199965243.373,
@@ -205,48 +213,50 @@
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/breadcrumb/styles/breadcrumb.css": 1784199965244.855,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/bulk-import-modal/styles/bulk-import-modal.css": 1784199965246.7773,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/button/styles/button.css": 1784199965247.8584,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/card/styles/card.css": 1784199965248.5056,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/card/styles/card.css": 1785019071716.7864,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/checkbox/styles/checkbox.css": 1784199965248.9827,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/combobox/styles/combobox.css": 1784199965249.634,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/combobox/styles/combobox.css": 1785019071717.597,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/command/styles/command.css": 1784199965250.481,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/country-selector/styles/country-selector.css": 1784199965251.3923,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/date-range-selector/styles/date-range-selector.css": 1784199965252.3809,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/date-selector/styles/date-selector.css": 1784199965252.9575,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/date-selector/styles/date-selector.css": 1785019071718.5547,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/dialog/styles/dialog.css": 1784199965253.5593,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/draggable/styles/draggable.css": 1784199965254.1072,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/dropdown/styles/dropdown.css": 1784199965254.912,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/field/styles/field.css": 1784199965255.5784,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/input/styles/input.css": 1784199965256.131,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/launchpad/styles/launchpad.css": 1784199965257.7566,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/metric-card/styles/metric-card.css": 1784204823079.8755,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/launchpad/styles/launchpad.css": 1785019071719.6108,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/metric-card/styles/metric-card.css": 1785019071720.035,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/modal/styles/modal.css": 1784199965258.7732,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/network-operator/styles/network-operator.css": 1784199965259.5852,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/notice/styles/notice.css": 1784199965260.191,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/otp-input/styles/otp-input.css": 1784199965260.6997,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/page-section/styles/page-section.css": 1785019071720.6003,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/phone-number-input/styles/phone-number-input.css": 1784199965261.375,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/popover/styles/popover.css": 1784199965261.7966,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/popup/styles/popup.css": 1784199965262.6003,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/profile-popover/styles/profile-popover.css": 1784199965264.7893,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/profile-popover/styles/profile-popover.css": 1785019071721.051,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/progress-bar/styles/progress-bar.css": 1784199965266.9065,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/quick-actions/styles/quick-actions.css": 1785019071721.575,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/radio-group/styles/radio-group.css": 1784199965267.78,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/role-select/styles/role-select.css": 1784199965268.2954,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/section-header/styles/section-header.css": 1784199965268.7466,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/sheet/styles/sheet.css": 1784199965269.3606,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/sidebar/styles/sidebar.css": 1784199965270.448,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/sidebar/styles/sidebar.css": 1785019071722.665,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/sortable/styles/sortable.css": 1784199965271.1414,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/stepper/styles/stepper.css": 1784199965271.8328,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/switch/styles/switch.css": 1784199965272.3052,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/table/styles/progress-modal.css": 1784199965273.8936,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/table/styles/table.css": 1784199965274.0947,
-    "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/tabs/styles/tabs.css": 1784199965274.697,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/table/styles/table.css": 1785019071724.2114,
+    "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/tabs/styles/tabs.css": 1785019071725.3076,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/textarea/styles/textarea.css": 1784199965275.2537,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/timeline/styles/timeline.css": 1784199965276.5156,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/toast/styles/toast.css": 1784199965277.0771,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/tooltip/styles/tooltip.css": 1784199965277.567,
     "/Users/blaccgeorge/Documents/projects/gsl-components/src/components/upload-field/styles/upload-field.css": 1784199965278.4648
   },
-  "componentCount": 51,
-  "exampleCount": 85,
-  "ruleCount": 67,
-  "tokenCount": 174
+  "componentCount": 54,
+  "exampleCount": 88,
+  "ruleCount": 68,
+  "tokenCount": 175
 }

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",

package/dist/mcp/generated/search.json

@@ -238,6 +238,13 @@
     "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",
@@ -453,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",
@@ -765,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",
@@ -853,6 +885,8 @@
       "One role switcher, consistent across all three locations",
       "Table family — adopt together",
       "Other preferred variants",
+      "PageSection — consistent section spacing",
+      "QuickActions — dashboard action grids",
       "Checklist"
     ]
   },
@@ -978,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",
@@ -1113,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",
@@ -1537,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",
@@ -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) {