@almadar/ui 5.145.0 → 5.146.1

package/dist/avl/index.cjs

@@ -24234,6 +24234,7 @@ var init_CodeRunnerPanel = __esm({
       const [output, setOutput] = React94.useState(null);
       const [error, setError] = React94.useState(null);
       const [isRunning, setIsRunning] = React94.useState(false);
+      const [copied, setCopied] = React94.useState(false);
       const handleRun = React94.useCallback(async () => {
         if (!onRun) return;
         setIsRunning(true);
@@ -24256,63 +24257,75 @@ var init_CodeRunnerPanel = __esm({
         setOutput(null);
         setError(null);
       }, [initialCode]);
+      const handleCopy = React94.useCallback(async () => {
+        try {
+          await navigator.clipboard.writeText(code);
+          setCopied(true);
+          eventBus.emit("UI:COPY_CODE", { language, success: true });
+          setTimeout(() => setCopied(false), 2e3);
+        } catch {
+          eventBus.emit("UI:COPY_CODE", { language, success: false });
+        }
+      }, [code, language, eventBus]);
       if (!runnable || !onRun) {
         return /* @__PURE__ */ jsxRuntime.jsx(Box, { className, children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { language, code }) });
       }
       const hasOutput = output !== null || error !== null;
       return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("space-y-3", className), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          CodeBlock,
-          {
-            language,
-            code,
-            editable: true,
-            onChange: setCode,
-            showLanguageBadge: true,
-            showCopyButton: true
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", justify: "between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "primary",
-                size: "sm",
-                onClick: handleRun,
-                disabled: isRunning,
-                className: "min-w-[5rem]",
-                children: isRunning ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.RotateCcw, { size: 16, className: "animate-spin" }),
-                  t("common.loading")
-                ] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.Play, { size: 16 }),
-                  "Run"
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "secondary",
-                size: "sm",
-                onClick: handleReset,
-                disabled: isRunning,
-                children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.RotateCcw, { size: 16 }),
-                  "Reset"
-                ] })
-              }
-            )
-          ] }),
-          output && /* @__PURE__ */ jsxRuntime.jsxs(
-            Badge,
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "group relative", style: { height: 360 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CodeBlock,
             {
-              variant: output.exitCode === 0 ? "success" : "danger",
-              size: "sm",
+              language,
+              code,
+              editable: true,
+              onChange: setCode,
+              showLanguageBadge: true,
+              showCopyButton: false,
+              maxHeight: "100%"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            HStack,
+            {
+              gap: "xs",
+              align: "center",
+              className: "absolute top-2 right-2 z-10 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto focus-within:opacity-100 focus-within:pointer-events-auto transition-opacity bg-[var(--color-card)]/90 backdrop-blur-sm rounded-md p-1 shadow-sm border border-border",
               children: [
-                "Exit ",
-                output.exitCode
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: handleCopy,
+                    icon: copied ? LucideIcons2.Check : LucideIcons2.Copy,
+                    "aria-label": t("common.copy"),
+                    className: copied ? "text-success" : ""
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: handleReset,
+                    disabled: isRunning,
+                    icon: LucideIcons2.RotateCcw,
+                    "aria-label": "Reset"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "primary",
+                    size: "sm",
+                    onClick: handleRun,
+                    disabled: isRunning,
+                    icon: isRunning ? LucideIcons2.RotateCcw : LucideIcons2.Play,
+                    className: isRunning ? "[&_svg]:animate-spin" : "",
+                    children: isRunning ? t("common.loading") : "Run"
+                  }
+                )
               ]
             }
           )
@@ -24326,7 +24339,18 @@ var init_CodeRunnerPanel = __esm({
               className: "px-3 py-2 bg-card border-b border-border",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.Terminal, { size: 16, className: "text-muted-foreground" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-foreground font-medium", children: "Output" })
+                /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-foreground font-medium", children: "Output" }),
+                output && /* @__PURE__ */ jsxRuntime.jsxs(
+                  Badge,
+                  {
+                    variant: output.exitCode === 0 ? "success" : "danger",
+                    size: "sm",
+                    children: [
+                      "Exit ",
+                      output.exitCode
+                    ]
+                  }
+                )
               ]
             }
           ),

package/dist/avl/index.js

@@ -24158,6 +24158,7 @@ var init_CodeRunnerPanel = __esm({
       const [output, setOutput] = useState(null);
       const [error, setError] = useState(null);
       const [isRunning, setIsRunning] = useState(false);
+      const [copied, setCopied] = useState(false);
       const handleRun = useCallback(async () => {
         if (!onRun) return;
         setIsRunning(true);
@@ -24180,63 +24181,75 @@ var init_CodeRunnerPanel = __esm({
         setOutput(null);
         setError(null);
       }, [initialCode]);
+      const handleCopy = useCallback(async () => {
+        try {
+          await navigator.clipboard.writeText(code);
+          setCopied(true);
+          eventBus.emit("UI:COPY_CODE", { language, success: true });
+          setTimeout(() => setCopied(false), 2e3);
+        } catch {
+          eventBus.emit("UI:COPY_CODE", { language, success: false });
+        }
+      }, [code, language, eventBus]);
       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,
+        /* @__PURE__ */ jsxs(Box, { className: "group relative", style: { height: 360 }, children: [
+          /* @__PURE__ */ jsx(
+            CodeBlock,
             {
-              variant: output.exitCode === 0 ? "success" : "danger",
-              size: "sm",
+              language,
+              code,
+              editable: true,
+              onChange: setCode,
+              showLanguageBadge: true,
+              showCopyButton: false,
+              maxHeight: "100%"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            HStack,
+            {
+              gap: "xs",
+              align: "center",
+              className: "absolute top-2 right-2 z-10 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto focus-within:opacity-100 focus-within:pointer-events-auto transition-opacity bg-[var(--color-card)]/90 backdrop-blur-sm rounded-md p-1 shadow-sm border border-border",
               children: [
-                "Exit ",
-                output.exitCode
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: handleCopy,
+                    icon: copied ? Check : Copy,
+                    "aria-label": t("common.copy"),
+                    className: copied ? "text-success" : ""
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: handleReset,
+                    disabled: isRunning,
+                    icon: RotateCcw,
+                    "aria-label": "Reset"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "primary",
+                    size: "sm",
+                    onClick: handleRun,
+                    disabled: isRunning,
+                    icon: isRunning ? RotateCcw : Play,
+                    className: isRunning ? "[&_svg]:animate-spin" : "",
+                    children: isRunning ? t("common.loading") : "Run"
+                  }
+                )
               ]
             }
           )
@@ -24250,7 +24263,18 @@ var init_CodeRunnerPanel = __esm({
               className: "px-3 py-2 bg-card border-b border-border",
               children: [
                 /* @__PURE__ */ jsx(Terminal, { size: 16, className: "text-muted-foreground" }),
-                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-foreground font-medium", children: "Output" })
+                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-foreground font-medium", children: "Output" }),
+                output && /* @__PURE__ */ jsxs(
+                  Badge,
+                  {
+                    variant: output.exitCode === 0 ? "success" : "danger",
+                    size: "sm",
+                    children: [
+                      "Exit ",
+                      output.exitCode
+                    ]
+                  }
+                )
               ]
             }
           ),

package/dist/components/index.cjs

@@ -19346,6 +19346,7 @@ var init_CodeRunnerPanel = __esm({
       const [output, setOutput] = React77.useState(null);
       const [error, setError] = React77.useState(null);
       const [isRunning, setIsRunning] = React77.useState(false);
+      const [copied, setCopied] = React77.useState(false);
       const handleRun = React77.useCallback(async () => {
         if (!onRun) return;
         setIsRunning(true);
@@ -19368,63 +19369,75 @@ var init_CodeRunnerPanel = __esm({
         setOutput(null);
         setError(null);
       }, [initialCode]);
+      const handleCopy = React77.useCallback(async () => {
+        try {
+          await navigator.clipboard.writeText(code);
+          setCopied(true);
+          eventBus.emit("UI:COPY_CODE", { language, success: true });
+          setTimeout(() => setCopied(false), 2e3);
+        } catch {
+          eventBus.emit("UI:COPY_CODE", { language, success: false });
+        }
+      }, [code, language, eventBus]);
       if (!runnable || !onRun) {
         return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className, children: /* @__PURE__ */ jsxRuntime.jsx(exports.CodeBlock, { language, code }) });
       }
       const hasOutput = output !== null || error !== null;
       return /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: cn("space-y-3", className), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          exports.CodeBlock,
-          {
-            language,
-            code,
-            editable: true,
-            onChange: setCode,
-            showLanguageBadge: true,
-            showCopyButton: true
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "sm", justify: "between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              exports.Button,
-              {
-                variant: "primary",
-                size: "sm",
-                onClick: handleRun,
-                disabled: isRunning,
-                className: "min-w-[5rem]",
-                children: isRunning ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.RotateCcw, { size: 16, className: "animate-spin" }),
-                  t("common.loading")
-                ] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.Play, { size: 16 }),
-                  "Run"
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              exports.Button,
-              {
-                variant: "secondary",
-                size: "sm",
-                onClick: handleReset,
-                disabled: isRunning,
-                children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.RotateCcw, { size: 16 }),
-                  "Reset"
-                ] })
-              }
-            )
-          ] }),
-          output && /* @__PURE__ */ jsxRuntime.jsxs(
-            exports.Badge,
+        /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: "group relative", style: { height: 360 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            exports.CodeBlock,
             {
-              variant: output.exitCode === 0 ? "success" : "danger",
-              size: "sm",
+              language,
+              code,
+              editable: true,
+              onChange: setCode,
+              showLanguageBadge: true,
+              showCopyButton: false,
+              maxHeight: "100%"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            exports.HStack,
+            {
+              gap: "xs",
+              align: "center",
+              className: "absolute top-2 right-2 z-10 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto focus-within:opacity-100 focus-within:pointer-events-auto transition-opacity bg-[var(--color-card)]/90 backdrop-blur-sm rounded-md p-1 shadow-sm border border-border",
               children: [
-                "Exit ",
-                output.exitCode
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  exports.Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: handleCopy,
+                    icon: copied ? LucideIcons2.Check : LucideIcons2.Copy,
+                    "aria-label": t("common.copy"),
+                    className: copied ? "text-success" : ""
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  exports.Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: handleReset,
+                    disabled: isRunning,
+                    icon: LucideIcons2.RotateCcw,
+                    "aria-label": "Reset"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  exports.Button,
+                  {
+                    variant: "primary",
+                    size: "sm",
+                    onClick: handleRun,
+                    disabled: isRunning,
+                    icon: isRunning ? LucideIcons2.RotateCcw : LucideIcons2.Play,
+                    className: isRunning ? "[&_svg]:animate-spin" : "",
+                    children: isRunning ? t("common.loading") : "Run"
+                  }
+                )
               ]
             }
           )
@@ -19438,7 +19451,18 @@ var init_CodeRunnerPanel = __esm({
               className: "px-3 py-2 bg-card border-b border-border",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.Terminal, { size: 16, className: "text-muted-foreground" }),
-                /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", className: "text-foreground font-medium", children: "Output" })
+                /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", className: "text-foreground font-medium", children: "Output" }),
+                output && /* @__PURE__ */ jsxRuntime.jsxs(
+                  exports.Badge,
+                  {
+                    variant: output.exitCode === 0 ? "success" : "danger",
+                    size: "sm",
+                    children: [
+                      "Exit ",
+                      output.exitCode
+                    ]
+                  }
+                )
               ]
             }
           ),
@@ -39325,7 +39349,7 @@ function parseLessonSegments(lesson) {
     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|math|physics|biology|chemistry|probability)"\\s+description="(?<vizDesc>[^"]*?)"\\s*\\/?>)',
+    '(?<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>algorithms|math|physics|biology|chemistry|probability|freeform)"\\s+description="(?<vizDesc>[^"]*?)"\\s*\\/?>)',
     "gi"
   );
   let lastIndex = 0;

package/dist/components/index.d.cts

@@ -9506,7 +9506,7 @@ declare function parseMarkdownWithCodeBlocks(content: string): MixedSegment[];
  * until the next recognised tag, a section heading (`\n\n#`), or end-of-input.
  */
 
-type InteractiveOrbitalType = 'chart' | 'simulation' | 'math' | 'physics' | 'biology' | 'chemistry' | 'probability';
+type InteractiveOrbitalType = 'algorithms' | 'math' | 'physics' | 'biology' | 'chemistry' | 'probability' | 'freeform';
 type LessonSegment = MixedSegment | {
     type: 'quiz';
     question: string;

package/dist/components/index.d.ts

@@ -9506,7 +9506,7 @@ declare function parseMarkdownWithCodeBlocks(content: string): MixedSegment[];
  * until the next recognised tag, a section heading (`\n\n#`), or end-of-input.
  */
 
-type InteractiveOrbitalType = 'chart' | 'simulation' | 'math' | 'physics' | 'biology' | 'chemistry' | 'probability';
+type InteractiveOrbitalType = 'algorithms' | 'math' | 'physics' | 'biology' | 'chemistry' | 'probability' | 'freeform';
 type LessonSegment = MixedSegment | {
     type: 'quiz';
     question: string;

package/dist/components/index.js

@@ -7,7 +7,7 @@ import { EventBusContext, useTraitScopeChain, useCurrentPagePath, useGameAudioCo
 export { GameAudioContext, GameAudioProvider, useGameAudioContext } from '@almadar/ui/providers';
 import { createLogger, isLogLevelEnabled } from '@almadar/logger';
 import * as LucideIcons2 from 'lucide-react';
-import { X, List, Printer, ChevronRight, ChevronLeft, RotateCcw, Play, Terminal, CheckCircle, XCircle, ChevronDown, Search, ChevronUp, MoreHorizontal, Package, Calendar, Pencil, Eye, Image as Image$1, Upload, ZoomIn, TrendingUp, TrendingDown, Minus, AlertCircle, Circle, Clock, CheckCircle2, Loader2, Code, FileText, WrapText, Check, Copy, HelpCircle, Type, Heading1, Heading2, Heading3, ListOrdered, Quote, GitBranch, Plus, ArrowRight, Trash, ArrowLeft, Menu as Menu$1, AlertTriangle, Trash2, Eraser, ZoomOut, Download, Lightbulb, PauseCircle, Link2, Tag, User, DollarSign } from 'lucide-react';
+import { X, List, Printer, ChevronRight, ChevronLeft, Check, Copy, RotateCcw, Play, Terminal, CheckCircle, XCircle, ChevronDown, Search, ChevronUp, MoreHorizontal, Package, Calendar, Pencil, Eye, Image as Image$1, Upload, ZoomIn, TrendingUp, TrendingDown, Minus, AlertCircle, Circle, Clock, CheckCircle2, Loader2, Code, FileText, WrapText, HelpCircle, Type, Heading1, Heading2, Heading3, ListOrdered, Quote, GitBranch, Plus, ArrowRight, Trash, ArrowLeft, Menu as Menu$1, AlertTriangle, Trash2, Eraser, ZoomOut, Download, Lightbulb, PauseCircle, Link2, Tag, User, DollarSign } from 'lucide-react';
 import { useTranslate } from '@almadar/ui/hooks';
 import { useUISlots, useTheme } from '@almadar/ui/context';
 import { evaluate, createMinimalContext } from '@almadar/evaluator';
@@ -19271,6 +19271,7 @@ var init_CodeRunnerPanel = __esm({
       const [output, setOutput] = useState(null);
       const [error, setError] = useState(null);
       const [isRunning, setIsRunning] = useState(false);
+      const [copied, setCopied] = useState(false);
       const handleRun = useCallback(async () => {
         if (!onRun) return;
         setIsRunning(true);
@@ -19293,63 +19294,75 @@ var init_CodeRunnerPanel = __esm({
         setOutput(null);
         setError(null);
       }, [initialCode]);
+      const handleCopy = useCallback(async () => {
+        try {
+          await navigator.clipboard.writeText(code);
+          setCopied(true);
+          eventBus.emit("UI:COPY_CODE", { language, success: true });
+          setTimeout(() => setCopied(false), 2e3);
+        } catch {
+          eventBus.emit("UI:COPY_CODE", { language, success: false });
+        }
+      }, [code, language, eventBus]);
       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,
+        /* @__PURE__ */ jsxs(Box, { className: "group relative", style: { height: 360 }, children: [
+          /* @__PURE__ */ jsx(
+            CodeBlock,
             {
-              variant: output.exitCode === 0 ? "success" : "danger",
-              size: "sm",
+              language,
+              code,
+              editable: true,
+              onChange: setCode,
+              showLanguageBadge: true,
+              showCopyButton: false,
+              maxHeight: "100%"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            HStack,
+            {
+              gap: "xs",
+              align: "center",
+              className: "absolute top-2 right-2 z-10 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto focus-within:opacity-100 focus-within:pointer-events-auto transition-opacity bg-[var(--color-card)]/90 backdrop-blur-sm rounded-md p-1 shadow-sm border border-border",
               children: [
-                "Exit ",
-                output.exitCode
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: handleCopy,
+                    icon: copied ? Check : Copy,
+                    "aria-label": t("common.copy"),
+                    className: copied ? "text-success" : ""
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: handleReset,
+                    disabled: isRunning,
+                    icon: RotateCcw,
+                    "aria-label": "Reset"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "primary",
+                    size: "sm",
+                    onClick: handleRun,
+                    disabled: isRunning,
+                    icon: isRunning ? RotateCcw : Play,
+                    className: isRunning ? "[&_svg]:animate-spin" : "",
+                    children: isRunning ? t("common.loading") : "Run"
+                  }
+                )
               ]
             }
           )
@@ -19363,7 +19376,18 @@ var init_CodeRunnerPanel = __esm({
               className: "px-3 py-2 bg-card border-b border-border",
               children: [
                 /* @__PURE__ */ jsx(Terminal, { size: 16, className: "text-muted-foreground" }),
-                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-foreground font-medium", children: "Output" })
+                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-foreground font-medium", children: "Output" }),
+                output && /* @__PURE__ */ jsxs(
+                  Badge,
+                  {
+                    variant: output.exitCode === 0 ? "success" : "danger",
+                    size: "sm",
+                    children: [
+                      "Exit ",
+                      output.exitCode
+                    ]
+                  }
+                )
               ]
             }
           ),
@@ -39250,7 +39274,7 @@ function parseLessonSegments(lesson) {
     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|math|physics|biology|chemistry|probability)"\\s+description="(?<vizDesc>[^"]*?)"\\s*\\/?>)',
+    '(?<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>algorithms|math|physics|biology|chemistry|probability|freeform)"\\s+description="(?<vizDesc>[^"]*?)"\\s*\\/?>)',
     "gi"
   );
   let lastIndex = 0;

package/dist/providers/index.cjs

@@ -21969,6 +21969,7 @@ var init_CodeRunnerPanel = __esm({
       const [output, setOutput] = React87.useState(null);
       const [error, setError] = React87.useState(null);
       const [isRunning, setIsRunning] = React87.useState(false);
+      const [copied, setCopied] = React87.useState(false);
       const handleRun = React87.useCallback(async () => {
         if (!onRun) return;
         setIsRunning(true);
@@ -21991,63 +21992,75 @@ var init_CodeRunnerPanel = __esm({
         setOutput(null);
         setError(null);
       }, [initialCode]);
+      const handleCopy = React87.useCallback(async () => {
+        try {
+          await navigator.clipboard.writeText(code);
+          setCopied(true);
+          eventBus.emit("UI:COPY_CODE", { language, success: true });
+          setTimeout(() => setCopied(false), 2e3);
+        } catch {
+          eventBus.emit("UI:COPY_CODE", { language, success: false });
+        }
+      }, [code, language, eventBus]);
       if (!runnable || !onRun) {
         return /* @__PURE__ */ jsxRuntime.jsx(Box, { className, children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { language, code }) });
       }
       const hasOutput = output !== null || error !== null;
       return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("space-y-3", className), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          CodeBlock,
-          {
-            language,
-            code,
-            editable: true,
-            onChange: setCode,
-            showLanguageBadge: true,
-            showCopyButton: true
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", justify: "between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "primary",
-                size: "sm",
-                onClick: handleRun,
-                disabled: isRunning,
-                className: "min-w-[5rem]",
-                children: isRunning ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.RotateCcw, { size: 16, className: "animate-spin" }),
-                  t("common.loading")
-                ] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.Play, { size: 16 }),
-                  "Run"
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "secondary",
-                size: "sm",
-                onClick: handleReset,
-                disabled: isRunning,
-                children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.RotateCcw, { size: 16 }),
-                  "Reset"
-                ] })
-              }
-            )
-          ] }),
-          output && /* @__PURE__ */ jsxRuntime.jsxs(
-            Badge,
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "group relative", style: { height: 360 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CodeBlock,
             {
-              variant: output.exitCode === 0 ? "success" : "danger",
-              size: "sm",
+              language,
+              code,
+              editable: true,
+              onChange: setCode,
+              showLanguageBadge: true,
+              showCopyButton: false,
+              maxHeight: "100%"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            HStack,
+            {
+              gap: "xs",
+              align: "center",
+              className: "absolute top-2 right-2 z-10 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto focus-within:opacity-100 focus-within:pointer-events-auto transition-opacity bg-[var(--color-card)]/90 backdrop-blur-sm rounded-md p-1 shadow-sm border border-border",
               children: [
-                "Exit ",
-                output.exitCode
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: handleCopy,
+                    icon: copied ? LucideIcons2.Check : LucideIcons2.Copy,
+                    "aria-label": t("common.copy"),
+                    className: copied ? "text-success" : ""
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: handleReset,
+                    disabled: isRunning,
+                    icon: LucideIcons2.RotateCcw,
+                    "aria-label": "Reset"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "primary",
+                    size: "sm",
+                    onClick: handleRun,
+                    disabled: isRunning,
+                    icon: isRunning ? LucideIcons2.RotateCcw : LucideIcons2.Play,
+                    className: isRunning ? "[&_svg]:animate-spin" : "",
+                    children: isRunning ? t("common.loading") : "Run"
+                  }
+                )
               ]
             }
           )
@@ -22061,7 +22074,18 @@ var init_CodeRunnerPanel = __esm({
               className: "px-3 py-2 bg-card border-b border-border",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.Terminal, { size: 16, className: "text-muted-foreground" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-foreground font-medium", children: "Output" })
+                /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-foreground font-medium", children: "Output" }),
+                output && /* @__PURE__ */ jsxRuntime.jsxs(
+                  Badge,
+                  {
+                    variant: output.exitCode === 0 ? "success" : "danger",
+                    size: "sm",
+                    children: [
+                      "Exit ",
+                      output.exitCode
+                    ]
+                  }
+                )
               ]
             }
           ),

package/dist/providers/index.js

@@ -21895,6 +21895,7 @@ var init_CodeRunnerPanel = __esm({
       const [output, setOutput] = useState(null);
       const [error, setError] = useState(null);
       const [isRunning, setIsRunning] = useState(false);
+      const [copied, setCopied] = useState(false);
       const handleRun = useCallback(async () => {
         if (!onRun) return;
         setIsRunning(true);
@@ -21917,63 +21918,75 @@ var init_CodeRunnerPanel = __esm({
         setOutput(null);
         setError(null);
       }, [initialCode]);
+      const handleCopy = useCallback(async () => {
+        try {
+          await navigator.clipboard.writeText(code);
+          setCopied(true);
+          eventBus.emit("UI:COPY_CODE", { language, success: true });
+          setTimeout(() => setCopied(false), 2e3);
+        } catch {
+          eventBus.emit("UI:COPY_CODE", { language, success: false });
+        }
+      }, [code, language, eventBus]);
       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,
+        /* @__PURE__ */ jsxs(Box, { className: "group relative", style: { height: 360 }, children: [
+          /* @__PURE__ */ jsx(
+            CodeBlock,
             {
-              variant: output.exitCode === 0 ? "success" : "danger",
-              size: "sm",
+              language,
+              code,
+              editable: true,
+              onChange: setCode,
+              showLanguageBadge: true,
+              showCopyButton: false,
+              maxHeight: "100%"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            HStack,
+            {
+              gap: "xs",
+              align: "center",
+              className: "absolute top-2 right-2 z-10 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto focus-within:opacity-100 focus-within:pointer-events-auto transition-opacity bg-[var(--color-card)]/90 backdrop-blur-sm rounded-md p-1 shadow-sm border border-border",
               children: [
-                "Exit ",
-                output.exitCode
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: handleCopy,
+                    icon: copied ? Check : Copy,
+                    "aria-label": t("common.copy"),
+                    className: copied ? "text-success" : ""
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: handleReset,
+                    disabled: isRunning,
+                    icon: RotateCcw,
+                    "aria-label": "Reset"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "primary",
+                    size: "sm",
+                    onClick: handleRun,
+                    disabled: isRunning,
+                    icon: isRunning ? RotateCcw : Play,
+                    className: isRunning ? "[&_svg]:animate-spin" : "",
+                    children: isRunning ? t("common.loading") : "Run"
+                  }
+                )
               ]
             }
           )
@@ -21987,7 +22000,18 @@ var init_CodeRunnerPanel = __esm({
               className: "px-3 py-2 bg-card border-b border-border",
               children: [
                 /* @__PURE__ */ jsx(Terminal, { size: 16, className: "text-muted-foreground" }),
-                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-foreground font-medium", children: "Output" })
+                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-foreground font-medium", children: "Output" }),
+                output && /* @__PURE__ */ jsxs(
+                  Badge,
+                  {
+                    variant: output.exitCode === 0 ? "success" : "danger",
+                    size: "sm",
+                    children: [
+                      "Exit ",
+                      output.exitCode
+                    ]
+                  }
+                )
               ]
             }
           ),

package/dist/runtime/index.cjs

@@ -21556,6 +21556,7 @@ var init_CodeRunnerPanel = __esm({
       const [output, setOutput] = React85.useState(null);
       const [error, setError] = React85.useState(null);
       const [isRunning, setIsRunning] = React85.useState(false);
+      const [copied, setCopied] = React85.useState(false);
       const handleRun = React85.useCallback(async () => {
         if (!onRun) return;
         setIsRunning(true);
@@ -21578,63 +21579,75 @@ var init_CodeRunnerPanel = __esm({
         setOutput(null);
         setError(null);
       }, [initialCode]);
+      const handleCopy = React85.useCallback(async () => {
+        try {
+          await navigator.clipboard.writeText(code);
+          setCopied(true);
+          eventBus.emit("UI:COPY_CODE", { language, success: true });
+          setTimeout(() => setCopied(false), 2e3);
+        } catch {
+          eventBus.emit("UI:COPY_CODE", { language, success: false });
+        }
+      }, [code, language, eventBus]);
       if (!runnable || !onRun) {
         return /* @__PURE__ */ jsxRuntime.jsx(Box, { className, children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { language, code }) });
       }
       const hasOutput = output !== null || error !== null;
       return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("space-y-3", className), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          CodeBlock,
-          {
-            language,
-            code,
-            editable: true,
-            onChange: setCode,
-            showLanguageBadge: true,
-            showCopyButton: true
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", justify: "between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "primary",
-                size: "sm",
-                onClick: handleRun,
-                disabled: isRunning,
-                className: "min-w-[5rem]",
-                children: isRunning ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.RotateCcw, { size: 16, className: "animate-spin" }),
-                  t("common.loading")
-                ] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.Play, { size: 16 }),
-                  "Run"
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "secondary",
-                size: "sm",
-                onClick: handleReset,
-                disabled: isRunning,
-                children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.RotateCcw, { size: 16 }),
-                  "Reset"
-                ] })
-              }
-            )
-          ] }),
-          output && /* @__PURE__ */ jsxRuntime.jsxs(
-            Badge,
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "group relative", style: { height: 360 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CodeBlock,
             {
-              variant: output.exitCode === 0 ? "success" : "danger",
-              size: "sm",
+              language,
+              code,
+              editable: true,
+              onChange: setCode,
+              showLanguageBadge: true,
+              showCopyButton: false,
+              maxHeight: "100%"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            HStack,
+            {
+              gap: "xs",
+              align: "center",
+              className: "absolute top-2 right-2 z-10 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto focus-within:opacity-100 focus-within:pointer-events-auto transition-opacity bg-[var(--color-card)]/90 backdrop-blur-sm rounded-md p-1 shadow-sm border border-border",
               children: [
-                "Exit ",
-                output.exitCode
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: handleCopy,
+                    icon: copied ? LucideIcons2.Check : LucideIcons2.Copy,
+                    "aria-label": t("common.copy"),
+                    className: copied ? "text-success" : ""
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: handleReset,
+                    disabled: isRunning,
+                    icon: LucideIcons2.RotateCcw,
+                    "aria-label": "Reset"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "primary",
+                    size: "sm",
+                    onClick: handleRun,
+                    disabled: isRunning,
+                    icon: isRunning ? LucideIcons2.RotateCcw : LucideIcons2.Play,
+                    className: isRunning ? "[&_svg]:animate-spin" : "",
+                    children: isRunning ? t("common.loading") : "Run"
+                  }
+                )
               ]
             }
           )
@@ -21648,7 +21661,18 @@ var init_CodeRunnerPanel = __esm({
               className: "px-3 py-2 bg-card border-b border-border",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.Terminal, { size: 16, className: "text-muted-foreground" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-foreground font-medium", children: "Output" })
+                /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-foreground font-medium", children: "Output" }),
+                output && /* @__PURE__ */ jsxRuntime.jsxs(
+                  Badge,
+                  {
+                    variant: output.exitCode === 0 ? "success" : "danger",
+                    size: "sm",
+                    children: [
+                      "Exit ",
+                      output.exitCode
+                    ]
+                  }
+                )
               ]
             }
           ),

package/dist/runtime/index.js

@@ -21482,6 +21482,7 @@ var init_CodeRunnerPanel = __esm({
       const [output, setOutput] = useState(null);
       const [error, setError] = useState(null);
       const [isRunning, setIsRunning] = useState(false);
+      const [copied, setCopied] = useState(false);
       const handleRun = useCallback(async () => {
         if (!onRun) return;
         setIsRunning(true);
@@ -21504,63 +21505,75 @@ var init_CodeRunnerPanel = __esm({
         setOutput(null);
         setError(null);
       }, [initialCode]);
+      const handleCopy = useCallback(async () => {
+        try {
+          await navigator.clipboard.writeText(code);
+          setCopied(true);
+          eventBus.emit("UI:COPY_CODE", { language, success: true });
+          setTimeout(() => setCopied(false), 2e3);
+        } catch {
+          eventBus.emit("UI:COPY_CODE", { language, success: false });
+        }
+      }, [code, language, eventBus]);
       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,
+        /* @__PURE__ */ jsxs(Box, { className: "group relative", style: { height: 360 }, children: [
+          /* @__PURE__ */ jsx(
+            CodeBlock,
             {
-              variant: output.exitCode === 0 ? "success" : "danger",
-              size: "sm",
+              language,
+              code,
+              editable: true,
+              onChange: setCode,
+              showLanguageBadge: true,
+              showCopyButton: false,
+              maxHeight: "100%"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            HStack,
+            {
+              gap: "xs",
+              align: "center",
+              className: "absolute top-2 right-2 z-10 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto focus-within:opacity-100 focus-within:pointer-events-auto transition-opacity bg-[var(--color-card)]/90 backdrop-blur-sm rounded-md p-1 shadow-sm border border-border",
               children: [
-                "Exit ",
-                output.exitCode
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: handleCopy,
+                    icon: copied ? Check : Copy,
+                    "aria-label": t("common.copy"),
+                    className: copied ? "text-success" : ""
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: handleReset,
+                    disabled: isRunning,
+                    icon: RotateCcw,
+                    "aria-label": "Reset"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "primary",
+                    size: "sm",
+                    onClick: handleRun,
+                    disabled: isRunning,
+                    icon: isRunning ? RotateCcw : Play,
+                    className: isRunning ? "[&_svg]:animate-spin" : "",
+                    children: isRunning ? t("common.loading") : "Run"
+                  }
+                )
               ]
             }
           )
@@ -21574,7 +21587,18 @@ var init_CodeRunnerPanel = __esm({
               className: "px-3 py-2 bg-card border-b border-border",
               children: [
                 /* @__PURE__ */ jsx(Terminal, { size: 16, className: "text-muted-foreground" }),
-                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-foreground font-medium", children: "Output" })
+                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-foreground font-medium", children: "Output" }),
+                output && /* @__PURE__ */ jsxs(
+                  Badge,
+                  {
+                    variant: output.exitCode === 0 ? "success" : "danger",
+                    size: "sm",
+                    children: [
+                      "Exit ",
+                      output.exitCode
+                    ]
+                  }
+                )
               ]
             }
           ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.145.0",
+  "version": "5.146.1",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [