Dreamodus
54189ad07a
Docs/playground accuracy (from a full docs-vs-source audit): - Playground: drag-feel select covers pickup/relative rotary modes, is disabled for faders, and generated code no longer emits props the target component does not accept - API/README claims corrected: Shift-fine wheel scope, wheelStep and decimals defaults, trackInset row, data-part and ref-forwarding scope, VintageKnob readout exception, Meter peakHold tag, stale component lists, aria-valuetext wording, also-exported list API consistency fixes surfaced by the audit and the tutorial: - Keyboard gestures now fire onChangeStart (bracket parity with drag/ wheel - fixes gesture-scoped undo patterns) - name (hidden form input) added to Fader, LEDFader, ImageKnob - PushButton gets a themed keyboard-only focus ring + data-focus-visible New docs content: - Getting Started: 7-step guide with live examples and a gotchas list - Advanced guide: 8-step channel-strip tutorial ending in a live, themed, gesture-undoable strip with meter (plus headless demo) - Synth section: playable Web Audio synth - osc/filter/env/LFO/master all dreamknob controls, momentary-pad keyboard, analyser-driven Meter
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { AdvancedGuide } from './sections/AdvancedGuide';
|
|
import { ApiDocs } from './sections/ApiDocs';
|
|
import { Console } from './sections/Console';
|
|
import { Gallery } from './sections/Gallery';
|
|
import { GettingStarted } from './sections/GettingStarted';
|
|
import { Hero } from './sections/Hero';
|
|
import { Playground } from './sections/Playground';
|
|
import { Synth } from './sections/Synth';
|
|
|
|
const Logo: React.FC = () => (
|
|
<svg width="22" height="22" viewBox="0 0 100 100">
|
|
<circle cx="50" cy="50" r="42" fill="#18191f" stroke="#4cc2ff" strokeWidth="7" />
|
|
<line x1="50" y1="50" x2="50" y2="15" stroke="#4cc2ff" strokeWidth="9" strokeLinecap="round" />
|
|
</svg>
|
|
);
|
|
|
|
export const App: React.FC = () => (
|
|
<>
|
|
<nav className="nav">
|
|
<div className="container nav-inner">
|
|
<a className="nav-logo" href="#">
|
|
<Logo />
|
|
dreamknob
|
|
</a>
|
|
<div className="nav-links">
|
|
<a href="#start">Start</a>
|
|
<a href="#gallery">Gallery</a>
|
|
<a href="#synth">Synth</a>
|
|
<a href="#playground">Playground</a>
|
|
<a href="#guide">Guide</a>
|
|
<a href="#docs">Docs</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<Hero />
|
|
<GettingStarted />
|
|
<Gallery />
|
|
<Console />
|
|
<Synth />
|
|
<Playground />
|
|
<AdvancedGuide />
|
|
<ApiDocs />
|
|
<footer className="footer">
|
|
<div className="container">
|
|
dreamknob · MIT · built with a headless core, SVG and zero runtime dependencies
|
|
</div>
|
|
</footer>
|
|
</>
|
|
);
|