fromsrc 0.0.2 → 0.0.22

package/dist/components/github.js

@@ -15,15 +15,19 @@ function GithubComponent({ repo }) {
     async function load() {
       try {
         const res = await fetch(`https://api.github.com/repos/${repo}`);
-        if (!res.ok || !mounted) return;
+        if (!res.ok || !mounted) {
+          return;
+        }
         const json = await res.json();
-        if (!mounted) return;
+        if (!mounted) {
+          return;
+        }
         const stars = typeof json.stargazers_count === "number" ? json.stargazers_count : 0;
         const forks = typeof json.forks_count === "number" ? json.forks_count : 0;
         setData({
-          stars,
+          description: json.description ?? null,
           forks,
-          description: json.description ?? null
+          stars
         });
       } catch {
         return;
@@ -79,16 +83,41 @@ function GithubComponent({ repo }) {
         /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
           /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-fg mb-1", children: repo }),
           data.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted mb-2 line-clamp-2", children: data.description }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-xs text-muted", "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z" }) }),
-              format(data.stars)
-            ] }),
-            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-.878a2.25 2.25 0 111.5 0v.878a2.25 2.25 0 01-2.25 2.25h-1.5v2.128a2.251 2.251 0 11-1.5 0V8.5h-1.5A2.25 2.25 0 013.5 6.25v-.878a2.25 2.25 0 111.5 0zM5 3.25a.75.75 0 10-1.5 0 .75.75 0 001.5 0zm6.75.75a.75.75 0 10.75-.75.75.75 0 00-.75.75z" }) }),
-              format(data.forks)
-            ] })
-          ] })
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center gap-4 text-xs text-muted",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      className: "w-4 h-4",
+                      fill: "currentColor",
+                      viewBox: "0 0 16 16",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx("path", { d: "M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z" })
+                    }
+                  ),
+                  format(data.stars)
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      className: "w-4 h-4",
+                      fill: "currentColor",
+                      viewBox: "0 0 16 16",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx("path", { d: "M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-.878a2.25 2.25 0 111.5 0v.878a2.25 2.25 0 01-2.25 2.25h-1.5v2.128a2.251 2.251 0 11-1.5 0V8.5h-1.5A2.25 2.25 0 013.5 6.25v-.878a2.25 2.25 0 111.5 0zM5 3.25a.75.75 0 10-1.5 0 .75.75 0 001.5 0zm6.75.75a.75.75 0 10.75-.75.75.75 0 00-.75.75z" })
+                    }
+                  ),
+                  format(data.forks)
+                ] })
+              ]
+            }
+          )
         ] })
       ]
     }

package/dist/components/graph.js

@@ -30,9 +30,13 @@ function Graph({
   }, [nodes, width, height]);
   const draw = useCallback(() => {
     const canvas = canvasRef.current;
-    if (!canvas) return;
+    if (!canvas) {
+      return;
+    }
     const ctx = canvas.getContext("2d");
-    if (!ctx) return;
+    if (!ctx) {
+      return;
+    }
     const dpr = window.devicePixelRatio || 1;
     canvas.width = width * dpr;
     canvas.height = height * dpr;
@@ -43,7 +47,9 @@ function Graph({
     for (const link of links) {
       const source = positions.get(link.source);
       const target = positions.get(link.target);
-      if (!source || !target) continue;
+      if (!source || !target) {
+        continue;
+      }
       ctx.beginPath();
       ctx.moveTo(source.x, source.y);
       ctx.lineTo(target.x, target.y);
@@ -51,9 +57,13 @@ function Graph({
     }
     for (let i = 0; i < nodes.length; i++) {
       const node = nodes[i];
-      if (!node) continue;
+      if (!node) {
+        continue;
+      }
       const pos = positions.get(node.id);
-      if (!pos) continue;
+      if (!pos) {
+        continue;
+      }
       const isHovered = hovered === node.id;
       const isFocused = focused === i;
       ctx.beginPath();
@@ -83,7 +93,9 @@ function Graph({
     (x, y) => {
       for (const node of nodes) {
         const pos = positions.get(node.id);
-        if (!pos) continue;
+        if (!pos) {
+          continue;
+        }
         const dx = x - pos.x;
         const dy = y - pos.y;
         if (dx * dx + dy * dy < HIT_RADIUS * HIT_RADIUS) {
@@ -96,20 +108,28 @@ function Graph({
   );
   const handleClick = useCallback(
     (e) => {
-      if (!onNodeClick) return;
+      if (!onNodeClick) {
+        return;
+      }
       const rect = canvasRef.current?.getBoundingClientRect();
-      if (!rect) return;
+      if (!rect) {
+        return;
+      }
       const x = e.clientX - rect.left;
       const y = e.clientY - rect.top;
       const node = findNode(x, y);
-      if (node) onNodeClick(node);
+      if (node) {
+        onNodeClick(node);
+      }
     },
     [onNodeClick, findNode]
   );
   const handleMove = useCallback(
     (e) => {
       const rect = canvasRef.current?.getBoundingClientRect();
-      if (!rect) return;
+      if (!rect) {
+        return;
+      }
       const x = e.clientX - rect.left;
       const y = e.clientY - rect.top;
       const node = findNode(x, y);
@@ -122,7 +142,9 @@ function Graph({
   }, []);
   const handleKeyDown = useCallback(
     (e) => {
-      if (nodes.length === 0) return;
+      if (nodes.length === 0) {
+        return;
+      }
       switch (e.key) {
         case "ArrowRight":
         case "ArrowDown":
@@ -160,7 +182,9 @@ function Graph({
           if (focused >= 0 && onNodeClick) {
             e.preventDefault();
             const node = nodes[focused];
-            if (node) onNodeClick(node);
+            if (node) {
+              onNodeClick(node);
+            }
           }
           break;
         }
@@ -200,8 +224,8 @@ function Graph({
       className: "rounded-lg border border-line bg-bg outline-none focus-visible:ring-2 focus-visible:ring-green-400",
       style: {
         cursor: hovered && onNodeClick ? "pointer" : "default",
-        width,
-        height
+        height,
+        width
       }
     }
   );

package/dist/components/heading.js

@@ -28,37 +28,44 @@ const Anchor = memo(function Anchor2({
     },
     [id, copy]
   );
-  return /* @__PURE__ */ jsxs(Tag, { id, className: `group relative scroll-mt-20 ${sizes[level]} ${className || ""}`, children: [
-    /* @__PURE__ */ jsx(
-      "a",
-      {
-        href: `#${id}`,
-        onClick: handleClick,
-        className: "absolute -left-6 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity",
-        "aria-label": "copy link",
-        children: copied ? /* @__PURE__ */ jsx(
-          "svg",
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      id,
+      className: `group relative scroll-mt-20 ${sizes[level]} ${className || ""}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "a",
           {
-            "aria-hidden": "true",
-            viewBox: "0 0 16 16",
-            fill: "currentColor",
-            className: "size-4 text-green-500",
-            children: /* @__PURE__ */ jsx("path", { d: "M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z" })
+            href: `#${id}`,
+            onClick: handleClick,
+            className: "absolute -left-6 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity",
+            "aria-label": "copy link",
+            children: copied ? /* @__PURE__ */ jsx(
+              "svg",
+              {
+                "aria-hidden": "true",
+                viewBox: "0 0 16 16",
+                fill: "currentColor",
+                className: "size-4 text-green-500",
+                children: /* @__PURE__ */ jsx("path", { d: "M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z" })
+              }
+            ) : /* @__PURE__ */ jsx(
+              "svg",
+              {
+                "aria-hidden": "true",
+                viewBox: "0 0 16 16",
+                fill: "currentColor",
+                className: "size-4 text-fg/40 hover:text-fg/60",
+                children: /* @__PURE__ */ jsx("path", { d: "M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z" })
+              }
+            )
           }
-        ) : /* @__PURE__ */ jsx(
-          "svg",
-          {
-            "aria-hidden": "true",
-            viewBox: "0 0 16 16",
-            fill: "currentColor",
-            className: "size-4 text-fg/40 hover:text-fg/60",
-            children: /* @__PURE__ */ jsx("path", { d: "M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z" })
-          }
-        )
-      }
-    ),
-    children
-  ] });
+        ),
+        children
+      ]
+    }
+  );
 });
 function H1(props) {
   return /* @__PURE__ */ jsx(Anchor, { level: 1, ...props });

package/dist/components/headingcopy.js

@@ -4,14 +4,22 @@ import { useEffect } from 'react';
 function HeadingCopy() {
   useEffect(() => {
     function handler(e) {
-      const target = e.target;
-      if (!(target instanceof HTMLElement)) return;
-      if (!target.classList.contains("heading-anchor-icon")) return;
+      const { target } = e;
+      if (!(target instanceof HTMLElement)) {
+        return;
+      }
+      if (!target.classList.contains("heading-anchor-icon")) {
+        return;
+      }
       e.preventDefault();
       const anchor = target.closest("a");
-      if (!anchor) return;
+      if (!anchor) {
+        return;
+      }
       const id = anchor.getAttribute("href")?.replace("#", "");
-      if (!id) return;
+      if (!id) {
+        return;
+      }
       const url = window.location.origin + window.location.pathname + "#" + id;
       navigator.clipboard.writeText(url).then(() => {
         const original = target.textContent;

package/dist/components/hero.js

@@ -9,20 +9,26 @@ const Hero = memo(function Hero2({
   badge,
   className
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col items-center px-6 py-20 text-center ${className ?? ""}`, children: [
-    badge && /* @__PURE__ */ jsx("span", { className: "mb-4 rounded-full border border-line px-3 py-1 text-xs text-muted", children: badge }),
-    /* @__PURE__ */ jsx("h1", { className: "max-w-3xl text-4xl font-bold tracking-tight text-fg sm:text-5xl lg:text-6xl", children: title }),
-    description && /* @__PURE__ */ jsx("p", { className: "mt-6 max-w-2xl text-lg text-muted", children: description }),
-    actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-3", children: actions.map((action) => /* @__PURE__ */ jsx(
-      "a",
-      {
-        href: action.href,
-        className: action.variant === "secondary" ? "rounded-lg border border-line bg-surface px-5 py-2.5 text-sm font-medium text-fg transition-colors hover:bg-surface/80" : "rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-accent/90",
-        children: action.label
-      },
-      action.href
-    )) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex flex-col items-center px-6 py-20 text-center ${className ?? ""}`,
+      children: [
+        badge && /* @__PURE__ */ jsx("span", { className: "mb-4 rounded-full border border-line px-3 py-1 text-xs text-muted", children: badge }),
+        /* @__PURE__ */ jsx("h1", { className: "max-w-3xl text-4xl font-bold tracking-tight text-fg sm:text-5xl lg:text-6xl", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-6 max-w-2xl text-lg text-muted", children: description }),
+        actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-3", children: actions.map((action) => /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: action.href,
+            className: action.variant === "secondary" ? "rounded-lg border border-line bg-surface px-5 py-2.5 text-sm font-medium text-fg transition-colors hover:bg-surface/80" : "rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-accent/90",
+            children: action.label
+          },
+          action.href
+        )) })
+      ]
+    }
+  );
 });
 
 export { Hero };

package/dist/components/highlight.d.ts

@@ -14,7 +14,7 @@ interface HighlightProps {
     /** Highlight color variant */
     color?: HighlightColor;
 }
-declare function HighlightBase({ children, color }: HighlightProps): JSX.Element;
+declare function HighlightBase({ children, color, }: HighlightProps): JSX.Element;
 /**
  * Renders highlighted text with customizable color
  */
@@ -32,7 +32,7 @@ interface UnderlineProps {
     /** Underline style variant */
     style?: UnderlineStyle;
 }
-declare function UnderlineBase({ children, style }: UnderlineProps): JSX.Element;
+declare function UnderlineBase({ children, style, }: UnderlineProps): JSX.Element;
 /**
  * Renders underlined text with customizable style
  */

package/dist/components/highlight.js

@@ -2,13 +2,16 @@ import { jsx } from 'react/jsx-runtime';
 import { memo } from 'react';
 
 const colors = {
-  yellow: "bg-yellow-500/20 text-yellow-200",
-  green: "bg-green-500/20 text-green-200",
   blue: "bg-blue-500/20 text-blue-200",
+  green: "bg-green-500/20 text-green-200",
+  purple: "bg-purple-500/20 text-purple-200",
   red: "bg-red-500/20 text-red-200",
-  purple: "bg-purple-500/20 text-purple-200"
+  yellow: "bg-yellow-500/20 text-yellow-200"
 };
-function HighlightBase({ children, color = "yellow" }) {
+function HighlightBase({
+  children,
+  color = "yellow"
+}) {
   return /* @__PURE__ */ jsx(
     "mark",
     {
@@ -21,12 +24,15 @@ function HighlightBase({ children, color = "yellow" }) {
 }
 const Highlight = memo(HighlightBase);
 const underlineStyles = {
-  solid: "decoration-solid",
-  wavy: "decoration-wavy",
+  dashed: "decoration-dashed",
   dotted: "decoration-dotted",
-  dashed: "decoration-dashed"
+  solid: "decoration-solid",
+  wavy: "decoration-wavy"
 };
-function UnderlineBase({ children, style = "solid" }) {
+function UnderlineBase({
+  children,
+  style = "solid"
+}) {
   return /* @__PURE__ */ jsx(
     "span",
     {

package/dist/components/hover.d.ts

@@ -15,8 +15,8 @@ interface TypePopupProps {
     trigger: React.ReactNode;
     content: React.ReactNode;
 }
-declare function HoverInfoBase({ children, info, type }: HoverInfoProps): React.ReactElement;
-declare function TypePopupBase({ trigger, content }: TypePopupProps): React.ReactElement;
+declare function HoverInfoBase({ children, info, type, }: HoverInfoProps): React.ReactElement;
+declare function TypePopupBase({ trigger, content, }: TypePopupProps): React.ReactElement;
 declare const HoverInfo: react.MemoExoticComponent<typeof HoverInfoBase>;
 declare const TypePopup: react.MemoExoticComponent<typeof TypePopupBase>;
 

package/dist/components/hover.js

@@ -3,11 +3,15 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { memo, useState, useId, useCallback } from 'react';
 
 const colors = {
+  error: "text-red-400",
   type: "text-cyan-400",
-  value: "text-green-400",
-  error: "text-red-400"
+  value: "text-green-400"
 };
-function HoverInfoBase({ children, info, type = "type" }) {
+function HoverInfoBase({
+  children,
+  info,
+  type = "type"
+}) {
   const [show, setShow] = useState(false);
   const id = useId();
   const handleShow = useCallback(() => setShow(true), []);
@@ -37,7 +41,10 @@ function HoverInfoBase({ children, info, type = "type" }) {
     }
   );
 }
-function TypePopupBase({ trigger, content }) {
+function TypePopupBase({
+  trigger,
+  content
+}) {
   const [show, setShow] = useState(false);
   const id = useId();
   const handleShow = useCallback(() => setShow(true), []);

package/dist/components/icons.js

@@ -22,7 +22,10 @@ const IconCheck = memo(function IconCheck2({
     }
   );
 });
-const IconX = memo(function IconX2({ className, size = 24 }) {
+const IconX = memo(function IconX2({
+  className,
+  size = 24
+}) {
   return /* @__PURE__ */ jsxs(
     "svg",
     {

package/dist/components/inlinetoc.js

@@ -13,7 +13,9 @@ function InlineTocBase({
   collapsible = false
 }) {
   const filtered = items.filter((item) => item.level <= maxDepth);
-  if (filtered.length === 0) return null;
+  if (filtered.length === 0) {
+    return null;
+  }
   const content = collapsible ? /* @__PURE__ */ jsxs("details", { children: [
     /* @__PURE__ */ jsx("summary", { children: title }),
     /* @__PURE__ */ jsx(List, { items: filtered })

package/dist/components/input.js

@@ -9,11 +9,21 @@ const variants = {
   error: "border-red-500/50 bg-red-500/5 text-fg placeholder:text-muted focus:border-red-500"
 };
 const sizes = {
-  sm: "h-8 px-2.5 text-xs",
+  lg: "h-12 px-4 text-base",
   md: "h-10 px-3 text-sm",
-  lg: "h-12 px-4 text-base"
+  sm: "h-8 px-2.5 text-xs"
 };
-function InputBase({ variant = "default", size = "md", label, error, hint, tooltip, className = "", id, ...props }, ref) {
+function InputBase({
+  variant = "default",
+  size = "md",
+  label,
+  error,
+  hint,
+  tooltip,
+  className = "",
+  id,
+  ...props
+}, ref) {
   const generatedId = useId();
   const inputId = id || generatedId;
   const errorId = error ? `${inputId}-error` : void 0;

package/dist/components/install.js

@@ -5,10 +5,10 @@ import { CopyButton } from './copybutton';
 
 const managers = ["npm", "pnpm", "yarn", "bun"];
 const commands = {
+  bun: "bun add",
   npm: "npm i",
   pnpm: "pnpm add",
-  yarn: "yarn add",
-  bun: "bun add"
+  yarn: "yarn add"
 };
 function InstallBase({ package: pkg }) {
   const [active, setActive] = useState("npm");
@@ -21,30 +21,40 @@ function InstallBase({ package: pkg }) {
       mapRef.current.set(manager, mapRef.current.size);
     }
   }
-  const getTabId = useCallback((value) => `${id}-tab-${mapRef.current.get(value) ?? 0}`, [id]);
+  const getTabId = useCallback(
+    (value) => `${id}-tab-${mapRef.current.get(value) ?? 0}`,
+    [id]
+  );
   const handleKeyDown = useCallback(
     (e) => {
       const currentIndex = managers.indexOf(active);
       let nextIndex = currentIndex;
       switch (e.key) {
-        case "ArrowLeft":
+        case "ArrowLeft": {
           nextIndex = currentIndex > 0 ? currentIndex - 1 : managers.length - 1;
           break;
-        case "ArrowRight":
+        }
+        case "ArrowRight": {
           nextIndex = currentIndex < managers.length - 1 ? currentIndex + 1 : 0;
           break;
-        case "Home":
+        }
+        case "Home": {
           nextIndex = 0;
           break;
-        case "End":
+        }
+        case "End": {
           nextIndex = managers.length - 1;
           break;
-        default:
+        }
+        default: {
           return;
+        }
       }
       e.preventDefault();
       const next = managers[nextIndex];
-      if (next) setActive(next);
+      if (next) {
+        setActive(next);
+      }
       const tabs = tablistRef.current?.querySelectorAll('[role="tab"]');
       tabs?.[nextIndex]?.focus();
     },
@@ -59,24 +69,24 @@ function InstallBase({ package: pkg }) {
       role: "group",
       "aria-label": `Install ${pkg} package`,
       style: {
-        position: "relative",
-        margin: "24px 0",
-        borderRadius: "8px",
         backgroundColor: "#0d0d0d",
         border: "1px solid #1c1c1c",
-        overflow: "hidden"
+        borderRadius: "8px",
+        margin: "24px 0",
+        overflow: "hidden",
+        position: "relative"
       },
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
-              display: "flex",
               alignItems: "center",
-              justifyContent: "space-between",
-              padding: "0 12px",
+              borderBottom: "1px solid #1c1c1c",
+              display: "flex",
               height: "40px",
-              borderBottom: "1px solid #1c1c1c"
+              justifyContent: "space-between",
+              padding: "0 12px"
             },
             children: [
               /* @__PURE__ */ jsx(
@@ -86,7 +96,7 @@ function InstallBase({ package: pkg }) {
                   role: "tablist",
                   "aria-label": "Package managers",
                   onKeyDown: handleKeyDown,
-                  style: { display: "flex", alignItems: "center", gap: "4px" },
+                  style: { alignItems: "center", display: "flex", gap: "4px" },
                   children: managers.map((m, index) => /* @__PURE__ */ jsx(
                     "button",
                     {
@@ -98,14 +108,14 @@ function InstallBase({ package: pkg }) {
                       tabIndex: active === m ? 0 : -1,
                       onClick: () => handleTabClick(m),
                       style: {
-                        padding: "4px 10px",
-                        fontSize: "13px",
-                        color: active === m ? "#fafafa" : "#737373",
                         background: "transparent",
                         border: "none",
-                        cursor: "pointer",
                         borderBottom: active === m ? "2px solid #fafafa" : "2px solid transparent",
+                        color: active === m ? "#fafafa" : "#737373",
+                        cursor: "pointer",
+                        fontSize: "13px",
                         marginBottom: "-1px",
+                        padding: "4px 10px",
                         transition: "color 0.15s"
                       },
                       children: m
@@ -126,10 +136,10 @@ function InstallBase({ package: pkg }) {
             "aria-labelledby": getTabId(active),
             tabIndex: 0,
             style: {
-              padding: "14px 16px",
+              fontFamily: "var(--font-mono), ui-monospace, monospace",
               fontSize: "13px",
               lineHeight: "1.6",
-              fontFamily: "var(--font-mono), ui-monospace, monospace"
+              padding: "14px 16px"
             },
             children: /* @__PURE__ */ jsxs("code", { "aria-label": `Command: ${command}`, children: [
               /* @__PURE__ */ jsx("span", { style: { color: "#7ee787" }, children: commands[active] }),