@growgroup/visual-editor 0.1.0

package/src/editor/components/VariantMatrix.tsx

@@ -0,0 +1,507 @@
+'use client';
+
+/**
+ * VariantMatrix - Grid display of all variant combinations
+ *
+ * Displays a matrix where:
+ * - For 1 property: Shows a simple list of variants
+ * - For 2 properties: Shows a 2D grid with rows and columns
+ * - For 3+ properties: Shows a hierarchical grid with nested sections
+ *
+ * Cells show:
+ * - Checkmark if variant exists
+ * - Empty/dashed if variant is missing (clickable to create)
+ * - Highlighted if currently selected
+ */
+
+import React, { useMemo, useCallback } from 'react';
+import { Check, Plus } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import type {
+  VariantProperty,
+  VariantDefinition,
+} from '../../types/editor-components';
+import {
+  createVariantKey,
+  createVariantMap,
+  generateVariantCombinations,
+} from '../utils/variant-resolver';
+
+interface VariantMatrixProps {
+  /** Array of variant property definitions */
+  variantProperties: VariantProperty[];
+  /** Array of existing variant definitions */
+  variants: VariantDefinition[];
+  /** Currently selected variant ID */
+  selectedVariantId: string | null;
+  /** Callback when a variant is selected */
+  onSelectVariant: (variantId: string) => void;
+  /** Optional callback to create a new variant (shows + icon for missing) */
+  onCreateVariant?: (propertyValues: Record<string, string>) => void;
+  /** Optional: compact mode for smaller displays */
+  compact?: boolean;
+}
+
+/**
+ * VariantMatrix displays all possible variant combinations in a grid format.
+ * Supports 1D (list), 2D (grid), and multi-dimensional (nested) layouts.
+ */
+export function VariantMatrix({
+  variantProperties,
+  variants,
+  selectedVariantId,
+  onSelectVariant,
+  onCreateVariant,
+  compact = false,
+}: VariantMatrixProps) {
+  // Create a map for fast variant lookup by key
+  const variantMap = useMemo(() => createVariantMap(variants), [variants]);
+
+  // Get variant ID by property values
+  const getVariantId = useCallback(
+    (propertyValues: Record<string, string>): string | null => {
+      const key = createVariantKey(propertyValues);
+      return variantMap.get(key)?.id ?? null;
+    },
+    [variantMap]
+  );
+
+  // Check if a variant exists for given property values
+  const hasVariant = useCallback(
+    (propertyValues: Record<string, string>): boolean => {
+      const key = createVariantKey(propertyValues);
+      return variantMap.has(key);
+    },
+    [variantMap]
+  );
+
+  // Handle cell click
+  const handleCellClick = useCallback(
+    (propertyValues: Record<string, string>) => {
+      const variantId = getVariantId(propertyValues);
+      if (variantId) {
+        onSelectVariant(variantId);
+      } else if (onCreateVariant) {
+        onCreateVariant(propertyValues);
+      }
+    },
+    [getVariantId, onSelectVariant, onCreateVariant]
+  );
+
+  // Render based on number of properties
+  if (variantProperties.length === 0) {
+    return (
+      <div className="text-center py-4 text-gray-500 text-sm">
+        No variant properties defined
+      </div>
+    );
+  }
+
+  if (variantProperties.length === 1) {
+    return (
+      <SinglePropertyList
+        property={variantProperties[0]}
+        variantMap={variantMap}
+        selectedVariantId={selectedVariantId}
+        onCellClick={handleCellClick}
+        hasVariant={hasVariant}
+        canCreate={!!onCreateVariant}
+        compact={compact}
+      />
+    );
+  }
+
+  if (variantProperties.length === 2) {
+    return (
+      <TwoPropertyGrid
+        properties={variantProperties}
+        variantMap={variantMap}
+        selectedVariantId={selectedVariantId}
+        onCellClick={handleCellClick}
+        hasVariant={hasVariant}
+        canCreate={!!onCreateVariant}
+        compact={compact}
+      />
+    );
+  }
+
+  // For 3+ properties, use a multi-dimensional view
+  return (
+    <MultiPropertyGrid
+      properties={variantProperties}
+      variantMap={variantMap}
+      selectedVariantId={selectedVariantId}
+      onCellClick={handleCellClick}
+      hasVariant={hasVariant}
+      canCreate={!!onCreateVariant}
+      compact={compact}
+    />
+  );
+}
+
+// =============================================================================
+// Single Property List (1D)
+// =============================================================================
+
+interface SinglePropertyListProps {
+  property: VariantProperty;
+  variantMap: Map<string, VariantDefinition>;
+  selectedVariantId: string | null;
+  onCellClick: (propertyValues: Record<string, string>) => void;
+  hasVariant: (propertyValues: Record<string, string>) => boolean;
+  canCreate: boolean;
+  compact: boolean;
+}
+
+function SinglePropertyList({
+  property,
+  variantMap,
+  selectedVariantId,
+  onCellClick,
+  hasVariant,
+  canCreate,
+  compact,
+}: SinglePropertyListProps) {
+  return (
+    <div className="space-y-1">
+      <div className="text-xs font-medium text-gray-400 mb-2">
+        {property.name}
+      </div>
+      <div className={cn('grid gap-1', compact ? 'grid-cols-4' : 'grid-cols-3')}>
+        {property.values.map((value) => {
+          const propertyValues = { [property.name]: value };
+          const key = createVariantKey(propertyValues);
+          const variant = variantMap.get(key);
+          const isSelected = variant?.id === selectedVariantId;
+          const exists = hasVariant(propertyValues);
+
+          return (
+            <VariantCell
+              key={value}
+              label={value}
+              exists={exists}
+              isSelected={isSelected}
+              canCreate={canCreate}
+              onClick={() => onCellClick(propertyValues)}
+              compact={compact}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// =============================================================================
+// Two Property Grid (2D)
+// =============================================================================
+
+interface TwoPropertyGridProps {
+  properties: VariantProperty[];
+  variantMap: Map<string, VariantDefinition>;
+  selectedVariantId: string | null;
+  onCellClick: (propertyValues: Record<string, string>) => void;
+  hasVariant: (propertyValues: Record<string, string>) => boolean;
+  canCreate: boolean;
+  compact: boolean;
+}
+
+function TwoPropertyGrid({
+  properties,
+  variantMap,
+  selectedVariantId,
+  onCellClick,
+  hasVariant,
+  canCreate,
+  compact,
+}: TwoPropertyGridProps) {
+  const [rowProperty, colProperty] = properties;
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full border-collapse">
+        <thead>
+          <tr>
+            <th className="p-1.5 text-xs font-medium text-gray-500 text-left border-b border-[#444444]">
+              {rowProperty.name} / {colProperty.name}
+            </th>
+            {colProperty.values.map((colValue) => (
+              <th
+                key={colValue}
+                className="p-1.5 text-xs font-medium text-gray-400 text-center border-b border-[#444444]"
+              >
+                {colValue}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rowProperty.values.map((rowValue) => (
+            <tr key={rowValue}>
+              <td className="p-1.5 text-xs font-medium text-gray-400 border-b border-[#444444]">
+                {rowValue}
+              </td>
+              {colProperty.values.map((colValue) => {
+                const propertyValues = {
+                  [rowProperty.name]: rowValue,
+                  [colProperty.name]: colValue,
+                };
+                const key = createVariantKey(propertyValues);
+                const variant = variantMap.get(key);
+                const isSelected = variant?.id === selectedVariantId;
+                const exists = hasVariant(propertyValues);
+
+                return (
+                  <td
+                    key={colValue}
+                    className="p-1 text-center border-b border-[#444444]"
+                  >
+                    <VariantCell
+                      exists={exists}
+                      isSelected={isSelected}
+                      canCreate={canCreate}
+                      onClick={() => onCellClick(propertyValues)}
+                      compact={compact}
+                      isGridCell
+                    />
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// =============================================================================
+// Multi Property Grid (3+ dimensions)
+// =============================================================================
+
+interface MultiPropertyGridProps {
+  properties: VariantProperty[];
+  variantMap: Map<string, VariantDefinition>;
+  selectedVariantId: string | null;
+  onCellClick: (propertyValues: Record<string, string>) => void;
+  hasVariant: (propertyValues: Record<string, string>) => boolean;
+  canCreate: boolean;
+  compact: boolean;
+}
+
+function MultiPropertyGrid({
+  properties,
+  variantMap,
+  selectedVariantId,
+  onCellClick,
+  hasVariant,
+  canCreate,
+  compact,
+}: MultiPropertyGridProps) {
+  // Generate all combinations
+  const combinations = useMemo(
+    () => generateVariantCombinations(properties),
+    [properties]
+  );
+
+  // Group by the first property for organization
+  const groupedByFirst = useMemo(() => {
+    const groups = new Map<string, Record<string, string>[]>();
+    const firstProp = properties[0];
+
+    for (const combo of combinations) {
+      const groupKey = combo[firstProp.name];
+      if (!groups.has(groupKey)) {
+        groups.set(groupKey, []);
+      }
+      groups.get(groupKey)!.push(combo);
+    }
+
+    return groups;
+  }, [combinations, properties]);
+
+  return (
+    <div className="space-y-4">
+      {Array.from(groupedByFirst.entries()).map(([groupValue, combos]) => (
+        <div key={groupValue} className="border border-[#444444] rounded-lg p-2">
+          <div className="text-xs font-medium text-gray-400 mb-2 px-1">
+            {properties[0].name}: {groupValue}
+          </div>
+          <div className={cn('grid gap-1', compact ? 'grid-cols-4' : 'grid-cols-3')}>
+            {combos.map((combo) => {
+              const key = createVariantKey(combo);
+              const variant = variantMap.get(key);
+              const isSelected = variant?.id === selectedVariantId;
+              const exists = hasVariant(combo);
+
+              // Create label from remaining properties
+              const label = properties
+                .slice(1)
+                .map((p) => combo[p.name])
+                .join(', ');
+
+              return (
+                <VariantCell
+                  key={key}
+                  label={label}
+                  exists={exists}
+                  isSelected={isSelected}
+                  canCreate={canCreate}
+                  onClick={() => onCellClick(combo)}
+                  compact={compact}
+                />
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// =============================================================================
+// Variant Cell Component
+// =============================================================================
+
+interface VariantCellProps {
+  /** Optional label to display */
+  label?: string;
+  /** Whether the variant exists */
+  exists: boolean;
+  /** Whether this cell is selected */
+  isSelected: boolean;
+  /** Whether new variants can be created */
+  canCreate: boolean;
+  /** Click handler */
+  onClick: () => void;
+  /** Compact display mode */
+  compact: boolean;
+  /** Whether this is a grid cell (minimal styling) */
+  isGridCell?: boolean;
+}
+
+function VariantCell({
+  label,
+  exists,
+  isSelected,
+  canCreate,
+  onClick,
+  compact,
+  isGridCell = false,
+}: VariantCellProps) {
+  const baseClasses = cn(
+    'flex items-center justify-center cursor-pointer transition-all',
+    'rounded border',
+    isGridCell
+      ? 'w-8 h-8 mx-auto'
+      : compact
+        ? 'h-8 px-2'
+        : 'h-10 px-3',
+    // Exists state
+    exists
+      ? [
+          'bg-[#2c2c2c] border-[#4a4a4a]',
+          'hover:bg-[#444444] hover:border-[#5d5d5d]',
+        ]
+      : [
+          'bg-transparent border-dashed border-[#4a4a4a]',
+          canCreate
+            ? 'hover:bg-[#2c2c2c] hover:border-[#5d5d5d]'
+            : 'opacity-50 cursor-not-allowed',
+        ],
+    // Selected state
+    isSelected && 'ring-2 ring-[#0d99ff] border-[#0d99ff]'
+  );
+
+  return (
+    <button
+      type="button"
+      className={baseClasses}
+      onClick={onClick}
+      disabled={!exists && !canCreate}
+      aria-label={
+        label
+          ? `Variant: ${label}${exists ? '' : ' (missing)'}${isSelected ? ' (selected)' : ''}`
+          : exists
+            ? 'Variant exists'
+            : 'Variant missing'
+      }
+      aria-pressed={isSelected}
+    >
+      {exists ? (
+        <>
+          {isGridCell ? (
+            <Check className="w-4 h-4 text-green-400" />
+          ) : (
+            <div className="flex items-center gap-1.5">
+              <Check className="w-3.5 h-3.5 text-green-400 flex-shrink-0" />
+              {label && (
+                <span className="text-xs text-gray-300 truncate">{label}</span>
+              )}
+            </div>
+          )}
+        </>
+      ) : canCreate ? (
+        <>
+          {isGridCell ? (
+            <Plus className="w-4 h-4 text-gray-500" />
+          ) : (
+            <div className="flex items-center gap-1.5">
+              <Plus className="w-3.5 h-3.5 text-gray-500 flex-shrink-0" />
+              {label && (
+                <span className="text-xs text-gray-500 truncate">{label}</span>
+              )}
+            </div>
+          )}
+        </>
+      ) : (
+        <>
+          {!isGridCell && label && (
+            <span className="text-xs text-gray-600 truncate">{label}</span>
+          )}
+        </>
+      )}
+    </button>
+  );
+}
+
+// =============================================================================
+// Stats Component
+// =============================================================================
+
+interface VariantMatrixStatsProps {
+  variantProperties: VariantProperty[];
+  variants: VariantDefinition[];
+}
+
+/**
+ * Display statistics about the variant matrix.
+ */
+export function VariantMatrixStats({
+  variantProperties,
+  variants,
+}: VariantMatrixStatsProps) {
+  const totalPossible = useMemo(() => {
+    return generateVariantCombinations(variantProperties).length;
+  }, [variantProperties]);
+
+  const defined = variants.length;
+  const missing = totalPossible - defined;
+  const percentage = totalPossible > 0 ? Math.round((defined / totalPossible) * 100) : 0;
+
+  return (
+    <div className="flex items-center gap-4 text-xs text-gray-500">
+      <span>
+        <span className="text-green-400 font-medium">{defined}</span> / {totalPossible} variants
+      </span>
+      {missing > 0 && (
+        <span className="text-amber-400">
+          {missing} missing
+        </span>
+      )}
+      <span>{percentage}% complete</span>
+    </div>
+  );
+}
+
+export default VariantMatrix;

package/src/editor/components/component-panel/CategoryAccordion.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+/**
+ * CategoryAccordion - Collapsible category section for components
+ *
+ * Displays a category header that can be expanded/collapsed
+ * to show the components within that category.
+ */
+
+import React, { useCallback } from 'react';
+import { ChevronRight, ChevronDown } from 'lucide-react';
+import type {
+  ComponentLibraryCategory,
+  MasterComponent,
+} from '../../../types/editor-components';
+import { ComponentGrid } from './ComponentGrid';
+
+interface CategoryAccordionProps {
+  /** The category to display */
+  category: ComponentLibraryCategory;
+  /** Components in this category */
+  components: (MasterComponent | undefined)[];
+  /** Whether the category is expanded */
+  isExpanded: boolean;
+  /** Callback to toggle expansion */
+  onToggle: () => void;
+  /** ID of the selected component (for highlighting) */
+  selectedComponentId?: string | null;
+  /** Callback when selection is cleared */
+  onClearSelection?: () => void;
+  /** Callback when a component is double-clicked (to edit) */
+  onEditComponent?: (component: MasterComponent) => void;
+}
+
+/**
+ * Get icon component for category
+ */
+function getCategoryIcon(iconName: string): string {
+  const iconMap: Record<string, string> = {
+    layout: '#3b82f6',
+    navigation: '#10b981',
+    content: '#f59e0b',
+    'form-input': '#ef4444',
+    form: '#ef4444',
+    image: '#8b5cf6',
+    media: '#8b5cf6',
+  };
+  return iconMap[iconName] || '#6b7280';
+}
+
+/**
+ * CategoryAccordion displays a collapsible section for a component category.
+ * Supports keyboard navigation and accessibility.
+ */
+export function CategoryAccordion({
+  category,
+  components,
+  isExpanded,
+  onToggle,
+  selectedComponentId,
+  onClearSelection,
+  onEditComponent,
+}: CategoryAccordionProps) {
+  const validComponents = components.filter(
+    (c): c is MasterComponent => c !== undefined
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        onToggle();
+      }
+    },
+    [onToggle]
+  );
+
+  const iconColor = category.color || getCategoryIcon(category.icon || 'default');
+
+  return (
+    <div className="mb-1">
+      {/* Category Header */}
+      <button
+        className="w-full flex items-center gap-2 py-1.5 px-2 rounded text-xs text-gray-300 hover:bg-[#444444] transition-colors focus:outline-none focus:ring-1 focus:ring-[#0d99ff]"
+        onClick={onToggle}
+        onKeyDown={handleKeyDown}
+        aria-expanded={isExpanded}
+        aria-controls={`category-content-${category.id}`}
+      >
+        {/* Expand/Collapse Icon */}
+        {isExpanded ? (
+          <ChevronDown className="w-3 h-3 text-gray-500 flex-shrink-0" />
+        ) : (
+          <ChevronRight className="w-3 h-3 text-gray-500 flex-shrink-0" />
+        )}
+
+        {/* Category Color Indicator */}
+        <div
+          className="w-2 h-2 rounded-sm flex-shrink-0"
+          style={{ backgroundColor: iconColor }}
+        />
+
+        {/* Category Name */}
+        <span className="font-medium flex-1 text-left">{category.name}</span>
+
+        {/* Component Count */}
+        <span className="text-[10px] text-gray-500 tabular-nums">
+          {validComponents.length}
+        </span>
+      </button>
+
+      {/* Category Content */}
+      {isExpanded && (
+        <div
+          id={`category-content-${category.id}`}
+          className="mt-1 ml-4 overflow-hidden animate-in fade-in slide-in-from-top-1 duration-200"
+          role="region"
+          aria-label={`${category.name}のコンポーネント`}
+        >
+          {validComponents.length > 0 ? (
+            <ComponentGrid
+              components={validComponents}
+              selectedComponentId={selectedComponentId}
+              onEditComponent={onEditComponent}
+            />
+          ) : (
+            <div className="py-3 text-center">
+              <p className="text-[10px] text-gray-500">
+                このカテゴリにコンポーネントがありません
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default CategoryAccordion;

package/src/editor/components/component-panel/ComponentGrid.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+/**
+ * ComponentGrid - Grid display for components in a category
+ *
+ * Displays components in a responsive grid layout.
+ * Each component is shown as a draggable item.
+ */
+
+import React from 'react';
+import type { MasterComponent } from '../../../types/editor-components';
+import { ComponentItem } from './ComponentItem';
+
+interface ComponentGridProps {
+  /** Components to display */
+  components: MasterComponent[];
+  /** Number of columns in the grid */
+  columns?: number;
+  /** ID of the selected component (for highlighting) */
+  selectedComponentId?: string | null;
+  /** Callback when a component is double-clicked (to edit) */
+  onEditComponent?: (component: MasterComponent) => void;
+}
+
+/**
+ * ComponentGrid displays components in a grid layout.
+ * Components can be dragged onto the canvas to create instances.
+ */
+export function ComponentGrid({ components, columns = 2, selectedComponentId, onEditComponent }: ComponentGridProps) {
+  return (
+    <div
+      className="grid gap-2"
+      style={{
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+      }}
+      role="list"
+      aria-label="コンポーネント"
+    >
+      {components.map((component) => (
+        <ComponentItem
+          key={component.id}
+          component={component}
+          isSelected={component.id === selectedComponentId}
+          onDoubleClick={onEditComponent}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default ComponentGrid;