@almadar/cli 0.3.1 → 0.3.3

package/shells/typescript-shell/packages/client/src/clients/kflow/templates/LessonTemplate.tsx

@@ -0,0 +1,264 @@
+/**
+ * LessonTemplate - Template for displaying lesson content with navigation
+ *
+ * Almadar Entity Binding:
+ * - Data flows through `entity` prop from Almadar state
+ * - User interactions emit events via useEventBus()
+ *
+ * Events Emitted:
+ * - UI:LESSON_COMPLETE - When lesson is marked complete
+ * - UI:LESSON_NEXT - When navigating to next lesson
+ * - UI:LESSON_PREV - When navigating to previous lesson
+ * - UI:TOGGLE_SIDEBAR - When sidebar is toggled
+ */
+
+import React, { useState } from 'react';
+import { ChevronLeft, ChevronRight, Menu, X, CheckCircle } from 'lucide-react';
+import { Box } from '../../../components/atoms/Box';
+import { VStack } from '../../../components/atoms/Stack';
+import { HStack } from '../../../components/atoms/Stack';
+import { Card } from '../../../components/molecules/Card';
+import { SegmentRenderer } from '../organisms/SegmentRenderer';
+import { useEventBus } from '../../../hooks/useEventBus';
+import type { Segment } from '../utils/parseLessonSegments';
+
+export interface LessonEntity {
+  id: string;
+  title: string;
+  content: string;
+  segments?: Segment[];
+  duration?: number;
+  isCompleted?: boolean;
+  courseTitle?: string;
+  courseProgress?: number;
+}
+
+export interface SidebarItem {
+  id: string;
+  title: string;
+  isCompleted?: boolean;
+  isCurrent?: boolean;
+}
+
+export interface LessonTemplateProps {
+  /** Lesson entity data */
+  entity: LessonEntity;
+  /** Sidebar items (other lessons) */
+  sidebarItems?: SidebarItem[];
+  /** Has previous lesson */
+  hasPrevious?: boolean;
+  /** Has next lesson */
+  hasNext?: boolean;
+  /** Reading progress (0-100) */
+  readingProgress?: number;
+  /** Additional CSS classes */
+  className?: string;
+  /** Custom header content */
+  headerContent?: React.ReactNode;
+  /** Custom footer content */
+  footerContent?: React.ReactNode;
+}
+
+export const LessonTemplate: React.FC<LessonTemplateProps> = ({
+  entity,
+  sidebarItems = [],
+  hasPrevious = false,
+  hasNext = false,
+  readingProgress = 0,
+  className = '',
+  headerContent,
+  footerContent,
+}) => {
+  const { emit } = useEventBus();
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  const handleComplete = () => {
+    emit('UI:LESSON_COMPLETE', { lessonId: entity.id });
+  };
+
+  const handleNext = () => {
+    emit('UI:LESSON_NEXT', { currentLessonId: entity.id });
+  };
+
+  const handlePrev = () => {
+    emit('UI:LESSON_PREV', { currentLessonId: entity.id });
+  };
+
+  const handleToggleSidebar = () => {
+    setSidebarOpen(!sidebarOpen);
+    emit('UI:TOGGLE_SIDEBAR', { open: !sidebarOpen });
+  };
+
+  const handleSelectLesson = (lessonId: string) => {
+    emit('UI:SELECT_LESSON', { lessonId });
+    setSidebarOpen(false);
+  };
+
+  return (
+    <Box className={`min-h-screen bg-gray-50 ${className}`}>
+      {/* Header */}
+      <header className="fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-200">
+        <HStack justify="between" align="center" className="px-4 h-14">
+          <HStack gap="sm" align="center">
+            <button
+              onClick={handleToggleSidebar}
+              className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded"
+            >
+              <Menu size={20} />
+            </button>
+            <VStack gap="none" className="min-w-0">
+              {entity.courseTitle && (
+                <span className="text-xs text-gray-500 truncate">
+                  {entity.courseTitle}
+                </span>
+              )}
+              <span className="font-medium text-gray-900 truncate">
+                {entity.title}
+              </span>
+            </VStack>
+          </HStack>
+
+          <HStack gap="sm" align="center">
+            {entity.isCompleted && (
+              <span className="px-2 py-1 text-xs font-medium bg-green-100 text-green-700 rounded flex items-center gap-1">
+                <CheckCircle size={12} />
+                Completed
+              </span>
+            )}
+            {entity.courseProgress !== undefined && (
+              <HStack gap="xs" align="center" className="w-32">
+                <Box className="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
+                  <Box
+                    className="h-full bg-indigo-500"
+                    style={{ width: `${entity.courseProgress}%` }}
+                  />
+                </Box>
+                <span className="text-xs text-gray-500">{entity.courseProgress}%</span>
+              </HStack>
+            )}
+            {headerContent}
+          </HStack>
+        </HStack>
+
+        {/* Reading progress */}
+        <Box className="h-1 bg-gray-100">
+          <Box
+            className="h-full bg-indigo-600 transition-all duration-300"
+            style={{ width: `${readingProgress}%` }}
+          />
+        </Box>
+      </header>
+
+      {/* Sidebar */}
+      {sidebarOpen && (
+        <>
+          <Box
+            className="fixed inset-0 bg-black/50 z-40"
+            onClick={() => setSidebarOpen(false)}
+          />
+          <aside className="fixed top-0 left-0 bottom-0 w-80 bg-white z-50 overflow-y-auto">
+            <HStack justify="between" align="center" className="p-4 border-b border-gray-200">
+              <span className="font-semibold text-gray-900">Course Content</span>
+              <button
+                onClick={() => setSidebarOpen(false)}
+                className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded"
+              >
+                <X size={20} />
+              </button>
+            </HStack>
+            <VStack gap="none" className="p-2">
+              {sidebarItems.map((item) => (
+                <button
+                  key={item.id}
+                  onClick={() => handleSelectLesson(item.id)}
+                  className={`w-full text-left px-3 py-2 rounded text-sm transition-colors ${
+                    item.isCurrent
+                      ? 'bg-indigo-50 text-indigo-700 font-medium'
+                      : item.isCompleted
+                      ? 'text-gray-500'
+                      : 'text-gray-700 hover:bg-gray-50'
+                  }`}
+                >
+                  <HStack gap="sm" align="center">
+                    {item.isCompleted && <CheckCircle size={14} className="text-green-500" />}
+                    <span className="truncate">{item.title}</span>
+                  </HStack>
+                </button>
+              ))}
+            </VStack>
+          </aside>
+        </>
+      )}
+
+      {/* Main content */}
+      <main className="pt-20 pb-24">
+        <article className="max-w-3xl mx-auto px-4">
+          <VStack gap="lg">
+            <VStack gap="sm">
+              <h1 className="text-3xl font-bold text-gray-900">{entity.title}</h1>
+              {entity.duration && (
+                <span className="text-sm text-gray-500">{entity.duration} min read</span>
+              )}
+            </VStack>
+
+            {/* Lesson content */}
+            {entity.segments && entity.segments.length > 0 ? (
+              <SegmentRenderer segments={entity.segments} />
+            ) : (
+              <Card>
+                <div
+                  className="prose prose-indigo max-w-none"
+                  dangerouslySetInnerHTML={{ __html: entity.content }}
+                />
+              </Card>
+            )}
+
+            {/* Complete button */}
+            {!entity.isCompleted && (
+              <Box className="text-center py-8">
+                <button
+                  onClick={handleComplete}
+                  className="px-6 py-3 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 flex items-center gap-2 mx-auto"
+                >
+                  <CheckCircle size={20} />
+                  Mark as Complete
+                </button>
+              </Box>
+            )}
+          </VStack>
+        </article>
+      </main>
+
+      {/* Footer navigation */}
+      <footer className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-30">
+        <HStack justify="between" align="center" className="max-w-3xl mx-auto px-4 py-3">
+          <button
+            onClick={handlePrev}
+            disabled={!hasPrevious}
+            className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1"
+          >
+            <ChevronLeft size={16} />
+            Previous
+          </button>
+
+          {footerContent || (
+            <span className="text-sm text-gray-500">
+              {entity.isCompleted ? 'Lesson completed!' : 'Keep learning...'}
+            </span>
+          )}
+
+          <button
+            onClick={handleNext}
+            disabled={!hasNext}
+            className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1"
+          >
+            Next
+            <ChevronRight size={16} />
+          </button>
+        </HStack>
+      </footer>
+    </Box>
+  );
+};
+
+LessonTemplate.displayName = 'LessonTemplate';

package/shells/typescript-shell/packages/client/src/clients/kflow/templates/index.ts

@@ -0,0 +1,4 @@
+// Learning templates
+export * from './LessonTemplate';
+export * from './ConceptDetailTemplate';
+export * from './KnowledgeGraphTemplate';

package/shells/typescript-shell/packages/client/src/clients/kflow/types/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Common types for kflow design-system client
+ */
+
+export interface FlashCard {
+  id?: string;
+  front: string;
+  back: string;
+}

package/shells/typescript-shell/packages/client/src/clients/kflow/types/mindMapTypes.ts

@@ -0,0 +1,13 @@
+/**
+ * Mind map related types for kflow design-system client
+ */
+
+export type LayoutType = 'horizontal' | 'vertical';
+
+export interface MindMapHeaderProps {
+  zoom: number;
+  layoutType: LayoutType;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onToggleLayout: () => void;
+}

package/shells/typescript-shell/packages/client/src/clients/kflow/utils/index.ts

@@ -0,0 +1,6 @@
+export {
+  parseLessonSegments,
+  parseMarkdownWithCodeBlocks,
+} from "./parseLessonSegments";
+
+export type { Segment, BloomLevel } from "./parseLessonSegments";

package/shells/typescript-shell/packages/client/src/clients/kflow/utils/parseLessonSegments.ts

@@ -0,0 +1,191 @@
+/**
+ * Lesson Segment Parsing Utilities
+ *
+ * Parses lesson content with learning science tags and code blocks
+ * into structured segments for rendering.
+ */
+
+// Bloom's Taxonomy cognitive levels
+export type BloomLevel =
+  | "remember"
+  | "understand"
+  | "apply"
+  | "analyze"
+  | "evaluate"
+  | "create";
+
+// Segment types for lesson content
+export type Segment =
+  | { type: "markdown"; content: string }
+  | { type: "code"; language: string; content: string }
+  | { type: "quiz"; question: string; answer: string }
+  | { type: "activate"; question: string }
+  | { type: "connect"; content: string }
+  | { type: "reflect"; prompt: string }
+  | { type: "bloom"; level: BloomLevel; question: string; answer: string };
+
+/**
+ * Parse markdown content to extract code blocks
+ *
+ * Splits markdown into segments of plain markdown and fenced code blocks
+ */
+export const parseMarkdownWithCodeBlocks = (
+  content: string | undefined | null,
+): Array<
+  | { type: "markdown"; content: string }
+  | { type: "code"; language: string; content: string }
+> => {
+  // Guard against undefined/null content
+  if (!content) {
+    return [];
+  }
+
+  const segments: Array<
+    | { type: "markdown"; content: string }
+    | { type: "code"; language: string; content: string }
+  > = [];
+
+  // Regex to match fenced code blocks: ```language\ncode\n``` or ```\ncode\n```
+  const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/g;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = codeBlockRegex.exec(content)) !== null) {
+    // Add markdown before the code block
+    const before = content.slice(lastIndex, match.index);
+    if (before.trim()) {
+      segments.push({ type: "markdown" as const, content: before });
+    }
+
+    // Add the code block (ensure language is always a string)
+    const language = match[1] || "text";
+    segments.push({
+      type: "code" as const,
+      language,
+      content: match[2].trim(),
+    });
+
+    lastIndex = codeBlockRegex.lastIndex;
+  }
+
+  // Add remaining markdown
+  const remaining = content.slice(lastIndex);
+  if (remaining.trim()) {
+    segments.push({ type: "markdown" as const, content: remaining });
+  }
+
+  return segments;
+};
+
+/**
+ * Parse lesson content to extract all segments including learning science tags
+ *
+ * Supported tags:
+ * - <activate>question</activate> - Prior knowledge activation
+ * - <connect>content</connect> - Connection to existing knowledge
+ * - <reflect>prompt</reflect> - Reflection prompts
+ * - <bloom level="level"><question>q</question><answer>a</answer></bloom> - Bloom's taxonomy questions
+ * - <question>q</question><answer>a</answer> - Regular quiz questions
+ *
+ * Also handles fenced code blocks (```language...```)
+ */
+export const parseLessonSegments = (lesson: string | undefined): Segment[] => {
+  if (!lesson) {
+    return [];
+  }
+
+  // Remove <prq> tags from lesson content since we display prerequisites separately
+  let content = lesson.replace(/<prq>[\s\S]*?<\/prq>/gi, "").trim();
+
+  const segments: Segment[] = [];
+
+  // 1. Extract <activate> tag (should be first)
+  const activateMatch = content.match(/<activate>([\s\S]*?)<\/activate>/i);
+  if (activateMatch) {
+    segments.push({
+      type: "activate",
+      question: activateMatch[1].trim(),
+    });
+    content = content.replace(activateMatch[0], "").trim();
+  }
+
+  // 2. Extract <connect> tag (should be after activate)
+  const connectMatch = content.match(/<connect>([\s\S]*?)<\/connect>/i);
+  if (connectMatch) {
+    segments.push({
+      type: "connect",
+      content: connectMatch[1].trim(),
+    });
+    content = content.replace(connectMatch[0], "").trim();
+  }
+
+  // 3. Parse the rest: markdown, code, reflect, bloom, and regular quiz tags
+  const tagRegex = new RegExp(
+    "(" +
+      // Reflect tags
+      "<reflect>([\\s\\S]*?)<\\/reflect>|" +
+      // Bloom tags (with nested question/answer)
+      '<bloom\\s+level="(remember|understand|apply|analyze|evaluate|create)">([\\s\\S]*?)<\\/bloom>|' +
+      // Regular quiz tags (backward compatibility)
+      "<question>([\\s\\S]*?)<\\/question>\\s*<answer>([\\s\\S]*?)<\\/answer>" +
+      ")",
+    "gi",
+  );
+
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = tagRegex.exec(content)) !== null) {
+    // Add markdown/code before this match
+    const before = content.slice(lastIndex, match.index);
+    if (before.trim()) {
+      const parsedSegments = parseMarkdownWithCodeBlocks(before);
+      segments.push(...parsedSegments);
+    }
+
+    // Determine which tag was matched
+    if (match[0].startsWith("<reflect>")) {
+      // Reflect tag
+      segments.push({
+        type: "reflect",
+        prompt: match[2].trim(),
+      });
+    } else if (match[0].startsWith("<bloom")) {
+      // Bloom tag - extract level and nested question/answer
+      const level = match[3] as BloomLevel;
+      const bloomContent = match[4];
+
+      const questionMatch = bloomContent.match(
+        /<question>([\s\S]*?)<\/question>/i,
+      );
+      const answerMatch = bloomContent.match(/<answer>([\s\S]*?)<\/answer>/i);
+
+      if (questionMatch && answerMatch) {
+        segments.push({
+          type: "bloom",
+          level,
+          question: questionMatch[1].trim(),
+          answer: answerMatch[1].trim(),
+        });
+      }
+    } else {
+      // Regular quiz tag (backward compatibility)
+      segments.push({
+        type: "quiz",
+        question: match[5].trim(),
+        answer: match[6].trim(),
+      });
+    }
+
+    lastIndex = tagRegex.lastIndex;
+  }
+
+  // Parse remaining content (markdown and code blocks)
+  const remaining = content.slice(lastIndex);
+  if (remaining.trim()) {
+    const parsedSegments = parseMarkdownWithCodeBlocks(remaining);
+    segments.push(...parsedSegments);
+  }
+
+  return segments;
+};

package/shells/typescript-shell/packages/client/src/clients/winning-11/atoms/CareIndicator.tsx

@@ -0,0 +1,113 @@
+/**
+ * CareIndicator
+ *
+ * Small icon showing what a relationship needs (communication, payment, etc.)
+ * Quick visual cues for relationship health needs.
+ */
+
+import React from "react";
+import { cn } from "../../../lib/cn";
+import { MessageCircle, CreditCard, Truck, Star } from "lucide-react";
+import { Box } from "../../../components/atoms/Box";
+
+export type CareType = "communication" | "payment" | "delivery" | "feedback";
+export type UrgencyLevel = "low" | "medium" | "high";
+
+export interface CareIndicatorProps {
+  /** Care type */
+  type: CareType;
+  /** Urgency level */
+  urgency: UrgencyLevel;
+  /** Custom tooltip text */
+  tooltip?: string;
+  /** Size variant */
+  size?: "sm" | "md" | "lg";
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const typeConfig = {
+  communication: {
+    icon: MessageCircle,
+    label: "Needs communication",
+    defaultTooltip: "This relationship needs attention - reach out!",
+  },
+  payment: {
+    icon: CreditCard,
+    label: "Payment pending",
+    defaultTooltip: "Payment is pending or overdue",
+  },
+  delivery: {
+    icon: Truck,
+    label: "Delivery needed",
+    defaultTooltip: "Delivery action required",
+  },
+  feedback: {
+    icon: Star,
+    label: "Feedback requested",
+    defaultTooltip: "Feedback would strengthen this relationship",
+  },
+};
+
+const urgencyConfig = {
+  low: {
+    color: "text-blue-500",
+    bgColor: "bg-blue-50",
+    borderColor: "border-blue-200",
+    pulseColor: "",
+  },
+  medium: {
+    color: "text-amber-500",
+    bgColor: "bg-amber-50",
+    borderColor: "border-amber-200",
+    pulseColor: "",
+  },
+  high: {
+    color: "text-red-500",
+    bgColor: "bg-red-50",
+    borderColor: "border-red-200",
+    pulseColor: "animate-pulse",
+  },
+};
+
+const sizeConfig = {
+  sm: { padding: "xs" as const, icon: "h-3 w-3" },
+  md: { padding: "xs" as const, icon: "h-4 w-4" },
+  lg: { padding: "sm" as const, icon: "h-5 w-5" },
+};
+
+export const CareIndicator: React.FC<CareIndicatorProps> = ({
+  type,
+  urgency,
+  tooltip,
+  size = "md",
+  className,
+}) => {
+  const typeConf = typeConfig[type];
+  const urgencyConf = urgencyConfig[urgency];
+  const sizes = sizeConfig[size];
+  const Icon = typeConf.icon;
+  const tooltipText = tooltip || typeConf.defaultTooltip;
+
+  return (
+    <Box
+      display="inline-flex"
+      rounded="full"
+      border
+      padding={sizes.padding}
+      className={cn(
+        "items-center justify-center",
+        urgencyConf.bgColor,
+        urgencyConf.borderColor,
+        urgencyConf.pulseColor,
+        "cursor-help transition-transform hover:scale-110",
+        className,
+      )}
+      title={tooltipText}
+    >
+      <Icon className={cn(sizes.icon, urgencyConf.color)} />
+    </Box>
+  );
+};
+
+CareIndicator.displayName = "CareIndicator";