| 1 | /** |
| 2 | * studio-next is a research project, not a production app. See SPIKE-REPORT.md |
| 3 | * for the full conclusion. |
| 4 | * |
| 5 | * Current contents: a two-pane SourceEditor + live srcDoc preview, used to |
| 6 | * confirm `@hyperframes/studio` imports cleanly in Vite + React 19. The |
| 7 | * earlier `<Player>` + `useElementPicker` attempt is documented in the |
| 8 | * report; that path requires a hf-compatible backend we don't have, so |
| 9 | * the production studio at packages/project-studio (port 3071) stays in |
| 10 | * charge. |
| 11 | */ |
| 12 | import { useState } from 'react'; |
| 13 | import { SourceEditor } from '@hyperframes/studio'; |
| 14 | |
| 15 | const SAMPLE_HTML = `<!doctype html> |
| 16 | <html><head><meta charset="utf-8"><style> |
| 17 | html,body{margin:0;height:100%;background:#0f0a2e;color:#fff;font-family:system-ui,sans-serif;display:grid;place-items:center} |
| 18 | h1{font-size:8vw;letter-spacing:-.02em;text-align:center;padding:0 4vw} |
| 19 | </style></head><body> |
| 20 | <h1 data-hv-text="headline">Open Design</h1> |
| 21 | </body></html>`; |
| 22 | |
| 23 | export function App() { |
| 24 | const [html, setHtml] = useState(SAMPLE_HTML); |
| 25 | return ( |
| 26 | <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', height: '100vh', gap: 12, padding: 12 }}> |
| 27 | <div style={{ background: '#1a1a1f', borderRadius: 8, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}> |
| 28 | <div style={{ padding: '8px 12px', borderBottom: '1px solid #2a2a30', fontSize: 12, color: '#8a8a90', flex: '0 0 auto' }}> |
| 29 | @hyperframes/studio · SourceEditor |
| 30 | </div> |
| 31 | <div style={{ flex: 1, overflow: 'auto' }}> |
| 32 | <SourceEditor value={html} language="html" onChange={setHtml} /> |
| 33 | </div> |
| 34 | </div> |
| 35 | <div style={{ background: '#000', borderRadius: 8, overflow: 'hidden', position: 'relative' }}> |
| 36 | <iframe srcDoc={html} sandbox="allow-scripts" style={{ width: '100%', height: '100%', border: 0 }} /> |
| 37 | <div style={{ position: 'absolute', top: 8, right: 12, fontSize: 11, color: 'rgba(255,255,255,.4)', fontFamily: 'monospace' }}> |
| 38 | live preview |
| 39 | </div> |
| 40 | </div> |
| 41 | </div> |
| 42 | ); |
| 43 | } |
| 44 |