Standardize editable and non-editable input field patterns using Palette Manager V2 styles - PR_26126_078-template-editable-vs-noneditable-input-pattern

Author: DavidQ

docs/dev/reports/template_editable_noneditable_input_pattern.txt

@@ -0,0 +1,25 @@
+PR_26126_078 Template Editable Vs Non-Editable Input Pattern
+
+Scope:
+- Updated Tool Template V2 only.
+- Added explicit Not Editable and Editable field examples to the Input Source section.
+- Matched Palette Manager V2 field styling patterns:
+  - readonly display fields use muted readonly input styling
+  - editable text fields use normal input styling with editable focus/entry behavior
+- Documented the patterns in tools/templates-v2/README.md.
+- Added Playwright assertions for readonly and editable behavior.
+
+Runtime behavior:
+- Existing source input, NAV, launch-mode behavior, status clear, and template actions are unchanged.
+- No live tools, samples, schemas, roadmap, or tools/shared files were modified.
+
+Validation:
+- node --check tools/templates-v2/tests/playwright/FirstClassToolStarter.spec.mjs passed.
+- No inline script/style/event-handler matches were found in tools/templates-v2/index.html.
+- git diff --check passed.
+- npx playwright test --config tools/templates-v2/playwright.config.mjs passed, 10 tests.
+- npm run test:workspace-v2 passed, 7 tests.
+
+Manual test notes:
+- Open tools/templates-v2/index.html and confirm the Input Source section shows a readonly Not Editable field and editable Editable field.
+- Open tools/templates-v2/index.html?launch=workspace and confirm workspace NAV still appears without changing field pattern styling.

tools/templates-v2/README.md

@@ -104,6 +104,15 @@ First-Class Tool V2 surfaces use a consistent three-column layout:
 
 The Tool Template V2 demonstrates this standard with Input Source on the left, Preview in the center, and Output Summary above Status on the right.
 
+## Editable And Non-Editable Field Patterns
+
+Tool Template V2 demonstrates both field patterns used by Palette Manager V2:
+
+- Non-editable display fields use the `tool-starter__field--not-editable` pattern with `readonly` inputs. The visible demo label is `Not Editable`.
+- Editable text fields use the `tool-starter__field--editable` pattern with normal text inputs. The visible demo label is `Editable`.
+
+Use non-editable fields for display/read-only values. Use editable fields for user text entry.
+
 ## Creating A New Tool
 
 1. Copy `tools/templates-v2/` to `tools/<tool-id>/`.

tools/templates-v2/index.html

@@ -60,6 +60,16 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
               <span>Source value</span>
               <input id="sourceInput" type="text" autocomplete="off" placeholder="Enter a value to process">
             </label>
+            <div class="tool-starter__field-patterns" aria-label="Editable and non-editable field patterns">
+              <label class="tool-starter__field tool-starter__field--compact tool-starter__field--not-editable" for="notEditableField">
+                <span>Not Editable</span>
+                <input id="notEditableField" type="text" autocomplete="off" value="Read-only display value" readonly>
+              </label>
+              <label class="tool-starter__field tool-starter__field--compact tool-starter__field--editable" for="editableField">
+                <span>Editable</span>
+                <input id="editableField" type="text" autocomplete="off" placeholder="No tags">
+              </label>
+            </div>
             <p id="sourceValidationMessage" class="tool-starter__hint">Input is required before Export can process.</p>
           </div>
         </section>

tools/templates-v2/styles/toolStarter.css

@@ -304,12 +304,35 @@ textarea:hover {
   font-weight: 700;
 }
 
+.tool-starter__field--compact {
+  grid-template-columns: 96px minmax(0, 1fr);
+}
+
+.tool-starter__field-patterns {
+  display: grid;
+  gap: 8px;
+}
+
 .tool-starter__field input {
   width: 100%;
   min-width: 0;
   padding: 7px 9px;
 }
 
+.tool-starter__field input[readonly] {
+  color: var(--tool-starter-muted);
+  cursor: default;
+}
+
+.tool-starter__field--editable input {
+  background: var(--tool-starter-input-surface);
+  color: var(--tool-starter-text);
+}
+
+.tool-starter__field--not-editable input {
+  background: var(--tool-starter-input-surface);
+}
+
 .tool-starter__hint {
   margin: 0;
   color: var(--tool-starter-muted);

tools/templates-v2/tests/playwright/FirstClassToolStarter.spec.mjs

@@ -111,6 +111,19 @@ test.describe("Tool Template V2", () => {
     await expect(rightPanel.locator(".accordion-v2").last()).toContainText("Status");
   });
 
+  test("shows editable and non-editable field patterns", async ({ page }) => {
+    const notEditableField = page.locator("#notEditableField");
+    const editableField = page.locator("#editableField");
+
+    await expect(page.locator("label[for='notEditableField']")).toContainText("Not Editable");
+    await expect(notEditableField).toHaveAttribute("readonly", "");
+    await expect(notEditableField).toHaveValue("Read-only display value");
+    await expect(page.locator("label[for='editableField']")).toContainText("Editable");
+    await expect(editableField).toBeEditable();
+    await editableField.fill("tag-example");
+    await expect(editableField).toHaveValue("tag-example");
+  });
+
   test("Hide Header and Details toggles header state", async ({ page }) => {
     const summary = page.locator("[data-tool-starter-summary]");
     const details = page.locator(".is-collapsible");