@wix/zero-config-implementation 1.85.0 → 1.86.0

package/dist/index.d.ts

@@ -2396,6 +2396,7 @@ export declare interface PropInfo {
     min?: string;
     max?: string;
     isStateTrigger?: boolean;
+    activeItemIndexTarget?: string;
 }
 
 export declare interface PropSpyMeta {

package/dist/index.js

@@ -1,4 +1,4 @@
-import { B as t, D as e, E as o, I as n, N as c, P as l, R as i, a as p, V as E, b as m, c as x, d as f, e as d, f as u, h as C, i as I, j as k, k as y, l as A, m as D, n as P, o as R, p as h, q as B, r as M, s as T, t as b, w } from "./index-DBSnnglR.js";
+import { B as t, D as e, E as o, I as n, N as c, P as l, R as i, a as p, V as E, b as m, c as x, d as f, e as d, f as u, h as C, i as I, j as k, k as y, l as A, m as D, n as P, o as R, p as h, q as B, r as M, s as T, t as b, w } from "./index-EfIM-d53.js";
 import "react";
 export {
   t as BaseError,

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.85.0",
+  "version": "1.86.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -82,5 +82,5 @@
       ]
     }
   },
-  "falconPackageHash": "57c46654a2a7b434be3282e37ce2fff52e061ef822797e00a88ba528"
+  "falconPackageHash": "88fd007d78421c0861fdf823019f98813fd8a82582461e104c5ee2ef"
 }

package/src/converters/active-item-index-builder.test.ts

@@ -0,0 +1,149 @@
+import { DISPLAY_GROUPS } from '@wix/react-component-schema'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import type { CoupledProp } from '../information-extractors/react/types'
+import { buildActiveItemDisplayGroups, buildActiveItemIndexDisplayFilters } from './active-item-index-builder'
+
+function arrayProp(name: string): CoupledProp {
+  return { name, type: 'Array<Item>', resolvedType: { kind: 'array' } } as unknown as CoupledProp
+}
+
+function activeIndexProp(name: string, targetArrayProp: string): CoupledProp {
+  return {
+    name,
+    type: 'number',
+    resolvedType: { kind: 'primitive', value: 'number' },
+    activeItemIndexTarget: targetArrayProp,
+  } as unknown as CoupledProp
+}
+
+function numberProp(name: string): CoupledProp {
+  return { name, type: 'number', resolvedType: { kind: 'primitive', value: 'number' } } as unknown as CoupledProp
+}
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+describe('buildActiveItemDisplayGroups', () => {
+  it('emits displayGroups when ActiveItemIndex pairs with an array prop', () => {
+    const props = {
+      tabs: arrayProp('tabs'),
+      activeTab: activeIndexProp('activeTab', 'tabs'),
+    }
+
+    expect(buildActiveItemDisplayGroups(props)).toEqual({
+      tabs: {
+        displayName: 'Tab',
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.arrayItems,
+        arrayItems: {
+          arrayItems: 'tabs',
+          selectedItemIndex: 'activeTab',
+        },
+      },
+    })
+  })
+
+  it('keeps only the first ActiveItemIndex link when multiple pairs exist', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const props = {
+      tabs: arrayProp('tabs'),
+      activeTab: activeIndexProp('activeTab', 'tabs'),
+      slides: arrayProp('slides'),
+      activeSlide: activeIndexProp('activeSlide', 'slides'),
+    }
+
+    expect(buildActiveItemDisplayGroups(props)).toEqual({
+      tabs: {
+        displayName: 'Tab',
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.arrayItems,
+        arrayItems: {
+          arrayItems: 'tabs',
+          selectedItemIndex: 'activeTab',
+        },
+      },
+    })
+    expect(warnSpy).toHaveBeenCalledWith(
+      'Multiple ActiveItemIndex<> props found; only "activeTab" -> "tabs" is used. Dropping "activeSlide" -> "slides".',
+    )
+  })
+
+  it('keeps the first link and drops later indexes targeting the same array', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const props = {
+      tabs: arrayProp('tabs'),
+      activeTab: activeIndexProp('activeTab', 'tabs'),
+      selectedTab: activeIndexProp('selectedTab', 'tabs'),
+    }
+
+    expect(buildActiveItemDisplayGroups(props)).toEqual({
+      tabs: {
+        displayName: 'Tab',
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.arrayItems,
+        arrayItems: {
+          arrayItems: 'tabs',
+          selectedItemIndex: 'activeTab',
+        },
+      },
+    })
+    expect(warnSpy).toHaveBeenCalledWith(
+      'ActiveItemIndex<> link "selectedTab" -> "tabs" conflicts with an existing link — dropping.',
+    )
+  })
+
+  it('returns undefined when no ActiveItemIndex props exist', () => {
+    const props = {
+      tabs: arrayProp('tabs'),
+      count: numberProp('count'),
+    }
+
+    expect(buildActiveItemDisplayGroups(props)).toBeUndefined()
+  })
+
+  it('returns undefined when the target array prop does not exist', () => {
+    const props = {
+      activeTab: activeIndexProp('activeTab', 'nonexistent'),
+    }
+
+    expect(buildActiveItemDisplayGroups(props)).toBeUndefined()
+  })
+
+  it('returns undefined when the target prop is not an array type', () => {
+    const props = {
+      tabs: numberProp('tabs'),
+      activeTab: activeIndexProp('activeTab', 'tabs'),
+    }
+
+    expect(buildActiveItemDisplayGroups(props)).toBeUndefined()
+  })
+})
+
+describe('buildActiveItemIndexDisplayFilters', () => {
+  it('hides active index props from Settings data panel', () => {
+    const props = {
+      tabs: arrayProp('tabs'),
+      activeTab: activeIndexProp('activeTab', 'tabs'),
+    }
+
+    expect(buildActiveItemIndexDisplayFilters(props)).toEqual({
+      data: { hide: ['activeTab'] },
+    })
+  })
+
+  it('returns undefined when no ActiveItemIndex props exist', () => {
+    const props = {
+      tabs: arrayProp('tabs'),
+      count: numberProp('count'),
+    }
+
+    expect(buildActiveItemIndexDisplayFilters(props)).toBeUndefined()
+  })
+
+  it('returns undefined when the target prop is not an array type', () => {
+    const props = {
+      tabs: numberProp('tabs'),
+      activeTab: activeIndexProp('activeTab', 'tabs'),
+    }
+
+    expect(buildActiveItemIndexDisplayFilters(props)).toBeUndefined()
+  })
+})

package/src/converters/active-item-index-builder.ts

@@ -0,0 +1,90 @@
+/**
+ * Manifest emission for the `ActiveItemIndex<'<arrayProp>'>` marker type.
+ *
+ * The TS extractor sets `activeItemIndexTarget` on index props. This module is the
+ * single place that interprets that marker for the generated manifest:
+ *
+ *   - `buildActiveItemDisplayGroups` → `displayGroups.<arrayProp>` (`arrayItems` hat)
+ *   - `buildActiveItemIndexDisplayFilters` → `displayFilters.data.hide` (hide raw index)
+ *
+ * `displayGroups` and `displayFilters` stay separate exports because they are
+ * orthogonal manifest fields — they only share the same trigger here.
+ *
+ * Default value `0` for unset index props is applied in `buildData` inside
+ * `to-editor-component`, not here.
+ *
+ * Each index prop and array prop may participate in at most one link. Conflicts
+ * are logged and dropped; only the first valid link is emitted (one hat per component).
+ */
+
+import type { DisplayFilters, DisplayGroupItem } from '@wix/react-component-schema'
+import { DISPLAY_GROUPS } from '@wix/react-component-schema'
+import type { CoupledProp } from '../information-extractors/react'
+import { formatDisplayName, singularize } from './utils'
+
+interface ActiveItemIndexLink {
+  indexPropName: string
+  arrayPropName: string
+}
+
+export function buildActiveItemDisplayGroups(
+  props: Record<string, CoupledProp>,
+): Record<string, DisplayGroupItem> | undefined {
+  const groups: Record<string, DisplayGroupItem> = {}
+  const activeItemIndexLinks = collectValidActiveItemIndexLinks(props)
+
+  for (const { indexPropName, arrayPropName } of activeItemIndexLinks) {
+    groups[arrayPropName] = {
+      displayName: formatDisplayName(singularize(arrayPropName)),
+      groupType: DISPLAY_GROUPS.GROUP_TYPE.arrayItems,
+      arrayItems: {
+        arrayItems: arrayPropName,
+        selectedItemIndex: indexPropName,
+      },
+    }
+  }
+
+  return Object.keys(groups).length > 0 ? groups : undefined
+}
+
+export function buildActiveItemIndexDisplayFilters(props: Record<string, CoupledProp>): DisplayFilters | undefined {
+  const hiddenIndexProps = collectValidActiveItemIndexLinks(props).map((link) => link.indexPropName)
+  return hiddenIndexProps.length > 0 ? { data: { hide: hiddenIndexProps } } : undefined
+}
+
+function collectValidActiveItemIndexLinks(props: Record<string, CoupledProp>): ActiveItemIndexLink[] {
+  const links: ActiveItemIndexLink[] = []
+  const registeredIndexProps = new Set<string>()
+  const registeredArrayProps = new Set<string>()
+
+  for (const [indexPropName, prop] of Object.entries(props)) {
+    const arrayPropName = prop.activeItemIndexTarget
+    if (!arrayPropName) continue
+
+    const arrayProp = props[arrayPropName]
+    if (!arrayProp || arrayProp.resolvedType.kind !== 'array') continue
+
+    const conflictsWithRegisteredLink =
+      registeredIndexProps.has(indexPropName) || registeredArrayProps.has(arrayPropName)
+    if (conflictsWithRegisteredLink) {
+      console.warn(
+        `ActiveItemIndex<> link "${indexPropName}" -> "${arrayPropName}" conflicts with an existing link — dropping.`,
+      )
+      continue
+    }
+
+    const hasRegisteredLink = links.length > 0
+    if (hasRegisteredLink) {
+      console.warn(
+        `Multiple ActiveItemIndex<> props found; only "${links[0].indexPropName}" -> "${links[0].arrayPropName}" is used. Dropping "${indexPropName}" -> "${arrayPropName}".`,
+      )
+      continue
+    }
+
+    links.push({ indexPropName, arrayPropName })
+    registeredIndexProps.add(indexPropName)
+    registeredArrayProps.add(arrayPropName)
+  }
+
+  return links
+}

package/src/converters/to-editor-component.test.ts

@@ -318,3 +318,67 @@ describe('toEditorReactComponent — @property design tokens', () => {
     expect(editorElement?.cssProperties?.['--sdf-safelight-color']).toBeUndefined()
   })
 })
+
+describe('toEditorReactComponent — ActiveItemIndex display groups', () => {
+  it('emits displayGroups and hides the active index from Settings', () => {
+    const stringType = { kind: 'primitive' as const, value: 'string' as const }
+    const tabItemType = {
+      kind: 'object' as const,
+      properties: {
+        name: { name: 'name', type: 'string', required: false, resolvedType: stringType },
+        body: { name: 'body', type: 'string', required: false, resolvedType: stringType },
+      },
+    }
+
+    const component: ComponentInfoWithCss = {
+      componentName: 'SimpleTabs',
+      props: {
+        tabs: {
+          name: 'tabs',
+          type: 'Array<TabItem>',
+          required: false,
+          resolvedType: { kind: 'array', elementType: tabItemType },
+          propPath: 'props.tabs',
+          logicOnly: false,
+        },
+        activeTab: {
+          name: 'activeTab',
+          type: 'number',
+          required: false,
+          resolvedType: { kind: 'primitive', value: 'number' },
+          activeItemIndexTarget: 'tabs',
+          propPath: 'props.activeTab',
+          logicOnly: false,
+        },
+      },
+      elements: [
+        createSemanticElement({
+          traceId: 'trace-root',
+          name: 'root',
+          className: 'simple-tabs',
+        }),
+      ],
+      propUsages: new Map(),
+      css: [],
+      varUsedByTraceId: new Map(),
+    }
+
+    const editorElement = toEditorReactComponent(component).editorElement
+
+    expect(editorElement?.displayGroups).toEqual({
+      tabs: {
+        displayName: 'Tab',
+        groupType: 'arrayItems',
+        arrayItems: {
+          arrayItems: 'tabs',
+          selectedItemIndex: 'activeTab',
+        },
+      },
+    })
+    expect(editorElement?.displayFilters).toEqual({
+      data: { hide: ['activeTab'] },
+    })
+    expect(editorElement?.data?.activeTab?.defaultValue).toBe(0)
+    expect(editorElement?.data?.activeTab?.dataType).toBe('number')
+  })
+})

package/src/converters/to-editor-component.ts

@@ -25,6 +25,7 @@ import type {
 } from '../information-extractors/react'
 import { getDefaultDisplayForTag, resolveDisplayValue } from '../information-extractors/react'
 import { findPreferredSemanticClass, normalizeClassNames } from '../utils/css-class'
+import { buildActiveItemDisplayGroups, buildActiveItemIndexDisplayFilters } from './active-item-index-builder'
 import { resolveLonghand } from './css-longhand-resolver'
 import { type CustomClassTrigger, buildCustomStatesBlock } from './custom-states-builder'
 import { buildDataItem } from './data-item-builder'
@@ -94,6 +95,9 @@ function buildEditorElement(
       )
     : undefined
 
+  const displayGroups = buildActiveItemDisplayGroups(component.props)
+  const displayFilters = buildActiveItemIndexDisplayFilters(component.props)
+
   return {
     selector: buildSelector(rootElement),
     displayName: formatDisplayName(component.componentName),
@@ -109,6 +113,8 @@ function buildEditorElement(
     cssProperties: buildCssProperties(rootElement),
     cssCustomProperties: rootCustomProps,
     ...(rootStates && { states: rootStates }),
+    ...(displayGroups && { displayGroups }),
+    ...(displayFilters && { displayFilters }),
   }
 }
 
@@ -157,6 +163,10 @@ function buildData(
 
     const result = buildDataItem(prop, defaultValue, propUsages, prop.propPath)
     if (result.isErr()) throw result.error
+    // ActiveItemIndex props default to 0 when no default is specified
+    if (prop.activeItemIndexTarget && result.value.defaultValue === undefined) {
+      result.value.defaultValue = 0
+    }
     data[name] = result.value
   }
 

package/src/converters/utils.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { formatDisplayName } from './utils'
+import { formatDisplayName, singularize } from './utils'
 
 describe('formatDisplayName', () => {
   it('maps a11y to Accessibility', () => {
@@ -47,3 +47,16 @@ describe('formatDisplayName', () => {
     expect(formatDisplayName(longSingleWord).length).toBe(50)
   })
 })
+
+describe('singularize', () => {
+  it.each([
+    ['slides', 'slide'],
+    ['entries', 'entry'],
+    ['boxes', 'box'],
+    ['tabs', 'tab'],
+    ['glass', 'glass'],
+    ['item', 'item'],
+  ])('singularizes "%s" to "%s"', (input, expected) => {
+    expect(singularize(input)).toBe(expected)
+  })
+})

package/src/converters/utils.ts

@@ -41,3 +41,14 @@ export function formatDisplayName(input: string): string {
   const result = words.join(' ')
   return result.slice(0, DISPLAY_NAME_MAX_LENGTH)
 }
+
+/**
+ * Naive singularization for display names.
+ * Falls back to the original if no rule matches.
+ */
+export function singularize(name: string): string {
+  if (name.endsWith('ies')) return `${name.slice(0, -3)}y`
+  if (name.endsWith('ses') || name.endsWith('xes') || name.endsWith('zes')) return name.slice(0, -2)
+  if (name.endsWith('s') && !name.endsWith('ss')) return name.slice(0, -1)
+  return name
+}

package/src/information-extractors/ts/components.test.ts

@@ -18,6 +18,11 @@ const inheritedChildrenFixture = path.resolve(
   '../../../../example-components/src/components/InheritedChildren/component.tsx',
 )
 
+const activeItemIndexFixture = path.resolve(
+  __dirname,
+  '../../../../example-components/src/components/ActiveItemIndex/SimpleTabs/component.tsx',
+)
+
 describe('TS extractor — ElementState<> trigger detection', () => {
   it('flags an ElementState<>-wrapped prop and unwraps its inner type', async () => {
     const programResult = await compileTsFile(propTriggeredFixture)
@@ -79,3 +84,35 @@ describe('TS extractor — container children props', () => {
     expect(component!.props.label).toBeDefined()
   })
 })
+
+describe('TS extractor — ActiveItemIndex<> detection', () => {
+  it('flags an ActiveItemIndex<>-wrapped prop with the target array prop name and unwraps to number', async () => {
+    const programResult = await compileTsFile(activeItemIndexFixture)
+    expect(programResult.isOk()).toBe(true)
+    const program = programResult._unsafeUnwrap()
+
+    const components = extractAllComponentInfo(program, activeItemIndexFixture)
+    const component = components.find((candidate) => candidate.componentName === 'SimpleTabs')
+    expect(component).toBeDefined()
+
+    const activeTab = component!.props.activeTab
+    expect(activeTab.activeItemIndexTarget).toBe('tabs')
+    // The `ActiveItemIndex<'tabs'>` wrapper is unwrapped — the prop behaves as a plain number.
+    expect(activeTab.type).toBe('number')
+    // It should not be flagged as a state trigger.
+    expect(activeTab.isStateTrigger).toBeUndefined()
+  })
+
+  it('does not flag a plain number prop as an active item index', async () => {
+    const programResult = await compileTsFile(activeItemIndexFixture)
+    expect(programResult.isOk()).toBe(true)
+    const program = programResult._unsafeUnwrap()
+
+    const components = extractAllComponentInfo(program, activeItemIndexFixture)
+    const component = components.find((candidate) => candidate.componentName === 'SimpleTabs')
+    expect(component).toBeDefined()
+
+    // `tabs` is an array prop, not an active item index.
+    expect(component!.props.tabs.activeItemIndexTarget).toBeUndefined()
+  })
+})

package/src/information-extractors/ts/components.ts

@@ -211,25 +211,32 @@ function convertComponentDoc(doc: ComponentDoc, program: ts.Program, checker: ts
     // Resolve the type deeply
     let declaredTypeInfo: DeclaredTypeInfo | undefined
     let stateTrigger: StateTriggerInfo | undefined
+    let activeItemIndex: ActiveItemIndexInfo | undefined
     if (propSymbol) {
       const decl = propSymbol.getDeclarations()?.[0]
       if (decl) {
         const declSourceFile = decl.getSourceFile()
         declaredTypeInfo = getDeclaredTypeInfo(propSymbol, declSourceFile, checker)
         stateTrigger = detectStateTrigger(propSymbol, declSourceFile, checker)
+        activeItemIndex = detectActiveItemIndex(propSymbol, declSourceFile, checker)
       }
     }
 
     // An `ElementState<Inner>` prop should behave as its inner type everywhere except
     // for the `isStateTrigger` flag, so unwrap the inner type for `type` and resolution
     // (and drop the `ElementState` declared symbol so it isn't mistaken for a semantic type).
-    const typeString = stateTrigger?.innerTypeName ?? declaredTypeInfo?.name ?? propItem.type.name
+    // Similarly, `ActiveItemIndex<'arrayPropName'>` unwraps to `number`.
+    const typeString =
+      stateTrigger?.innerTypeName ??
+      (activeItemIndex ? 'number' : undefined) ??
+      declaredTypeInfo?.name ??
+      propItem.type.name
     const resolvedType = propType
       ? resolveType({
           type: propType,
           checker,
           typeString,
-          declaredSymbol: stateTrigger ? undefined : declaredTypeInfo?.symbol,
+          declaredSymbol: stateTrigger || activeItemIndex ? undefined : declaredTypeInfo?.symbol,
         })
       : { kind: 'primitive' as const, value: propItem.type.name }
 
@@ -255,6 +262,7 @@ function convertComponentDoc(doc: ComponentDoc, program: ts.Program, checker: ts
       min: parseNumericTag(tags?.min, propName, 'min'),
       max: parseNumericTag(tags?.max, propName, 'max'),
       isStateTrigger: stateTrigger ? true : undefined,
+      activeItemIndexTarget: activeItemIndex?.targetArrayProp,
     }
   }
 
@@ -506,6 +514,11 @@ interface StateTriggerInfo {
   innerTypeName: string
 }
 
+interface ActiveItemIndexInfo {
+  /** The string literal from the type argument, naming the target array prop. */
+  targetArrayProp: string
+}
+
 /**
  * Detects when a prop is declared with the `ElementState<>` marker type from
  * `@wix/react-component-utils` (e.g. `isLoading?: ElementState<boolean>`), which opts
@@ -558,6 +571,65 @@ function isElementStateAliasFromUtils(identifier: ts.Identifier, checker: ts.Typ
   return declaration.getSourceFile().fileName.includes('react-component-utils')
 }
 
+/**
+ * Detects when a prop is declared with the `ActiveItemIndex<>` marker type from
+ * `@wix/react-component-utils` (e.g. `activeTab?: ActiveItemIndex<'tabs'>`), which
+ * links the prop to an array data prop for the `displayGroups.arrayItems` manifest
+ * block. Returns the target array prop name from the string literal type argument.
+ * Returns `undefined` for any other declaration, or when the type argument is missing
+ * or not a string literal.
+ */
+function detectActiveItemIndex(
+  prop: ts.Symbol,
+  sourceFile: ts.SourceFile,
+  checker: ts.TypeChecker,
+): ActiveItemIndexInfo | undefined {
+  const declaration = prop.getDeclarations()?.[0]
+  if (!declaration) return undefined
+
+  if (
+    !(ts.isPropertySignature(declaration) || ts.isPropertyDeclaration(declaration) || ts.isParameter(declaration)) ||
+    !declaration.type ||
+    !ts.isTypeReferenceNode(declaration.type)
+  ) {
+    return undefined
+  }
+
+  const typeName = declaration.type.typeName
+  const identifier = ts.isIdentifier(typeName) ? typeName : typeName.right
+  if (identifier.text !== 'ActiveItemIndex') return undefined
+  if (!isActiveItemIndexAliasFromUtils(identifier, checker)) return undefined
+
+  // Require an explicit string literal type argument — bare ActiveItemIndex (no arg)
+  // compiles but gives ZeroConfig no array name to link to.
+  const typeArgs = declaration.type.typeArguments
+  if (!typeArgs || typeArgs.length !== 1) return undefined
+
+  const typeArgNode = typeArgs[0]
+  if (!ts.isLiteralTypeNode(typeArgNode) || !ts.isStringLiteral(typeArgNode.literal)) return undefined
+
+  return { targetArrayProp: typeArgNode.literal.text }
+}
+
+/**
+ * Confirms an identifier referencing `ActiveItemIndex` resolves to the marker type
+ * alias exported by `@wix/react-component-utils`, rather than an unrelated local
+ * type that happens to be named `ActiveItemIndex`.
+ */
+function isActiveItemIndexAliasFromUtils(identifier: ts.Identifier, checker: ts.TypeChecker): boolean {
+  let symbol = checker.getSymbolAtLocation(identifier)
+  if (!symbol) return false
+  if ((symbol.getFlags() & ts.SymbolFlags.Alias) !== 0) {
+    symbol = checker.getAliasedSymbol(symbol)
+  }
+
+  const declaration = symbol.getDeclarations()?.[0]
+  if (!declaration || !ts.isTypeAliasDeclaration(declaration)) return false
+  if (declaration.name.text !== 'ActiveItemIndex') return false
+
+  return declaration.getSourceFile().fileName.includes('react-component-utils')
+}
+
 function getDeclaredTypeInfo(
   prop: ts.Symbol,
   sourceFile: ts.SourceFile,

package/src/information-extractors/ts/types.ts

@@ -59,6 +59,11 @@ export interface PropInfo {
   // state. `type` and `resolvedType` reflect the unwrapped inner type, so the prop
   // still behaves as a normal data prop everywhere else.
   isStateTrigger?: boolean
+  // When the prop is wrapped in `ActiveItemIndex<'arrayPropName'>` from
+  // @wix/react-component-utils, carries the target array prop name. `type` and
+  // `resolvedType` reflect the unwrapped `number` type. Used by the display-groups
+  // builder to auto-generate the `displayGroups.arrayItems` manifest block.
+  activeItemIndexTarget?: string
 }
 
 export interface ComponentInfo {