Toolbox Backports
Small reusable primitives lifted from downstream applications after generalizing them for the starter.
Action buttons
Inspired by htmx-crud-starter's URL button helper: route-aware buttons with optional confirmation and htmx attributes.
= component('basic/action-button', [
'label' => 'Open Dashboard',
'route' => 'dashboard',
'variant' => 'primary',
]) ?>
= component('basic/action-button', [
'label' => 'Confirmable Action',
'route' => 'toolbox',
'confirm' => 'This is only a demo. Continue?',
]) ?>
= component('basic/action-button', [
'label' => 'HTMX-shaped Button',
'route' => 'toolbox',
'tag' => 'button',
'htmx' => true,
'method' => 'get',
'target' => '#toolbox-demo-target',
'push_url' => false,
]) ?>
Target placeholder for htmx-enabled apps.
Info pill
Backported from the training platform for terse labels that reveal explanatory context on hover or keyboard focus.
Course summary
= component('basic/info-pill', [
'label' => 'Why this matters',
'content_html' => '
'.safe('Keep dense tables readable while preserving nearby detail for users who need it.').'
',
]) ?>
Tile grid
Inspired by my.kautschuk.com's image tile navigation component.
= component('navigation/tile-grid', [
'items' => [
['caption' => 'Themes', 'description' => 'Compare visual shells', 'url' => 'themes', 'image' => 'img/cat01.jpg'],
['caption' => 'Workspace', 'description' => 'Admin shell primitives', 'url' => 'workspace', 'image' => 'img/cat02.jpg'],
['caption' => 'Gauges', 'description' => 'KPI visualization', 'url' => 'gauges', 'image' => 'img/cat03.jpg'],
],
]) ?>