feat(studio): Hyperview Studio — visual HXML builder

[smitp]

Summary

• Introduces Hyperview Studio, a drag-and-drop visual builder for designing HXML screens, located in studio/.
• Built on Craft.js + Vite + React + TypeScript + Tailwind CSS.
• Includes 20 MDS components with full prop APIs, linked-node slot systems, searchable icon picker, behavior editor, style catalog, bidirectional code panel, and built-in HXML preview server.

Key Features

• Full HXML element palette: view, text, image, form fields (text-field, date-field, select, switch), lists
• 20 MDS components: Button (14 props), ListItem (4 slots), Alert (slots + links), Titlebar (slots + progress), Card, Banner, Callout, Avatar, Dialog, Bottomsheet (3 slots), Carousel, CarouselItem, List (5 slots), Text (12 type variants)
• Searchable icon picker: 280+ icons from Instawork token definitions
• Behavior editor: triggers, actions, hrefs, events, alert/scroll namespace support
• Style catalog: global style definitions with modifier states (pressed, selected, focused)
• Code panel: Monaco editor with bidirectional canvas ↔ HXML sync
• Preview server: built-in HXML server with WebSocket hot-reload
• Serialization: full HXML export/import roundtrip with namespace support (mds, worker-app, ui, icon)
• Keyboard shortcuts: undo/redo, delete, duplicate, escape to deselect

Test plan

• cd studio && npm install && npm run dev starts without errors
• Drag MDS Button onto canvas → configure all 14 props in property panel
• Drag MDS ListItem → verify 4 drop zones (Left, Content, Right, Bottom) accept children
• Export HXML → verify valid XML with correct namespaces
• Import exported HXML → verify roundtrip fidelity
• Toggle Code panel → verify bidirectional sync
• Icon picker → search and select icons

Made with Cursor