@almadar/cli 0.3.2 → 1.0.3

package/shells/typescript-shell/packages/client/src/clients/kflow/molecules/LayerNavigator.stories.tsx

@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LayerNavigator } from './LayerNavigator';
+
+const meta: Meta<typeof LayerNavigator> = {
+  title: 'KFlow/Molecules/LayerNavigator',
+  component: LayerNavigator,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof LayerNavigator>;
+
+const sampleLayers = [
+  { number: 0, name: 'Foundations', conceptCount: 5, completed: true },
+  { number: 1, name: 'Basics', conceptCount: 8, completed: true },
+  { number: 2, name: 'Intermediate', conceptCount: 12, completed: false },
+  { number: 3, name: 'Advanced', conceptCount: 7, completed: false },
+  { number: 4, name: 'Expert', conceptCount: 4, completed: false },
+];
+
+export const Default: Story = {
+  args: {
+    layers: sampleLayers,
+    currentLayer: 2,
+  },
+};
+
+export const FirstLayer: Story = {
+  args: {
+    layers: sampleLayers,
+    currentLayer: 0,
+  },
+};
+
+export const LastLayer: Story = {
+  args: {
+    layers: sampleLayers,
+    currentLayer: 4,
+  },
+};
+
+export const WithNames: Story = {
+  args: {
+    layers: sampleLayers,
+    currentLayer: 2,
+    showNames: true,
+  },
+};
+
+export const WithCounts: Story = {
+  args: {
+    layers: sampleLayers,
+    currentLayer: 2,
+    showCounts: true,
+  },
+};
+
+export const WithNamesAndCounts: Story = {
+  args: {
+    layers: sampleLayers,
+    currentLayer: 1,
+    showNames: true,
+    showCounts: true,
+  },
+};
+
+export const Compact: Story = {
+  args: {
+    layers: sampleLayers,
+    currentLayer: 2,
+    compact: true,
+  },
+};
+
+export const CompactWithName: Story = {
+  args: {
+    layers: sampleLayers,
+    currentLayer: 2,
+    compact: true,
+    showNames: true,
+  },
+};
+
+export const FewLayers: Story = {
+  args: {
+    layers: [
+      { number: 0, name: 'Introduction', completed: true },
+      { number: 1, name: 'Core Concepts', completed: false },
+    ],
+    currentLayer: 1,
+    showNames: true,
+  },
+};
+
+export const ManyLayers: Story = {
+  args: {
+    layers: Array.from({ length: 10 }, (_, i) => ({
+      number: i,
+      name: `Layer ${i}`,
+      conceptCount: Math.floor(Math.random() * 15) + 3,
+      completed: i < 4,
+    })),
+    currentLayer: 4,
+    showCounts: true,
+  },
+};

package/shells/typescript-shell/packages/client/src/clients/kflow/molecules/LayerNavigator.tsx

@@ -0,0 +1,157 @@
+/**
+ * LayerNavigator - Navigation component for switching between knowledge graph layers
+ *
+ * Almadar Entity Binding:
+ * - Data flows through props from Almadar state
+ * - User interactions emit events via useEventBus()
+ *
+ * Events Emitted:
+ * - UI:SELECT_LAYER - When a layer is selected
+ * - UI:PREV_LAYER - When navigating to previous layer
+ * - UI:NEXT_LAYER - When navigating to next layer
+ */
+
+import React from 'react';
+import { ChevronLeft, ChevronRight, Layers } from 'lucide-react';
+import { Box } from '../../../components/atoms/Box';
+import { HStack } from '../../../components/atoms/Stack';
+import { useEventBus } from '../../../hooks/useEventBus';
+
+export interface LayerInfo {
+  number: number;
+  name?: string;
+  conceptCount?: number;
+  completed?: boolean;
+}
+
+export interface LayerNavigatorProps {
+  /** Available layers */
+  layers: LayerInfo[];
+  /** Currently selected layer number */
+  currentLayer: number;
+  /** Show layer names */
+  showNames?: boolean;
+  /** Show concept counts */
+  showCounts?: boolean;
+  /** Compact mode (just arrows and current) */
+  compact?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export const LayerNavigator: React.FC<LayerNavigatorProps> = ({
+  layers,
+  currentLayer,
+  showNames = false,
+  showCounts = false,
+  compact = false,
+  className = '',
+}) => {
+  const { emit } = useEventBus();
+
+  const sortedLayers = [...layers].sort((a, b) => a.number - b.number);
+  const currentIndex = sortedLayers.findIndex((l) => l.number === currentLayer);
+  const canGoPrev = currentIndex > 0;
+  const canGoNext = currentIndex < sortedLayers.length - 1;
+  const current = sortedLayers[currentIndex];
+
+  const handleSelectLayer = (layerNumber: number) => {
+    emit('UI:SELECT_LAYER', { layerNumber });
+  };
+
+  const handlePrev = () => {
+    if (canGoPrev) {
+      const prevLayer = sortedLayers[currentIndex - 1];
+      emit('UI:PREV_LAYER', { layerNumber: prevLayer.number });
+    }
+  };
+
+  const handleNext = () => {
+    if (canGoNext) {
+      const nextLayer = sortedLayers[currentIndex + 1];
+      emit('UI:NEXT_LAYER', { layerNumber: nextLayer.number });
+    }
+  };
+
+  if (compact) {
+    return (
+      <HStack gap="sm" align="center" className={className}>
+        <button
+          onClick={handlePrev}
+          disabled={!canGoPrev}
+          className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded disabled:opacity-30 disabled:cursor-not-allowed"
+        >
+          <ChevronLeft size={20} />
+        </button>
+
+        <HStack gap="xs" align="center" className="px-3 py-1.5 bg-indigo-100 text-indigo-700 rounded-full">
+          <Layers size={16} />
+          <span className="font-medium">
+            Layer {currentLayer}
+            {current?.name && showNames && `: ${current.name}`}
+          </span>
+        </HStack>
+
+        <button
+          onClick={handleNext}
+          disabled={!canGoNext}
+          className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded disabled:opacity-30 disabled:cursor-not-allowed"
+        >
+          <ChevronRight size={20} />
+        </button>
+      </HStack>
+    );
+  }
+
+  return (
+    <HStack gap="xs" align="center" wrap className={className}>
+      <button
+        onClick={handlePrev}
+        disabled={!canGoPrev}
+        className="p-1.5 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded disabled:opacity-30 disabled:cursor-not-allowed"
+      >
+        <ChevronLeft size={18} />
+      </button>
+
+      {sortedLayers.map((layer) => {
+        const isActive = layer.number === currentLayer;
+        return (
+          <button
+            key={layer.number}
+            onClick={() => handleSelectLayer(layer.number)}
+            className={`
+              px-3 py-1.5 rounded-full text-sm font-medium transition-colors
+              ${
+                isActive
+                  ? 'bg-indigo-600 text-white'
+                  : layer.completed
+                  ? 'bg-green-100 text-green-700 hover:bg-green-200'
+                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+              }
+            `}
+          >
+            <HStack gap="xs" align="center">
+              <span>{layer.number}</span>
+              {showNames && layer.name && (
+                <span className="hidden sm:inline">: {layer.name}</span>
+              )}
+              {showCounts && layer.conceptCount !== undefined && (
+                <span className="text-xs opacity-70">({layer.conceptCount})</span>
+              )}
+            </HStack>
+          </button>
+        );
+      })}
+
+      <button
+        onClick={handleNext}
+        disabled={!canGoNext}
+        className="p-1.5 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded disabled:opacity-30 disabled:cursor-not-allowed"
+      >
+        <ChevronRight size={18} />
+      </button>
+    </HStack>
+  );
+};
+
+LayerNavigator.displayName = 'LayerNavigator';

package/shells/typescript-shell/packages/client/src/clients/kflow/molecules/LearningGoalDisplay.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LearningGoalDisplay } from './LearningGoalDisplay';
+
+const meta: Meta<typeof LearningGoalDisplay> = {
+  title: 'KFlow/Molecules/LearningGoalDisplay',
+  component: LearningGoalDisplay,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof LearningGoalDisplay>;
+
+export const Default: Story = {
+  args: {
+    goal: 'Understand the fundamental concepts of machine learning including supervised and unsupervised learning algorithms.',
+    layerNumber: 1,
+    graphId: 'ml-course-1',
+  },
+};
+
+export const LongGoal: Story = {
+  args: {
+    goal: 'By the end of this layer, you should be able to implement basic neural network architectures from scratch, understand backpropagation and gradient descent, apply regularization techniques to prevent overfitting, and evaluate model performance using appropriate metrics.',
+    layerNumber: 3,
+    graphId: 'deep-learning-1',
+  },
+};
+
+export const NoGoal: Story = {
+  args: {
+    goal: undefined,
+    layerNumber: 1,
+  },
+};
+
+export const Saving: Story = {
+  args: {
+    goal: 'Learn the basics of Python programming.',
+    layerNumber: 0,
+    graphId: 'python-101',
+    isSaving: true,
+  },
+};
+
+export const Layer0: Story = {
+  args: {
+    goal: 'Build a strong foundation in programming concepts and computational thinking.',
+    layerNumber: 0,
+    graphId: 'foundations',
+  },
+};
+
+export const AdvancedLayer: Story = {
+  args: {
+    goal: 'Master advanced optimization techniques and apply them to real-world machine learning problems.',
+    layerNumber: 5,
+    graphId: 'advanced-ml',
+  },
+};

package/shells/typescript-shell/packages/client/src/clients/kflow/molecules/LearningGoalDisplay.tsx

@@ -0,0 +1,138 @@
+/**
+ * LearningGoalDisplay - Displays learning goal with inline editing
+ *
+ * Almadar Entity Binding:
+ * - Data flows through props from Almadar state
+ * - User interactions emit events via useEventBus()
+ *
+ * Events Emitted:
+ * - UI:EDIT_GOAL - When edit mode is entered
+ * - UI:SAVE_GOAL - When goal is saved
+ * - UI:CANCEL_EDIT_GOAL - When editing is cancelled
+ */
+
+import React, { useState } from 'react';
+import { Target, Info, Edit2, Save, X } from 'lucide-react';
+import { Box } from '../../../components/atoms/Box';
+import { HStack } from '../../../components/atoms/Stack';
+import { VStack } from '../../../components/atoms/Stack';
+import { useEventBus } from '../../../hooks/useEventBus';
+
+export interface LearningGoalDisplayProps {
+  /** The learning goal text */
+  goal?: string;
+  /** Layer number this goal belongs to */
+  layerNumber: number;
+  /** Graph/course ID for context */
+  graphId?: string;
+  /** Whether save is in progress */
+  isSaving?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export const LearningGoalDisplay: React.FC<LearningGoalDisplayProps> = ({
+  goal,
+  layerNumber,
+  graphId,
+  isSaving = false,
+  className = '',
+}) => {
+  const { emit } = useEventBus();
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedGoal, setEditedGoal] = useState(goal || '');
+
+  const handleEdit = () => {
+    setEditedGoal(goal || '');
+    setIsEditing(true);
+    emit('UI:EDIT_GOAL', { layerNumber, graphId });
+  };
+
+  const handleCancel = () => {
+    setEditedGoal(goal || '');
+    setIsEditing(false);
+    emit('UI:CANCEL_EDIT_GOAL', { layerNumber, graphId });
+  };
+
+  const handleSave = () => {
+    emit('UI:SAVE_GOAL', { layerNumber, graphId, goal: editedGoal });
+    setIsEditing(false);
+  };
+
+  if (!goal && !isEditing) {
+    return null;
+  }
+
+  return (
+    <Box
+      className={`w-full p-4 bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 border border-indigo-200 rounded-lg shadow-sm ${className}`}
+    >
+      <HStack gap="sm" align="start">
+        <Box className="flex-shrink-0 mt-0.5">
+          <Box className="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-sm">
+            <Target size={16} className="text-white" />
+          </Box>
+        </Box>
+
+        <VStack gap="sm" className="flex-1 min-w-0">
+          <HStack justify="between" align="center" className="w-full">
+            <HStack gap="xs" align="center">
+              <span className="text-sm font-semibold text-gray-900">
+                Learning Goal
+              </span>
+              <Info size={14} className="text-indigo-500" />
+            </HStack>
+
+            {!isEditing ? (
+              <button
+                type="button"
+                onClick={handleEdit}
+                className="flex items-center gap-1 px-2 py-1 text-xs font-medium text-indigo-600 hover:text-indigo-700 hover:bg-indigo-100 rounded transition-colors"
+              >
+                <Edit2 size={12} />
+                <span>Edit</span>
+              </button>
+            ) : (
+              <HStack gap="sm">
+                <button
+                  type="button"
+                  onClick={handleSave}
+                  disabled={isSaving}
+                  className="flex items-center gap-1 px-2 py-1 text-xs font-medium text-white bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 rounded transition-colors"
+                >
+                  <Save size={12} />
+                  <span>{isSaving ? 'Saving...' : 'Save'}</span>
+                </button>
+                <button
+                  type="button"
+                  onClick={handleCancel}
+                  disabled={isSaving}
+                  className="flex items-center gap-1 px-2 py-1 text-xs font-medium text-gray-600 hover:text-gray-700 hover:bg-gray-100 disabled:opacity-50 rounded transition-colors"
+                >
+                  <X size={12} />
+                  <span>Cancel</span>
+                </button>
+              </HStack>
+            )}
+          </HStack>
+
+          {isEditing ? (
+            <textarea
+              value={editedGoal}
+              onChange={(e) => setEditedGoal(e.target.value)}
+              className="w-full px-3 py-2 text-sm text-gray-700 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-y min-h-[80px]"
+              placeholder="Enter learning goal for this layer..."
+              disabled={isSaving}
+            />
+          ) : (
+            <p className="text-sm text-gray-700 leading-relaxed">
+              {goal || 'No learning goal set'}
+            </p>
+          )}
+        </VStack>
+      </HStack>
+    </Box>
+  );
+};
+
+LearningGoalDisplay.displayName = 'LearningGoalDisplay';

package/shells/typescript-shell/packages/client/src/clients/kflow/molecules/MindMapHeader.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { MindMapHeaderProps } from '../types/mindMapTypes';
+
+const MindMapHeader: React.FC<MindMapHeaderProps> = ({
+  zoom,
+  layoutType,
+  onZoomIn,
+  onZoomOut,
+  onToggleLayout
+}) => {
+  return (
+    <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-2 sm:p-4">
+      <div className="flex items-center justify-between gap-2 overflow-x-auto">
+        <div className="flex items-center gap-2 sm:gap-4 flex-shrink-0">
+          <div className="flex items-center gap-2 bg-gray-100 dark:bg-gray-700 rounded-lg p-1">
+            <button 
+              className="w-8 h-8 flex items-center justify-center text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 hover:bg-white dark:hover:bg-gray-600 rounded transition-all duration-200 font-medium" 
+              onClick={onZoomOut}
+              title="Zoom Out"
+            >
+              -
+            </button>
+            <span className="px-2 text-sm font-medium text-gray-700 dark:text-gray-200 min-w-[60px] text-center">
+              {Math.round(zoom * 100)}%
+            </span>
+            <button 
+              className="w-8 h-8 flex items-center justify-center text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 hover:bg-white dark:hover:bg-gray-600 rounded transition-all duration-200 font-medium" 
+              onClick={onZoomIn}
+              title="Zoom In"
+            >
+              +
+            </button>
+          </div>
+          <button 
+            className="px-2 sm:px-3 py-2 bg-indigo-100 dark:bg-indigo-900/30 hover:bg-indigo-200 dark:hover:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300 rounded-lg transition-all duration-200 font-medium text-xs sm:text-sm whitespace-nowrap"
+            onClick={onToggleLayout}
+            title={`Switch to ${layoutType === 'horizontal' ? 'vertical' : 'horizontal'} layout`}
+          >
+            {layoutType === 'horizontal' ? '↔️ Horizontal' : '↕️ Vertical'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MindMapHeader;