sqlite-hub 0.7.0 → 0.8.7

package/changelog.md

@@ -1,3 +1,17 @@
+# v0.8.7
+
+- UX fixes
+- fixing a lot of the vibe slop
+- trying to build reuseable components
+
+# v0.8.0
+
+- DDL copy button
+- open in charts button in query details
+- clear makes editor active
+- UI fixes
+- Overview improvement
+
 # v0.7.0
 
 - hide query history, hide editor

package/docs/DESIGN_GUIDELINES.md

@@ -0,0 +1,36 @@
+# SQLite Hub UI Rules for Codex
+
+Follow these rules exactly when creating or modifying UI controls.
+
+1. Reuse existing shared components before creating anything new.
+2. Use exactly one semantic main class per control.
+3. Never combine multiple button-style classes on the same element.
+4. View-specific classes may change layout, width, spacing, or position only.
+5. View-specific classes must not redefine the base style of shared components.
+6. The standard height for interactive controls is `36px`.
+7. The source of truth for control height is `--control-height` in `frontend/styles/tokens.css`.
+8. Controls in the same row must have the same height.
+9. All regular buttons must use one of these classes only: `standard-button`, `signature-button`, `delete-button`.
+10. Use `standard-button` for normal actions.
+11. Use `signature-button` only for the primary yellow CTA in a context.
+12. Use `delete-button` only for destructive actions.
+13. `signature-button` must keep its hover state and chamfered corner.
+14. All visible clickable buttons must have a hover state.
+15. Disabled states must come from the shared component, not from local view CSS.
+16. All reusable checkboxes must use `standard-checkbox`.
+17. Do not build feature-specific checkbox shells or checkbox base styles.
+18. Inputs and selects must follow the shared base rules in `frontend/styles/base.css`.
+19. Ghost or transparent inputs must not use a white background, including unfocused state.
+20. When a new control pattern appears in multiple places, promote it to a shared component first, then migrate existing usages.
+
+## Source of Truth
+
+- `frontend/styles/tokens.css`
+- `frontend/styles/base.css`
+- `frontend/index.html`
+
+## Default Decision Rules
+
+- Prefer reuse over invention.
+- Prefer migration over local override.
+- Prefer shared component updates over per-view fixes.

package/frontend/index.html

@@ -85,6 +85,85 @@
         },
       };
     </script>
+    <style type="text/tailwindcss">
+      @layer components {
+        .signature-button {
+          @apply inline-flex items-center justify-center gap-2 h-[var(--control-height)] min-h-[var(--control-height)] border border-primary-container bg-primary-container px-[var(--control-padding-inline)] font-headline text-xs font-bold uppercase tracking-[0.16em] text-on-primary transition-all;
+          box-shadow: 0 0 18px -10px rgba(252, 227, 0, 0.7);
+          clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
+        }
+
+        .signature-button:hover {
+          @apply -translate-y-px bg-primary-fixed text-on-primary;
+          border-color: rgba(252, 227, 0, 0.55);
+          box-shadow: 0 0 24px -8px rgba(252, 227, 0, 0.92);
+          filter: brightness(1.03);
+        }
+
+        .signature-button:disabled,
+        .signature-button[aria-disabled="true"] {
+          @apply cursor-not-allowed opacity-45;
+          box-shadow: none;
+          filter: none;
+          transform: none;
+        }
+
+        .signature-button .material-symbols-outlined {
+          @apply text-base;
+        }
+
+        .standard-button {
+          @apply inline-flex items-center justify-center gap-2 h-[var(--control-height)] min-h-[var(--control-height)] border border-outline-variant/20 bg-surface-container px-[var(--control-padding-inline)] font-mono text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface transition-colors;
+        }
+
+        .standard-button:hover {
+          @apply bg-surface-container-highest text-primary-container;
+          border-color: rgba(252, 227, 0, 0.24);
+        }
+
+        .standard-button.is-active {
+          @apply bg-surface-container-high text-primary-container;
+          border-color: rgba(252, 227, 0, 0.3);
+        }
+
+        .standard-button:disabled,
+        .standard-button[aria-disabled="true"] {
+          @apply cursor-not-allowed opacity-40;
+        }
+
+        .standard-button .material-symbols-outlined {
+          @apply text-base;
+        }
+
+        .standard-checkbox {
+          @apply inline-flex items-center gap-3 min-h-[var(--control-height)] border border-outline-variant/10 bg-surface-container-lowest px-[var(--control-padding-inline)] text-sm text-on-surface;
+        }
+
+        .standard-checkbox input[type="checkbox"] {
+          @apply m-0 rounded-none border-outline bg-surface-container-lowest text-primary-container focus:ring-primary-container;
+          accent-color: var(--color-primary-container);
+        }
+
+        .standard-checkbox.is-disabled,
+        .standard-checkbox:has(input:disabled) {
+          @apply opacity-45;
+        }
+
+        .delete-button {
+          @apply inline-flex items-center justify-center gap-2 h-[var(--control-height)] min-h-[var(--control-height)] border border-error/25 bg-error-container/10 px-[var(--control-padding-inline)] font-mono text-[10px] font-bold uppercase tracking-[0.16em] text-error transition-all;
+        }
+
+        .delete-button:hover {
+          @apply -translate-y-px border-error bg-error-container/20 text-error;
+        }
+
+        .delete-button:disabled,
+        .delete-button[aria-disabled="true"] {
+          @apply cursor-not-allowed opacity-45;
+          transform: none;
+        }
+      }
+    </style>
     <link href="styles/tokens.css" rel="stylesheet" />
     <link href="styles/base.css" rel="stylesheet" />
     <link href="styles/layout.css" rel="stylesheet" />

package/frontend/js/app.js

@@ -50,6 +50,8 @@ import {
   selectQueryHistoryItem,
   selectStructureEntry,
   setTableDesignerSearchQuery,
+  setTableDesignerSqlPreviewVisibility,
+  toggleStructureTablesPanel,
   setDataPage,
   setDataPageSize,
   setDataSearchColumn,
@@ -115,7 +117,21 @@ const shellRefs = {
   toast: document.querySelector("#toast-root"),
 };
 let lastRenderedRoutePath = null;
+let lastRenderedTopNavMarkup = "";
+let lastRenderedSidebarMarkup = "";
+let lastRenderedStatusBarMarkup = "";
+let lastRenderedMainMarkup = "";
+let lastRenderedPanelMarkup = "";
+let lastRenderedModalMarkup = "";
+let lastRenderedToastMarkup = "";
+let lastRenderedPanelOpen = false;
+let lastRenderedLockedRoute = false;
 let pendingNewTableDesignerAutofocus = false;
+let pendingQueryEditorFocus = false;
+
+function invalidateMainRenderCache() {
+  lastRenderedMainMarkup = null;
+}
 
 function resetStructureGraphForDatabaseChange() {
   resetPersistedStructureGraphState();
@@ -215,7 +231,7 @@ function renderNotFoundView() {
             404_SIGNAL
           </h1>
           <button
-            class="mt-8 bg-primary-container px-6 py-3 font-headline text-sm font-bold uppercase tracking-[0.2em] text-on-primary"
+            class="standard-button mt-8 px-6 font-headline text-sm"
             data-action="navigate"
             data-to="/"
             type="button"
@@ -389,6 +405,18 @@ function focusTableDesignerColumnNameField(columnId) {
   return true;
 }
 
+function focusQueryEditorInput() {
+  const input = document.querySelector('[data-bind="current-query"]');
+
+  if (!(input instanceof HTMLTextAreaElement)) {
+    return false;
+  }
+
+  input.focus({ preventScroll: true });
+  input.setSelectionRange(input.value.length, input.value.length);
+  return true;
+}
+
 async function handleTableDesignerCsvImport(fileInput) {
   if (!(fileInput instanceof HTMLInputElement)) {
     return;
@@ -429,12 +457,39 @@ async function handleTableDesignerCsvImport(fileInput) {
 }
 
 function renderApp(state) {
-  const focusedInput = captureFocusedInputState();
   const previousRoutePath = lastRenderedRoutePath;
   const { main, panel } = resolveView(state);
+  const topNavMarkup = renderTopNav(state);
+  const sidebarMarkup = renderSidebar(state);
+  const statusBarMarkup = renderStatusBar(state);
+  const modalMarkup = renderModal(state);
+  const toastMarkup = renderToasts(state.toasts);
   const isLockedRoute = ["editor", "editorResults", "data", "charts", "structure", "tableDesigner"].includes(
     state.route.name
   );
+  const panelOpen = Boolean(panel);
+  const shellMarkupUnchanged =
+    state.route.path === lastRenderedRoutePath &&
+    topNavMarkup === lastRenderedTopNavMarkup &&
+    sidebarMarkup === lastRenderedSidebarMarkup &&
+    statusBarMarkup === lastRenderedStatusBarMarkup &&
+    main === lastRenderedMainMarkup &&
+    panel === lastRenderedPanelMarkup &&
+    modalMarkup === lastRenderedModalMarkup &&
+    panelOpen === lastRenderedPanelOpen &&
+    isLockedRoute === lastRenderedLockedRoute;
+
+  if (shellMarkupUnchanged && toastMarkup !== lastRenderedToastMarkup) {
+    shellRefs.toast.innerHTML = toastMarkup;
+    lastRenderedToastMarkup = toastMarkup;
+    return;
+  }
+
+  if (shellMarkupUnchanged && toastMarkup === lastRenderedToastMarkup) {
+    return;
+  }
+
+  const focusedInput = captureFocusedInputState();
   const isEnteringNewTableDesignerRoute =
     state.route.name === "tableDesigner" &&
     state.route.params?.isNew &&
@@ -448,17 +503,24 @@ function renderApp(state) {
 
   teardownStructureGraph();
   teardownQueryChartRenderer();
-  shellRefs.topNav.innerHTML = renderTopNav(state);
-  shellRefs.sidebar.innerHTML = renderSidebar(state);
-  shellRefs.statusBar.innerHTML = renderStatusBar(state);
+  shellRefs.topNav.innerHTML = topNavMarkup;
+  shellRefs.sidebar.innerHTML = sidebarMarkup;
+  shellRefs.statusBar.innerHTML = statusBarMarkup;
   shellRefs.view.innerHTML = main;
   shellRefs.view.classList.toggle("app-main-scroll--locked", isLockedRoute);
   shellRefs.panel.innerHTML = panel;
-  shellRefs.modal.innerHTML = renderModal(state);
-  shellRefs.toast.innerHTML = renderToasts(state.toasts);
-  shellRefs.shell.classList.toggle("panel-open", Boolean(panel));
+  shellRefs.modal.innerHTML = modalMarkup;
+  shellRefs.toast.innerHTML = toastMarkup;
+  shellRefs.shell.classList.toggle("panel-open", panelOpen);
 
   if (
+    pendingQueryEditorFocus &&
+    (state.route.name === "editor" || state.route.name === "editorResults")
+  ) {
+    if (focusQueryEditorInput()) {
+      pendingQueryEditorFocus = false;
+    }
+  } else if (
     pendingNewTableDesignerAutofocus &&
     state.route.name === "tableDesigner" &&
     state.route.params?.isNew &&
@@ -472,6 +534,15 @@ function renderApp(state) {
   }
 
   lastRenderedRoutePath = state.route.path;
+  lastRenderedTopNavMarkup = topNavMarkup;
+  lastRenderedSidebarMarkup = sidebarMarkup;
+  lastRenderedStatusBarMarkup = statusBarMarkup;
+  lastRenderedMainMarkup = main;
+  lastRenderedPanelMarkup = panel;
+  lastRenderedModalMarkup = modalMarkup;
+  lastRenderedToastMarkup = toastMarkup;
+  lastRenderedPanelOpen = panelOpen;
+  lastRenderedLockedRoute = isLockedRoute;
 
   if (state.route.name === "structure") {
     mountStructureGraph(state).catch((error) => {
@@ -567,6 +638,7 @@ async function handleAction(actionNode) {
       openDeleteEditorRowModal(actionNode.dataset.rowIndex);
       return;
     case "clear-query":
+      pendingQueryEditorFocus = true;
       clearCurrentQuery();
       if (getState().route.name === "editorResults") {
         router.navigate("/editor");
@@ -663,6 +735,9 @@ async function handleAction(actionNode) {
     case "toggle-data-tables":
       toggleDataTablesPanel();
       return;
+    case "toggle-structure-tables":
+      toggleStructureTablesPanel();
+      return;
     case "select-structure-entry":
       if (actionNode.dataset.entryName) {
         await selectStructureEntry(actionNode.dataset.entryName);
@@ -704,6 +779,11 @@ async function handleAction(actionNode) {
       }
       return;
     }
+    case "toggle-table-designer-sql-preview":
+      setTableDesignerSqlPreviewVisibility(
+        actionNode.dataset.nextValue ? actionNode.dataset.nextValue === "true" : undefined
+      );
+      return;
     case "import-table-designer-csv": {
       const fileInput = document.querySelector('[data-bind="table-designer-import-file"]');
 
@@ -822,6 +902,7 @@ document.addEventListener("input", (event) => {
   }
 
   if (bindNode.dataset.bind === "current-query") {
+    invalidateMainRenderCache();
     syncQueryEditorHighlight(bindNode);
     syncQueryEditorScroll(bindNode);
     setCurrentQuery(bindNode.value);

package/frontend/js/components/connectionCard.js

@@ -73,17 +73,16 @@ export function renderConnectionCard(connection, activeConnectionId) {
       <div class="border-t border-outline-variant/10 bg-surface-container-low px-4 py-3">
         <div class="grid grid-cols-[minmax(0,1fr)_5.1rem_5.8rem] gap-2">
           <button
-            class="clipped-corner min-w-0 bg-primary-container px-3 py-2.5 text-[10px] font-black uppercase tracking-[0.18em] text-on-primary shadow-[0_0_18px_-10px_rgba(252,227,0,0.7)] transition-[filter,box-shadow] hover:brightness-105"
+            class="signature-button"
             data-action="select-connection"
             data-connection-id="${escapeHtml(connection.id)}"
-            style="--clip-path: ${clipPath};"
             type="button"
             title="${primaryActionLabel}"
           >
             ${primaryActionLabel}
           </button>
           <button
-            class="border border-outline-variant/20 bg-surface-container px-3 py-2.5 text-[10px] font-bold uppercase tracking-[0.18em] text-on-surface-variant transition-colors hover:bg-surface-container-highest"
+            class="standard-button"
             data-action="edit-connection"
             data-connection-id="${escapeHtml(connection.id)}"
             type="button"
@@ -91,7 +90,7 @@ export function renderConnectionCard(connection, activeConnectionId) {
             Edit
           </button>
           <button
-            class="border border-outline-variant/20 bg-surface-container px-3 py-2.5 text-[10px] font-bold uppercase tracking-[0.18em] text-on-surface-variant transition-colors hover:bg-surface-container-highest"
+            class="delete-button"
             data-action="remove-connection"
             data-connection-id="${escapeHtml(connection.id)}"
             type="button"

package/frontend/js/components/emptyState.js

@@ -22,7 +22,7 @@ function renderRecentConnections(recentConnections = []) {
         .map(
           (connection) => `
             <button
-              class="flex items-center gap-2 border border-outline-variant/15 bg-surface-container-low px-4 py-3 text-left text-on-surface transition-colors hover:border-primary-container/30 hover:bg-surface-container-high"
+              class="control-button flex items-center gap-2 border border-outline-variant/15 bg-surface-container-low px-4 text-left text-on-surface transition-colors hover:border-primary-container/30 hover:bg-surface-container-high"
               data-action="select-connection"
               data-connection-id="${escapeHtml(connection.id)}"
               type="button"
@@ -135,7 +135,7 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
             ? `
               <div class="mx-auto mt-8 grid w-full max-w-3xl grid-cols-1 gap-4 px-6 md:grid-cols-3">
                 <button
-                  class="border border-outline-variant/20 bg-surface-container-low px-5 py-4 font-headline text-sm font-bold uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container/30 hover:text-primary-container"
+                  class="standard-button"
                   data-action="navigate"
                   data-to="/overview"
                   type="button"
@@ -143,7 +143,7 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
                   Overview
                 </button>
                 <button
-                  class="border border-outline-variant/20 bg-surface-container-low px-5 py-4 font-headline text-sm font-bold uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container/30 hover:text-primary-container"
+                  class="standard-button"
                   data-action="navigate"
                   data-to="/structure"
                   type="button"
@@ -151,7 +151,7 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
                   Structure
                 </button>
                 <button
-                  class="border border-outline-variant/20 bg-surface-container-low px-5 py-4 font-headline text-sm font-bold uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container/30 hover:text-primary-container"
+                  class="standard-button"
                   data-action="navigate"
                   data-to="/editor"
                   type="button"

package/frontend/js/components/modal.js

@@ -13,7 +13,7 @@ function renderField({ label, name, type = "text", placeholder = "", value = ""
         ${escapeHtml(label)}
       </span>
       <input
-        class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+        class="control-input w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
         name="${escapeHtml(name)}"
         placeholder="${escapeHtml(placeholder)}"
         type="${escapeHtml(type)}"
@@ -25,14 +25,18 @@ function renderField({ label, name, type = "text", placeholder = "", value = ""
 
 function renderCheckboxField({ label, name, checked = false, text }) {
   return `
-    <label class="flex items-center gap-3 border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface">
-      <input
-        class="rounded-none border-outline bg-surface-container-lowest text-primary-container focus:ring-primary-container"
-        ${checked ? "checked" : ""}
-        name="${escapeHtml(name)}"
-        type="checkbox"
-      />
-      ${escapeHtml(text || label)}
+    <label class="block space-y-2">
+      <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+        ${escapeHtml(label)}
+      </span>
+      <span class="standard-checkbox">
+        <input
+          ${checked ? "checked" : ""}
+          name="${escapeHtml(name)}"
+          type="checkbox"
+        />
+        <span>${escapeHtml(text || label)}</span>
+      </span>
     </label>
   `;
 }
@@ -50,7 +54,7 @@ function renderFileField({
       </span>
       <input
         accept="${escapeHtml(accept)}"
-        class="block w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface file:mr-4 file:border-0 file:bg-primary-container file:px-3 file:py-2 file:text-xs file:font-bold file:text-on-primary"
+        class="control-input block w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface file:mr-4 file:border-0 file:bg-primary-container file:px-3 file:py-2 file:text-xs file:font-bold file:text-on-primary"
         name="${escapeHtml(name)}"
         type="file"
       />
@@ -70,7 +74,7 @@ function renderSelectField({ label, name, value = "", options = [], bind = "" })
         ${escapeHtml(label)}
       </span>
       <select
-        class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+        class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
         ${bind ? `data-bind="${escapeHtml(bind)}"` : ""}
         ${name ? `name="${escapeHtml(name)}"` : ""}
       >
@@ -124,14 +128,14 @@ function renderOpenConnectionForm(modal) {
       ${renderError(modal.error)}
       <div class="flex items-center justify-end gap-3 pt-2">
         <button
-          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          class="standard-button"
           data-action="close-modal"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="bg-primary-container px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-on-primary"
+          class="standard-button"
           type="submit"
         >
           ${modal.submitting ? "Opening..." : "Open Database"}
@@ -198,14 +202,14 @@ function renderEditConnectionForm(modal) {
       ${renderError(modal.error)}
       <div class="flex items-center justify-end gap-3 pt-2">
         <button
-          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          class="standard-button"
           data-action="close-modal"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="bg-primary-container px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-on-primary"
+          class="standard-button"
           type="submit"
         >
           ${modal.submitting ? "Saving..." : "Save Changes"}
@@ -231,14 +235,14 @@ function renderCreateDatabaseForm(modal) {
       ${renderError(modal.error)}
       <div class="flex items-center justify-end gap-3 pt-2">
         <button
-          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          class="standard-button"
           data-action="close-modal"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="bg-primary-container px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-on-primary"
+          class="standard-button"
           type="submit"
         >
           ${modal.submitting ? "Creating..." : "Create Database"}
@@ -265,7 +269,7 @@ function renderImportTargetOptions(state) {
         Import Target
       </span>
       <select
-        class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+        class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
         name="targetMode"
       >
         ${
@@ -286,7 +290,7 @@ function renderImportTargetOptions(state) {
               Recent Connection
             </span>
             <select
-              class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+              class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
               name="targetConnectionId"
             >
               ${recentOptions}
@@ -324,14 +328,14 @@ function renderImportSqlForm(modal, state) {
       ${renderError(modal.error)}
       <div class="flex items-center justify-end gap-3 pt-2">
         <button
-          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          class="standard-button"
           data-action="close-modal"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="bg-primary-container px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-on-primary"
+          class="standard-button"
           type="submit"
         >
           ${modal.submitting ? "Importing..." : "Import SQL Dump"}
@@ -393,14 +397,14 @@ function renderDeleteRowConfirmForm(modal) {
       ${renderError(modal.error)}
       <div class="flex items-center justify-end gap-3 pt-2">
         <button
-          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          class="standard-button"
           data-action="close-modal"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="border border-error/25 bg-error-container/10 px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-error"
+          class="delete-button"
           type="submit"
         >
           ${modal.submitting ? "Deleting..." : "Delete Row"}
@@ -633,14 +637,14 @@ function renderChartEditorForm(modal, state) {
       ${renderError(modal.error)}
       <div class="flex items-center justify-end gap-3 pt-2">
         <button
-          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          class="standard-button"
           data-action="close-modal"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="bg-primary-container px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-on-primary"
+          class="standard-button"
           type="submit"
         >
           ${modal.submitting ? "Saving..." : draft.mode === "edit" ? "Save Chart" : "Create Chart"}
@@ -666,14 +670,14 @@ function renderDeleteChartForm(modal) {
       ${renderError(modal.error)}
       <div class="flex items-center justify-end gap-3 pt-2">
         <button
-          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          class="standard-button"
           data-action="close-modal"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="border border-error/25 bg-error-container/10 px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-error"
+          class="delete-button"
           type="submit"
         >
           ${modal.submitting ? "Deleting..." : "Delete Chart"}
@@ -747,7 +751,7 @@ export function renderModal(state) {
             </h2>
           </div>
           <button
-            class="flex h-10 w-10 items-center justify-center border border-outline-variant/20 text-on-surface-variant hover:bg-surface-container-highest hover:text-primary-container"
+            class="control-icon-button border border-outline-variant/20 text-on-surface-variant hover:bg-surface-container-highest hover:text-primary-container"
             data-action="close-modal"
             type="button"
           >

package/frontend/js/components/queryEditor.js

@@ -55,8 +55,7 @@ export function renderQueryEditor({
   editorVisible = true,
   historyVisible = true,
 }) {
-  const secondaryButtonClass =
-    "toolbar-button border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-bold uppercase tracking-widest text-on-surface transition-colors hover:border-primary-container hover:text-primary-container";
+  const secondaryButtonClass = "standard-button";
   const left = `
     <div class="flex items-center gap-2 bg-surface-container-lowest px-3 py-1">
       <span class="material-symbols-outlined text-xs text-[#FCE300]">database</span>
@@ -104,9 +103,8 @@ export function renderQueryEditor({
       ${exporting ? "Exporting..." : "Export CSV"}
     </button>
     <button
-      class="toolbar-button toolbar-button--primary bg-primary-container px-4 py-2 font-headline text-xs font-bold uppercase tracking-widest text-on-primary clipped-corner"
+      class="signature-button"
       data-action="execute-query"
-      style="--clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);"
       type="button"
     >
       ${executing ? "RUNNING..." : "EXECUTE"}