Simplify mediaScale follow-through and spacing audit plumbing.

Drop unused context/API surface, share size axes with mediaScale, and make the audit script reuse a page with proper cleanup.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: ntucker

apps/docs/src/fixtures/AppSkeleton.tsx

@@ -145,19 +145,17 @@ export function AppSkeleton({
             data-narrow={narrow || undefined}
             data-region="sidebar"
           >
-            <Stack gap="4">
-              <Stack gap="2">
-                <Stack gap="1">
-                  <Text role="label">Navigation</Text>
-                  <Separator />
-                </Stack>
-                <Stack gap="1">
-                  {['Overview', 'Projects', 'Settings'].map((item) => (
-                    <Box key={item} className={navItemClass}>
-                      <Text role="caption">{item}</Text>
-                    </Box>
-                  ))}
-                </Stack>
+            <Stack gap="2">
+              <Stack gap="1">
+                <Text role="label">Navigation</Text>
+                <Separator />
+              </Stack>
+              <Stack gap="1">
+                {['Overview', 'Projects', 'Settings'].map((item) => (
+                  <Box key={item} className={navItemClass}>
+                    <Text role="caption">{item}</Text>
+                  </Box>
+                ))}
               </Stack>
             </Stack>
           </Box>

apps/docs/src/fixtures/SettingsForm.tsx

@@ -133,11 +133,13 @@ export function SettingsForm({
                   </RadioGroup.Root>
                 </Field.Root>
 
-                <Field.Root disabled={disabled} controlId="marketing">
-                  <Inline gap="2" align="center">
-                    <Checkbox defaultChecked />
-                    <Field.Label>Email me product updates</Field.Label>
-                  </Inline>
+                <Field.Root
+                  disabled={disabled}
+                  controlId="marketing"
+                  orientation="horizontal"
+                >
+                  <Checkbox defaultChecked />
+                  <Field.Label>Email me product updates</Field.Label>
                 </Field.Root>
 
                 <Field.Root disabled={disabled}>

packages/silk-core/src/recipes/avatar.ts

@@ -3,10 +3,14 @@ import {
   type Recipe,
   type VariantProps,
 } from './defineRecipe.js';
+import { mediaScaleSizes } from './mediaScale.js';
 
-const avatarVariants = {
-  size: ['sm', 'md', 'lg'] as const,
-  shape: ['circle', 'rounded', 'square'] as const,
+const avatarVariants: {
+  readonly size: typeof mediaScaleSizes;
+  readonly shape: readonly ['circle', 'rounded', 'square'];
+} = {
+  size: mediaScaleSizes,
+  shape: ['circle', 'rounded', 'square'],
 };
 
 export const avatarRecipe: Recipe<typeof avatarVariants> = defineRecipe({

packages/silk-core/src/recipes/comment.ts

@@ -3,9 +3,12 @@ import {
   type Recipe,
   type VariantProps,
 } from './defineRecipe.js';
+import { mediaScaleSizes } from './mediaScale.js';
 
-const commentVariants = {
-  size: ['sm', 'md', 'lg'] as const,
+const commentVariants: {
+  readonly size: typeof mediaScaleSizes;
+} = {
+  size: mediaScaleSizes,
 };
 
 export const commentRecipe: Recipe<typeof commentVariants> = defineRecipe({

packages/silk/src/components/Avatar.tsx

@@ -22,12 +22,6 @@ export interface AvatarProps
  * Off the space scale on purpose: `density` rescales whitespace, and a face is
  * content — compacting a layout should not shrink the person in it.
  */
-const sizeMap = {
-  sm: `${mediaScale.sm.media}px`,
-  md: `${mediaScale.md.media}px`,
-  lg: `${mediaScale.lg.media}px`,
-} as const;
-
 const radiusMap = {
   circle: 'var(--silk-radius-full)',
   rounded: 'var(--silk-radius-md)',
@@ -38,7 +32,7 @@ const sizeRules: string = avatarRecipe.variants.size
   .map(
     (size) => `
     &:where([data-size='${size}']) {
-      --_size: ${sizeMap[size]};
+      --_size: ${mediaScale[size].media}px;
     }
   `,
   )
@@ -55,7 +49,7 @@ const shapeRules: string = avatarRecipe.variants.shape
   .join('\n');
 
 const avatarClass: string = css`
-  --_size: ${sizeMap.md};
+  --_size: ${mediaScale.md.media}px;
   --_resolved-size: var(--silk-avatar-size, var(--_size));
   display: inline-flex;
   align-items: center;

packages/silk/src/components/Comment.tsx

@@ -228,13 +228,11 @@ export interface CommentComponent {
   Header: typeof CommentHeader;
   Body: typeof CommentBody;
   Actions: typeof CommentActions;
-  Replies: typeof CommentReplies;
 }
 
 export const Comment: CommentComponent = Object.assign(CommentConvenience, {
   Root: CommentRoot,
   Header: CommentHeader,
   Body: CommentBody,
   Actions: CommentActions,
-  Replies: CommentReplies,
 });

packages/silk/src/components/CommentThread.tsx

@@ -10,10 +10,6 @@ const listClass: string = css`
   list-style: none;
 `;
 
-const listItemClass: string = css`
-  list-style: none;
-`;
-
 const continueButtonClass: string = css`
   align-self: flex-start;
 `;
@@ -95,7 +91,7 @@ function CommentThreadItem({
     ) : undefined;
 
   return (
-    <li className={listItemClass}>
+    <li>
       <Comment
         model={comment}
         onAction={(actionId) => {

packages/silk/src/components/EmptyState.tsx

@@ -36,7 +36,6 @@ function useEmptyStateContext(): EmptyStateContextValue {
 const gapBySize = { sm: '4', md: '5', lg: '6' } as const;
 /** Inside the copy block, so the title and description read as one unit. */
 const copyGapBySize = { sm: '1', md: '2', lg: '2' } as const;
-const headingBySize = { sm: 'sm', md: 'md', lg: 'lg' } as const;
 
 export interface EmptyStateRootProps
   extends ComponentPropsWithoutRef<'div'>, EmptyStateVariantProps {
@@ -94,12 +93,7 @@ function EmptyStateTitle({
 }: EmptyStateTitleProps): JSX.Element {
   const { size } = useEmptyStateContext();
   return (
-    <Heading
-      level="2"
-      size={headingBySize[size]}
-      className={className}
-      {...props}
-    >
+    <Heading level="2" size={size} className={className} {...props}>
       {children}
     </Heading>
   );

packages/silk/src/components/Identity.tsx

@@ -1,4 +1,5 @@
 import {
+  mediaObjectRecipe,
   mediaScale,
   type IdentityModel,
   type MediaScaleSize,
@@ -46,7 +47,7 @@ function IdentityRoot({
   ...props
 }: IdentityRootProps): JSX.Element {
   const defaults = useComponentDefaults('Identity');
-  const resolvedSize = size ?? defaults.size ?? 'md';
+  const resolvedSize = size ?? defaults.size ?? mediaObjectRecipe.defaults.size;
 
   return (
     <IdentityContext.Provider value={{ size: resolvedSize }}>

packages/silk/src/components/MediaObject.tsx

@@ -2,7 +2,6 @@ import {
   mediaObjectRecipe,
   mediaScale,
   type MediaObjectVariantProps,
-  type MediaScaleSize,
 } from '@reactive/silk-core';
 import { Slot } from 'radix-ui';
 import {
@@ -17,23 +16,15 @@ import { useComponentDefaults } from '../theme/SilkProvider';
 import { Inline } from './Inline';
 import { Stack } from './Stack';
 
-interface MediaObjectContextValue {
-  readonly align: NonNullable<MediaObjectVariantProps['align']>;
-  readonly gap: NonNullable<MediaObjectVariantProps['gap']>;
-  readonly mediaPosition: NonNullable<MediaObjectVariantProps['mediaPosition']>;
-  readonly size: MediaScaleSize;
-}
-
-const MediaObjectContext = createContext<MediaObjectContextValue | null>(null);
+/** Presence-only — compound parts consume layout from the Root, not context. */
+const MediaObjectContext = createContext(false);
 
-function useMediaObjectContext(): MediaObjectContextValue {
-  const ctx = useContext(MediaObjectContext);
-  if (!ctx) {
+function useMediaObjectContext(): void {
+  if (!useContext(MediaObjectContext)) {
     throw new Error(
       'MediaObject compound parts must be used within MediaObject.Root',
     );
   }
-  return ctx;
 }
 
 export interface MediaObjectRootProps
@@ -66,14 +57,7 @@ function MediaObjectRoot({
     mediaObjectRecipe.defaults.mediaPosition;
 
   return (
-    <MediaObjectContext.Provider
-      value={{
-        align: resolvedAlign,
-        gap: resolvedGap,
-        mediaPosition: resolvedMediaPosition,
-        size: resolvedSize,
-      }}
-    >
+    <MediaObjectContext.Provider value={true}>
       <Inline
         {...props}
         asChild={asChild}