Resolved merge conflicts between Livewire model binding refactoring and UI/CSS updates from next branch. Key integrations:
- Preserved unique HTML ID generation for form components
- Maintained wire:model bindings using $modelBinding
- Integrated new wire:dirty.class styles (border-l-warning pattern)
- Kept both syncData(true) and validateDockerComposeForInjection in StackForm
- Merged security tests and helper improvements from next
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
**Problems Fixed:**
1. Livewire warnings about non-existent properties (e.g., wire:model="dcgoowgw0gcgcsgg00c8kskc")
2. Duplicate HTML IDs still appearing despite initial fix
**Root Causes:**
1. Auto-generated Cuid2 IDs were being used for wire:model when no explicit id was provided
2. Livewire's wire:id attribute isn't available during server-side rendering
**Solutions:**
1. Set $modelBinding to 'null' (string) when id is not provided, preventing invalid wire:model generation
2. Use random MD5 suffix instead of Livewire component ID for guaranteed uniqueness during initial render
3. Maintain correct $name attribute based on original property name
**Technical Changes:**
- Input, Textarea, Select, Datalist: Use random 8-char suffix for uniqueness
- Checkbox: Apply same random suffix approach
- wire:model now only created for explicit property names
- HTML IDs are unique from initial server render (no hydration required)
**Result:**
✅ No more Livewire property warnings
✅ Truly unique HTML IDs across all components
✅ wire:model bindings work correctly
✅ Validation and form submission unaffected
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Resolve browser console warnings about non-unique HTML IDs when multiple
Livewire components with similar form fields appear on the same page.
**Problem:**
Multiple forms using generic IDs like `id="description"` or `id="name"`
caused duplicate ID warnings and potential accessibility/JavaScript issues.
**Solution:**
- Separate `wire:model` binding name from HTML `id` attribute
- Auto-prefix HTML IDs with Livewire component ID for uniqueness
- Preserve existing `wire:model` behavior with property names
**Implementation:**
- Added `$modelBinding` property for wire:model (e.g., "description")
- Added `$htmlId` property for unique HTML ID (e.g., "lw-xyz123-description")
- Updated render() method to generate unique IDs automatically
- Updated all blade templates to use new properties
**Components Updated:**
- Input (text, password, etc.)
- Textarea (including Monaco editor)
- Select
- Checkbox
- Datalist (single & multiple selection)
**Result:**
✅ All HTML IDs now unique across page
✅ No console warnings
✅ wire:model bindings work correctly
✅ Validation error messages display correctly
✅ Backward compatible - no changes needed in existing components
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
