@epoch32/visage 0.0.0-stage → 0.0.0

package/src/ui/toast.tsx

@@ -0,0 +1,280 @@
+import { For } from "../dom/control-flow";
+import type { Child } from "../dom/render";
+import { type ReadonlySignal, signal, type WritableSignal } from "../signals";
+import { createContext, useContext } from "../signals/context";
+import { createId } from "./utils";
+
+export type ToastVariant = "default" | "success" | "error" | "warning" | "info";
+
+export interface ToastData {
+  id: string;
+  title?: Child;
+  description?: Child;
+  variant?: ToastVariant;
+  duration?: number;
+  onDismiss?: () => void;
+}
+
+export interface ToastOptions {
+  title?: Child;
+  description?: Child;
+  variant?: ToastVariant;
+  duration?: number;
+  onDismiss?: () => void;
+}
+
+export interface ToastManager {
+  (options: ToastOptions | string): string;
+  toasts: ReadonlySignal<ToastData[]>;
+  show: (options: ToastOptions | string) => string;
+  success: (title: string, options?: Omit<ToastOptions, "title" | "variant">) => string;
+  error: (title: string, options?: Omit<ToastOptions, "title" | "variant">) => string;
+  warning: (title: string, options?: Omit<ToastOptions, "title" | "variant">) => string;
+  info: (title: string, options?: Omit<ToastOptions, "title" | "variant">) => string;
+  dismiss: (id: string) => void;
+  clear: () => void;
+}
+
+export function createToastManager(): ToastManager {
+  const toasts: WritableSignal<ToastData[]> = signal<ToastData[]>([]);
+
+  const dismiss = (id: string) => {
+    const item = toasts().find((t) => t.id === id);
+    if (item?.onDismiss) item.onDismiss();
+    toasts.update((list) => list.filter((t) => t.id !== id));
+  };
+
+  const show = (options: ToastOptions | string): string => {
+    const id = createId("toast");
+    const normalized: ToastOptions = typeof options === "string" ? { title: options } : options;
+
+    const data: ToastData = {
+      id,
+      title: normalized.title,
+      description: normalized.description,
+      variant: normalized.variant ?? "default",
+      duration: normalized.duration ?? 5000,
+      onDismiss: normalized.onDismiss
+    };
+
+    toasts.update((list) => [...list, data]);
+
+    if (data.duration && data.duration > 0) {
+      setTimeout(() => {
+        dismiss(id);
+      }, data.duration);
+    }
+
+    return id;
+  };
+
+  const success = (title: string, options?: Omit<ToastOptions, "title" | "variant">) =>
+    show({ ...options, title, variant: "success" });
+
+  const error = (title: string, options?: Omit<ToastOptions, "title" | "variant">) =>
+    show({ ...options, title, variant: "error" });
+
+  const warning = (title: string, options?: Omit<ToastOptions, "title" | "variant">) =>
+    show({ ...options, title, variant: "warning" });
+
+  const info = (title: string, options?: Omit<ToastOptions, "title" | "variant">) =>
+    show({ ...options, title, variant: "info" });
+
+  const clear = () => {
+    toasts.set([]);
+  };
+
+  const fn = function toast(options: ToastOptions | string): string {
+    return show(options);
+  } as ToastManager;
+
+  fn.toasts = toasts;
+  fn.show = show;
+  fn.success = success;
+  fn.error = error;
+  fn.warning = warning;
+  fn.info = info;
+  fn.dismiss = dismiss;
+  fn.clear = clear;
+
+  return fn;
+}
+
+export const defaultToastManager = createToastManager();
+
+export const toast = defaultToastManager;
+
+export const ToastContext = createContext<ToastManager>(defaultToastManager);
+
+export function useToast(): ToastManager {
+  return useContext(ToastContext) ?? defaultToastManager;
+}
+
+export interface ToastProviderProps {
+  manager?: ToastManager;
+  children: Child | (() => Child);
+}
+
+export function ToastProvider(props: ToastProviderProps): Child {
+  const manager = props.manager ?? defaultToastManager;
+  return ToastContext.Provider({
+    value: manager,
+    children: props.children
+  });
+}
+
+export interface ToastViewportProps {
+  as?: string;
+  class?: any;
+  style?: any;
+  children?: (item: ToastData) => Child;
+  [key: string]: any;
+}
+
+export function ToastViewport(props: ToastViewportProps): Child {
+  const manager = useToast();
+  const { as: Tag = "section", children, class: className, style, ...rest } = props;
+
+  const defaultRender = (t: ToastData) => (
+    <Toast
+      id={t.id}
+      variant={t.variant}
+      class={`visage-toast toast toast-${t.variant ?? "default"}`}
+      onDismiss={() => manager.dismiss(t.id)}
+    >
+      <div class="visage-toast-content">
+        {t.title && <ToastTitle class="visage-toast-title">{t.title}</ToastTitle>}
+        {t.description && (
+          <ToastDescription class="visage-toast-description">{t.description}</ToastDescription>
+        )}
+      </div>
+      <ToastClose class="visage-toast-close" onClick={() => manager.dismiss(t.id)} />
+    </Toast>
+  );
+
+  const renderItem = children ?? defaultRender;
+
+  return (
+    <Tag
+      role="region"
+      aria-label="Notifications"
+      class={className}
+      style={style}
+      tabIndex={-1}
+      {...rest}
+    >
+      <For each={manager.toasts}>{(t) => renderItem(t)}</For>
+    </Tag>
+  );
+}
+
+export interface ToastProps {
+  id?: string;
+  variant?: ToastVariant;
+  onDismiss?: () => void;
+  as?: string;
+  class?: any;
+  style?: any;
+  children: Child | (() => Child);
+  [key: string]: any;
+}
+
+export function ToastRoot(props: ToastProps): Child {
+  const {
+    id,
+    variant = "default",
+    onDismiss,
+    as: Tag = "div",
+    children,
+    class: className,
+    style,
+    ...rest
+  } = props;
+
+  const role = variant === "error" ? "alert" : "status";
+  const ariaLive = variant === "error" ? "assertive" : "polite";
+
+  return (
+    <Tag
+      id={id}
+      role={role}
+      aria-live={ariaLive}
+      data-variant={variant}
+      data-state="open"
+      class={className}
+      style={style}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+}
+
+export interface ToastTitleProps {
+  as?: string;
+  class?: any;
+  style?: any;
+  children: Child | (() => Child);
+  [key: string]: any;
+}
+
+export function ToastTitle(props: ToastTitleProps): Child {
+  const { as: Tag = "div", children, class: className, style, ...rest } = props;
+  return (
+    <Tag class={className} style={style} {...rest}>
+      {children}
+    </Tag>
+  );
+}
+
+export interface ToastDescriptionProps {
+  as?: string;
+  class?: any;
+  style?: any;
+  children: Child | (() => Child);
+  [key: string]: any;
+}
+
+export function ToastDescription(props: ToastDescriptionProps): Child {
+  const { as: Tag = "div", children, class: className, style, ...rest } = props;
+  return (
+    <Tag class={className} style={style} {...rest}>
+      {children}
+    </Tag>
+  );
+}
+
+export interface ToastCloseProps {
+  as?: string;
+  class?: any;
+  style?: any;
+  onClick?: (e: MouseEvent) => void;
+  children?: Child | (() => Child);
+  [key: string]: any;
+}
+
+export function ToastClose(props: ToastCloseProps): Child {
+  const { as: Tag = "button", children = "✕", onClick, class: className, style, ...rest } = props;
+
+  return (
+    <Tag
+      type={Tag === "button" ? "button" : undefined}
+      aria-label="Close notification"
+      class={className}
+      style={style}
+      onClick={onClick}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+}
+
+export const Toast = Object.assign(ToastRoot, {
+  Root: ToastRoot,
+  Provider: ToastProvider,
+  Viewport: ToastViewport,
+  Title: ToastTitle,
+  Description: ToastDescription,
+  Close: ToastClose
+});

package/src/ui/tooltip.tsx

@@ -0,0 +1,262 @@
+import { Portal, Show } from "../dom/control-flow";
+import type { Child } from "../dom/render";
+import { onCleanup, type ReadonlySignal } from "../signals";
+import { createContext, useContext } from "../signals/context";
+import { createControllableSignal, createId } from "./utils";
+
+export interface TooltipContextValue {
+  open: ReadonlySignal<boolean>;
+  setOpen: (open: boolean) => void;
+  openDelay: number;
+  closeDelay: number;
+  tooltipId: string;
+  triggerRef: { current: HTMLElement | null };
+}
+
+export const TooltipContext = createContext<TooltipContextValue | null>(null);
+
+export function useTooltipContext(): TooltipContextValue | null {
+  return useContext(TooltipContext);
+}
+
+export interface TooltipProps {
+  open?: () => boolean | undefined;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  openDelay?: number;
+  closeDelay?: number;
+  content?: Child | (() => Child);
+  side?: "top" | "bottom" | "left" | "right";
+  triggerClass?: any;
+  triggerAs?: string;
+  contentClass?: any;
+  contentStyle?: any;
+  portalled?: boolean;
+  children?: Child | (() => Child);
+}
+
+export function TooltipRoot(props: TooltipProps): Child {
+  const [open, setOpen] = createControllableSignal<boolean>({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+
+  const tooltipId = createId("tooltip");
+  const triggerRef: { current: HTMLElement | null } = { current: null };
+
+  const ctx: TooltipContextValue = {
+    open,
+    setOpen,
+    openDelay: props.openDelay ?? 150,
+    closeDelay: props.closeDelay ?? 100,
+    tooltipId,
+    triggerRef
+  };
+
+  if (props.content !== undefined) {
+    return TooltipContext.Provider({
+      value: ctx,
+      children: () => (
+        <span
+          class="visage-tooltip-root"
+          style={{ position: "relative", display: "inline-flex", alignItems: "center" }}
+        >
+          <TooltipTrigger
+            as={props.triggerAs ?? "button"}
+            class={props.triggerClass}
+            style={{
+              background: "transparent",
+              border: "none",
+              padding: 0,
+              display: "inline-flex",
+              alignItems: "center",
+              cursor: "help"
+            }}
+          >
+            {typeof props.children === "function" ? props.children() : props.children}
+          </TooltipTrigger>
+          <TooltipContent
+            side={props.side}
+            class={props.contentClass}
+            style={props.contentStyle}
+            portalled={props.portalled ?? false}
+          >
+            {typeof props.content === "function" ? props.content() : props.content}
+          </TooltipContent>
+        </span>
+      )
+    });
+  }
+
+  return TooltipContext.Provider({
+    value: ctx,
+    children: props.children
+  });
+}
+
+export interface TooltipTriggerProps {
+  as?: string;
+  class?: any;
+  style?: any;
+  onMouseEnter?: (e: MouseEvent) => void;
+  onMouseLeave?: (e: MouseEvent) => void;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+  children: Child | (() => Child);
+  [key: string]: any;
+}
+
+export function TooltipTrigger(props: TooltipTriggerProps): Child {
+  const ctx = useContext(TooltipContext);
+  let openTimer: any = null;
+  let closeTimer: any = null;
+
+  const clearTimers = () => {
+    if (openTimer) clearTimeout(openTimer);
+    if (closeTimer) clearTimeout(closeTimer);
+    openTimer = null;
+    closeTimer = null;
+  };
+
+  const handleMouseEnter = (e: MouseEvent) => {
+    if (props.onMouseEnter) props.onMouseEnter(e);
+    clearTimers();
+    if (!ctx) return;
+    if (ctx.openDelay > 0) {
+      openTimer = setTimeout(() => ctx.setOpen(true), ctx.openDelay);
+    } else {
+      ctx.setOpen(true);
+    }
+  };
+
+  const handleMouseLeave = (e: MouseEvent) => {
+    if (props.onMouseLeave) props.onMouseLeave(e);
+    clearTimers();
+    if (!ctx) return;
+    if (ctx.closeDelay > 0) {
+      closeTimer = setTimeout(() => ctx.setOpen(false), ctx.closeDelay);
+    } else {
+      ctx.setOpen(false);
+    }
+  };
+
+  const handleFocus = (e: FocusEvent) => {
+    if (props.onFocus) props.onFocus(e);
+    clearTimers();
+    ctx?.setOpen(true);
+  };
+
+  const handleBlur = (e: FocusEvent) => {
+    if (props.onBlur) props.onBlur(e);
+    clearTimers();
+    ctx?.setOpen(false);
+  };
+
+  onCleanup(clearTimers);
+
+  const {
+    as: Tag = "button",
+    children,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    class: className,
+    style,
+    ...rest
+  } = props;
+
+  return (
+    <Tag
+      ref={(el: HTMLElement | null) => {
+        if (ctx) ctx.triggerRef.current = el;
+      }}
+      type={Tag === "button" ? "button" : undefined}
+      tabIndex={Tag === "button" ? undefined : 0}
+      aria-describedby={ctx?.tooltipId}
+      data-state={() => (ctx?.open() ? "open" : "closed")}
+      class={className}
+      style={{ display: "inline-flex", alignItems: "center", ...style }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+}
+
+export interface TooltipPortalProps {
+  mount?: HTMLElement | null;
+  children: Child | (() => Child);
+}
+
+export function TooltipPortal(props: TooltipPortalProps): Child {
+  return <Portal mount={props.mount}>{props.children}</Portal>;
+}
+
+export interface TooltipContentProps {
+  forceMount?: boolean;
+  portalled?: boolean;
+  mount?: HTMLElement | null;
+  as?: string;
+  class?: any;
+  style?: any;
+  children: Child | (() => Child);
+  [key: string]: any;
+}
+
+export function TooltipContent(props: TooltipContentProps): Child {
+  const ctx = useContext(TooltipContext);
+  const isOpen = () => (ctx ? ctx.open() : false);
+
+  const {
+    forceMount,
+    as: Tag = "div",
+    children,
+    class: className,
+    style,
+    portalled = true,
+    mount,
+    ...rest
+  } = props;
+
+  const content = forceMount ? (
+    <Tag
+      id={ctx?.tooltipId}
+      role="tooltip"
+      data-state={() => (isOpen() ? "open" : "closed")}
+      hidden={() => !isOpen()}
+      class={className}
+      style={style}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  ) : (
+    <Show when={isOpen}>
+      <Tag
+        id={ctx?.tooltipId}
+        role="tooltip"
+        data-state="open"
+        class={className}
+        style={style}
+        {...rest}
+      >
+        {children}
+      </Tag>
+    </Show>
+  );
+
+  return portalled ? <Portal mount={mount}>{content}</Portal> : content;
+}
+
+export const Tooltip = Object.assign(TooltipRoot, {
+  Root: TooltipRoot,
+  Trigger: TooltipTrigger,
+  Portal: TooltipPortal,
+  Content: TooltipContent
+});

package/src/ui/utils.ts

@@ -0,0 +1,110 @@
+import { computed, type ReadonlySignal, signal } from "../signals";
+
+let idCounter = 0;
+
+/**
+ * Generate a unique, deterministic ID for ARIA attributes
+ */
+export function createId(prefix = "visage"): string {
+  return `${prefix}-${++idCounter}`;
+}
+
+/**
+ * Helper for components that support both controlled and uncontrolled signal/value patterns
+ */
+export function createControllableSignal<T>(options: {
+  value?: () => T | undefined;
+  defaultValue?: T;
+  onChange?: (value: T) => void;
+}): [ReadonlySignal<T>, (next: T | ((prev: T) => T)) => void] {
+  const isControlled = typeof options.value === "function";
+  const internal = signal<T>(options.defaultValue as T, { internal: true });
+
+  const getter = computed<T>(
+    () => {
+      if (isControlled) {
+        const externalVal = options.value!();
+        if (externalVal !== undefined) return externalVal;
+      }
+      return internal();
+    },
+    { internal: true }
+  );
+
+  const setter = (next: T | ((prev: T) => T)) => {
+    const currentVal = getter();
+    const nextVal = typeof next === "function" ? (next as (prev: T) => T)(currentVal) : next;
+
+    if (!isControlled) {
+      internal.set(nextVal);
+    }
+    if (options.onChange && nextVal !== currentVal) {
+      options.onChange(nextVal);
+    }
+  };
+
+  return [getter, setter];
+}
+
+/**
+ * Setup a focus trap inside a container element
+ */
+export function trapFocus(container: HTMLElement, event: KeyboardEvent) {
+  if (event.key !== "Tab") return;
+
+  const focusables = container.querySelectorAll<HTMLElement>(
+    'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+  );
+
+  if (focusables.length === 0) {
+    event.preventDefault();
+    return;
+  }
+
+  const first = focusables[0]!;
+  const last = focusables[focusables.length - 1]!;
+
+  if (event.shiftKey) {
+    if (document.activeElement === first) {
+      last.focus();
+      event.preventDefault();
+    }
+  } else {
+    if (document.activeElement === last) {
+      first.focus();
+      event.preventDefault();
+    }
+  }
+}
+
+/**
+ * Listen for click outside a target element
+ */
+export function onClickOutside(
+  elements: Array<HTMLElement | null | undefined> | HTMLElement | null | undefined,
+  handler: (event: MouseEvent | TouchEvent) => void
+): () => void {
+  const listener = (event: MouseEvent | TouchEvent) => {
+    const target = event.target as Node | null;
+    if (!target) return;
+
+    const list = Array.isArray(elements) ? elements : [elements];
+    const isInside = list.some((el) => el?.contains(target));
+
+    if (!isInside) {
+      handler(event);
+    }
+  };
+
+  if (typeof document !== "undefined") {
+    document.addEventListener("mousedown", listener, true);
+    document.addEventListener("touchstart", listener, true);
+  }
+
+  return () => {
+    if (typeof document !== "undefined") {
+      document.removeEventListener("mousedown", listener, true);
+      document.removeEventListener("touchstart", listener, true);
+    }
+  };
+}

package/src/virtual/index.ts

@@ -0,0 +1,12 @@
+export {
+  VirtualGrid,
+  type VirtualGridProps,
+  VirtualList,
+  type VirtualListProps
+} from "./virtual-list";
+export {
+  createVirtualizer,
+  type VirtualItem,
+  type Virtualizer,
+  type VirtualizerOptions
+} from "./virtualizer";