Tibi

Components

A small set of self-contained .tibi components used in the docs site. Each is a single file — drop the tag into any template to render. The compiler rewrites every call as a real Web Component (<tibi-{kebab-tag}>) carrying a <template shadowrootmode="open">: SSR-friendly, fully isolated styles, attribute-driven re-renders. String props (name="Alice") and slotted children both work today; typed Rust #[derive(Props)] arrives with the proc-macros in Phase 4d.

Greeting — props demo

String attributes interpolated via {name} tokens in the child template. Values are HTML-escaped at substitution time.

Card — props + slot demo

Pass children (paired form) and the component splices them into its <slot/> marker. Title + tag come through as props.

SSG writes static HTML at build, SSR renders per request, hybrid splices interactive islands into a static shell.

Server-pushed channels declared by the consuming component via the __channels frontmatter convention. The TimeNow component below registers + subscribes to its own time channel.

BrandHero

Brand mark + tagline. Useful as a page intro.

StatTile

Single big number + label. Composes into stat grids.

BadgeRow

Status pills for a feature matrix.

InfoCallout / WarnCallout / SuccessCallout

Three colour-coded callouts sharing the same shape.

Spinner

CSS-only spinner for loading regions.

KbdHint

Inline keyboard shortcuts.

TimeNow

Declares its own time server channel via the __channels frontmatter convention (1s ISO-8601 tick) and subscribes to it client-side via Tibi.ws.subscribe('time', fn).

Visits

IndexedDB-persisted counter via Tibi.store. The TTL comes from the docs namespace declared in .tibi-config via [[store]] — the component just calls Tibi.store.set(key, value) with no TTL. Reload the page to see it bump.

ThemeToggle

Writes document.body.dataset.theme, persists via Tibi.store. Pair with CSS that reads body[data-theme="dark"] if you want a manual override on top of prefers-color-scheme.

Counter — tibi-script v2 demo

Pure tibi-script template directives — @click handlers, {{count}} interpolation, :disabled reactive attribute, t-show toggle, t-for list. The component's script just declares state + an effect; the compiler wires every binding from the template.