Curvea

Assets and Runtime

Built-in Helpers

Curvea includes small progressive-enhancement helpers that are injected only when their matching markup is used. They do not provide client-side routing, reactive state, or a framework runtime.

Icon

The Icon built-in is available when Lucide is installed in the project.

Add Lucide support with:

npx curvea add lucide

Use a self-closing Icon tag:

<Icon name="menu" class="site-icon" />

Curvea emits:

<i data-lucide="menu" class="site-icon"></i>

name is required. The built-in currently forwards the optional class value; other arbitrary attributes are not emitted by Icon.

The menu helper activates when the rendered HTML contains menu data attributes.

Attributes

  • data-csc-menu="id" declares a menu and its ID.
  • data-csc-menu-toggle="id" toggles the matching menu.
  • data-csc-menu-open="id" opens the matching menu.
  • data-csc-menu-close="id" closes the matching menu.
  • data-csc-menu-backdrop="id" closes the matching menu when clicked.
  • data-csc-menu-lock-scroll locks body scrolling while that menu is open.
  • data-csc-menu-hidden-class="class" uses a custom hidden class; it defaults to hidden when hidden-class behavior is active.

Example

<button type="button" data-csc-menu-toggle="main-menu">
  Menu
</button>

<nav
  data-csc-menu="main-menu"
  data-csc-menu-lock-scroll
  hidden
>
  <button type="button" data-csc-menu-close="main-menu">Close</button>
  <a href="/about">About</a>
</nav>

<div data-csc-menu-backdrop="main-menu"></div>

The runtime synchronizes data-state, aria-hidden, and trigger aria-expanded, handles open/close/toggle actions, and closes menus on Escape. IDs must match between controls and the target menu.

The lightbox helper activates when rendered HTML contains data-csc-lightbox.

Put the attribute on each clickable lightbox item. An anchor href is used as the full-size image source; without an href, Curvea falls back to the src of a nested <img>. The nested image alt text becomes both the preview alt text and caption.

Single trigger

<a href="/images/photo-full.jpg" data-csc-lightbox>
  <img src="/images/photo-thumb.jpg" alt="Studio portrait">
</a>

Give multiple items the same non-empty value:

<a href="/images/one.jpg" data-csc-lightbox="gallery">
  <img src="/images/one-thumb.jpg" alt="First image">
</a>

<a href="/images/two.jpg" data-csc-lightbox="gallery">
  <img src="/images/two-thumb.jpg" alt="Second image">
</a>

Items are grouped by the exact attribute value. All triggers with an empty data-csc-lightbox value share the built-in default group; use explicit group names when multiple independent galleries or single-image groups are needed on the same page.

The injected overlay provides:

  • backdrop and close-button dismissal
  • Escape to close
  • previous/next controls for groups
  • Arrow Left / Arrow Right keyboard navigation
  • wrap-around group navigation
  • captions from nested image alt
  • body scroll locking while open
  • built-in overlay styling

Navigation controls are hidden when the current group contains only one item.

The overlay's internal data-csc-lightbox-* controls are generated by Curvea; application markup only needs the data-csc-lightbox trigger attribute described above.

2 min read