@1889ca/ui 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@1889ca/ui",
-	"version": "0.1.0",
+	"version": "0.3.0",
 	"type": "module",
 	"main": "src/index.js",
 	"module": "src/index.js",
@@ -22,6 +22,7 @@
 	},
 	"peerDependencies": {
 		"react": ">=18.0.0",
-		"react-dom": ">=18.0.0"
+		"react-dom": ">=18.0.0",
+		"@simplewebauthn/browser": ">=13.0.0"
 	}
 }

package/src/auth/AuthProvider.jsx

@@ -0,0 +1,57 @@
+import { createContext, useContext, useState, useEffect } from 'react';
+import {
+  authenticatePasskey,
+  registerPasskey,
+  devLogin as devLoginApi,
+  fetchCurrentUser,
+  logout as logoutApi,
+} from './api.js';
+
+const AuthContext = createContext(null);
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchCurrentUser()
+      .then(setUser)
+      .catch(() => setUser(null))
+      .finally(() => setLoading(false));
+  }, []);
+
+  async function login() {
+    const result = await authenticatePasskey();
+    setUser(result.user);
+    return result;
+  }
+
+  async function register(name) {
+    const result = await registerPasskey(name);
+    setUser(result.user);
+    return result;
+  }
+
+  async function devLogin(name = 'Test User') {
+    const result = await devLoginApi(name);
+    setUser(result.user);
+    return result;
+  }
+
+  async function logout() {
+    await logoutApi();
+    setUser(null);
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, loading, login, register, devLogin, logout, setUser }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error('useAuth must be used inside AuthProvider');
+  return ctx;
+}

package/src/auth/api.js

@@ -0,0 +1,51 @@
+import { startRegistration, startAuthentication } from '@simplewebauthn/browser';
+
+async function request(method, path, body) {
+  const options = {
+    method,
+    credentials: 'include',
+    headers: {},
+  };
+
+  if (body !== undefined) {
+    options.headers['Content-Type'] = 'application/json';
+    options.body = JSON.stringify(body);
+  }
+
+  const res = await fetch(path, options);
+
+  if (res.status === 204) return null;
+
+  const data = await res.json();
+  if (!res.ok) {
+    const err = new Error(data?.error || `HTTP ${res.status}`);
+    err.status = res.status;
+    throw err;
+  }
+
+  return data;
+}
+
+export async function registerPasskey(username) {
+  const options = await request('POST', '/api/auth/register/challenge', { name: username });
+  const credential = await startRegistration({ optionsJSON: options });
+  return request('POST', '/api/auth/register/verify', credential);
+}
+
+export async function authenticatePasskey() {
+  const options = await request('POST', '/api/auth/authenticate/challenge');
+  const credential = await startAuthentication({ optionsJSON: options });
+  return request('POST', '/api/auth/authenticate/verify', credential);
+}
+
+export async function devLogin(name = 'Test User') {
+  return request('POST', '/api/auth/dev-login', { name });
+}
+
+export async function fetchCurrentUser() {
+  return request('GET', '/api/auth/me');
+}
+
+export async function logout() {
+  return request('POST', '/api/auth/logout');
+}

package/src/components/LoginCard.css

@@ -0,0 +1,98 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-login-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  max-width: 400px;
+  padding: 2rem;
+  background: rgba(18, 18, 24, 0.7);
+  backdrop-filter: blur(var(--ui-glass-blur-heavy));
+  border: 1px solid var(--ui-border);
+  border-top-color: var(--ui-border-strong);
+  border-radius: var(--ui-radius-lg);
+  box-shadow: var(--ui-shadow-float);
+}
+
+/* Dev mode corner badge */
+.ui-login-dev-badge {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  background: linear-gradient(135deg, #f59e0b, #f97316);
+  color: #000;
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  padding: 0.2rem 0.65rem;
+  border-radius: 0 var(--ui-radius-lg) 0 var(--ui-radius);
+  box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
+  text-transform: uppercase;
+}
+
+/* Gradient title */
+.ui-login-title {
+  font-size: 2rem;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  line-height: 1.2;
+  background: linear-gradient(135deg, #fff 0%, var(--ui-accent) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.ui-login-subtitle {
+  color: var(--ui-text-muted);
+  font-size: 0.88rem;
+  margin-top: -0.5rem;
+}
+
+/* Tab switcher */
+.ui-login-tabs {
+  display: flex;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  overflow: hidden;
+}
+
+.ui-login-tab {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: var(--ui-text-muted);
+  padding: 0.55rem 0.5rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s var(--ui-ease);
+  font-family: inherit;
+}
+
+.ui-login-tab:hover {
+  color: var(--ui-text);
+}
+
+.ui-login-tab--active {
+  background: var(--ui-surface-raised);
+  color: var(--ui-text);
+}
+
+/* Body / form area */
+.ui-login-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+/* Error display */
+.ui-login-error {
+  color: var(--ui-danger);
+  font-size: 0.82rem;
+  padding: 0.5rem 0.75rem;
+  background: rgba(240, 96, 104, 0.08);
+  border: 1px solid rgba(240, 96, 104, 0.2);
+  border-radius: var(--ui-radius);
+}

package/src/components/LoginCard.jsx

@@ -0,0 +1,46 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+import { useState } from 'react';
+
+/**
+ * Styled login card with optional dev-mode badge, gradient title,
+ * tab switcher, and form layout. Presentational only — consumers
+ * supply callbacks for auth logic.
+ *
+ * @param {string} title - App name / heading
+ * @param {string} subtitle - Short tagline
+ * @param {boolean} devMode - Show "DEV MODE" corner badge
+ * @param {Array} tabs - [{label, id}] for mode switcher (omit for single-mode)
+ * @param {string} activeTab - Currently active tab id
+ * @param {function} onTabChange - Called with tab id
+ * @param {string} error - Error message to display
+ * @param {ReactNode} children - Form content
+ */
+export default function LoginCard({ title, subtitle, devMode, tabs, activeTab, onTabChange, error, children }) {
+  return (
+    <div className="ui-login-card">
+      {devMode && <div className="ui-login-dev-badge">DEV MODE</div>}
+      {title && <h1 className="ui-login-title">{title}</h1>}
+      {subtitle && <p className="ui-login-subtitle">{subtitle}</p>}
+      {tabs && tabs.length > 0 && (
+        <div className="ui-login-tabs">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              type="button"
+              className={`ui-login-tab${activeTab === tab.id ? ' ui-login-tab--active' : ''}`}
+              onClick={() => onTabChange?.(tab.id)}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      )}
+      <div className="ui-login-body">
+        {error && (
+          <p className="ui-login-error">{error}</p>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/PasskeyLoginPage.css

@@ -0,0 +1,61 @@
+.ui-login-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ui-bg);
+  padding: 1rem;
+}
+
+.ui-login-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.ui-login-hint {
+  color: var(--ui-text-muted);
+  font-size: 0.88rem;
+  text-align: center;
+}
+
+.ui-login-label {
+  font-size: 0.88rem;
+  color: var(--ui-text-muted);
+  font-weight: 500;
+}
+
+.ui-login-btn-full {
+  width: 100%;
+}
+
+.ui-login-footer {
+  color: var(--ui-text-subtle);
+  font-size: 0.78rem;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.ui-login-dev-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.ui-login-dev-divider {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--ui-text-subtle);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.ui-login-dev-divider::before,
+.ui-login-dev-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--ui-border);
+}

package/src/components/PasskeyLoginPage.jsx

@@ -0,0 +1,129 @@
+import { useState } from 'react';
+import LoginCard from './LoginCard.jsx';
+
+const TABS = [
+  { label: 'Sign In', id: 'login' },
+  { label: 'Register', id: 'register' },
+];
+
+/**
+ * Full-page passkey login with Sign In / Register tabs and optional dev mode.
+ *
+ * @param {string} title - App name
+ * @param {string} subtitle - App tagline
+ * @param {function} login - async () => {user} — passkey auth
+ * @param {function} register - async (name) => {user} — passkey registration
+ * @param {function} devLogin - async (name) => {user} — dev bypass
+ * @param {function} onSuccess - called with user after any successful auth
+ * @param {boolean} devMode - show dev login section (defaults to import.meta.env.DEV)
+ */
+export default function PasskeyLoginPage({ title, subtitle, login, register, devLogin, onSuccess, devMode }) {
+  const [mode, setMode] = useState('login');
+  const [name, setName] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const showDev = devMode !== undefined ? devMode : (typeof import !== 'undefined' && import.meta?.env?.DEV);
+
+  async function handleLogin() {
+    setError('');
+    setLoading(true);
+    try {
+      const result = await login();
+      if (result?.user) onSuccess?.(result.user);
+    } catch (err) {
+      setError(err.message || 'Authentication failed');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleRegister(e) {
+    e.preventDefault();
+    if (!name.trim()) return setError('Please enter your name');
+    setError('');
+    setLoading(true);
+    try {
+      const result = await register(name.trim());
+      if (result?.user) onSuccess?.(result.user);
+    } catch (err) {
+      setError(err.message || 'Registration failed');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleDevLogin() {
+    setError('');
+    setLoading(true);
+    try {
+      const result = await devLogin('Test User');
+      if (result?.user) onSuccess?.(result.user);
+    } catch (err) {
+      setError(err.message || 'Dev login failed');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="ui-login-page">
+      <LoginCard
+        title={title}
+        subtitle={subtitle}
+        devMode={showDev}
+        tabs={TABS}
+        activeTab={mode}
+        onTabChange={(id) => { setMode(id); setError(''); }}
+        error={error}
+      >
+        {mode === 'login' ? (
+          <div className="ui-login-section">
+            <p className="ui-login-hint">Use your passkey to sign in securely.</p>
+            <button
+              className="ui-btn ui-btn-primary ui-login-btn-full"
+              onClick={handleLogin}
+              disabled={loading}
+            >
+              {loading ? 'Authenticating...' : 'Sign in with Passkey'}
+            </button>
+          </div>
+        ) : (
+          <form className="ui-login-section" onSubmit={handleRegister}>
+            <label htmlFor="ui-login-name" className="ui-login-label">Your name</label>
+            <input
+              id="ui-login-name"
+              className="ui-input"
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g. Jane Smith"
+              autoComplete="name"
+              disabled={loading}
+            />
+            <button className="ui-btn ui-btn-primary ui-login-btn-full" type="submit" disabled={loading}>
+              {loading ? 'Registering...' : 'Register with Passkey'}
+            </button>
+          </form>
+        )}
+
+        {showDev && devLogin && (
+          <div className="ui-login-dev-section">
+            <div className="ui-login-dev-divider"><span>Dev Mode</span></div>
+            <button
+              className="ui-btn ui-btn-ghost ui-login-btn-full"
+              onClick={handleDevLogin}
+              disabled={loading}
+            >
+              {loading ? 'Logging in...' : 'Dev Login (skip passkey)'}
+            </button>
+          </div>
+        )}
+
+        <p className="ui-login-footer">
+          Passkeys use your device's biometrics — no passwords needed.
+        </p>
+      </LoginCard>
+    </div>
+  );
+}

package/src/components/UserMenu.css

@@ -0,0 +1,105 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-user-menu {
+  position: relative;
+  z-index: 100;
+}
+
+/* Trigger — circular avatar button */
+.ui-user-menu-trigger {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  border: 1px solid var(--ui-border);
+  background: var(--ui-accent-muted);
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  overflow: hidden;
+}
+
+.ui-user-menu-trigger:hover {
+  border-color: var(--ui-accent);
+  box-shadow: 0 0 0 2px var(--ui-accent-glow);
+}
+
+.ui-user-menu-avatar {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.ui-user-menu-initials {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--ui-accent);
+  line-height: 1;
+  user-select: none;
+}
+
+/* Dropdown — glassmorphic panel */
+.ui-user-menu-dropdown {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 180px;
+  background: rgba(18, 18, 24, 0.82);
+  backdrop-filter: blur(var(--ui-glass-blur-heavy));
+  border: 1px solid var(--ui-border);
+  border-top-color: var(--ui-border-strong);
+  border-radius: var(--ui-radius);
+  padding: 4px;
+  box-shadow: var(--ui-shadow-float);
+  animation: ui-user-menu-in 0.12s var(--ui-ease);
+  z-index: 1000;
+}
+
+@keyframes ui-user-menu-in {
+  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+/* Name label */
+.ui-user-menu-name {
+  padding: 7px 12px;
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: var(--ui-text-muted);
+  user-select: none;
+}
+
+/* Menu items */
+.ui-user-menu-item {
+  display: block;
+  width: 100%;
+  padding: 7px 12px;
+  background: none;
+  border: none;
+  color: var(--ui-text);
+  font-size: 0.82rem;
+  text-align: left;
+  border-radius: var(--ui-radius-sm);
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+}
+
+.ui-user-menu-item:hover {
+  background: var(--ui-accent-muted);
+  color: #fff;
+}
+
+.ui-user-menu-item--danger:hover {
+  background: var(--ui-danger-glow);
+  color: var(--ui-danger);
+}
+
+/* Separator */
+.ui-user-menu-sep {
+  height: 1px;
+  background: var(--ui-border);
+  margin: 4px 8px;
+}

package/src/components/UserMenu.jsx

@@ -0,0 +1,73 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+import { useState, useEffect, useRef } from 'react';
+
+/**
+ * User avatar menu with glassmorphic dropdown.
+ * Trigger shows avatar image or first-letter initials.
+ * Dropdown shows user name, app-specific items, and a pinned logout action.
+ *
+ * @param {string} name - User display name
+ * @param {string} [avatar] - Optional avatar URL (falls back to initials)
+ * @param {Array} items - [{ label, action }] app-specific menu items
+ * @param {function} onLogout - Always rendered last with separator + danger style
+ */
+export default function UserMenu({ name, avatar, items = [], onLogout }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function onMouseDown(e) {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    }
+    function onKey(e) {
+      if (e.key === 'Escape') setOpen(false);
+    }
+    document.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onMouseDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  const initials = name ? name.charAt(0).toUpperCase() : '?';
+
+  return (
+    <div ref={ref} className="ui-user-menu">
+      <button
+        className="ui-user-menu-trigger"
+        onClick={() => setOpen(prev => !prev)}
+        aria-label={`User menu for ${name}`}
+      >
+        {avatar
+          ? <img className="ui-user-menu-avatar" src={avatar} alt={name} />
+          : <span className="ui-user-menu-initials">{initials}</span>
+        }
+      </button>
+
+      {open && (
+        <div className="ui-user-menu-dropdown">
+          <div className="ui-user-menu-name">{name}</div>
+          <div className="ui-user-menu-sep" />
+          {items.map((item, i) => (
+            <button
+              key={i}
+              className="ui-user-menu-item"
+              onClick={() => { item.action(); setOpen(false); }}
+            >
+              {item.label}
+            </button>
+          ))}
+          {items.length > 0 && <div className="ui-user-menu-sep" />}
+          <button
+            className="ui-user-menu-item ui-user-menu-item--danger"
+            onClick={() => { onLogout(); setOpen(false); }}
+          >
+            Log out
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/index.js

@@ -16,6 +16,9 @@ import './components/ItemGrid.css';
 import './components/ItemCard.css';
 import './components/FolderCard.css';
 import './components/SlidePanel.css';
+import './components/LoginCard.css';
+import './components/PasskeyLoginPage.css';
+import './components/UserMenu.css';
 
 /* Components */
 export { default as ContextMenu } from './components/ContextMenu.jsx';
@@ -30,6 +33,13 @@ export { default as ItemGrid } from './components/ItemGrid.jsx';
 export { default as ItemCard } from './components/ItemCard.jsx';
 export { default as FolderCard } from './components/FolderCard.jsx';
 export { default as SlidePanel } from './components/SlidePanel.jsx';
+export { default as LoginCard } from './components/LoginCard.jsx';
+export { default as PasskeyLoginPage } from './components/PasskeyLoginPage.jsx';
+export { default as UserMenu } from './components/UserMenu.jsx';
+
+/* Auth */
+export { AuthProvider, useAuth } from './auth/AuthProvider.jsx';
+export { registerPasskey, authenticatePasskey, devLogin, fetchCurrentUser, logout } from './auth/api.js';
 
 /* Hooks */
 export { default as useMultiSelect } from './hooks/useMultiSelect.js';