@1889ca/ui 0.1.0

package/src/components/ZoomControls.css

@@ -0,0 +1,51 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-zoom-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.15rem;
+  background: var(--ui-surface);
+  backdrop-filter: blur(var(--ui-glass-blur));
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  padding: 0.2rem 0.35rem;
+  box-shadow: var(--ui-shadow);
+}
+
+.ui-zoom-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: transparent;
+  border: none;
+  border-radius: var(--ui-radius-sm);
+  color: var(--ui-text-muted);
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.15s var(--ui-ease);
+}
+
+.ui-zoom-btn:hover {
+  background: var(--ui-surface-raised);
+  color: var(--ui-text);
+}
+
+.ui-zoom-btn:active {
+  transform: scale(0.92);
+}
+
+.ui-zoom-fit {
+  font-size: 0.72rem;
+  width: auto;
+  padding: 0 0.45rem;
+}
+
+.ui-zoom-val {
+  font-size: 0.7rem;
+  color: var(--ui-text-muted);
+  min-width: 2.4rem;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}

package/src/components/ZoomControls.jsx

@@ -0,0 +1,19 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+/**
+ * Compact zoom control bar: -, percentage, +, Fit.
+ */
+export default function ZoomControls({ zoom, setZoom, resetView, min = 0.2, max = 5, step = 0.25 }) {
+  return (
+    <div className="ui-zoom-controls">
+      <button className="ui-zoom-btn" type="button" title="Zoom out"
+        onClick={() => setZoom((z) => Math.max(min, +(z - step).toFixed(2)))}>−</button>
+      <span className="ui-zoom-val">{Math.round(zoom * 100)}%</span>
+      <button className="ui-zoom-btn" type="button" title="Zoom in"
+        onClick={() => setZoom((z) => Math.min(max, +(z + step).toFixed(2)))}>+</button>
+      {resetView && (
+        <button className="ui-zoom-btn ui-zoom-fit" onClick={resetView} title="Fit to view" type="button">Fit</button>
+      )}
+    </div>
+  );
+}

package/src/hooks/useItemDrag.js

@@ -0,0 +1,81 @@
+/** Contract: contracts/packages-ui-hooks/rules.md */
+import { useState, useRef, useCallback } from 'react';
+
+/**
+ * Drag-and-drop hook for moving items between folders/containers.
+ *
+ * @param {Set} selectedIds - Currently selected item IDs
+ * @param {function} onMove - Called with (itemIds, targetId) when items are dropped on a target
+ * @returns {Object} Drag handlers and state
+ */
+export default function useItemDrag(selectedIds, onMove) {
+  const [dragOverTarget, setDragOverTarget] = useState(null);
+  const [dragOverDesktop, setDragOverDesktop] = useState(false);
+  const dragDataRef = useRef(null);
+
+  const onItemDragStart = useCallback((e, itemId) => {
+    const ids = selectedIds.has(itemId) ? [...selectedIds] : [itemId];
+    dragDataRef.current = ids;
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/plain', String(itemId));
+    e.currentTarget.classList.add('dragging');
+  }, [selectedIds]);
+
+  const onItemDragEnd = useCallback((e) => {
+    e.currentTarget.classList.remove('dragging');
+    dragDataRef.current = null;
+    setDragOverTarget(null);
+    setDragOverDesktop(false);
+  }, []);
+
+  const onTargetDragOver = useCallback((e, targetId) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    setDragOverTarget(targetId);
+  }, []);
+
+  const onTargetDragLeave = useCallback((e, targetId) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      setDragOverTarget((cur) => cur === targetId ? null : cur);
+    }
+  }, []);
+
+  const onTargetDrop = useCallback((e, targetId) => {
+    e.preventDefault();
+    setDragOverTarget(null);
+    const ids = dragDataRef.current;
+    if (ids && ids.length && onMove) onMove(ids, targetId);
+  }, [onMove]);
+
+  const onDesktopDragOver = useCallback((e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    setDragOverDesktop(true);
+  }, []);
+
+  const onDesktopDragLeave = useCallback((e) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      setDragOverDesktop(false);
+    }
+  }, []);
+
+  const onDesktopDrop = useCallback((e) => {
+    e.preventDefault();
+    setDragOverDesktop(false);
+    const ids = dragDataRef.current;
+    if (ids && ids.length && onMove) onMove(ids, null);
+  }, [onMove]);
+
+  return {
+    dragOverTarget,
+    dragOverDesktop,
+    onItemDragStart,
+    onItemDragEnd,
+    onTargetDragOver,
+    onTargetDragLeave,
+    onTargetDrop,
+    onDesktopDragOver,
+    onDesktopDragLeave,
+    onDesktopDrop,
+  };
+}

package/src/hooks/useKeyboardShortcuts.js

@@ -0,0 +1,36 @@
+/** Contract: contracts/packages-ui-hooks/rules.md */
+import { useEffect } from 'react';
+
+/**
+ * Register keyboard shortcuts. Ignores events from input/textarea.
+ *
+ * @param {Object} shortcuts - Map of key to handler: { 'Space': fn, 'Escape': fn, 'Meta+a': fn }
+ * @param {Array} deps - Dependency array for the effect
+ */
+export default function useKeyboardShortcuts(shortcuts, deps = []) {
+  useEffect(() => {
+    function onKeyDown(e) {
+      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+
+      for (const [combo, handler] of Object.entries(shortcuts)) {
+        if (!handler) continue;
+        const parts = combo.split('+');
+        const key = parts[parts.length - 1];
+        const needsMeta = parts.includes('Meta') || parts.includes('Ctrl');
+        const needsShift = parts.includes('Shift');
+
+        const metaMatch = needsMeta ? (e.metaKey || e.ctrlKey) : !(e.metaKey || e.ctrlKey);
+        const shiftMatch = needsShift ? e.shiftKey : !e.shiftKey;
+
+        if (e.key === key && metaMatch && shiftMatch) {
+          e.preventDefault();
+          handler(e);
+          return;
+        }
+      }
+    }
+
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, deps);
+}

package/src/hooks/useLightboxNav.js

@@ -0,0 +1,39 @@
+/** Contract: contracts/packages-ui-hooks/rules.md */
+import { useState, useCallback } from 'react';
+
+/**
+ * Lightbox navigation hook. Manages open/close state and prev/next within a filtered list.
+ *
+ * @param {Array} items - All items (must have `id` property)
+ * @param {function} hasImage - Predicate: (item) => boolean, filters items for lightbox navigation
+ * @returns {Object} { lightboxId, lightboxItem, open, close, prev, next, canPrev, canNext }
+ */
+export default function useLightboxNav(items, hasImage) {
+  const [lightboxId, setLightboxId] = useState(null);
+
+  const withImages = items.filter(hasImage);
+  const idx = withImages.findIndex((item) => item.id === lightboxId);
+  const lightboxItem = idx !== -1 ? withImages[idx] : null;
+
+  const open = useCallback((id) => setLightboxId(id), []);
+  const close = useCallback(() => setLightboxId(null), []);
+
+  const prev = useCallback(() => {
+    if (idx > 0) setLightboxId(withImages[idx - 1].id);
+  }, [withImages, idx]);
+
+  const next = useCallback(() => {
+    if (idx < withImages.length - 1) setLightboxId(withImages[idx + 1].id);
+  }, [withImages, idx]);
+
+  return {
+    lightboxId,
+    lightboxItem,
+    open,
+    close,
+    prev,
+    next,
+    canPrev: idx > 0,
+    canNext: idx < withImages.length - 1,
+  };
+}

package/src/hooks/useMultiSelect.js

@@ -0,0 +1,48 @@
+/** Contract: contracts/packages-ui-hooks/rules.md */
+import { useState, useCallback } from 'react';
+
+/**
+ * Multi-select hook with Cmd+click, Shift+click, and Ctrl+A support.
+ * Returns selection state + handlers to wire into item components.
+ *
+ * @param {Array} items - Array of items with `id` property
+ * @returns {Object} { selectedIds, lastSelectedId, handleClick, selectAll, clearSelection, setSelectedIds }
+ */
+export default function useMultiSelect(items) {
+  const [selectedIds, setSelectedIds] = useState(new Set());
+  const [lastSelectedId, setLastSelectedId] = useState(null);
+
+  const handleClick = useCallback((e, itemId) => {
+    if (e.detail === 2) return; // skip, let doubleClick handle it
+
+    if (e.metaKey || e.ctrlKey) {
+      setSelectedIds((prev) => {
+        const next = new Set(prev);
+        next.has(itemId) ? next.delete(itemId) : next.add(itemId);
+        return next;
+      });
+      setLastSelectedId(itemId);
+    } else if (e.shiftKey && lastSelectedId !== null) {
+      const ids = items.map((item) => item.id);
+      const si = ids.indexOf(lastSelectedId);
+      const ei = ids.indexOf(itemId);
+      if (si !== -1 && ei !== -1) {
+        const [from, to] = [Math.min(si, ei), Math.max(si, ei)];
+        setSelectedIds(new Set(ids.slice(from, to + 1)));
+      }
+    } else {
+      setSelectedIds(new Set([itemId]));
+      setLastSelectedId(itemId);
+    }
+  }, [items, lastSelectedId]);
+
+  const selectAll = useCallback(() => {
+    setSelectedIds(new Set(items.map((item) => item.id)));
+  }, [items]);
+
+  const clearSelection = useCallback(() => {
+    setSelectedIds(new Set());
+  }, []);
+
+  return { selectedIds, lastSelectedId, handleClick, selectAll, clearSelection, setSelectedIds };
+}

package/src/icons/common.jsx

@@ -0,0 +1,44 @@
+/** Contract: contracts/packages-ui-icons/rules.md */
+
+export function DownloadIcon({ size = 14 }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
+      <polyline points="7 10 12 15 17 10" />
+      <line x1="12" y1="15" x2="12" y2="3" />
+    </svg>
+  );
+}
+
+export function FolderIcon({ size = 18 }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+    </svg>
+  );
+}
+
+export function ChevronLeftIcon({ size = 20 }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M15 18l-6-6 6-6" />
+    </svg>
+  );
+}
+
+export function ChevronRightIcon({ size = 20 }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M9 18l6-6-6-6" />
+    </svg>
+  );
+}
+
+export function CloseIcon({ size = 16 }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  );
+}

package/src/index.js

@@ -0,0 +1,41 @@
+/* Styles — import order matters */
+import './styles/tokens.css';
+import './styles/reset.css';
+import './styles/primitives.css';
+
+/* Component styles */
+import './components/ContextMenu.css';
+import './components/Lightbox.css';
+import './components/DraggablePanel.css';
+import './components/EditableValue.css';
+import './components/InlineEdit.css';
+import './components/Modal.css';
+import './components/ZoomControls.css';
+import './components/PageHeader.css';
+import './components/ItemGrid.css';
+import './components/ItemCard.css';
+import './components/FolderCard.css';
+import './components/SlidePanel.css';
+
+/* Components */
+export { default as ContextMenu } from './components/ContextMenu.jsx';
+export { default as Lightbox } from './components/Lightbox.jsx';
+export { default as DraggablePanel } from './components/DraggablePanel.jsx';
+export { default as EditableValue } from './components/EditableValue.jsx';
+export { default as InlineEdit } from './components/InlineEdit.jsx';
+export { default as Modal } from './components/Modal.jsx';
+export { default as ZoomControls } from './components/ZoomControls.jsx';
+export { default as PageHeader } from './components/PageHeader.jsx';
+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';
+
+/* Hooks */
+export { default as useMultiSelect } from './hooks/useMultiSelect.js';
+export { default as useItemDrag } from './hooks/useItemDrag.js';
+export { default as useLightboxNav } from './hooks/useLightboxNav.js';
+export { default as useKeyboardShortcuts } from './hooks/useKeyboardShortcuts.js';
+
+/* Icons */
+export { DownloadIcon, FolderIcon, ChevronLeftIcon, ChevronRightIcon, CloseIcon } from './icons/common.jsx';

package/src/styles/primitives.css

@@ -0,0 +1,115 @@
+/** Contract: contracts/packages-ui-styles/rules.md */
+
+/* Shared primitive classes */
+
+.ui-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1.25rem;
+  border-radius: var(--ui-radius);
+  border: 1px solid var(--ui-border);
+  font-size: 0.85rem;
+  font-weight: 500;
+  transition: all 0.2s var(--ui-ease);
+  white-space: nowrap;
+  backdrop-filter: blur(var(--ui-glass-blur));
+  background: var(--ui-surface);
+}
+
+.ui-btn-primary {
+  background: var(--ui-accent);
+  border-color: transparent;
+  color: #fff;
+  box-shadow: 0 0 16px var(--ui-accent-glow);
+}
+
+.ui-btn-primary:hover {
+  background: var(--ui-accent-hover);
+  box-shadow: 0 0 24px var(--ui-accent-glow);
+  transform: translateY(-1px);
+}
+
+.ui-btn-ghost {
+  background: var(--ui-surface);
+  color: var(--ui-text-muted);
+  border: 1px solid var(--ui-border);
+}
+
+.ui-btn-ghost:hover {
+  color: var(--ui-text);
+  border-color: var(--ui-border-strong);
+  background: var(--ui-surface-raised);
+}
+
+.ui-btn-danger {
+  background: var(--ui-danger);
+  border-color: transparent;
+  color: #fff;
+}
+
+.ui-btn-danger:hover {
+  background: color-mix(in srgb, var(--ui-danger) 85%, #000);
+  box-shadow: 0 0 16px var(--ui-danger-glow);
+}
+
+.ui-btn-danger-ghost {
+  background: transparent;
+  color: var(--ui-danger);
+  border-color: var(--ui-danger);
+}
+
+.ui-btn-danger-ghost:hover {
+  color: var(--ui-danger);
+  border-color: var(--ui-danger);
+  box-shadow: 0 0 12px var(--ui-danger-glow);
+  background: color-mix(in srgb, var(--ui-danger) 10%, transparent);
+}
+
+.ui-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.ui-btn-sm {
+  padding: 0.25rem 0.6rem;
+  font-size: 0.78rem;
+}
+
+.ui-card {
+  background: var(--ui-surface);
+  backdrop-filter: blur(var(--ui-glass-blur));
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-lg);
+  padding: 1.5rem;
+}
+
+.ui-input {
+  background: var(--ui-surface);
+  backdrop-filter: blur(var(--ui-glass-blur));
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  color: var(--ui-text);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.85rem;
+  outline: none;
+  transition: border-color 0.2s var(--ui-ease), box-shadow 0.2s var(--ui-ease);
+  width: 100%;
+}
+
+.ui-input:focus {
+  border-color: var(--ui-accent);
+  box-shadow: 0 0 0 3px var(--ui-accent-subtle);
+}
+
+.ui-input::placeholder {
+  color: var(--ui-text-subtle);
+}
+
+.ui-page {
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+}

package/src/styles/reset.css

@@ -0,0 +1,61 @@
+/** Contract: contracts/packages-ui-styles/rules.md */
+
+/* Minimal reset for @mcm/ui consumers */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  background-color: var(--ui-bg);
+  color: var(--ui-text);
+  font-family: var(--ui-font-sans);
+  line-height: 1.6;
+  min-height: 100dvh;
+}
+
+a {
+  color: var(--ui-accent);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+button {
+  cursor: pointer;
+  font-family: inherit;
+}
+
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/src/styles/tokens.css

@@ -0,0 +1,52 @@
+/** Contract: contracts/packages-ui-styles/rules.md */
+
+/* Design tokens — shared across all @mcm/ui consumers */
+:root {
+  /* Core palette */
+  --ui-bg: #08080c;
+  --ui-surface: rgba(255, 255, 255, 0.04);
+  --ui-surface-raised: rgba(255, 255, 255, 0.07);
+  --ui-surface-solid: #111116;
+  --ui-border: rgba(255, 255, 255, 0.08);
+  --ui-border-subtle: rgba(255, 255, 255, 0.05);
+  --ui-border-strong: rgba(255, 255, 255, 0.14);
+
+  /* Accent — indigo-violet */
+  --ui-accent: #7c6cf0;
+  --ui-accent-hover: #6a5bd8;
+  --ui-accent-glow: rgba(124, 108, 240, 0.25);
+  --ui-accent-subtle: rgba(124, 108, 240, 0.08);
+  --ui-accent-muted: rgba(124, 108, 240, 0.15);
+
+  /* Semantic */
+  --ui-danger: #f06068;
+  --ui-danger-glow: rgba(240, 96, 104, 0.2);
+  --ui-success: #34d399;
+
+  /* Text */
+  --ui-text: #e8e6f0;
+  --ui-text-muted: #8a879c;
+  --ui-text-subtle: #56536a;
+
+  /* Radius */
+  --ui-radius-sm: 6px;
+  --ui-radius: 10px;
+  --ui-radius-lg: 14px;
+
+  /* Typography */
+  --ui-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --ui-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+
+  /* Glass */
+  --ui-glass-blur: 16px;
+  --ui-glass-blur-heavy: 24px;
+
+  /* Shadows & glow */
+  --ui-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.5);
+  --ui-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.05);
+  --ui-shadow-float: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
+
+  /* Transitions */
+  --ui-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --ui-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+}