@hauktui/registry 0.0.1

package/components/command/command.tsx

@@ -0,0 +1,304 @@
+import React, { useState, useCallback, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens, useFocusable } from "@hauktui/primitives-ink";
+import { stableId, clamp } from "@hauktui/core";
+
+export interface CommandItem {
+  /** Unique identifier */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Optional description */
+  description?: string;
+  /** Optional keyboard shortcut */
+  shortcut?: string;
+  /** Optional icon/prefix */
+  icon?: string;
+  /** Optional group/category */
+  group?: string;
+  /** Whether this item is disabled */
+  disabled?: boolean;
+  /** Keywords for search */
+  keywords?: string[];
+}
+
+export interface CommandProps {
+  /** Available command items */
+  items: CommandItem[];
+  /** Placeholder text for search input */
+  placeholder?: string;
+  /** Callback when an item is selected */
+  onSelect: (item: CommandItem) => void;
+  /** Callback when command palette should close */
+  onClose?: () => void;
+  /** Whether the command palette is open */
+  open?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Maximum visible items */
+  maxItems?: number;
+  /** Title for the command palette */
+  title?: string;
+  /** Empty state message */
+  emptyMessage?: string;
+}
+
+export function Command({
+  items,
+  placeholder = "Type to search...",
+  onSelect,
+  onClose,
+  open = true,
+  tokens: propTokens,
+  focusId,
+  maxItems = 8,
+  title,
+  emptyMessage = "No results found.",
+}: CommandProps): React.ReactElement | null {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("command");
+  const { isFocused } = useFocusable(id);
+
+  const [search, setSearch] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  // Filter items based on search
+  const filteredItems = useMemo(() => {
+    if (!search.trim()) return items;
+
+    const lowerSearch = search.toLowerCase();
+    return items.filter((item) => {
+      const labelMatch = item.label.toLowerCase().includes(lowerSearch);
+      const descMatch = item.description?.toLowerCase().includes(lowerSearch);
+      const keywordMatch = item.keywords?.some((k) =>
+        k.toLowerCase().includes(lowerSearch)
+      );
+      return labelMatch || descMatch || keywordMatch;
+    });
+  }, [items, search]);
+
+  // Group items
+  const groupedItems = useMemo(() => {
+    const groups: Record<string, CommandItem[]> = {};
+    const ungrouped: CommandItem[] = [];
+
+    for (const item of filteredItems) {
+      if (item.group) {
+        if (!groups[item.group]) {
+          groups[item.group] = [];
+        }
+        groups[item.group]!.push(item);
+      } else {
+        ungrouped.push(item);
+      }
+    }
+
+    return { groups, ungrouped };
+  }, [filteredItems]);
+
+  const selectItem = useCallback(
+    (item: CommandItem) => {
+      if (item.disabled) return;
+      onSelect(item);
+    },
+    [onSelect]
+  );
+
+  useInput(
+    (input, key) => {
+      if (!isFocused) return;
+
+      if (key.escape) {
+        onClose?.();
+        return;
+      }
+
+      if (key.upArrow) {
+        setSelectedIndex((prev) =>
+          clamp(prev - 1, 0, filteredItems.length - 1)
+        );
+      } else if (key.downArrow) {
+        setSelectedIndex((prev) =>
+          clamp(prev + 1, 0, filteredItems.length - 1)
+        );
+      } else if (key.return) {
+        const selectedItem = filteredItems[selectedIndex];
+        if (selectedItem) {
+          selectItem(selectedItem);
+        }
+      } else if (key.backspace || key.delete) {
+        setSearch((prev) => prev.slice(0, -1));
+        setSelectedIndex(0);
+      } else if (input && !key.ctrl && !key.meta) {
+        setSearch((prev) => prev + input);
+        setSelectedIndex(0);
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  if (!open) return null;
+
+  // Flatten for display
+  const visibleItems = filteredItems.slice(0, maxItems);
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+      width: 50,
+    },
+    // Title
+    title
+      ? React.createElement(
+          Box,
+          { paddingX: 1 },
+          React.createElement(
+            Text,
+            { color: tokens.colors.fg, bold: true },
+            title
+          )
+        )
+      : null,
+    // Search input
+    React.createElement(
+      Box,
+      {
+        paddingX: 1,
+        borderStyle: "single",
+        borderColor: tokens.colors.border,
+        borderTop: false,
+        borderLeft: false,
+        borderRight: false,
+      },
+      React.createElement(Text, { color: tokens.colors.muted }, "> "),
+      React.createElement(
+        Text,
+        { color: search ? tokens.colors.fg : tokens.colors.muted },
+        search || placeholder
+      ),
+      React.createElement(Text, { inverse: true }, " ")
+    ),
+    // Results
+    filteredItems.length === 0
+      ? React.createElement(
+          Box,
+          { paddingX: 1, paddingY: 1 },
+          React.createElement(
+            Text,
+            { color: tokens.colors.muted },
+            emptyMessage
+          )
+        )
+      : React.createElement(
+          Box,
+          { flexDirection: "column", paddingX: 1 },
+          // Render grouped items
+          ...(
+            Object.entries(groupedItems.groups) as [string, CommandItem[]][]
+          ).flatMap(([group, groupItems]) => [
+            React.createElement(
+              Box,
+              { key: `group-${group}`, marginTop: 1 },
+              React.createElement(
+                Text,
+                { color: tokens.colors.muted, dimColor: true },
+                group
+              )
+            ),
+            ...groupItems
+              .filter((item) => visibleItems.includes(item))
+              .map((item) => renderItem(item, filteredItems.indexOf(item))),
+          ]),
+          // Render ungrouped items
+          ...groupedItems.ungrouped
+            .filter((item) => visibleItems.includes(item))
+            .map((item) => renderItem(item, filteredItems.indexOf(item)))
+        ),
+    // Hint
+    React.createElement(
+      Box,
+      {
+        paddingX: 1,
+        borderStyle: "single",
+        borderColor: tokens.colors.border,
+        borderBottom: false,
+        borderLeft: false,
+        borderRight: false,
+      },
+      React.createElement(
+        Text,
+        { color: tokens.colors.muted, dimColor: true },
+        "↑↓ navigate • Enter select • Esc close"
+      )
+    )
+  );
+
+  function renderItem(item: CommandItem, index: number): React.ReactElement {
+    const isSelected = index === selectedIndex;
+    const isDisabled = item.disabled;
+
+    return React.createElement(
+      Box,
+      {
+        key: item.id,
+        paddingX: 1,
+        gap: 2,
+      },
+      // Selection indicator
+      React.createElement(
+        Text,
+        { color: isSelected ? tokens.colors.accent : tokens.colors.fg },
+        isSelected ? "›" : " "
+      ),
+      // Icon
+      item.icon
+        ? React.createElement(Text, { color: tokens.colors.muted }, item.icon)
+        : null,
+      // Label and description
+      React.createElement(
+        Box,
+        { flexGrow: 1, gap: 1 },
+        React.createElement(
+          Text,
+          {
+            color: isDisabled
+              ? tokens.colors.disabled
+              : isSelected
+                ? tokens.colors.accent
+                : tokens.colors.fg,
+            bold: isSelected,
+            inverse: isSelected && isFocused,
+          },
+          item.label
+        ),
+        item.description
+          ? React.createElement(
+              Text,
+              { color: tokens.colors.muted, dimColor: true },
+              item.description
+            )
+          : null
+      ),
+      // Shortcut
+      item.shortcut
+        ? React.createElement(
+            Text,
+            {
+              backgroundColor: tokens.colors.border,
+              color: tokens.colors.fg,
+            },
+            " ",
+            item.shortcut,
+            " "
+          )
+        : null
+    );
+  }
+}

package/components/command/index.ts

@@ -0,0 +1,2 @@
+export { Command } from "./command.js";
+export type { CommandProps, CommandItem } from "./command.js";

package/components/confirm-dialog/confirm-dialog.tsx

@@ -0,0 +1,140 @@
+import React, { useState, useCallback } from "react";
+import { Box, Text, useInput } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export interface ConfirmDialogProps {
+  /** Dialog title */
+  title?: string;
+  /** Dialog message */
+  message: string;
+  /** Callback when confirmed */
+  onConfirm: () => void;
+  /** Callback when cancelled */
+  onCancel: () => void;
+  /** Confirm button label */
+  confirmLabel?: string;
+  /** Cancel button label */
+  cancelLabel?: string;
+  /** Whether confirm is destructive (shows in danger color) */
+  destructive?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Whether to show the dialog */
+  isOpen?: boolean;
+}
+
+export function ConfirmDialog({
+  title,
+  message,
+  onConfirm,
+  onCancel,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  destructive = false,
+  tokens: propTokens,
+  isOpen = true,
+}: ConfirmDialogProps): React.ReactElement | null {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useInput(
+    (input, key) => {
+      if (!isOpen) return;
+
+      if (key.leftArrow || key.rightArrow || key.tab) {
+        setSelectedIndex((prev) => (prev === 0 ? 1 : 0));
+      } else if (key.return) {
+        if (selectedIndex === 0) {
+          onConfirm();
+        } else {
+          onCancel();
+        }
+      } else if (key.escape) {
+        onCancel();
+      } else if (input === "y" || input === "Y") {
+        onConfirm();
+      } else if (input === "n" || input === "N") {
+        onCancel();
+      }
+    },
+    { isActive: isOpen }
+  );
+
+  if (!isOpen) return null;
+
+  const confirmColor = destructive ? tokens.colors.danger : tokens.colors.accent;
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: tokens.colors.border,
+      paddingX: 2,
+      paddingY: 1,
+    },
+    title
+      ? React.createElement(
+          Box,
+          { marginBottom: 1 },
+          React.createElement(
+            Text,
+            { bold: true, color: tokens.colors.fg },
+            title
+          )
+        )
+      : null,
+    React.createElement(
+      Box,
+      { marginBottom: 1 },
+      React.createElement(Text, { color: tokens.colors.muted }, message)
+    ),
+    React.createElement(
+      Box,
+      { gap: 2 },
+      React.createElement(
+        Box,
+        {
+          borderStyle: selectedIndex === 0 ? "round" : undefined,
+          borderColor: selectedIndex === 0 ? confirmColor : undefined,
+          paddingX: 1,
+        },
+        React.createElement(
+          Text,
+          {
+            color: confirmColor,
+            bold: selectedIndex === 0,
+          },
+          confirmLabel
+        )
+      ),
+      React.createElement(
+        Box,
+        {
+          borderStyle: selectedIndex === 1 ? "round" : undefined,
+          borderColor: selectedIndex === 1 ? tokens.colors.focus : undefined,
+          paddingX: 1,
+        },
+        React.createElement(
+          Text,
+          {
+            color: tokens.colors.muted,
+            bold: selectedIndex === 1,
+          },
+          cancelLabel
+        )
+      )
+    ),
+    React.createElement(
+      Box,
+      { marginTop: 1 },
+      React.createElement(
+        Text,
+        { color: tokens.colors.muted, dimColor: true },
+        "Press Y/N or Enter to select"
+      )
+    )
+  );
+}

package/components/confirm-dialog/index.ts

@@ -0,0 +1,2 @@
+export { ConfirmDialog } from "./confirm-dialog.js";
+export type { ConfirmDialogProps } from "./confirm-dialog.js";

package/components/context-menu/context-menu.tsx

@@ -0,0 +1,188 @@
+import React, { useState, useCallback } from "react";
+import { Box, Text, useInput } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens, useFocusable } from "@hauktui/primitives-ink";
+import { stableId, clamp } from "@hauktui/core";
+
+export interface ContextMenuItem {
+  /** Unique identifier */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Optional keyboard shortcut */
+  shortcut?: string;
+  /** Whether this item is disabled */
+  disabled?: boolean;
+  /** Whether this is a separator */
+  separator?: boolean;
+  /** Optional icon/prefix */
+  icon?: string;
+  /** Danger/destructive action */
+  danger?: boolean;
+}
+
+export interface ContextMenuProps {
+  /** Menu items */
+  items: ContextMenuItem[];
+  /** Whether the menu is open */
+  open: boolean;
+  /** Callback when menu should close */
+  onClose: () => void;
+  /** Callback when an item is selected */
+  onSelect: (item: ContextMenuItem) => void;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Menu width */
+  width?: number;
+  /** Menu title */
+  title?: string;
+}
+
+export function ContextMenu({
+  items,
+  open,
+  onClose,
+  onSelect,
+  tokens: propTokens,
+  focusId,
+  width = 25,
+  title,
+}: ContextMenuProps): React.ReactElement | null {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("context-menu");
+  const { isFocused } = useFocusable(id);
+
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const selectableItems = items.filter(
+    (item) => !item.separator && !item.disabled
+  );
+
+  const handleSelect = useCallback(() => {
+    const item = selectableItems[selectedIndex];
+    if (item && !item.disabled) {
+      onSelect(item);
+      onClose();
+    }
+  }, [selectableItems, selectedIndex, onSelect, onClose]);
+
+  useInput(
+    (input, key) => {
+      if (!open || !isFocused) return;
+
+      if (key.escape || input === "q") {
+        onClose();
+        return;
+      }
+
+      if (key.upArrow || input === "k") {
+        setSelectedIndex((prev) =>
+          clamp(prev - 1, 0, selectableItems.length - 1)
+        );
+      } else if (key.downArrow || input === "j") {
+        setSelectedIndex((prev) =>
+          clamp(prev + 1, 0, selectableItems.length - 1)
+        );
+      } else if (key.return) {
+        handleSelect();
+      }
+    },
+    { isActive: open && isFocused }
+  );
+
+  if (!open) return null;
+
+  const menuItems = items.map((item, index) => {
+    if (item.separator) {
+      return React.createElement(
+        Box,
+        { key: `sep-${index}`, paddingX: 1 },
+        React.createElement(
+          Text,
+          { color: tokens.colors.border },
+          "─".repeat(width - 4)
+        )
+      );
+    }
+
+    const isSelected = selectableItems[selectedIndex]?.id === item.id;
+
+    return React.createElement(
+      Box,
+      {
+        key: item.id,
+        paddingX: 1,
+        gap: 1,
+      },
+      React.createElement(
+        Text,
+        { color: isSelected ? tokens.colors.accent : tokens.colors.muted },
+        isSelected ? "▸" : " "
+      ),
+      item.icon ? React.createElement(Text, null, item.icon) : null,
+      React.createElement(
+        Text,
+        {
+          color: item.disabled
+            ? tokens.colors.muted
+            : item.danger
+              ? tokens.colors.danger
+              : isSelected
+                ? tokens.colors.fg
+                : tokens.colors.fg,
+          dimColor: item.disabled,
+          bold: isSelected,
+        },
+        item.label
+      ),
+      item.shortcut
+        ? React.createElement(
+            Box,
+            { flexGrow: 1, justifyContent: "flex-end" },
+            React.createElement(
+              Text,
+              { color: tokens.colors.muted, dimColor: true },
+              item.shortcut
+            )
+          )
+        : null
+    );
+  });
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+      width,
+      paddingY: 0,
+    },
+    title
+      ? React.createElement(
+          Box,
+          { paddingX: 1, marginBottom: 0 },
+          React.createElement(
+            Text,
+            { bold: true, color: tokens.colors.muted },
+            title
+          )
+        )
+      : null,
+    title
+      ? React.createElement(
+          Box,
+          { paddingX: 1 },
+          React.createElement(
+            Text,
+            { color: tokens.colors.border },
+            "─".repeat(width - 4)
+          )
+        )
+      : null,
+    ...menuItems
+  );
+}

package/components/context-menu/index.ts

@@ -0,0 +1,2 @@
+export { ContextMenu } from "./context-menu.js";
+export type { ContextMenuProps, ContextMenuItem } from "./context-menu.js";