@miragon/mcp-toolkit-ui 2.8.0 → 2.8.1

package/dist/components/DrillButton.d.ts

@@ -20,6 +20,11 @@ export interface DrillButtonProps {
  * it for every in-app drill (row "Open", header nav) so they read identically
  * and stay visually quieter than primary/agentic actions. Decoupled from any
  * host — pass an `onDrill` callback (e.g. wrapping `useHostActions().showWidget`).
+ *
+ * It IS the toolkit's outline `Button` (`buttonVariants`): `sm` is 32 px,
+ * 14 px, weight 600, the size of a `Button size="sm"` or an `AskAiButton`
+ * beside it in a row; `md` is the `Button` default (36 px). The design
+ * system gives every button weight 600 and one radius.
  */
 export declare function DrillButton({ children, onDrill, icon, size, ariaLabel }: DrillButtonProps): import("react").JSX.Element;
 //# sourceMappingURL=DrillButton.d.ts.map

package/dist/components/DrillButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrillButton.d.ts","sourceRoot":"","sources":["../../src/components/DrillButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,MAAM,WAAW,gBAAgB;IAC/B,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAA;IACnB,mFAAmF;IACnF,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,qEAAqE;IACrE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,iGAAiG;IACjG,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BAsBhG"}
+{"version":3,"file":"DrillButton.d.ts","sourceRoot":"","sources":["../../src/components/DrillButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,WAAW,gBAAgB;IAC/B,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAA;IACnB,mFAAmF;IACnF,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,qEAAqE;IACrE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,iGAAiG;IACjG,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAKD;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BAiBhG"}

package/dist/components/DrillButton.js

@@ -1,16 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowRight } from "lucide-react";
-import { FOCUS_RING } from "../lib/focus-ring.js";
-import { cn } from "../lib/utils.js";
+import { buttonVariants } from "../primitives/button.js";
+/** The `Button` size each drill size is: one scale for every action of a view. */
+const BUTTON_SIZE = { sm: "sm", md: "default" };
 /**
  * The single, deterministic in-widget navigation control: a neutral outline
  * button with a trailing Lucide arrow that drills into a detail/sub-view. Use
  * it for every in-app drill (row "Open", header nav) so they read identically
  * and stay visually quieter than primary/agentic actions. Decoupled from any
  * host — pass an `onDrill` callback (e.g. wrapping `useHostActions().showWidget`).
+ *
+ * It IS the toolkit's outline `Button` (`buttonVariants`): `sm` is 32 px,
+ * 14 px, weight 600, the size of a `Button size="sm"` or an `AskAiButton`
+ * beside it in a row; `md` is the `Button` default (36 px). The design
+ * system gives every button weight 600 and one radius.
  */
 export function DrillButton({ children, onDrill, icon, size = "sm", ariaLabel }) {
-    const pad = size === "md" ? "px-3 py-1.5 text-dense" : "px-2.5 py-1 text-small";
-    return (_jsxs("button", { type: "button", onClick: onDrill, "aria-label": ariaLabel, className: cn("border-border text-foreground hover:border-focus hover:bg-accent hover:text-accent-foreground inline-flex items-center gap-1 rounded-md border font-medium transition-colors [&_svg:not([class*='size-'])]:size-4", FOCUS_RING, pad), children: [icon && (_jsx("span", { "aria-hidden": "true", className: "inline-flex", children: icon })), children, _jsx(ArrowRight, { "aria-hidden": "true", className: "size-4 shrink-0" })] }));
+    return (_jsxs("button", { type: "button", onClick: onDrill, "aria-label": ariaLabel, className: buttonVariants({ variant: "outline", size: BUTTON_SIZE[size] }), children: [icon && (_jsx("span", { "aria-hidden": "true", className: "inline-flex", children: icon })), children, _jsx(ArrowRight, { "aria-hidden": "true", className: "size-4 shrink-0" })] }));
 }
 //# sourceMappingURL=DrillButton.js.map

package/dist/components/DrillButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrillButton.js","sourceRoot":"","sources":["../../src/components/DrillButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AAkBpC;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAoB;IAC/F,MAAM,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,wBAAwB,CAAA;IAC/E,OAAO,CACL,kBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,gBACJ,SAAS,EACrB,SAAS,EAAE,EAAE,CACX,mNAAmN,EACnN,UAAU,EACV,GAAG,CACJ,aAEA,IAAI,IAAI,CACP,8BAAkB,MAAM,EAAC,SAAS,EAAC,aAAa,YAC7C,IAAI,GACA,CACR,EACA,QAAQ,EACT,KAAC,UAAU,mBAAa,MAAM,EAAC,SAAS,EAAC,iBAAiB,GAAG,IACtD,CACV,CAAA;AACH,CAAC"}
+{"version":3,"file":"DrillButton.js","sourceRoot":"","sources":["../../src/components/DrillButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAkBxD,kFAAkF;AAClF,MAAM,WAAW,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,SAAS,EAAW,CAAA;AAExD;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAoB;IAC/F,OAAO,CACL,kBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,gBACJ,SAAS,EACrB,SAAS,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,aAEzE,IAAI,IAAI,CACP,8BAAkB,MAAM,EAAC,SAAS,EAAC,aAAa,YAC7C,IAAI,GACA,CACR,EACA,QAAQ,EACT,KAAC,UAAU,mBAAa,MAAM,EAAC,SAAS,EAAC,iBAAiB,GAAG,IACtD,CACV,CAAA;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miragon/mcp-toolkit-ui",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "description": "React UI for MCP servers in the Miragon design system (white-label through role tokens): primitives, composite components, TanStack Query hooks, and the MCP App shell (McpAppView + WidgetRenderer).",
   "repository": {
     "type": "git",
@@ -45,7 +45,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "tailwindcss": "^4.3.0",
-    "@miragon/mcp-toolkit-core": "~2.8.0"
+    "@miragon/mcp-toolkit-core": "~2.8.1"
   },
   "dependencies": {
     "@base-ui/react": "1.8.0",
@@ -74,7 +74,7 @@
     "tailwindcss": "4.3.3",
     "typescript": "6.0.3",
     "vitest": "4.1.11",
-    "@miragon/mcp-toolkit-core": "2.8.0"
+    "@miragon/mcp-toolkit-core": "2.8.1"
   },
   "engines": {
     "node": ">=22.22.2"

package/src/components/DrillButton.test.tsx

@@ -0,0 +1,48 @@
+import { renderToStaticMarkup } from "react-dom/server"
+import { describe, expect, it } from "vitest"
+import { ExternalLink } from "lucide-react"
+import { attribute, openingTags, userFacingTexts } from "../render-scan.js"
+import { buttonVariants } from "../primitives/button.js"
+import { DrillButton } from "./DrillButton.js"
+
+const noop = () => undefined
+const classOf = (tag: string | undefined) => attribute(tag ?? "", "class") ?? ""
+
+describe("DrillButton: the outline Button with a trailing arrow (mcp-toolkit#194)", () => {
+  it("sm is a Button size sm: 32 px, 14 px, weight 600, like the buttons beside it in a row", () => {
+    const html = renderToStaticMarkup(<DrillButton onDrill={noop}>Open</DrillButton>)
+    const [button] = openingTags(html, "button")
+    expect(classOf(button)).toBe(buttonVariants({ variant: "outline", size: "sm" }))
+    expect(classOf(button)).toMatch(/\bh-8\b/)
+    expect(classOf(button)).toMatch(/\btext-sm\b/)
+    expect(classOf(button)).toMatch(/\bfont-semibold\b/)
+    expect(attribute(button ?? "", "type")).toBe("button")
+  })
+
+  it("md is the Button default size (surface headers)", () => {
+    const html = renderToStaticMarkup(
+      <DrillButton onDrill={noop} size="md">
+        View running instances
+      </DrillButton>,
+    )
+    expect(classOf(openingTags(html, "button")[0])).toBe(
+      buttonVariants({ variant: "outline", size: "default" }),
+    )
+  })
+
+  it("keeps its words: the label, a decorative leading icon and a decorative trailing arrow", () => {
+    const html = renderToStaticMarkup(
+      <DrillButton onDrill={noop} icon={<ExternalLink />} ariaLabel="Open order o-1001">
+        Open
+      </DrillButton>,
+    )
+    const [button] = openingTags(html, "button")
+    expect(attribute(button ?? "", "aria-label")).toBe("Open order o-1001")
+    expect(userFacingTexts(html).map((t) => t.value)).toContain("Open")
+    const svgs = openingTags(html, "svg")
+    expect(svgs).toHaveLength(2)
+    expect(svgs.at(-1)).toContain("lucide-arrow-right")
+    for (const svg of svgs) expect(attribute(svg, "aria-hidden")).toBe("true")
+    expect(openingTags(html, "span")[0]).toContain('aria-hidden="true"')
+  })
+})

package/src/components/DrillButton.tsx

@@ -1,7 +1,6 @@
 import type { ReactNode } from "react"
 import { ArrowRight } from "lucide-react"
-import { FOCUS_RING } from "../lib/focus-ring.js"
-import { cn } from "../lib/utils.js"
+import { buttonVariants } from "../primitives/button.js"
 
 export interface DrillButtonProps {
   /** Button label. */
@@ -19,25 +18,28 @@ export interface DrillButtonProps {
   ariaLabel?: string
 }
 
+/** The `Button` size each drill size is: one scale for every action of a view. */
+const BUTTON_SIZE = { sm: "sm", md: "default" } as const
+
 /**
  * The single, deterministic in-widget navigation control: a neutral outline
  * button with a trailing Lucide arrow that drills into a detail/sub-view. Use
  * it for every in-app drill (row "Open", header nav) so they read identically
  * and stay visually quieter than primary/agentic actions. Decoupled from any
  * host — pass an `onDrill` callback (e.g. wrapping `useHostActions().showWidget`).
+ *
+ * It IS the toolkit's outline `Button` (`buttonVariants`): `sm` is 32 px,
+ * 14 px, weight 600, the size of a `Button size="sm"` or an `AskAiButton`
+ * beside it in a row; `md` is the `Button` default (36 px). The design
+ * system gives every button weight 600 and one radius.
  */
 export function DrillButton({ children, onDrill, icon, size = "sm", ariaLabel }: DrillButtonProps) {
-  const pad = size === "md" ? "px-3 py-1.5 text-dense" : "px-2.5 py-1 text-small"
   return (
     <button
       type="button"
       onClick={onDrill}
       aria-label={ariaLabel}
-      className={cn(
-        "border-border text-foreground hover:border-focus hover:bg-accent hover:text-accent-foreground inline-flex items-center gap-1 rounded-md border font-medium transition-colors [&_svg:not([class*='size-'])]:size-4",
-        FOCUS_RING,
-        pad,
-      )}
+      className={buttonVariants({ variant: "outline", size: BUTTON_SIZE[size] })}
     >
       {icon && (
         <span aria-hidden="true" className="inline-flex">