@studiolxd/brand 49.1.0 → 49.2.0

package/CHANGELOG.md

@@ -7,6 +7,33 @@ El paquete sigue [semver](https://semver.org/lang/es/): **patch** para bug fixes
 regeneración de `dist`, **minor** para componentes/props/variantes/tokens nuevos, **major**
 para breaking changes.
 
+## [49.2.0] — 2026-09-16
+
+> **Minor.** `CommandPalette` deja de ser dueña exclusiva de su consulta: `onQueryChange`
+> avisa de cada cambio del texto del buscador (y de `""` al cerrarse) y `filter`
+> (`'internal'` | `'none'`, global o por grupo con `CommandPaletteGroup.filter`) permite
+> apagar el filtrado interno para un grupo que ya llega filtrado desde fuera.
+
+### El porqué
+
+Un consumidor que busca en servidor (el `PublicCommandMenu` de la suite, resultados de una
+API con *debounce*) no tenía forma de leer lo que el usuario tecleaba salvo envolviendo la
+paleta en un contenedor con `onInput` y leyendo el valor por el árbol — una lectura por la
+puerta de atrás. Ese mismo consumidor, además, tenía que meter la consulta en `keywords` de
+cada resultado para que el filtrado interno no se los comiera, aunque los resultados ya
+llegaran filtrados.
+
+### El arreglo
+
+`onQueryChange?: (query: string) => void` se llama con el texto tal cual lo escribe quien
+usa la paleta, y con `""` cuando la paleta se cierra, para que el consumidor no arrastre una
+consulta vieja a la siguiente apertura. `query?: string` permite además controlarla desde
+fuera. `filter?: 'internal' | 'none'` (por defecto `'internal'`, sin cambio de
+comportamiento) apaga el filtrado por `label`/`keywords` cuando vale `'none'`; se puede fijar
+también por grupo (`CommandPaletteGroup.filter`) para mezclar, en una misma paleta, un grupo
+con filtrado interno y otro que ya llega filtrado de fuera. Story «Búsqueda en servidor» y
+MDX § «Buscar fuera de la paleta».
+
 ## [49.1.0] — 2026-09-16
 
 > **Minor.** Regla visual nueva, sin cambios de API: **un enlace dentro de un `Alert` o de un

package/dist/_types/molecules/CommandPalette/CommandPalette.d.ts

@@ -37,6 +37,13 @@ export interface CommandPaletteGroup {
     id: string;
     heading: string;
     items: CommandPaletteItem[];
+    /**
+     * Filtrado de este grupo. Anula al `filter` global de la paleta:
+     * - `'internal'` (por defecto, el del global): filtra por `label`/`keywords` como siempre.
+     * - `'none'`: el grupo enseña sus ítems tal cual, sin comparar con la consulta —
+     *   para un grupo que ya llega filtrado desde fuera (búsqueda en servidor).
+     */
+    filter?: 'internal' | 'none';
 }
 export interface CommandPaletteProps {
     open: boolean;
@@ -81,6 +88,27 @@ export interface CommandPaletteProps {
      * Por defecto, el del entorno.
      */
     locale?: Intl.LocalesArgument;
+    /**
+     * Filtrado global de la paleta:
+     * - `'internal'` (por defecto): filtra los ítems por `label`/`keywords` contra la consulta.
+     * - `'none'`: la paleta no filtra nada — enseña los ítems de `groups` tal cual se los
+     *   pasan. Es lo que necesita una búsqueda en servidor (con `onQueryChange` y su propio
+     *   debounce), que ya trae los resultados filtrados.
+     *
+     * Un grupo concreto puede anular este valor con `CommandPaletteGroup.filter`.
+     */
+    filter?: 'internal' | 'none';
+    /**
+     * Consulta del buscador, para controlarla desde fuera (p. ej. resetearla al elegir un
+     * filtro externo). Sin ella, la paleta lleva su propio estado interno.
+     */
+    query?: string;
+    /**
+     * Se llama con cada cambio del texto del buscador (ya recortado por el filtrado interno
+     * cuando lo hay) y con `""` al cerrarse la paleta. Es la vía de lectura de la consulta
+     * para quien necesite buscar en servidor sin envolver la paleta ni leer el DOM.
+     */
+    onQueryChange?: (query: string) => void;
     className?: string;
 }
 /**
@@ -92,4 +120,4 @@ export interface CommandPaletteProps {
  * de Base UI en modo `inline` — sin popup propio, porque la superficie ya la
  * pone el `Modal`, que también se queda con Escape y el foco atrapado.
  */
-export declare function CommandPalette({ open, onOpenChange, groups, title, placeholder, emptyLabel, listLabel, closeLabel, shortcut, locale, className, }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;
+export declare function CommandPalette({ open, onOpenChange, groups, title, placeholder, emptyLabel, listLabel, closeLabel, shortcut, locale, filter: filterMode, query, onQueryChange, className, }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;

package/dist/command-palette.js

@@ -2,63 +2,71 @@
 import './command-palette.css';
 import { n as e } from "./_shared/brandmessagescontext.js";
 import { Modal as t } from "./modal.js";
-import { useCallback as n, useEffect as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Autocomplete as o } from "@base-ui/react/autocomplete";
+import { useCallback as n, useEffect as r, useRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Autocomplete as s } from "@base-ui/react/autocomplete";
 //#region src/stories/molecules/CommandPalette/CommandPalette.tsx
-function s({ open: s, onOpenChange: c, groups: l, title: u, placeholder: d, emptyLabel: f, listLabel: p, closeLabel: m, shortcut: h = "k", locale: g, className: _ }) {
-	let v = e("commandPalette");
+function c({ open: c, onOpenChange: l, groups: u, title: d, placeholder: f, emptyLabel: p, listLabel: m, closeLabel: h, shortcut: g = "k", locale: _, filter: v = "internal", query: y, onQueryChange: b, className: x }) {
+	let S = e("commandPalette"), C = i(c);
 	r(() => {
-		if (h === !1) return;
+		C.current && !c && b?.(""), C.current = c;
+	}, [c, b]), r(() => {
+		if (g === !1) return;
 		let e = (e) => {
-			typeof e.key == "string" && e.key.toLowerCase() === h && (e.metaKey || e.ctrlKey) && (e.preventDefault(), c(!s));
+			typeof e.key == "string" && e.key.toLowerCase() === g && (e.metaKey || e.ctrlKey) && (e.preventDefault(), l(!c));
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [
-		h,
-		s,
-		c
+		g,
+		c,
+		l
 	]);
-	let y = o.useFilter({
+	let w = s.useFilter({
 		sensitivity: "base",
-		locale: g
-	}), b = n((e, t) => y.contains(e.label, t) || (e.keywords ?? []).some((e) => y.contains(e, t)), [y]);
-	return /* @__PURE__ */ i(t, {
-		open: s,
-		onClose: () => c(!1),
-		title: v("title", u),
-		...m ? { closeLabel: m } : {},
-		children: /* @__PURE__ */ i(o.Root, {
+		locale: _
+	}), T = n((e, t) => (u.find((t) => t.items.includes(e))?.filter ?? v) === "none" ? !0 : w.contains(e.label, t) || (e.keywords ?? []).some((e) => w.contains(e, t)), [
+		w,
+		u,
+		v
+	]);
+	return /* @__PURE__ */ a(t, {
+		open: c,
+		onClose: () => l(!1),
+		title: S("title", d),
+		...h ? { closeLabel: h } : {},
+		children: /* @__PURE__ */ a(s.Root, {
 			inline: !0,
 			open: !0,
-			items: l,
-			filter: b,
+			items: u,
+			filter: T,
 			autoHighlight: "always",
-			children: /* @__PURE__ */ a("div", {
-				className: ["command-palette", _].filter(Boolean).join(" "),
+			...y === void 0 ? {} : { value: y },
+			onValueChange: (e) => b?.(e),
+			children: /* @__PURE__ */ o("div", {
+				className: ["command-palette", x].filter(Boolean).join(" "),
 				children: [
-					/* @__PURE__ */ i(o.Input, {
+					/* @__PURE__ */ a(s.Input, {
 						className: "command-palette__input",
-						placeholder: v("placeholder", d),
+						placeholder: S("placeholder", f),
 						autoFocus: !0
 					}),
-					/* @__PURE__ */ i(o.List, {
+					/* @__PURE__ */ a(s.List, {
 						className: "command-palette__list",
-						"aria-label": v("list", p),
-						children: (e) => /* @__PURE__ */ a(o.Group, {
+						"aria-label": S("list", m),
+						children: (e) => /* @__PURE__ */ o(s.Group, {
 							items: e.items,
 							className: "command-palette__group",
-							children: [/* @__PURE__ */ i(o.GroupLabel, {
+							children: [/* @__PURE__ */ a(s.GroupLabel, {
 								className: "command-palette__heading",
 								children: e.heading
-							}), /* @__PURE__ */ i(o.Collection, { children: (e) => /* @__PURE__ */ a(o.Item, {
+							}), /* @__PURE__ */ a(s.Collection, { children: (e) => /* @__PURE__ */ o(s.Item, {
 								value: e,
 								disabled: e.disabled,
 								className: "command-palette__item",
 								onClick: () => {
-									c(!1), e.onSelect();
+									l(!1), e.onSelect();
 								},
-								children: [e.icon && /* @__PURE__ */ i("span", {
+								children: [e.icon && /* @__PURE__ */ a("span", {
 									className: "command-palette__item-icon",
 									"aria-hidden": "true",
 									children: e.icon
@@ -66,9 +74,9 @@ function s({ open: s, onOpenChange: c, groups: l, title: u, placeholder: d, empt
 							}, e.id) })]
 						}, e.id)
 					}),
-					/* @__PURE__ */ i(o.Empty, {
+					/* @__PURE__ */ a(s.Empty, {
 						className: "command-palette__empty",
-						children: v("empty", f)
+						children: S("empty", p)
 					})
 				]
 			})
@@ -76,4 +84,4 @@ function s({ open: s, onOpenChange: c, groups: l, title: u, placeholder: d, empt
 	});
 }
 //#endregion
-export { s as CommandPalette };
+export { c as CommandPalette };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.1.0",
+  "version": "49.2.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",