@enderfall/ui 0.1.0 → 0.1.4

package/src/components/Dropdown.tsx

@@ -0,0 +1,570 @@
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { Button } from "./Button";
+
+export type HeaderMenuItem = {
+  id: string;
+  label: string;
+  content: ReactNode;
+};
+
+export type DropdownUserItem = {
+  id?: string;
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  className?: string;
+  title?: string;
+  variant?: "default" | "theme-preview";
+};
+
+export type DropdownUserListItem = {
+  id?: string;
+  label: string;
+  onClick: () => void;
+  onEdit?: () => void;
+  onDelete?: () => void;
+  disabled?: boolean;
+  className?: string;
+  title?: string;
+  avatarUrl?: string | null;
+  avatarFallback?: string;
+  subtitle?: string;
+};
+
+export type DropdownBookmarkOption = {
+  value: string;
+  label: string;
+  meta?: unknown;
+  className?: string;
+};
+
+export type DropdownBookmarkSection = {
+  label?: string;
+  options: DropdownBookmarkOption[];
+};
+
+type HeaderVariantProps = {
+  variant: "header";
+  menus: HeaderMenuItem[];
+  menuOpen: string | null;
+  onOpenMenu: (id: string) => void;
+  onCloseMenu: () => void;
+};
+
+type UserVariantProps = {
+  variant: "user";
+  name: string;
+  avatarUrl?: string | null;
+  avatarUrlFallback?: string | null;
+  avatarAlt?: string;
+  avatarFallback?: string;
+  items: DropdownUserItem[];
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+
+type UserListVariantProps = {
+  variant: "user-list";
+  name: string;
+  avatarUrl?: string | null;
+  avatarUrlFallback?: string | null;
+  avatarAlt?: string;
+  avatarFallback?: string;
+  items: DropdownUserListItem[];
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  emptyLabel?: string;
+  emptyClassName?: string;
+};
+
+type BookmarkVariantProps = {
+  variant: "bookmark";
+  label?: string;
+  layout?: "row" | "field";
+  value: string;
+  triggerLabel?: string;
+  placeholder?: string;
+  sections: DropdownBookmarkSection[];
+  onChange: (value: string, option?: DropdownBookmarkOption) => void;
+  renderTriggerIcon?: ReactNode;
+  renderItemIcon?: (option: DropdownBookmarkOption) => ReactNode;
+  caret?: ReactNode;
+  emptyLabel?: string;
+  emptyClassName?: string;
+};
+
+type DropdownProps =
+  | HeaderVariantProps
+  | UserVariantProps
+  | UserListVariantProps
+  | BookmarkVariantProps;
+
+const DefaultChevron = ({ open }: { open: boolean }) => (
+  <span className={`chevron ${open ? "open" : ""}`} aria-hidden="true">
+    <svg viewBox="0 0 24 24">
+      <path
+        d="M6 9l6 6 6-6"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  </span>
+);
+
+const DefaultCaret = () => (
+  <svg viewBox="0 0 24 24" aria-hidden="true">
+    <path
+      d="M6 9l6 6 6-6"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const IconEdit = () => (
+  <svg viewBox="0 0 24 24" aria-hidden="true">
+    <path
+      d="M4 20l4.5-1 9.4-9.4a1.8 1.8 0 0 0 0-2.6l-1-1a1.8 1.8 0 0 0-2.6 0L4.9 15.4 4 20z"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M13.5 6.5l4 4"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const IconTrash = () => (
+  <svg viewBox="0 0 24 24" aria-hidden="true">
+    <path
+      d="M4 7h16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7 7l1 12a1 1 0 0 0 1 .9h6a1 1 0 0 0 1-.9l1-12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const Dropdown = (props: DropdownProps) => {
+  const closeTimerRef = useRef<number | null>(null);
+  const closeDelayMs = 160;
+
+  useEffect(() => {
+    return () => {
+      if (closeTimerRef.current !== null) {
+        window.clearTimeout(closeTimerRef.current);
+      }
+    };
+  }, []);
+
+  const cancelScheduledClose = () => {
+    if (closeTimerRef.current !== null) {
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  };
+
+  if (props.variant === "header") {
+    const scheduleClose = () => {
+      cancelScheduledClose();
+      closeTimerRef.current = window.setTimeout(() => {
+        props.onCloseMenu();
+      }, closeDelayMs);
+    };
+
+    return (
+      <div className="ef-menu-bar">
+        {props.menus.map((menu) => (
+          <div
+            key={menu.id}
+            className="ef-menu-group"
+            data-open={props.menuOpen === menu.id ? "true" : "false"}
+            onMouseEnter={() => {
+              cancelScheduledClose();
+              props.onOpenMenu(menu.id);
+            }}
+            onMouseLeave={scheduleClose}
+          >
+            <button
+              className="ef-menu-button"
+              type="button"
+              data-open={props.menuOpen === menu.id ? "true" : "false"}
+            >
+              {menu.label}
+            </button>
+            {props.menuOpen === menu.id ? (
+              <div
+                className="ef-menu-popover"
+                data-open="true"
+                onMouseEnter={() => {
+                  cancelScheduledClose();
+                  props.onOpenMenu(menu.id);
+                }}
+                onMouseLeave={scheduleClose}
+              >
+                {menu.content}
+              </div>
+            ) : null}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (props.variant === "user" || props.variant === "user-list") {
+    const [internalOpen, setInternalOpen] = useState(false);
+    const [avatarState, setAvatarState] = useState<"primary" | "fallback" | "none">("primary");
+    const ref = useRef<HTMLDivElement | null>(null);
+    const isOpen = props.open ?? internalOpen;
+
+    useEffect(() => {
+      setAvatarState("primary");
+    }, [props.avatarUrl, props.avatarUrlFallback]);
+
+    useEffect(() => {
+      if (!isOpen) return;
+      const handlePointer = (event: PointerEvent) => {
+        if (!ref.current) return;
+        if (ref.current.contains(event.target as Node)) return;
+        if (props.open === undefined) {
+          setInternalOpen(false);
+        }
+        props.onOpenChange?.(false);
+      };
+      window.addEventListener("pointerdown", handlePointer);
+      return () => window.removeEventListener("pointerdown", handlePointer);
+    }, [isOpen, props.open, props.onOpenChange]);
+
+    const setOpen = (next: boolean) => {
+      if (props.open === undefined) {
+        setInternalOpen(next);
+      }
+      props.onOpenChange?.(next);
+    };
+
+    const fallback = props.avatarFallback ?? props.name.slice(0, 1).toUpperCase();
+    const primaryAvatar = props.avatarUrl ?? null;
+    const fallbackAvatar = props.avatarUrlFallback ?? null;
+    const currentAvatar =
+      avatarState === "primary"
+        ? primaryAvatar
+        : avatarState === "fallback"
+          ? fallbackAvatar
+          : null;
+
+    const renderUserListItems = () => {
+      if (props.variant !== "user-list") {
+        return props.items.map((item, index) => {
+          const key = item.id ?? `${item.label}-${index}`;
+          if (item.variant === "theme-preview") {
+            return (
+              <Button
+                key={key}
+                type="button"
+                variant="primary"
+                className={["theme-preview", item.className].filter(Boolean).join(" ")}
+                onClick={() => {
+                  item.onClick();
+                  setOpen(false);
+                }}
+                disabled={item.disabled}
+                title={item.title}
+              >
+                {item.label}
+              </Button>
+            );
+          }
+          return (
+            <button
+              key={key}
+              className={["dropdown-item", item.className].filter(Boolean).join(" ")}
+              type="button"
+              onClick={() => {
+                item.onClick();
+                setOpen(false);
+              }}
+              disabled={item.disabled}
+              title={item.title}
+            >
+              {item.label}
+            </button>
+          );
+        });
+      }
+
+      if (!props.items.length) {
+        return (
+          <div className={["dropdown-empty", props.emptyClassName].filter(Boolean).join(" ")}>
+            {props.emptyLabel ?? "No items."}
+          </div>
+        );
+      }
+
+      return props.items.map((item, index) => {
+        const fallback = item.avatarFallback ?? item.label.slice(0, 1).toUpperCase();
+        const isDisabled = !!item.disabled;
+        return (
+          <div
+            key={item.id ?? `${item.label}-${index}`}
+            className={[
+              "dropdown-item",
+              "dropdown-item-rich",
+              item.className,
+              isDisabled ? "is-disabled" : "",
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            role="button"
+            tabIndex={isDisabled ? -1 : 0}
+            aria-disabled={isDisabled ? "true" : undefined}
+            onClick={() => {
+              if (isDisabled) return;
+              item.onClick();
+              setOpen(false);
+            }}
+            onKeyDown={(event) => {
+              if (isDisabled) return;
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                item.onClick();
+                setOpen(false);
+              }
+            }}
+            title={item.title}
+          >
+            <span className="dropdown-avatar">
+              {item.avatarUrl ? (
+                <img
+                  src={item.avatarUrl}
+                  alt={item.label}
+                  loading="lazy"
+                  decoding="async"
+                  referrerPolicy="no-referrer"
+                  crossOrigin="anonymous"
+                />
+              ) : (
+                <span className="dropdown-avatar-fallback">{fallback}</span>
+              )}
+            </span>
+            <span className="dropdown-item-text">
+              <span className="dropdown-item-label">{item.label}</span>
+              {item.subtitle ? (
+                <span className="dropdown-item-subtitle">{item.subtitle}</span>
+              ) : null}
+            </span>
+            {item.onEdit || item.onDelete ? (
+              <span className="dropdown-item-actions">
+                {item.onEdit ? (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    className="dropdown-action"
+                    aria-label={`Edit ${item.label}`}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      item.onEdit?.();
+                      setOpen(false);
+                    }}
+                  >
+                    <IconEdit />
+                  </Button>
+                ) : null}
+                {item.onDelete ? (
+                  <Button
+                    type="button"
+                    variant="delete"
+                    className="dropdown-action is-delete"
+                    aria-label={`Delete ${item.label}`}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      item.onDelete?.();
+                    }}
+                  >
+                    <IconTrash />
+                  </Button>
+                ) : null}
+              </span>
+            ) : null}
+          </div>
+        );
+      });
+    };
+
+    return (
+      <div className="user-section" ref={ref} data-open={isOpen ? "true" : "false"}>
+        <button className="user-button" onClick={() => setOpen(!isOpen)} type="button">
+          <span className="avatar">
+            {currentAvatar ? (
+              <img
+                src={currentAvatar}
+                alt={props.avatarAlt ?? props.name}
+                loading="eager"
+                decoding="async"
+                referrerPolicy="no-referrer"
+                crossOrigin="anonymous"
+                onError={() => {
+                  if (avatarState === "primary" && fallbackAvatar) {
+                    setAvatarState("fallback");
+                  } else {
+                    setAvatarState("none");
+                  }
+                }}
+              />
+            ) : (
+              <span className="avatar-fallback">{fallback}</span>
+            )}
+          </span>
+          <span className="user-name">{props.name}</span>
+          <DefaultChevron open={isOpen} />
+        </button>
+        <div className="dropdown" data-open={isOpen ? "true" : "false"}>
+          {renderUserListItems()}
+        </div>
+      </div>
+    );
+  }
+
+  const {
+    label,
+    layout = "row",
+    value,
+    placeholder = "Select a saved connection",
+    sections,
+    onChange,
+    renderTriggerIcon,
+    renderItemIcon,
+    triggerLabel,
+    caret,
+    emptyLabel = "No saved connections.",
+    emptyClassName,
+  } = props;
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement | null>(null);
+  const options = useMemo(
+    () => sections.flatMap((section) => section.options),
+    [sections]
+  );
+  const active = options.find((item) => item.value === value) ?? null;
+
+  useEffect(() => {
+    if (!open) return;
+    const handlePointer = (event: PointerEvent) => {
+      if (!ref.current) return;
+      if (ref.current.contains(event.target as Node)) return;
+      setOpen(false);
+    };
+    window.addEventListener("pointerdown", handlePointer);
+    return () => window.removeEventListener("pointerdown", handlePointer);
+  }, [open]);
+
+  const handleEllipsisTooltip = (event: React.MouseEvent<HTMLElement>) => {
+    const target = event.currentTarget;
+    if (target.scrollWidth > target.clientWidth) {
+      target.setAttribute("title", target.textContent ?? "");
+    } else {
+      target.removeAttribute("title");
+    }
+  };
+
+  const clearEllipsisTooltip = (event: React.MouseEvent<HTMLElement>) => {
+    event.currentTarget.removeAttribute("title");
+  };
+
+  const dropdownBody = (
+    <div className={`bookmark-dropdown ${open ? "open" : ""}`}>
+      <button
+        className="bookmark-trigger"
+        onClick={() => setOpen((prev) => !prev)}
+        type="button"
+      >
+        {renderTriggerIcon ? <span className="bookmark-icon">{renderTriggerIcon}</span> : null}
+        <span className="bookmark-text">
+          {triggerLabel ?? (active ? active.label : placeholder)}
+        </span>
+        <span className="bookmark-caret">{caret ?? <DefaultCaret />}</span>
+      </button>
+      {open ? (
+        <div className="bookmark-menu">
+          {options.length === 0 ? (
+            <div className={["bookmark-empty", emptyClassName].filter(Boolean).join(" ")}>
+              {emptyLabel}
+            </div>
+          ) : (
+            sections.map((section) => (
+              <div key={section.label ?? "options"}>
+                {section.label ? <div className="bookmark-group">{section.label}</div> : null}
+                {section.options.map((item) => (
+                  <button
+                    key={item.value}
+                    className={[
+                      "bookmark-item",
+                      item.value === value ? "active" : "",
+                      item.className,
+                    ]
+                      .filter(Boolean)
+                      .join(" ")}
+                    type="button"
+                    onClick={() => {
+                      onChange(item.value, item);
+                      setOpen(false);
+                    }}
+                  >
+                    {renderItemIcon ? (
+                      <span className="bookmark-icon">{renderItemIcon(item)}</span>
+                    ) : null}
+                    <span
+                      className="bookmark-text"
+                      onMouseEnter={handleEllipsisTooltip}
+                      onMouseLeave={clearEllipsisTooltip}
+                    >
+                      {item.label}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            ))
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+
+  return (
+    <div className={layout === "row" ? "bookmark-row" : "bookmark-field"} ref={ref}>
+      {layout === "row" && label ? <div className="bookmark-label">{label}</div> : null}
+      {dropdownBody}
+    </div>
+  );
+};

package/src/components/FloatingFooter.css

@@ -0,0 +1,49 @@
+.ef-floating-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  width: min(860px, calc(100vw - 24px));
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: max(12px, env(safe-area-inset-bottom));
+  z-index: 120;
+  backdrop-filter: blur(12px);
+  font-family: var(--font-main, "Inter", "Segoe UI", Arial, sans-serif);
+}
+
+.ef-footer-copy {
+  display: grid;
+  gap: 2px;
+}
+
+.ef-footer-title {
+  font-weight: 700;
+  color: var(--text-strong);
+  letter-spacing: 0.03em;
+}
+
+.ef-footer-subtitle {
+  color: var(--text-muted);
+  font-size: 0.82rem;
+}
+
+.ef-footer-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+@media (max-width: 760px) {
+  .ef-floating-footer {
+    flex-direction: column;
+    align-items: stretch;
+    width: calc(100vw - 14px);
+    bottom: max(8px, env(safe-area-inset-bottom));
+  }
+
+  .ef-footer-actions {
+    justify-content: flex-end;
+  }
+}

package/src/components/FloatingFooter.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import { Panel } from "./Panel";
+
+type FloatingFooterProps = {
+  title?: string;
+  subtitle?: string;
+  actions?: ReactNode;
+  className?: string;
+};
+
+export const FloatingFooter = ({
+  title = "Quick Actions",
+  subtitle,
+  actions,
+  className,
+}: FloatingFooterProps) => {
+  const classes = ["ef-floating-footer", className].filter(Boolean).join(" ");
+  return (
+    <Panel variant="full" borderWidth={2} className={classes}>
+      <div className="ef-footer-copy">
+        <div className="ef-footer-title">{title}</div>
+        {subtitle ? <div className="ef-footer-subtitle">{subtitle}</div> : null}
+      </div>
+      <div className="ef-footer-actions">{actions}</div>
+    </Panel>
+  );
+};

package/src/components/FormField.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+
+type FormFieldProps = {
+  label: string;
+  htmlFor?: string;
+  helper?: string;
+  error?: string;
+  required?: boolean;
+  children: ReactNode;
+};
+
+export const FormField = ({
+  label,
+  htmlFor,
+  helper,
+  error,
+  required,
+  children,
+}: FormFieldProps) => (
+  <div className={["ef-field", error ? "has-error" : ""].filter(Boolean).join(" ")}>
+    <label className="ef-field-label" htmlFor={htmlFor}>
+      <span>{label}</span>
+      {required ? <span className="ef-field-required">*</span> : null}
+    </label>
+    {children}
+    {helper ? <div className="ef-field-helper">{helper}</div> : null}
+    {error ? <div className="ef-field-error">{error}</div> : null}
+  </div>
+);