@echothink-ui/search 0.1.0

package/src/components/EntitySearchInput.tsx

@@ -0,0 +1,165 @@
+import * as React from "react";
+import { SearchInput } from "@echothink-ui/core";
+import type { EntitySearchInputProps } from "./types";
+
+export function EntitySearchInput({
+  placeholder = "Search",
+  onSearch,
+  suggestions = [],
+  value,
+  defaultValue = "",
+  onChange,
+  onSelect,
+  suggestionsLabel = "Entity suggestions",
+  resultsLabel = "Entity matches",
+  loadingLabel = "Searching entities",
+  open,
+  defaultOpen = false,
+  loading = false,
+  emptyText = "No matching entities",
+  onOpenChange,
+  className,
+  onBlur,
+  onKeyDown,
+  "data-eth-component": dataEthComponent = "EntitySearchInput",
+  ...props
+}: EntitySearchInputProps & { "data-eth-component"?: string }) {
+  const listboxId = React.useId().replace(/:/g, "");
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const [selectedId, setSelectedId] = React.useState<string | undefined>(() => {
+    const initialValue = value ?? defaultValue;
+    return suggestions.find((suggestion) => suggestion.id === initialValue)?.id;
+  });
+  const currentValue = value ?? internalValue;
+  const selectedSuggestion =
+    suggestions.find((suggestion) => suggestion.id === currentValue) ??
+    suggestions.find((suggestion) => suggestion.id === selectedId);
+  const displayValue =
+    selectedSuggestion?.id === currentValue ? selectedSuggestion.label : currentValue;
+  const isOpen = open ?? internalOpen;
+
+  const setOpen = (nextOpen: boolean) => {
+    if (open === undefined) {
+      setInternalOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+  };
+
+  const update = (nextValue: string) => {
+    if (value === undefined) {
+      setInternalValue(nextValue);
+    }
+    setSelectedId(undefined);
+    onChange?.(nextValue);
+    onSearch?.(nextValue);
+    setOpen(Boolean(nextValue || suggestions.length || loading));
+  };
+
+  const choose = (suggestion: (typeof suggestions)[number]) => {
+    if (value === undefined) {
+      setInternalValue(suggestion.label);
+    }
+    setSelectedId(suggestion.id);
+    onChange?.(suggestion.id);
+    onSearch?.(suggestion.label);
+    onSelect?.(suggestion);
+    setOpen(false);
+  };
+
+  const clear = () => {
+    if (value === undefined) {
+      setInternalValue("");
+    }
+    setSelectedId(undefined);
+    onChange?.("");
+    onSearch?.("");
+    setOpen(false);
+  };
+
+  const handleBlur = (event: React.FocusEvent<HTMLDivElement>) => {
+    onBlur?.(event);
+    if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+      setOpen(false);
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (event.key === "Escape") {
+      setOpen(false);
+      event.stopPropagation();
+    }
+    if (event.key === "ArrowDown" && suggestions.length) {
+      setOpen(true);
+    }
+  };
+
+  return (
+    <div
+      {...props}
+      className={`eth-search-entity-input ${className ?? ""}`}
+      data-eth-component={dataEthComponent}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+    >
+      <SearchInput
+        aria-controls={isOpen ? listboxId : undefined}
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+        autoComplete="off"
+        className="eth-search-entity-input__field"
+        value={displayValue}
+        placeholder={placeholder}
+        onFocus={() => setOpen(Boolean(suggestions.length || loading))}
+        onChange={(event) => update(event.currentTarget.value)}
+        onClear={clear}
+      />
+      {isOpen ? (
+        <div
+          className="eth-search-entity-input__popover"
+          id={listboxId}
+          role="listbox"
+          aria-label={suggestionsLabel}
+        >
+          <div className="eth-search-entity-input__summary" aria-live="polite">
+            <span>{loading ? loadingLabel : resultsLabel}</span>
+            <strong>
+              {loading
+                ? "Loading"
+                : `${suggestions.length} result${suggestions.length === 1 ? "" : "s"}`}
+            </strong>
+          </div>
+          {suggestions.length ? (
+            <ul className="eth-search-entity-input__list">
+              {suggestions.map((suggestion) => {
+                const isSelected = suggestion.id === selectedSuggestion?.id;
+                return (
+                  <li key={suggestion.id}>
+                    <button
+                      type="button"
+                      role="option"
+                      aria-selected={isSelected}
+                      onClick={() => choose(suggestion)}
+                    >
+                      <span className="eth-search-entity-input__copy">
+                        <strong>{suggestion.label}</strong>
+                        {suggestion.kind ? <small>{suggestion.kind}</small> : null}
+                      </span>
+                      <span className="eth-search-entity-input__meta">
+                        {isSelected ? "Selected" : suggestion.meta}
+                      </span>
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          ) : (
+            <p className="eth-search-entity-input__empty">{loading ? "Loading..." : emptyText}</p>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/GlobalCommandPalette.tsx

@@ -0,0 +1,182 @@
+import * as React from "react";
+import { SearchInput } from "@echothink-ui/core";
+import { CloseIcon } from "@echothink-ui/icons";
+import type { CommandItem, GlobalCommandPaletteProps } from "./types";
+import { filterCommands, groupBy } from "./searchUtils";
+
+export function GlobalCommandPalette({
+  open,
+  onClose,
+  commands,
+  heading = "Global command palette",
+  contextLabel,
+  query,
+  searchPlaceholder = "Search commands",
+  onQueryChange,
+  className,
+  "data-eth-component": dataEthComponent = "GlobalCommandPalette",
+  ...props
+}: GlobalCommandPaletteProps & { "data-eth-component"?: string }) {
+  const [internalQuery, setInternalQuery] = React.useState("");
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const generatedId = React.useId().replace(/:/g, "");
+  const searchRef = React.useRef<HTMLDivElement>(null);
+  const currentQuery = query ?? internalQuery;
+  const filtered = React.useMemo(
+    () => filterCommands(commands, currentQuery),
+    [commands, currentQuery]
+  );
+  const grouped = groupBy(filtered, (command) => command.group ?? "Commands");
+  const titleId = `eth-search-command-palette-title-${generatedId}`;
+  const listboxId = `eth-search-command-palette-listbox-${generatedId}`;
+  const activeOptionId = filtered.length ? `${listboxId}-option-${activeIndex}` : undefined;
+  const resultCountLabel = `${filtered.length} ${filtered.length === 1 ? "command" : "commands"} ${
+    currentQuery.trim() ? "matched" : "available"
+  }`;
+
+  React.useEffect(() => {
+    if (!open) return;
+    setActiveIndex(0);
+    const input = searchRef.current?.querySelector("input");
+    input?.focus();
+  }, [open]);
+
+  React.useEffect(() => {
+    setActiveIndex((index) => Math.min(index, Math.max(0, filtered.length - 1)));
+  }, [filtered.length]);
+
+  if (!open) return null;
+
+  const setQuery = (nextQuery: string) => {
+    setInternalQuery(nextQuery);
+    onQueryChange?.(nextQuery);
+  };
+
+  const selectCommand = (command: CommandItem) => {
+    command.onSelect();
+    onClose();
+  };
+
+  const onKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      onClose();
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (!filtered.length) return;
+      setActiveIndex((index) => Math.min(filtered.length - 1, index + 1));
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!filtered.length) return;
+      setActiveIndex((index) => Math.max(0, index - 1));
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      const command = filtered[activeIndex];
+      if (command) selectCommand(command);
+    }
+  };
+
+  let flatIndex = 0;
+  return (
+    <div
+      {...props}
+      className={`eth-search-command-palette ${className ?? ""}`}
+      data-eth-component={dataEthComponent}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+      onKeyDown={onKeyDown}
+    >
+      <button
+        type="button"
+        className="eth-search-command-palette__scrim"
+        aria-label="Close command palette"
+        onClick={onClose}
+      />
+      <section className="eth-search-command-palette__panel" aria-labelledby={titleId}>
+        <header className="eth-search-command-palette__header">
+          <div className="eth-search-command-palette__heading">
+            <h2 id={titleId}>{heading}</h2>
+            <div className="eth-search-command-palette__meta">
+              {contextLabel ? <span>{contextLabel}</span> : null}
+              <span aria-live="polite">{resultCountLabel}</span>
+            </div>
+          </div>
+          <button
+            type="button"
+            className="eth-search-command-palette__close"
+            aria-label="Close command palette"
+            onClick={onClose}
+          >
+            <CloseIcon size={16} />
+          </button>
+        </header>
+        <div ref={searchRef} className="eth-search-command-palette__search">
+          <SearchInput
+            value={currentQuery}
+            placeholder={searchPlaceholder}
+            aria-controls={listboxId}
+            aria-activedescendant={activeOptionId}
+            onChange={(event) => setQuery(event.currentTarget.value)}
+            onClear={() => setQuery("")}
+          />
+        </div>
+        <div
+          id={listboxId}
+          className="eth-search-command-palette__results"
+          role="listbox"
+          aria-label="Commands"
+        >
+          {grouped.map(([group, items], groupIndex) => {
+            const groupHeadingId = `${listboxId}-group-${groupIndex}`;
+            return (
+              <section
+                key={group}
+                className="eth-search-command-palette__group"
+                role="group"
+                aria-labelledby={groupHeadingId}
+              >
+                <h3 id={groupHeadingId}>{group}</h3>
+                {items.map((command) => {
+                  const index = flatIndex;
+                  flatIndex += 1;
+                  const active = index === activeIndex;
+                  return (
+                    <button
+                      key={command.id}
+                      id={`${listboxId}-option-${index}`}
+                      type="button"
+                      role="option"
+                      aria-selected={active}
+                      className={`eth-search-command-palette__item ${active ? "eth-search-command-palette__item--active" : ""}`}
+                      onMouseEnter={() => setActiveIndex(index)}
+                      onClick={() => selectCommand(command)}
+                    >
+                      <span className="eth-search-command-palette__item-copy">
+                        <strong>{command.label}</strong>
+                        {command.hint ? <small>{command.hint}</small> : null}
+                      </span>
+                      {command.shortcut ? <kbd>{command.shortcut}</kbd> : null}
+                    </button>
+                  );
+                })}
+              </section>
+            );
+          })}
+          {!filtered.length ? (
+            <div className="eth-search-command-palette__empty" role="status">
+              <strong>No commands found</strong>
+              <span>Try a different command, resource, or setting.</span>
+            </div>
+          ) : null}
+        </div>
+      </section>
+    </div>
+  );
+}

package/src/components/ProjectCommandPalette.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { GlobalCommandPalette } from "./GlobalCommandPalette";
+import type { ProjectCommandPaletteProps } from "./types";
+
+export function ProjectCommandPalette({
+  projectRef,
+  className,
+  contextLabel = `Project ${projectRef}`,
+  heading = "Project command palette",
+  searchPlaceholder = "Search project commands",
+  ...props
+}: ProjectCommandPaletteProps) {
+  return (
+    <GlobalCommandPalette
+      {...props}
+      contextLabel={contextLabel}
+      heading={heading}
+      className={`eth-search-project-command-palette ${className ?? ""}`}
+      data-project-ref={projectRef}
+      data-eth-component="ProjectCommandPalette"
+      searchPlaceholder={searchPlaceholder}
+    />
+  );
+}

package/src/components/RecentItems.tsx

@@ -0,0 +1,136 @@
+import * as React from "react";
+import {
+  AgentRunningIcon,
+  ChevronRightIcon,
+  DocumentIcon,
+  FolderIcon,
+  MessageIcon,
+  PlayIcon,
+  SearchIcon,
+  StatusIcon,
+  TableIcon
+} from "@echothink-ui/icons";
+import type { RecentItemsProps } from "./types";
+
+function formatRecentKind(kind: string) {
+  return kind
+    .split(/[-_\s]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
+function RecentItemIcon({ kind }: { kind: string }) {
+  const normalizedKind = kind.toLowerCase();
+
+  if (normalizedKind.includes("agent")) return <AgentRunningIcon size={16} />;
+  if (normalizedKind.includes("document") || normalizedKind.includes("file")) {
+    return <DocumentIcon size={16} />;
+  }
+  if (normalizedKind.includes("project") || normalizedKind.includes("folder")) {
+    return <FolderIcon size={16} />;
+  }
+  if (normalizedKind.includes("mail") || normalizedKind.includes("message")) {
+    return <MessageIcon size={16} />;
+  }
+  if (normalizedKind.includes("dataset") || normalizedKind.includes("table")) {
+    return <TableIcon size={16} />;
+  }
+  if (normalizedKind.includes("action") || normalizedKind.includes("command")) {
+    return <PlayIcon size={16} />;
+  }
+  if (normalizedKind.includes("task") || normalizedKind.includes("wave")) {
+    return <StatusIcon size={16} />;
+  }
+
+  return <SearchIcon size={16} />;
+}
+
+export function RecentItems({
+  items,
+  emptyText = "No recent items",
+  onSelect,
+  className,
+  "aria-label": ariaLabel = "Recent items",
+  ...props
+}: RecentItemsProps) {
+  const classNames = ["eth-search-recent-items", className].filter(Boolean).join(" ");
+
+  if (!items.length) {
+    return (
+      <section
+        {...props}
+        aria-label={ariaLabel}
+        className={classNames}
+        data-eth-component="RecentItems"
+      >
+        <div className="eth-search-recent-items__empty" role="status">
+          {emptyText}
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section
+      {...props}
+      aria-label={ariaLabel}
+      className={classNames}
+      data-eth-component="RecentItems"
+    >
+      <ul>
+        {items.map((item) => {
+          const kindLabel = formatRecentKind(item.kind);
+          const rowLabel = `Open ${item.label}, ${kindLabel}, last visited ${item.visitedAt}`;
+          const content = (
+            <>
+              <span className="eth-search-recent-items__icon" aria-hidden="true">
+                <RecentItemIcon kind={item.kind} />
+              </span>
+              <span className="eth-search-recent-items__copy">
+                <span className="eth-search-recent-items__label">{item.label}</span>
+                {item.description ? (
+                  <span className="eth-search-recent-items__description">{item.description}</span>
+                ) : null}
+              </span>
+              <span className="eth-search-recent-items__kind">{kindLabel}</span>
+              <span className="eth-search-recent-items__visited">
+                <span className="eth-search-recent-items__visited-label">Last visited</span>
+                <time dateTime={item.visitedAt}>{item.visitedAt}</time>
+              </span>
+              <ChevronRightIcon
+                className="eth-search-recent-items__arrow"
+                size={16}
+                aria-hidden="true"
+              />
+            </>
+          );
+
+          return (
+            <li key={item.id}>
+              {item.href ? (
+                <a
+                  className="eth-search-recent-items__row"
+                  href={item.href}
+                  aria-label={rowLabel}
+                  onClick={() => onSelect?.(item.id)}
+                >
+                  {content}
+                </a>
+              ) : (
+                <button
+                  className="eth-search-recent-items__row"
+                  type="button"
+                  aria-label={rowLabel}
+                  onClick={() => onSelect?.(item.id)}
+                >
+                  {content}
+                </button>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}

package/src/components/ResourceSearch.tsx

@@ -0,0 +1,27 @@
+import { EntitySearchInput } from "./EntitySearchInput";
+import type { ResourceSearchProps } from "./types";
+
+export function ResourceSearch({
+  resourceScope,
+  placeholder = "Search resources",
+  emptyText = "No matching resources",
+  suggestionsLabel = "Resource suggestions",
+  resultsLabel = "Resource matches",
+  loadingLabel = "Searching resources",
+  className,
+  ...props
+}: ResourceSearchProps) {
+  return (
+    <EntitySearchInput
+      {...props}
+      placeholder={placeholder}
+      emptyText={emptyText}
+      suggestionsLabel={suggestionsLabel}
+      resultsLabel={resultsLabel}
+      loadingLabel={loadingLabel}
+      className={["eth-search-resource", className].filter(Boolean).join(" ")}
+      data-resource-scope={resourceScope}
+      data-eth-component="ResourceSearch"
+    />
+  );
+}

package/src/components/SavedSearches.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { Button, IconButton } from "@echothink-ui/core";
+import type { SavedSearchesProps } from "./types";
+
+export function SavedSearches({ searches, onRun, onDelete, className, ...props }: SavedSearchesProps) {
+  return (
+    <section
+      {...props}
+      className={`eth-search-saved-searches ${className ?? ""}`}
+      data-eth-component="SavedSearches"
+    >
+      <ul>
+        {searches.map((search) => (
+          <li key={search.id}>
+            <div>
+              <strong>{search.label}</strong>
+              <code>{search.query}</code>
+              <small>{search.updatedAt}</small>
+            </div>
+            {onRun ? <Button intent="secondary" density="compact" onClick={() => onRun(search.id)}>Run</Button> : null}
+            {onDelete ? <IconButton label="Delete saved search" intent="ghost" icon={<span aria-hidden>X</span>} onClick={() => onDelete(search.id)} /> : null}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}

package/src/components/SearchFacetPanel.tsx

@@ -0,0 +1,100 @@
+import type { SearchFacetPanelProps } from "./types";
+
+export function SearchFacetPanel({
+  facets,
+  selected,
+  onChange,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}: SearchFacetPanelProps) {
+  const selectedTotal = facets.reduce(
+    (total, facet) => total + (selected[facet.id]?.length ?? 0),
+    0
+  );
+
+  const toggle = (facetId: string, value: string, checked: boolean) => {
+    const current = selected[facetId] ?? [];
+
+    onChange({
+      ...selected,
+      [facetId]: checked ? [...current, value] : current.filter((item) => item !== value)
+    });
+  };
+
+  const clearAll = () => {
+    onChange(Object.fromEntries(facets.map((facet) => [facet.id, []])));
+  };
+
+  return (
+    <aside
+      className={["eth-search-facet-panel", className].filter(Boolean).join(" ")}
+      data-eth-component="SearchFacetPanel"
+      aria-label={ariaLabel ?? "Search filters"}
+      {...props}
+    >
+      <div className="eth-search-facet-panel__header">
+        <div>
+          <h2 className="eth-search-facet-panel__title">Filters</h2>
+          <p className="eth-search-facet-panel__summary">
+            {selectedTotal > 0 ? `${selectedTotal} selected` : "Refine results"}
+          </p>
+        </div>
+        {selectedTotal > 0 ? (
+          <button type="button" className="eth-search-facet-panel__clear" onClick={clearAll}>
+            Clear
+          </button>
+        ) : null}
+      </div>
+
+      {facets.length > 0 ? (
+        <div className="eth-search-facet-panel__groups">
+          {facets.map((facet) => (
+            <fieldset key={facet.id} className="eth-search-facet-panel__group">
+              <legend className="eth-search-facet-panel__legend">
+                <span>{facet.label}</span>
+              </legend>
+              <div className="eth-search-facet-panel__options">
+                {facet.options.map((option) => {
+                  const checked = (selected[facet.id] ?? []).includes(option.value);
+
+                  return (
+                    <label
+                      key={option.value}
+                      className={[
+                        "eth-search-facet-panel__option",
+                        checked ? "eth-search-facet-panel__option--checked" : "",
+                        option.disabled ? "eth-search-facet-panel__option--disabled" : ""
+                      ]
+                        .filter(Boolean)
+                        .join(" ")}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={checked}
+                        disabled={option.disabled}
+                        value={option.value}
+                        onChange={(event) =>
+                          toggle(facet.id, option.value, event.currentTarget.checked)
+                        }
+                      />
+                      <span className="eth-search-facet-panel__control" aria-hidden="true" />
+                      <span className="eth-search-facet-panel__option-main">
+                        <span className="eth-search-facet-panel__option-label">{option.label}</span>
+                        {typeof option.count === "number" ? (
+                          <span className="eth-search-facet-panel__option-count">{option.count}</span>
+                        ) : null}
+                      </span>
+                    </label>
+                  );
+                })}
+              </div>
+            </fieldset>
+          ))}
+        </div>
+      ) : (
+        <p className="eth-search-facet-panel__empty">No filters available</p>
+      )}
+    </aside>
+  );
+}