@adecore/ui 0.50.2 → 0.50.4

package/dist/command-palette/virtual.js

@@ -80,9 +80,28 @@ export function CommandPaletteVirtualList({
     }
     const highlight = (index_0, reason) => {
       const row = itemRows[index_0];
-      if (row !== undefined && reason !== 'pointer') {
-        virtualizer.scrollToIndex(row, {
-          align: reason === 'none' ? 'start' : 'auto'
+      if (row === undefined || reason === 'pointer') {
+        return;
+      }
+      // The first item of a group brings its label along, so the list never opens on half a label.
+      const label = row > 0 && rows[row - 1].index === -1 ? row - 1 : null;
+      if (reason === 'none') {
+        const target = label ?? row;
+        if (target === 0) {
+          virtualizer.scrollToOffset(0);
+        } else {
+          virtualizer.scrollToIndex(target, {
+            align: 'start'
+          });
+        }
+        return;
+      }
+      virtualizer.scrollToIndex(row, {
+        align: 'auto'
+      });
+      if (label !== null) {
+        virtualizer.scrollToIndex(label, {
+          align: 'auto'
         });
       }
     };
@@ -92,7 +111,7 @@ export function CommandPaletteVirtualList({
         scroll.current = null;
       }
     };
-  }, [scroll, virtualizer, itemRows]);
+  }, [scroll, virtualizer, itemRows, rows]);
   const visible = virtualizer.getVirtualItems();
   const visibleGroups = new Map();
   for (const item of visible) {

package/dist/theme.css

@@ -842,8 +842,7 @@
         min-width: 0;
         min-height: 0;
         overflow: hidden;
-        /* Rounded where it meets the window's top, square where it stands on the window's bottom. */
-        border-radius: 0 12px 0 0;
+        border-radius: 0 12px 12px 0;
         /* The surface its regions draw, so no lighter ground shows where the rounded edge cuts them. Roomy shows its gaps in it. */
         background: var(--surface);
         box-shadow: 0 0 0 1px var(--border), var(--sheet-shadow);
@@ -884,6 +883,8 @@
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet { background: var(--separator); }
     /* The gaps already set the sheet apart, and a shadow over them reads as a smudge. */
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet { box-shadow: 0 0 0 1px var(--border); }
+    /* Roomy's panes round their own corners, so the sheet's corner on the window's bottom stays square. */
+    .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet { border-bottom-right-radius: 0; }
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet > .ade-workspace-center { gap: 8px; }
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet > .ade-workspace-sidebar:not([data-auto]) { margin-right: 8px; }
     .ade-workspace[data-layout="roomy"] > .ade-workspace-side-panel:not([data-auto]) { margin-left: 8px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.50.2",
+  "version": "0.50.4",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/command-palette/virtual.tsx

@@ -90,8 +90,29 @@ export function CommandPaletteVirtualList<ItemValue, Group extends { items: read
         const highlight = (index: number, reason: string): void => {
             const row = itemRows[index];
 
-            if (row !== undefined && reason !== 'pointer') {
-                virtualizer.scrollToIndex(row, { align: reason === 'none' ? 'start' : 'auto' });
+            if (row === undefined || reason === 'pointer') {
+                return;
+            }
+
+            // The first item of a group brings its label along, so the list never opens on half a label.
+            const label = row > 0 && rows[row - 1]!.index === -1 ? row - 1 : null;
+
+            if (reason === 'none') {
+                const target = label ?? row;
+
+                if (target === 0) {
+                    virtualizer.scrollToOffset(0);
+                } else {
+                    virtualizer.scrollToIndex(target, { align: 'start' });
+                }
+
+                return;
+            }
+
+            virtualizer.scrollToIndex(row, { align: 'auto' });
+
+            if (label !== null) {
+                virtualizer.scrollToIndex(label, { align: 'auto' });
             }
         };
 
@@ -102,7 +123,7 @@ export function CommandPaletteVirtualList<ItemValue, Group extends { items: read
                 scroll.current = null;
             }
         };
-    }, [scroll, virtualizer, itemRows]);
+    }, [scroll, virtualizer, itemRows, rows]);
 
     const visible = virtualizer.getVirtualItems();
     const visibleGroups = new Map<number, typeof visible>();

package/src/theme.css

@@ -842,8 +842,7 @@
         min-width: 0;
         min-height: 0;
         overflow: hidden;
-        /* Rounded where it meets the window's top, square where it stands on the window's bottom. */
-        border-radius: 0 12px 0 0;
+        border-radius: 0 12px 12px 0;
         /* The surface its regions draw, so no lighter ground shows where the rounded edge cuts them. Roomy shows its gaps in it. */
         background: var(--surface);
         box-shadow: 0 0 0 1px var(--border), var(--sheet-shadow);
@@ -884,6 +883,8 @@
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet { background: var(--separator); }
     /* The gaps already set the sheet apart, and a shadow over them reads as a smudge. */
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet { box-shadow: 0 0 0 1px var(--border); }
+    /* Roomy's panes round their own corners, so the sheet's corner on the window's bottom stays square. */
+    .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet { border-bottom-right-radius: 0; }
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet > .ade-workspace-center { gap: 8px; }
     .ade-workspace[data-layout="roomy"] > .ade-workspace-sheet > .ade-workspace-sidebar:not([data-auto]) { margin-right: 8px; }
     .ade-workspace[data-layout="roomy"] > .ade-workspace-side-panel:not([data-auto]) { margin-left: 8px; }