feat: clear dialog confirmation.

Author: knightedcodemonkey

docs/next-steps.md

@@ -2,21 +2,15 @@
 
 Focused follow-up work for `@knighted/develop`.
 
-1. **Grid-first header/layout cleanup**
-   - Refactor panel header layout to use CSS Grid as the primary layout mechanism.
-   - Reduce wrapper rows where possible and place controls explicitly in grid areas.
-   - Preserve existing semantics and accessibility behavior while simplifying structure.
-   - Validate desktop/mobile breakpoints and keep visual behavior parity.
-
-2. **Style isolation behavior docs**
+1. **Style isolation behavior docs**
    - Document ShadowRoot on/off behavior and how style isolation changes in light DOM mode.
    - Clarify that light DOM preview can inherit shell styles and include recommendations for scoping.
 
-3. **Preview UX polish**
+2. **Preview UX polish**
    - Keep tooltip affordances for mode-specific behavior.
    - Continue tightening panel control alignment and spacing without introducing extra markup.
 
-4. **Theming (light + dark)**
+3. **Theming (light + dark)**
    - Keep the existing dark mode as the baseline and add a first-class light theme.
    - Move key colors to semantic CSS variables and define both theme palettes.
    - Ensure component panels, controls, editor chrome, preview shell, and tooltips all have complete light-mode coverage.

src/app.js

@@ -17,6 +17,9 @@ const cssEditor = document.getElementById('css-editor')
 const styleWarning = document.getElementById('style-warning')
 const cdnLoading = document.getElementById('cdn-loading')
 const previewBgColorInput = document.getElementById('preview-bg-color')
+const clearConfirmDialog = document.getElementById('clear-confirm-dialog')
+const clearConfirmTitle = document.getElementById('clear-confirm-title')
+const clearConfirmCopy = document.getElementById('clear-confirm-copy')
 
 jsxEditor.value = defaultJsx
 cssEditor.value = defaultCss
@@ -37,6 +40,7 @@ let compiledStylesCache = {
   key: null,
   value: null,
 }
+let pendingClearAction = null
 let hasCompletedInitialRender = false
 let previewBackgroundColor = null
 const clipboardSupported = Boolean(navigator.clipboard?.writeText)
@@ -170,18 +174,53 @@ const setCssSource = value => {
 
 const clearComponentSource = () => {
   setJsxSource('')
+  setStatus('Component cleared')
   if (!jsxCodeEditor) {
     maybeRender()
   }
 }
 
 const clearStylesSource = () => {
   setCssSource('')
+  setStatus('Styles cleared')
   if (!cssCodeEditor) {
     maybeRender()
   }
 }
 
+const confirmClearSource = ({ label, onConfirm }) => {
+  const supportsModalDialog =
+    clearConfirmDialog instanceof HTMLDialogElement &&
+    typeof clearConfirmDialog.showModal === 'function'
+
+  if (!supportsModalDialog) {
+    if (
+      window.confirm(
+        `Clear ${label.toLowerCase()} source? This action will remove all text from the editor.`,
+      )
+    ) {
+      onConfirm()
+    }
+    return
+  }
+
+  if (clearConfirmDialog.open) {
+    return
+  }
+
+  if (clearConfirmTitle) {
+    clearConfirmTitle.textContent = `Clear ${label} source?`
+  }
+
+  if (clearConfirmCopy) {
+    clearConfirmCopy.textContent =
+      'This action will remove all text from the editor. This cannot be undone.'
+  }
+
+  pendingClearAction = onConfirm
+  clearConfirmDialog.showModal()
+}
+
 const copyTextToClipboard = async text => {
   if (!clipboardSupported) {
     throw new Error('Clipboard API is not available in this browser context.')
@@ -828,8 +867,28 @@ if (clipboardSupported) {
   copyComponentButton.hidden = true
   copyStylesButton.hidden = true
 }
-clearComponentButton.addEventListener('click', clearComponentSource)
-clearStylesButton.addEventListener('click', clearStylesSource)
+if (clearConfirmDialog instanceof HTMLDialogElement) {
+  clearConfirmDialog.addEventListener('close', () => {
+    if (clearConfirmDialog.returnValue === 'confirm') {
+      pendingClearAction?.()
+    }
+    pendingClearAction = null
+  })
+}
+
+clearComponentButton.addEventListener('click', () => {
+  confirmClearSource({
+    label: 'Component',
+    onConfirm: clearComponentSource,
+  })
+})
+
+clearStylesButton.addEventListener('click', () => {
+  confirmClearSource({
+    label: 'Styles',
+    onConfirm: clearStylesSource,
+  })
+})
 jsxEditor.addEventListener('input', maybeRender)
 cssEditor.addEventListener('input', maybeRender)
 

src/index.html

@@ -171,6 +171,28 @@ <h2>Preview</h2>
       </div>
     </div>
 
+    <dialog id="clear-confirm-dialog" class="confirm-dialog">
+      <form method="dialog" class="confirm-dialog__form">
+        <h3 id="clear-confirm-title">Clear source?</h3>
+        <p id="clear-confirm-copy">This action will remove all text from the editor.</p>
+        <menu class="confirm-dialog__actions">
+          <button
+            class="confirm-dialog__button confirm-dialog__button--secondary"
+            value="cancel"
+            autofocus
+          >
+            Cancel
+          </button>
+          <button
+            class="confirm-dialog__button confirm-dialog__button--danger"
+            value="confirm"
+          >
+            Clear
+          </button>
+        </menu>
+      </form>
+    </dialog>
+
     <script type="module" src="bootstrap.js"></script>
   </body>
 </html>

src/styles.css

@@ -477,6 +477,86 @@ textarea:focus {
   stroke-linejoin: round;
 }
 
+.confirm-dialog {
+  border: none;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+}
+
+.confirm-dialog:modal {
+  width: min(460px, calc(100vw - 32px));
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 14px;
+  background: rgba(13, 16, 24, 0.97);
+  color: #e7edf9;
+  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
+}
+
+.confirm-dialog::backdrop {
+  background: rgba(6, 9, 15, 0.66);
+  backdrop-filter: blur(2px);
+}
+
+.confirm-dialog__form {
+  margin: 0;
+  padding: 18px;
+}
+
+.confirm-dialog__form h3 {
+  margin: 0;
+  font-size: 1.04rem;
+}
+
+.confirm-dialog__form p {
+  margin: 10px 0 0;
+  color: #b8c3d9;
+  font-size: 0.9rem;
+}
+
+.confirm-dialog__actions {
+  margin: 18px 0 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.confirm-dialog__button {
+  border-radius: 10px;
+  border: 1px solid transparent;
+  min-height: 34px;
+  padding: 6px 14px;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.confirm-dialog__button--secondary {
+  border-color: rgba(255, 255, 255, 0.16);
+  background: rgba(255, 255, 255, 0.06);
+  color: #eef3ff;
+}
+
+.confirm-dialog__button--secondary:hover {
+  background: rgba(255, 255, 255, 0.14);
+}
+
+.confirm-dialog__button--danger {
+  border-color: rgba(250, 126, 138, 0.48);
+  background: rgba(250, 126, 138, 0.2);
+  color: #ffe7ea;
+}
+
+.confirm-dialog__button--danger:hover {
+  background: rgba(250, 126, 138, 0.32);
+}
+
+.confirm-dialog__button:focus-visible {
+  outline: 2px solid rgba(122, 107, 255, 0.88);
+  outline-offset: 1px;
+}
+
 @media (max-width: 900px) {
   .panel-header-main-actions .controls,
   .controls--actions {