Command

import * as React from "react";
/**
 * Command palette fixture. `groups` is the shared catalogue every adapter
 * renders; `query` and `activeIndex` pin the filtered state the
 * five-framework render proof compares (typing "de" drops the Navigate group
 * entirely and leaves two Actions rows, of which the second is active).
 *
 * Every item carries an explicit `value`: React's search-text extractor is
 * `value ?? (typeof label === "string" ? label : "")` while the other four
 * use ui-core's `defaultCommandSearchText` (`value ?? label`), so pinning
 * `value` makes the filter identical by construction rather than by
 * coincidence.
 */
const commandFixture = {
  id: "command",
  trigger: "Open command palette",
  placeholder: "Search commands…",
  query: "de",
  activeIndex: 1,
  groups: [
    {
      heading: "Navigate",
      items: [
        { label: "Go to dashboard", value: "dashboard", shortcut: "G D" },
        { label: "Go to settings", value: "settings", shortcut: "G S" },
      ],
    },
    {
      heading: "Actions",
      items: [
        { label: "Deploy ledger-api", value: "deploy", shortcut: "⌘ ⏎" },
        { label: "Redeploy last build", value: "redeploy" },
        { label: "Roll back release", value: "rollback", shortcut: "⌘ R" },
      ],
    },
  ],
} satisfies {
  id: string;
  trigger: string;
  placeholder: string;
  query: string;
  activeIndex: number;
  groups: readonly {
    heading: string;
    items: readonly { label: string; value: string; shortcut?: string }[];
  }[];
};
 
import { Button, Command, type CommandGroup } from "@grassroot/ui-react";
 
/**
 * Command is a full-viewport overlay, so — like DialogExample — the canonical
 * example is the closed palette behind its trigger: mounting it already open
 * would blanket the catalogue page. The open/filtered state is pinned by the
 * fixture (`query`, `activeIndex`) and proved in each adapter's own test.
 */
export default function CommandDemo() {
  const [open, setOpen] = React.useState(false);
  const groups: CommandGroup[] = commandFixture.groups.map((group) => ({
    heading: group.heading,
    items: group.items.map((item) => ({
      label: item.label,
      value: item.value,
      shortcut: item.shortcut,
    })),
  }));
  return (
    <div>
      <Button onClick={() => setOpen(true)}>{commandFixture.trigger}</Button>
      <Command
        groups={groups}
        open={open}
        onOpenChange={setOpen}
        placeholder={commandFixture.placeholder}
      />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
/**
 * Command palette fixture. `groups` is the shared catalogue every adapter
 * renders; `query` and `activeIndex` pin the filtered state the
 * five-framework render proof compares (typing "de" drops the Navigate group
 * entirely and leaves two Actions rows, of which the second is active).
 *
 * Every item carries an explicit `value`: React's search-text extractor is
 * `value ?? (typeof label === "string" ? label : "")` while the other four
 * use ui-core's `defaultCommandSearchText` (`value ?? label`), so pinning
 * `value` makes the filter identical by construction rather than by
 * coincidence.
 */
const commandFixture = {
  id: "command",
  trigger: "Open command palette",
  placeholder: "Search commands…",
  query: "de",
  activeIndex: 1,
  groups: [
    {
      heading: "Navigate",
      items: [
        { label: "Go to dashboard", value: "dashboard", shortcut: "G D" },
        { label: "Go to settings", value: "settings", shortcut: "G S" },
      ],
    },
    {
      heading: "Actions",
      items: [
        { label: "Deploy ledger-api", value: "deploy", shortcut: "⌘ ⏎" },
        { label: "Redeploy last build", value: "redeploy" },
        { label: "Roll back release", value: "rollback", shortcut: "⌘ R" },
      ],
    },
  ],
} satisfies {
  id: string;
  trigger: string;
  placeholder: string;
  query: string;
  activeIndex: number;
  groups: readonly {
    heading: string;
    items: readonly { label: string; value: string; shortcut?: string }[];
  }[];
};
 
import { Button, Command } from "@grassroot/ui-vue";
 
const open = ref(false);
</script>
 
<template>
  <div>
    <Button @click="open = true">{{ commandFixture.trigger }}</Button>
    <Command
      v-model:open="open"
      :groups="commandFixture.groups"
      :placeholder="commandFixture.placeholder"
    />
  </div>
</template>

import { Component, signal } from "@angular/core";
/**
 * Command palette fixture. `groups` is the shared catalogue every adapter
 * renders; `query` and `activeIndex` pin the filtered state the
 * five-framework render proof compares (typing "de" drops the Navigate group
 * entirely and leaves two Actions rows, of which the second is active).
 *
 * Every item carries an explicit `value`: React's search-text extractor is
 * `value ?? (typeof label === "string" ? label : "")` while the other four
 * use ui-core's `defaultCommandSearchText` (`value ?? label`), so pinning
 * `value` makes the filter identical by construction rather than by
 * coincidence.
 */
const commandFixture = {
  id: "command",
  trigger: "Open command palette",
  placeholder: "Search commands…",
  query: "de",
  activeIndex: 1,
  groups: [
    {
      heading: "Navigate",
      items: [
        { label: "Go to dashboard", value: "dashboard", shortcut: "G D" },
        { label: "Go to settings", value: "settings", shortcut: "G S" },
      ],
    },
    {
      heading: "Actions",
      items: [
        { label: "Deploy ledger-api", value: "deploy", shortcut: "⌘ ⏎" },
        { label: "Redeploy last build", value: "redeploy" },
        { label: "Roll back release", value: "rollback", shortcut: "⌘ R" },
      ],
    },
  ],
} satisfies {
  id: string;
  trigger: string;
  placeholder: string;
  query: string;
  activeIndex: number;
  groups: readonly {
    heading: string;
    items: readonly { label: string; value: string; shortcut?: string }[];
  }[];
};
 
import { GrassrootButton, GrassrootCommand } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-command-demo",
  standalone: true,
  imports: [GrassrootButton, GrassrootCommand],
  template: `
    <div>
      <grassroot-button (click)="open.set(true)">{{ fixture.trigger }}</grassroot-button>
      <grassroot-command
        [groups]="fixture.groups"
        [(open)]="open"
        [placeholder]="fixture.placeholder"
      />
    </div>
  `,
})
export class CommandDemoComponent {
  protected readonly fixture = commandFixture;
  protected readonly open = signal(false);
}
 
export default CommandDemoComponent;

<script lang="ts">
  import { Button, Command } from "@grassroot/ui-svelte";
  /**
   * Command palette fixture. `groups` is the shared catalogue every adapter
   * renders; `query` and `activeIndex` pin the filtered state the
   * five-framework render proof compares (typing "de" drops the Navigate group
   * entirely and leaves two Actions rows, of which the second is active).
   *
   * Every item carries an explicit `value`: React's search-text extractor is
   * `value ?? (typeof label === "string" ? label : "")` while the other four
   * use ui-core's `defaultCommandSearchText` (`value ?? label`), so pinning
   * `value` makes the filter identical by construction rather than by
   * coincidence.
   */
  const commandFixture = {
    id: "command",
    trigger: "Open command palette",
    placeholder: "Search commands…",
    query: "de",
    activeIndex: 1,
    groups: [
      {
        heading: "Navigate",
        items: [
          { label: "Go to dashboard", value: "dashboard", shortcut: "G D" },
          { label: "Go to settings", value: "settings", shortcut: "G S" },
        ],
      },
      {
        heading: "Actions",
        items: [
          { label: "Deploy ledger-api", value: "deploy", shortcut: "⌘ ⏎" },
          { label: "Redeploy last build", value: "redeploy" },
          { label: "Roll back release", value: "rollback", shortcut: "⌘ R" },
        ],
      },
    ],
  } satisfies {
    id: string;
    trigger: string;
    placeholder: string;
    query: string;
    activeIndex: number;
    groups: readonly {
      heading: string;
      items: readonly { label: string; value: string; shortcut?: string }[];
    }[];
  };
 
  let open = $state(false);
</script>
 
<div>
  <Button onClick={() => (open = true)}>{commandFixture.trigger}</Button>
  <Command
    groups={commandFixture.groups}
    {open}
    onOpenChange={(next) => (open = next)}
    placeholder={commandFixture.placeholder}
  />
</div>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { Button, Command } from "@grassroot/ui-solid";
/**
 * Command palette fixture. `groups` is the shared catalogue every adapter
 * renders; `query` and `activeIndex` pin the filtered state the
 * five-framework render proof compares (typing "de" drops the Navigate group
 * entirely and leaves two Actions rows, of which the second is active).
 *
 * Every item carries an explicit `value`: React's search-text extractor is
 * `value ?? (typeof label === "string" ? label : "")` while the other four
 * use ui-core's `defaultCommandSearchText` (`value ?? label`), so pinning
 * `value` makes the filter identical by construction rather than by
 * coincidence.
 */
const commandFixture = {
  id: "command",
  trigger: "Open command palette",
  placeholder: "Search commands…",
  query: "de",
  activeIndex: 1,
  groups: [
    {
      heading: "Navigate",
      items: [
        { label: "Go to dashboard", value: "dashboard", shortcut: "G D" },
        { label: "Go to settings", value: "settings", shortcut: "G S" },
      ],
    },
    {
      heading: "Actions",
      items: [
        { label: "Deploy ledger-api", value: "deploy", shortcut: "⌘ ⏎" },
        { label: "Redeploy last build", value: "redeploy" },
        { label: "Roll back release", value: "rollback", shortcut: "⌘ R" },
      ],
    },
  ],
} satisfies {
  id: string;
  trigger: string;
  placeholder: string;
  query: string;
  activeIndex: number;
  groups: readonly {
    heading: string;
    items: readonly { label: string; value: string; shortcut?: string }[];
  }[];
};
 
export default function CommandDemo() {
  const [open, setOpen] = createSignal(false);
  return (
    <div>
      <Button onClick={() => setOpen(true)}>{commandFixture.trigger}</Button>
      <Command
        groups={commandFixture.groups.map((group) => ({
          heading: group.heading,
          items: [...group.items],
        }))}
        open={open()}
        onOpenChange={setOpen}
        placeholder={commandFixture.placeholder}
      />
    </div>
  );
}