@wix/zero-config-implementation 1.98.0 → 1.100.0

package/src/information-extractors/react/extractors/css-properties.test.ts

@@ -5,6 +5,7 @@ import type { MatchedCssData } from '../../css/types'
 import type { ExtractedElement } from './core/tree-builder'
 import {
   enrichContainerProperties,
+  enrichFlexProperties,
   getCssPropertiesForTag,
   getDefaultDisplayForTag,
   hasContainerLikeDisplay,
@@ -173,8 +174,8 @@ describe('getCssPropertiesForTag', () => {
     expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
   })
 
-  it('gives interactive controls both box and text properties', () => {
-    for (const tag of ['button', 'select', 'textarea']) {
+  it('gives controls that render their own text both box and text properties', () => {
+    for (const tag of ['select', 'textarea']) {
       const relevantProperties = getCssPropertiesForTag(tag)
 
       expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
@@ -183,6 +184,16 @@ describe('getCssPropertiesForTag', () => {
     }
   })
 
+  it('treats a button as box-generating but not text-bearing, except for color', () => {
+    const relevantProperties = getCssPropertiesForTag('button')
+
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
+    // `color` resolves `currentColor` in borders, outlines and fills, text or not
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.color)
+    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
+    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.textAlign)
+  })
+
   it('treats an input with no type as text-bearing', () => {
     const relevantProperties = getCssPropertiesForTag('input')
 
@@ -242,6 +253,131 @@ describe('getCssPropertiesForTag', () => {
     expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
     expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
   })
+
+  it('gives block/replaced elements the full margin family regardless of box/text/media semantics', () => {
+    for (const tag of ['div', 'p', 'img']) {
+      const relevantProperties = getCssPropertiesForTag(tag)
+
+      expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginTop)
+      expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginBottom)
+      expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineStart)
+      expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineEnd)
+    }
+  })
+
+  it('gives non-replaced inline elements only the horizontal margins, per CSS margin-on-inline-boxes rules', () => {
+    for (const tag of ['span', 'a', 'em', 'b', 'i']) {
+      const relevantProperties = getCssPropertiesForTag(tag)
+
+      expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineStart)
+      expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineEnd)
+      expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginTop)
+      expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginBottom)
+    }
+  })
+
+  it('gives internal table display elements no margin at all, per CSS 2.1 §17.6.1', () => {
+    for (const tag of ['tr', 'thead', 'tbody', 'tfoot', 'col', 'colgroup', 'td', 'th']) {
+      const relevantProperties = getCssPropertiesForTag(tag)
+
+      expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginTop)
+      expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginBottom)
+      expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineStart)
+      expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginInlineEnd)
+    }
+  })
+
+  it('gives box-generating elements width, height, overflow and mix-blend-mode', () => {
+    const relevantProperties = getCssPropertiesForTag('div')
+
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.width)
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.height)
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.overflow)
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.mixBlendMode)
+  })
+
+  it('gives media elements sizing, object-fit/position and mix-blend-mode', () => {
+    const relevantProperties = getCssPropertiesForTag('img')
+
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.width)
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.height)
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.overflow)
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.objectFit)
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.objectPosition)
+    expect(relevantProperties).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.mixBlendMode)
+  })
+
+  it('keeps text-only tags without width/height/overflow/object-fit', () => {
+    const relevantProperties = getCssPropertiesForTag('p')
+
+    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.width)
+    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.height)
+    expect(relevantProperties).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.objectFit)
+  })
+})
+
+describe('enrichFlexProperties', () => {
+  it('adds flexDirection/justifyContent/alignItems to a flex container', () => {
+    const elements = [createElementWithCssProperties('div', 'display: flex')]
+
+    const [enrichedElement] = enrichFlexProperties(elements)
+    const cssData = enrichedElement.extractorData.get('css-properties') as { relevant: string[] }
+
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.flexDirection)
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.justifyContent)
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.alignItems)
+    expect(cssData.relevant).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.alignSelf)
+  })
+
+  it('does not add flex container properties to a non-flex/grid element', () => {
+    const elements = [createElementWithCssProperties('div', 'display: block')]
+
+    const [enrichedElement] = enrichFlexProperties(elements)
+    const cssData = enrichedElement.extractorData.get('css-properties') as { relevant: string[] }
+
+    expect(cssData.relevant).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.flexDirection)
+    expect(cssData.relevant).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.justifyContent)
+    expect(cssData.relevant).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.alignItems)
+  })
+
+  it('adds alignSelf to direct children of a flex/grid container', () => {
+    const child = createElementWithCssProperties('span', '')
+    const parent: ExtractedElement = {
+      ...createElementWithCssProperties('div', 'display: flex'),
+      children: [child],
+    }
+
+    const [enrichedParent] = enrichFlexProperties([parent])
+    const enrichedChild = enrichedParent.children[0]
+    const childCssData = enrichedChild.extractorData.get('css-properties') as { relevant: string[] }
+
+    expect(childCssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.alignSelf)
+  })
+
+  it('does not add alignSelf to children of a non-flex/grid container', () => {
+    const child = createElementWithCssProperties('span', '')
+    const parent: ExtractedElement = {
+      ...createElementWithCssProperties('div', 'display: block'),
+      children: [child],
+    }
+
+    const [enrichedParent] = enrichFlexProperties([parent])
+    const enrichedChild = enrichedParent.children[0]
+    const childCssData = enrichedChild.extractorData.get('css-properties') as { relevant: string[] }
+
+    expect(childCssData.relevant).not.toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.alignSelf)
+  })
+
+  it('adds flex container properties to a grid container as well', () => {
+    const elements = [createElementWithCssProperties('div', 'display: grid')]
+
+    const [enrichedElement] = enrichFlexProperties(elements)
+    const cssData = enrichedElement.extractorData.get('css-properties') as { relevant: string[] }
+
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.flexDirection)
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.justifyContent)
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.alignItems)
+  })
 })
 
 describe('getDefaultDisplayForTag', () => {
@@ -394,4 +530,14 @@ describe('enrichContainerProperties', () => {
     expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
     expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
   })
+
+  it('adds box properties to span when display is signaled only via the --display root convention, not a literal display declaration', () => {
+    const elements = [createElementWithCssProperties('span', '--display: block')]
+
+    const [enrichedElement] = enrichContainerProperties(elements)
+    const cssData = enrichedElement.extractorData.get('css-properties') as { relevant: string[] }
+
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.font)
+    expect(cssData.relevant).toContain(CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop)
+  })
 })

package/src/information-extractors/react/extractors/css-properties.ts

@@ -30,7 +30,8 @@ export interface SemanticAttributes {
 
 /**
  * Text & Typography - elements where readability and hierarchy are primary.
- * Form controls render their own text; `input` varies by type (see below).
+ * `select`, `textarea`, and `input` render their own text; `input` varies by type
+ * (see below). `button` is absent on purpose - see CONTENT_DEPENDENT_TEXT_TAGS.
  */
 const TEXT_TAGS = new Set([
   'h1',
@@ -48,11 +49,21 @@ const TEXT_TAGS = new Set([
   'em',
   'b',
   'i',
-  'button',
   'select',
   'textarea',
 ])
 
+/**
+ * Tags whose text comes from their content rather than their own rendering, so
+ * tree building decides once the rendered subtree is known.
+ */
+const CONTENT_DEPENDENT_TEXT_TAGS = new Set(['button'])
+
+/** Whether the tag's content, rather than the tag itself, decides typography. */
+export function rendersTextThroughContent(tag: string): boolean {
+  return CONTENT_DEPENDENT_TEXT_TAGS.has(tag.toLowerCase())
+}
+
 /** Anything else - including a missing or invalid `type` - defaults to text. */
 const NON_TEXT_INPUT_TYPES = new Set(['checkbox', 'radio', 'range', 'color', 'file', 'image', 'hidden'])
 
@@ -88,6 +99,70 @@ const BOX_CSS_PROPERTIES = [
   CSS_PROPERTY_TYPE.borderEndStartRadius,
   CSS_PROPERTY_TYPE.borderEndEndRadius,
   CSS_PROPERTY_TYPE.boxShadow,
+  CSS_PROPERTY_TYPE.width,
+  CSS_PROPERTY_TYPE.height,
+  CSS_PROPERTY_TYPE.overflow,
+  CSS_PROPERTY_TYPE.mixBlendMode,
+]
+
+/**
+ * Margin applies to most DOM elements regardless of box/text/media
+ * semantics, so it's appended in `getCssPropertiesForTag` rather than gated
+ * to one of the trait-based sets above — except for the display-dependent
+ * carve-outs in `getMarginPropertiesForTag` below.
+ */
+const MARGIN_CSS_PROPERTIES = [
+  CSS_PROPERTY_TYPE.marginTop,
+  CSS_PROPERTY_TYPE.marginBottom,
+  CSS_PROPERTY_TYPE.marginInlineStart,
+  CSS_PROPERTY_TYPE.marginInlineEnd,
+]
+
+const HORIZONTAL_MARGIN_CSS_PROPERTIES = [CSS_PROPERTY_TYPE.marginInlineStart, CSS_PROPERTY_TYPE.marginInlineEnd]
+
+/**
+ * Per CSS 2.1 §17.6.1, margin does not apply to elements with these internal
+ * table display values — the table layout algorithm ignores it entirely.
+ */
+const MARGIN_UNSUPPORTED_DISPLAY_VALUES = new Set([
+  'table-row',
+  'table-row-group',
+  'table-header-group',
+  'table-footer-group',
+  'table-column',
+  'table-column-group',
+  'table-cell',
+])
+
+/**
+ * Margin properties relevant to a tag's default display. Internal table
+ * display values (`tr`, `thead`/`tbody`/`tfoot`, `col`/`colgroup`, `td`/`th`)
+ * don't honor margin at all. Non-replaced inline elements (`span`, `a`, …)
+ * only honor the horizontal (inline) margins — `margin-top`/`margin-bottom`
+ * have no effect on them. Replaced inline elements (`img`, `video`, …) honor
+ * margin on every side, same as a block box.
+ */
+function getMarginPropertiesForTag(tag: string): string[] {
+  const normalizedTag = tag.toLowerCase()
+  const defaultDisplay = getDefaultDisplayForTag(normalizedTag)
+
+  if (MARGIN_UNSUPPORTED_DISPLAY_VALUES.has(defaultDisplay)) {
+    return []
+  }
+  if (defaultDisplay === 'inline' && !MEDIA_TAGS.has(normalizedTag)) {
+    return HORIZONTAL_MARGIN_CSS_PROPERTIES
+  }
+  return MARGIN_CSS_PROPERTIES
+}
+
+/**
+ * Child-layout controls for flex/grid containers, added post-hoc by
+ * `enrichFlexProperties` once the element's resolved `display` is known.
+ */
+const FLEX_CONTAINER_CSS_PROPERTIES = [
+  CSS_PROPERTY_TYPE.flexDirection,
+  CSS_PROPERTY_TYPE.justifyContent,
+  CSS_PROPERTY_TYPE.alignItems,
 ]
 
 /**
@@ -117,6 +192,12 @@ const MEDIA_CSS_PROPERTIES = [
   CSS_PROPERTY_TYPE.borderEndStartRadius,
   CSS_PROPERTY_TYPE.borderEndEndRadius,
   CSS_PROPERTY_TYPE.boxShadow,
+  CSS_PROPERTY_TYPE.width,
+  CSS_PROPERTY_TYPE.height,
+  CSS_PROPERTY_TYPE.overflow,
+  CSS_PROPERTY_TYPE.objectFit,
+  CSS_PROPERTY_TYPE.objectPosition,
+  CSS_PROPERTY_TYPE.mixBlendMode,
 ]
 
 function hasTextSemantics(tag: string, attributes: SemanticAttributes = {}): boolean {
@@ -157,6 +238,10 @@ export function getCssPropertiesForTag(tag: string, attributes: SemanticAttribut
 
   if (hasTextProperties) {
     properties.push(...TEXT_CSS_PROPERTIES)
+  } else if (rendersTextThroughContent(tag)) {
+    // `color` resolves `currentColor` in borders, outlines and fills even with no
+    // text; the rest of the typography waits until tree building sees the content.
+    properties.push(CSS_PROPERTY_TYPE.color)
   }
   if (hasMediaProperties) {
     properties.push(...MEDIA_CSS_PROPERTIES)
@@ -165,6 +250,7 @@ export function getCssPropertiesForTag(tag: string, attributes: SemanticAttribut
     properties.push(...BOX_CSS_PROPERTIES)
   }
 
+  properties.push(...getMarginPropertiesForTag(tag))
   properties.push(CSS_PROPERTY_TYPE.display)
   return [...new Set(properties)]
 }
@@ -204,6 +290,27 @@ export function addGapProperty(existing: string[]): string[] {
   return [...existing, CSS_PROPERTY_TYPE.gap]
 }
 
+/**
+ * Adds flex/grid container CSS properties to an existing property list without duplicates.
+ */
+export function addFlexContainerProperties(existing: string[]): string[] {
+  const result = [...existing]
+  for (const property of FLEX_CONTAINER_CSS_PROPERTIES) {
+    if (!result.includes(property)) {
+      result.push(property)
+    }
+  }
+  return result
+}
+
+/**
+ * Adds the `alignSelf` CSS property to an existing property list if not already present.
+ */
+export function addAlignSelfProperty(existing: string[]): string[] {
+  if (existing.includes(CSS_PROPERTY_TYPE.alignSelf)) return existing
+  return [...existing, CSS_PROPERTY_TYPE.alignSelf]
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Display Value Resolution
 // ─────────────────────────────────────────────────────────────────────────────
@@ -397,7 +504,7 @@ function hasUnresolvableDisplayVar(matcherData: MatchedCssData): boolean {
   return resolveCssPropertyValue(displayProperty, matcherData.customProperties) === undefined
 }
 
-function hasDisplayDeclaration(matcherData: MatchedCssData): boolean {
+function hasLiteralDisplayDeclaration(matcherData: MatchedCssData): boolean {
   for (const match of matcherData.matches) {
     for (const property of match.properties) {
       if (property.name === 'display') return true
@@ -406,14 +513,30 @@ function hasDisplayDeclaration(matcherData: MatchedCssData): boolean {
   return false
 }
 
+export const ROOT_DISPLAY_CUSTOM_PROPERTY = '--display'
+
+function hasEffectiveDisplayDeclaration(matcherData: MatchedCssData): boolean {
+  return (
+    hasLiteralDisplayDeclaration(matcherData) ||
+    matcherData.customProperties[ROOT_DISPLAY_CUSTOM_PROPERTY] !== undefined
+  )
+}
+
+function resolveEffectiveDisplayValue(matcherData: MatchedCssData): string | undefined {
+  const resolved = resolveDisplayValue(matcherData)
+  if (resolved !== undefined) return resolved
+  if (hasLiteralDisplayDeclaration(matcherData)) return undefined
+  return matcherData.customProperties[ROOT_DISPLAY_CUSTOM_PROPERTY]
+}
+
 export function hasFlexOrGridDisplay(matcherData: MatchedCssData): boolean {
-  const displayValue = resolveDisplayValue(matcherData)
+  const displayValue = resolveEffectiveDisplayValue(matcherData)
   if (displayValue !== undefined) return displayUsesFlexOrGridLayout(displayValue)
   return hasUnresolvableDisplayVar(matcherData)
 }
 
 export function hasContainerLikeDisplay(matcherData: MatchedCssData): boolean {
-  const displayValue = resolveDisplayValue(matcherData)
+  const displayValue = resolveEffectiveDisplayValue(matcherData)
   if (displayValue !== undefined) return displayCreatesContainerBox(displayValue)
   return hasUnresolvableDisplayVar(matcherData)
 }
@@ -441,7 +564,7 @@ function hasDefaultBoxProperties(tag: string, role?: string): boolean {
 }
 
 function hasEffectiveContainerDisplay(tag: string, role?: string, matcherData?: MatchedCssData): boolean {
-  if (matcherData && hasDisplayDeclaration(matcherData)) {
+  if (matcherData && hasEffectiveDisplayDeclaration(matcherData)) {
     return hasContainerLikeDisplay(matcherData)
   }
 
@@ -473,6 +596,40 @@ export function enrichGapProperties(elements: ExtractedElement[]): ExtractedElem
   })
 }
 
+/**
+ * Walks the element tree and adds flex/grid layout controls to relevant CSS
+ * properties: `flexDirection`/`justifyContent`/`alignItems` on elements whose
+ * own display is flex|grid, and `alignSelf` on their direct children (the
+ * property that actually targets flex/grid items per the CSS spec).
+ * Must be called after CSS selector matching (requires css-matcher data).
+ */
+export function enrichFlexProperties(
+  elements: ExtractedElement[],
+  parentIsFlexOrGridContainer = false,
+): ExtractedElement[] {
+  return elements.map((element) => {
+    const matcherData = element.extractorData.get('css-matcher') as MatchedCssData | undefined
+    const isFlexOrGridContainer = matcherData ? hasFlexOrGridDisplay(matcherData) : false
+    const cssData = element.extractorData.get('css-properties') as CssPropertiesData | undefined
+
+    if (cssData) {
+      let relevant = cssData.relevant
+      if (isFlexOrGridContainer) {
+        relevant = addFlexContainerProperties(relevant)
+      }
+      if (parentIsFlexOrGridContainer) {
+        relevant = addAlignSelfProperty(relevant)
+      }
+      element.extractorData.set('css-properties', { relevant })
+    }
+
+    return {
+      ...element,
+      children: enrichFlexProperties(element.children, isFlexOrGridContainer),
+    }
+  })
+}
+
 /**
  * Walks the element tree and adds box properties to selected text tags
  * when CSS overrides `display` or default UA display creates a box.

package/src/information-extractors/react/extractors/index.ts

@@ -28,8 +28,10 @@ export {
   createCssPropertiesExtractor,
   enrichGapProperties,
   enrichContainerProperties,
+  enrichFlexProperties,
   resolveDisplayValue,
   getDefaultDisplayForTag,
+  ROOT_DISPLAY_CUSTOM_PROPERTY,
 } from './css-properties'
 export type { CssPropertiesData } from './css-properties'
 

package/src/information-extractors/react/extractors/prop-tracker.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest'
 import { createRefElementMarker } from '../../../extensions/ref-elements/path-utils'
 import type { RefElementMatch } from '../../../extensions/ref-elements/types'
 import { ExtractorStore } from './core/store'
-import { createPropTrackerExtractor } from './prop-tracker'
+import { type PropTrackerData, createPropTrackerExtractor } from './prop-tracker'
 
 function markRefElementComponent(runtimeComponent: (...args: unknown[]) => unknown, refComponentType: string): void {
   Object.defineProperty(
@@ -248,4 +248,22 @@ describe('createPropTrackerExtractor', () => {
       selector: '.card-cta',
     })
   })
+
+  it('persists the empty-slot signal onto the element data', () => {
+    const store = new ExtractorStore()
+    const { extractor } = createPropTrackerExtractor()
+
+    extractor.onCreateElement?.({
+      type: 'button',
+      isDomElement: true,
+      tag: 'button',
+      traceId: 'trace-1',
+      props: { className: 'trigger' },
+      children: [],
+      hasEmptySlot: true,
+      store,
+    })
+
+    expect(store.get<PropTrackerData>('trace-1', 'prop-tracker')?.hasEmptySlot).toBe(true)
+  })
 })

package/src/information-extractors/react/extractors/prop-tracker.ts

@@ -26,6 +26,8 @@ export interface PropTrackerData {
   concatenatedAttrs: Map<string, string> // attrName → propName (for concatenated values)
   /** on*-handler prop names whose value is a function on this element (e.g. ['onClick', 'onChange']). */
   eventHandlers: string[]
+  /** True when a child slot rendered nothing, so the content is unknown. */
+  hasEmptySlot: boolean
 }
 
 export interface PropTrackerExtractorState {
@@ -170,6 +172,7 @@ export function createPropTrackerExtractor(options?: CreatePropTrackerExtractorO
         boundProps: [...boundProps],
         concatenatedAttrs,
         eventHandlers,
+        hasEmptySlot: event.hasEmptySlot ?? false,
       } satisfies PropTrackerData)
 
       attachMatchedRefElement(traceId, props, store)

package/src/information-extractors/react/extractors/state-markers.test.ts

@@ -15,6 +15,7 @@ function makeElement(input: {
     boundProps: [],
     concatenatedAttrs: new Map(),
     eventHandlers: input.eventHandlers ?? [],
+    hasEmptySlot: false,
   }
   return {
     traceId: 'trace-0',

package/src/information-extractors/react/index.ts

@@ -18,8 +18,10 @@ export {
   createCssPropertiesExtractor,
   enrichGapProperties,
   enrichContainerProperties,
+  enrichFlexProperties,
   resolveDisplayValue,
   getDefaultDisplayForTag,
+  ROOT_DISPLAY_CUSTOM_PROPERTY,
   inferSupportedNativeStates,
 } from './extractors'
 

package/src/manifest-pipeline.ts

@@ -10,6 +10,7 @@ import {
   createCssPropertiesExtractor,
   createPropTrackerExtractor,
   enrichContainerProperties,
+  enrichFlexProperties,
   enrichGapProperties,
   runExtractors,
 } from './information-extractors/react'
@@ -151,9 +152,10 @@ export function processComponent(
       const matchResult = matchCssSelectors(html, extractedElements, css)
       const containerEnrichedElements = enrichContainerProperties(matchResult.elements)
       const gapEnrichedElements = enrichGapProperties(containerEnrichedElements)
+      const flexEnrichedElements = enrichFlexProperties(gapEnrichedElements)
       enhancedInfo = {
         ...enhancedInfo,
-        elements: convertElements(gapEnrichedElements),
+        elements: convertElements(flexEnrichedElements),
       }
       varUsedByTraceId = matchResult.varUsedByTraceId
     } catch (thrownError) {