Version 0.1.15

Released: May 21, 2025

New Features

Button SpellBlock

The ~ button ~ SpellBlock provides a comprehensive solution for creating styled, interactive link buttons with extensive customization options:

{~ button href="/features" ~}
Learn More
{~~}

Renders as a styled button linking to /features

Button Features

Button with Visual Styling:

{~ button href="/download-report" type="success" size="lg" ~}
Download Report
{~~}

Button with Icons:

{~ button href="/settings" type="secondary" icon_left="sb-icon-settings" ~}
Manage Settings
{~~}

Disabled Button:

{~ button href="/restricted" type="primary" disabled="true" ~}
Access Restricted
{~~}

Button Parameters

• href: URL for link buttons (creates <a> tag)
• type: Visual style ("default", "primary", "secondary", "success", "warning", "danger", "info", "accent", "black", "white", "emphasis", "subtle", "distinct", "aether", "artifact", "sylvan")
• size: Button size ("sm", "md", "lg")
• target: Link target (e.g., "_blank")
• disabled: Disabled state (true/false)
• icon_left/icon_right: Icon classes for button decoration
• class: Custom CSS classes
• id: HTML id attribute

Align SpellBlock

The ~ align ~ SpellBlock offers precise control over content positioning and layout with intelligent dimension handling:

{~ align pos="center" width="80%" class="sb-border sb-p-2" ~}
### Centered Content
This content is perfectly centered with specific dimensions.
{~~}

Smart Dimension Processing

The Align SpellBlock intelligently processes width and height values:

• "auto" remains as CSS auto
• Numbers ≤ 100 become percentages: 50 → 50%
• Numbers > 100 become pixels: 300 → 300px
• Explicit units preserved: "75%", "150px"

{~ align pos="end" width="60" content_align="start" class="sb-border sb-p-2" ~}
### Right-Aligned Container
This content is positioned at the end (right) with 60% width.
Text content is aligned to the start (left) within the container.
{~~}

Align Parameters

• pos: Container position ("start", "center", "end")
• width: Container width (auto, percentage, pixels)
• height: Container height (auto, percentage, pixels)
• content_align: Text alignment within container ("start", "center", "end")
• class: Custom CSS classes for container
• content_class: Custom CSS classes for inner content
• id: HTML id attribute

Architecture Improvements

CSS Architecture Modernization

Color Utilities Module

All color-related utilities are now organized in a dedicated module:

• Background Colors: sb-bg-primary, sb-bg-success, opacity variants
• Text Colors: sb-primary, sb-secondary, sb-accent with opacity support
• Border Colors: sb-border-primary, sb-border-neutral with variants
• Hover States: sb-hover:bg-primary, sb-hover:text-accent-75

Future Roadmap

This architectural foundation enables exciting upcoming features:

• Nested SpellBlocks: Complex layouts with parent-child relationships
• Database-Connected Blocks: Q&A systems, dynamic content blocks
• Advanced Form Components: Complete form building with validation
• Grid and Layout Systems: Sophisticated responsive layouts
• Performance Optimizations: Caching and incremental processing