@package-uploader/ui 1.1.2 → 1.1.3

package/src/index.css

@@ -1687,123 +1687,64 @@ body {
 }
 
 /* ========================================
-   BLOCK GROUPING PANEL
+   BLOCK CARDS (visual block preview)
    ======================================== */
 
-.bgp-toggle-btn {
-  margin-top: 0.5rem;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  color: var(--color-text-muted);
-  transition: all 0.15s;
-}
-
-.bgp-toggle-btn:hover {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-}
-
-.bgp-toggle-btn.active {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-  background: rgba(37, 99, 235, 0.05);
-}
-
-.bgp-toggle-count {
-  background: var(--color-primary);
-  color: white;
-  font-size: 0.625rem;
-  padding: 0.0625rem 0.375rem;
-  border-radius: 999px;
-  font-weight: 600;
-}
-
-.block-grouping-panel {
-  margin-top: 0.5rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius);
-  background: var(--color-bg);
-  overflow: hidden;
-}
-
-.bgp-header {
+.block-cards {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  background: var(--color-bg-secondary);
-  border-bottom: 1px solid var(--color-border);
-}
-
-.bgp-title {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--color-text);
-}
-
-.bgp-count {
-  font-size: 0.7rem;
-  color: var(--color-primary);
-  background: rgba(37, 99, 235, 0.1);
-  padding: 0.0625rem 0.375rem;
-  border-radius: 999px;
+  flex-direction: column;
+  gap: 3px;
+  padding: 0.375rem 0;
 }
 
-/* Schematic preview */
-.bgp-preview {
-  padding: 0.5rem;
+.block-card {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.bgp-block {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.375rem 0.5rem;
+  padding: 0.5rem 0.625rem;
   border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border);
+  border-left: 4px solid var(--block-accent, #6b7280);
+  background: var(--color-bg);
   cursor: pointer;
   transition: all 0.15s;
-  border: 1px solid transparent;
-  font-size: 0.75rem;
 }
 
-.bgp-block:hover:not(.grouped) {
-  background: var(--color-bg-secondary);
-  border-color: var(--color-border);
+.block-card:hover:not(.grouped) {
+  border-color: var(--color-primary);
+  border-left-color: var(--block-accent, #6b7280);
+  background: rgba(37, 99, 235, 0.03);
 }
 
-.bgp-block.selected {
+.block-card.selected {
   background: rgba(37, 99, 235, 0.08);
   border-color: var(--color-primary);
+  border-left-color: var(--block-accent, #6b7280);
+  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2);
 }
 
-.bgp-block.grouped {
+.block-card.grouped {
   cursor: default;
-  opacity: 0.7;
+  opacity: 0.75;
+  background: var(--color-bg-secondary);
 }
 
-.bgp-block-color {
-  width: 4px;
-  height: 1.25rem;
-  border-radius: 2px;
-  background: var(--block-color, #6b7280);
-  flex-shrink: 0;
+.block-card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 1.25rem;
 }
 
-.bgp-block-label {
-  font-weight: 500;
+.block-card-type {
+  font-size: 0.8rem;
+  font-weight: 600;
   color: var(--color-text);
   white-space: nowrap;
 }
 
-.bgp-block-title {
+.block-card-title {
+  font-size: 0.75rem;
   color: var(--color-text-muted);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1812,22 +1753,33 @@ body {
   min-width: 0;
 }
 
-.bgp-block-check {
+.block-card-check {
   color: var(--color-primary);
-  font-weight: 600;
+  font-weight: 700;
+  font-size: 0.875rem;
   flex-shrink: 0;
   margin-left: auto;
 }
 
-/* Group wrapper in preview */
-.bgp-group-wrapper {
+.block-card .tree-class-input-sm {
+  margin-left: 0;
+  max-width: 100%;
+  margin-top: 0;
+}
+
+/* Group container wrapping adjacent block cards */
+.block-group-container {
   border: 2px dashed var(--color-primary);
   border-radius: var(--radius);
-  padding: 0.25rem;
+  padding: 0.375rem;
   margin: 0.25rem 0;
   background: rgba(37, 99, 235, 0.02);
 }
 
+.block-group-container .block-card {
+  border-left-width: 3px;
+}
+
 .bgp-group-header {
   display: flex;
   align-items: center;
@@ -1924,7 +1876,9 @@ body {
 /* Create group controls */
 .bgp-create {
   padding: 0.5rem 0.75rem;
-  border-top: 1px solid var(--color-border);
+  margin-top: 0.375rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
   background: var(--color-bg-secondary);
   display: flex;
   flex-direction: column;

package/src/components/BlockGroupingPanel.tsx

@@ -1,264 +0,0 @@
-import { useState } from 'react';
-import { useBlockGrouping, type BlockGroup } from '../hooks/useBlockGrouping';
-
-interface Block {
-  id: string;
-  type: string;
-  family?: string;
-  variant?: string;
-  title?: string;
-}
-
-interface BlockGroupingPanelProps {
-  lessonId: string;
-  blocks: Block[];
-  groups: BlockGroup[];
-  onGroupsChange: (groups: BlockGroup[]) => void;
-}
-
-/** Color palette for block families */
-function familyColor(family?: string): string {
-  switch (family) {
-    case 'text': return '#3b82f6';
-    case 'media': return '#22c55e';
-    case 'interactive': return '#a855f7';
-    case 'knowledge-check': return '#f59e0b';
-    case 'quote': return '#ec4899';
-    default: return '#6b7280';
-  }
-}
-
-export default function BlockGroupingPanel({
-  lessonId,
-  blocks,
-  groups,
-  onGroupsChange,
-}: BlockGroupingPanelProps) {
-  const [newGroupClass, setNewGroupClass] = useState('');
-  const [newGroupLabel, setNewGroupLabel] = useState('');
-  const [editingGroupId, setEditingGroupId] = useState<string | null>(null);
-  const [editClass, setEditClass] = useState('');
-  const [editLabel, setEditLabel] = useState('');
-
-  const lessonBlockIds = blocks.map((b) => b.id);
-
-  const {
-    selectedBlockIds,
-    toggleBlock,
-    clearSelection,
-    canCreateGroup,
-    validationError,
-    createGroup,
-    removeGroup,
-    updateGroup,
-    isBlockGrouped,
-  } = useBlockGrouping({
-    lessonBlockIds,
-    lessonId,
-    groups,
-    onGroupsChange,
-  });
-
-  const handleCreateGroup = () => {
-    if (!canCreateGroup || !newGroupClass.trim()) return;
-    createGroup(newGroupClass, newGroupLabel || undefined);
-    setNewGroupClass('');
-    setNewGroupLabel('');
-  };
-
-  const startEditGroup = (group: BlockGroup) => {
-    setEditingGroupId(group.id);
-    setEditClass(group.className);
-    setEditLabel(group.label || '');
-  };
-
-  const saveEditGroup = () => {
-    if (editingGroupId) {
-      updateGroup(editingGroupId, { className: editClass, label: editLabel });
-      setEditingGroupId(null);
-    }
-  };
-
-  const cancelEdit = () => {
-    setEditingGroupId(null);
-  };
-
-  // Build blockId -> group lookup
-  const blockGroupMap = new Map<string, BlockGroup>();
-  for (const group of groups) {
-    for (const bid of group.blockIds) {
-      blockGroupMap.set(bid, group);
-    }
-  }
-
-  // Render a single block rectangle
-  const renderBlock = (block: Block, isGrouped: boolean) => {
-    const isSelected = selectedBlockIds.has(block.id);
-    const canSelect = !isGrouped;
-    const color = familyColor(block.family);
-    const label = [block.type, block.variant].filter(Boolean).join(' / ');
-
-    return (
-      <div
-        key={block.id}
-        className={`bgp-block${isSelected ? ' selected' : ''}${isGrouped ? ' grouped' : ''}`}
-        onClick={() => canSelect && toggleBlock(block.id)}
-        style={{ '--block-color': color } as React.CSSProperties}
-        title={canSelect ? 'Click to select' : 'Already in a group'}
-      >
-        <span className="bgp-block-color" />
-        <span className="bgp-block-label">{label}</span>
-        {block.title && (
-          <span className="bgp-block-title">
-            {block.title.length > 50 ? block.title.substring(0, 50) + '...' : block.title}
-          </span>
-        )}
-        {isSelected && <span className="bgp-block-check">&#10003;</span>}
-      </div>
-    );
-  };
-
-  // Render group header (with edit/ungroup controls)
-  const renderGroupHeader = (group: BlockGroup) => {
-    const isEditing = editingGroupId === group.id;
-
-    if (isEditing) {
-      return (
-        <div className="bgp-group-header">
-          <div className="bgp-group-edit">
-            <input
-              type="text"
-              value={editClass}
-              onChange={(e) => setEditClass(e.target.value)}
-              placeholder="CSS class(es)"
-              className="bgp-edit-input"
-            />
-            <input
-              type="text"
-              value={editLabel}
-              onChange={(e) => setEditLabel(e.target.value)}
-              placeholder="Label (optional)"
-              className="bgp-edit-input bgp-edit-input-sm"
-            />
-            <button className="bgp-btn bgp-btn-save" onClick={saveEditGroup}>Save</button>
-            <button className="bgp-btn bgp-btn-cancel" onClick={cancelEdit}>Cancel</button>
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <div className="bgp-group-header">
-        <span className="bgp-group-label">
-          {group.label || group.className}
-        </span>
-        <span className="bgp-group-class">.{group.className}</span>
-        <button
-          className="bgp-btn bgp-btn-edit"
-          onClick={() => startEditGroup(group)}
-          title="Edit group"
-        >
-          Edit
-        </button>
-        <button
-          className="bgp-btn bgp-btn-ungroup"
-          onClick={() => removeGroup(group.id)}
-          title="Remove group"
-        >
-          Ungroup
-        </button>
-      </div>
-    );
-  };
-
-  // Build flat display list, rendering groups as nested containers
-  const renderedGroups = new Set<string>();
-  const previewItems: React.ReactNode[] = [];
-
-  for (const block of blocks) {
-    const group = blockGroupMap.get(block.id);
-
-    if (group) {
-      // Skip blocks already rendered as part of their group
-      if (renderedGroups.has(group.id)) continue;
-      renderedGroups.add(group.id);
-
-      // Render the entire group container
-      const groupBlocks = group.blockIds
-        .map((bid) => blocks.find((b) => b.id === bid))
-        .filter(Boolean) as Block[];
-
-      previewItems.push(
-        <div key={`group-${group.id}`} className="bgp-group-wrapper">
-          {renderGroupHeader(group)}
-          {groupBlocks.map((b) => renderBlock(b, true))}
-        </div>
-      );
-    } else {
-      previewItems.push(renderBlock(block, false));
-    }
-  }
-
-  const hasSelection = selectedBlockIds.size > 0;
-
-  return (
-    <div className="block-grouping-panel">
-      <div className="bgp-header">
-        <span className="bgp-title">Block Groups</span>
-        {groups.length > 0 && (
-          <span className="bgp-count">{groups.length} group{groups.length !== 1 ? 's' : ''}</span>
-        )}
-      </div>
-
-      {/* Schematic preview */}
-      <div className="bgp-preview">
-        {previewItems}
-      </div>
-
-      {/* Create group controls */}
-      {hasSelection && (
-        <div className="bgp-create">
-          <div className="bgp-create-info">
-            {selectedBlockIds.size} block{selectedBlockIds.size !== 1 ? 's' : ''} selected
-            {validationError && <span className="bgp-validation-error"> — {validationError}</span>}
-          </div>
-          <div className="bgp-create-inputs">
-            <input
-              type="text"
-              value={newGroupClass}
-              onChange={(e) => setNewGroupClass(e.target.value)}
-              placeholder="CSS class(es) for wrapper..."
-              className="bgp-create-class"
-              onKeyDown={(e) => e.key === 'Enter' && handleCreateGroup()}
-            />
-            <input
-              type="text"
-              value={newGroupLabel}
-              onChange={(e) => setNewGroupLabel(e.target.value)}
-              placeholder="Label (optional)"
-              className="bgp-create-label"
-            />
-          </div>
-          <div className="bgp-create-actions">
-            <button
-              className="btn btn-sm btn-primary"
-              onClick={handleCreateGroup}
-              disabled={!canCreateGroup || !newGroupClass.trim()}
-            >
-              Create Group
-            </button>
-            <button className="btn btn-sm btn-secondary" onClick={clearSelection}>
-              Cancel
-            </button>
-          </div>
-        </div>
-      )}
-
-      {!hasSelection && groups.length === 0 && (
-        <div className="bgp-hint">
-          Click adjacent blocks above to select them, then create a group to wrap them in a container div.
-        </div>
-      )}
-    </div>
-  );
-}