feat(ui): refresh preset data flow and bump driver pointer

Co-authored-by: Cursor <cursoragent@cursor.com>

src/static/presets.js

@@ -255,6 +255,18 @@ document.addEventListener('DOMContentLoaded', () => {
     return Number.isFinite(n) ? n : 0;
   };
 
+  const patternSupportsBackgroundColor = () => {
+    if (!presetPatternInput || !presetPatternInput.value) {
+      return false;
+    }
+    const pattern = String(presetPatternInput.value).trim();
+    const meta =
+      (cachedPatterns && cachedPatterns[pattern]) ||
+      (cachedPatterns && cachedPatterns[pattern.toLowerCase()]) ||
+      null;
+    return !!(meta && typeof meta === 'object' && meta.has_background === true);
+  };
+
   const renderPresetColors = (colors, paletteRefs) => {
     if (!presetColorsContainer) return;
     
@@ -296,14 +308,21 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     
     const swatchContainer = document.createElement('div');
-    swatchContainer.style.cssText = 'display: flex; flex-wrap: wrap; gap: 0.5rem;';
+    swatchContainer.style.cssText = 'display: flex; flex-wrap: nowrap; gap: 0.5rem; align-items: flex-start; overflow-x: auto;';
     swatchContainer.classList.add('color-swatches-container');
     
+    const showBackgroundLabel = patternSupportsBackgroundColor() && currentPresetColors.length > 1;
     currentPresetColors.forEach((color, index) => {
+      const isBackgroundColor = showBackgroundLabel && index === currentPresetColors.length - 1;
       const swatchWrapper = document.createElement('div');
       swatchWrapper.style.cssText = 'position: relative; display: inline-block;';
+      if (isBackgroundColor) {
+        // Keep the background color swatch at the far right.
+        swatchWrapper.style.marginLeft = 'auto';
+      }
       swatchWrapper.draggable = true;
       swatchWrapper.dataset.colorIndex = index;
+      swatchWrapper.dataset.backgroundColor = isBackgroundColor ? '1' : '0';
       const refAtIndex = currentPresetPaletteRefs[index];
       swatchWrapper.dataset.paletteRef = Number.isInteger(refAtIndex) ? String(refAtIndex) : '';
       swatchWrapper.classList.add('draggable-color-swatch');
@@ -424,6 +443,18 @@ document.addEventListener('DOMContentLoaded', () => {
       swatchWrapper.appendChild(swatch);
       swatchWrapper.appendChild(colorPicker);
       swatchWrapper.appendChild(removeBtn);
+      if (isBackgroundColor) {
+        const bgLabel = document.createElement('div');
+        bgLabel.textContent = 'Background';
+        bgLabel.style.cssText = `
+          margin-top: 0.25rem;
+          text-align: center;
+          font-size: 0.72rem;
+          color: #cfcfcf;
+          letter-spacing: 0.02em;
+        `;
+        swatchWrapper.appendChild(bgLabel);
+      }
       swatchContainer.appendChild(swatchWrapper);
     });
     
@@ -445,6 +476,10 @@ document.addEventListener('DOMContentLoaded', () => {
       e.preventDefault();
       const dragging = swatchContainer.querySelector('.dragging-color');
       if (!dragging) return;
+      const backgroundEl = swatchContainer.querySelector('.draggable-color-swatch[data-background-color="1"]');
+      if (backgroundEl) {
+        swatchContainer.appendChild(backgroundEl);
+      }
       
       // Get new order of colors from DOM
       const colorElements = [...swatchContainer.querySelectorAll('.draggable-color-swatch')];

src/static/style.css

@@ -550,14 +550,14 @@ body.preset-ui-run .edit-mode-only {
     padding: 0;
 }
 
-/* Zone preset selecting area: 3 columns, vertical scroll only */
+/* Zone preset selecting area: 8 columns on desktop, vertical scroll only */
 #presets-list-zone {
     flex: 1;
     min-height: 0;
     overflow-y: auto;
     overflow-x: hidden;
     display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(8, minmax(0, 1fr));
     grid-auto-rows: 5rem;
     column-gap: 0.3rem;
     row-gap: 0.3rem;
@@ -1261,8 +1261,8 @@ body.preset-ui-run .edit-mode-only {
 .color-swatches-container {
     min-height: 80px;
 }
-/* Presets list: 3 columns and vertical scroll (defined above); mobile same */
-@media (max-width: 1000px) {
+/* Presets list: 3 columns on phone-sized screens */
+@media (max-width: 600px) {
     #presets-list-zone {
         grid-template-columns: repeat(3, minmax(0, 1fr));
         padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 7rem);