@almadar/ui 5.32.2 → 5.33.0

package/dist/components/index.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React74 from 'react';
-import React74__default, { useContext, useMemo, useRef, useEffect, useCallback, useState, Suspense, lazy, createContext, useLayoutEffect, useId, useSyncExternalStore } from 'react';
+import React74__default, { useContext, useMemo, useRef, useEffect, useCallback, useState, useLayoutEffect, Suspense, lazy, createContext, useId, useSyncExternalStore } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { EventBusContext, useTraitScope, TraitScopeProvider } from '@almadar/ui/providers';
 import { createLogger, isLogLevelEnabled } from '@almadar/logger';
 import * as LucideIcons2 from 'lucide-react';
-import { Loader2, X, List, Printer, ChevronRight, ChevronLeft, CheckCircle, XCircle, Wrench, RotateCcw, Send, Search, ChevronUp, ChevronDown, MoreHorizontal, Bug, Package, Calendar, Pencil, Eye, Image as Image$1, Upload, ZoomIn, ArrowRight, Pause, Play, SkipForward, TrendingUp, TrendingDown, Minus, AlertCircle, Circle, Clock, CheckCircle2, Code, FileText, WrapText, Check, Copy, HelpCircle, Type, Heading1, Heading2, Heading3, ListOrdered, Quote, GitBranch, Plus, Trash, ArrowLeft, Menu as Menu$1, AlertTriangle, Trash2, Eraser, ZoomOut, Download, Tag, User, DollarSign, Zap, Sword, Move, Heart, Shield } from 'lucide-react';
+import { Loader2, X, Code, FileText, WrapText, Check, Copy, HelpCircle, List, Printer, ChevronRight, ChevronLeft, CheckCircle, XCircle, Wrench, RotateCcw, Send, Lightbulb, PauseCircle, Link2, Search, ChevronUp, ChevronDown, MoreHorizontal, Bug, Package, Calendar, Pencil, Eye, Image as Image$1, Upload, ZoomIn, ArrowRight, Pause, Play, SkipForward, TrendingUp, TrendingDown, Minus, AlertCircle, Circle, Clock, CheckCircle2, Terminal, Type, Heading1, Heading2, Heading3, ListOrdered, Quote, GitBranch, Plus, Trash, ArrowLeft, Menu as Menu$1, AlertTriangle, Trash2, Eraser, ZoomOut, Download, Tag, User, DollarSign, Zap, Sword, Move, Heart, Shield } from 'lucide-react';
 import * as PhosphorIcons from '@phosphor-icons/react';
 import * as TablerIcons from '@tabler/icons-react';
 import * as FaIcons from 'react-icons/fa';
@@ -28771,7 +28771,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect72, useRef: useRef69, useCallback: useCallback114, useState: useState101 } = React74__default;
+      const { useEffect: useEffect72, useRef: useRef69, useCallback: useCallback115, useState: useState105 } = React74__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -28816,8 +28816,8 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState101(null);
-        const handleMapClick = useCallback114((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState105(null);
+        const handleMapClick = useCallback115((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -28826,7 +28826,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback114((marker) => {
+        const handleMarkerClick = useCallback115((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -37529,6 +37529,384 @@ var init_GraphCanvas = __esm({
     GraphCanvas.displayName = "GraphCanvas";
   }
 });
+var ActivationBlock;
+var init_ActivationBlock = __esm({
+  "components/core/molecules/ActivationBlock.tsx"() {
+    "use client";
+    init_useEventBus();
+    init_cn();
+    ActivationBlock = ({
+      question,
+      savedResponse,
+      saveEvent = "SAVE_ACTIVATION",
+      className
+    }) => {
+      const [response, setResponse] = useState(savedResponse ?? "");
+      const [isExpanded, setIsExpanded] = useState(!savedResponse);
+      const { emit } = useEventBus();
+      const handleSubmit = () => {
+        emit(`UI:${saveEvent}`, { response });
+        setIsExpanded(false);
+      };
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "bg-indigo-50 dark:bg-indigo-900/20 border-2 border-indigo-200 dark:border-indigo-800 rounded-lg p-5 mb-6",
+            className
+          ),
+          children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx(Lightbulb, { className: "text-indigo-600 dark:text-indigo-400 flex-shrink-0 mt-1", size: 24 }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsx("h4", { className: "font-semibold text-indigo-900 dark:text-indigo-100 mb-2", children: "Before You Begin..." }),
+              /* @__PURE__ */ jsx("p", { className: "text-gray-700 dark:text-gray-300 mb-3 text-sm md:text-base", children: question }),
+              isExpanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    className: "w-full p-3 border border-indigo-300 dark:border-indigo-700 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm",
+                    placeholder: "Jot down your thoughts...",
+                    value: response,
+                    onChange: (e) => setResponse(e.target.value),
+                    rows: 3
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-3", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: handleSubmit,
+                      className: "px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 text-sm font-medium transition-colors",
+                      children: "Continue to Lesson \u2192"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => {
+                        emit(`UI:${saveEvent}`, { response: "" });
+                        setIsExpanded(false);
+                      },
+                      className: "px-4 py-2 text-indigo-600 dark:text-indigo-400 hover:underline text-sm",
+                      children: "Skip for now"
+                    }
+                  )
+                ] })
+              ] }) : /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setIsExpanded(true),
+                  className: "text-sm text-indigo-600 dark:text-indigo-400 hover:underline font-medium",
+                  children: "\u2713 Answered \xB7 Edit response"
+                }
+              )
+            ] })
+          ] })
+        }
+      );
+    };
+    ActivationBlock.displayName = "ActivationBlock";
+  }
+});
+var ReflectionBlock;
+var init_ReflectionBlock = __esm({
+  "components/core/molecules/ReflectionBlock.tsx"() {
+    "use client";
+    init_useEventBus();
+    init_cn();
+    ReflectionBlock = ({
+      prompt,
+      index,
+      savedNote,
+      saveEvent = "SAVE_REFLECTION",
+      className
+    }) => {
+      const [note, setNote] = useState(savedNote ?? "");
+      const [isExpanded, setIsExpanded] = useState(false);
+      const { emit } = useEventBus();
+      const handleSave = () => {
+        emit(`UI:${saveEvent}`, { index, note });
+        setIsExpanded(false);
+      };
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "my-6 border-l-4 border-amber-400 bg-amber-50 dark:bg-amber-900/20 rounded-r-lg p-4",
+            className
+          ),
+          children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx(PauseCircle, { className: "text-amber-600 dark:text-amber-400 flex-shrink-0 mt-1", size: 20 }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "font-medium text-amber-900 dark:text-amber-100 mb-2", children: "Pause & Reflect" }),
+              /* @__PURE__ */ jsx("p", { className: "text-gray-700 dark:text-gray-300 text-sm mb-3", children: prompt }),
+              isExpanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    className: "w-full p-2 border border-amber-300 dark:border-amber-700 rounded text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-amber-500 focus:border-transparent",
+                    placeholder: "Your thoughts...",
+                    value: note,
+                    onChange: (e) => setNote(e.target.value),
+                    rows: 2
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleSave,
+                    className: "mt-2 text-sm px-3 py-1 bg-amber-600 text-white rounded hover:bg-amber-700 transition-colors",
+                    children: "Save & Continue"
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setIsExpanded(true),
+                  className: "text-sm text-amber-600 dark:text-amber-400 hover:underline",
+                  children: savedNote ? "\u2713 Answered \xB7 Edit" : "Answer this question"
+                }
+              )
+            ] })
+          ] })
+        }
+      );
+    };
+    ReflectionBlock.displayName = "ReflectionBlock";
+  }
+});
+var ConnectionBlock;
+var init_ConnectionBlock = __esm({
+  "components/core/molecules/ConnectionBlock.tsx"() {
+    "use client";
+    init_MarkdownContent();
+    init_cn();
+    ConnectionBlock = ({ content, className }) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "bg-emerald-50 dark:bg-emerald-900/20 border-l-4 border-emerald-500 rounded-r-lg p-5 mb-6",
+          className
+        ),
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx(Link2, { className: "text-emerald-600 dark:text-emerald-400 flex-shrink-0 mt-1", size: 20 }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsx("h4", { className: "font-semibold text-emerald-900 dark:text-emerald-100 mb-2", children: "Building On What You Know" }),
+            /* @__PURE__ */ jsx("div", { className: "prose dark:prose-invert prose-sm max-w-none text-gray-700 dark:text-gray-300", children: /* @__PURE__ */ jsx(MarkdownContent, { content }) })
+          ] })
+        ] })
+      }
+    );
+    ConnectionBlock.displayName = "ConnectionBlock";
+  }
+});
+
+// components/core/molecules/lessonSegmentUtils.ts
+function parseMarkdownWithCodeBlocks2(content) {
+  const segments = [];
+  const codeBlockRegex = /```([\w-]+)?(?:\s+(run))?\n([\s\S]*?)```/g;
+  let lastIndex = 0;
+  let match;
+  while ((match = codeBlockRegex.exec(content)) !== null) {
+    const before = content.slice(lastIndex, match.index);
+    if (before.trim()) {
+      segments.push({ type: "markdown", content: before });
+    }
+    const rawLanguage = match[1] ?? "text";
+    const runModifier = !!match[2];
+    const suffixRunnable = rawLanguage.endsWith("-runnable");
+    const runnable = runModifier || suffixRunnable;
+    const baseLanguage = suffixRunnable ? rawLanguage.slice(0, -"-runnable".length) || "text" : rawLanguage;
+    segments.push({ type: "code", language: baseLanguage, content: match[3].trim(), runnable });
+    lastIndex = codeBlockRegex.lastIndex;
+  }
+  const remaining = content.slice(lastIndex);
+  if (remaining.trim()) {
+    segments.push({ type: "markdown", content: remaining });
+  }
+  return segments;
+}
+var init_lessonSegmentUtils = __esm({
+  "components/core/molecules/lessonSegmentUtils.ts"() {
+  }
+});
+var BLOOM_CONFIG, BloomQuizBlock;
+var init_BloomQuizBlock = __esm({
+  "components/core/molecules/BloomQuizBlock.tsx"() {
+    "use client";
+    init_MarkdownContent();
+    init_CodeBlock();
+    init_lessonSegmentUtils();
+    init_useEventBus();
+    init_cn();
+    BLOOM_CONFIG = {
+      remember: { color: "bg-gray-500", bgColor: "bg-gray-50 dark:bg-gray-900/30", label: "Remember" },
+      understand: { color: "bg-blue-500", bgColor: "bg-blue-50 dark:bg-blue-900/30", label: "Understand" },
+      apply: { color: "bg-green-500", bgColor: "bg-green-50 dark:bg-green-900/30", label: "Apply" },
+      analyze: { color: "bg-yellow-500", bgColor: "bg-yellow-50 dark:bg-yellow-900/30", label: "Analyze" },
+      evaluate: { color: "bg-orange-500", bgColor: "bg-orange-50 dark:bg-orange-900/30", label: "Evaluate" },
+      create: { color: "bg-purple-500", bgColor: "bg-purple-50 dark:bg-purple-900/30", label: "Create" }
+    };
+    BloomQuizBlock = ({
+      level,
+      question,
+      answer,
+      index,
+      isAnswered,
+      answerEvent = "ANSWER_BLOOM",
+      className
+    }) => {
+      const [revealed, setRevealed] = useState(false);
+      const config = BLOOM_CONFIG[level];
+      const { emit } = useEventBus();
+      const questionSegments = useMemo(() => parseMarkdownWithCodeBlocks2(question), [question]);
+      const answerSegments = useMemo(() => parseMarkdownWithCodeBlocks2(answer), [answer]);
+      const handleReveal = () => {
+        if (!revealed) {
+          emit(`UI:${answerEvent}`, { index: index ?? 0, level });
+        }
+        setRevealed(!revealed);
+      };
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "rounded-lg border border-indigo-100 dark:border-indigo-800 p-4 my-4 transition-all",
+            config.bgColor,
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+                index !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-gray-500 dark:text-gray-400 font-medium text-sm", children: [
+                  "Question ",
+                  index + 1
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: cn(config.color, "text-white text-xs px-2 py-1 rounded-full font-medium"), children: config.label })
+              ] }),
+              isAnswered && /* @__PURE__ */ jsx(CheckCircle, { className: "text-green-600 dark:text-green-400 flex-shrink-0", size: 20 })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "font-semibold text-indigo-900 dark:text-indigo-200 mb-3 space-y-2", children: questionSegments.map(
+              (segment, idx) => segment.type === "markdown" ? /* @__PURE__ */ jsx(MarkdownContent, { content: segment.content }, `q-md-${idx}`) : /* @__PURE__ */ jsx(
+                CodeBlock,
+                {
+                  language: segment.language ?? "text",
+                  code: segment.content
+                },
+                `q-code-${idx}`
+              )
+            ) }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "inline-flex items-center rounded-md bg-indigo-600 dark:bg-indigo-500 px-3 py-1.5 text-sm font-medium text-white hover:bg-indigo-700 dark:hover:bg-indigo-600 transition-colors",
+                onClick: handleReveal,
+                children: revealed ? "Hide Answer" : "Reveal Answer"
+              }
+            ),
+            revealed && /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-white/80 dark:bg-gray-800/80 p-3 text-sm text-slate-800 dark:text-gray-200 shadow-sm border border-indigo-100 dark:border-indigo-800 mt-3 space-y-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-600 dark:text-gray-400 mb-1 font-medium uppercase tracking-wide", children: "Answer:" }),
+              answerSegments.map(
+                (segment, idx) => segment.type === "markdown" ? /* @__PURE__ */ jsx(MarkdownContent, { content: segment.content }, `a-md-${idx}`) : /* @__PURE__ */ jsx(
+                  CodeBlock,
+                  {
+                    language: segment.language ?? "text",
+                    code: segment.content
+                  },
+                  `a-code-${idx}`
+                )
+              )
+            ] })
+          ]
+        }
+      );
+    };
+    BloomQuizBlock.displayName = "BloomQuizBlock";
+  }
+});
+
+// components/core/molecules/parseLessonSegments.ts
+function extractTagContent(content, tagName) {
+  const closedTagRegex = new RegExp(`<${tagName}>([\\s\\S]*?)<\\/${tagName}>`, "i");
+  const closedMatch = content.match(closedTagRegex);
+  if (closedMatch) {
+    return { content: closedMatch[1].trim(), fullMatch: closedMatch[0] };
+  }
+  const unclosedTagRegex = new RegExp(
+    `<${tagName}>([\\s\\S]*?)(?=<(?:activate|connect|reflect|bloom|prq|question|answer|visualize)|\\n\\n#|$)`,
+    "i"
+  );
+  const unclosedMatch = content.match(unclosedTagRegex);
+  if (unclosedMatch) {
+    return { content: unclosedMatch[1].trim(), fullMatch: unclosedMatch[0] };
+  }
+  return null;
+}
+function parseLessonSegments(lesson) {
+  if (!lesson) return [];
+  let content = lesson.replace(/<prq>[\s\S]*?<\/prq>/gi, "").trim();
+  const segments = [];
+  const activateResult = extractTagContent(content, "activate");
+  if (activateResult) {
+    segments.push({ type: "activate", question: activateResult.content });
+    content = content.replace(activateResult.fullMatch, "").trim();
+  }
+  const connectResult = extractTagContent(content, "connect");
+  if (connectResult) {
+    segments.push({ type: "connect", content: connectResult.content });
+    content = content.replace(connectResult.fullMatch, "").trim();
+  }
+  const tagRegex = new RegExp(
+    '(?<reflect><reflect>(?<reflectClosed>[\\s\\S]*?)<\\/reflect>)|(?<reflectUnclosed><reflect>(?<reflectOpen>[\\s\\S]*?)(?=<(?:activate|connect|reflect|bloom|prq|question|answer|visualize)|\\n\\n#|$))|(?<bloom><bloom\\s+level="(?<bloomLevel>remember|understand|apply|analyze|evaluate|create)">(?<bloomClosed>[\\s\\S]*?)<\\/bloom>)|(?<bloomUnclosed><bloom\\s+level="(?<bloomLevelUn>remember|understand|apply|analyze|evaluate|create)">(?<bloomOpen>[\\s\\S]*?)(?=<(?:activate|connect|reflect|bloom|prq|question|answer|visualize)|\\n\\n#|$))|(?<quiz><question>(?<quizQuestion>[\\s\\S]*?)<\\/question>\\s*<answer>(?<quizAnswer>[\\s\\S]*?)<\\/answer>)|(?<visualize><visualize\\s+type="(?<vizType>chart|simulation)"\\s+description="(?<vizDesc>[^"]*?)"\\s*\\/?>)',
+    "gi"
+  );
+  let lastIndex = 0;
+  let match;
+  while ((match = tagRegex.exec(content)) !== null) {
+    const before = content.slice(lastIndex, match.index);
+    if (before.trim()) {
+      segments.push(...parseMarkdownWithCodeBlocks2(before));
+    }
+    const g = match.groups ?? {};
+    if (g.reflect || g.reflectUnclosed) {
+      const prompt = (g.reflectClosed ?? g.reflectOpen ?? "").trim();
+      if (prompt) segments.push({ type: "reflect", prompt });
+    } else if (g.bloom || g.bloomUnclosed) {
+      const level = g.bloomLevel ?? g.bloomLevelUn;
+      const bloomContent = g.bloomClosed ?? g.bloomOpen ?? "";
+      if (level && bloomContent) {
+        const qMatch = bloomContent.match(/<question>([\s\S]*?)<\/question>/i);
+        const aMatch = bloomContent.match(/<answer>([\s\S]*?)<\/answer>/i);
+        if (qMatch && aMatch) {
+          segments.push({ type: "bloom", level, question: qMatch[1].trim(), answer: aMatch[1].trim() });
+        } else if (qMatch) {
+          segments.push({ type: "bloom", level, question: qMatch[1].trim(), answer: "(Answer not provided)" });
+        } else {
+          const clean = bloomContent.replace(/^\*\*Question\s*\d*:?\*\*\s*/i, "").replace(/^\*\*Q\d*:?\*\*\s*/i, "").trim();
+          if (clean) segments.push({ type: "bloom", level, question: clean, answer: "(See answers section below)" });
+        }
+      }
+    } else if (g.quiz) {
+      segments.push({ type: "quiz", question: g.quizQuestion.trim(), answer: g.quizAnswer.trim() });
+    } else if (g.visualize) {
+      segments.push({
+        type: "visualization",
+        visualizationType: g.vizType,
+        description: g.vizDesc ?? ""
+      });
+    }
+    lastIndex = tagRegex.lastIndex;
+  }
+  const remaining = content.slice(lastIndex);
+  if (remaining.trim()) segments.push(...parseMarkdownWithCodeBlocks2(remaining));
+  return segments;
+}
+var init_parseLessonSegments = __esm({
+  "components/core/molecules/parseLessonSegments.ts"() {
+    init_lessonSegmentUtils();
+  }
+});
 
 // components/core/molecules/index.ts
 var init_molecules2 = __esm({
@@ -37660,6 +38038,12 @@ var init_molecules2 = __esm({
     init_SignaturePad();
     init_DocumentViewer();
     init_GraphCanvas();
+    init_ActivationBlock();
+    init_ReflectionBlock();
+    init_ConnectionBlock();
+    init_BloomQuizBlock();
+    init_parseLessonSegments();
+    init_lessonSegmentUtils();
   }
 });
 
@@ -50043,6 +50427,271 @@ init_ShowcaseOrganism();
 init_TeamOrganism();
 init_CaseStudyOrganism();
 
+// components/core/organisms/CodeRunnerPanel.tsx
+init_Box();
+init_Button();
+init_Badge();
+init_Typography();
+init_Stack();
+init_CodeBlock();
+init_useEventBus();
+init_cn();
+var CodeRunnerPanel = ({
+  code: initialCode,
+  language,
+  runnable = true,
+  onRun,
+  runEvent = "RUN_CODE",
+  className
+}) => {
+  const eventBus = useEventBus();
+  const { t } = useTranslate();
+  const [code, setCode] = useState(initialCode);
+  const [output, setOutput] = useState(null);
+  const [error, setError] = useState(null);
+  const [isRunning, setIsRunning] = useState(false);
+  const handleRun = useCallback(async () => {
+    if (!onRun) return;
+    setIsRunning(true);
+    setError(null);
+    setOutput(null);
+    try {
+      const result = await onRun(code);
+      setOutput(result);
+      eventBus.emit(`UI:${runEvent}`, { language, exitCode: result.exitCode });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : t("common.error");
+      setError(message);
+      eventBus.emit(`UI:${runEvent}`, { language, exitCode: 1, error: message });
+    } finally {
+      setIsRunning(false);
+    }
+  }, [code, language, onRun, runEvent, eventBus, t]);
+  const handleReset = useCallback(() => {
+    setCode(initialCode);
+    setOutput(null);
+    setError(null);
+  }, [initialCode]);
+  if (!runnable || !onRun) {
+    return /* @__PURE__ */ jsx(Box, { className, children: /* @__PURE__ */ jsx(CodeBlock, { language, code }) });
+  }
+  const hasOutput = output !== null || error !== null;
+  return /* @__PURE__ */ jsxs(Box, { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsx(
+      CodeBlock,
+      {
+        language,
+        code,
+        editable: true,
+        onChange: setCode,
+        showLanguageBadge: true,
+        showCopyButton: true
+      }
+    ),
+    /* @__PURE__ */ jsxs(HStack, { gap: "sm", justify: "between", children: [
+      /* @__PURE__ */ jsxs(HStack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "primary",
+            size: "sm",
+            onClick: handleRun,
+            disabled: isRunning,
+            className: "min-w-[5rem]",
+            children: isRunning ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(RotateCcw, { size: 16, className: "animate-spin" }),
+              t("common.loading")
+            ] }) : /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Play, { size: 16 }),
+              "Run"
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            size: "sm",
+            onClick: handleReset,
+            disabled: isRunning,
+            children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(RotateCcw, { size: 16 }),
+              "Reset"
+            ] })
+          }
+        )
+      ] }),
+      output && /* @__PURE__ */ jsxs(
+        Badge,
+        {
+          variant: output.exitCode === 0 ? "success" : "danger",
+          size: "sm",
+          children: [
+            "Exit ",
+            output.exitCode
+          ]
+        }
+      )
+    ] }),
+    hasOutput && /* @__PURE__ */ jsxs(Box, { className: "rounded-lg border border-gray-700 bg-[#0d0d0d] overflow-hidden", children: [
+      /* @__PURE__ */ jsxs(
+        HStack,
+        {
+          gap: "sm",
+          align: "center",
+          className: "px-3 py-2 bg-gray-800 border-b border-gray-700",
+          children: [
+            /* @__PURE__ */ jsx(Terminal, { size: 16, className: "text-gray-400" }),
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-300 font-medium", children: "Output" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(VStack, { gap: "none", className: "p-3 font-mono text-sm", children: error ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-red-400 whitespace-pre-wrap", children: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        output?.stdout ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-200 whitespace-pre-wrap", children: output.stdout }) : null,
+        output?.stderr ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-red-400 whitespace-pre-wrap", children: output.stderr }) : null,
+        !output?.stdout && !output?.stderr ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500 italic", children: "No output" }) : null,
+        output && output.testResults.length > 0 && /* @__PURE__ */ jsx(Box, { className: "mt-3 pt-3 border-t border-gray-700 space-y-2", children: output.testResults.map((test, index) => /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "start", className: "text-xs", children: [
+          test.passed ? /* @__PURE__ */ jsx(CheckCircle, { size: 14, className: "text-green-400 mt-0.5" }) : /* @__PURE__ */ jsx(XCircle, { size: 14, className: "text-red-400 mt-0.5" }),
+          /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: "flex-1", children: [
+            /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                variant: "small",
+                className: test.passed ? "text-green-400" : "text-red-400",
+                children: [
+                  "Test ",
+                  index + 1,
+                  ": ",
+                  test.passed ? "passed" : "failed"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-400", children: [
+              "Input: ",
+              test.input
+            ] }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-400", children: [
+              "Expected: ",
+              test.expectedOutput
+            ] }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-400", children: [
+              "Actual: ",
+              test.actualOutput
+            ] })
+          ] })
+        ] }, index)) })
+      ] }) })
+    ] })
+  ] });
+};
+CodeRunnerPanel.displayName = "CodeRunnerPanel";
+
+// components/core/organisms/SegmentRenderer.tsx
+init_MarkdownContent();
+init_CodeBlock();
+init_QuizBlock();
+init_ActivationBlock();
+init_ConnectionBlock();
+init_ReflectionBlock();
+init_BloomQuizBlock();
+init_cn();
+var SegmentRenderer = ({
+  segments,
+  className,
+  containerClassName,
+  userProgress,
+  onRunCodeSimulation,
+  onRenderVisualization
+}) => {
+  if (segments.length === 0) return null;
+  let reflectIndex = 0;
+  let bloomIndex = 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "border border-gray-200 dark:border-gray-700 rounded-lg p-2 md:p-4 overflow-x-auto space-y-6",
+        containerClassName,
+        className
+      ),
+      children: segments.map((segment, index) => {
+        if (segment.type === "markdown") {
+          return /* @__PURE__ */ jsx(MarkdownContent, { content: segment.content }, `md-${index}`);
+        }
+        if (segment.type === "code") {
+          if (segment.runnable && onRunCodeSimulation) {
+            return /* @__PURE__ */ jsx(
+              CodeRunnerPanel,
+              {
+                language: segment.language,
+                code: segment.content,
+                runnable: true,
+                onRun: (code) => onRunCodeSimulation(code, segment.language)
+              },
+              `code-${index}`
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            CodeBlock,
+            {
+              language: segment.language ?? "text",
+              code: segment.content
+            },
+            `code-${index}`
+          );
+        }
+        if (segment.type === "quiz") {
+          return /* @__PURE__ */ jsx(QuizBlock, { question: segment.question, answer: segment.answer }, `quiz-${index}`);
+        }
+        if (segment.type === "activate") {
+          return /* @__PURE__ */ jsx(
+            ActivationBlock,
+            {
+              question: segment.question,
+              savedResponse: userProgress?.activationResponse
+            },
+            `activate-${index}`
+          );
+        }
+        if (segment.type === "connect") {
+          return /* @__PURE__ */ jsx(ConnectionBlock, { content: segment.content }, `connect-${index}`);
+        }
+        if (segment.type === "reflect") {
+          const ri = reflectIndex++;
+          return /* @__PURE__ */ jsx(
+            ReflectionBlock,
+            {
+              prompt: segment.prompt,
+              index: ri,
+              savedNote: userProgress?.reflectionNotes?.[ri]
+            },
+            `reflect-${index}`
+          );
+        }
+        if (segment.type === "bloom") {
+          const bi = bloomIndex++;
+          return /* @__PURE__ */ jsx(
+            BloomQuizBlock,
+            {
+              level: segment.level,
+              question: segment.question,
+              answer: segment.answer,
+              index: bi,
+              isAnswered: userProgress?.bloomAnswered?.[bi]
+            },
+            `bloom-${index}`
+          );
+        }
+        if (segment.type === "visualization") {
+          return onRenderVisualization ? onRenderVisualization(segment.visualizationType, segment.description, index) ?? null : null;
+        }
+        return null;
+      })
+    }
+  );
+};
+SegmentRenderer.displayName = "SegmentRenderer";
+
 // components/core/templates/index.ts
 init_DashboardLayout();
 init_AuthLayout();
@@ -50061,4 +50710,4 @@ init_AboutPageTemplate();
 // components/index.ts
 init_cn();
 
-export { ALL_PRESETS, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BehaviorView, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, ClassifierBoard, Coachmark, CodeBlock, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBox, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HealthPanel, HeroOrganism, HeroSection, IDENTITY_BOOK_FIELDS, Icon, IconPicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NodeSlotEditor, NotifyListener, NumberStepper, ObjectRulePanel, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerCanvas, Popover, PositionedCanvas, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createUnitAnimationState, drawSprite, generateCombatMessage, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, mapBookData, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, springOscillator, tickAnimationState, toCodeLanguage, transitionAnimation, useAnchorRect, useBattleState, useCamera, useGameAudio, useGameAudioContext, useImageCache, usePhysics2D, useSpriteAnimations };
+export { ALL_PRESETS, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, ActivationBlock, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BehaviorView, BloomQuizBlock, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, ClassifierBoard, Coachmark, CodeBlock, CodeRunnerPanel, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, ConnectionBlock, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBox, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HealthPanel, HeroOrganism, HeroSection, IDENTITY_BOOK_FIELDS, Icon, IconPicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NodeSlotEditor, NotifyListener, NumberStepper, ObjectRulePanel, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerCanvas, Popover, PositionedCanvas, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuestTracker, QuizBlock, Radio, RangeSlider, ReflectionBlock, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, SegmentRenderer, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createUnitAnimationState, drawSprite, generateCombatMessage, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, mapBookData, parseLessonSegments, parseMarkdownWithCodeBlocks2 as parseMarkdownWithCodeBlocks, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, springOscillator, tickAnimationState, toCodeLanguage, transitionAnimation, useAnchorRect, useBattleState, useCamera, useGameAudio, useGameAudioContext, useImageCache, usePhysics2D, useSpriteAnimations };