@enderfall/ui 0.1.0 → 0.1.4

package/src/components/Modal.css

@@ -0,0 +1,282 @@
+.ef-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(6, 10, 14, 0.6);
+  backdrop-filter: blur(2px);
+  display: grid;
+  place-items: center;
+  z-index: 200;
+  opacity: 1;
+  transition: opacity 220ms ease;
+}
+
+.ef-modal-backdrop.is-entering {
+  opacity: 0;
+}
+
+.ef-modal-backdrop.is-open {
+  opacity: 1;
+}
+
+.ef-modal {
+  width: min(520px, 90vw);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-height: min(90dvh, 860px);
+  overflow: hidden;
+  position: relative;
+  isolation: isolate;
+  transform-origin: calc(50% + var(--ef-modal-enter-x, 0px)) calc(50% + var(--ef-modal-enter-y, 0px));
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale(1);
+  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1), opacity 220ms ease;
+  will-change: transform, opacity;
+}
+
+.ef-modal.is-entering {
+  opacity: 0;
+  transform: translate3d(var(--ef-modal-enter-x, 0px), var(--ef-modal-enter-y, 0px), 0) scale(0.965);
+}
+
+.ef-modal.is-open {
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale(1);
+}
+
+.ef-modal-backdrop.is-exiting {
+  opacity: 0;
+}
+
+.ef-modal.is-exiting {
+  opacity: 0;
+  transform: translate3d(0, 42px, 0) scale(0.985);
+}
+
+.ef-modal--wide {
+  width: min(760px, 92vw);
+}
+
+.ef-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ef-modal-header-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ef-modal-title {
+  font-size: 1.2rem;
+}
+
+.ef-modal-subtitle {
+  color: var(--text-soft);
+}
+
+.ef-modal-actions {
+  display: grid;
+  gap: 14px;
+  margin-top: 0;
+  position: sticky;
+  bottom: 0;
+  z-index: 50;
+  padding-top: 8px;
+  padding-bottom: 4px;
+}
+
+.ef-modal-body {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  gap: 12px;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+.ef-modal-body > :not(.ef-modal-actions) {
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.ef-modal-body > :not(.ef-modal-actions) * {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.ef-modal-body > .ef-modal-actions {
+  position: relative;
+  bottom: auto;
+  margin-top: 0;
+  z-index: 80;
+}
+
+.ef-modal-body > :not(.ef-modal-actions)::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.ef-modal-body > :not(.ef-modal-actions) *::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.ef-modal-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+}
+
+.ef-modal-form label:not(.ef-toggle) {
+  display: grid;
+  gap: 6px;
+  font-size: 0.85rem;
+}
+
+.ef-modal-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.ef-modal-row-label {
+  font-size: 0.85rem;
+  color: var(--ef-field-label, var(--text-muted));
+  font-weight: 500;
+}
+
+.ef-modal-row-control {
+  flex: 1;
+  display: flex;
+}
+
+.ef-modal-row-control > * {
+  width: 100%;
+}
+
+.ef-modal-form .ef-toggle {
+  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: row;
+}
+
+.ef-modal-form .ef-toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.prefs-section .ef-toggle {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.prefs-section .ef-toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-direction: row;
+}
+
+.prefs-section {
+  display: grid;
+  gap: 10px;
+  padding: 12px;
+  border-radius: var(--ef-control-radius, 12px);
+  border: 1px solid var(--line);
+  background: var(--card);
+}
+
+.prefs-section-title {
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--text-muted);
+}
+
+.ef-modal-note {
+  color: var(--text-soft);
+  font-size: 0.85rem;
+}
+
+.ef-modal-close {
+  font-size: 1rem;
+}
+
+.ef-modal-user-dropdown .avatar {
+  display: none;
+}
+
+.ef-modal-user-dropdown .user-button {
+  min-height: 40px;
+  height: auto;
+  padding: 8px 12px;
+  gap: 8px;
+}
+
+.ef-modal-user-dropdown .user-section {
+  display: block;
+}
+
+.ef-modal-user-dropdown .user-button,
+.ef-modal-user-dropdown .dropdown {
+  width: 100%;
+}
+
+.ef-modal-user-dropdown .user-name {
+  max-width: 100%;
+}
+
+@media (max-width: 760px) {
+  .ef-modal-backdrop {
+    place-items: stretch;
+  }
+
+  .ef-modal,
+  .ef-modal--wide {
+    width: 100vw !important;
+    max-width: 100vw;
+    height: 100dvh;
+    min-height: 0;
+    max-height: 100dvh;
+    margin: 0;
+    gap: 12px;
+    border-radius: 0 !important;
+    border: 0 !important;
+    overflow: hidden;
+    padding-top: max(8px, env(safe-area-inset-top));
+    transform-origin: center bottom;
+    transition: transform 300ms cubic-bezier(0.2, 0.9, 0.3, 1), opacity 220ms ease;
+  }
+
+  .ef-modal-actions {
+    padding-bottom: max(8px, env(safe-area-inset-bottom));
+  }
+
+  .ef-modal.is-entering {
+    opacity: 0;
+    transform: translate3d(0, 36px, 0);
+  }
+
+  .ef-modal.is-open {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .ef-modal.is-exiting {
+    opacity: 0;
+    transform: translate3d(0, 100px, 0);
+  }
+}

package/src/components/Modal.tsx

@@ -0,0 +1,142 @@
+import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { Panel } from "./Panel";
+
+type ModalSize = "default" | "wide";
+
+const MODAL_TRANSITION_MS = 240;
+
+type ModalProps = {
+  isOpen: boolean;
+  title: string;
+  subtitle?: string;
+  size?: ModalSize;
+  onClose: () => void;
+  actions?: ReactNode;
+  headerActions?: ReactNode;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const Modal = ({
+  isOpen,
+  title,
+  subtitle,
+  size = "default",
+  onClose,
+  actions,
+  headerActions,
+  className,
+  children,
+}: ModalProps) => {
+  const reduceMotion =
+    typeof document !== "undefined" && document.documentElement.getAttribute("data-reduce-motion") === "true";
+  const transitionMs = reduceMotion ? 0 : MODAL_TRANSITION_MS;
+  const [isRendered, setIsRendered] = useState(isOpen);
+  const [isEntering, setIsEntering] = useState(false);
+  const [isExiting, setIsExiting] = useState(false);
+  const [enterOffset, setEnterOffset] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
+  const exitTimerRef = useRef<number | null>(null);
+  const enterFrameRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (exitTimerRef.current !== null) window.clearTimeout(exitTimerRef.current);
+      if (enterFrameRef.current !== null) window.cancelAnimationFrame(enterFrameRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      if (exitTimerRef.current !== null) {
+        window.clearTimeout(exitTimerRef.current);
+        exitTimerRef.current = null;
+      }
+
+      const activeElement = document.activeElement as HTMLElement | null;
+      const activeRect = activeElement?.getBoundingClientRect();
+      const sourceX = activeRect ? activeRect.left + activeRect.width / 2 : window.innerWidth / 2;
+      const sourceY = activeRect ? activeRect.top + activeRect.height / 2 : window.innerHeight - 56;
+      const centerX = window.innerWidth / 2;
+      const centerY = window.innerHeight / 2;
+
+      setEnterOffset({
+        x: (sourceX - centerX) * 0.18,
+        y: (sourceY - centerY) * 0.22,
+      });
+
+      setIsRendered(true);
+      setIsExiting(false);
+      setIsEntering(!reduceMotion);
+
+      if (reduceMotion) return;
+
+      if (enterFrameRef.current !== null) window.cancelAnimationFrame(enterFrameRef.current);
+      enterFrameRef.current = window.requestAnimationFrame(() => {
+        enterFrameRef.current = window.requestAnimationFrame(() => {
+          setIsEntering(false);
+          enterFrameRef.current = null;
+        });
+      });
+      return;
+    }
+
+    if (!isRendered) return;
+    if (reduceMotion) {
+      setIsEntering(false);
+      setIsExiting(false);
+      setIsRendered(false);
+      return;
+    }
+
+    setIsEntering(false);
+    setIsExiting(true);
+
+    if (exitTimerRef.current !== null) window.clearTimeout(exitTimerRef.current);
+    exitTimerRef.current = window.setTimeout(() => {
+      setIsRendered(false);
+      setIsExiting(false);
+      exitTimerRef.current = null;
+    }, transitionMs);
+  }, [isOpen, isRendered, reduceMotion, transitionMs]);
+
+  if (!isRendered) return null;
+
+  const sizeClass = size === "wide" ? "ef-modal--wide" : "";
+  const modalStateClass = isExiting ? "is-exiting" : isEntering ? "is-entering" : "is-open";
+  const backdropClasses = ["ef-modal-backdrop", modalStateClass].filter(Boolean).join(" ");
+  const classes = ["ef-modal", sizeClass, modalStateClass, className].filter(Boolean).join(" ");
+  const modalStyle = {
+    "--ef-modal-enter-x": `${enterOffset.x}px`,
+    "--ef-modal-enter-y": `${enterOffset.y}px`,
+  } as CSSProperties;
+
+  return (
+    <div className={backdropClasses} onClick={onClose}>
+      <Panel
+        variant="card"
+        borderWidth={2}
+        className={classes}
+        style={modalStyle}
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="ef-modal-header">
+          <div className="ef-modal-title">{title}</div>
+          <div className="ef-modal-header-actions">
+            {headerActions}
+            <button
+              className="icon-action small ef-modal-close"
+              onClick={onClose}
+              type="button"
+              aria-label="Close"
+            >
+              {"\u00D7"}
+            </button>
+          </div>
+        </div>
+        {subtitle ? <div className="ef-modal-subtitle">{subtitle}</div> : null}
+        {children ? <div className="ef-modal-body">{children}</div> : null}
+        {actions ? <div className="ef-modal-actions">{actions}</div> : null}
+      </Panel>
+    </div>
+  );
+};

package/src/components/Panel.css

@@ -0,0 +1,71 @@
+.ef-panel {
+  border: var(--ef-panel-border-width) solid transparent;
+}
+
+.ef-panel--border-1 {
+  --ef-panel-border-width: 1px;
+}
+
+.ef-panel--border-2 {
+  --ef-panel-border-width: 2px;
+}
+
+.ef-panel--card {
+  padding: 24px;
+  border-radius: var(--radius);
+  background: var(--card);
+  box-shadow: var(--shadow);
+  border-color: var(--line);
+  display: grid;
+  gap: 16px;
+}
+
+:root[data-theme="galaxy"] .ef-panel--card,
+:root[data-theme="plain-dark"] .ef-panel--card,
+:root[data-theme="light"] .ef-panel--card,
+:root[data-theme="plain-light"] .ef-panel--card {
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient) border-box;
+  border-color: transparent;
+}
+
+.ef-panel--highlight {
+  padding: 14px 16px;
+  border-radius: 16px;
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient) border-box;
+  color: var(--text-strong);
+  display: grid;
+  gap: 6px;
+}
+
+.ef-panel--full {
+  padding: 18px 0px;
+  border-radius: 24px;
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient) border-box;
+  border-color: transparent;
+  box-shadow: var(--shadow);
+  display: flex;
+}
+
+.ef-panel--header {
+  padding: 8px 12px;
+  border-radius: 18px;
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient) border-box;
+  border-color: transparent;
+  box-shadow: var(--shadow);
+  display: flex;
+}
+
+:root[data-theme="atelier"] .ef-panel--card,
+:root[data-theme="atelier"] .ef-panel--highlight,
+:root[data-theme="atelier"] .ef-panel--full,
+:root[data-theme="atelier"] .ef-panel--header {
+  border-radius: 0;
+}

package/src/components/Panel.tsx

@@ -0,0 +1,31 @@
+import { forwardRef, type HTMLAttributes } from "react";
+
+type PanelVariant = "card" | "highlight" | "full" | "header";
+type BorderWidth = 1 | 2;
+
+type PanelProps = HTMLAttributes<HTMLDivElement> & {
+  variant?: PanelVariant;
+  borderWidth?: BorderWidth;
+};
+
+export const Panel = forwardRef<HTMLDivElement, PanelProps>(
+  ({ variant = "card", borderWidth = 1, className, children, ...rest }, ref) => {
+    const variantClass =
+      variant === "highlight"
+        ? "ef-panel--highlight"
+        : variant === "header"
+          ? "ef-panel--header"
+        : variant === "full"
+          ? "ef-panel--full"
+          : "ef-panel--card";
+    const borderClass = borderWidth === 2 ? "ef-panel--border-2" : "ef-panel--border-1";
+    const classes = ["ef-panel", variantClass, borderClass, className].filter(Boolean).join(" ");
+    return (
+      <div ref={ref} className={classes} {...rest}>
+        {children}
+      </div>
+    );
+  }
+);
+
+Panel.displayName = "Panel";

package/src/components/PreferencesModal.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+import { Button } from "./Button";
+import { Dropdown } from "./Dropdown";
+import { Toggle } from "./Toggle";
+import { Modal } from "./Modal";
+
+type ThemeOption = { value: string; label: string };
+
+type PreferencesModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  themeMode: string;
+  onThemeChange: (value: string) => void;
+  themeOptions: ThemeOption[];
+  animationsEnabled: boolean;
+  onAnimationsChange: (enabled: boolean) => void;
+  note?: string;
+  children?: ReactNode;
+};
+
+export const PreferencesModal = ({
+  isOpen,
+  onClose,
+  themeMode,
+  onThemeChange,
+  themeOptions,
+  animationsEnabled,
+  onAnimationsChange,
+  note = "Syncs across all Enderfall apps.",
+  children,
+}: PreferencesModalProps) => {
+  const selectedTheme =
+    themeOptions.find((option) => option.value === themeMode) ?? themeOptions[0];
+  const dropdownLabel = selectedTheme?.label ?? "Select theme";
+  const dropdownItems = themeOptions.map((option) => ({
+    id: option.value,
+    label: option.label,
+    onClick: () => onThemeChange(option.value),
+    className: `theme-preview theme-preview--${option.value}`,
+    variant: "theme-preview" as const,
+  }));
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="Preferences" subtitle="Applies across Enderfall apps.">
+      <div className="ef-modal-form">
+        <label>
+          Theme
+          <div className="ef-modal-user-dropdown">
+            <Dropdown variant="user" name={dropdownLabel} items={dropdownItems} />
+          </div>
+        </label>
+        <Toggle
+          checked={animationsEnabled}
+          onChange={(event) => onAnimationsChange(event.target.checked)}
+          label="Enable animations"
+        />
+        {children}
+        {note ? <div className="ef-modal-note">{note}</div> : null}
+      </div>
+      <div className="ef-modal-actions">
+        <Button variant="primary" type="button" onClick={onClose}>
+          Close
+        </Button>
+      </div>
+    </Modal>
+  );
+};