@cyrene/ui Standard & Architecture

This package provides a reference implementation for high-performance UI components built on Cyrene.

Core Principles

1. Signal-First: Internal state must use createSignal or defineStore. Avoid local let variables for reactive values.
2. Prop Transparency: Components should spread ...rest props to root elements when appropriate to allow for standard HTML attributes (id, class, etc.).
3. Zero-Wrapper Policy: Use <Fragment> or return raw DOM nodes to avoid "Div Soup" and maintain layout performance.
4. Themeable: All styles should use CSS Variables defined in @cyrene/ui/theme.

Example Component Template

import { h, onMount } from "@cyrene/core";
import { useStyles } from "../hooks/useStyles";

export function StandardButton(props) {
    const { label, onClick, ...rest } = props;
    const styles = useStyles();

    onMount(() => {
        console.log("Button mounted");
    });

    return () => (
        h("button", { 
            class: styles.button,
            onclick: onClick,
            ...rest 
        }, label)
    );
}

CSS Strategy

We use Scoped Styles generated by the Cyrene Compiler. Avoid global CSS whenever possible. Tokens are managed via ThemeProvider.