@hypoth-ui/cli 0.0.1 → 0.1.1

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

@@ -0,0 +1,324 @@
+/**
+ * ContextMenu component - right-click context menu.
+ *
+ * Opens at pointer position on right-click or long-press.
+ *
+ * @element ds-context-menu
+ *
+ * @slot trigger - Area that triggers the context menu
+ * @slot - Menu content (ds-context-menu-content)
+ *
+ * @fires ds:open - Fired when menu opens
+ * @fires ds:close - Fired when menu closes
+ * @fires ds:select - Fired when an item is selected
+ *
+ * @example
+ * ```html
+ * <ds-context-menu>
+ *   <div slot="trigger">Right-click me</div>
+ *   <ds-context-menu-content>
+ *     <ds-context-menu-item value="copy">Copy</ds-context-menu-item>
+ *     <ds-context-menu-item value="paste">Paste</ds-context-menu-item>
+ *   </ds-context-menu-content>
+ * </ds-context-menu>
+ * ```
+ */
+
+import {
+  type MenuBehavior,
+  type Presence,
+  createMenuBehavior,
+  createPresence,
+  prefersReducedMotion,
+} from "@hypoth-ui/primitives-dom";
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { StandardEvents, emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+
+// Import child components to ensure they're registered
+import type { DsContextMenuContent } from "./context-menu-content.js";
+import "./context-menu-content.js";
+import "./context-menu-item.js";
+import "./context-menu-separator.js";
+import "./context-menu-label.js";
+
+export class DsContextMenu extends DSElement {
+  /** Whether the menu is open */
+  @property({ type: Boolean, reflect: true })
+  open = false;
+
+  /** Whether to animate open/close transitions */
+  @property({ type: Boolean })
+  animated = true;
+
+  /** Position X for menu */
+  @state()
+  private pointerX = 0;
+
+  /** Position Y for menu */
+  @state()
+  private pointerY = 0;
+
+  private menuBehavior: MenuBehavior | null = null;
+  private presence: Presence | null = null;
+  private longPressTimer: ReturnType<typeof setTimeout> | null = null;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Listen for context menu triggers
+    this.addEventListener("contextmenu", this.handleContextMenu);
+
+    // Listen for long-press on touch devices
+    this.addEventListener("touchstart", this.handleTouchStart, { passive: true });
+    this.addEventListener("touchend", this.handleTouchEnd, { passive: true });
+    this.addEventListener("touchmove", this.handleTouchMove, { passive: true });
+
+    // Listen for item selection
+    this.addEventListener("ds:select", this.handleItemSelect);
+
+    // Initialize menu behavior
+    this.initMenuBehavior();
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("contextmenu", this.handleContextMenu);
+    this.removeEventListener("touchstart", this.handleTouchStart);
+    this.removeEventListener("touchend", this.handleTouchEnd);
+    this.removeEventListener("touchmove", this.handleTouchMove);
+    this.removeEventListener("ds:select", this.handleItemSelect);
+    this.cleanup();
+  }
+
+  /**
+   * Initializes the menu behavior primitive.
+   */
+  private initMenuBehavior(): void {
+    this.menuBehavior = createMenuBehavior({
+      defaultOpen: this.open,
+      loop: true,
+      onOpenChange: (open) => {
+        // Sync state when behavior changes (e.g., from escape or outside click)
+        if (!open && this.open) {
+          this.handleBehaviorClose();
+        }
+      },
+      onSelect: (value) => {
+        emitEvent(this, StandardEvents.SELECT, { detail: { value } });
+      },
+    });
+  }
+
+  /**
+   * Handles close triggered by the behavior (escape/outside click).
+   */
+  private handleBehaviorClose(): void {
+    const content = this.querySelector("ds-context-menu-content") as DsContextMenuContent | null;
+
+    if (this.animated && content && !prefersReducedMotion()) {
+      this.presence = createPresence({
+        onExitComplete: () => {
+          this.completeClose();
+        },
+      });
+      this.presence.hide(content);
+    } else {
+      this.open = false;
+      emitEvent(this, StandardEvents.CLOSE);
+    }
+  }
+
+  /**
+   * Opens the menu at the specified position.
+   */
+  public show(x: number, y: number): void {
+    if (this.open) {
+      this.close();
+    }
+
+    this.pointerX = x;
+    this.pointerY = y;
+    this.open = true;
+    this.menuBehavior?.open("first");
+    emitEvent(this, StandardEvents.OPEN);
+  }
+
+  /**
+   * Closes the menu.
+   */
+  public close(): void {
+    if (!this.open) return;
+
+    const content = this.querySelector("ds-context-menu-content") as DsContextMenuContent | null;
+
+    // Close the behavior
+    this.menuBehavior?.close();
+
+    if (this.animated && content && !prefersReducedMotion()) {
+      this.presence = createPresence({
+        onExitComplete: () => {
+          this.completeClose();
+        },
+      });
+      this.presence.hide(content);
+    } else {
+      this.open = false;
+      emitEvent(this, StandardEvents.CLOSE);
+    }
+  }
+
+  private completeClose(): void {
+    this.presence?.destroy();
+    this.presence = null;
+    this.open = false;
+    emitEvent(this, StandardEvents.CLOSE);
+  }
+
+  private handleContextMenu = (event: MouseEvent): void => {
+    const target = event.target as HTMLElement;
+    const trigger = target.closest('[slot="trigger"]');
+
+    if (trigger && this.contains(trigger)) {
+      event.preventDefault();
+      this.show(event.clientX, event.clientY);
+    }
+  };
+
+  private handleTouchStart = (event: TouchEvent): void => {
+    const target = event.target as HTMLElement;
+    const trigger = target.closest('[slot="trigger"]');
+
+    if (trigger && this.contains(trigger)) {
+      const touch = event.touches[0];
+      if (touch) {
+        // Start long-press timer (500ms)
+        this.longPressTimer = setTimeout(() => {
+          this.show(touch.clientX, touch.clientY);
+        }, 500);
+      }
+    }
+  };
+
+  private handleTouchEnd = (): void => {
+    if (this.longPressTimer) {
+      clearTimeout(this.longPressTimer);
+      this.longPressTimer = null;
+    }
+  };
+
+  private handleTouchMove = (): void => {
+    // Cancel long-press if finger moves
+    if (this.longPressTimer) {
+      clearTimeout(this.longPressTimer);
+      this.longPressTimer = null;
+    }
+  };
+
+  private handleItemSelect = (): void => {
+    this.close();
+  };
+
+  private positionContent(): void {
+    const content = this.querySelector("ds-context-menu-content") as HTMLElement | null;
+    if (!content) return;
+
+    // Position at pointer with viewport boundary checking
+    let x = this.pointerX;
+    let y = this.pointerY;
+
+    const rect = content.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    // Adjust if would overflow right
+    if (x + rect.width > viewportWidth) {
+      x = viewportWidth - rect.width - 8;
+    }
+
+    // Adjust if would overflow bottom
+    if (y + rect.height > viewportHeight) {
+      y = viewportHeight - rect.height - 8;
+    }
+
+    // Ensure not negative
+    x = Math.max(8, x);
+    y = Math.max(8, y);
+
+    content.style.left = `${x}px`;
+    content.style.top = `${y}px`;
+  }
+
+  private registerMenuItems(): void {
+    const content = this.querySelector("ds-context-menu-content");
+    if (!content || !this.menuBehavior) return;
+
+    const items = content.querySelectorAll<HTMLElement>("ds-context-menu-item:not([disabled])");
+
+    items.forEach((item) => {
+      this.menuBehavior?.registerItem(item);
+    });
+  }
+
+  private cleanup(): void {
+    this.menuBehavior?.destroy();
+    this.menuBehavior = null;
+    this.presence?.destroy();
+    this.presence = null;
+
+    if (this.longPressTimer) {
+      clearTimeout(this.longPressTimer);
+      this.longPressTimer = null;
+    }
+  }
+
+  override async updated(changedProperties: Map<string, unknown>): Promise<void> {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("open")) {
+      const content = this.querySelector("ds-context-menu-content") as DsContextMenuContent | null;
+
+      if (this.open) {
+        content?.removeAttribute("hidden");
+
+        if (content) {
+          content.dataState = "open";
+        }
+
+        await this.updateComplete;
+
+        // Position content at pointer location
+        this.positionContent();
+
+        // Register menu items with behavior
+        this.registerMenuItems();
+
+        // Set content element (activates dismiss layer, roving focus, type-ahead)
+        // Note: Context menu handles positioning manually, not via anchor
+        this.menuBehavior?.setContentElement(content);
+      } else {
+        content?.setAttribute("hidden", "");
+
+        // Clear content element
+        this.menuBehavior?.setContentElement(null);
+      }
+    }
+  }
+
+  override render() {
+    return html`
+      <slot name="trigger"></slot>
+      <slot></slot>
+    `;
+  }
+}
+
+define("ds-context-menu", DsContextMenu);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-context-menu": DsContextMenu;
+  }
+}

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

@@ -0,0 +1,9 @@
+/**
+ * ContextMenu component exports.
+ */
+
+export { DsContextMenu } from "./context-menu.js";
+export { DsContextMenuContent } from "./context-menu-content.js";
+export { DsContextMenuItem, type ContextMenuItemVariant } from "./context-menu-item.js";
+export { DsContextMenuSeparator } from "./context-menu-separator.js";
+export { DsContextMenuLabel } from "./context-menu-label.js";

package/templates/data-table/index.tsx

@@ -0,0 +1,263 @@
+"use client";
+
+import { type ReactNode, createElement, forwardRef, useEffect, useRef } from "react";
+
+// Define types locally (mirroring WC types)
+export type DataTableSortDirection = "asc" | "desc" | "none";
+
+export interface DataTableColumn {
+  id: string;
+  header: string;
+  accessor?: string;
+  sortable?: boolean;
+  resizable?: boolean;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  align?: "left" | "center" | "right";
+}
+
+export interface DataTableSort {
+  column: string;
+  direction: DataTableSortDirection;
+}
+
+export interface DataTablePagination {
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+export interface DataTableProps {
+  /**
+   * Enable virtualization for large datasets.
+   * @default false
+   */
+  virtualized?: boolean;
+
+  /**
+   * Row height for virtualization (in pixels).
+   * @default 48
+   */
+  rowHeight?: number;
+
+  /**
+   * Number of overscan rows for virtualization.
+   * @default 5
+   */
+  overscan?: number;
+
+  /**
+   * Total number of rows (for server-side pagination).
+   * @default 0
+   */
+  totalRows?: number;
+
+  /**
+   * Current page (1-indexed).
+   * @default 1
+   */
+  page?: number;
+
+  /**
+   * Page size.
+   * @default 10
+   */
+  pageSize?: number;
+
+  /**
+   * Available page sizes as comma-separated string.
+   * @default "10,25,50,100"
+   */
+  pageSizes?: string;
+
+  /**
+   * Enable row selection.
+   * @default false
+   */
+  selectable?: boolean;
+
+  /**
+   * Selection mode.
+   * @default "multiple"
+   */
+  selectionMode?: "single" | "multiple";
+
+  /**
+   * Show loading state.
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Sort column ID.
+   */
+  sortColumn?: string;
+
+  /**
+   * Sort direction.
+   * @default "none"
+   */
+  sortDirection?: "asc" | "desc" | "none";
+
+  /**
+   * Filter/search query.
+   */
+  filter?: string;
+
+  /**
+   * Empty state message.
+   * @default "No data available"
+   */
+  emptyMessage?: string;
+
+  /**
+   * Callback when sort changes.
+   */
+  onSort?: (detail: { column: string; direction: "asc" | "desc" | "none" }) => void;
+
+  /**
+   * Callback when page changes.
+   */
+  onPageChange?: (detail: { page: number }) => void;
+
+  /**
+   * Callback when page size changes.
+   */
+  onPageSizeChange?: (detail: { pageSize: number }) => void;
+
+  /**
+   * Callback when row selection changes.
+   */
+  onSelectionChange?: (detail: { selectedRows: string[] }) => void;
+
+  /**
+   * Table content (use Table sub-components).
+   */
+  children?: ReactNode;
+
+  /**
+   * Additional class name.
+   */
+  className?: string;
+}
+
+/**
+ * DataTable component for displaying large datasets with virtualization,
+ * pagination, sorting, and selection support.
+ *
+ * @example
+ * ```tsx
+ * <DataTable
+ *   totalRows={100}
+ *   page={1}
+ *   pageSize={10}
+ *   selectable
+ *   onPageChange={(detail) => console.log(detail.page)}
+ * >
+ *   <Table>
+ *     <TableHeader>...</TableHeader>
+ *     <TableBody>...</TableBody>
+ *   </Table>
+ * </DataTable>
+ * ```
+ */
+export const DataTable = forwardRef<HTMLElement, DataTableProps>(function DataTable(
+  {
+    virtualized = false,
+    rowHeight = 48,
+    overscan = 5,
+    totalRows = 0,
+    page = 1,
+    pageSize = 10,
+    pageSizes = "10,25,50,100",
+    selectable = false,
+    selectionMode = "multiple",
+    loading = false,
+    sortColumn,
+    sortDirection = "none",
+    filter,
+    emptyMessage = "No data available",
+    onSort,
+    onPageChange,
+    onPageSizeChange,
+    onSelectionChange,
+    children,
+    className,
+  },
+  forwardedRef
+) {
+  const internalRef = useRef<HTMLElement>(null);
+
+  // Sync forwarded ref with internal ref
+  useEffect(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      (forwardedRef as React.MutableRefObject<HTMLElement | null>).current = internalRef.current;
+    }
+  }, [forwardedRef]);
+
+  // Set up event listeners
+  useEffect(() => {
+    const element = internalRef.current;
+    if (!element) return;
+
+    const handleSort = (e: Event) => {
+      const event = e as CustomEvent;
+      onSort?.(event.detail);
+    };
+
+    const handlePageChange = (e: Event) => {
+      const event = e as CustomEvent;
+      onPageChange?.(event.detail);
+    };
+
+    const handlePageSizeChange = (e: Event) => {
+      const event = e as CustomEvent;
+      onPageSizeChange?.(event.detail);
+    };
+
+    const handleSelectionChange = (e: Event) => {
+      const event = e as CustomEvent;
+      onSelectionChange?.(event.detail);
+    };
+
+    element.addEventListener("ds:sort", handleSort);
+    element.addEventListener("ds:page-change", handlePageChange);
+    element.addEventListener("ds:page-size-change", handlePageSizeChange);
+    element.addEventListener("ds:selection-change", handleSelectionChange);
+
+    return () => {
+      element.removeEventListener("ds:sort", handleSort);
+      element.removeEventListener("ds:page-change", handlePageChange);
+      element.removeEventListener("ds:page-size-change", handlePageSizeChange);
+      element.removeEventListener("ds:selection-change", handleSelectionChange);
+    };
+  }, [onSort, onPageChange, onPageSizeChange, onSelectionChange]);
+
+  return createElement(
+    "ds-data-table",
+    {
+      ref: internalRef,
+      virtualized: virtualized || undefined,
+      "row-height": rowHeight,
+      overscan,
+      "total-rows": totalRows,
+      page,
+      "page-size": pageSize,
+      "page-sizes": pageSizes,
+      selectable: selectable || undefined,
+      "selection-mode": selectionMode,
+      loading: loading || undefined,
+      "sort-column": sortColumn,
+      "sort-direction": sortDirection,
+      filter,
+      "empty-message": emptyMessage,
+      class: className,
+    },
+    children
+  );
+});
+
+DataTable.displayName = "DataTable";