Add comprehensive DOM element creation capabilities

[devin-ai-integration]

Add comprehensive DOM element creation capabilities

Summary

This PR implements spec-kit specification 001-more-dom-elements, adding extensive DOM element creation capabilities to the FDO SDK. The implementation includes:

• 3 new DOM classes: DOMTable (tables with thead/tbody/tfoot/tr/th/td/caption), DOMMedia (images with accessibility), DOMSemantic (semantic HTML5 elements)
• 2 enhanced classes: DOMNested (ordered lists, definition lists), DOMInput (select dropdowns with options and optgroups)
• Comprehensive test suite: 323 tests passing with 98.1% coverage (up from 92.61%)
• Example plugin: Demonstrates all new capabilities in examples/dom_elements_plugin.ts
• Documentation: Updated README.md and added CHANGELOG.md

All new classes follow existing architecture patterns, include JSDoc documentation with @uiName tags, support CSS-in-JS styling via goober, and maintain backward compatibility.

Review & Testing Checklist for Human

⚠️ CRITICAL ITEMS TO VERIFY:

• Test select/option/optgroup HTML output in production - These elements had a critical bug where they were rendering as self-closing tags (<select />). The fix manually constructs HTML strings in src/DOMInput.ts:61-125. Verify the HTML output is valid for:

  • Empty select elements
  • Select with multiple options
  • Select with optgroups
  • Select with onChange handlers
  • Options with/without selected attribute

• Run the example plugin in actual FDO desktop application - The examples/dom_elements_plugin.ts has NEVER been tested in a real runtime environment. Build it and verify:

  • All elements render correctly
  • Select dropdowns are interactive
  • Tables display properly
  • Images load correctly
  • No console errors

• Verify HTML boolean attribute handling - Boolean attributes like "selected" should be omitted when false, not set to selected="false". Check the generated HTML to ensure proper HTML5 compliance.

• Review the architectural approach in DOMInput - The class uses super(true) for self-closing behavior but manually overrides it for select/option/optgroup. Verify this pattern is acceptable and won't cause confusion for future maintainers.

• Test edge cases:

  • Tables with colspan/rowspan
  • Deeply nested semantic structures
  • Grouped selects with multiple optgroups
  • Custom attributes on all element types
  • Empty elements (table with no rows, select with no options)

Test Plan

1. Build verification:

   npm run build && npm run build:types
   npm test  # Should show 323 tests passing

2. Integration test: Import examples/dom_elements_plugin.ts into a real FDO application and verify:

   • Employee table renders with proper structure
   • Logo image displays correctly
   • Select dropdowns are interactive and fire onChange handlers
   • Semantic HTML structure is valid
   • Ordered and definition lists render correctly
   • Grouped select shows proper optgroup organization

3. Manual HTML inspection: Generate HTML from each new method and validate it against W3C HTML5 spec, especially for:

   • Select elements (not self-closing)
   • Boolean attributes (selected, disabled)
   • Custom data-* attributes

Notes

• Fixed critical bug: Select/option/optgroup elements were generating self-closing tags due to DOMInput's super(true) constructor. Fixed by manually building HTML strings for these non-self-closing elements.
• Test coverage: Improved from 92.61% to 98.1% by adding custom attribute tests for all methods
• No breaking changes: All existing DOM classes remain unchanged
• Build successful: Webpack bundle builds without errors (expected size warnings are acceptable)

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟢	Statements	97.86% (-2.14% 🔻)	411/420
🟢	Branches	94.53% (-3.4% 🔻)	190/201
🟢	Functions	100% (+2.44% 🔼)	137/137
🟢	Lines	97.85% (-2.15% 🔻)	409/418

Show new covered files 🐣

St.❔	File	Statements	Branches	Functions	Lines
🟢	DOMTable.ts	100%	100%	100%	100%
🟢	DOMMedia.ts	100%	100%	100%	100%
🟢	DOMSemantic.ts	100%	100%	100%	100%

Show files with reduced coverage 🔻

St.❔	File	Statements	Branches	Functions	Lines
🟢	DOMInput.ts	91.18% (-8.82% 🔻)	72.22% (-27.78% 🔻)	100%	91.18% (-8.82% 🔻)
🟢	DOMNested.ts	88.68% (-11.32% 🔻)	85% (-15% 🔻)	100%	88.68% (-11.32% 🔻)

Test suite run success

383 tests passing in 28 suites.

Report generated by 🧪jest coverage report action from 396e758