nodejs · ovflowd · Feb 11, 2026 · Feb 11, 2026 · Feb 11, 2026 · Copilot
@@ -116,10 +116,11 @@ jobs:
           # Check if a custom publish script exists in package.json
           if jq -e '.scripts.release' package.json > /dev/null; then
             pnpm run release
-          else
-            pnpm publish --access public --no-git-checks
           fi
 
+          # Then publish the package to npm
+          pnpm publish --access public --no-git-checks
+
       - name: Notify on Manual Release
         if: ${{ github.event_name == 'workflow_dispatch' }}
         uses: rtCamp/action-slack-notify@e31e87e03dd19038e411e38ae27cbad084a90661 # 2.3.3

@@ -1,4 +1,3 @@
-import Tooltip from '@node-core/ui-components/Common/Tooltip';
 import * as PartnerLogos from '@node-core/ui-components/Icons/PartnerLogos';
 
 import providePartners from '#site/next-data/providers/partners';
@@ -36,15 +35,15 @@ const renderSmallPartner = (partner: Partner) => {
   const Logo = PartnerLogos[partner.id];
 
   return (
-    <Tooltip
+    <PartnerButton
+      aria-label={partner.name}
       key={partner.id}
-      asChild
-      content={<div className={style.tooltip}>{partner.name}</div>}
+      size="small"
+      href={partner.href}
+      data-tooltip={partner.name}
     >
-      <PartnerButton aria-label={partner.name} size="small" href={partner.href}>
-        <Logo.Favicon />
-      </PartnerButton>
-    </Tooltip>
+      <Logo.Favicon />
+    </PartnerButton>
   );
 };
 

@@ -35,11 +35,7 @@ const WithMetaBar: FC = () => {
   // Since we cannot show the same number of avatars in Mobile / Tablet
   // resolution as we do on desktop and there is overflow, we are adjusting
   // the number of avatars manually for the resolutions below
-  const isMobileResolution = useMediaQuery('(max-width: 890px)');
-
-  const isTabletResolution = useMediaQuery(
-    '(min-width: 890px) and (max-width: 1280px)'
-  );
+  const isSmallerThanDesktop = useMediaQuery('(max-width: 1280px)');
 
   return (
     <MetaBar
@@ -55,7 +51,7 @@ const WithMetaBar: FC = () => {
           )]: (
             <WithAvatarGroup
               usernames={usernames}
-              limit={isMobileResolution ? 7 : isTabletResolution ? 5 : 9}
+              limit={isSmallerThanDesktop ? 5 : 8}
             />
           ),
         }),

@@ -1,12 +1,12 @@
 @reference "../styles/index.css";
 
 .baseLayout {
-  @apply grid
+  @apply ml:grid
+    ml:grid-cols-[1fr]
+    ml:grid-rows-[auto_1fr_auto]
     h-max
     min-h-full
-    w-full
-    grid-cols-[1fr]
-    grid-rows-[auto_1fr_auto];
+    w-full;
 }
 
 .centeredLayout {

@@ -1,7 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
 /// <reference types="next/navigation-types/compat/navigation" />
-import './.next/types/routes.d.ts';
+import './.next/dev/types/routes.d.ts';
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
@@ -26,7 +26,7 @@ export const fetchWithRetry = async (
   const backoff = Math.max(0, Number(delay) || 0);
 
   const attemptFetch = attempt =>
-    fetch(url, options).catch(e => {
+    fetch(url, { ...options, signal: AbortSignal.timeout(30000) }).catch(e => {
       if (attempt === retries || !isTimeoutError(e)) {
         throw e;
       }

@@ -10,6 +10,7 @@
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "Bundler",
+    "customConditions": ["default"],
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react-jsx",

@@ -13,6 +13,11 @@ const languagePrefix = 'language-';
 // The regex to match metadata
 const rMeta = /(\w+)(?:=(?:"([^"]+)"|(\S+)))?/g;
 
+const getLineCount = value =>
+  value
+    .split('\n')
+    .filter((_, i, arr) => !(i === arr.length - 1 && arr[i] === '')).length;
+
 /**
  * Parses a fenced code block metadata string into a JavaScript object.
  * @param {string} meta - The metadata string from a Markdown code fence.
@@ -163,7 +168,9 @@ export default async function rehypeShikiji(options) {
       const meta = parseMeta(preElement.data?.meta);
 
       // Retrieve the whole <pre> contents as a parsed DOM string
-      const preElementContents = toString(preElement);
+      const preElementContents = toString(preElement).replace(/\n$/, '');
+
+      const lineCount = getLineCount(preElementContents);
 
       // Grabs the relevant alias/name of the language
       const languageId = codeLanguage.slice(languagePrefix.length);
@@ -178,7 +185,8 @@ export default async function rehypeShikiji(options) {
       // Adds the original language back to the <pre> element
       children[0].properties.class = classNames(
         children[0].properties.class,
-        codeLanguage
+        codeLanguage,
+        { 'no-line-numbers': lineCount < 5, 'no-footer': lineCount === 1 }
       );
 
       // Replaces the <pre> element with the updated one

@@ -8,3 +8,23 @@ The components are based on [this design file](https://www.figma.com/design/a10c
 Most components in this package are available on [Chromatic](https://www.chromatic.com/library?appId=64c7d71358830e9105808652).
 
 For additional details regarding specific components, refer to the [nodejs/nodejs.org](https://github.com/nodejs/nodejs.org) repository.
+
+## Local development
+
+To use this package via `npm link` in another repo (for example, doc-kit), build the
+compiled outputs and keep them updated while you work.
+
+```bash
+# From nodejs.org/packages/ui-components
+pnpm install
+node --run compile:watch
+
+# In another terminal, still in nodejs.org/packages/ui-components
+npm link
+
+# From the consumer repo (for example doc-kit)
+npm link @node-core/ui-components
+```
+
+The `compile:watch` script keeps `dist/` up to date so consumers resolve compiled
+CSS and JavaScript instead of the raw Tailwind source.
@@ -3,13 +3,20 @@
   "version": "1.5.10",
   "type": "module",
   "exports": {
-    "./*": [
-      "./src/*",
-      "./src/*.tsx",
-      "./src/*/index.tsx",
-      "./src/*.ts",
-      "./src/*/index.ts"
-    ]
+    "./*": {
+      "rolldown": [
+        "./dist/*",
+        "./dist/*.js",
+        "./dist/*/index.js"
+      ],
+      "default": [
+        "./src/*",
+        "./src/*.tsx",
+        "./src/*/index.tsx",
+        "./src/*.ts",
+        "./src/*/index.ts"
+      ]
+    }
   },
   "repository": {
     "type": "git",
@@ -20,7 +27,8 @@
     "compile:ts": "tsc",
     "compile:css": "postcss --dir dist --base src \"src/**/*.module.css\" src/styles/index.css",
     "compile": "node --run compile:ts && node --run compile:css",
-    "release": "node --run compile && node scripts/publish.mjs",
+    "compile:watch": "node --run compile:ts -- --watch & node --run compile:css -- --watch",
+    "release": "node --run compile",
     "lint": "node --run lint:js && node --run lint:css",
     "lint:css": "stylelint \"**/*.css\" --allow-empty-input --cache --cache-strategy=content --cache-location=.stylelintcache",
     "lint:css:fix": "node --run lint:css -- --fix",
@@ -80,14 +88,25 @@
     "typescript": "catalog:"
   },
   "imports": {
-    "#ui/*": [
-      "./src/*",
-      "./src/*.tsx",
-      "./src/*/index.tsx",
-      "./src/*.ts",
-      "./src/*/index.ts"
-    ]
+    "#ui/*": {
+      "rolldown": [
+        "./dist/*",
+        "./dist/*.js",
+        "./dist/*/index.js"
+      ],
+      "default": [
+        "./src/*",
+        "./src/*.tsx",
+        "./src/*/index.tsx",
+        "./src/*.ts",
+        "./src/*/index.ts"
+      ]
+    }
   },
+  "files": [
+    "dist/**",
+    "README.md"
+  ],
   "engines": {
     "node": ">=20"
   }

@@ -9,8 +9,7 @@
     px-4.5
     py-2.5
     text-center
-    font-semibold
-    motion-safe:transition-colors;
+    font-semibold;
 
   svg {
     @apply size-5;
@@ -124,7 +123,7 @@
       after:mx-auto
       after:h-px
       after:w-2/5
-      after:bg-gradient-to-r
+      after:bg-linear-to-r
       after:from-green-600/0
       after:via-green-600
       after:to-green-600/0

@@ -53,6 +53,19 @@
             [counter-increment:line];
         }
       }
+
+      &[class*='plain-text'] {
+        @apply font-mono;
+      }
+    }
+
+    &[class*='no-line-numbers'] > code > [class='line'] {
+      @apply pl-0;
+
+      &:not(:empty:last-child)::after {
+        @apply content-none
+          [counter-reset:none];
+      }
     }
   }
 
@@ -62,8 +75,8 @@
       justify-between
       border-t
       border-t-neutral-900
-      px-4
-      py-3
+      px-3
+      py-2
       text-sm
       font-medium;
 
@@ -72,9 +85,15 @@
     }
 
     & > .action {
-      @apply px-3
-        py-1.5
+      @apply px-2.5
+        py-1
+        text-xs
         font-medium;
+
+      > svg {
+        @apply h-4
+          w-4;
+      }
     }
   }
 }