c3fb63a113
Sixteen primitives at src/primitives/, each with its own .module.css and a .demo.tsx that wires the primitive to live local state. All primitives are typed (strict), pointer-event based (touch + mouse), keyboard-accessible where it makes sense, and free of business logic. Primitives: - Slider, SliderBank: value sliders with optional curve mapping; collapsible sections. - VirtualJoystick, XYPad: 2D pointer input, returning [0,1]^2. - Heatmap: NxN canvas rendering with three color modes (luminance/variance/divergence) and a configurable palette. - OutputDisplay: bar chart of N output values. - TrainingControls: thumbs-up/down/undo + train/randomise + status. - Drawer: portal'd slide-in panel from left or right; ESC + scrim close. - ControlAxis: compound-axis slider (Boldness/Memory/Precision shape) with active-preset hint, endpoint labels, double-tap-to-relink. - ProgressRing: SVG circular progress with optional inline label. - PillToggle: segmented radio control. - ParamEditor: min/max/curve/mute/pin/fixedValue editor for a single param. - JoyMap: zoom minimap with adaptive grid + zoom window, vanishing trail with Catmull-Rom spline + tap-to-return, dual concentric noise rings, region pin overlays, frozen overlay. - WeightHealth: 10-bin histogram + dead/saturating/healthy status glow. - GradientFlow: per-layer bar chart with vanishing/exploding/converged color coding. - LossPlot: log-scale line chart of training loss history. App.tsx now wires the /dev/primitives route to a lazy-loaded PrimitivesShowcase that renders all sixteen demos in a responsive grid. Lazy import keeps the home page bundle ~20 kB while the showcase ships its own ~42 kB chunk. Stream 8 of the rewrite (meml-911).
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import { Component, For } from 'solid-js';
|
|
import styles from './PillToggle.module.css';
|
|
|
|
export interface PillToggleOption {
|
|
value: string;
|
|
label: string;
|
|
}
|
|
|
|
export interface PillToggleProps {
|
|
options: ReadonlyArray<PillToggleOption>;
|
|
value: () => string;
|
|
onChange: (v: string) => void;
|
|
/** Optional aria label for the group. */
|
|
ariaLabel?: string;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export const PillToggle: Component<PillToggleProps> = (props) => {
|
|
return (
|
|
<div
|
|
class={styles.group}
|
|
classList={{ [styles.disabled]: !!props.disabled }}
|
|
role="radiogroup"
|
|
aria-label={props.ariaLabel ?? 'segmented control'}
|
|
>
|
|
<For each={props.options}>{(opt) => (
|
|
<button
|
|
type="button"
|
|
class={styles.pill}
|
|
classList={{ [styles.active]: props.value() === opt.value }}
|
|
role="radio"
|
|
aria-checked={props.value() === opt.value}
|
|
onClick={() => !props.disabled && props.onChange(opt.value)}
|
|
disabled={props.disabled}
|
|
>
|
|
{opt.label}
|
|
</button>
|
|
)}</For>
|
|
</div>
|
|
);
|
|
};
|