fix(design): narrow recipe ownership and verify fixture coverage

Author: Bill Leoutsakos

packages/emcn/src/components/button/button.tsx

@@ -84,6 +84,11 @@ export interface ButtonProps
   iconPadding?: VariantProps<typeof buttonVariants>['iconPadding']
 }
 
+/**
+ * Consumers may stretch the button to their surrounding layout.
+ * @designAllow className width
+ * @designAllow style width
+ */
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, iconPadding, ...props }, ref) => {
     return (

packages/emcn/src/components/chip-modal/chip-modal.tsx

@@ -774,6 +774,7 @@ export type ChipModalFieldProps =
  * static permission list). For a multi-email chip-list input, prefer
  * `type='emails'` over a `type='custom'` `TagInput` wrapper — it internalizes
  * chip rendering, dedupe, format validation, paste, and Backspace handling.
+ * @designProtect className *
  */
 function ChipModalField(props: ChipModalFieldProps) {
   const id = React.useId()

packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx

@@ -290,6 +290,11 @@ interface DropdownMenuContentProps
   onOpenAutoFocus?: (event: Event) => void
 }
 
+/**
+ * Menu dimensions adapt to the consumer's content and viewport.
+ * @designAllow className dimensions
+ * @designAllow style dimensions
+ */
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
   DropdownMenuContentProps

packages/emcn/src/components/popover/popover.tsx

@@ -423,6 +423,8 @@ interface PopoverContentProps
 
 /**
  * Popover content with automatic positioning and collision detection.
+ * @designAllow className dimensions
+ * @designAllow style dimensions
  */
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,

scripts/design-conformance/README.md

@@ -35,6 +35,8 @@ CI uses immutable event base/head revisions. It publishes file/line warnings, a
 
 Each component's supported finite design props come from its public type and its implementation/defaults, rather than every value in an underlying shared recipe. For example Chip does not inherit ChipDropdown-only variants. Styling inputs are separate slots; forwarded chrome is traced to its actual owner. The generator never imports or runs product modules.
 
+Finite nested object lookups retain the selected recipe's properties. Barrel imports resolve to their implementation, and destructured inputs are excluded from rest forwarding. Studio fixture coverage follows each export separately: a family's adapter supports a variant only when that export actually receives the variant props. Nonvisual constants remain in the inventory without preview cards.
+
 ## Ownership metadata
 
 Ordinary layout remains local. Consumer changes to component-authored colours, typography, borders, radius, spacing, dimensions or effects are findings, including newly added components without registration. Use a supported component prop/variant first. Deliberate customization or ownership that cannot be inferred belongs in the component's existing TSDoc:

scripts/design-conformance/contracts.generated.json

@@ -75,7 +75,7 @@
         "height",
         "colour"
       ],
-      "permission": "Registered field icon slots own geometry; no universal icon size is inferred",
+      "permission": "Source-derived field icon slots own geometry; no universal icon size is inferred",
       "source": ".claude/rules/sim-styling.md#Chip Components (consumer usage)"
     },
     "central-definition": {

scripts/design-conformance/contracts.json

@@ -273,6 +273,44 @@ async function generate(
     }
     return
   }
+  const memberValues = (
+    file: string,
+    node: t.Node,
+    seen = new Set<string>()
+  ): { file: string; node: t.Node }[] => {
+    node = unwrap(node)
+    if (seen.size >= 12) return []
+    if (t.isIdentifier(node)) {
+      const ref = `${file}#${node.name}`
+      const found = locate(file, node.name)
+      return found && !seen.has(ref)
+        ? memberValues(found.file, found.node, new Set(seen).add(ref))
+        : []
+    }
+    if (t.isConditionalExpression(node) || t.isLogicalExpression(node)) {
+      const branches = t.isConditionalExpression(node)
+        ? [node.consequent, node.alternate]
+        : [node.left, node.right]
+      return branches.flatMap((branch) => memberValues(file, branch, seen))
+    }
+    if (t.isMemberExpression(node)) {
+      const selected =
+        !node.computed || t.isStringLiteral(node.property) || t.isNumericLiteral(node.property)
+          ? key(node.property)
+          : undefined
+      return memberValues(file, node.object, seen).flatMap((object) =>
+        t.isObjectExpression(object.node)
+          ? object.node.properties.flatMap((property) =>
+              t.isObjectProperty(property) &&
+              (selected === undefined || key(property.key) === selected)
+                ? memberValues(object.file, property.value, seen)
+                : []
+            )
+          : []
+      )
+    }
+    return [{ file, node }]
+  }
   const strings = (file: string, node: t.Node, seen = new Set<string>()): string[] => {
     node = unwrap(node)
     if (seen.size >= 12) {
@@ -304,16 +342,10 @@ async function generate(
       return node.properties.flatMap((p) =>
         t.isObjectProperty(p) ? strings(file, p.value, seen) : []
       )
-    if (t.isMemberExpression(node) && t.isIdentifier(node.object)) {
-      const found = locate(file, node.object.name)
-      if (!found && modules.get(file)?.imports.has(node.object.name))
-        note(
-          file,
-          node.loc?.start.line ?? 1,
-          `Unresolved imported styling: ${node.object.name}.${key(node.property)}`
-        )
-      if (found)
-        return strings(found.file, found.node, new Set(seen).add(`${file}#${node.object.name}`))
+    if (t.isMemberExpression(node)) {
+      const values = memberValues(file, node, seen)
+      if (!values.length) note(file, node.loc?.start.line ?? 1, 'Unresolved styling member lookup')
+      return values.flatMap((value) => strings(value.file, value.node, seen))
     }
     if (t.isFunction(node)) {
       const returns: t.Node[] = []
@@ -645,19 +677,24 @@ async function generate(
     const usedRecipes = new Set<string>()
     const params = new Map<string, string>()
     const objects = new Set<string>()
-    const rests = new Set<string>()
+    const rests = new Map<string, Set<string>>()
+    const patternProps = (pattern: t.ObjectPattern) => {
+      const consumed = new Set(
+        pattern.properties.flatMap((p) => (t.isObjectProperty(p) ? [key(p.key)] : []))
+      )
+      for (const field of pattern.properties) {
+        if (t.isRestElement(field) && t.isIdentifier(field.argument))
+          rests.set(field.argument.name, consumed)
+        if (t.isObjectProperty(field)) {
+          const value = t.isAssignmentPattern(field.value) ? field.value.left : field.value
+          if (t.isIdentifier(value)) params.set(value.name, key(field.key))
+        }
+      }
+    }
     if (meta.fn) {
       for (const p of meta.fn.params) {
         if (t.isIdentifier(p)) objects.add(p.name)
-        if (t.isObjectPattern(p))
-          for (const field of p.properties) {
-            if (t.isRestElement(field) && t.isIdentifier(field.argument))
-              rests.add(field.argument.name)
-            if (t.isObjectProperty(field)) {
-              const value = t.isAssignmentPattern(field.value) ? field.value.left : field.value
-              if (t.isIdentifier(value)) params.set(value.name, key(field.key))
-            }
-          }
+        if (t.isObjectPattern(p)) patternProps(p)
       }
       t.traverseFast(meta.fn.body, (n) => {
         if (
@@ -666,14 +703,7 @@ async function generate(
           t.isIdentifier(n.init) &&
           objects.has(n.init.name)
         )
-          for (const field of n.id.properties) {
-            if (t.isRestElement(field) && t.isIdentifier(field.argument))
-              rests.add(field.argument.name)
-            if (t.isObjectProperty(field)) {
-              const value = t.isAssignmentPattern(field.value) ? field.value.left : field.value
-              if (t.isIdentifier(value)) params.set(value.name, key(field.key))
-            }
-          }
+          patternProps(n.id)
       })
       const propOf = (n: t.Node) =>
         t.isIdentifier(n)
@@ -727,22 +757,24 @@ async function generate(
             forwards: [],
           }
         }
-        const spread = n.attributes.some(
-          (a) =>
-            t.isJSXSpreadAttribute(a) &&
-            t.isIdentifier(a.argument) &&
-            (rests.has(a.argument.name) || objects.has(a.argument.name))
-        )
+        const spreadInputs = new Set<string>()
+        for (const attribute of n.attributes) {
+          if (!t.isJSXSpreadAttribute(attribute) || !t.isIdentifier(attribute.argument)) continue
+          const name = attribute.argument.name
+          if (!rests.has(name) && !objects.has(name)) continue
+          for (const input of Object.keys(entry.slots))
+            if (!rests.get(name)?.has(input)) spreadInputs.add(input)
+        }
         for (const attribute of n.attributes)
           if (t.isJSXSpreadAttribute(attribute) && t.isIdentifier(attribute.argument)) {
             const bundle = bundles.get(attribute.argument.name)
             if (bundle && !native)
               for (const [forwarded, input] of bundle)
                 entry.slots[input]?.forwards.push({ target, slot: forwarded })
           }
-        if (spread && !native)
-          for (const [name, slot] of Object.entries(entry.slots))
-            slot.forwards.push({ target, slot: name })
+        if (!native)
+          for (const input of spreadInputs)
+            entry.slots[input].forwards.push({ target, slot: input })
         for (const attr of n.attributes) {
           if (!t.isJSXAttribute(attr) || !attr.value) continue
           const slotName = key(attr.name)
@@ -769,7 +801,7 @@ async function generate(
               }
             }
           })
-          if (spread && entry.slots[slotName]) inputs.add(slotName)
+          if (spreadInputs.has(slotName)) inputs.add(slotName)
           const owned = protectedFor([
             ...strings(meta.file, value),
             ...[...recipes].flatMap((r) => out.recipes[r].classes),
@@ -781,7 +813,14 @@ async function generate(
                 if (category(property)) owned.push(family(property))
               }
             })
-          if (slotName === 'className' && inputs.has('className') && entry.slots.style)
+          if (
+            native &&
+            slotName === 'className' &&
+            inputs.has('className') &&
+            (spreadInputs.has('style') ||
+              n.attributes.some((a) => t.isJSXAttribute(a) && key(a.name) === 'style')) &&
+            entry.slots.style
+          )
             inputs.add('style')
           for (const input of inputs) {
             const slot = entry.slots[input]
@@ -871,8 +910,47 @@ async function generate(
     }
   }
   // Resolve slot forwarding to a fixed point. Unknown routes stay diagnostics, never permission.
-  const publicTarget = (target: string) =>
-    target.startsWith('@sim/emcn#') ? target.slice(10) : internalIds.get(target)
+  const targetCache = new Map<string, string | undefined>()
+  const publicTarget = (target: string): string | undefined => {
+    if (target.startsWith('@sim/emcn#')) return target.slice(10)
+    if (internalIds.has(target)) return internalIds.get(target)
+    if (targetCache.has(target)) return targetCache.get(target)
+    const [file, name] = target.split('#')
+    const module = program.getSourceFile(path.join(virtualRoot, file))
+    const moduleSymbol = module && checker.getSymbolAtLocation(module)
+    const [root, ...members] = (name ?? '').split('.')
+    let symbol =
+      moduleSymbol && checker.getExportsOfModule(moduleSymbol).find((s) => s.name === root)
+    for (const member of members) {
+      if (!symbol) break
+      if (symbol.flags & ts.SymbolFlags.Alias) symbol = checker.getAliasedSymbol(symbol)
+      const declaration = symbol.valueDeclaration ?? symbol.declarations?.[0]
+      symbol = declaration
+        ? checker.getTypeOfSymbolAtLocation(symbol, declaration).getProperty(member)
+        : undefined
+    }
+    if (symbol?.flags && symbol.flags & ts.SymbolFlags.Alias)
+      symbol = checker.getAliasedSymbol(symbol)
+    let declaration = symbol?.valueDeclaration ?? symbol?.declarations?.[0]
+    if (declaration && ts.isShorthandPropertyAssignment(declaration)) {
+      symbol = checker.getShorthandAssignmentValueSymbol(declaration)
+      declaration = symbol?.valueDeclaration ?? symbol?.declarations?.[0]
+    }
+    const sourceName =
+      declaration &&
+      ts.isPropertyAssignment(declaration) &&
+      ts.isIdentifier(declaration.initializer)
+        ? declaration.initializer.text
+        : symbol?.name
+    const result =
+      declaration && sourceName
+        ? internalIds.get(
+            `${path.relative(virtualRoot, declaration.getSourceFile().fileName)}#${sourceName}`
+          )
+        : undefined
+    targetCache.set(target, result)
+    return result
+  }
   for (let pass = 0; pass < 12; pass++) {
     let changed = false
     for (const entry of Object.values(out.exports))

scripts/design-conformance/generated-contracts.ts

@@ -496,7 +496,7 @@ test('CLI on synthetic repositories preserves 0/1/2, writes complete reports, an
     run(['--repo', valid.repo, '--ref', 'HEAD', '--output', path.join(valid.base, 'quiet')]).status
   ).toBe(0)
   expect(f.git('status', '--porcelain')).toBe(status)
-})
+}, 60_000)
 
 test('scanner matches an external review ledger without hiding raw findings', async () => {
   const f = fixture({ [component]: text('text-[#123456]') })

scripts/design-scan/inventory.test.ts

@@ -116,7 +116,8 @@ function usageIndex(componentNames, iconNames) {
             const kind =
               from === '@sim/emcn/icons'
                 ? 'icon'
-                : componentNames.has(name)
+                : componentNames.has(name) ||
+                    [...componentNames].some((n) => n.startsWith(`${name}.`))
                   ? 'component'
                   : iconNames.has(name)
                     ? 'icon'
@@ -132,18 +133,20 @@ function usageIndex(componentNames, iconNames) {
         const tag = jsxName(node.name)
         const parts = tag.split('.')
         const from = namespaces.get(parts[0])
-        const record = from
+        let record = from
           ? {
-              name: parts[1],
+              name: parts.slice(1).join('.'),
               kind:
                 from === '@sim/emcn/icons'
                   ? 'icon'
-                  : componentNames.has(parts[1])
+                  : componentNames.has(parts.slice(1).join('.'))
                     ? 'component'
                     : 'icon',
             }
           : imported.get(parts[0])
         if (!record) return
+        if (!from && parts.length > 1)
+          record = { ...record, name: `${record.name}.${parts.slice(1).join('.')}` }
         const key = `${record.kind}:${record.name}`
         if (!(record.kind === 'component' ? componentNames : iconNames).has(record.name)) return
         const site = {
@@ -171,20 +174,19 @@ function fixtureInventory() {
   walk(ast, (node) => {
     if (node.type !== 'SwitchCase' || node.test?.type !== 'StringLiteral') return
     const names = new Set()
-    let acceptsVariant = false
+    const variantNames = new Set()
     for (const statement of node.consequent)
       walk(statement, (part) => {
-        if (part.type === 'JSXOpeningElement') names.add(jsxName(part.name).split('.')[0])
-        if (part.type === 'JSXSpreadAttribute')
-          walk(part.argument, (value) => {
-            if (value.type === 'Identifier' && value.name === 'variantProps') acceptsVariant = true
-          })
-        if (part.type === 'JSXAttribute' && part.value)
-          walk(part.value, (value) => {
-            if (value.type === 'Identifier' && value.name === 'variant') acceptsVariant = true
+        if (part.type !== 'JSXOpeningElement') return
+        const name = jsxName(part.name)
+        names.add(name)
+        for (const attribute of part.attributes)
+          walk(attribute, (value) => {
+            if (value.type === 'Identifier' && ['variantProps', 'variant'].includes(value.name))
+              variantNames.add(name)
           })
       })
-    cases.set(node.test.value, { names, acceptsVariant })
+    cases.set(node.test.value, { names, variantNames })
   })
   return cases
 }
@@ -203,7 +205,7 @@ function componentInventory() {
     source: path.join(repo, facts.source.file),
     facts,
   }))
-  const componentExports = discovered.filter((item) => item.facts.kind !== 'icon')
+  const componentExports = discovered.filter((item) => item.facts.kind === 'component')
   const iconExports = discovered.filter((item) => item.facts.kind === 'icon')
   const byName = new Map()
   for (const item of componentExports)
@@ -295,7 +297,9 @@ function componentInventory() {
       values: axis.values.map(String),
       defaultValue: axis.default === undefined ? undefined : String(axis.default),
     }))
-    const supportsVariants = Boolean(fixture && fixtureCases.get(fixture.id)?.acceptsVariant)
+    const supportsVariants = Boolean(
+      fixture && fixtureCases.get(fixture.id)?.variantNames.has(item.name)
+    )
     for (const axis of axes)
       for (const value of axis.values) {
         if (value === axis.defaultValue) continue