Add hidden prop to layout components for declarative conditional rendering

[Copilot]

Replaces JSX conditional operators (&&) with a declarative hidden prop for cleaner, type-safe conditional rendering in widget templates.

Changes

New variant system

• Added hidden boolean variant that returns null when true
• Integrated into existing variant infrastructure at variants/hidden.ts

Component updates

• Layout components: Box, Row, Col
• Display components: Badge, Image
• All return null early when hidden={true}

Template fixes

• social-media-post.ts: {data.image && <Image />} → <Image hidden={!data.image} />
• email-preview.ts: {data.unread && <Badge />} → <Badge hidden={!data.unread} />

Example

Before:

{data.image && <Image src={data.image} />}

After:

<Image src={data.image} hidden={!data.image} />

Screenshots

Gallery with updated templates

Social Media Post template

Email Preview template

Original prompt

Design a hidden variant for the layout widget components.

• When hidden is true, return null in the rendering.
• Fix the conditional rendering in the template of widgets in the gallery page

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.