@cosxai/ui 0.18.1 → 0.19.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.18.1",
-  "description": "COSX design system \u2014 React 19 component primitives shared across product-meta and other consumers",
+  "version": "0.19.0",
+  "description": "COSX design system — React 19 component primitives shared across product-meta and other consumers",
   "license": "UNLICENSED",
   "type": "module",
   "main": "./src/index.ts",

package/src/command/CommandPalette.tsx

@@ -21,11 +21,19 @@ export interface CommandPaletteProps {
   // here come last in registration order.
   groupOrder?: string[];
   placeholder?: string;
+  // Fires whenever the query changes — on every keystroke and on the
+  // reset-to-empty when the palette opens. Lets a consumer drive an
+  // ASYNC command source (debounce → fetch → register the results as
+  // items via useCommandSource) that the built-in client-side filter
+  // can't provide on its own. Optional + backward compatible: omit it
+  // and the palette behaves exactly as before (static items only).
+  onQueryChange?: ((query: string) => void) | undefined;
 }
 
 export function CommandPalette({
   groupOrder = [],
   placeholder = "Type a command or search…",
+  onQueryChange,
 }: CommandPaletteProps) {
   const ctx = useContext(CommandContext);
   if (!ctx) throw new Error("<CommandPalette> must be inside <CommandProvider>");
@@ -34,12 +42,21 @@ export function CommandPalette({
   const [selectedIdx, setSelectedIdx] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
+  // Latest onQueryChange held in a ref so the open-reset effect can
+  // notify it WITHOUT taking it as a dep — an inline callback changes
+  // identity every render, which would otherwise re-run the effect and
+  // clear the query on every keystroke.
+  const onQueryChangeRef = useRef(onQueryChange);
+  onQueryChangeRef.current = onQueryChange;
 
   // Reset query + focus on every open.
   useEffect(() => {
     if (open) {
       setQ("");
       setSelectedIdx(0);
+      // Tell the consumer the query cleared, so an async source drops
+      // its stale results when the palette reopens.
+      onQueryChangeRef.current?.("");
       // RAF so the modal element exists before focus.
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -164,6 +181,7 @@ export function CommandPalette({
           onChange={(e) => {
             setQ(e.target.value);
             setSelectedIdx(0);
+            onQueryChange?.(e.target.value);
           }}
           placeholder={placeholder}
           style={{

package/src/styles/base.css

@@ -123,6 +123,32 @@ a:visited { color: var(--ck-accent); }
   scrollbar-color: var(--ck-border-strong, rgba(0, 0, 0, 0.25)) transparent;
 }
 
+/* Chromium < 121 doesn't know the standard properties above and fell
+   back to the classic arrow-button gutters (QA: Ben, 2026-07-24 —
+   the first pass "didn't cover everything"; it actually didn't cover
+   older ENGINES). The ::-webkit-scrollbar layer is the fallback for
+   those versions; engines that support scrollbar-width IGNORE these
+   pseudo-elements when it's set, so the two blocks never fight. */
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+*::-webkit-scrollbar-thumb {
+  background: var(--ck-border-strong, rgba(0, 0, 0, 0.25));
+  border-radius: 4px;
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+*::-webkit-scrollbar-corner {
+  background: transparent;
+}
+*::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
 /* ── ActionBar panel + toast slots (design#13) ─────────────────────
    Base chrome for the bar-intrinsic popover (useActionBarPanel) and
    transient bubble (useActionBarToast). Token-driven so every theme