Open Sourcel'Aicluse Open Source

Open-source JavaScript library

Supermax

Responsive cell distribution primitives for a left-to-right layout. Give Supermax a column budget and it returns which cells stay visible, how wide each cell should be, and which zoomable anchor gets priority.

Install the package View source

Responsive model

One focused pane when space is tight. More context when space is available.

Most responsive layouts handle narrow screens by stacking columns into one long page. That works for editorial content, but data-heavy applications often need a different rhythm: one focused pane on small screens, and as much useful context as possible when there is room.

Supermax is built around that hybrid. On a phone, a layout can behave like an iOS-style navigation stack: move one step deeper, show one cell, and go back when needed. On a wider screen, those same cells sit side by side and grow up to their configured max widths.

The result is a layout engine that protects each pane's single responsibility while using the available screen real estate, from a phone to a 34-inch monitor.

Responsive behavior comparison

Same shrink, different outcome.

Both viewports shrink in sync. One layout turns columns into a long page; the Supermax illustration keeps the same four cell responsibilities visible so the distribution stays readable at every page width.

Standard responsive Columns stack into a page
Supermax Cells stay intentional

Package

Install the package and let the host render.

Supermax is a framework-free ESM package. It does the distribution math; the host application owns rendering, transitions, persistence, and any reader, editor, or dashboard controls around it.

1. Add it

Pin the public GitHub package until it is published through a registry.

corepack pnpm add github:laicluse/supermax#69bf385

2. Describe cells

Each cell declares a minimum, maximum, title, and optional zoomable anchor behavior.

import { CellCollection } from "@laicluse/supermax";

const cells = new CellCollection([
  { id: "menu", title: "Menu", min: 3, max: 4 },
  { id: "list", title: "List", min: 5, max: 10 },
  { id: "article", title: "Article", min: 8, max: 28, zoomable: true },
  { id: "notes", title: "Notes", min: 6, max: 18 },
]);

const layout = cells.distribute(24, "article");

3. Render anywhere

The result is plain data: actual width, visibility, hidden count, rightmost hidden title, and spare columns.

Model

Small package, one job: fit cells into a changing viewport.

Column budget

The column budget is the only input that needs to change with the viewport. Supermax fills visible cells by weight and clamps them to each cell's min and max.

Zoomable anchors

When a zoomable cell becomes the anchor, earlier cells can collapse first so the active work area stays readable instead of blindly centered.

Plain output

The package returns serializable layout data. A reader, editor, or dashboard can map that data to CSS grid, panes, portals, or baked static HTML.

Source

A public source package under l'Aicluse.

The package exports CellCollection and CellProxy, and also assigns globalThis.Supermax for bundled browser compatibility. The public source lives at github.com/laicluse/supermax.