DreamKnob/apps/docs/src/App.tsx
Dreamodus a6348d5c46 v1.1.2: action button, responsive faders, label scaling
Third integration-feedback release from building the streaming studio.

- New `Button` — a click-to-fire command button in the panel style, the
  non-latching sibling of PushButton. Implemented as PushButton's new
  `mode="action"` (never latches, press-down + brief LED flash, `onClick`);
  led="dot" (default) matches the corner-dot look, led={false} is plain.
- `fill` on LEDFader (parity with Fader) — faders stretch to fill their
  container in resizable panels instead of a fixed pixel length.
- `labelSize` on IndicatorLamp (and LampRow) — shrink the caption below its
  10px floor to match dense header rows.
- Docs: a dedicated "Buttons & switches" section with a decision guide
  (Button/PushButton/TransportButton/ToggleSwitch/SegmentSwitch) + live demos.

Library + docs typecheck and build; 38 tests pass.
2026-07-14 06:33:15 -07:00

54 lines
1.6 KiB
TypeScript

import React from 'react';
import { AdvancedGuide } from './sections/AdvancedGuide';
import { ApiDocs } from './sections/ApiDocs';
import { Buttons } from './sections/Buttons';
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="#buttons">Buttons</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 />
<Buttons />
<Console />
<Synth />
<Playground />
<AdvancedGuide />
<ApiDocs />
<footer className="footer">
<div className="container">
dreamknob · MIT © Dreamodus Software Inc. · built with a headless core, SVG and
zero runtime dependencies
</div>
</footer>
</>
);