Renders a mini bar chart showing daily writing word counts.

Each item in daily_counts is a map with :date (string) and :count (integer). An optional :target draws a horizontal reference line.

Example

<.document_metrics
  id="metrics"
  target={500}
  daily_counts={[
    %{date: "Mon", count: 420},
    %{date: "Tue", count: 680},
    %{date: "Wed", count: 310}
  ]}
/>

Attributes

• id (:string) (required)
• daily_counts (:list) - Defaults to [].
• target (:integer) - Defaults to 0.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Renders a wrapper div that dims surrounding content when focus mode is active.

When active is true, applies an opacity dimming class to create a focused writing experience. The inner content remains fully visible.

Example

<.focus_mode id="focus" active={@focus_active}>
  <div contenteditable>Writing content here...</div>
</.focus_mode>

Attributes

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

Slots

• inner_block (required)

Renders a <span> with a colored wavy underline indicating a grammar, spelling, style, or clarity issue.

Colors:

• :grammar — blue underline
• :spelling — red underline
• :style — purple underline
• :clarity — amber underline

An optional :suggestion is shown as a title tooltip.

Example

<.grammar_highlight type={:spelling} suggestion="their">
  there
</.grammar_highlight>

Attributes

• type (:atom) - Defaults to :grammar. Must be one of :grammar, :spelling, :style, or :clarity.
• suggestion (:string) - Defaults to nil.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a circular gauge showing the readability score (0-100).

Color-coded: red < 30 (difficult), amber 30-59 (moderate), green >= 60 (easy). An optional :grade label (e.g., "Grade 8") is displayed below the score.

Example

<.readability_score score={65} grade="Grade 8" />

Attributes

• score (:any) - Defaults to nil.
• grade (:string) - Defaults to nil.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Renders play/pause and stop buttons for text-to-speech playback.

Example

<.text_to_speech id="tts" playing={@tts_playing} />

Attributes

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

Renders a microphone icon that indicates voice typing state.

When recording is true, the icon turns red and gains a pulse animation.

Example

<.voice_typing_indicator id="voice" recording={@is_recording} />

Attributes

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

Renders a progress bar with a word count target.

Shows "{current}/{target} words" and fills the bar proportionally. Turns green when the target is met or exceeded.

Example

<.writing_goals id="goals" target={2000} current={1250} />

Attributes

• id (:string) (required)
• target (:integer) - Defaults to 1000.
• current (:integer) - Defaults to 0.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Renders a grid of 4 statistic boxes showing word count, character count, sentence count, and estimated reading time.

Example

<.writing_statistics words={1250} characters={6800} sentences={52} reading_time={5} />

Attributes

• words (:integer) - Defaults to 0.
• characters (:integer) - Defaults to 0.
• sentences (:integer) - Defaults to 0.
• reading_time (:integer) - Defaults to 0.
• class (:string) - Defaults to nil.
• Global attributes are accepted.