Render analyzed-token breakdown as a boxed morpheme grid

[alex-rawlings-yyc]

Extract the morpheme breakdown into a new MorphemeBox component (CSS grid of forms over glosses), simplifying TokenChip and MorphemeEditor accordingly.

---

This change is 

Summary by CodeRabbit

• New Features
  • Redesigned morpheme editing into a boxed, grid-based view with aligned form and per-morpheme gloss fields, plus a single “edit morphemes” control for the token.
  • Updated the token chip flow: shows the boxed editor when morphemes exist; otherwise shows a “define morphemes” button.
• Bug Fixes
  • Improved RTL-safe grid alignment and consistent column pairing.
  • Fixed disabled-state behavior and prevented unintended parent interactions from morpheme-cell clicks.
• Tests
  • Added/updated unit tests for morpheme box rendering, interactions, disabled behavior, and gloss blur dispatch.
• Style
  • Refined spacing for gloss inputs.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

This PR moves morpheme gloss editing into a boxed component pair, updates TokenChip to use that flow for analyzed tokens, adjusts shared gloss styling, and rewrites related tests.

Changes

Morpheme box extraction and integration

Layer / File(s)	Summary
MorphemeBox and gloss input components src/components/MorphemeBox.tsx	Adds MorphemeBox with grid-aligned morpheme forms and edit handling, and adds MorphemeGlossInput with draft syncing and blur dispatch.
TokenChip morphology wiring src/components/TokenChip.tsx	TokenChip renders MorphemeBox for analyzed tokens, keeps a define-breakdown button for unanalyzed tokens, and updates the related interaction comments.
Gloss styling and editor cleanup src/tailwind.css, src/components/PhraseBox.tsx, src/components/MorphemeEditor.tsx	Moves the top margin off the shared gloss utility, adds it to phrase gloss input, removes MorphemeGlossInput from MorphemeEditor, and replaces the gloss string keys with popover string keys.
Tests and interaction notes src/__tests__/components/MorphemeBox.test.tsx, src/__tests__/components/TokenChip.test.tsx, src/__tests__/components/MorphemeEditor.test.tsx	Adds MorphemeBox and MorphemeGlossInput coverage, updates TokenChip tests for the boxed morphology UI, and removes the old MorphemeGlossInput test block.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant TokenChip
  participant MorphemeBox
  participant MorphemeGlossInput
  participant AnalysisStore

  TokenChip->>MorphemeBox: render token morphemes and onEditBreakdown
  MorphemeBox->>MorphemeGlossInput: render one gloss input per morpheme
  MorphemeGlossInput->>AnalysisStore: read and dispatch gloss updates

Loading

Possibly related PRs

• sillsdev/interlinearizer-extension#104: Adds the broader showMorphology wiring that this PR’s boxed morpheme UI consumes.
• sillsdev/interlinearizer-extension#109: Also changes morpheme breakdown popover behavior in MorphemeEditor and TokenChip.
• sillsdev/interlinearizer-extension#111: Also touches the morpheme-breakdown editor UI and related focus behavior.

Suggested labels: 🟪Idea

Suggested reviewers: imnasnainaec

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: rendering analyzed-token morpheme breakdowns as a boxed grid.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch morpheme-box-grid

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[alex-rawlings-yyc]

@alex-rawlings-yyc resolved 2 discussions.
Reviewable status: 0 of 11 files reviewed, all discussions resolved (waiting on alex-rawlings-yyc).

[imnasnainaec]

The behavior on this pr is great--well resolves the linked issue. I'll hold off full code review because of the conflicts with main and 3 unresolved Devin flags.

[imnasnainaec]

@imnasnainaec reviewed 11 files and all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on alex-rawlings-yyc).

[imnasnainaec]

@imnasnainaec reviewed 1 file and all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on alex-rawlings-yyc).