feat: add Collapsible component (React playground "show internals" style)

[Copilot]

Implements a horizontal collapsible panel list modelled after the React playground's "show internals" UI. Each panel collapses to a narrow strip with vertically-rotated title text, and expands inline to reveal its content.

Changes

• src/showcase/collapsible/Collapsible.tsx (new)

  • CollapsiblePanel — local state toggle; collapsed state uses writing-mode: vertical-rl + rotate(180deg) for the label; expanded state uses flex-1 to fill available width
  • Collapsible — renders 14 demo panels in a horizontal flex row, using React compiler pass names matching the issue spec (HIR, SSA, AnalyseFunctions, etc.)

• src/App.tsx — adds /collapsible route and nav button

Key implementation detail

// collapsed: vertical label, fixed narrow width
// expanded: flex-1 fills remaining space
<div className={`border-r border-gray-300 flex flex-col overflow-hidden ${isOpen ? 'flex-1 min-w-48' : 'w-8'}`}>
  <button style={isOpen ? undefined : { writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}>
    {isOpen ? `- ${title}` : title}
  </button>
  {isOpen && <div className="p-2 overflow-auto flex-1 font-mono text-sm whitespace-pre">{children}</div>}
</div>

Screenshots

All collapsed

HIR expanded

Original prompt

---

This section details on the original issue you should resolve

<issue_title>component: collapsible component 1</issue_title>
<issue_description>All collapsed:

Expanded:

Refer to

• https://playground.react.dev/
• click show internals</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes component: collapsible component 1 #1

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.