Support custom content components that use layer UI components in extending apps

[amondnet]

Summary

When extending the @pleaseai/docs layer in apps/docs, it's not possible to create custom content components (MDC components) that use UI components from the layer. This prevents apps from building reusable content components that leverage the layer's shadcn-vue UI components.

Problem Details

1. Layer structure:

   • UI components in packages/layer/app/components/ui/ (Card, Button, etc.)
   • Content components in packages/layer/app/components/content/ (Callout, Steps, etc.)

2. Current limitation:

   • UI components require explicit import (~/components/ui/card)
   • When apps/docs creates a custom content component (e.g., FeatureCard), it cannot import layer's UI components because ~/ resolves to apps/docs, not the layer

3. Workaround attempts and their limitations:

   • Making UI components global causes naming conflicts with content components (e.g., Tabs)
   • Cannot use shadcn-vue CLI in apps/docs because it doesn't detect Tailwind config (inherited from layer)

Desired Behavior

Apps extending the layer should be able to create custom content components that use the layer's UI components without naming conflicts or import path issues.

Solutions to Investigate

• Export UI components from layer package and import via package name
• Configure path aliases in apps/docs to access layer components
• Document the pattern for apps to manually copy needed UI components
• Research auto-global component registration for layer components with naming prefix

Context

• Layer packages: @pleaseai/docs
• Example app: apps/docs
• Related components: packages/layer/app/components/{ui,content}/