@hypoth-ui/cli 0.0.1 → 0.1.1

package/templates/command/wc/command-loading.ts

@@ -0,0 +1,24 @@
+import { DSElement } from "../../base/ds-element.js";
+
+/**
+ * Command palette loading state component - shown when loading async results.
+ *
+ * @element ds-command-loading
+ * @slot - Loading state content (e.g., spinner)
+ *
+ * @example
+ * ```html
+ * <ds-command-loading>
+ *   <ds-spinner size="sm"></ds-spinner>
+ *   Loading...
+ * </ds-command-loading>
+ * ```
+ */
+export class DsCommandLoading extends DSElement {
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "status");
+    this.setAttribute("aria-live", "polite");
+    this.setAttribute("aria-label", "Loading");
+  }
+}

package/templates/command/wc/command-separator.ts

@@ -0,0 +1,23 @@
+import { DSElement } from "../../base/ds-element.js";
+
+/**
+ * Command palette separator component - visual divider between items/groups.
+ *
+ * @element ds-command-separator
+ *
+ * @example
+ * ```html
+ * <ds-command-list>
+ *   <ds-command-item value="copy">Copy</ds-command-item>
+ *   <ds-command-separator></ds-command-separator>
+ *   <ds-command-item value="delete">Delete</ds-command-item>
+ * </ds-command-list>
+ * ```
+ */
+export class DsCommandSeparator extends DSElement {
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "separator");
+    this.setAttribute("aria-orientation", "horizontal");
+  }
+}

package/templates/command/wc/command.ts

@@ -0,0 +1,176 @@
+import { property, state } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { emitEvent } from "../../events/emit.js";
+
+/**
+ * Command palette root component - provides search-based command/option selection.
+ *
+ * @element ds-command
+ * @slot - Command children (input, list, etc.)
+ *
+ * @fires ds:value-change - When the input value changes
+ * @fires ds:select - When an item is selected
+ *
+ * @example
+ * ```html
+ * <ds-command>
+ *   <ds-command-input placeholder="Search commands..."></ds-command-input>
+ *   <ds-command-list>
+ *     <ds-command-group heading="Actions">
+ *       <ds-command-item value="copy">Copy</ds-command-item>
+ *       <ds-command-item value="paste">Paste</ds-command-item>
+ *     </ds-command-group>
+ *   </ds-command-list>
+ * </ds-command>
+ * ```
+ */
+export class DsCommand extends DSElement {
+  /**
+   * Current search/filter value.
+   */
+  @property({ type: String })
+  value = "";
+
+  /**
+   * Whether the command palette is in a loading state.
+   */
+  @property({ type: Boolean, reflect: true })
+  loading = false;
+
+  /**
+   * Whether to use built-in fuzzy filtering.
+   * When false, filtering must be handled externally.
+   */
+  @property({ type: Boolean, attribute: "filter" })
+  filter = true;
+
+  /**
+   * Label for accessibility.
+   */
+  @property({ type: String })
+  label = "Command palette";
+
+  /**
+   * Tracks visible item count after filtering.
+   */
+  @state()
+  private _visibleCount = 0;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "search");
+    this.setAttribute("aria-label", this.label);
+
+    this.addEventListener("ds:command-input", this._handleInputChange);
+    this.addEventListener("ds:command-select", this._handleSelect);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("ds:command-input", this._handleInputChange);
+    this.removeEventListener("ds:command-select", this._handleSelect);
+  }
+
+  private _handleInputChange = (event: Event): void => {
+    const e = event as CustomEvent<{ value: string }>;
+    this.value = e.detail.value;
+
+    if (this.filter) {
+      this._filterItems(this.value);
+    }
+
+    emitEvent(this, "value-change", { detail: { value: this.value } });
+  };
+
+  private _handleSelect = (event: Event): void => {
+    const e = event as CustomEvent<{ value: string }>;
+    emitEvent(this, "select", { detail: { value: e.detail.value } });
+  };
+
+  private _filterItems(query: string): void {
+    const normalizedQuery = query.toLowerCase().trim();
+    const items = this.querySelectorAll("ds-command-item");
+    let visibleCount = 0;
+
+    items.forEach((item) => {
+      const text = item.textContent?.toLowerCase() || "";
+      const value = item.getAttribute("value")?.toLowerCase() || "";
+      const keywords = item.getAttribute("keywords")?.toLowerCase() || "";
+
+      const matches =
+        normalizedQuery === "" ||
+        this._fuzzyMatch(normalizedQuery, text) ||
+        this._fuzzyMatch(normalizedQuery, value) ||
+        this._fuzzyMatch(normalizedQuery, keywords);
+
+      if (matches) {
+        item.removeAttribute("data-filtered");
+        visibleCount++;
+      } else {
+        item.setAttribute("data-filtered", "true");
+      }
+    });
+
+    this._visibleCount = visibleCount;
+    this._updateGroupVisibility();
+    this._updateEmptyState();
+  }
+
+  private _fuzzyMatch(query: string, text: string): boolean {
+    if (!query) return true;
+    if (!text) return false;
+
+    // Simple fuzzy matching - characters must appear in order
+    let queryIndex = 0;
+    for (let i = 0; i < text.length && queryIndex < query.length; i++) {
+      if (text[i] === query[queryIndex]) {
+        queryIndex++;
+      }
+    }
+    return queryIndex === query.length;
+  }
+
+  private _updateGroupVisibility(): void {
+    const groups = this.querySelectorAll("ds-command-group");
+    groups.forEach((group) => {
+      const visibleItems = group.querySelectorAll("ds-command-item:not([data-filtered])");
+      if (visibleItems.length === 0) {
+        group.setAttribute("data-empty", "true");
+      } else {
+        group.removeAttribute("data-empty");
+      }
+    });
+  }
+
+  private _updateEmptyState(): void {
+    const emptyEl = this.querySelector("ds-command-empty");
+    if (emptyEl) {
+      if (this._visibleCount === 0 && this.value) {
+        emptyEl.removeAttribute("hidden");
+      } else {
+        emptyEl.setAttribute("hidden", "");
+      }
+    }
+  }
+
+  /**
+   * Programmatically set the search value.
+   */
+  setValue(value: string): void {
+    this.value = value;
+    const input = this.querySelector("ds-command-input");
+    if (input) {
+      (input as HTMLElement & { value: string }).value = value;
+    }
+    if (this.filter) {
+      this._filterItems(value);
+    }
+  }
+
+  /**
+   * Clear the search value.
+   */
+  clear(): void {
+    this.setValue("");
+  }
+}

package/templates/context-menu/index.tsx

@@ -0,0 +1,262 @@
+/**
+ * ContextMenu compound component exports.
+ *
+ * ContextMenu is used for right-click context menus with keyboard navigation.
+ * Opens at pointer position on right-click or long-press on touch devices.
+ *
+ * @example
+ * ```tsx
+ * import { ContextMenu } from "@/components/ui";
+ *
+ * <ContextMenu.Root>
+ *   <ContextMenu.Trigger>
+ *     <div>Right-click me</div>
+ *   </ContextMenu.Trigger>
+ *   <ContextMenu.Content>
+ *     <ContextMenu.Item value="copy">Copy</ContextMenu.Item>
+ *     <ContextMenu.Item value="paste">Paste</ContextMenu.Item>
+ *     <ContextMenu.Separator />
+ *     <ContextMenu.Item value="delete" variant="destructive">Delete</ContextMenu.Item>
+ *   </ContextMenu.Content>
+ * </ContextMenu.Root>
+ * ```
+ */
+
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type ContextMenuItemVariant = "default" | "destructive";
+
+export interface ContextMenuRootProps extends HTMLAttributes<HTMLElement> {
+  /** Content */
+  children?: ReactNode;
+  /** Controlled open state */
+  open?: boolean;
+  /** Called when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Whether to animate open/close transitions */
+  animated?: boolean;
+}
+
+export interface ContextMenuTriggerProps extends HTMLAttributes<HTMLElement> {
+  /** Trigger content (the area that responds to right-click) */
+  children?: ReactNode;
+}
+
+export interface ContextMenuContentProps extends HTMLAttributes<HTMLElement> {
+  /** Content */
+  children?: ReactNode;
+}
+
+export interface ContextMenuItemProps extends Omit<HTMLAttributes<HTMLElement>, "onSelect"> {
+  /** Item content */
+  children?: ReactNode;
+  /** Value for selection events */
+  value?: string;
+  /** Visual variant */
+  variant?: ContextMenuItemVariant;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Called when item is selected */
+  onSelect?: (value: string) => void;
+}
+
+export interface ContextMenuSeparatorProps extends HTMLAttributes<HTMLElement> {}
+
+export interface ContextMenuLabelProps extends HTMLAttributes<HTMLElement> {
+  /** Label content */
+  children?: ReactNode;
+}
+
+// ============================================================================
+// Components
+// ============================================================================
+
+/**
+ * ContextMenu root component.
+ */
+const ContextMenuRoot = forwardRef<HTMLElement, ContextMenuRootProps>(function ContextMenuRoot(
+  { children, className, open: controlledOpen, onOpenChange, animated = true, ...props },
+  ref
+) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const elementRef = useRef<HTMLElement>(null);
+
+  // Combine refs
+  const combinedRef = (node: HTMLElement | null) => {
+    (elementRef as React.MutableRefObject<HTMLElement | null>).current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      (ref as React.MutableRefObject<HTMLElement | null>).current = node;
+    }
+  };
+
+  const handleOpenChange = useCallback(
+    (event: Event) => {
+      const customEvent = event as CustomEvent;
+      const isOpen = customEvent.type === "ds:open";
+
+      if (!isControlled) {
+        setInternalOpen(isOpen);
+      }
+      onOpenChange?.(isOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+
+  // Attach event listeners
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+
+    element.addEventListener("ds:open", handleOpenChange);
+    element.addEventListener("ds:close", handleOpenChange);
+
+    return () => {
+      element.removeEventListener("ds:open", handleOpenChange);
+      element.removeEventListener("ds:close", handleOpenChange);
+    };
+  }, [handleOpenChange]);
+
+  return createElement(
+    "ds-context-menu",
+    {
+      ref: combinedRef,
+      class: className,
+      open: open || undefined,
+      animated: animated || undefined,
+      ...props,
+    },
+    children
+  );
+});
+ContextMenuRoot.displayName = "ContextMenu.Root";
+
+/**
+ * ContextMenu trigger component.
+ */
+const ContextMenuTrigger = forwardRef<HTMLElement, ContextMenuTriggerProps>(
+  function ContextMenuTrigger({ children, className, ...props }, ref) {
+    return createElement("span", { ref, className, slot: "trigger", ...props }, children);
+  }
+);
+ContextMenuTrigger.displayName = "ContextMenu.Trigger";
+
+/**
+ * ContextMenu content component.
+ */
+const ContextMenuContent = forwardRef<HTMLElement, ContextMenuContentProps>(
+  function ContextMenuContent({ children, className, ...props }, ref) {
+    return createElement("ds-context-menu-content", { ref, class: className, ...props }, children);
+  }
+);
+ContextMenuContent.displayName = "ContextMenu.Content";
+
+/**
+ * ContextMenu item component.
+ */
+const ContextMenuItem = forwardRef<HTMLElement, ContextMenuItemProps>(function ContextMenuItem(
+  { children, className, value, variant = "default", disabled = false, onSelect, ...props },
+  ref
+) {
+  const elementRef = useRef<HTMLElement>(null);
+
+  // Combine refs
+  const combinedRef = (node: HTMLElement | null) => {
+    (elementRef as React.MutableRefObject<HTMLElement | null>).current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      (ref as React.MutableRefObject<HTMLElement | null>).current = node;
+    }
+  };
+
+  // Attach select handler
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element || !onSelect) return;
+
+    const handleSelect = (event: Event) => {
+      const customEvent = event as CustomEvent<{ value: string }>;
+      onSelect(customEvent.detail.value);
+    };
+    element.addEventListener("ds:select", handleSelect);
+
+    return () => {
+      element.removeEventListener("ds:select", handleSelect);
+    };
+  }, [onSelect]);
+
+  return createElement(
+    "ds-context-menu-item",
+    {
+      ref: combinedRef,
+      class: className,
+      value,
+      variant,
+      disabled: disabled || undefined,
+      ...props,
+    },
+    children
+  );
+});
+ContextMenuItem.displayName = "ContextMenu.Item";
+
+/**
+ * ContextMenu separator component.
+ */
+const ContextMenuSeparator = forwardRef<HTMLElement, ContextMenuSeparatorProps>(
+  function ContextMenuSeparator({ className, ...props }, ref) {
+    return createElement("ds-context-menu-separator", { ref, class: className, ...props });
+  }
+);
+ContextMenuSeparator.displayName = "ContextMenu.Separator";
+
+/**
+ * ContextMenu label component.
+ */
+const ContextMenuLabel = forwardRef<HTMLElement, ContextMenuLabelProps>(function ContextMenuLabel(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("ds-context-menu-label", { ref, class: className, ...props }, children);
+});
+ContextMenuLabel.displayName = "ContextMenu.Label";
+
+// ============================================================================
+// Compound Component
+// ============================================================================
+
+export const ContextMenu = {
+  Root: ContextMenuRoot,
+  Trigger: ContextMenuTrigger,
+  Content: ContextMenuContent,
+  Item: ContextMenuItem,
+  Separator: ContextMenuSeparator,
+  Label: ContextMenuLabel,
+};
+
+// Also export individual components
+export {
+  ContextMenuRoot,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuLabel,
+};

package/templates/context-menu/wc/context-menu-content.ts

@@ -0,0 +1,41 @@
+/**
+ * ContextMenuContent component - container for context menu items.
+ *
+ * @element ds-context-menu-content
+ *
+ * @slot - Menu items
+ */
+
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsContextMenuContent extends DSElement {
+  /** Data state for animations */
+  @property({ attribute: "data-state", reflect: true })
+  dataState: "open" | "closed" = "closed";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    if (!this.id) {
+      this.id = `context-menu-content-${crypto.randomUUID().slice(0, 8)}`;
+    }
+
+    this.setAttribute("role", "menu");
+    this.setAttribute("hidden", "");
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-context-menu-content", DsContextMenuContent);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-context-menu-content": DsContextMenuContent;
+  }
+}

package/templates/context-menu/wc/context-menu-item.ts

@@ -0,0 +1,83 @@
+/**
+ * ContextMenuItem component - selectable context menu item.
+ *
+ * @element ds-context-menu-item
+ *
+ * @slot - Item content
+ *
+ * @fires ds:select - Fired when item is selected
+ */
+
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+
+export type ContextMenuItemVariant = "default" | "destructive";
+
+export class DsContextMenuItem extends DSElement {
+  /** Value for selection events */
+  @property()
+  value = "";
+
+  /** Visual variant */
+  @property({ reflect: true })
+  variant: ContextMenuItemVariant = "default";
+
+  /** Disabled state */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    this.setAttribute("role", "menuitem");
+    this.setAttribute("tabindex", "-1");
+
+    this.addEventListener("click", this.handleSelect);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleSelect);
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+
+  private handleSelect = (): void => {
+    if (this.disabled) return;
+
+    emitEvent(this, "ds:select", {
+      detail: { value: this.value },
+      bubbles: true,
+    });
+  };
+
+  private handleKeyDown = (event: KeyboardEvent): void => {
+    if (this.disabled) return;
+
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.handleSelect();
+    }
+  };
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("aria-disabled", String(this.disabled));
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-context-menu-item", DsContextMenuItem);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-context-menu-item": DsContextMenuItem;
+  }
+}

package/templates/context-menu/wc/context-menu-label.ts

@@ -0,0 +1,30 @@
+/**
+ * ContextMenuLabel component - non-interactive label for menu sections.
+ *
+ * @element ds-context-menu-label
+ *
+ * @slot - Label content
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsContextMenuLabel extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("aria-hidden", "true");
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-context-menu-label", DsContextMenuLabel);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-context-menu-label": DsContextMenuLabel;
+  }
+}

package/templates/context-menu/wc/context-menu-separator.ts

@@ -0,0 +1,28 @@
+/**
+ * ContextMenuSeparator component - visual divider between menu items.
+ *
+ * @element ds-context-menu-separator
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsContextMenuSeparator extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "separator");
+  }
+
+  override render() {
+    return html``;
+  }
+}
+
+define("ds-context-menu-separator", DsContextMenuSeparator);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-context-menu-separator": DsContextMenuSeparator;
+  }
+}