@almadar/ui 5.146.0 → 5.146.2

package/dist/avl/index.cjs

@@ -18412,8 +18412,10 @@ var init_CodeBlock = __esm({
                       ref: editableTextareaRef,
                       defaultValue: code,
                       onChange: (e) => {
-                        setEditableValue(e.target.value);
-                        onChange?.(e.target.value);
+                        const v = e.target.value;
+                        lastPropCodeRef.current = v;
+                        setEditableValue(v);
+                        onChange?.(v);
                       },
                       onScroll: handleEditableScroll,
                       spellCheck: false,
@@ -24234,6 +24236,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 +24259,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 +24341,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

@@ -18336,8 +18336,10 @@ var init_CodeBlock = __esm({
                       ref: editableTextareaRef,
                       defaultValue: code,
                       onChange: (e) => {
-                        setEditableValue(e.target.value);
-                        onChange?.(e.target.value);
+                        const v = e.target.value;
+                        lastPropCodeRef.current = v;
+                        setEditableValue(v);
+                        onChange?.(v);
                       },
                       onScroll: handleEditableScroll,
                       spellCheck: false,
@@ -24158,6 +24160,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 +24183,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 +24265,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

@@ -11122,8 +11122,10 @@ var init_CodeBlock = __esm({
                       ref: editableTextareaRef,
                       defaultValue: code,
                       onChange: (e) => {
-                        setEditableValue(e.target.value);
-                        onChange?.(e.target.value);
+                        const v = e.target.value;
+                        lastPropCodeRef.current = v;
+                        setEditableValue(v);
+                        onChange?.(v);
                       },
                       onScroll: handleEditableScroll,
                       spellCheck: false,
@@ -19346,6 +19348,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 +19371,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 +19453,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
+                    ]
+                  }
+                )
               ]
             }
           ),

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';
@@ -11047,8 +11047,10 @@ var init_CodeBlock = __esm({
                       ref: editableTextareaRef,
                       defaultValue: code,
                       onChange: (e) => {
-                        setEditableValue(e.target.value);
-                        onChange?.(e.target.value);
+                        const v = e.target.value;
+                        lastPropCodeRef.current = v;
+                        setEditableValue(v);
+                        onChange?.(v);
                       },
                       onScroll: handleEditableScroll,
                       spellCheck: false,
@@ -19271,6 +19273,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 +19296,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 +19378,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
+                    ]
+                  }
+                )
               ]
             }
           ),