# `PhiaUi.Components.Editor.DocumentShell`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/editor/document_shell.ex#L1)

Document Shell Suite — 6 components for building full-page document editors.

Provides the structural layout primitives for a Google Docs / Notion-style
document editing experience: header with title and status, collapsible
sidebar, footer status bar, and breadcrumb navigation.

## Components

- `document_editor/1`     — full-page flexbox layout shell with header/toolbar/content/sidebar/footer slots
- `document_header/1`     — top bar with title, share button, and save status indicator
- `document_title/1`      — contenteditable `<h1>` for the document title
- `document_sidebar/1`    — collapsible right panel with tab navigation
- `document_footer/1`     — status bar with word count, page count, zoom, save status
- `document_breadcrumb/1` — breadcrumb trail with "/" separators

# `document_breadcrumb`

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.

# `document_editor`

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.

# `document_footer`

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.

# `document_header`

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.

# `document_sidebar`

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`

# `document_title`

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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*