Renders an A4 page container with margins, white background, shadow, and optional header/footer areas.

The container is styled for A4 dimensions (210mm x 297mm) at @media print. On screen, it renders as a white page with shadow and padding approximating standard margins (25.4mm). Page number is shown in the footer when provided.

Example

<.a4_page id="page-1" page_number={1}>
  <:header>My Document</:header>
  Page content goes here.
  <:footer>Confidential</:footer>
</.a4_page>

Attributes

• id (:string) (required) - Unique identifier for the A4 page.
• page_number (:integer) - Page number (displayed in footer). Defaults to nil.
• show_header (:boolean) - Whether to render the header slot. Defaults to true.
• show_footer (:boolean) - Whether to render the footer slot. Defaults to true.
• class (:string) - Additional CSS classes. Defaults to nil.
• Global attributes are accepted. Additional HTML attributes.

Slots

• header - Optional header content for the page.
• inner_block (required) - Main page content.
• footer - Optional footer content for the page.

Renders an executable code block with a code editor textarea and an output display area.

The header shows the language label and a "Run" button that dispatches phx-click="code-sandbox:run" with the block ID. The output area renders in a monospace pre element with a muted background.

Example

<.code_sandbox_block
  id="sandbox-1"
  language="elixir"
  code="IO.puts(:hello)"
  output="hello"
/>

Attributes

• id (:string) (required) - Unique identifier for the code sandbox.
• language (:string) - Programming language label. Defaults to "javascript".
• code (:string) - Source code content. Defaults to "".
• output (:string) - Execution output text. Defaults to "".
• class (:string) - Additional CSS classes. Defaults to nil.

Renders a multi-column layout with CSS grid and vertical dividers between columns.

Each column has min-w-0 to prevent content overflow, and a vertical divider with cursor-col-resize and hover highlight between columns. Columns are indexed via data-column-index.

Example

<.columns_block id="two-col" columns={2}>
  <:column>Left column content</:column>
  <:column>Right column content</:column>
</.columns_block>

Attributes

• id (:string) (required) - Unique identifier for the columns block.
• columns (:integer) - Number of columns (1-4). Defaults to 2.
• class (:string) - Additional CSS classes. Defaults to nil.
• Global attributes are accepted. Additional HTML attributes.

Slots

• column - Individual column content (repeatable slot).

Renders a header or footer bar for A4 page containers.

For headers: displays the document title on the left. For footers: displays the document title on the left and the page number (with optional total pages) on the right.

Example

<.page_header_footer type={:header} document_title="Annual Report 2025" />
<.page_header_footer type={:footer} document_title="Annual Report" page_number={3} total_pages={12} />

Attributes

• id (:string) - Optional identifier. Defaults to nil.
• type (:atom) - Whether this is a header or footer. Defaults to :header. Must be one of :header, or :footer.
• page_number (:integer) - Current page number. Defaults to nil.
• total_pages (:integer) - Total number of pages. Defaults to nil.
• document_title (:string) - Document title to display. Defaults to nil.
• class (:string) - Additional CSS classes. Defaults to nil.

Renders a reusable content reference block with a "Synced" badge indicator.

Synced blocks display the same content as the original source block. Changes to the source propagate to all synced instances. The block has a subtle dashed border to visually distinguish it from regular blocks.

Example

<.synced_block id="sync-1" source_id="original-block-42">
  This content is synced from block 42.
</.synced_block>

Attributes

• id (:string) (required) - Unique identifier for the synced block instance.
• source_id (:string) (required) - ID of the original source block being referenced.
• class (:string) - Additional CSS classes. Defaults to nil.
• Global attributes are accepted. Additional HTML attributes.

Slots

• inner_block (required) - Block content (mirrors the source block).