@1889ca/ui 0.5.0 → 0.6.0

package/src/components/SlidePanel.css

@@ -4,7 +4,7 @@
   position: fixed;
   top: 0;
   height: 100dvh;
-  background: rgba(12, 12, 18, 0.85);
+  background: var(--ui-glass-heavy);
   backdrop-filter: blur(var(--ui-glass-blur-heavy));
   border-right: 1px solid var(--ui-border);
   transition: transform 0.3s var(--ui-ease);
@@ -58,6 +58,12 @@
   padding: 0.75rem;
 }
 
+@media (max-width: 480px) {
+  .ui-slide-panel {
+    max-width: 85vw;
+  }
+}
+
 /* Tab button primitive */
 .ui-tab {
   flex: 1;

package/src/components/StatusBar.css

@@ -7,7 +7,7 @@
   padding: 0 1rem;
   height: 28px;
   border-top: 1px solid var(--ui-border);
-  background: rgba(8, 8, 12, 0.75);
+  background: var(--ui-glass-bar);
   backdrop-filter: blur(var(--ui-glass-blur-heavy));
   box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.03);
   position: fixed;
@@ -18,6 +18,18 @@
   font-size: 0.72rem;
   color: var(--ui-text-muted);
   gap: 0.5rem;
+  overflow: hidden;
+}
+
+@media (max-width: 480px) {
+  .ui-statusbar {
+    padding: 0 0.5rem;
+    gap: 0.25rem;
+  }
+
+  .ui-statusbar-center {
+    display: none;
+  }
 }
 
 .ui-statusbar-left,
@@ -27,6 +39,7 @@
   align-items: center;
   gap: 0.6rem;
   min-width: 0;
+  overflow: hidden;
 }
 
 .ui-statusbar-left { justify-content: flex-start; }
@@ -116,3 +129,27 @@
   background: var(--ui-border);
   flex-shrink: 0;
 }
+
+/* Progress shimmer */
+.ui-sb-progress-fill {
+  position: relative;
+  overflow: hidden;
+}
+
+.ui-sb-progress-fill::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.15) 50%,
+    transparent 100%
+  );
+  animation: ui-progress-shimmer 1.5s var(--ui-ease) infinite;
+}
+
+@keyframes ui-progress-shimmer {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(100%); }
+}

package/src/components/TabBar.css

@@ -0,0 +1,53 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-tabbar {
+  display: flex;
+  gap: 2px;
+  padding: 0 0.35rem;
+  border-bottom: 1px solid var(--ui-border);
+  flex-shrink: 0;
+}
+
+.ui-tabbar--full .ui-tabbar-tab {
+  flex: 1;
+  text-align: center;
+}
+
+.ui-tabbar-tab {
+  position: relative;
+  padding: 0.5rem 0.75rem;
+  background: none;
+  border: none;
+  color: var(--ui-text-subtle);
+  font-size: 0.72rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  transition: color 0.15s var(--ui-ease);
+}
+
+.ui-tabbar-tab::after {
+  content: '';
+  position: absolute;
+  left: 0.35rem;
+  right: 0.35rem;
+  bottom: -1px;
+  height: 2px;
+  border-radius: 1px;
+  background: transparent;
+  transition: background 0.2s var(--ui-ease), box-shadow 0.2s var(--ui-ease);
+}
+
+.ui-tabbar-tab:hover {
+  color: var(--ui-text-muted);
+}
+
+.ui-tabbar-tab--active {
+  color: var(--ui-accent);
+}
+
+.ui-tabbar-tab--active::after {
+  background: var(--ui-accent);
+  box-shadow: 0 0 8px var(--ui-accent-glow);
+}

package/src/components/TabBar.jsx

@@ -0,0 +1,28 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+import './TabBar.css';
+
+/**
+ * Standalone tab bar with animated underline indicator.
+ * @param {Array} tabs - [{ id, label }]
+ * @param {string} activeTab - Currently active tab id
+ * @param {function} onChange - Called with tab id
+ * @param {string} variant - 'default' | 'full-width' (default: 'default')
+ */
+export default function TabBar({ tabs, activeTab, onChange, variant = 'default' }) {
+  return (
+    <nav className={`ui-tabbar${variant === 'full-width' ? ' ui-tabbar--full' : ''}`} role="tablist">
+      {tabs.map((tab) => (
+        <button
+          key={tab.id}
+          type="button"
+          role="tab"
+          aria-selected={activeTab === tab.id}
+          className={`ui-tabbar-tab${activeTab === tab.id ? ' ui-tabbar-tab--active' : ''}`}
+          onClick={() => onChange?.(tab.id)}
+        >
+          {tab.label}
+        </button>
+      ))}
+    </nav>
+  );
+}

package/src/components/ThemeToggle.css

@@ -0,0 +1,34 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--ui-radius-sm);
+  border: 1px solid var(--ui-border);
+  background: var(--ui-surface);
+  color: var(--ui-text-muted);
+  cursor: pointer;
+  padding: 0;
+  transition: color 0.2s var(--ui-ease), border-color 0.2s var(--ui-ease), background 0.2s var(--ui-ease), transform 0.2s var(--ui-ease-spring);
+}
+
+.ui-theme-toggle:hover {
+  color: var(--ui-text);
+  border-color: var(--ui-border-strong);
+  background: var(--ui-surface-raised);
+}
+
+.ui-theme-toggle:active {
+  transform: scale(0.92);
+}
+
+.ui-theme-toggle svg {
+  transition: transform 0.3s var(--ui-ease-spring);
+}
+
+.ui-theme-toggle:hover svg {
+  transform: rotate(15deg);
+}

package/src/components/ThemeToggle.jsx

@@ -0,0 +1,44 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+import useTheme from '../hooks/useTheme.js';
+
+/**
+ * Theme toggle button — cycles between dark/light.
+ * Uses useTheme internally; can also accept external theme state.
+ *
+ * @param {string} [size='20'] - Icon size
+ * @param {string} [className] - Additional class names
+ * @param {object} [themeState] - External { resolvedTheme, toggle } from useTheme (optional)
+ */
+export default function ThemeToggle({ size = 20, className, themeState }) {
+  const internal = useTheme();
+  const { resolvedTheme, toggle } = themeState || internal;
+  const isDark = resolvedTheme === 'dark';
+
+  return (
+    <button
+      type="button"
+      className={`ui-theme-toggle${className ? ` ${className}` : ''}`}
+      onClick={toggle}
+      aria-label={`Switch to ${isDark ? 'light' : 'dark'} mode`}
+      title={`Switch to ${isDark ? 'light' : 'dark'} mode`}
+    >
+      {isDark ? (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="5" />
+          <line x1="12" y1="1" x2="12" y2="3" />
+          <line x1="12" y1="21" x2="12" y2="23" />
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+          <line x1="1" y1="12" x2="3" y2="12" />
+          <line x1="21" y1="12" x2="23" y2="12" />
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+        </svg>
+      ) : (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </svg>
+      )}
+    </button>
+  );
+}

package/src/components/Toast.css

@@ -0,0 +1,102 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-toast-container {
+  position: fixed;
+  bottom: 40px;
+  right: 1rem;
+  z-index: 1100;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  pointer-events: none;
+  max-width: calc(100vw - 2rem);
+}
+
+.ui-toast {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.6rem 1rem;
+  min-width: 220px;
+  max-width: 400px;
+  border-radius: var(--ui-radius);
+  border: 1px solid var(--ui-border);
+  background: var(--ui-glass-heavy);
+  backdrop-filter: blur(var(--ui-glass-blur-heavy));
+  box-shadow: var(--ui-shadow-float);
+  font-size: 0.82rem;
+  color: var(--ui-text);
+  cursor: pointer;
+  pointer-events: auto;
+  animation: ui-toast-in 0.35s var(--ui-ease-spring);
+}
+
+.ui-toast--leaving {
+  animation: ui-toast-out 0.3s var(--ui-ease) forwards;
+}
+
+@keyframes ui-toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(100%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+@keyframes ui-toast-out {
+  to {
+    opacity: 0;
+    transform: translateX(30%) scale(0.95);
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-bottom: -0.5rem;
+    overflow: hidden;
+  }
+}
+
+.ui-toast-icon {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.7rem;
+  font-weight: 700;
+}
+
+.ui-toast--info {
+  border-left: 3px solid var(--ui-accent);
+}
+
+.ui-toast--info .ui-toast-icon {
+  background: var(--ui-accent-muted);
+  color: var(--ui-accent);
+}
+
+.ui-toast--success {
+  border-left: 3px solid var(--ui-success);
+}
+
+.ui-toast--success .ui-toast-icon {
+  background: rgba(52, 211, 153, 0.15);
+  color: var(--ui-success);
+}
+
+.ui-toast--error {
+  border-left: 3px solid var(--ui-danger);
+}
+
+.ui-toast--error .ui-toast-icon {
+  background: var(--ui-danger-glow);
+  color: var(--ui-danger);
+}
+
+.ui-toast-message {
+  line-height: 1.4;
+}

package/src/components/Toast.jsx

@@ -0,0 +1,67 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+import { createContext, useContext, useState, useCallback, useRef } from 'react';
+import './Toast.css';
+
+const ToastContext = createContext(null);
+
+let toastId = 0;
+
+/**
+ * Wrap your app in ToastProvider to enable toasts.
+ * Use the useToast() hook to show toasts imperatively.
+ */
+export function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+  const timers = useRef({});
+
+  const dismiss = useCallback((id) => {
+    setToasts(prev => prev.map(t => t.id === id ? { ...t, leaving: true } : t));
+    setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 300);
+  }, []);
+
+  const toast = useCallback(({ message, type = 'info', duration = 4000 }) => {
+    const id = ++toastId;
+    setToasts(prev => [...prev, { id, message, type, leaving: false }]);
+    if (duration > 0) {
+      timers.current[id] = setTimeout(() => dismiss(id), duration);
+    }
+    return id;
+  }, [dismiss]);
+
+  const api = useCallback((message, type) => {
+    if (typeof message === 'object') return toast(message);
+    return toast({ message, type });
+  }, [toast]);
+
+  api.success = (message, duration) => toast({ message, type: 'success', duration });
+  api.error = (message, duration) => toast({ message, type: 'error', duration: duration ?? 6000 });
+  api.info = (message, duration) => toast({ message, type: 'info', duration });
+
+  return (
+    <ToastContext.Provider value={api}>
+      {children}
+      <div className="ui-toast-container" aria-live="polite">
+        {toasts.map((t) => (
+          <div
+            key={t.id}
+            className={`ui-toast ui-toast--${t.type}${t.leaving ? ' ui-toast--leaving' : ''}`}
+            onClick={() => { clearTimeout(timers.current[t.id]); dismiss(t.id); }}
+          >
+            <span className="ui-toast-icon">{t.type === 'success' ? '✓' : t.type === 'error' ? '✕' : 'ℹ'}</span>
+            <span className="ui-toast-message">{t.message}</span>
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+/**
+ * Returns the toast function.
+ * toast('message') or toast.success('done') / toast.error('failed') / toast.info('note')
+ */
+export function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error('useToast requires <ToastProvider>');
+  return ctx;
+}

package/src/components/Toggle.css

@@ -0,0 +1,53 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.ui-toggle--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ui-toggle-track {
+  position: relative;
+  width: 36px;
+  height: 20px;
+  border-radius: 10px;
+  border: 1px solid var(--ui-border-strong);
+  background: var(--ui-surface);
+  cursor: inherit;
+  padding: 0;
+  transition: background 0.2s var(--ui-ease), border-color 0.2s var(--ui-ease), box-shadow 0.2s var(--ui-ease);
+}
+
+.ui-toggle-track--on {
+  background: var(--ui-accent);
+  border-color: var(--ui-accent);
+  box-shadow: 0 0 12px var(--ui-accent-glow);
+}
+
+.ui-toggle-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--ui-text-muted);
+  transition: transform 0.2s var(--ui-ease-spring), background 0.2s var(--ui-ease);
+}
+
+.ui-toggle-track--on .ui-toggle-knob {
+  transform: translateX(16px);
+  background: #fff;
+}
+
+.ui-toggle-label {
+  font-size: 0.82rem;
+  color: var(--ui-text-muted);
+  user-select: none;
+}

package/src/components/Toggle.jsx

@@ -0,0 +1,28 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+import './Toggle.css';
+
+/**
+ * Toggle switch with animated knob.
+ * @param {boolean} checked
+ * @param {function} onChange - called with new boolean value
+ * @param {string} label - Optional accessible label
+ * @param {boolean} disabled
+ */
+export default function Toggle({ checked, onChange, label, disabled }) {
+  return (
+    <label className={`ui-toggle${disabled ? ' ui-toggle--disabled' : ''}`}>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        aria-label={label}
+        className={`ui-toggle-track${checked ? ' ui-toggle-track--on' : ''}`}
+        onClick={() => !disabled && onChange?.(!checked)}
+        disabled={disabled}
+      >
+        <span className="ui-toggle-knob" />
+      </button>
+      {label && <span className="ui-toggle-label">{label}</span>}
+    </label>
+  );
+}

package/src/components/Tooltip.css

@@ -0,0 +1,36 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-tooltip-trigger {
+  display: inline-flex;
+}
+
+.ui-tooltip {
+  position: fixed;
+  z-index: 1200;
+  padding: 0.3rem 0.6rem;
+  font-size: 0.72rem;
+  font-weight: 500;
+  color: var(--ui-text);
+  background: var(--ui-glass-heavy);
+  backdrop-filter: blur(var(--ui-glass-blur));
+  border: 1px solid var(--ui-border-strong);
+  border-radius: var(--ui-radius-sm);
+  box-shadow: var(--ui-shadow-lg);
+  white-space: nowrap;
+  pointer-events: none;
+  animation: ui-tooltip-in 0.15s var(--ui-ease);
+}
+
+@keyframes ui-tooltip-in {
+  from { opacity: 0; transform: translate(-50%, -100%) scale(0.95); }
+  to { opacity: 1; transform: translate(-50%, -100%) scale(1); }
+}
+
+.ui-tooltip--bottom {
+  animation-name: ui-tooltip-in-bottom;
+}
+
+@keyframes ui-tooltip-in-bottom {
+  from { opacity: 0; transform: translate(-50%, 0) scale(0.95); }
+  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
+}

package/src/components/Tooltip.jsx

@@ -0,0 +1,55 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+import { useState, useRef, useEffect } from 'react';
+import './Tooltip.css';
+
+/**
+ * Hover tooltip. Wraps children in a span and positions a floating label.
+ * @param {string} text - Tooltip content
+ * @param {string} side - 'top' | 'bottom' (default: 'top')
+ * @param {number} delay - Show delay in ms (default: 400)
+ */
+export default function Tooltip({ text, side = 'top', delay = 400, children }) {
+  const [visible, setVisible] = useState(false);
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const ref = useRef(null);
+  const tipRef = useRef(null);
+  const timer = useRef(null);
+
+  function show() {
+    timer.current = setTimeout(() => {
+      if (!ref.current) return;
+      const rect = ref.current.getBoundingClientRect();
+      const x = rect.left + rect.width / 2;
+      const y = side === 'bottom' ? rect.bottom + 6 : rect.top - 6;
+      setPos({ x, y });
+      setVisible(true);
+    }, delay);
+  }
+
+  function hide() {
+    clearTimeout(timer.current);
+    setVisible(false);
+  }
+
+  useEffect(() => () => clearTimeout(timer.current), []);
+
+  const transform = side === 'bottom'
+    ? 'translate(-50%, 0)'
+    : 'translate(-50%, -100%)';
+
+  return (
+    <span ref={ref} className="ui-tooltip-trigger" onMouseEnter={show} onMouseLeave={hide} onFocus={show} onBlur={hide}>
+      {children}
+      {visible && text && (
+        <span
+          ref={tipRef}
+          className={`ui-tooltip ui-tooltip--${side}`}
+          style={{ left: pos.x, top: pos.y, transform }}
+          role="tooltip"
+        >
+          {text}
+        </span>
+      )}
+    </span>
+  );
+}

package/src/components/UserMenu.css

@@ -47,7 +47,7 @@
   top: calc(100% + 6px);
   right: 0;
   min-width: 180px;
-  background: rgba(18, 18, 24, 0.82);
+  background: var(--ui-glass);
   backdrop-filter: blur(var(--ui-glass-blur-heavy));
   border: 1px solid var(--ui-border);
   border-top-color: var(--ui-border-strong);
@@ -97,6 +97,23 @@
   color: var(--ui-danger);
 }
 
+/* Theme toggle row */
+.ui-user-menu-theme {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.ui-user-menu-theme-icon {
+  display: inline-flex;
+  color: var(--ui-text-subtle);
+  transition: color 0.15s;
+}
+
+.ui-user-menu-theme:hover .ui-user-menu-theme-icon {
+  color: var(--ui-accent);
+}
+
 /* Separator */
 .ui-user-menu-sep {
   height: 1px;