feat: add patterns example app — Session 1 (scaffold + forms #1-7)

[adnaan]

Summary

• Implements the patterns example app scaffold and all 7 Forms & Editing patterns from the patterns proposal
• Each pattern is a focused, isolated demo with its own handler, controller, template, and E2E tests
• Shared layout template with consolidated dev/prod CSS+JS loading and category nav
• Index page catalogs all 31 patterns (7 implemented, 24 marked as coming soon)

Patterns implemented

1. Click To Edit — toggle view/edit with {{if}} conditional rendering
2. Edit Row — inline table row editing with data-key identity
3. Inline Validation — Change() with ValidateForm() and .lvt.HasError/.lvt.Error
4. Bulk Update — batch checkbox operations with ctx.GetBool()
5. Reset User Input — form auto-clear after successful submission
6. File Upload — Tier 1 multipart + Tier 2 lvt-upload chunked upload
7. Preserving File Inputs — lvt-form:preserve retains values across re-renders

Architecture

• One controller per pattern (avoids method name conflicts)
• WithParseFiles("templates/layout.tmpl", "templates/forms/<pattern>.tmpl") for template composition
• livetemplate.New("layout", ...) with layout as main template entry point

Test plan

• All 8 test functions pass (30 subtests total)
• UI_Standards checks on every pattern (CSP compliance, meta tags, container width)
• Visual_Check subtests (skipped without LVT_VISUAL_CHECK=true)
• go build and go vet clean
• "patterns" added to WORKING_EXAMPLES in test-all.sh
• Manual browser review of all 7 patterns

🤖 Generated with Claude Code

[Copilot]

Pull request overview

Adds a new patterns/ working example app that scaffolds a “Patterns” catalog and implements the first 7 Forms & Editing patterns (with shared layout + E2E coverage) as described in the patterns proposal.

Changes:

• Introduces a shared layout + index catalog page listing all pattern categories (7 implemented, others marked coming soon).
• Implements 7 Forms & Editing pattern handlers/controllers, state structs, templates, and sample data.
• Adds chromedp E2E test suite for the index and each implemented pattern; registers patterns in test-all.sh.

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
test-all.sh	Adds patterns to the working examples list so it’s exercised by the full test script.
patterns/templates/layout.tmpl	New shared layout with dev/prod LiveTemplate client + CSS loading.
patterns/templates/index.tmpl	New index catalog template listing categories + pattern links.
patterns/templates/forms/click-to-edit.tmpl	Pattern #1 template (view/edit toggle).
patterns/templates/forms/edit-row.tmpl	Pattern #2 template (inline table row editing).
patterns/templates/forms/inline-validation.tmpl	Pattern #3 template (server-side validation feedback).
patterns/templates/forms/bulk-update.tmpl	Pattern #4 template (batch checkbox updates).
patterns/templates/forms/reset-input.tmpl	Pattern #5 template (auto-reset after submit).
patterns/templates/forms/file-upload.tmpl	Pattern #6 template (multipart + chunked upload UI).
patterns/templates/forms/preserve-inputs.tmpl	Pattern #7 template (preserve inputs across re-renders).
patterns/state_forms.go	Adds state structs for the 7 patterns.
patterns/patterns_test.go	Adds E2E suite covering index + 7 patterns with UI standards checks.
patterns/main.go	App entrypoint wiring routes + layout composition.
patterns/handlers_forms.go	Controllers + handlers for patterns #1–#7.
patterns/data.go	Sample data helpers + pattern catalog structure.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The index page sets Title to "LiveTemplate Patterns", but the shared layout appends " — LiveTemplate Patterns" to every <title>, resulting in "LiveTemplate Patterns — LiveTemplate Patterns" on the index. Consider setting the index Title to something shorter (e.g., "Patterns"), or make the layout conditional so the suffix isn't duplicated.

Suggested change

	Title: "LiveTemplate Patterns",
	Title: "Patterns",

[Copilot]

These inputs have no associated (or aria-label/aria-labelledby), which makes the inline row editor difficult to use with screen readers. Add labels (they can be visually hidden) or add explicit aria-label attributes for the name/email fields.

Suggested change

	<input name="name" value="{{.Name}}">
	<input name="email" value="{{.Email}}">
	<input name="name" value="{{.Name}}" aria-label="Name">
	<input name="email" value="{{.Email}}" aria-label="Email">

[Copilot]

This text input relies on placeholder text only and has no label/aria-label, which is an accessibility issue for screen readers. Add an explicit (visually-hidden is fine) or an aria-label so the field has an accessible name.

Suggested change

	<input name="message" placeholder="Type a message..." required>
	<input name="message" aria-label="Message" placeholder="Type a message..." required>

[Copilot]

The per-row "Active" checkbox inputs have no accessible name. Consider adding an aria-label (e.g., including the user's name) or associating each checkbox with a so screen readers can identify what each checkbox controls.

Suggested change

	<td><input type="checkbox" name="active-{{.ID}}" {{if .Active}}checked{{end}}></td>
	<td><input type="checkbox" name="active-{{.ID}}" aria-label="Active for {{.Name}}" {{if .Active}}checked{{end}}></td>

[Copilot]

In view mode the "Edit" button is not inside a

, so Tier 1 (no-JS) fallback can't submit an action to reach the Edit() handler. Per the repo’s Tier 1 guidance (CLAUDE.md:7-21, 49-55), actions should be routed via standard form submissions + button names. Wrap the button in a POST form (or use a button with a form="..." attribute pointing at a POST form).

Suggested change

	<button name="edit">Edit</button>
	<form method="POST">
	<button name="edit">Edit</button>
	</form>

[Copilot]

This uses e2etest.WaitFor(true, ...) after clicking Update, which doesn’t wait on a meaningful condition and can be flaky (it’s effectively a time-based delay). The repo’s E2E checklist explicitly recommends condition-based waits (CLAUDE.md:78-80). Wait for a concrete DOM condition that reflects the update (e.g., checked state of active-1/active-3) before asserting.

Suggested change

	// Click Update
	chromedp.Click(`button[name="bulkUpdate"]`, chromedp.ByQuery),
	e2etest.WaitFor(`true`, 2*time.Second), // Wait for re-render
	// Click Update and wait for the updated checkbox state to be reflected in the DOM
	chromedp.Click(`button[name="bulkUpdate"]`, chromedp.ByQuery),
	e2etest.WaitFor(`!document.querySelector('input[name="active-1"]').checked && document.querySelector('input[name="active-3"]').checked`, 2*time.Second),

[Copilot]

This uses e2etest.WaitFor(true, ...) after form submission, which doesn’t wait on any specific post-submit condition and can be flaky. The repo’s E2E checklist recommends condition-based waits (CLAUDE.md:78-80). Prefer waiting for a concrete DOM change (e.g., a success indicator, or the expected input value being present) before reading/asserting field values.

Suggested change

	e2etest.WaitFor(`true`, 3*time.Second),
	e2etest.WaitFor(`document.querySelector('input[name="name"]') !== null && document.querySelector('input[name="name"]').value === "Test Name"`, 3*time.Second),