Renders a bordered panel for managing a custom word dictionary.

Provides an input form to add new words and a scrollable list of existing words with individual remove buttons. The word list is capped at max-h-48 for consistent panel height.

Events emitted:

• "dictionary:add" on form submit (word value in the form field)
• "dictionary:remove" on remove button click (word in phx-value-word)

Example

<.dictionary_panel id="dict" words={["PhiaUI", "LiveView", "GenServer"]} />

Attributes

• id (:string) (required) - Unique identifier for the dictionary panel.
• words (:list) - List of custom dictionary word strings. Defaults to [].
• class (:string) - Additional CSS classes for the panel. Defaults to nil.
• Global attributes are accepted.

Renders a bordered sidebar panel listing grammar issues with severity icons, messages, and optional suggestions.

When no issues are present, an empty state with a check icon is displayed. Each issue row is clickable and emits a "grammar:navigate" event with the issue's range encoded as JSON in phx-value-range.

Example

<.grammar_panel id="grammar" issues={[
  %{message: "Passive voice detected", severity: :warning, range: %{from: 10, to: 25}, suggestion: "Use active voice"},
  %{message: "Missing comma", severity: :error, range: %{from: 42, to: 43}, suggestion: nil}
]} />

Attributes

• id (:string) (required) - Unique identifier for the grammar panel.

• issues (:list) - List of grammar issue maps. Each map should contain:

  • :message (string) — description of the issue
  • :severity (atom) — :error, :warning, or :info
  • :range (map) — position range for navigation (encoded as JSON on click)

  • :suggestion (string | nil) — optional replacement suggestion

  Defaults to [].

• class (:string) - Additional CSS classes for the panel. Defaults to nil.

• Global attributes are accepted.

Renders an inline popover with a grammar replacement suggestion.

Displays a severity-colored accent bar at the top, the issue message, the suggested replacement in a highlighted box, and two action buttons: "Ignore" (ghost style) and "Accept" (primary style).

Emits "grammar:accept" or "grammar:ignore" events with the popover id as phx-value-id.

The popover uses the phia-bubble-menu-open animation class for entrance.

Example

<.grammar_suggestion
  id="sug-1"
  visible={true}
  message="Consider rephrasing for clarity."
  suggestion="The results clearly show..."
  severity={:warning}
/>

Attributes

• id (:string) (required) - Unique identifier for the suggestion popover.
• visible (:boolean) - Whether the popover is currently shown. Defaults to false.
• message (:string) - Description of the grammar issue. Defaults to "".
• suggestion (:string) - Suggested replacement text. Defaults to "".
• severity (:atom) - Severity level controlling the top accent bar color. Defaults to :warning. Must be one of :error, :warning, or :info.
• class (:string) - Additional CSS classes for the popover. Defaults to nil.
• Global attributes are accepted.

Renders a compact toggle button for enabling or disabling browser spellcheck.

Displays an "ABC" icon with a check underline when enabled. A small status dot indicates the current state (green for enabled, muted for disabled).

Emits a "spellcheck:toggle" event with phx-value-enabled set to the inverse of the current state.

Example

<.spell_check_toggle id="spellcheck" enabled={true} />
<.spell_check_toggle id="spellcheck" enabled={false} />

Attributes

• id (:string) (required) - Unique identifier for the toggle button.
• enabled (:boolean) - Whether spell check is currently enabled. Defaults to true.
• class (:string) - Additional CSS classes for the container. Defaults to nil.
• Global attributes are accepted.