fix(templates): explain what the apply-design checkbox now means

Templates reference the site tokens, so with the checkbox off a template
follows the site's own palette. Label and a state-dependent help line now
say so.

Refs #44

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

craft/src/panels/topbar/TemplateModal.copy.test.tsx

@@ -0,0 +1,25 @@
+import { describe, test, expect, afterEach } from 'vitest';
+import React from 'react';
+import { renderEditorHarness, EditorHarness } from '../../test-utils/editorHarness';
+import { TemplateModal } from './TemplateModal';
+
+/** #44 integration follow-up: the "apply design" checkbox copy says what unchecked now means. */
+let h: EditorHarness | null = null;
+afterEach(() => { h?.unmount(); h = null; document.body.innerHTML = ''; });
+
+describe('TemplateModal apply-design copy', () => {
+  test('label and help text follow the checkbox state', () => {
+    h = renderEditorHarness();
+    h.mountChild(<TemplateModal open onClose={() => {}} />);
+    const card = document.querySelector('[role="button"]') as HTMLElement;
+    expect(card).not.toBeNull();
+    h.act(() => { card.click(); });
+    const help = () => document.querySelector('[data-testid="template-apply-design-help"]')?.textContent;
+    expect(document.body.textContent).toContain("Use the template's colors and fonts");
+    expect(help()).toBe("Replaces your site's colors and fonts with the template's.");
+    const box = document.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    h.act(() => { box.click(); });
+    expect(box.checked).toBe(false);
+    expect(help()).toBe("Keeps your site's colors and fonts: the template's colors follow your site palette.");
+  });
+});

craft/src/panels/topbar/TemplateModal.tsx

@@ -354,9 +354,17 @@ export const TemplateModal: React.FC<TemplateModalProps> = ({ open, onClose }) =
                   type="checkbox"
                   checked={applyDesign}
                   onChange={(e) => setApplyDesign(e.target.checked)}
-                  style={{ width: 16, height: 16, accentColor: '#3b82f6', cursor: 'pointer' }}
+                  style={{ width: 16, height: 16, accentColor: '#3b82f6', cursor: 'pointer', flexShrink: 0 }}
                 />
-                Apply template colors and fonts to site design
+                <span style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                  <span>Use the template's colors and fonts</span>
+                  {/* #44: templates reference site tokens, so unchecked = the site's own palette. */}
+                  <span data-testid="template-apply-design-help" style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>
+                    {applyDesign
+                      ? "Replaces your site's colors and fonts with the template's."
+                      : "Keeps your site's colors and fonts: the template's colors follow your site palette."}
+                  </span>
+                </span>
               </label>
 
               <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>