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

Editor Writing Tools Suite — 8 components for writing productivity, readability
analysis, focus mode, voice input, text-to-speech, statistics, and grammar checking.

## Components

- `readability_score/1`        — circular/bar gauge showing readability score
- `writing_goals/1`            — progress bar with word count target
- `focus_mode/1`               — wrapper that dims surrounding content
- `voice_typing_indicator/1`   — mic icon with recording state and pulse animation
- `text_to_speech/1`           — play/pause/stop controls for TTS
- `writing_statistics/1`       — grid of 4 stat boxes (words, chars, sentences, reading time)
- `document_metrics/1`         — mini bar chart of daily writing counts
- `grammar_highlight/1`        — inline span with colored underline by issue type

# `document_metrics`

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.

# `focus_mode`

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)

# `grammar_highlight`

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)

# `readability_score`

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.

# `text_to_speech`

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.

# `voice_typing_indicator`

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.

# `writing_goals`

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.

# `writing_statistics`

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.

---

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