@1889ca/ui 0.1.0

package/src/components/ItemCard.css

@@ -0,0 +1,111 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-item-card-wrap {
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+}
+
+.ui-item-card-wrap[draggable='true'] {
+  cursor: grab;
+}
+
+.ui-item-card-wrap[draggable='true']:active {
+  cursor: grabbing;
+}
+
+.ui-item-card-wrap.dragging {
+  opacity: 0.4;
+}
+
+.ui-item-card--selected .ui-item-card {
+  border-color: var(--ui-accent);
+  box-shadow:
+    0 0 0 1px var(--ui-accent),
+    0 0 24px var(--ui-accent-glow),
+    inset 0 0 20px rgba(124, 108, 240, 0.06);
+}
+
+.ui-item-card--selected .ui-item-card-thumb::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(124, 108, 240, 0.12), transparent);
+  pointer-events: none;
+}
+
+.ui-item-card {
+  display: flex;
+  flex-direction: column;
+  transition: border-color 0.2s var(--ui-ease), transform 0.2s var(--ui-ease-spring), box-shadow 0.2s var(--ui-ease);
+  padding: 0;
+  overflow: hidden;
+  border-radius: var(--ui-radius);
+  background: var(--ui-surface);
+  backdrop-filter: blur(var(--ui-glass-blur));
+  border: 1px solid var(--ui-border);
+  border-top-color: var(--ui-border-strong);
+}
+
+.ui-item-card:hover {
+  border-color: var(--ui-border-strong);
+  transform: translateY(-2px) scale(1.01);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.ui-item-card-thumb {
+  position: relative;
+  aspect-ratio: 1;
+  background: var(--ui-surface-solid);
+  overflow: hidden;
+  border-bottom: 1px solid var(--ui-border-subtle);
+}
+
+.ui-item-card-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s var(--ui-ease);
+}
+
+.ui-item-card:hover .ui-item-card-thumb img {
+  transform: scale(1.04);
+}
+
+.ui-item-card-thumb-empty {
+  width: 100%;
+  height: 100%;
+  background:
+    radial-gradient(
+      circle at 50% 40%,
+      var(--ui-accent-subtle),
+      transparent 70%
+    ),
+    var(--ui-surface-solid);
+}
+
+.ui-item-card-info {
+  display: flex;
+  align-items: baseline;
+  gap: 0.4rem;
+  padding: 0.5rem 0.6rem;
+}
+
+.ui-item-card-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--ui-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+
+.ui-item-card-meta {
+  font-size: 0.65rem;
+  color: var(--ui-text-subtle);
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+}

package/src/components/ItemCard.jsx

@@ -0,0 +1,42 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+/**
+ * Grid card for an item (project, file, etc).
+ * Shows a square thumbnail, name, and optional metadata.
+ *
+ * @param {string} thumbnail - Image URL (null = empty state)
+ * @param {string} name - Item name
+ * @param {string} meta - Secondary text (e.g. "2K · 1:1")
+ * @param {boolean} selected - Selection highlight
+ * @param {boolean} draggable - Enable drag
+ * @param {function} onClick - Click handler (receives event)
+ * @param {function} onDoubleClick - Double-click to open
+ * @param {function} onContextMenu - Right-click handler
+ * @param {function} onDragStart - Drag start handler
+ * @param {function} onDragEnd - Drag end handler
+ */
+export default function ItemCard({ thumbnail, name, meta, selected, draggable, onClick, onDoubleClick, onContextMenu, onDragStart, onDragEnd }) {
+  return (
+    <li
+      className={`ui-item-card-wrap${selected ? ' ui-item-card--selected' : ''}`}
+      draggable={draggable}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onContextMenu={onContextMenu}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+    >
+      <div className="ui-item-card">
+        <div className="ui-item-card-thumb">
+          {thumbnail
+            ? <img src={thumbnail} alt={name} draggable={false} />
+            : <div className="ui-item-card-thumb-empty" />}
+        </div>
+        <div className="ui-item-card-info">
+          <span className="ui-item-card-name">{name}</span>
+          {meta && <span className="ui-item-card-meta">{meta}</span>}
+        </div>
+      </div>
+    </li>
+  );
+}

package/src/components/ItemGrid.css

@@ -0,0 +1,13 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-item-grid {
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--ui-grid-min, 160px), 1fr));
+  gap: 0.75rem;
+}
+
+.ui-item-grid--drop-active {
+  background: var(--ui-accent-subtle);
+  border-radius: var(--ui-radius);
+}

package/src/components/ItemGrid.jsx

@@ -0,0 +1,31 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+/**
+ * Responsive grid for items (projects, files, etc).
+ * Click on empty space deselects. Supports drag-over styling for folder drops.
+ *
+ * @param {string} minItemWidth - CSS min-width for grid items (default: '160px')
+ * @param {boolean} dropActive - Shows drop-target highlight
+ * @param {function} onGridClick - Called when clicking empty grid area
+ * @param {function} onDragOver - Drag over handler for folder-drop
+ * @param {function} onDragLeave - Drag leave handler
+ * @param {function} onDrop - Drop handler
+ */
+export default function ItemGrid({ minItemWidth = '160px', dropActive, onGridClick, onDragOver, onDragLeave, onDrop, children }) {
+  function handleClick(e) {
+    if (e.target === e.currentTarget && onGridClick) onGridClick(e);
+  }
+
+  return (
+    <ul
+      className={`ui-item-grid${dropActive ? ' ui-item-grid--drop-active' : ''}`}
+      style={{ '--ui-grid-min': minItemWidth }}
+      onClick={handleClick}
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
+    >
+      {children}
+    </ul>
+  );
+}

package/src/components/Lightbox.css

@@ -0,0 +1,80 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-lightbox-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  background: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  animation: ui-lightbox-fade-in 0.2s var(--ui-ease);
+}
+
+@keyframes ui-lightbox-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.ui-lightbox-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  max-width: 90vw;
+  max-height: 90vh;
+  cursor: default;
+  animation: ui-lightbox-img-in 0.3s var(--ui-ease-spring);
+}
+
+@keyframes ui-lightbox-img-in {
+  from { opacity: 0; transform: scale(0.94); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.ui-lightbox-img {
+  max-width: 90vw;
+  max-height: 80vh;
+  object-fit: contain;
+  border-radius: var(--ui-radius-lg);
+  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.1);
+}
+
+.ui-lightbox-caption {
+  font-size: 0.85rem;
+  color: var(--ui-text-muted);
+}
+
+.ui-lightbox-nav {
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(18, 18, 24, 0.6);
+  backdrop-filter: blur(var(--ui-glass-blur));
+  border: 1px solid var(--ui-border);
+  color: var(--ui-text);
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s var(--ui-ease);
+}
+
+.ui-lightbox-nav:hover {
+  background: rgba(18, 18, 24, 0.85);
+  border-color: var(--ui-border-strong);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
+}
+
+.ui-lightbox-nav svg {
+  width: 20px;
+  height: 20px;
+}
+
+.ui-lightbox-prev { left: 1.5rem; }
+.ui-lightbox-next { right: 1.5rem; }

package/src/components/Lightbox.jsx

@@ -0,0 +1,41 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+import { useEffect, useCallback } from 'react';
+
+/**
+ * Fullscreen image viewer with keyboard navigation.
+ * Space/Escape closes, ArrowLeft/ArrowRight navigates.
+ */
+export default function Lightbox({ src, name, onClose, onPrev, onNext }) {
+  const handleKey = useCallback((e) => {
+    if (e.key === 'Escape' || e.key === ' ') {
+      e.preventDefault();
+      onClose();
+    }
+    if (e.key === 'ArrowLeft' && onPrev) onPrev();
+    if (e.key === 'ArrowRight' && onNext) onNext();
+  }, [onClose, onPrev, onNext]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [handleKey]);
+
+  return (
+    <div className="ui-lightbox-backdrop" onClick={onClose}>
+      <div className="ui-lightbox-content" onClick={(e) => e.stopPropagation()}>
+        <img src={src} alt={name} className="ui-lightbox-img" />
+        {name && <div className="ui-lightbox-caption">{name}</div>}
+      </div>
+      {onPrev && (
+        <button className="ui-lightbox-nav ui-lightbox-prev" onClick={(e) => { e.stopPropagation(); onPrev(); }}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6" /></svg>
+        </button>
+      )}
+      {onNext && (
+        <button className="ui-lightbox-nav ui-lightbox-next" onClick={(e) => { e.stopPropagation(); onNext(); }}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 18l6-6-6-6" /></svg>
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/Modal.css

@@ -0,0 +1,72 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  animation: ui-modal-bg-in 0.2s var(--ui-ease);
+}
+
+@keyframes ui-modal-bg-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.ui-modal {
+  background: rgba(18, 18, 24, 0.85);
+  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);
+  width: 320px;
+  box-shadow: var(--ui-shadow-float);
+  animation: ui-modal-in 0.25s var(--ui-ease-spring);
+}
+
+@keyframes ui-modal-in {
+  from { opacity: 0; transform: scale(0.95) translateY(8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+.ui-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--ui-border);
+}
+
+.ui-modal-title {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--ui-text);
+}
+
+.ui-modal-close {
+  background: none;
+  border: none;
+  color: var(--ui-text-subtle);
+  font-size: 1.2rem;
+  cursor: pointer;
+  padding: 0.2rem;
+  line-height: 1;
+  transition: color 0.15s;
+  border-radius: var(--ui-radius-sm);
+}
+
+.ui-modal-close:hover {
+  color: var(--ui-text);
+  background: var(--ui-surface-raised);
+}
+
+.ui-modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1.25rem;
+}

package/src/components/Modal.jsx

@@ -0,0 +1,23 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+/**
+ * Generic modal with backdrop, title bar, and close button.
+ * Renders children in the body. Closes on backdrop click.
+ */
+export default function Modal({ open, title, onClose, width, children }) {
+  if (!open) return null;
+
+  return (
+    <div className="ui-modal-backdrop" onClick={onClose}>
+      <div className="ui-modal" style={width ? { width } : undefined} onClick={(e) => e.stopPropagation()}>
+        <div className="ui-modal-header">
+          <span className="ui-modal-title">{title}</span>
+          <button className="ui-modal-close" type="button" onClick={onClose}>×</button>
+        </div>
+        <div className="ui-modal-body">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/PageHeader.css

@@ -0,0 +1,76 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1.5rem;
+  border-bottom: 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: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.ui-page-header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.ui-page-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Breadcrumbs */
+
+.ui-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.85rem;
+}
+
+.ui-breadcrumb-segment {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.ui-breadcrumb-sep {
+  color: var(--ui-text-subtle);
+  font-size: 0.8rem;
+}
+
+.ui-breadcrumb-link {
+  color: var(--ui-text-muted);
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: color 0.2s var(--ui-ease);
+}
+
+.ui-breadcrumb-link:hover {
+  color: var(--ui-text);
+}
+
+.ui-breadcrumb-current {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--ui-text);
+}
+
+/* Selection bar */
+
+.ui-selection-count {
+  font-size: 0.82rem;
+  color: var(--ui-accent);
+  padding: 0.15rem 0.5rem;
+  background: var(--ui-accent-subtle);
+  border-radius: var(--ui-radius-sm);
+  font-variant-numeric: tabular-nums;
+}

package/src/components/PageHeader.jsx

@@ -0,0 +1,45 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+/**
+ * Sticky page header with left (logo + breadcrumbs) and right (actions) slots.
+ * Switches to a selection bar when selectionCount > 0.
+ *
+ * @param {ReactNode} logo - Logo element
+ * @param {Array} breadcrumbs - [{label, onClick?}] for breadcrumb trail
+ * @param {ReactNode} actions - Normal action buttons
+ * @param {number} selectionCount - Number of selected items (0 = normal mode)
+ * @param {ReactNode} selectionActions - Actions shown in selection mode
+ */
+export default function PageHeader({ logo, breadcrumbs, actions, selectionCount = 0, selectionActions }) {
+  return (
+    <header className="ui-page-header">
+      <div className="ui-page-header-left">
+        {logo}
+        {breadcrumbs && breadcrumbs.length > 0 && (
+          <nav className="ui-breadcrumb">
+            {breadcrumbs.map((crumb, i) => (
+              <span key={i} className="ui-breadcrumb-segment">
+                <span className="ui-breadcrumb-sep">/</span>
+                {crumb.onClick ? (
+                  <span className="ui-breadcrumb-link" onClick={crumb.onClick}>{crumb.label}</span>
+                ) : (
+                  crumb.node || <span className="ui-breadcrumb-current">{crumb.label}</span>
+                )}
+              </span>
+            ))}
+          </nav>
+        )}
+      </div>
+      {selectionCount > 0 ? (
+        <div className="ui-page-header-actions">
+          <span className="ui-selection-count">{selectionCount} selected</span>
+          {selectionActions}
+        </div>
+      ) : (
+        <div className="ui-page-header-actions">
+          {actions}
+        </div>
+      )}
+    </header>
+  );
+}

package/src/components/SlidePanel.css

@@ -0,0 +1,82 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-slide-panel {
+  position: fixed;
+  top: 0;
+  height: 100dvh;
+  background: rgba(12, 12, 18, 0.85);
+  backdrop-filter: blur(var(--ui-glass-blur-heavy));
+  border-right: 1px solid var(--ui-border);
+  transition: transform 0.3s var(--ui-ease);
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--ui-shadow-float);
+}
+
+.ui-slide-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.85rem 1rem;
+  border-bottom: 1px solid var(--ui-border);
+  flex-shrink: 0;
+}
+
+.ui-slide-panel-title {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--ui-text);
+}
+
+.ui-slide-panel-close {
+  background: none;
+  border: none;
+  color: var(--ui-text-muted);
+  font-size: 1.1rem;
+  cursor: pointer;
+  line-height: 1;
+  border-radius: var(--ui-radius-sm);
+  padding: 0.1rem 0.2rem;
+  transition: color 0.15s, background 0.15s;
+}
+
+.ui-slide-panel-close:hover {
+  color: var(--ui-text);
+  background: var(--ui-surface-raised);
+}
+
+.ui-slide-panel-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--ui-border);
+  flex-shrink: 0;
+}
+
+.ui-slide-panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.75rem;
+}
+
+/* Tab button primitive */
+.ui-tab {
+  flex: 1;
+  padding: 0.5rem 0.5rem;
+  font-size: 0.72rem;
+  font-weight: 500;
+  color: var(--ui-text-muted);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: color 0.2s var(--ui-ease), border-color 0.2s var(--ui-ease);
+}
+
+.ui-tab:hover {
+  color: var(--ui-text);
+}
+
+.ui-tab--active {
+  color: var(--ui-accent);
+  border-bottom-color: var(--ui-accent);
+}

package/src/components/SlidePanel.jsx

@@ -0,0 +1,37 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+/**
+ * Slide-out side panel. Slides in from the specified side (default: left).
+ * Generic container — consumers provide tabs, body content, etc.
+ *
+ * @param {boolean} open - Whether panel is visible
+ * @param {string} title - Panel title
+ * @param {string} side - 'left' or 'right' (default: 'left')
+ * @param {number|string} width - Panel width (default: 260)
+ * @param {function} onClose - Close handler
+ * @param {ReactNode} tabs - Optional tab bar content
+ * @param {ReactNode} children - Panel body content
+ */
+export default function SlidePanel({ open, title, side = 'left', width = 260, onClose, tabs, children }) {
+  const isRight = side === 'right';
+  const style = {
+    width: typeof width === 'number' ? `${width}px` : width,
+    [isRight ? 'right' : 'left']: 0,
+    transform: open
+      ? 'translateX(0)'
+      : `translateX(${isRight ? '100%' : '-100%'})`,
+  };
+
+  return (
+    <div className="ui-slide-panel" style={style}>
+      <div className="ui-slide-panel-header">
+        <span className="ui-slide-panel-title">{title}</span>
+        <button className="ui-slide-panel-close" type="button" onClick={onClose}>×</button>
+      </div>
+      {tabs && <div className="ui-slide-panel-tabs">{tabs}</div>}
+      <div className="ui-slide-panel-body">
+        {children}
+      </div>
+    </div>
+  );
+}