@skirbi/dibuho

@skirbi/dibuho defines how things are put together.

It composes Semtic components into reusable UI patterns and ships composition CSS that uses Pinta’s tokens.

When to use it

• Use native HTML or Semtic for individual controls and semantic structure.
• Use CSS for spacing and layout details, and Pinta for theme tokens and recipes.
• Use Dibuho for a composition that already matches your use case.

What it ships

The current component registration includes:

• dibuho-container-panel: a Semtic panel with an optional header and a body containing your content.
• dibuho-cancel-button: a button for leaving an edit page, with a fallback URL.

The earlier header, topbar, hero, article, and related-content proposals are not registered components in the current package. Dibuho is still evolving through use in applications.

Examples

<dibuho-container-panel title="Account details">
  <semtic-input label="Display name" name="display_name"></semtic-input>
</dibuho-container-panel>

The panel wraps its children in a body stack. Omitting title removes its header.

<dibuho-cancel-button fallback="/accounts">Cancel</dibuho-cancel-button>

This renders a native button with the extra role. Its click handler uses history.back() when the referrer starts with the current origin; otherwise it navigates to fallback. The label defaults to “Cancel” and the fallback URL defaults to /.

Theming

Dibuho ships its own composition styles in lib/themes/dibuho.css, using Pinta tokens. These rules are gated by [skirbi-theme] and participate in skirbi-components; there is no separate dibuho-components layer.

Use skirbi-app for application overrides. For example, the container panel exposes a body hook you can style with ordinary CSS:

@layer skirbi-app {
  [skirbi-theme] [dibuho-container-panel-body] {
    padding: 1.5rem;
  }
}

Philosophy

If something feels like it belongs in dibuho, it probably doesn’t. Until it does. Which means you’ve written it three times. The fourth is when you start adding it to dibuho.