@1889ca/ui 0.3.4 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@1889ca/ui",
-	"version": "0.3.4",
+	"version": "0.5.0",
 	"type": "module",
 	"main": "src/index.js",
 	"module": "src/index.js",

package/src/components/Panel.css

@@ -0,0 +1,65 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-panel {
+  background: rgba(18, 18, 24, 0.8);
+  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);
+  display: flex;
+  flex-direction: column;
+  min-width: 120px;
+  overflow: hidden;
+}
+
+.ui-panel-titlebar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.4rem 0.65rem;
+  border-bottom: 1px solid var(--ui-border);
+  flex-shrink: 0;
+}
+
+.ui-panel-title {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--ui-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.ui-panel-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.ui-panel-close {
+  background: none;
+  border: none;
+  color: var(--ui-text-subtle);
+  font-size: 0.9rem;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0.1rem 0.2rem;
+  border-radius: var(--ui-radius-sm);
+  transition: color 0.15s, background 0.15s;
+}
+
+.ui-panel-close:hover {
+  color: var(--ui-text);
+  background: var(--ui-surface-raised);
+}
+
+.ui-panel-body {
+  flex: 1;
+  min-height: 0;
+  padding: 0.5rem 0.65rem;
+  overflow: auto;
+}
+
+.ui-panel-body--flush {
+  padding: 0;
+}

package/src/components/Panel.jsx

@@ -0,0 +1,31 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+/**
+ * Static glass panel — same chrome as DraggablePanel but positioned in flow.
+ * Use for sidebar sections, inspector panels, toolboxes, etc.
+ *
+ * @param {string} title - Titlebar text
+ * @param {ReactNode} children - Panel body content
+ * @param {ReactNode} actions - Extra elements in the titlebar (right side, before close)
+ * @param {function} onClose - Close button handler (omit to hide close button)
+ * @param {string} className - Additional class names
+ * @param {boolean} flush - If true, removes body padding (for custom layouts)
+ */
+export default function Panel({ title, children, actions, onClose, className, flush }) {
+  return (
+    <div className={`ui-panel${className ? ` ${className}` : ''}`}>
+      {title && (
+        <div className="ui-panel-titlebar">
+          <span className="ui-panel-title">{title}</span>
+          <div className="ui-panel-actions">
+            {actions}
+            {onClose && <button className="ui-panel-close" type="button" onClick={onClose}>&times;</button>}
+          </div>
+        </div>
+      )}
+      <div className={`ui-panel-body${flush ? ' ui-panel-body--flush' : ''}`}>
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/StatusBar.css

@@ -0,0 +1,118 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-statusbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1rem;
+  height: 28px;
+  border-top: 1px solid var(--ui-border);
+  background: rgba(8, 8, 12, 0.75);
+  backdrop-filter: blur(var(--ui-glass-blur-heavy));
+  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.03);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  font-size: 0.72rem;
+  color: var(--ui-text-muted);
+  gap: 0.5rem;
+}
+
+.ui-statusbar-left,
+.ui-statusbar-right,
+.ui-statusbar-center {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  min-width: 0;
+}
+
+.ui-statusbar-left { justify-content: flex-start; }
+.ui-statusbar-center { justify-content: center; flex: 1; }
+.ui-statusbar-right { justify-content: flex-end; }
+
+/* Chunks — shared label style */
+
+.ui-sb-label {
+  color: var(--ui-text-subtle);
+  margin-right: 0.3rem;
+}
+
+/* Text */
+
+.ui-sb-text {
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.ui-sb-text--muted {
+  color: var(--ui-text-subtle);
+}
+
+/* Spinner */
+
+.ui-sb-spinner {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.ui-sb-spinner-icon {
+  animation: ui-sb-spin 0.8s linear infinite;
+  color: var(--ui-accent);
+}
+
+@keyframes ui-sb-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Progress */
+
+.ui-sb-progress {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.ui-sb-progress-track {
+  height: 4px;
+  background: var(--ui-surface-raised);
+  border-radius: 2px;
+  overflow: hidden;
+  display: inline-block;
+}
+
+.ui-sb-progress-fill {
+  display: block;
+  height: 100%;
+  background: var(--ui-accent);
+  border-radius: 2px;
+  transition: width 0.3s var(--ui-ease);
+}
+
+/* Badge */
+
+.ui-sb-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  white-space: nowrap;
+}
+
+.ui-sb-badge-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+/* Separator */
+
+.ui-sb-sep {
+  width: 1px;
+  height: 14px;
+  background: var(--ui-border);
+  flex-shrink: 0;
+}

package/src/components/StatusBar.jsx

@@ -0,0 +1,78 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+/**
+ * Fixed footer status bar with composable data chunks.
+ * Mirrors PageHeader as a bottom counterpart with glass blur.
+ *
+ * @param {ReactNode} left - Left-aligned chunks
+ * @param {ReactNode} right - Right-aligned chunks
+ * @param {ReactNode} center - Center-aligned chunks (optional)
+ * @param {string} className - Additional class names
+ */
+export default function StatusBar({ left, right, center, className }) {
+  return (
+    <footer className={`ui-statusbar${className ? ` ${className}` : ''}`}>
+      <div className="ui-statusbar-left">{left}</div>
+      {center && <div className="ui-statusbar-center">{center}</div>}
+      <div className="ui-statusbar-right">{right}</div>
+    </footer>
+  );
+}
+
+/** Text chunk — label with optional muted prefix */
+function Text({ label, value, muted }) {
+  return (
+    <span className={`ui-sb-text${muted ? ' ui-sb-text--muted' : ''}`}>
+      {label && <span className="ui-sb-label">{label}</span>}
+      {value}
+    </span>
+  );
+}
+
+/** Spinner chunk — small rotating indicator with optional label */
+function Spinner({ label, size = 14 }) {
+  return (
+    <span className="ui-sb-spinner">
+      <svg className="ui-sb-spinner-icon" width={size} height={size} viewBox="0 0 16 16" fill="none">
+        <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="2" opacity="0.25" />
+        <path d="M14 8a6 6 0 0 0-6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      </svg>
+      {label && <span className="ui-sb-label">{label}</span>}
+    </span>
+  );
+}
+
+/** Progress chunk — thin inline progress bar */
+function Progress({ value, max = 100, label, width = 80 }) {
+  const pct = Math.min(100, Math.max(0, (value / max) * 100));
+  return (
+    <span className="ui-sb-progress">
+      {label && <span className="ui-sb-label">{label}</span>}
+      <span className="ui-sb-progress-track" style={{ width }}>
+        <span className="ui-sb-progress-fill" style={{ width: `${pct}%` }} />
+      </span>
+      <span className="ui-sb-text ui-sb-text--muted">{Math.round(pct)}%</span>
+    </span>
+  );
+}
+
+/** Badge chunk — colored indicator dot with label */
+function Badge({ label, color = 'var(--ui-success)' }) {
+  return (
+    <span className="ui-sb-badge">
+      <span className="ui-sb-badge-dot" style={{ background: color }} />
+      {label}
+    </span>
+  );
+}
+
+/** Separator — vertical divider between chunks */
+function Separator() {
+  return <span className="ui-sb-sep" />;
+}
+
+StatusBar.Text = Text;
+StatusBar.Spinner = Spinner;
+StatusBar.Progress = Progress;
+StatusBar.Badge = Badge;
+StatusBar.Separator = Separator;

package/src/index.js

@@ -19,6 +19,8 @@ import './components/SlidePanel.css';
 import './components/LoginCard.css';
 import './components/PasskeyLoginPage.css';
 import './components/UserMenu.css';
+import './components/StatusBar.css';
+import './components/Panel.css';
 
 /* Components */
 export { default as ContextMenu } from './components/ContextMenu.jsx';
@@ -36,6 +38,8 @@ 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';
+export { default as StatusBar } from './components/StatusBar.jsx';
+export { default as Panel } from './components/Panel.jsx';
 
 /* Auth */
 export { AuthProvider, useAuth } from './auth/AuthProvider.jsx';

package/src/styles/primitives.css

@@ -124,11 +124,11 @@
   position: fixed;
   inset: 0;
   background:
-    radial-gradient(ellipse 80% 60% at 15% 10%, rgba(124, 108, 240, 0.12), transparent),
-    radial-gradient(ellipse 60% 50% at 85% 20%, rgba(56, 189, 248, 0.08), transparent),
-    radial-gradient(ellipse 50% 60% at 40% 90%, rgba(168, 85, 247, 0.10), transparent),
-    radial-gradient(ellipse 70% 40% at 75% 75%, rgba(34, 211, 153, 0.06), transparent),
-    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(244, 114, 182, 0.04), transparent);
+    radial-gradient(ellipse 80% 60% at 15% 10%, rgba(124, 108, 240, 0.084), transparent),
+    radial-gradient(ellipse 60% 50% at 85% 20%, rgba(56, 189, 248, 0.056), transparent),
+    radial-gradient(ellipse 50% 60% at 40% 90%, rgba(168, 85, 247, 0.07), transparent),
+    radial-gradient(ellipse 70% 40% at 75% 75%, rgba(34, 211, 153, 0.042), transparent),
+    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(244, 114, 182, 0.028), transparent);
   pointer-events: none;
   z-index: 0;
 }