@enderfall/ui 0.1.0 → 0.1.4

package/src/components/HeaderMenu.css

@@ -0,0 +1,280 @@
+.ef-menu-bar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  width: fit-content;
+}
+
+.ef-menu-group {
+  position: relative;
+}
+
+.ef-menu-button {
+  padding: 8px 18px;
+  border-radius: 8px;
+  background: rgba(15, 18, 28, 0.7);
+  box-shadow: none;
+  border: 2px solid transparent;
+  font-weight: 600;
+  color: rgba(238, 241, 246, 0.75);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+  cursor: pointer;
+}
+
+:root[data-theme="light"] .ef-menu-button,
+:root[data-theme="plain-light"] .ef-menu-button,
+:root[data-theme="galaxy"] .ef-menu-button,
+:root[data-theme="plain-dark"] .ef-menu-button,
+:root[data-theme="system"] .ef-menu-button {
+  background: rgba(15, 18, 28, 0.7);
+  border-radius: 8px;
+  border: 2px solid transparent;
+  padding: 8px 18px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  box-shadow: none;
+  color: rgba(238, 241, 246, 0.75);
+}
+
+.ef-menu-button:hover {
+  color: #eef1f6;
+  box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
+  transform: translateY(-1px);
+}
+
+:root[data-theme="light"] .ef-menu-button:hover,
+:root[data-theme="plain-light"] .ef-menu-button:hover,
+:root[data-theme="galaxy"] .ef-menu-button:hover,
+:root[data-theme="plain-dark"] .ef-menu-button:hover,
+:root[data-theme="system"] .ef-menu-button:hover {
+  color: #eef1f6;
+  box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
+  transform: translateY(-1px);
+}
+
+.ef-menu-button:focus-visible {
+  color: #eef1f6;
+  box-shadow: 0 0 20px rgba(124, 77, 255, 0.45);
+  transform: translateY(-1px);
+}
+
+.ef-menu-button[data-open="true"],
+.ef-menu-group[data-open="true"] > .ef-menu-button {
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient) border-box;
+  color: var(--text-strong);
+  box-shadow: 0 0 24px rgba(124, 77, 255, 0.6);
+}
+
+.ef-menu-popover {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  min-width: 180px;
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient-soft) border-box;
+  border-radius: var(--ef-control-radius, 12px);
+  border: 2px solid transparent;
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(12px);
+  padding: 6px;
+  z-index: 30;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.14s ease, transform 0.14s ease;
+  pointer-events: none;
+}
+
+.ef-menu-group:hover .ef-menu-popover,
+.ef-menu-popover:hover,
+.ef-menu-popover[data-open="true"] {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.ef-menu-divider {
+  height: 1px;
+  background: var(--menu-line);
+  margin: 6px 4px;
+}
+
+.ef-menu-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-align: left;
+  padding: 10px 14px;
+  border-radius: 8px;
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient) border-box;
+  font-weight: 600;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 6px;
+  border: 2px solid transparent;
+  color: var(--text-strong);
+  box-shadow: 0 0 16px rgba(124, 77, 255, 0.25);
+  cursor: pointer;
+}
+
+.ef-menu-icon {
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--menu-muted);
+}
+
+.ef-menu-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+:root[data-theme="light"] .ef-menu-item,
+:root[data-theme="plain-light"] .ef-menu-item,
+:root[data-theme="galaxy"] .ef-menu-item,
+:root[data-theme="plain-dark"] .ef-menu-item,
+:root[data-theme="system"] .ef-menu-item {
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient) border-box;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  padding: 10px 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  box-shadow: 0 0 16px rgba(124, 77, 255, 0.25);
+  color: var(--text-strong);
+}
+
+.ef-menu-item:last-child {
+  margin-bottom: 0;
+}
+
+.side-menu--header > .ef-menu-item {
+  margin-bottom: 0;
+}
+
+.ef-menu-item:hover {
+  box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
+  transform: translateY(-1px);
+}
+
+.ef-menu-group-title {
+  padding: 6px 10px 4px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  color: var(--menu-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.ef-menu-item.has-submenu {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.ef-menu-sub-caret {
+  color: var(--menu-muted);
+  display: inline-flex;
+  align-items: center;
+}
+
+.ef-menu-sub-caret svg {
+  width: 14px;
+  height: 14px;
+  transform: rotate(-90deg);
+}
+
+.ef-menu-item.has-submenu > span:first-child {
+  flex: 1;
+}
+
+.ef-menu-item-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  width: 100%;
+  background: transparent;
+  border: 1px solid transparent;
+  padding: 8px 10px;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+
+.ef-menu-sub {
+  position: absolute;
+  top: 0;
+  left: calc(100% + 6px);
+  min-width: 180px;
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient-soft) border-box;
+  border-radius: var(--ef-control-radius, 12px);
+  border: 2px solid transparent;
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(12px);
+  padding: 6px;
+  z-index: 40;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-4px);
+  transition: opacity 0.12s ease, transform 0.12s ease;
+  transition-delay: 0.12s;
+}
+
+.ef-menu-sub.ef-menu-sub--header {
+  margin-top: -6px;
+}
+
+.ef-menu-sub.ef-menu-sub--header .theme-preview {
+  margin-bottom: 6px;
+}
+
+.ef-menu-sub.ef-menu-sub--header .theme-preview:last-child {
+  margin-bottom: 0;
+}
+
+.ef-menu-sub::before {
+  content: "";
+  position: absolute;
+  left: -8px;
+  top: 0;
+  width: 8px;
+  height: 100%;
+}
+
+.ef-menu-item.has-submenu:hover .ef-menu-sub {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+  transition-delay: 0s;
+}
+
+.ef-menu-sub.is-open {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+  transition-delay: 0s;
+}
+

package/src/components/Input.css

@@ -0,0 +1,68 @@
+.ef-field {
+  display: grid;
+  gap: 6px;
+}
+
+.ef-field-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.85rem;
+  color: var(--ef-field-label);
+  font-weight: 500;
+}
+
+.ef-field-required {
+  color: var(--ef-field-required);
+  font-weight: 600;
+}
+
+.ef-field-helper {
+  font-size: 0.8rem;
+  color: var(--ef-field-helper);
+}
+
+.ef-field-error {
+  font-size: 0.8rem;
+  color: var(--ef-field-error);
+}
+
+.ef-input,
+.ef-textarea,
+.ef-select {
+  padding: 10px 18px;
+  border-radius: var(--ef-control-radius, 8px);
+  border: 2px solid transparent;
+  background:
+    linear-gradient(var(--ef-input-surface), var(--ef-input-surface)) padding-box,
+    var(--ef-input-border) border-box;
+  color: var(--ef-input-text);
+  font-size: 0.95rem;
+  font-family: inherit;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.ef-textarea {
+  resize: vertical;
+}
+
+.ef-input::placeholder,
+.ef-textarea::placeholder {
+  color: var(--ef-input-placeholder);
+}
+
+.ef-input:focus,
+.ef-textarea:focus,
+.ef-select:focus {
+  outline: none;
+  outline: 2px solid var(--ef-input-focus);
+  outline-offset: 2px;
+  box-shadow: var(--ef-input-shadow);
+}
+
+.ef-field.has-error .ef-input,
+.ef-field.has-error .ef-textarea,
+.ef-field.has-error .ef-select {
+  border-color: var(--ef-field-error);
+  box-shadow: none;
+}

package/src/components/Input.tsx

@@ -0,0 +1,23 @@
+import type { InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes } from "react";
+
+type BaseProps = {
+  className?: string;
+};
+
+type InputProps = InputHTMLAttributes<HTMLInputElement> & BaseProps;
+type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & BaseProps;
+type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & BaseProps;
+
+const cx = (...classes: Array<string | undefined>) => classes.filter(Boolean).join(" ");
+
+export const Input = ({ className, ...props }: InputProps) => (
+  <input {...props} className={cx("ef-input", className)} />
+);
+
+export const Textarea = ({ className, ...props }: TextareaProps) => (
+  <textarea {...props} className={cx("ef-textarea", className)} />
+);
+
+export const Select = ({ className, ...props }: SelectProps) => (
+  <select {...props} className={cx("ef-select", className)} />
+);

package/src/components/MainHeader.css

@@ -0,0 +1,167 @@
+.ef-main-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  margin: 0 0 28px;
+  backdrop-filter: blur(12px);
+  font-family: var(--font-main, "Inter", "Segoe UI", Arial, sans-serif);
+  position: relative;
+  z-index: 20;
+}
+
+.ef-header-left {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+.ef-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.ef-brand {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.ef-logo {
+  width: 46px;
+  height: 46px;
+}
+
+.ef-logo-fallback {
+  width: 46px;
+  height: 46px;
+  border-radius: 14px;
+  display: grid;
+  place-items: center;
+  background: var(--card);
+  border: 1px solid var(--card-border);
+  color: var(--text-strong);
+  font-weight: 700;
+}
+
+.ef-brand-name {
+  font-weight: 700;
+  font-size: 1rem;
+  letter-spacing: 0.04em;
+  color: var(--text-strong);
+}
+
+.ef-tagline {
+  color: var(--text-muted);
+  font-size: 0.8rem;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.icon-action {
+  position: relative;
+  border: 2px solid transparent;
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient) border-box;
+  color: var(--text-strong);
+  border-radius: 10px;
+  width: 42px;
+  height: 42px;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  box-shadow: var(--shadow, 0 24px 60px rgba(0, 0, 0, 0.35));
+}
+
+:root[data-theme="atelier"] .icon-action {
+  border-radius: 0;
+}
+
+.icon-action.small {
+  width: 36px;
+  height: 36px;
+  box-shadow: none;
+}
+
+.icon-action:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.icon-action.spin svg {
+  animation: spin 0.9s linear infinite;
+}
+
+.icon-badge {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  border-radius: 999px;
+  background: var(--accent-gold);
+  color: #090b12;
+  font-size: 0.65rem;
+  font-weight: 700;
+  display: grid;
+  place-items: center;
+}
+
+@media (max-width: 760px) {
+  .ef-main-header {
+    width: calc(100% + 28px);
+    max-width: none;
+    margin: 0;
+    margin-left: -14px;
+    margin-right: -14px;
+    padding: 4px 12px;
+    border-radius: 0 0 18px 18px;
+    z-index: 40;
+    gap: 10px;
+  }
+
+  .ef-main-header .ef-menu-bar {
+    display: none;
+  }
+
+  .ef-header-left {
+    width: auto;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+  }
+
+  .ef-header-actions {
+    width: auto;
+    justify-content: flex-end;
+    flex-wrap: nowrap;
+    gap: 8px;
+    flex-shrink: 0;
+    align-items: center;
+  }
+
+  .ef-brand {
+    min-width: 0;
+    gap: 10px;
+  }
+
+  .ef-brand > div {
+    display: none;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/components/MainHeader.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+import { Dropdown, type HeaderMenuItem } from "./Dropdown";
+import { Panel } from "./Panel";
+
+type MainHeaderProps = {
+  title?: string;
+  subtitle?: string;
+  logoSrc?: string;
+  menus: HeaderMenuItem[];
+  menuOpen: string | null;
+  onOpenMenu: (id: string) => void;
+  onCloseMenu: () => void;
+  actions?: ReactNode;
+};
+
+export const MainHeader = ({
+  title = "Enderfall",
+  subtitle = "Galaxy tools for creators",
+  logoSrc,
+  menus,
+  menuOpen,
+  onOpenMenu,
+  onCloseMenu,
+  actions,
+}: MainHeaderProps) => {
+  return (
+    <Panel variant="header" borderWidth={2} className="ef-main-header">
+      <div className="ef-header-left">
+        <div className="ef-brand">
+          {logoSrc ? (
+            <img src={logoSrc} alt={title} className="ef-logo" />
+          ) : (
+            <div className="ef-logo-fallback">E</div>
+          )}
+          <div>
+            <div className="ef-brand-name">{title}</div>
+            {subtitle ? <div className="ef-tagline">{subtitle}</div> : null}
+          </div>
+        </div>
+        <Dropdown
+          variant="header"
+          menus={menus}
+          menuOpen={menuOpen}
+          onOpenMenu={onOpenMenu}
+          onCloseMenu={onCloseMenu}
+        />
+      </div>
+      <div className="ef-header-actions">{actions}</div>
+    </Panel>
+  );
+};