jamdesk 1.1.85 → 1.1.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jamdesk",
-  "version": "1.1.85",
+  "version": "1.1.87",
   "description": "CLI for Jamdesk — build, preview, and deploy documentation sites from MDX. Dev server with hot reload, 50+ components, OpenAPI support, AI search, and Mintlify migration",
   "keywords": [
     "jamdesk",

package/vendored/components/mdx/Steps.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ReactNode, Children, cloneElement, isValidElement, memo } from 'react';
+import { ReactNode, Children, Fragment, cloneElement, isValidElement, memo } from 'react';
 import { getIconClass } from '@/lib/icon-utils';
 import { useStepSlug } from './StepSlugContext';
 
@@ -25,11 +25,25 @@ interface StepProps {
 function isStepComponent(child: unknown): boolean {
   if (!isValidElement(child)) return false;
   const type = child.type as { displayName?: string; name?: string };
-  return (
+  if (
     type === Step ||
     type?.displayName === 'Step' ||
     type?.name === 'Step'
-  );
+  ) {
+    return true;
+  }
+
+  const childProps = child.props as Record<string, unknown> | null;
+  if (childProps && Object.prototype.hasOwnProperty.call(childProps, 'title')) {
+    return true;
+  }
+
+  if (child.type === Fragment) return false;
+
+  // In the RSC + MDX path, nested client components can arrive as opaque
+  // client references instead of the local `Step` function. Direct custom
+  // elements inside <Steps> are Step-compatible; DOM nodes like <p> are not.
+  return typeof child.type !== 'string';
 }
 
 export const Steps = memo(function Steps({ children, titleSize = 'p' }: StepsProps) {
@@ -39,7 +53,7 @@ export const Steps = memo(function Steps({ children, titleSize = 'p' }: StepsPro
 
   let stepIndex = 0;
   return (
-    <div className="relative my-8 space-y-0 not-prose">
+    <div className="relative my-8 space-y-0 not-prose" style={{ paddingInlineStart: 16 }}>
       {childrenArray.map((child) => {
         if (isStepComponent(child)) {
           const childProps = (child as any).props as StepProps;

package/vendored/components/navigation/TableOfContents.tsx

@@ -29,9 +29,16 @@ function getItemOffset(depth: number): number {
   return 36;
 }
 
+const TOC_STEP_INDICATOR_INSET = 30;
+const TOC_STEP_INDICATOR_SIZE = 14;
+const TOC_STEP_LABEL_GAP = 8;
+
 /** Horizontal position of the vertical line based on heading depth */
-function getLineOffset(depth: number): number {
-  return depth >= 3 ? 10 : 0;
+function getLineOffset(item: TocItem): number {
+  if (typeof item.stepNumber === 'number') {
+    return TOC_STEP_INDICATOR_INSET + TOC_STEP_INDICATOR_SIZE / 2;
+  }
+  return item.level >= 3 ? 10 : 0;
 }
 
 function getLinkClass(level: number, isActive: boolean): string {
@@ -199,7 +206,7 @@ export function TableOfContents({ content, className = '' }: TableOfContentsProp
         const heading = headings.find(item => item.id === href.slice(1));
         if (!heading) continue;
 
-        const offset = getLineOffset(heading.level) + 0.5;
+        const offset = getLineOffset(heading) + 0.5;
         const elTop = getOffsetRelativeTo(element, container);
         items.push({ offset, top: elTop, bottom: elTop + element.clientHeight });
       }
@@ -567,12 +574,13 @@ export function TableOfContents({ content, className = '' }: TableOfContentsProp
               }
             };
 
-            // 30px leaves room for the absolute-positioned 14px step circle
-            // (insetInlineStart: 1) + a gap. Non-step H3s use the same value
-            // so mixed step/non-step groups align visually.
-            const startOffset = heading.level === 3
-              ? 30
-              : getItemOffset(heading.level);
+            // Step entries sit under their parent heading: number aligned with
+            // H3 text, label after the 14px circle plus an 8px gap.
+            const startOffset = hasStepNumber
+              ? TOC_STEP_INDICATOR_INSET + TOC_STEP_INDICATOR_SIZE + TOC_STEP_LABEL_GAP
+              : heading.level === 3
+                ? 30
+                : getItemOffset(heading.level);
 
             return (
               <a
@@ -592,11 +600,11 @@ export function TableOfContents({ content, className = '' }: TableOfContentsProp
                     aria-hidden="true"
                     className="absolute flex items-center justify-center rounded-full text-[9px] font-medium"
                     style={{
-                      insetInlineStart: 3,
+                      insetInlineStart: TOC_STEP_INDICATOR_INSET,
                       top: '50%',
                       transform: 'translateY(-50%)',
-                      width: 14,
-                      height: 14,
+                      width: TOC_STEP_INDICATOR_SIZE,
+                      height: TOC_STEP_INDICATOR_SIZE,
                       backgroundColor: isActive
                         ? 'var(--color-primary)'
                         : 'var(--color-bg-primary)',