@hypoth-ui/cli 0.0.1 → 0.1.0

package/templates/scroll-area/wc/scroll-area-thumb.ts

@@ -0,0 +1,225 @@
+/**
+ * ScrollAreaThumb component - draggable scrollbar thumb.
+ *
+ * @element ds-scroll-area-thumb
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+/**
+ * Cached dimensions for scrollbar track to avoid layout thrashing.
+ * Updated via ResizeObserver instead of per-frame getBoundingClientRect calls.
+ */
+interface CachedDimensions {
+  width: number;
+  height: number;
+}
+
+export class DsScrollAreaThumb extends DSElement {
+  private isDragging = false;
+  private startY = 0;
+  private startX = 0;
+  private startScrollTop = 0;
+  private startScrollLeft = 0;
+
+  /** Cached scrollbar dimensions to avoid layout thrashing during drag */
+  private cachedDimensions: CachedDimensions = { width: 0, height: 0 };
+
+  /** ResizeObserver for tracking scrollbar size changes */
+  private resizeObserver: ResizeObserver | null = null;
+
+  /** Scrollbar element reference for ResizeObserver */
+  private scrollbarElement: HTMLElement | null = null;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    this.addEventListener("mousedown", this.handleMouseDown);
+    this.addEventListener("touchstart", this.handleTouchStart, { passive: false });
+
+    // Set up ResizeObserver for dimension caching
+    this.setupResizeObserver();
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("mousedown", this.handleMouseDown);
+    this.removeEventListener("touchstart", this.handleTouchStart);
+    this.cleanupDrag();
+    this.cleanupResizeObserver();
+  }
+
+  /**
+   * Set up ResizeObserver to cache scrollbar dimensions.
+   * This avoids calling getBoundingClientRect on every drag event.
+   */
+  private setupResizeObserver(): void {
+    // Clean up any existing observer
+    this.cleanupResizeObserver();
+
+    const scrollbar = this.closest("ds-scroll-area-scrollbar") as HTMLElement | null;
+    if (!scrollbar) return;
+
+    this.scrollbarElement = scrollbar;
+
+    // Create ResizeObserver to update cached dimensions on resize
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target === this.scrollbarElement) {
+          // Use contentRect for dimensions (avoids additional layout)
+          this.cachedDimensions = {
+            width: entry.contentRect.width,
+            height: entry.contentRect.height,
+          };
+        }
+      }
+    });
+
+    this.resizeObserver.observe(scrollbar);
+
+    // Initialize cached dimensions
+    const rect = scrollbar.getBoundingClientRect();
+    this.cachedDimensions = {
+      width: rect.width,
+      height: rect.height,
+    };
+  }
+
+  /**
+   * Clean up ResizeObserver on disconnect.
+   */
+  private cleanupResizeObserver(): void {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+    this.scrollbarElement = null;
+  }
+
+  private getViewport(): HTMLElement | null {
+    const scrollArea = this.closest("ds-scroll-area");
+    return scrollArea?.querySelector("ds-scroll-area-viewport") || null;
+  }
+
+  private getOrientation(): "vertical" | "horizontal" {
+    const scrollbar = this.closest("ds-scroll-area-scrollbar");
+    return (scrollbar?.getAttribute("orientation") as "vertical" | "horizontal") || "vertical";
+  }
+
+  private handleMouseDown = (event: MouseEvent): void => {
+    event.preventDefault();
+    this.startDrag(event.clientX, event.clientY);
+
+    document.addEventListener("mousemove", this.handleMouseMove);
+    document.addEventListener("mouseup", this.handleMouseUp);
+  };
+
+  private handleMouseMove = (event: MouseEvent): void => {
+    if (!this.isDragging) return;
+    this.drag(event.clientX, event.clientY);
+  };
+
+  private handleMouseUp = (): void => {
+    this.cleanupDrag();
+  };
+
+  private handleTouchStart = (event: TouchEvent): void => {
+    const touch = event.touches[0];
+    if (!touch) return;
+
+    event.preventDefault();
+    this.startDrag(touch.clientX, touch.clientY);
+
+    document.addEventListener("touchmove", this.handleTouchMove, { passive: false });
+    document.addEventListener("touchend", this.handleTouchEnd);
+  };
+
+  private handleTouchMove = (event: TouchEvent): void => {
+    if (!this.isDragging) return;
+
+    const touch = event.touches[0];
+    if (!touch) return;
+
+    event.preventDefault();
+    this.drag(touch.clientX, touch.clientY);
+  };
+
+  private handleTouchEnd = (): void => {
+    this.cleanupDrag();
+  };
+
+  private startDrag(clientX: number, clientY: number): void {
+    const viewport = this.getViewport();
+    if (!viewport) return;
+
+    this.isDragging = true;
+    this.startX = clientX;
+    this.startY = clientY;
+    this.startScrollTop = viewport.scrollTop;
+    this.startScrollLeft = viewport.scrollLeft;
+
+    this.setAttribute("data-dragging", "");
+    document.body.style.userSelect = "none";
+  }
+
+  /**
+   * Handle drag movement using cached dimensions.
+   * Uses ResizeObserver-cached values instead of getBoundingClientRect
+   * to avoid layout thrashing during drag operations.
+   */
+  private drag(clientX: number, clientY: number): void {
+    const viewport = this.getViewport();
+    if (!viewport) return;
+
+    const orientation = this.getOrientation();
+
+    // Use cached dimensions instead of calling getBoundingClientRect
+    // This prevents layout thrashing during high-frequency drag events
+    const { width: trackWidth, height: trackHeight } = this.cachedDimensions;
+
+    if (orientation === "vertical") {
+      const deltaY = clientY - this.startY;
+      const scrollableHeight = viewport.scrollHeight - viewport.clientHeight;
+
+      // Guard against division by zero
+      if (trackHeight > 0 && scrollableHeight > 0) {
+        const scrollDelta = (deltaY / trackHeight) * scrollableHeight;
+        viewport.scrollTop = this.startScrollTop + scrollDelta;
+      }
+    } else {
+      const deltaX = clientX - this.startX;
+      const scrollableWidth = viewport.scrollWidth - viewport.clientWidth;
+
+      // Guard against division by zero
+      if (trackWidth > 0 && scrollableWidth > 0) {
+        const scrollDelta = (deltaX / trackWidth) * scrollableWidth;
+        viewport.scrollLeft = this.startScrollLeft + scrollDelta;
+      }
+    }
+  }
+
+  private cleanupDrag(): void {
+    this.isDragging = false;
+    this.removeAttribute("data-dragging");
+    document.body.style.userSelect = "";
+
+    document.removeEventListener("mousemove", this.handleMouseMove);
+    document.removeEventListener("mouseup", this.handleMouseUp);
+    document.removeEventListener("touchmove", this.handleTouchMove);
+    document.removeEventListener("touchend", this.handleTouchEnd);
+  }
+
+  override render() {
+    return html``;
+  }
+}
+
+define("ds-scroll-area-thumb", DsScrollAreaThumb);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-scroll-area-thumb": DsScrollAreaThumb;
+  }
+}

package/templates/scroll-area/wc/scroll-area-viewport.ts

@@ -0,0 +1,120 @@
+/**
+ * ScrollAreaViewport component - scrollable content container.
+ *
+ * @element ds-scroll-area-viewport
+ *
+ * @slot - Scrollable content
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+
+export class DsScrollAreaViewport extends DSElement {
+  private resizeObserver: ResizeObserver | null = null;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("tabindex", "0");
+
+    this.addEventListener("scroll", this.handleScroll);
+
+    // Observe for overflow changes
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updateOverflowState();
+    });
+    this.resizeObserver.observe(this);
+
+    this.updateComplete.then(() => {
+      this.updateOverflowState();
+    });
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("scroll", this.handleScroll);
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+  }
+
+  private handleScroll = (): void => {
+    this.updateScrollbarPositions();
+
+    emitEvent(this, "ds:scroll", {
+      detail: {
+        scrollTop: this.scrollTop,
+        scrollLeft: this.scrollLeft,
+        scrollHeight: this.scrollHeight,
+        scrollWidth: this.scrollWidth,
+      },
+      bubbles: true,
+    });
+  };
+
+  private updateOverflowState(): void {
+    const hasVerticalOverflow = this.scrollHeight > this.clientHeight;
+    const hasHorizontalOverflow = this.scrollWidth > this.clientWidth;
+
+    this.toggleAttribute("data-overflow-y", hasVerticalOverflow);
+    this.toggleAttribute("data-overflow-x", hasHorizontalOverflow);
+
+    // Update scrollbar visibility
+    const scrollArea = this.closest("ds-scroll-area");
+    if (scrollArea) {
+      scrollArea.toggleAttribute("data-overflow-y", hasVerticalOverflow);
+      scrollArea.toggleAttribute("data-overflow-x", hasHorizontalOverflow);
+    }
+
+    this.updateScrollbarPositions();
+  }
+
+  private updateScrollbarPositions(): void {
+    const scrollArea = this.closest("ds-scroll-area");
+    if (!scrollArea) return;
+
+    const scrollbars = scrollArea.querySelectorAll("ds-scroll-area-scrollbar");
+
+    for (const scrollbar of scrollbars) {
+      const orientation = scrollbar.getAttribute("orientation") || "vertical";
+      const thumb = scrollbar.querySelector("ds-scroll-area-thumb");
+
+      if (!thumb) continue;
+
+      if (orientation === "vertical") {
+        const scrollRatio = this.scrollTop / (this.scrollHeight - this.clientHeight);
+        const thumbHeight = (this.clientHeight / this.scrollHeight) * 100;
+        const thumbTop = scrollRatio * (100 - thumbHeight);
+
+        (thumb as HTMLElement).style.height = `${Math.max(10, thumbHeight)}%`;
+        (thumb as HTMLElement).style.top = `${thumbTop}%`;
+      } else {
+        const scrollRatio = this.scrollLeft / (this.scrollWidth - this.clientWidth);
+        const thumbWidth = (this.clientWidth / this.scrollWidth) * 100;
+        const thumbLeft = scrollRatio * (100 - thumbWidth);
+
+        (thumb as HTMLElement).style.width = `${Math.max(10, thumbWidth)}%`;
+        (thumb as HTMLElement).style.left = `${thumbLeft}%`;
+      }
+    }
+  }
+
+  /**
+   * Scrolls to a specific position.
+   */
+  public scrollToPosition(options: ScrollToOptions): void {
+    this.scrollTo(options);
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-scroll-area-viewport", DsScrollAreaViewport);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-scroll-area-viewport": DsScrollAreaViewport;
+  }
+}

package/templates/scroll-area/wc/scroll-area.ts

@@ -0,0 +1,63 @@
+/**
+ * ScrollArea component - custom scrollbar container.
+ *
+ * Provides styled scrollbars with consistent appearance across browsers.
+ *
+ * @element ds-scroll-area
+ *
+ * @slot - Scrollable content
+ *
+ * @example
+ * ```html
+ * <ds-scroll-area style="height: 200px">
+ *   <ds-scroll-area-viewport>
+ *     <!-- Long content here -->
+ *   </ds-scroll-area-viewport>
+ *   <ds-scroll-area-scrollbar orientation="vertical">
+ *     <ds-scroll-area-thumb></ds-scroll-area-thumb>
+ *   </ds-scroll-area-scrollbar>
+ * </ds-scroll-area>
+ * ```
+ */
+
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+// Import child components
+import "./scroll-area-viewport.js";
+import "./scroll-area-scrollbar.js";
+import "./scroll-area-thumb.js";
+
+export type ScrollAreaType = "auto" | "always" | "scroll" | "hover";
+
+export class DsScrollArea extends DSElement {
+  /** When scrollbars are visible */
+  @property({ type: String, reflect: true })
+  type: ScrollAreaType = "hover";
+
+  /** Scroll hide delay in ms (for hover type) */
+  @property({ type: Number, attribute: "scroll-hide-delay" })
+  scrollHideDelay = 600;
+
+  /** Orientation for which to show scrollbar */
+  @property({ type: String, reflect: true })
+  orientation: "vertical" | "horizontal" | "both" = "vertical";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-scroll-area", DsScrollArea);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-scroll-area": DsScrollArea;
+  }
+}

package/templates/select/index.ts

@@ -0,0 +1,57 @@
+/**
+ * Select compound component exports.
+ *
+ * @example
+ * ```tsx
+ * import { Select } from "@/components/ui";
+ *
+ * <Select.Root onValueChange={(value) => console.log(value)}>
+ *   <Select.Trigger>
+ *     <Select.Value placeholder="Select a fruit" />
+ *   </Select.Trigger>
+ *   <Select.Content>
+ *     <Select.Label>Fruits</Select.Label>
+ *     <Select.Option value="apple">Apple</Select.Option>
+ *     <Select.Option value="banana">Banana</Select.Option>
+ *     <Select.Separator />
+ *     <Select.Option value="cherry">Cherry</Select.Option>
+ *   </Select.Content>
+ * </Select.Root>
+ * ```
+ */
+
+import { SelectContent, type SelectContentProps } from "./select-content.js";
+import { SelectGroup, type SelectGroupProps } from "./select-group.js";
+import { SelectLabel, type SelectLabelProps } from "./select-label.js";
+import { SelectOption, type SelectOptionProps } from "./select-option.js";
+import { SelectRoot, type SelectRootProps } from "./select-root.js";
+import { SelectSeparator, type SelectSeparatorProps } from "./select-separator.js";
+import { SelectTrigger, type SelectTriggerProps } from "./select-trigger.js";
+import { SelectValue, type SelectValueProps } from "./select-value.js";
+
+// Compound component
+export const Select = {
+  Root: SelectRoot,
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  Content: SelectContent,
+  Group: SelectGroup,
+  Option: SelectOption,
+  Separator: SelectSeparator,
+  Label: SelectLabel,
+};
+
+// Type exports
+export type {
+  SelectContentProps,
+  SelectGroupProps,
+  SelectLabelProps,
+  SelectOptionProps,
+  SelectRootProps,
+  SelectSeparatorProps,
+  SelectTriggerProps,
+  SelectValueProps,
+};
+
+// Re-export Placement from primitives-dom
+export type { Placement } from "@hypoth-ui/primitives-dom";

package/templates/select/select-content.tsx

@@ -0,0 +1,243 @@
+/**
+ * Select Content component - container for select options.
+ */
+
+import {
+  type AnchorPosition,
+  type DismissableLayer,
+  type RovingFocus,
+  type TypeAhead,
+  createAnchorPosition,
+  createDismissableLayer,
+  createRovingFocus,
+  createTypeAhead,
+} from "@hypoth-ui/primitives-dom";
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
+import { useSelectContext } from "./select-context.js";
+
+export interface SelectContentProps extends HTMLAttributes<HTMLDivElement> {
+  /** Content container */
+  children?: ReactNode;
+  /** Optional label for accessibility */
+  "aria-label"?: string;
+}
+
+/**
+ * Container for select options.
+ * Handles positioning, dismiss behavior, and keyboard navigation.
+ *
+ * @example
+ * ```tsx
+ * <Select.Content>
+ *   <Select.Option value="apple">Apple</Select.Option>
+ *   <Select.Option value="banana">Banana</Select.Option>
+ * </Select.Content>
+ * ```
+ */
+export const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
+  ({ children, className, onKeyDown, ...restProps }, ref) => {
+    const { behavior, open, setOpen, highlightedValue, setHighlightedValue, value } =
+      useSelectContext("Select.Content");
+    const internalRef = useRef<HTMLDivElement>(null);
+
+    // Behavior instances
+    const anchorPositionRef = useRef<AnchorPosition | null>(null);
+    const dismissLayerRef = useRef<DismissableLayer | null>(null);
+    const rovingFocusRef = useRef<RovingFocus | null>(null);
+    const typeAheadRef = useRef<TypeAhead | null>(null);
+    const triggerRef = useRef<HTMLElement | null>(null);
+
+    // Merge refs
+    const mergedRef = useCallback(
+      (element: HTMLDivElement | null) => {
+        (internalRef as React.MutableRefObject<HTMLDivElement | null>).current = element;
+        if (typeof ref === "function") {
+          ref(element);
+        } else if (ref) {
+          (ref as React.MutableRefObject<HTMLDivElement | null>).current = element;
+        }
+      },
+      [ref]
+    );
+
+    // Setup and cleanup behaviors when open changes
+    useEffect(() => {
+      const content = internalRef.current;
+      if (!content || !open) return;
+
+      // Find trigger element (previous sibling or parent context)
+      const trigger = content.previousElementSibling as HTMLElement;
+      triggerRef.current = trigger;
+
+      // Setup anchor positioning
+      if (trigger) {
+        anchorPositionRef.current = createAnchorPosition({
+          anchor: trigger,
+          floating: content,
+          placement: "bottom-start",
+          offset: 4,
+          flip: true,
+          onPositionChange: (pos) => {
+            content.setAttribute("data-placement", pos.placement);
+          },
+        });
+      }
+
+      // Setup dismiss layer
+      dismissLayerRef.current = createDismissableLayer({
+        container: content,
+        excludeElements: trigger ? [trigger] : [],
+        onDismiss: () => setOpen(false),
+        closeOnEscape: true,
+        closeOnOutsideClick: true,
+      });
+      dismissLayerRef.current.activate();
+
+      // Setup roving focus
+      rovingFocusRef.current = createRovingFocus({
+        container: content,
+        selector: '[role="option"]:not([aria-disabled="true"])',
+        direction: "vertical",
+        loop: true,
+        skipDisabled: true,
+      });
+
+      // Setup type-ahead
+      typeAheadRef.current = createTypeAhead({
+        items: () =>
+          Array.from(
+            content.querySelectorAll<HTMLElement>('[role="option"]:not([aria-disabled="true"])')
+          ),
+        getText: (item) => item.textContent?.trim() || "",
+        onMatch: (item) => {
+          const optionValue = item.getAttribute("data-value");
+          if (optionValue) {
+            behavior.highlight(optionValue);
+            setHighlightedValue(optionValue);
+            item.scrollIntoView({ block: "nearest" });
+          }
+        },
+      });
+
+      // Focus on current or first option
+      requestAnimationFrame(() => {
+        const options = content.querySelectorAll<HTMLElement>(
+          '[role="option"]:not([aria-disabled="true"])'
+        );
+        if (options.length === 0) return;
+
+        // Find current value or highlight first
+        let initialIndex = 0;
+        if (value) {
+          const selectedIndex = Array.from(options).findIndex(
+            (opt) => opt.getAttribute("data-value") === value
+          );
+          if (selectedIndex >= 0) {
+            initialIndex = selectedIndex;
+          }
+        }
+
+        const initialOption = options[initialIndex];
+        if (initialOption) {
+          const optionValue = initialOption.getAttribute("data-value");
+          if (optionValue) {
+            behavior.highlight(optionValue);
+            setHighlightedValue(optionValue);
+          }
+          rovingFocusRef.current?.setFocusedIndex(initialIndex);
+          initialOption.scrollIntoView({ block: "nearest" });
+        }
+      });
+
+      // Cleanup
+      return () => {
+        anchorPositionRef.current?.destroy();
+        anchorPositionRef.current = null;
+        dismissLayerRef.current?.deactivate();
+        dismissLayerRef.current = null;
+        rovingFocusRef.current?.destroy();
+        rovingFocusRef.current = null;
+        typeAheadRef.current?.reset();
+        typeAheadRef.current = null;
+      };
+    }, [open, behavior, setOpen, setHighlightedValue, value]);
+
+    // Handle keyboard navigation
+    const handleKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        // Let type-ahead handle character keys
+        typeAheadRef.current?.handleKeyDown(event.nativeEvent);
+
+        switch (event.key) {
+          case "Enter":
+          case " ":
+            event.preventDefault();
+            if (highlightedValue) {
+              behavior.select(highlightedValue);
+            }
+            break;
+          case "Escape":
+            event.preventDefault();
+            setOpen(false);
+            triggerRef.current?.focus();
+            break;
+          case "ArrowDown":
+            event.preventDefault();
+            behavior.highlightNext();
+            setHighlightedValue(behavior.state.highlightedValue);
+            break;
+          case "ArrowUp":
+            event.preventDefault();
+            behavior.highlightPrev();
+            setHighlightedValue(behavior.state.highlightedValue);
+            break;
+          case "Home":
+            event.preventDefault();
+            behavior.highlightFirst();
+            setHighlightedValue(behavior.state.highlightedValue);
+            break;
+          case "End":
+            event.preventDefault();
+            behavior.highlightLast();
+            setHighlightedValue(behavior.state.highlightedValue);
+            break;
+          case "Tab":
+            // Close on tab without preventing default
+            setOpen(false);
+            break;
+        }
+
+        onKeyDown?.(event);
+      },
+      [behavior, highlightedValue, setOpen, setHighlightedValue, onKeyDown]
+    );
+
+    // Don't render if not open
+    if (!open) return null;
+
+    const contentProps = behavior.getContentProps();
+
+    return (
+      <div
+        ref={mergedRef}
+        role={contentProps.role}
+        id={contentProps.id}
+        className={className}
+        onKeyDown={handleKeyDown}
+        data-state="open"
+        {...restProps}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+SelectContent.displayName = "Select.Content";