@chelone/vue 0.6.0 → 0.9.0

package/dist/components/admin/layout/command-menu-content.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,289 @@
+import { useResourceRegistry } from "../../../admin/resource-registry.js";
+import { useCheloneContext } from "../../../context.js";
+import { useRefresh } from "../../../data/use-refresh.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { useGetResourceLabel } from "../../../label/use-get-resource-label.js";
+import { useCreatePath, useNavigate } from "../../../router/nav-composables.js";
+import { useStore } from "../../../store/use-store-item.js";
+import { CommandEmpty, CommandList, CommandShortcut } from "../../ui/command/parts.js";
+import command_group_default from "../../ui/command/command-group.js";
+import command_input_default from "../../ui/command/command-input.js";
+import command_item_default from "../../ui/command/command-item.js";
+import { useCommand } from "../../ui/command/context.js";
+import command_menu_gate_default from "./command-menu-gate.js";
+import command_menu_logout_default from "./command-menu-logout.js";
+import command_menu_record_search_default from "./command-menu-record-search.js";
+import { ListIcon } from "./icons.js";
+import { useTheme } from "./theme-context.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, onScopeDispose, openBlock, ref, renderList, resolveDynamicComponent, toDisplayString, unref, useModel, watch, withCtx } from "vue";
+import { getVisibleCommands, groupCommands, recentsKey, rememberRecent } from "@chelone/core";
+// src/components/admin/layout/command-menu-content.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	class: "flex items-center gap-4 border-t px-3 py-2 text-xs text-muted-foreground",
+	"data-slot": "command-menu-footer"
+};
+var _hoisted_2 = { class: "flex items-center gap-1" };
+var _hoisted_3 = { class: "flex items-center gap-1" };
+var _hoisted_4 = { class: "flex items-center gap-1" };
+var command_menu_content_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "command-menu-content",
+	props: /*@__PURE__*/ mergeModels({
+		resources: {},
+		searchFields: {},
+		perResourceLimit: {},
+		recentsLimit: {},
+		searchDebounceMs: {},
+		placeholder: {},
+		commands: {}
+	}, {
+		"query": { required: true },
+		"queryModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["close", "run"], ["update:query"]),
+	setup(__props, { emit: __emit }) {
+		/**
+		* The inside of the menu: the search box, the groups and the footer. It sits
+		* under a `<Command>`, in the dialog or in the bottom sheet, and mirrors that
+		* command's search text into the menu's `query` so `setQuery` and the record
+		* search see one value.
+		*/
+		const props = __props;
+		const query = useModel(__props, "query");
+		const emit = __emit;
+		const translate = useTranslate();
+		const getResourceLabel = useGetResourceLabel();
+		const registry = useResourceRegistry();
+		const createPath = useCreatePath();
+		const navigate = useNavigate();
+		const refresh = useRefresh();
+		const { setTheme } = useTheme();
+		const { authProvider, store } = useCheloneContext();
+		const command = useCommand();
+		watch(() => command.search.value, (text) => {
+			if (text !== query.value) query.value = text;
+		});
+		watch(query, (text) => {
+			if (text !== command.search.value) command.setSearch(text);
+		}, { immediate: true });
+		const settled = ref("");
+		let timer;
+		watch([query, () => props.searchDebounceMs], ([text, wait]) => {
+			clearTimeout(timer);
+			if (text.trim() === "") {
+				settled.value = "";
+				return;
+			}
+			timer = setTimeout(() => {
+				settled.value = text;
+			}, wait);
+		}, { immediate: true });
+		onScopeDispose(() => clearTimeout(timer));
+		const names = computed(() => {
+			const listed = Object.keys(registry.definitions).filter((name) => registry.definitions[name]?.list != null);
+			const only = props.resources;
+			return only ? listed.filter((name) => only.includes(name)) : listed;
+		});
+		/** The record view a hit opens: show when the resource has one, else edit. */
+		function recordView(resource) {
+			const definition = registry.definitions[resource];
+			if (definition?.show) return "show";
+			return definition?.edit ? "edit" : void 0;
+		}
+		const searched = computed(() => names.value.filter((name) => recordView(name) !== void 0));
+		const [stored, setStored] = store ? useStore(recentsKey, []) : [ref([]), (_) => {}];
+		const recents = computed(() => (stored.value ?? []).filter((entry) => entry.type === "resource" ? registry.definitions[entry.resource]?.list != null : recordView(entry.resource) !== void 0).slice(0, props.recentsLimit));
+		const showRecents = computed(() => query.value.trim() === "" && recents.value.length > 0);
+		function remember(entry) {
+			setStored(rememberRecent(stored.value ?? [], entry, props.recentsLimit));
+		}
+		function go(entry) {
+			emit("close");
+			remember(entry);
+			if (entry.type === "resource") {
+				navigate(createPath({
+					resource: entry.resource,
+					type: "list"
+				}));
+				return;
+			}
+			const type = recordView(entry.resource);
+			if (type && entry.id !== void 0) navigate(createPath({
+				resource: entry.resource,
+				id: entry.id,
+				type
+			}));
+		}
+		const builtIns = computed(() => {
+			const theme = translate("chelone.command_menu.theme", { _: "Theme" });
+			return [{
+				id: "refresh",
+				label: translate("chelone.command_menu.refresh", { _: "Refresh" }),
+				keywords: ["reload", "data"],
+				onSelect: refresh
+			}, ...[
+				"light",
+				"dark",
+				"system"
+			].map((mode) => ({
+				id: `theme-${mode}`,
+				label: translate(`chelone.command_menu.theme_${mode}`, { _: `${mode[0]?.toUpperCase()}${mode.slice(1)} theme` }),
+				group: theme,
+				keywords: [
+					"theme",
+					"appearance",
+					"mode"
+				],
+				onSelect: () => setTheme(mode)
+			}))];
+		});
+		const groups = computed(() => groupCommands(getVisibleCommands([...props.commands, ...builtIns.value]).map((action) => ({
+			...action,
+			keywords: [...action.keywords ?? [], action.id]
+		}))));
+		const resourceItems = computed(() => names.value.map((name) => ({
+			name,
+			label: getResourceLabel(name, 2),
+			keywords: [name]
+		})));
+		const recentItems = computed(() => recents.value.map((entry) => ({
+			entry,
+			key: `${entry.type}/${entry.resource}/${entry.id ?? ""}`,
+			keywords: [entry.label]
+		})));
+		function heading(group) {
+			return group === "actions" ? translate("chelone.command_menu.actions", { _: "Actions" }) : group;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				createVNode(unref(command_input_default), { placeholder: __props.placeholder ?? unref(translate)("chelone.command_menu.placeholder", { _: "Search or run a command..." }) }, null, 8, ["placeholder"]),
+				createVNode(unref(CommandList), null, {
+					default: withCtx(() => [
+						createVNode(unref(CommandEmpty), null, {
+							default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("chelone.command_menu.empty", { _: "No results found." })), 1)]),
+							_: 1
+						}),
+						showRecents.value ? (openBlock(), createBlock(unref(command_group_default), {
+							key: 0,
+							heading: unref(translate)("chelone.command_menu.recent", { _: "Recent" })
+						}, {
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(recentItems.value, ({ entry, key, keywords }) => {
+								return openBlock(), createBlock(command_menu_gate_default, {
+									key,
+									resource: entry.resource
+								}, {
+									default: withCtx(() => [createVNode(unref(command_item_default), {
+										value: `recent/${key}`,
+										keywords,
+										onSelect: ($event) => go(entry)
+									}, {
+										default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(unref(registry).definitions[entry.resource]?.icon ?? unref(ListIcon)))), createTextVNode(" " + toDisplayString(entry.label), 1)]),
+										_: 2
+									}, 1032, [
+										"value",
+										"keywords",
+										"onSelect"
+									])]),
+									_: 2
+								}, 1032, ["resource"]);
+							}), 128))]),
+							_: 1
+						}, 8, ["heading"])) : createCommentVNode("", true),
+						createVNode(unref(command_group_default), { heading: unref(translate)("chelone.command_menu.resources", { _: "Resources" }) }, {
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(resourceItems.value, (item) => {
+								return openBlock(), createBlock(command_menu_gate_default, {
+									key: item.name,
+									resource: item.name
+								}, {
+									default: withCtx(() => [createVNode(unref(command_item_default), {
+										value: item.label,
+										keywords: item.keywords,
+										onSelect: ($event) => go({
+											type: "resource",
+											resource: item.name,
+											label: item.label
+										})
+									}, {
+										default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(unref(registry).definitions[item.name]?.icon ?? unref(ListIcon)))), createTextVNode(" " + toDisplayString(item.label), 1)]),
+										_: 2
+									}, 1032, [
+										"value",
+										"keywords",
+										"onSelect"
+									])]),
+									_: 2
+								}, 1032, ["resource"]);
+							}), 128))]),
+							_: 1
+						}, 8, ["heading"]),
+						(openBlock(true), createElementBlock(Fragment, null, renderList(searched.value, (name) => {
+							return openBlock(), createBlock(command_menu_record_search_default, {
+								key: name,
+								resource: name,
+								query: settled.value,
+								field: __props.searchFields[name] ?? "q",
+								limit: __props.perResourceLimit,
+								onSelect: (hit) => go({
+									type: "record",
+									resource: name,
+									id: hit.id,
+									label: hit.label
+								})
+							}, null, 8, [
+								"resource",
+								"query",
+								"field",
+								"limit",
+								"onSelect"
+							]);
+						}), 128)),
+						(openBlock(true), createElementBlock(Fragment, null, renderList(groups.value, ([group, members]) => {
+							return openBlock(), createBlock(unref(command_group_default), {
+								key: group,
+								heading: heading(group)
+							}, {
+								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(members, (action) => {
+									return openBlock(), createBlock(unref(command_item_default), {
+										key: action.id,
+										value: action.label,
+										keywords: action.keywords,
+										onSelect: ($event) => emit("run", action)
+									}, {
+										default: withCtx(() => [
+											action.icon ? (openBlock(), createBlock(resolveDynamicComponent(action.icon), { key: 0 })) : createCommentVNode("", true),
+											createTextVNode(" " + toDisplayString(action.label) + " ", 1),
+											action.shortcut ? (openBlock(), createBlock(unref(CommandShortcut), { key: 1 }, {
+												default: withCtx(() => [createTextVNode(toDisplayString(action.shortcut), 1)]),
+												_: 2
+											}, 1024)) : createCommentVNode("", true)
+										]),
+										_: 2
+									}, 1032, [
+										"value",
+										"keywords",
+										"onSelect"
+									]);
+								}), 128))]),
+								_: 2
+							}, 1032, ["heading"]);
+						}), 128)),
+						unref(authProvider) ? (openBlock(), createBlock(command_menu_logout_default, {
+							key: 1,
+							onSelect: _cache[0] || (_cache[0] = ($event) => emit("close"))
+						})) : createCommentVNode("", true)
+					]),
+					_: 1
+				}),
+				createElementVNode("div", _hoisted_1, [
+					createElementVNode("span", _hoisted_2, [
+						_cache[1] || (_cache[1] = createElementVNode("kbd", { class: "rounded border px-1 font-mono" }, "↑", -1)),
+						_cache[2] || (_cache[2] = createElementVNode("kbd", { class: "rounded border px-1 font-mono" }, "↓", -1)),
+						createTextVNode(" " + toDisplayString(unref(translate)("chelone.command_menu.navigate", { _: "Navigate" })), 1)
+					]),
+					createElementVNode("span", _hoisted_3, [_cache[3] || (_cache[3] = createElementVNode("kbd", { class: "rounded border px-1 font-mono" }, "↵", -1)), createTextVNode(" " + toDisplayString(unref(translate)("chelone.command_menu.select", { _: "Select" })), 1)]),
+					createElementVNode("span", _hoisted_4, [_cache[4] || (_cache[4] = createElementVNode("kbd", { class: "rounded border px-1 font-mono" }, "Esc", -1)), createTextVNode(" " + toDisplayString(unref(translate)("chelone.command_menu.close", { _: "Close" })), 1)])
+				])
+			], 64);
+		};
+	}
+});
+export { command_menu_content_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/layout/command-menu-context.d.ts

@@ -4,8 +4,13 @@
  */
 import type { CommandAction } from "@chelone/core";
 import { type Component, type InjectionKey, type MaybeRefOrGetter, type Ref } from "vue";
-/** A command in the menu. The label is text and the icon is a Vue component. */
-export type CommandMenuAction = CommandAction<string, Component>;
+/**
+ * A command in the menu. The label is text and the icon is a Vue component.
+ * `onSelect` may return a promise; the menu reports a rejection as an error.
+ */
+export type CommandMenuAction = Omit<CommandAction<string, Component>, "onSelect"> & {
+    onSelect: () => void | Promise<void>;
+};
 /** What `useCommandMenu()` returns. */
 export interface CommandMenuContextValue {
     isOpen: Readonly<Ref<boolean>>;

package/dist/components/admin/layout/command-menu-context.js

@@ -1,31 +1,27 @@
-import { inject, watch, toValue, onScopeDispose } from "vue";
-const CommandMenuKey = /* @__PURE__ */ Symbol(
-  "chelone-command-menu"
-);
+import { inject, onScopeDispose, toValue, watch } from "vue";
+// src/components/admin/layout/command-menu-context.ts
+var CommandMenuKey = Symbol("chelone-command-menu");
+/** Throws outside a `<CommandMenu>`, so a missing provider fails loudly. */
 function useCommandMenu() {
-  const ctx = inject(CommandMenuKey, null);
-  if (!ctx) {
-    throw new Error(
-      "useCommandMenu: no <CommandMenu> found above this component."
-    );
-  }
-  return ctx;
+	const ctx = inject(CommandMenuKey, null);
+	if (!ctx) throw new Error("useCommandMenu: no <CommandMenu> found above this component.");
+	return ctx;
 }
+/**
+* Adds a command to the menu while the calling scope lives. It registers in
+* setup, registers again when `action` changes, and removes the command when
+* the scope is disposed.
+*/
 function useRegisterCommand(action) {
-  const { registerCommand } = useCommandMenu();
-  let remove;
-  watch(
-    () => toValue(action),
-    (next) => {
-      remove?.();
-      remove = registerCommand(next);
-    },
-    { immediate: true, flush: "sync" }
-  );
-  onScopeDispose(() => remove?.());
+	const { registerCommand } = useCommandMenu();
+	let remove;
+	watch(() => toValue(action), (next) => {
+		remove?.();
+		remove = registerCommand(next);
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
+	onScopeDispose(() => remove?.());
 }
-export {
-  CommandMenuKey,
-  useCommandMenu,
-  useRegisterCommand
-};
+export { CommandMenuKey, useCommandMenu, useRegisterCommand };

package/dist/components/admin/layout/command-menu-gate.js

@@ -0,0 +1,4 @@
+import command_menu_gate_vue_vue_type_script_setup_true_lang_default from "./command-menu-gate.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/layout/command-menu-gate.vue
+var command_menu_gate_default = command_menu_gate_vue_vue_type_script_setup_true_lang_default;
+export { command_menu_gate_default as default };

package/dist/components/admin/layout/command-menu-gate.vue.d.ts

@@ -1,12 +1,15 @@
 type __VLS_Props = {
     resource: string;
 };
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+declare const __VLS_template: () => {
+    __VLS_Slots: {
+        default?: (props: {}) => any;
+    };
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+type __VLS_Slots = ReturnType<typeof __VLS_template>['__VLS_Slots'];
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/components/admin/layout/command-menu-gate.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,22 @@
+import { useMenuAccess } from "./use-menu-access.js";
+import { computed, createCommentVNode, defineComponent, renderSlot, unref } from "vue";
+// src/components/admin/layout/command-menu-gate.vue?vue&type=script&setup=true&lang.ts
+var command_menu_gate_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "command-menu-gate",
+	props: { resource: {} },
+	setup(__props) {
+		/**
+		* Renders its slot once the user may `list` the resource. `useMenuAccess` binds
+		* one resource per call, so each resource in the menu gets its own gate.
+		*/
+		const props = __props;
+		const { canAccess, isPending } = useMenuAccess(computed(() => ({
+			action: "list",
+			resource: props.resource
+		})));
+		return (_ctx, _cache) => {
+			return !unref(isPending) && unref(canAccess) ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 0) : createCommentVNode("", true);
+		};
+	}
+});
+export { command_menu_gate_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/layout/command-menu-logout.js

@@ -0,0 +1,4 @@
+import command_menu_logout_vue_vue_type_script_setup_true_lang_default from "./command-menu-logout.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/layout/command-menu-logout.vue
+var command_menu_logout_default = command_menu_logout_vue_vue_type_script_setup_true_lang_default;
+export { command_menu_logout_default as default };

package/dist/components/admin/layout/command-menu-logout.vue.d.ts

@@ -1,6 +1,7 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: () => any;
 }, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
     onSelect?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/admin/layout/command-menu-logout.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,38 @@
+import { useLogout } from "../../../auth/auth-hooks.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import command_group_default from "../../ui/command/command-group.js";
+import command_item_default from "../../ui/command/command-item.js";
+import { LogOutIcon } from "./icons.js";
+import { createBlock, createTextVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
+// src/components/admin/layout/command-menu-logout.vue?vue&type=script&setup=true&lang.ts
+var command_menu_logout_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "command-menu-logout",
+	emits: ["select"],
+	setup(__props, { emit: __emit }) {
+		/**
+		* The `Log out` item. `useLogout` throws without an `authProvider`, so the
+		* menu mounts this child only when there is one.
+		*/
+		const emit = __emit;
+		const logout = useLogout();
+		const translate = useTranslate();
+		function onSelect() {
+			logout.mutate(void 0);
+			emit("select");
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(command_group_default), { heading: unref(translate)("chelone.command_menu.account", { _: "Account" }) }, {
+				default: withCtx(() => [createVNode(unref(command_item_default), {
+					value: unref(translate)("ra.auth.logout", { _: "Log out" }),
+					keywords: ["sign out"],
+					onSelect
+				}, {
+					default: withCtx(() => [createVNode(unref(LogOutIcon)), createTextVNode(" " + toDisplayString(unref(translate)("ra.auth.logout", { _: "Log out" })), 1)]),
+					_: 1
+				}, 8, ["value"])]),
+				_: 1
+			}, 8, ["heading"]);
+		};
+	}
+});
+export { command_menu_logout_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/layout/command-menu-record-search.js

@@ -0,0 +1,4 @@
+import command_menu_record_search_vue_vue_type_script_setup_true_lang_default from "./command-menu-record-search.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/layout/command-menu-record-search.vue
+var command_menu_record_search_default = command_menu_record_search_vue_vue_type_script_setup_true_lang_default;
+export { command_menu_record_search_default as default };

package/dist/components/admin/layout/command-menu-record-search.vue.d.ts

@@ -6,7 +6,7 @@ type __VLS_Props = {
     field: string;
     limit: number;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (hit: {
         id: string | number;
         label: string;
@@ -17,4 +17,5 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
         label: string;
     }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/admin/layout/command-menu-record-search.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,75 @@
+import { useGetList } from "../../../data/queries.js";
+import { useGetRecordRepresentation } from "../../../label/use-get-record-representation.js";
+import { useGetResourceLabel } from "../../../label/use-get-resource-label.js";
+import command_group_default from "../../ui/command/command-group.js";
+import command_item_default from "../../ui/command/command-item.js";
+import { useMenuAccess } from "./use-menu-access.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, defineComponent, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+// src/components/admin/layout/command-menu-record-search.vue?vue&type=script&setup=true&lang.ts
+var command_menu_record_search_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "command-menu-record-search",
+	props: {
+		resource: {},
+		query: {},
+		field: {},
+		limit: {}
+	},
+	emits: ["select"],
+	setup(__props, { emit: __emit }) {
+		/**
+		* One resource's record hits. `useGetList` and `useGetRecordRepresentation`
+		* bind one resource per call, so each searched resource gets its own child.
+		* Hits are `forceMount`: the provider matched them, and the menu's own text
+		* filter must not hide one whose label does not repeat the query. The `list`
+		* access check gates the request itself, so a resource the user may not list
+		* is never sent a search.
+		*/
+		const props = __props;
+		const emit = __emit;
+		const getResourceLabel = useGetResourceLabel();
+		const represent = useGetRecordRepresentation(props.resource);
+		const searching = computed(() => props.query.trim() !== "");
+		const { canAccess } = useMenuAccess(computed(() => ({
+			action: "list",
+			resource: props.resource
+		})));
+		const enabled = computed(() => searching.value && canAccess.value);
+		const { data } = useGetList(() => props.resource, computed(() => ({
+			pagination: {
+				page: 1,
+				perPage: props.limit
+			},
+			filter: { [props.field]: props.query.trim() }
+		})), { enabled });
+		const hits = computed(() => enabled.value ? (data.value?.data ?? []).map((record) => ({
+			id: record.id,
+			label: represent(record),
+			keywords: [represent(record)]
+		})) : []);
+		return (_ctx, _cache) => {
+			return hits.value.length > 0 ? (openBlock(), createBlock(unref(command_group_default), {
+				key: 0,
+				heading: unref(getResourceLabel)(__props.resource, 2)
+			}, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(hits.value, (hit) => {
+					return openBlock(), createBlock(unref(command_item_default), {
+						key: hit.id,
+						value: `${__props.resource}/${hit.id}`,
+						keywords: hit.keywords,
+						"force-mount": "",
+						onSelect: ($event) => emit("select", hit)
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(hit.label), 1)]),
+						_: 2
+					}, 1032, [
+						"value",
+						"keywords",
+						"onSelect"
+					]);
+				}), 128))]),
+				_: 1
+			}, 8, ["heading"])) : createCommentVNode("", true);
+		};
+	}
+});
+export { command_menu_record_search_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/layout/command-menu.js

@@ -0,0 +1,4 @@
+import command_menu_vue_vue_type_script_setup_true_lang_default from "./command-menu.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/layout/command-menu.vue
+var command_menu_default = command_menu_vue_vue_type_script_setup_true_lang_default;
+export { command_menu_default as default };

package/dist/components/admin/layout/command-menu.vue.d.ts

@@ -1,3 +1,4 @@
+import { type VNode } from "vue";
 import type { CommandMenuAction } from "./command-menu-context.js";
 /** Props for {@link CommandMenu}. */
 export interface CommandMenuProps {
@@ -12,7 +13,7 @@ export interface CommandMenuProps {
     searchFields?: Record<string, string>;
     /** Most record hits per resource. Default `5`. */
     perResourceLimit?: number;
-    /** Most pages kept under Recent. Default `5`. */
+    /** Most pages kept under Recent. Default `10`. */
     recentsLimit?: number;
     /** Commands to list beside the built-in ones. */
     actions?: CommandMenuAction[];
@@ -21,19 +22,20 @@ export interface CommandMenuProps {
     /** Pause after typing before records are searched. Default `250`. */
     searchDebounceMs?: number;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CommandMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CommandMenuProps> & Readonly<{}>, {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CommandMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CommandMenuProps> & Readonly<{}>, {
     placeholder: string;
     resources: string[];
+    actions: CommandMenuAction[];
     searchFields: Record<string, string>;
     perResourceLimit: number;
     recentsLimit: number;
     searchDebounceMs: number;
-    actions: CommandMenuAction[];
     hotkey: string | false;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: () => unknown;
+    default?: () => VNode[];
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;