@1889ca/ui 0.1.0

package/package.json

@@ -0,0 +1,27 @@
+{
+	"name": "@1889ca/ui",
+	"version": "0.1.0",
+	"type": "module",
+	"main": "src/index.js",
+	"module": "src/index.js",
+	"exports": {
+		".": "./src/index.js",
+		"./tokens": "./src/styles/tokens.css"
+	},
+	"sideEffects": [
+		"*.css"
+	],
+	"files": [
+		"src"
+	],
+	"scripts": {
+		"gallery": "vite"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"peerDependencies": {
+		"react": ">=18.0.0",
+		"react-dom": ">=18.0.0"
+	}
+}

package/src/components/ContextMenu.css

@@ -0,0 +1,50 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-ctx-menu {
+  position: fixed;
+  z-index: 1000;
+  min-width: 170px;
+  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-ctx-in 0.12s var(--ui-ease);
+}
+
+@keyframes ui-ctx-in {
+  from { opacity: 0; transform: scale(0.96); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.ui-ctx-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-ctx-menu-item:hover {
+  background: var(--ui-accent-muted);
+  color: #fff;
+}
+
+.ui-ctx-menu-item--danger:hover {
+  background: var(--ui-danger-glow);
+  color: var(--ui-danger);
+}
+
+.ui-ctx-menu-sep {
+  height: 1px;
+  background: var(--ui-border);
+  margin: 4px 8px;
+}

package/src/components/ContextMenu.jsx

@@ -0,0 +1,54 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+import { useEffect, useRef } from 'react';
+
+/**
+ * Right-click context menu. Renders at (x, y) with a list of action items.
+ * Items: [{ label, action, danger?, separator? }]
+ */
+export default function ContextMenu({ x, y, items, onClose }) {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    function onMouseDown(e) {
+      if (ref.current && !ref.current.contains(e.target)) onClose();
+    }
+    function onKey(e) {
+      if (e.key === 'Escape') onClose();
+    }
+    document.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onMouseDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [onClose]);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    if (rect.right > window.innerWidth) {
+      ref.current.style.left = `${x - rect.width}px`;
+    }
+    if (rect.bottom > window.innerHeight) {
+      ref.current.style.top = `${y - rect.height}px`;
+    }
+  }, [x, y]);
+
+  return (
+    <div ref={ref} className="ui-ctx-menu" style={{ left: x, top: y }}>
+      {items.map((item, i) =>
+        item.separator ? (
+          <div key={i} className="ui-ctx-menu-sep" />
+        ) : (
+          <button
+            key={i}
+            className={`ui-ctx-menu-item${item.danger ? ' ui-ctx-menu-item--danger' : ''}`}
+            onClick={() => { item.action(); onClose(); }}
+          >
+            {item.label}
+          </button>
+        )
+      )}
+    </div>
+  );
+}

package/src/components/DraggablePanel.css

@@ -0,0 +1,73 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-dp-panel {
+  position: absolute;
+  z-index: 30;
+  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);
+  box-shadow: var(--ui-shadow-float);
+  display: flex;
+  flex-direction: column;
+  min-width: 120px;
+  user-select: none;
+}
+
+.ui-dp-titlebar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.4rem 0.65rem;
+  cursor: grab;
+  border-bottom: 1px solid var(--ui-border);
+  flex-shrink: 0;
+}
+
+.ui-dp-titlebar:active {
+  cursor: grabbing;
+}
+
+.ui-dp-title {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--ui-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.ui-dp-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-dp-close:hover {
+  color: var(--ui-text);
+  background: var(--ui-surface-raised);
+}
+
+.ui-dp-body {
+  flex: 1;
+  min-height: 0;
+}
+
+.ui-dp-resize-handle {
+  height: 6px;
+  cursor: ns-resize;
+  background: transparent;
+  border-top: 1px solid var(--ui-border);
+  flex-shrink: 0;
+  transition: background 0.15s;
+}
+
+.ui-dp-resize-handle:hover {
+  background: var(--ui-accent-muted);
+}

package/src/components/DraggablePanel.jsx

@@ -0,0 +1,66 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+import { useRef, useState, useEffect } from 'react';
+
+/**
+ * Floating panel with drag-to-move titlebar and optional vertical resize.
+ * Position persists in localStorage keyed by panelId.
+ * @param {string} storagePrefix - localStorage key prefix (default: 'ui-panel')
+ */
+export default function DraggablePanel({ panelId, title, defaultPos, resizable, minHeight, maxHeight, className, children, onClose, storagePrefix = 'ui-panel' }) {
+  const [pos, setPos] = useState(() => {
+    try { const s = localStorage.getItem(`${storagePrefix}-${panelId}`); return s ? JSON.parse(s) : defaultPos; }
+    catch { return defaultPos; }
+  });
+  const [height, setHeight] = useState(() => {
+    try { const s = localStorage.getItem(`${storagePrefix}-h-${panelId}`); return s ? Number(s) : (minHeight || 200); }
+    catch { return minHeight || 200; }
+  });
+  const dragRef = useRef(null);
+  const resizeRef = useRef(null);
+
+  useEffect(() => {
+    try { localStorage.setItem(`${storagePrefix}-${panelId}`, JSON.stringify(pos)); } catch {}
+  }, [pos, panelId, storagePrefix]);
+
+  useEffect(() => {
+    if (resizable) try { localStorage.setItem(`${storagePrefix}-h-${panelId}`, String(height)); } catch {}
+  }, [height, panelId, resizable, storagePrefix]);
+
+  function handleDragStart(e) {
+    if (e.target.closest('.ui-dp-close') || e.target.closest('button') || e.target.closest('input') || e.target.closest('select')) return;
+    e.preventDefault();
+    const origin = { mx: e.clientX, my: e.clientY, px: pos.x, py: pos.y };
+    dragRef.current = origin;
+    function onMove(me) { setPos({ x: origin.px + me.clientX - origin.mx, y: origin.py + me.clientY - origin.my }); }
+    function onUp() { dragRef.current = null; window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); }
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  }
+
+  function handleResizeStart(e) {
+    e.preventDefault(); e.stopPropagation();
+    const origin = { my: e.clientY, h: height };
+    resizeRef.current = origin;
+    function onMove(me) {
+      const nh = Math.max(minHeight || 100, Math.min(maxHeight || 600, origin.h + me.clientY - origin.my));
+      setHeight(nh);
+    }
+    function onUp() { resizeRef.current = null; window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); }
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  }
+
+  return (
+    <div className={`ui-dp-panel ${className || ''}`} style={{ left: pos.x, top: pos.y }}
+      onMouseDown={(e) => e.stopPropagation()}>
+      <div className="ui-dp-titlebar" onMouseDown={handleDragStart}>
+        <span className="ui-dp-title">{title}</span>
+        {onClose && <button className="ui-dp-close" type="button" onClick={onClose}>×</button>}
+      </div>
+      <div className="ui-dp-body" style={resizable ? { height, overflow: 'auto' } : undefined}>
+        {children}
+      </div>
+      {resizable && <div className="ui-dp-resize-handle" onMouseDown={handleResizeStart} />}
+    </div>
+  );
+}

package/src/components/EditableValue.css

@@ -0,0 +1,32 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-ev-display {
+  cursor: pointer;
+  font-size: 0.8rem;
+  color: var(--ui-text-muted);
+  font-variant-numeric: tabular-nums;
+  border-radius: var(--ui-radius-sm);
+  padding: 0.15rem 0.35rem;
+  transition: all 0.15s var(--ui-ease);
+}
+
+.ui-ev-display:hover {
+  background: var(--ui-surface-raised);
+  color: var(--ui-text);
+  box-shadow: 0 0 0 1px var(--ui-border);
+}
+
+.ui-ev-input {
+  font: inherit;
+  font-size: 0.8rem;
+  font-variant-numeric: tabular-nums;
+  background: var(--ui-surface);
+  backdrop-filter: blur(var(--ui-glass-blur));
+  border: 1px solid var(--ui-accent);
+  box-shadow: 0 0 0 3px var(--ui-accent-subtle);
+  border-radius: var(--ui-radius-sm);
+  color: var(--ui-text);
+  padding: 0.15rem 0.35rem;
+  outline: none;
+  width: 4.5rem;
+}

package/src/components/EditableValue.jsx

@@ -0,0 +1,82 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+import { useState, useRef } from 'react';
+
+/**
+ * Click-to-edit numeric value display. Shows formatted text normally,
+ * switches to an input on click. Commits on Enter/blur, cancels on Escape.
+ * Up/Down arrows increment/decrement by step (Shift = 10x).
+ */
+export default function EditableValue({ value, onChange, suffix = '', min, max, step = 1, displayValue }) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState('');
+  const inputRef = useRef(null);
+
+  function startEdit(e) {
+    e.stopPropagation();
+    setDraft(displayValue ?? formatValue(value, suffix, step));
+    setEditing(true);
+    setTimeout(() => { inputRef.current?.select(); }, 0);
+  }
+
+  function clamp(n) {
+    if (min !== undefined) n = Math.max(min, n);
+    if (max !== undefined) n = Math.min(max, n);
+    if (step >= 1) n = Math.round(n);
+    else n = Math.round(n / step) * step;
+    return n;
+  }
+
+  function commit() {
+    setEditing(false);
+    const raw = draft.replace(/[^0-9.\-]/g, '');
+    let n = parseFloat(raw);
+    if (isNaN(n)) return;
+    if (suffix === '%' && step < 1) n = n / 100;
+    onChange(clamp(n));
+  }
+
+  function nudge(direction, shiftKey) {
+    const multiplier = shiftKey ? 10 : 1;
+    const increment = suffix === '%' && step < 1 ? 0.01 * multiplier : step * multiplier;
+    onChange(clamp(value + direction * increment));
+  }
+
+  function handleKeyDown(e) {
+    if (e.key === 'Enter') { e.preventDefault(); commit(); }
+    else if (e.key === 'Escape') setEditing(false);
+    else if (e.key === 'ArrowUp') { e.preventDefault(); nudge(1, e.shiftKey); setDraft(formatValue(clamp(value + (suffix === '%' && step < 1 ? (e.shiftKey ? 0.1 : 0.01) : step * (e.shiftKey ? 10 : 1))), suffix, step)); }
+    else if (e.key === 'ArrowDown') { e.preventDefault(); nudge(-1, e.shiftKey); setDraft(formatValue(clamp(value - (suffix === '%' && step < 1 ? (e.shiftKey ? 0.1 : 0.01) : step * (e.shiftKey ? 10 : 1))), suffix, step)); }
+    e.stopPropagation();
+  }
+
+  if (editing) {
+    return (
+      <input
+        ref={inputRef}
+        className="ui-ev-input"
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={commit}
+        onKeyDown={handleKeyDown}
+        onClick={(e) => e.stopPropagation()}
+        onMouseDown={(e) => e.stopPropagation()}
+        autoFocus
+      />
+    );
+  }
+
+  const display = displayValue ?? formatValue(value, suffix, step);
+  return (
+    <span className="ui-ev-display" onClick={startEdit} title="Click to edit">
+      {display}
+    </span>
+  );
+}
+
+function formatValue(v, suffix, step) {
+  if (suffix === '%' && step < 1) return `${Math.round(v * 100)}%`;
+  if (suffix === '°') return `${Math.round(v)}°`;
+  if (suffix === 'px') return `${Math.round(v)}px`;
+  if (step < 1) return v.toFixed(2);
+  return `${Math.round(v)}`;
+}

package/src/components/FolderCard.css

@@ -0,0 +1,131 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-folder-wrap {
+  position: relative;
+  border-radius: var(--ui-radius);
+  transition: box-shadow 0.2s var(--ui-ease);
+}
+
+.ui-folder-wrap.ui-folder-drop-active {
+  box-shadow: inset 0 0 0 2px var(--ui-accent), 0 0 20px var(--ui-accent-glow);
+  border-radius: var(--ui-radius);
+}
+
+.ui-folder {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: none;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  padding: 0;
+  cursor: pointer;
+  overflow: hidden;
+  transition: border-color 0.2s var(--ui-ease), transform 0.2s var(--ui-ease-spring), box-shadow 0.2s var(--ui-ease);
+  color: var(--ui-text);
+}
+
+.ui-folder: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-folder-icon {
+  aspect-ratio: 1;
+  background: linear-gradient(
+    135deg,
+    var(--ui-accent-subtle) 0%,
+    transparent 60%
+  ),
+  var(--ui-surface-solid);
+  border-bottom: 1px solid var(--ui-border-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Folder tab shape */
+.ui-folder-icon::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 40%;
+  height: 6px;
+  background: linear-gradient(90deg, var(--ui-accent), transparent);
+  border-radius: 0 0 6px 0;
+  opacity: 0.6;
+}
+
+.ui-folder-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  padding: 0.45rem 0.6rem;
+  backdrop-filter: blur(var(--ui-glass-blur));
+  background: var(--ui-surface);
+}
+
+.ui-folder-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+}
+
+.ui-folder-count {
+  font-size: 0.62rem;
+  color: var(--ui-text-subtle);
+  text-align: left;
+}
+
+/* Folder preview thumbnails */
+.ui-folder-preview-grid {
+  width: 80%;
+  aspect-ratio: 1;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--ui-border-subtle);
+}
+
+.ui-folder-preview-grid img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ui-folder-preview-grid--1 { display: flex; }
+.ui-folder-preview-grid--2 { display: grid; grid-template-columns: 1fr 1fr; }
+
+.ui-folder-preview-grid--3 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+}
+.ui-folder-preview-grid--3 img:first-child { grid-row: 1 / -1; }
+
+.ui-folder-preview-grid--4 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+}
+
+.ui-folder-preview-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60%;
+  aspect-ratio: 1;
+}
+
+.ui-folder-preview-svg {
+  width: 48px;
+  height: 48px;
+  color: var(--ui-text-subtle);
+  opacity: 0.3;
+}

package/src/components/FolderCard.jsx

@@ -0,0 +1,53 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+import InlineEdit from './InlineEdit.jsx';
+
+/**
+ * Folder card with thumbnail preview grid and inline rename.
+ *
+ * @param {string} name - Folder name
+ * @param {number} itemCount - Number of items
+ * @param {Array} thumbnails - Array of image URLs for preview (max 4 shown)
+ * @param {boolean} dropActive - Highlight when dragging over
+ * @param {function} onClick - Click to enter folder
+ * @param {function} onRename - Save new name
+ * @param {function} onDragOver
+ * @param {function} onDragLeave
+ * @param {function} onDrop
+ */
+export default function FolderCard({ name, itemCount, thumbnails = [], dropActive, onClick, onRename, onDragOver, onDragLeave, onDrop }) {
+  const thumbs = thumbnails.slice(0, 4);
+  const count = thumbs.length;
+
+  return (
+    <li
+      className={`ui-folder-wrap${dropActive ? ' ui-folder-drop-active' : ''}`}
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
+    >
+      <div className="ui-folder" onClick={onClick}>
+        <div className="ui-folder-icon">
+          {count === 0 ? (
+            <div className="ui-folder-preview-empty">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="ui-folder-preview-svg">
+                <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>
+            </div>
+          ) : (
+            <div className={`ui-folder-preview-grid ui-folder-preview-grid--${Math.min(count, 4)}`}>
+              {thumbs.map((url, i) => <img key={i} src={url} alt="" draggable={false} />)}
+            </div>
+          )}
+        </div>
+        <div className="ui-folder-info">
+          {onRename ? (
+            <InlineEdit value={name} onSave={onRename} className="ui-folder-name" />
+          ) : (
+            <span className="ui-folder-name">{name}</span>
+          )}
+          <span className="ui-folder-count">{itemCount} {itemCount === 1 ? 'item' : 'items'}</span>
+        </div>
+      </div>
+    </li>
+  );
+}

package/src/components/InlineEdit.css

@@ -0,0 +1,30 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-inline-editable {
+  cursor: text;
+  border-radius: var(--ui-radius-sm);
+  padding: 0.1rem 0.25rem;
+  margin: -0.1rem -0.25rem;
+  transition: all 0.15s var(--ui-ease);
+}
+
+.ui-inline-editable:hover {
+  background: var(--ui-surface-raised);
+  box-shadow: 0 0 0 1px var(--ui-border);
+}
+
+.ui-inline-edit-input {
+  font: inherit;
+  font-weight: 600;
+  background: var(--ui-surface);
+  backdrop-filter: blur(var(--ui-glass-blur));
+  border: 1px solid var(--ui-accent);
+  box-shadow: 0 0 0 3px var(--ui-accent-subtle);
+  border-radius: var(--ui-radius-sm);
+  color: var(--ui-text);
+  padding: 0.1rem 0.25rem;
+  margin: -0.1rem -0.25rem;
+  outline: none;
+  width: 100%;
+  min-width: 60px;
+}

package/src/components/InlineEdit.jsx

@@ -0,0 +1,47 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+import { useState, useRef } from 'react';
+
+/**
+ * Double-click-to-edit text field. Shows a span normally, becomes an input on double-click.
+ * Commits on Enter/blur, cancels on Escape.
+ */
+export default function InlineEdit({ value, onSave, className }) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const inputRef = useRef(null);
+
+  function startEdit(e) {
+    e.stopPropagation();
+    setDraft(value);
+    setEditing(true);
+    setTimeout(() => inputRef.current?.select(), 0);
+  }
+
+  function commit() {
+    setEditing(false);
+    if (draft.trim() && draft.trim() !== value) {
+      onSave(draft.trim());
+    }
+  }
+
+  if (editing) {
+    return (
+      <input
+        ref={inputRef}
+        className="ui-inline-edit-input"
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={commit}
+        onKeyDown={(e) => { if (e.key === 'Enter') commit(); if (e.key === 'Escape') setEditing(false); }}
+        onClick={(e) => e.stopPropagation()}
+        autoFocus
+      />
+    );
+  }
+
+  return (
+    <span className={`${className || ''} ui-inline-editable`} onDoubleClick={startEdit} title="Double-click to rename">
+      {value}
+    </span>
+  );
+}