Renders a breadcrumb trail with "/" separators.

Each item in :items should be a map with :label and optional :href keys. The last item is rendered as plain text (current page).

Example

<.document_breadcrumb items={[
  %{label: "Documents", href: "/docs"},
  %{label: "Projects", href: "/docs/projects"},
  %{label: "Q4 Report"}
]} />

Attributes

• items (:list) - Defaults to [].
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Renders a full-page document editor layout with flexbox.

Arranges header, toolbar, content (with optional sidebar), and footer in a vertical stack. The content area fills all remaining vertical space.

Example

<.document_editor id="my-doc">
  <:header>
    <.document_header id="doc-header" title="My Document" />
  </:header>
  <:toolbar>
    <.rich_toolbar editor_id="editor" />
  </:toolbar>
  <:content>
    <div id="editor-content" contenteditable="true" />
  </:content>
  <:sidebar>
    <.document_sidebar id="doc-sidebar" />
  </:sidebar>
  <:footer>
    <.document_footer word_count={@word_count} />
  </:footer>
</.document_editor>

Attributes

• id (:string) (required)
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• header - Document header area.
• toolbar - Editor toolbar area.
• content (required) - Main editor content area.
• sidebar - Collapsible sidebar panel.
• footer - Status bar / footer area.

Renders a document status bar at the bottom.

Displays word count, page count, zoom level, and save status.

Example

<.document_footer word_count={@word_count} page_count={2} zoom={125} status={:saved} />

Attributes

• word_count (:integer) - Defaults to 0.
• page_count (:integer) - Defaults to 1.
• zoom (:integer) - Defaults to 100.
• status (:atom) - Defaults to :saved.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Renders a document header with title, save status indicator, and share button.

Example

<.document_header id="hdr" title="Q4 Report" status={:saving} share_count={3} />

Attributes

• id (:string) (required)
• title (:string) - Defaults to "Untitled".
• status (:atom) - Defaults to :saved. Must be one of :saved, :saving, or :unsaved.
• share_count (:integer) - Defaults to 0.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Renders a collapsible right sidebar panel with tab navigation.

Tabs allow switching between Comments, Outline, History, and Info views. The sidebar collapses to zero width when :open is false.

Example

<.document_sidebar id="sidebar" open={@sidebar_open} active_tab={@sidebar_tab}>
  <p>Sidebar content here</p>
</.document_sidebar>

Attributes

• id (:string) (required)
• open (:boolean) - Defaults to false.
• active_tab (:atom) - Defaults to :comments. Must be one of :comments, :outline, :history, or :info.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block

Renders a contenteditable <h1> for the document title.

Emits phx-blur with the updated text for server-side persistence.

Example

<.document_title id="doc-title" value={@doc_title} />

Attributes

• id (:string) (required)
• value (:string) - Defaults to "".
• placeholder (:string) - Defaults to "Untitled document".
• class (:string) - Defaults to nil.
• Global attributes are accepted.