@ui-sdk/vue 0.0.0-stage → 0.1.0-beta.1

package/dist/command.d.ts

@@ -0,0 +1,322 @@
+import type { ChangeDetails } from "@ui-sdk/core";
+import type { AsyncOptionsStatus } from "@ui-sdk/core/async-options";
+import { type CommandActionDetails, type CommandController, type CommandData, type CommandPagesChangeReason, type CommandQueryChangeReason, type CommandValueChangeDetails, type ListAnnouncement, type SearchFilter } from "@ui-sdk/core/command";
+import { type PropType, type VNode } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+type QueryDetails = ChangeDetails<CommandQueryChangeReason>;
+type PagesDetails = ChangeDetails<CommandPagesChangeReason>;
+/**
+ * A search field over an always-open list of commands. Renders a `div` around them.
+ * @stable
+ */
+declare const Command: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    query: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultQuery: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    pages: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    defaultPages: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    pendingAnnouncement: StringConstructor;
+    onAction: PropType<(value: string, details: CommandActionDetails) => unknown>;
+    items: PropType<CommandData>;
+    emptyItems: PropType<CommandData>;
+    filter: {
+        type: PropType<SearchFilter<string>>;
+        default: undefined;
+    };
+    announcement: PropType<(change: ListAnnouncement) => string | null | undefined>;
+    autoHighlight: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    loop: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    status: PropType<AsyncOptionsStatus>;
+    controller: PropType<CommandController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/command").CommandState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (_value: string | null) => true;
+    "update:modelValue": (_value: string | null) => true;
+    valueChange: (_value: string | null, _details: CommandValueChangeDetails) => true;
+    "update:query": (_query: string) => true;
+    queryChange: (_query: string, _details: QueryDetails) => true;
+    "update:pages": (_pages: string[]) => true;
+    pagesChange: (_pages: string[], _details: PagesDetails) => true;
+    loadMore: () => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    query: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultQuery: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    pages: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    defaultPages: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    pendingAnnouncement: StringConstructor;
+    onAction: PropType<(value: string, details: CommandActionDetails) => unknown>;
+    items: PropType<CommandData>;
+    emptyItems: PropType<CommandData>;
+    filter: {
+        type: PropType<SearchFilter<string>>;
+        default: undefined;
+    };
+    announcement: PropType<(change: ListAnnouncement) => string | null | undefined>;
+    autoHighlight: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    loop: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    status: PropType<AsyncOptionsStatus>;
+    controller: PropType<CommandController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onLoadMore?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((_value: string | null) => any) | undefined;
+    "onUpdate:value"?: ((_value: string | null) => any) | undefined;
+    onValueChange?: ((_value: string | null, _details: CommandValueChangeDetails) => any) | undefined;
+    onQueryChange?: ((_query: string, _details: QueryDetails) => any) | undefined;
+    "onUpdate:query"?: ((_query: string) => any) | undefined;
+    "onUpdate:pages"?: ((_pages: string[]) => any) | undefined;
+    onPagesChange?: ((_pages: string[], _details: PagesDetails) => any) | undefined;
+}>, {
+    filter: SearchFilter<string>;
+    value: string | null;
+    debug: boolean;
+    defaultValue: string | null;
+    query: string;
+    loop: boolean;
+    autoHighlight: boolean;
+    pages: string[];
+    defaultQuery: string;
+    defaultPages: string[];
+    modelValue: string | null;
+}, PartSlots<import("@ui-sdk/core/command").CommandPrimitive, "root">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * The search field. It keeps focus while arrow keys move the highlight. Name it with `aria-label`.
+ * @stable
+ */
+declare const CommandInput: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/command").CommandInputState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/command").CommandInputState>>>, "input">;
+/**
+ * The listbox. Without content, it renders the command's `items`, ranked as the user types.
+ * @stable
+ */
+declare const CommandList: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/command").CommandListState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/command").CommandPrimitive, "list">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * A command. Pressing it, or Enter while it's highlighted, runs it, with its `value` passed to the command's
+ * `@action`.
+ * @stable
+ */
+declare const CommandItem: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: StringConstructor;
+    label: StringConstructor;
+    keywords: PropType<string[]>;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    shortcut: StringConstructor;
+    page: StringConstructor;
+    index: NumberConstructor;
+    onSelect: PropType<(event: Event) => unknown>;
+}>, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/command").CommandItemState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: StringConstructor;
+    label: StringConstructor;
+    keywords: PropType<string[]>;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    shortcut: StringConstructor;
+    page: StringConstructor;
+    index: NumberConstructor;
+    onSelect: PropType<(event: Event) => unknown>;
+}>> & Readonly<{}>, {
+    disabled: boolean;
+}, PartSlots<import("@ui-sdk/core/command").CommandPrimitive, "item">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * The command's text, with the part the search matched in `<mark>`. Without text content, it shows the command's label.
+ * @stable
+ */
+declare const CommandItemText: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/command").CommandPrimitive, "item-text">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "span">;
+/**
+ * The keys of a command's shortcut, formatted for the platform. Inside a command, its `shortcut`.
+ * @stable
+ */
+declare const CommandShortcut: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    shortcut: StringConstructor;
+}>, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/command").CommandShortcutState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    shortcut: StringConstructor;
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/command").CommandPrimitive, "shortcut">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "span">;
+/**
+ * Commands shown while this page is on top. Without `value`, it's the first page. Renders no element.
+ * @stable
+ */
+declare const CommandPage: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: StringConstructor;
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: StringConstructor;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * An icon inside a command. Screen readers, typeahead and filtering
+ * skip it, and `mirror` flips it in right-to-left text.
+ * @stable
+ */
+declare const CommandItemIcon: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/renderer").ItemIconProps & {
+    item?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<{
+    mirror: boolean;
+}>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/renderer").ItemIconProps & {
+    item?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<{
+    mirror: boolean;
+}>>>, "span">;
+/**
+ * A group of commands. It hides while none of its commands matches the search.
+ * @stable
+ */
+declare const CommandGroup: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, "div">;
+/**
+ * A group's heading, which names it.
+ * @stable
+ */
+declare const CommandGroupLabel: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    group?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    group?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, "div">;
+/**
+ * A line between groups. Composed separators hide while the list is filtered.
+ * @stable
+ */
+declare const CommandSeparator: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, "div">;
+/**
+ * Shown while no command matches. Its message is announced when it appears. Place it outside the list.
+ * @stable
+ */
+declare const CommandEmpty: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<{
+        loading: boolean;
+        empty: boolean;
+        query: string;
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/command").CommandPrimitive, "empty">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * A polite live region for loading and result counts. Its content is yours, from the default slot's state.
+ * @stable
+ */
+declare const CommandStatus: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<{
+    status: AsyncOptionsStatus;
+    loading: boolean;
+    count: number;
+}>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<{
+    status: AsyncOptionsStatus;
+    loading: boolean;
+    count: number;
+}>>>, "div">;
+/**
+ * Renders data commands. Used by data command lists, and available for custom layouts.
+ * @stable
+ */
+declare const CommandItems: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<CommandData>;
+        required: true;
+    };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<CommandData>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export { createCommandController } from "@ui-sdk/core/command";
+export type { CommandActionDetails, CommandApi, CommandChangeOptions, CommandController, CommandData, CommandDataGroup, CommandDataItem, CommandEmptyState, CommandInputState, CommandItemIconProps, CommandItemIconState, CommandItemProps, CommandItemState, CommandItemTextState, CommandListState, CommandOptions, CommandPageProps, CommandPagesChangeReason, CommandPrimitive, CommandQueryChangeReason, CommandState, CommandShortcutProps, CommandShortcutState, CommandStatusState, CommandValueChangeDetails, CommandValueChangeReason, ListAnnouncement, ListFilter, ListSeparator, MatchSegment, SearchFilter, } from "@ui-sdk/core/command";
+export { Command, CommandEmpty, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandItemIcon, CommandItems, CommandItemText, CommandList, CommandPage, CommandSeparator, CommandShortcut, CommandStatus, };

package/dist/command.js

@@ -0,0 +1,345 @@
+// src/command.ts
+import {
+  command as commandPrimitive
+} from "@ui-sdk/core/command";
+import {
+  defineComponent,
+  Fragment,
+  h,
+  inject,
+  provide,
+  useId
+} from "vue";
+import {
+  hasChild,
+  NotPlaced,
+  slotContent,
+  usePlaceContent,
+  usePlacedContent
+} from "./children.js";
+import { useControllerEntry } from "./controller-target.js";
+import { markSegments, slotText } from "./list-text.js";
+import { createParts, withElement } from "./create-parts.js";
+import {
+  defaultSlot,
+  optionalBoolean,
+  orModel,
+  provideProps,
+  useHandle,
+  usePart,
+  usePrimitive,
+  useScope
+} from "./use-primitive.js";
+import { renderless } from "./renderless.js";
+import { createCommandController } from "@ui-sdk/core/command";
+var PageKey = /* @__PURE__ */ Symbol("command-page");
+var DataKey = /* @__PURE__ */ Symbol("command-data");
+var useCommand = () => useHandle(commandPrimitive);
+var useItem = () => useScope(commandPrimitive)?.around.item;
+var parts = createParts(commandPrimitive, {
+  input: "input",
+  "item-icon": "span",
+  group: "div",
+  "group-label": "div",
+  separator: "div",
+  status: "div"
+});
+var Command = withElement(
+  "div",
+  defineComponent({
+    name: "Command",
+    inheritAttrs: false,
+    props: {
+      value: {
+        type: null,
+        default: void 0
+      },
+      modelValue: {
+        type: null,
+        default: void 0
+      },
+      defaultValue: {
+        type: null,
+        default: void 0
+      },
+      query: { type: String, default: void 0 },
+      defaultQuery: { type: String, default: void 0 },
+      pages: { type: Array, default: void 0 },
+      defaultPages: { type: Array, default: void 0 },
+      pendingAnnouncement: String,
+      // A function prop beside the emit, so a returned Promise marks the command pending.
+      onAction: Function,
+      items: Array,
+      emptyItems: Array,
+      filter: {
+        type: [String, Boolean, Function],
+        default: void 0
+      },
+      announcement: Function,
+      autoHighlight: optionalBoolean,
+      loop: optionalBoolean,
+      status: String,
+      controller: Object,
+      debug: optionalBoolean
+    },
+    emits: {
+      "update:value": (_value) => true,
+      "update:modelValue": (_value) => true,
+      valueChange: (_value, _details) => true,
+      "update:query": (_query) => true,
+      queryChange: (_query, _details) => true,
+      "update:pages": (_pages) => true,
+      pagesChange: (_pages, _details) => true,
+      loadMore: () => true
+    },
+    slots: Object,
+    setup(props, { slots, emit }) {
+      const command = usePrimitive(commandPrimitive, () => ({
+        ...props,
+        value: orModel(props.value, props.modelValue),
+        onValueChange: (value, details) => {
+          emit("valueChange", value, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:value", value);
+          emit("update:modelValue", value);
+        },
+        onQueryChange: (query, details) => {
+          emit("queryChange", query, details);
+          if (!details.canceled) {
+            emit("update:query", query);
+          }
+        },
+        onPagesChange: (pages, details) => {
+          emit("pagesChange", pages, details);
+          if (!details.canceled) {
+            emit("update:pages", pages);
+          }
+        },
+        onLoadMore: () => emit("loadMore")
+      }));
+      useControllerEntry(() => props.controller, command);
+      const placed = usePlacedContent();
+      return usePart(command, "root", void 0, void 0, {
+        tag: "div",
+        children: (state) => {
+          const children = slots.default?.({ state }) ?? [];
+          const own = !props.items || placed() || hasChild(children, CommandList);
+          return [
+            children,
+            props.items && !own && h(NotPlaced, () => h(CommandList))
+          ];
+        }
+      });
+    }
+  })
+);
+var CommandInput = parts.Input;
+var CommandList = withElement(
+  "div",
+  defineComponent({
+    name: "CommandList",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      usePlaceContent();
+      const command = useCommand();
+      return usePart(command, "list", void 0, void 0, {
+        tag: "div",
+        children: (state) => defaultSlot(
+          slots,
+          state,
+          () => command.state.items && h(CommandItems, { items: state.items })
+        )
+      });
+    }
+  })
+);
+var CommandItem = withElement(
+  "div",
+  defineComponent({
+    name: "CommandItem",
+    inheritAttrs: false,
+    props: {
+      value: String,
+      label: String,
+      keywords: Array,
+      disabled: optionalBoolean,
+      shortcut: String,
+      page: String,
+      index: Number,
+      // A function prop beside the emit, so a returned Promise marks the command pending.
+      onSelect: Function
+    },
+    slots: Object,
+    setup(props) {
+      const generated = useId();
+      const group = useScope(commandPrimitive)?.around.group?.().id;
+      const inPage = inject(PageKey, void 0);
+      const data = inject(DataKey, false);
+      provideProps(commandPrimitive, "item", () => ({
+        value: props.value ?? generated,
+        label: props.label ?? props.value,
+        shortcut: props.shortcut
+      }));
+      const item = () => {
+        const key = props.value ?? generated;
+        return {
+          id: key,
+          value: key,
+          label: props.label,
+          keywords: props.keywords,
+          disabled: props.disabled,
+          shortcut: props.shortcut,
+          page: props.page,
+          index: props.index,
+          onSelect: props.onSelect,
+          group,
+          inPage,
+          data
+        };
+      };
+      return usePart(commandPrimitive, "item", item);
+    }
+  })
+);
+var CommandItemText = withElement(
+  "span",
+  defineComponent({
+    name: "CommandItemText",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      const item = useItem();
+      if (!item) {
+        throw new Error("<CommandItemText> must be used inside <CommandItem>.");
+      }
+      let text = "";
+      let own;
+      let ownText;
+      const part = usePart(
+        commandPrimitive,
+        "item-text",
+        () => ({ id: item().value, text }),
+        void 0,
+        {
+          tag: "span",
+          children: (state) => own && ownText === void 0 ? own : markSegments(state.segments)
+        }
+      );
+      return () => {
+        own = slotContent(slots.default, { state: part.state });
+        ownText = slotText(own);
+        text = ownText ?? item().label ?? "";
+        return part();
+      };
+    }
+  })
+);
+var CommandShortcut = withElement(
+  "span",
+  defineComponent({
+    name: "CommandShortcut",
+    inheritAttrs: false,
+    props: { shortcut: String },
+    slots: Object,
+    setup(props, { slots }) {
+      const item = useItem();
+      const part = () => ({ shortcut: props.shortcut ?? item?.().shortcut });
+      return usePart(commandPrimitive, "shortcut", part, void 0, {
+        tag: "span",
+        children: (state) => slotContent(slots.default, { state }) ?? state.text
+      });
+    }
+  })
+);
+var CommandPage = /* @__PURE__ */ renderless(
+  defineComponent({
+    name: "CommandPage",
+    props: { value: String },
+    setup(props, { slots }) {
+      const command = useCommand();
+      provide(PageKey, props.value ?? null);
+      return () => command.present("page", { value: props.value }) ? slots.default?.() : null;
+    }
+  })
+);
+var CommandItemIcon = parts.ItemIcon;
+var CommandGroup = parts.Group;
+var CommandGroupLabel = parts.GroupLabel;
+var CommandSeparator = parts.Separator;
+var CommandEmpty = withElement(
+  "div",
+  defineComponent({
+    name: "CommandEmpty",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      return usePart(commandPrimitive, "empty", void 0, void 0, {
+        tag: "div",
+        children: (state) => state.empty ? slots.default?.({ state }) : null
+      });
+    }
+  })
+);
+var CommandStatus = parts.Status;
+var CommandItems = /* @__PURE__ */ renderless(
+  defineComponent({
+    name: "CommandItems",
+    props: {
+      items: { type: Array, required: true }
+    },
+    setup(props) {
+      provide(DataKey, true);
+      const render = (items) => items.map((entry, index) => {
+        if (typeof entry === "string") {
+          return h(CommandItem, { key: entry, value: entry }, () => entry);
+        }
+        if ("type" in entry && entry.type === "separator") {
+          return h(CommandSeparator, { key: `separator-${index}` });
+        }
+        if ("type" in entry && entry.type === "group") {
+          return h(
+            CommandGroup,
+            { key: `group-${entry.label ?? index}` },
+            () => [
+              entry.label && h(CommandGroupLabel, null, () => entry.label),
+              ...render(entry.items)
+            ]
+          );
+        }
+        return h(
+          CommandItem,
+          {
+            key: entry.value,
+            value: entry.value,
+            label: entry.label,
+            keywords: entry.keywords,
+            disabled: entry.disabled,
+            shortcut: entry.shortcut
+          },
+          () => entry.label
+        );
+      });
+      return () => h(Fragment, render(props.items));
+    }
+  })
+);
+export {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandGroupLabel,
+  CommandInput,
+  CommandItem,
+  CommandItemIcon,
+  CommandItemText,
+  CommandItems,
+  CommandList,
+  CommandPage,
+  CommandSeparator,
+  CommandShortcut,
+  CommandStatus,
+  createCommandController
+};