@enderfall/ui 0.1.0 → 0.1.4

package/dist/components/Button.d.ts

@@ -1,7 +1,8 @@
 import type { ButtonHTMLAttributes } from "react";
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: "primary" | "ghost" | "locked" | "danger" | "delete" | "warning" | "info" | "success";
+    subvariant?: "default" | "glow";
 };
-export declare const Button: ({ variant, className, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ variant, subvariant, className, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Button.d.ts.map

package/dist/components/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,KAAK,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3D,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;CACjG,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,kCAA8C,WAAW,4CAK/E,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,KAAK,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3D,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;IAChG,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,8CAAsE,WAAW,4CAYvG,CAAC"}

package/dist/components/Button.js

@@ -1,2 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Button = ({ variant = "primary", className, ...props }) => (_jsx("button", { ...props, className: ["ef-button", variant, className].filter(Boolean).join(" ") }));
+export const Button = ({ variant = "primary", subvariant = "default", className, ...props }) => (_jsx("button", { ...props, className: [
+        "ef-button",
+        variant,
+        subvariant === "glow" ? "ef-button--glow" : "",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ") }));

package/dist/components/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"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"}

package/dist/components/Dropdown.js

@@ -28,10 +28,10 @@ export const Dropdown = (props) => {
                 props.onCloseMenu();
             }, closeDelayMs);
         };
-        return (_jsx("div", { className: "ef-menu-bar", children: props.menus.map((menu) => (_jsxs("div", { className: "ef-menu-group", onMouseEnter: () => {
+        return (_jsx("div", { className: "ef-menu-bar", children: props.menus.map((menu) => (_jsxs("div", { className: "ef-menu-group", "data-open": props.menuOpen === menu.id ? "true" : "false", onMouseEnter: () => {
                     cancelScheduledClose();
                     props.onOpenMenu(menu.id);
-                }, onMouseLeave: scheduleClose, children: [_jsx("button", { className: "ef-menu-button", type: "button", children: menu.label }), props.menuOpen === menu.id ? (_jsx("div", { className: "ef-menu-popover", "data-open": "true", onMouseEnter: () => {
+                }, onMouseLeave: scheduleClose, children: [_jsx("button", { className: "ef-menu-button", type: "button", "data-open": props.menuOpen === menu.id ? "true" : "false", children: menu.label }), props.menuOpen === menu.id ? (_jsx("div", { className: "ef-menu-popover", "data-open": "true", onMouseEnter: () => {
                             cancelScheduledClose();
                             props.onOpenMenu(menu.id);
                         }, onMouseLeave: scheduleClose, children: menu.content })) : null] }, menu.id))) }));

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@enderfall/ui",
   "private": false,
-  "version": "0.1.0",
+  "version": "0.1.4",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
+    "src",
+    "assets",
     "styles.css"
   ],
   "scripts": {
@@ -18,7 +20,8 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./styles.css": "./styles.css"
+    "./styles.css": "./styles.css",
+    "./assets/*": "./assets/*"
   },
   "peerDependencies": {
     "react": "^18.2.0"

package/src/base.css

@@ -0,0 +1,160 @@
+.page {
+  min-height: 100vh;
+  padding: 42px clamp(20px, 6vw, 96px) 140px;
+  position: relative;
+  overflow: hidden;
+  text-align: left;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: var(--font-main);
+  color: var(--text-strong);
+  background: var(--bg);
+}
+
+:root[data-reduce-motion="true"] *,
+:root[data-reduce-motion="true"] *::before,
+:root[data-reduce-motion="true"] *::after {
+  animation-duration: 0.001ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.001ms !important;
+  transition-delay: 0ms !important;
+  scroll-behavior: auto !important;
+}
+
+:root[data-reduce-motion="true"] body.ef-galaxy::after,
+:root[data-reduce-motion="true"] body.ef-galaxy-light::after {
+  animation: none !important;
+}
+
+:root[data-theme="light"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action),
+:root[data-theme="plain-light"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action),
+:root[data-theme="galaxy"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action),
+:root[data-theme="plain-dark"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action),
+:root[data-theme="system"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action) {
+  border: 2px solid transparent;
+  border-radius: 8px;
+  padding: 10px 18px;
+  font-weight: 600;
+  cursor: pointer;
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient) border-box;
+  color: var(--text-strong);
+  box-shadow: var(--shadow);
+}
+
+:root[data-theme="light"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):disabled,
+:root[data-theme="plain-light"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):disabled,
+:root[data-theme="galaxy"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):disabled,
+:root[data-theme="plain-dark"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):disabled,
+:root[data-theme="system"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  box-shadow: none;
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient-soft) border-box;
+}
+
+body.ef-galaxy {
+  background:
+    radial-gradient(1600px 900px at 70% -15%, rgba(124, 77, 255, 0.25), transparent 70%),
+    radial-gradient(1200px 900px at 10% 20%, rgba(0, 229, 255, 0.18), transparent 70%),
+    radial-gradient(1300px 1000px at 85% 80%, rgba(255, 77, 210, 0.22), transparent 70%),
+    radial-gradient(1000px 800px at 20% 75%, rgba(255, 183, 77, 0.12), transparent 75%),
+    radial-gradient(900px 800px at 60% 40%, rgba(76, 255, 200, 0.1), transparent 70%),
+    linear-gradient(180deg, #000001 0%, #02020a 100%);
+}
+
+body.ef-galaxy::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background:
+    radial-gradient(1800px 1000px at 50% 0%, rgba(88, 0, 255, 0.18), transparent 75%),
+    radial-gradient(1200px 900px at 15% 55%, rgba(0, 168, 255, 0.14), transparent 75%),
+    radial-gradient(1400px 1000px at 85% 45%, rgba(255, 0, 170, 0.18), transparent 75%),
+    radial-gradient(900px 700px at 60% 85%, rgba(255, 148, 60, 0.1), transparent 75%),
+    radial-gradient(1000px 900px at 40% 30%, rgba(0, 255, 150, 0.08), transparent 75%);
+  mix-blend-mode: screen;
+  opacity: 0.45;
+  pointer-events: none;
+  z-index: -1;
+}
+
+body.ef-galaxy::after {
+  content: "";
+  position: fixed;
+  inset: -20%;
+  background:
+    radial-gradient(2px 2px at 15% 20%, rgba(255, 255, 255, 0.85), transparent),
+    radial-gradient(2px 2px at 35% 45%, rgba(255, 255, 255, 0.75), transparent),
+    radial-gradient(2px 2px at 65% 30%, rgba(255, 255, 255, 0.7), transparent),
+    radial-gradient(2px 2px at 85% 60%, rgba(255, 255, 255, 0.7), transparent),
+    radial-gradient(1px 1px at 25% 85%, rgba(255, 255, 255, 0.6), transparent),
+    radial-gradient(1px 1px at 55% 10%, rgba(255, 255, 255, 0.6), transparent),
+    radial-gradient(1px 1px at 75% 90%, rgba(255, 255, 255, 0.6), transparent);
+  opacity: 0.35;
+  mix-blend-mode: screen;
+  pointer-events: none;
+  z-index: -1;
+  background-size: 420px 420px;
+  animation: star-drift 120s linear infinite;
+}
+
+body.ef-galaxy-light {
+  background:
+    radial-gradient(1600px 900px at 70% -15%, rgba(124, 77, 255, 0.25), transparent 70%),
+    radial-gradient(1200px 900px at 10% 20%, rgba(0, 229, 255, 0.18), transparent 70%),
+    radial-gradient(1300px 1000px at 85% 80%, rgba(255, 77, 210, 0.22), transparent 70%),
+    radial-gradient(1000px 800px at 20% 75%, rgba(255, 183, 77, 0.12), transparent 75%),
+    radial-gradient(900px 800px at 60% 40%, rgba(76, 255, 200, 0.1), transparent 70%),
+    linear-gradient(180deg, #f7f4ee 0%, #f2ece2 100%);
+}
+
+body.ef-galaxy-light::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background:
+    radial-gradient(1800px 1000px at 50% 0%, rgba(88, 0, 255, 0.18), transparent 75%),
+    radial-gradient(1200px 900px at 15% 55%, rgba(0, 168, 255, 0.14), transparent 75%),
+    radial-gradient(1400px 1000px at 85% 45%, rgba(255, 0, 170, 0.18), transparent 75%),
+    radial-gradient(900px 700px at 60% 85%, rgba(255, 148, 60, 0.1), transparent 75%),
+    radial-gradient(1000px 900px at 40% 30%, rgba(0, 255, 150, 0.08), transparent 75%);
+  opacity: 0.45;
+  pointer-events: none;
+  z-index: -1;
+}
+
+body.ef-galaxy-light::after {
+  content: "";
+  position: fixed;
+  inset: -20%;
+  background:
+    radial-gradient(2px 2px at 15% 20%, rgba(0, 0, 0, 0.95), transparent),
+    radial-gradient(2px 2px at 35% 45%, rgba(0, 0, 0, 0.9), transparent),
+    radial-gradient(2px 2px at 65% 30%, rgba(0, 0, 0, 0.85), transparent),
+    radial-gradient(2px 2px at 85% 60%, rgba(0, 0, 0, 0.85), transparent),
+    radial-gradient(1px 1px at 25% 85%, rgba(0, 0, 0, 0.75), transparent),
+    radial-gradient(1px 1px at 55% 10%, rgba(0, 0, 0, 0.75), transparent),
+    radial-gradient(1px 1px at 75% 90%, rgba(0, 0, 0, 0.75), transparent);
+  opacity: 0.55;
+  pointer-events: none;
+  z-index: -1;
+  background-size: 420px 420px;
+  animation: star-drift 120s linear infinite;
+}
+
+@keyframes star-drift {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(-220px, -160px, 0);
+  }
+}
+

package/src/components/AccessGate.css

@@ -0,0 +1,24 @@
+.ef-access-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(8, 10, 16, 0.72);
+  display: grid;
+  place-items: center;
+  z-index: 999;
+}
+
+.ef-access-card {
+  width: min(520px, 90vw);
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
+}
+
+.ef-access-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.ef-access-actions {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}

package/src/components/AccessGate.tsx

@@ -0,0 +1,61 @@
+import { Button } from "./Button";
+import { Panel } from "./Panel";
+
+type AccessGateProps = {
+  status: "checking" | "locked" | "allowed";
+  titleChecking?: string;
+  titleLocked?: string;
+  messageChecking?: string;
+  messageLocked?: string;
+  primaryLabel: string;
+  secondaryLabel?: string;
+  onPrimary: () => void;
+  onSecondary?: () => void;
+  primaryClassName?: string;
+  secondaryClassName?: string;
+};
+
+export const AccessGate = ({
+  status,
+  titleChecking = "Checking access...",
+  titleLocked = "App locked",
+  messageChecking = "Verifying your access with Enderfall Hub.",
+  messageLocked = "Open Enderfall Hub to verify premium or admin access.",
+  primaryLabel,
+  secondaryLabel,
+  onPrimary,
+  onSecondary,
+  primaryClassName = "primary",
+  secondaryClassName = "ghost",
+}: AccessGateProps) => {
+  if (status === "allowed") return null;
+  const isChecking = status === "checking";
+  return (
+    <div className="ef-access-overlay">
+      <Panel variant="card" borderWidth={2} className="ef-access-card">
+        <div className="ef-access-title">{isChecking ? titleChecking : titleLocked}</div>
+        <p>{isChecking ? messageChecking : messageLocked}</p>
+        <div className="ef-access-actions">
+          <Button
+            type="button"
+            className={primaryClassName}
+            onClick={onPrimary}
+            disabled={isChecking}
+          >
+            {primaryLabel}
+          </Button>
+          {secondaryLabel && onSecondary ? (
+            <Button
+              type="button"
+              className={secondaryClassName}
+              onClick={onSecondary}
+              disabled={isChecking}
+            >
+              {secondaryLabel}
+            </Button>
+          ) : null}
+        </div>
+      </Panel>
+    </div>
+  );
+};

package/src/components/BookmarkDropdown.css

@@ -0,0 +1,220 @@
+.bookmark-row {
+  display: grid;
+  gap: 8px;
+}
+
+.bookmark-row label {
+  display: grid;
+  gap: 8px;
+  font-weight: 600;
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.bookmark-label {
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.bookmark-field {
+  position: relative;
+}
+
+.bookmark-dropdown {
+  position: relative;
+}
+
+.bookmark-trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  justify-content: space-between;
+  padding: 10px 12px;
+  min-height: 40px;
+  border-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;
+  box-shadow: none;
+}
+
+.bookmark-trigger:hover {
+  transform: none;
+}
+
+.bookmark-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ink);
+}
+
+.bookmark-item .bookmark-icon {
+  width: var(--view-icon-size, 16px);
+  height: var(--view-icon-size, 16px);
+  flex: 0 0 var(--view-icon-size, 16px);
+}
+
+.bookmark-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.bookmark-icon .view-icon {
+  width: var(--view-icon-size, 16px);
+  height: var(--view-icon-size, 16px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ink);
+}
+
+.bookmark-icon .view-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.bookmark-trigger .bookmark-icon {
+  width: var(--view-icon-size, 16px);
+  height: var(--view-icon-size, 16px);
+  flex: 0 0 var(--view-icon-size, 16px);
+}
+
+.bookmark-trigger .bookmark-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.bookmark-trigger .bookmark-icon .view-icon {
+  width: var(--view-icon-size, 16px);
+  height: var(--view-icon-size, 16px);
+}
+
+.bookmark-trigger .bookmark-icon .view-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.bookmark-text {
+  flex: 1;
+  text-align: left;
+  font-weight: 600;
+  color: var(--text);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bookmark-caret {
+  color: var(--muted);
+  display: inline-flex;
+  align-items: center;
+}
+
+.bookmark-caret svg {
+  width: 14px;
+  height: 14px;
+}
+
+.bookmark-menu {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(100% + 6px);
+  background:
+    linear-gradient(var(--ef-input-surface), var(--ef-input-surface)) padding-box,
+    var(--ef-input-border) border-box;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  box-shadow: var(--shadow);
+  max-height: 240px;
+  overflow: auto;
+  padding: 6px;
+  z-index: 20;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.14s ease, transform 0.14s ease;
+  pointer-events: none;
+}
+
+.bookmark-dropdown.open .bookmark-menu {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.bookmark-empty {
+  padding: 8px 10px;
+  color: var(--muted);
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.bookmark-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: transparent;
+  border: 1px solid transparent;
+  box-shadow: none;
+  margin-bottom: 6px;
+}
+
+.bookmark-item:last-child {
+  margin-bottom: 0;
+}
+
+.bookmark-item:hover {
+  border-color: rgba(31, 122, 140, 0.2);
+  transform: none;
+}
+
+.bookmark-item.active {
+  border-color: var(--accent);
+  background: var(--menu-bg-soft);
+}
+
+.bookmark-item.active .bookmark-icon {
+  color: var(--ink);
+}
+
+.bookmark-group {
+  padding: 6px 10px 4px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+:root[data-theme="light"] .bookmark-trigger,
+:root[data-theme="light"] .bookmark-menu,
+:root[data-theme="plain-light"] .bookmark-trigger,
+:root[data-theme="plain-light"] .bookmark-menu,
+:root[data-theme="galaxy"] .bookmark-trigger,
+:root[data-theme="galaxy"] .bookmark-menu,
+:root[data-theme="plain-dark"] .bookmark-trigger,
+:root[data-theme="plain-dark"] .bookmark-menu,
+:root[data-theme="system"] .bookmark-trigger,
+:root[data-theme="system"] .bookmark-menu {
+  background:
+    linear-gradient(var(--ef-input-surface), var(--ef-input-surface)) padding-box,
+    var(--ef-input-border) border-box;
+  border-color: transparent;
+}
+
+:root[data-theme="atelier"] .bookmark-trigger,
+:root[data-theme="atelier"] .bookmark-menu,
+:root[data-theme="atelier"] .bookmark-item {
+  border-radius: 0;
+}
+